Fundamental difference between Vue computed and watcher with examples

WHAT THIS TESTS: This question tests whether you understand the architectural split between deriving state and reacting to change in Vue's reactivity system. Interviewers want to see that you know computed is declarative and memoized while watch is imperative and meant for side effects. They also want to see if you can identify caching behavior and avoid common anti-patterns like using watch to build derived data or using computed to trigger asynchronous work.

A GOOD ANSWER COVERS: Four things in order. First, define computed as a synchronous pure getter that produces a derived value from reactive dependencies and caches it until those dependencies change. Second, define watch as a callback-driven primitive that runs when a reactive source changes and is designed for side effects such as network requests, manual DOM updates, or syncing external state. Third, give a concrete computed example such as filtering a large list by a search query where the result is used directly in a template and benefits from lazy evaluation and memoization. Fourth, give a concrete watch example such as watching a route parameter ID and fetching new user data from an API whenever it changes, because this is an imperative side effect that does not return a value for the template.

COMMON WRONG ANSWERS: Three red flags stand out. One, saying computed and watch are interchangeable or that the difference is just syntax. Two, using watch to manually compute a value, set another data property, and then bind that property in a template; this bypasses Vue's dependency tracking and loses caching. Three, using computed to perform async operations like API calls inside the getter; computed must be synchronous and pure, so async work here breaks reactivity expectations and can cause infinite loops or stale data.

LIKELY FOLLOW-UPS: The interviewer may ask how computed caching actually works and when it updates, which is when any reactive dependency inside the getter changes. They may ask about the difference between watch and watchEffect, where watch tracks a specific source explicitly and watchEffect auto-tracks dependencies inside its callback. They may also ask about writable computed properties with getters and setters, or how to watch deep properties and arrays.

ONE CONCRETE EXAMPLE: For computed, imagine a shopping cart with an items array. A computed property named totalPrice maps over items and sums item.price times item.quantity. It only re-evaluates when items changes, and the template simply renders totalPrice. For watch, imagine a profile page with a userId route parameter. A watcher on userId triggers an async fetchUserProfile call, updates a local userProfile ref, and optionally handles loading states. The computed is pure derivation; the watch is imperative reaction.