Interview answer drill

Use this Vue interview question to rehearse a quick answer, common mistake, follow-up, and production pitfall.

Practice interview questions Follow 30-day foundations study plan Practice more Vue.js interview questions

What are computed properties in Vue?Frontend interview answer

HighIntermediateVue

By FrontendAtlas Team · Updated Apr 10, 2026

Interview focus

This Vue interview question tests whether you can explain Vue computed properties: cached derived state, method pitfalls, and purity rules, connect it to production trade-offs, and handle common follow-up questions.

Vue computed properties: cached derived state, method pitfalls, and purity rules explanation without falling back to memorized docs wording
Computed and Reactivity reasoning, edge cases, and production failure modes
How you would answer the most likely Vue interview follow-up

Practice more Vue.js interview questions

Interview quick answer

Computed properties are cached derived state in Vue. Strong answers compare them with template methods, show a real performance-use case like cart totals or filtered lists, and explain why computed getters should stay pure and synchronous.

Full interview answer

Overview

Computed properties in Vue are cached derived state. They are the right tool when you want to calculate a value from reactive inputs and reuse that value across renders without recomputing it on every unrelated UI change.

HTML

<template>
  <div>
    <p>First Name: {{ firstName }}</p>
    <p>Last Name: {{ lastName }}</p>
    <p>Full Name (computed): {{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'Mina',
      lastName: 'Yilmaz'
    };
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
};
</script>

In this example, fullName is a computed property that automatically re-calculates when firstName or lastName changes. Vue caches its value until one of these dependencies updates, avoiding unnecessary re-renders.

How Computed Properties Work
When Vue initializes a computed property, it tracks the reactive dependencies used inside the property. When any of those dependencies change, Vue marks the computed property as 'dirty' and re-evaluates it upon the next access.

Computed vs Methods
While both can return derived values, computed properties are cached and only re-run when dependencies change. In contrast, methods are executed every time they are called, regardless of data changes.

Feature	Computed	Method
Caching	Yes (re-evaluates only when dependencies change)	No (runs every time it’s called)
Use Case	For derived or reactive data	For event-driven or non-reactive actions
Performance	Optimized for efficiency	Less efficient for repeated calls

Comparison Between Computed Properties and Methods

Worked scenario: computed vs method in a real component

A cart drawer renders subtotal and filtered line items. If you calculate that data with a method called from the template, Vue reruns the work on every component render — even when an unrelated flag like a theme toggle changes. A computed getter caches the derived result until the reactive inputs it used actually change.

HTML

<script setup>
import { ref, computed } from 'vue';

const items = ref([{ id: 1, price: 20, qty: 2 }]);
const theme = ref('light');

function subtotalViaMethod() {
  return items.value.reduce((sum, item) => sum + item.price * item.qty, 0);
}

const subtotal = computed(() =>
  items.value.reduce((sum, item) => sum + item.price * item.qty, 0)
);
</script>

<template>
  <p>Method total: {{ subtotalViaMethod() }}</p>
  <p>Computed total: {{ subtotal }}</p>
  <button @click="theme = theme === 'light' ? 'dark' : 'light'">Toggle theme</button>
</template>

<!-- Toggling theme rerenders the component.
     The method runs again; the computed value is reused until items change. -->

JAVASCRIPT

computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('');
  }
}

Here, the computed property reversedMessage will only re-run when message changes, not on every render cycle.

Computed Getters and Setters
Computed properties can also include a setter to handle updates in both directions.

JAVASCRIPT

computed: {
  fullName: {
    get() {
      return this.firstName + ' ' + this.lastName;
    },
    set(value) {
      const parts = value.split(' ');
      this.firstName = parts[0];
      this.lastName = parts[1];
    }
  }
}

Now, assigning a value like this.fullName = 'Jane Doe' automatically updates firstName and lastName.

Important follow-up

Computed getters should stay pure and synchronous. If you need to fetch data, write to storage, log analytics, or trigger any other side effect when reactive state changes, that belongs in <a href="/vue/trivia/vue-computed-vs-watchers">watch / watchEffect</a>, not in a computed getter.

Think of computed properties as smart variables that know when and how to update — they deliver dynamic results while minimizing unnecessary recalculations.

Practical scenario
You compute a cart total from line items and want it to update only when inputs change.

Common pitfalls

Using methods instead of computed, causing unnecessary recalculation.
Mutating state inside computed getters.
Forgetting computed must return a value.

Trade-off or test tip
Computed values are cached but should remain pure. Test updates when dependencies change.

Summary

Summary

Computed properties calculate values based on reactive data.
They are cached until dependencies change.
Useful for derived state and transformations.
Support both getters and setters for two-way interaction.