When should you use a watcher in Vue instead of a computed property?
Quick Answer
Use a computed to derive a value you display. Use a watcher when a change should trigger a side effect — call an API, write to localStorage, imperatively animate — or when you need the old and new value, or the reaction is async.
Computed is for a value I'm going to show — a full name from first and last. A watcher is for doing something when a value changes: fire off an API request when the search term changes, save to localStorage, kick off an animation. Watchers also give me the old and new value and can be async. So the rule is: producing a value to display is computed; reacting to a change with an action is a watcher. And a search watcher should be debounced so it's not one request per keystroke.
watch(searchTerm, (val) => fetchResults(val))— debounce this to avoid a request per keystroke.{ immediate: true }runs the watcher once on mount;{ deep: true }watches nested changes (expensive).watchEffect(() => { ... })runs immediately and re-runs whenever any reactive dependency it reads changes — no explicit source.- If you're computing a value to render, that's a computed, not a watcher.