VueComputed PropertiesReactivityMethodsjunior level

Computed Properties vs. Methods in Vue

the question

What is the difference between computed properties and methods in Vue, and when would you use each?

what they're testing: The interviewer is checking whether you can model derived state cleanly and reason about Vue's reactive dependency tracking and caching.

a strong answer

Computed properties are for derived state, while methods are for work you want to run on demand. A computed getter tracks the reactive values it reads. Vue caches the result, marks it stale when one of those dependencies changes, and evaluates the getter again when the value is next read. Repeated reads can therefore reuse the same result.

A method is a normal callable function. A method called in a template binding runs whenever the component updates, so that kind of call should not have side effects. Methods can take arguments and are also a natural fit for event handlers or other actions. Use a method when every call must do fresh work, such as reading Date.now().

Use computed() for values such as a filtered list, a full name, or a cart total. Keep its getter pure: no state mutation, network request, or DOM change. Computed values are getter-only by default, although Vue supports an explicit get/set pair when a writable computed value is useful. The choice is about meaning first, not blanket performance. Parameterized work can belong in a method, while repeated or expensive derived work benefits from computed caching.

Where people slip

the tempting wrong answer, and what's actually true

Computed properties are just shorter syntax for methods, so the two are interchangeable.
A computed property is cached against tracked reactive dependencies, while a method executes whenever it is called.
A computed property reruns on every component render.
Vue reuses the cached value until a reactive dependency of the computed getter changes.
A computed property based on `Date.now()` updates as time passes.
`Date.now()` is not reactive, so it does not invalidate the computed property's cached value.
Computed properties can never be assigned to.
They are getter-only by default, but Vue supports writable computed properties with explicit `get` and `set` functions.

If they push further

What if the calculation needs an argument?

Use a method when callers need to pass arguments. Reading a computed value does not let the caller supply arguments to its getter.

How is a computed property different from a watcher?

A computed getter declaratively returns derived state and should stay pure; a watcher is for running side effects in response to reactive changes.

Can a computed property depend on non-reactive data?

It can read non-reactive data, but changes to that data will not invalidate the cache. Re-evaluation requires a tracked reactive dependency to change.

Sources

Now answer it yourself.

Reading a strong answer is easy. Producing one under pressure is the skill the interview tests. Gapmap grades your answer against the same bar an interviewer would.

was this useful?

beta

The interviewer part is in the works.

The diagnostic, personal maps, and AI mock interviews are being finished right now. The notes stay free either way. Leave an email and you'll get the first-cohort invite, plus a month of Pro when it opens.