Computed and watchers

Computed properties derive cached values from reactive sources—they recompute only when dependencies change. Watchers run side effects when a source changes.

computed

const fullName = computed(() => `${first.value} ${last.value}`);

Use computed for derived UI text, filters, and flags—similar to memoized selectors or React’s useMemo for values (not side effects).

watch

watch(search, (query) => {
  printOutput(`Searching: ${query}`);
});

Watch when you need to sync with external systems: logging, fetches, localStorage, or validating input after it settles.

watchEffect

watchEffect runs immediately and tracks dependencies automatically—handy for quick prototypes; explicit watch is clearer when multiple sources interact.

Important interview questions and answers

1. Q: computed vs method in template?
   A: Computed caches until deps change; methods run every render—use computed for expensive pure derivations.
2. Q: computed vs watch?
   A: Computed returns a value; watch reacts to changes with side effects.

Self-check

1. When would you choose watch over computed?
2. Does a computed property run on every render?