Vue computed vs method: performance difference and when to choose each?

WHAT THIS TESTS: This question evaluates whether you understand Vue's reactivity system beyond simple API usage. It checks if you know how computed properties leverage dependency tracking to avoid redundant work, and whether you can distinguish declarative derived state from imperative function calls inside templates.

A GOOD ANSWER COVERS: Four things in order. First, caching behavior: a computed property memoizes its return value and only invalidates that cache when one of its tracked reactive dependencies changes, so multiple template reads between dependency changes cost almost nothing. Second, method behavior: a method is just a function, so every time the component re-renders the method executes again even if nothing it cares about has changed. Third, when to choose computed: use it for derived state that depends on reactive data, has no side effects, and does not need arguments. Fourth, when to choose methods: use them for event handlers, explicit user actions, or any logic that requires arguments because computed getters do not accept parameters.

COMMON WRONG ANSWERS: Three patterns are red flags. One, saying computed is faster in all cases without explaining the caching mechanism or noting that the first evaluation is identical to a method. Two, trying to pass arguments to a computed property, which breaks the caching model and indicates confusion about getters. Three, using a method for heavy calculations that only depend on reactive data, which wastes CPU on every render cycle unnecessarily.

LIKELY FOLLOW-UPS: An interviewer might ask how computed differs from a watcher, which would require explaining that computed is for declarative derived values while watchers are for imperative side effects. They might also ask about writable computed properties with getters and setters, or how computed behaves inside a v-for when the item changes. Another follow-up is asking for the performance impact of a computed that returns a new object literal every time, which would defeat caching because the dependency tracking sees a new reference.

ONE CONCRETE EXAMPLE: Imagine a shopping cart with an items array. A computed property named totalPrice reads items and calculates a sum. If the user toggles a UI panel that causes a re-render but does not change items, totalPrice returns the cached sum instantly. If totalPrice were a method instead, the sum would recalculate on every toggle even though the cart did not change. Conversely, a formatCurrency method that accepts a raw number argument is a better fit as a method because computed properties cannot take parameters and caching per-argument value is not their designed purpose.