Vue 3 watchEffect vs watch: When to Use Each

Vue 3's Composition API gives you two reactive watchers: watch() and watchEffect(). They look interchangeable until you hit the cases where they are not. Here is a simple way to pick.

watchEffect: track everything you touch

watchEffect() runs immediately and re-runs whenever any reactive dependency it touched during the last run changes. You do not list the dependencies — Vue tracks them automatically.

Use it when the dependencies are obvious from the code and you do not want to maintain a list. Pulling derived data, syncing UI state, and effects that depend on multiple refs at once are all good cases.

watch: precise about the trigger

watch() is explicit. You pass it a reactive source (a ref, getter, or array of either) and a callback. The callback gets the new and old values. It only fires when that specific source changes.

Use it when the trigger needs to be precise — fetching when a route param changes, or running validation when one specific field changes. watchEffect would over-trigger if other reactive state happens to be touched.

Two practical rules

• If you need the previous value, use watch — watchEffect does not give you old values.
• If you want immediate execution, use watchEffect (immediate by default) or pass { immediate: true } to watch.

Most real components use both: watch for navigation and form effects, watchEffect for derived rendering effects.