Vue 3 Composition API – watchEffect vs. watch

What helped me to understand the difference between watch and watchEffect in Vue 3 was to think about watchEffect as computed with side-effects.

The watchEffect() hook works like the computed() hook or the computed option, but instead of returning a value, you use it to trigger side-effects.

Use watch whenever you want to trigger a side-effect when a single reactive value changes.

// Triggers whenever `user` is updated.
watch(user, () => doSomething({ user: user.value, profile: profile.value }))

Use watchEffect whenever you need to watch multiple reactive values and trigger a side-effect whenever any of them is updated.

// Triggers whenever `user` *or* `profile` is updated.
watchEffect(() => doSomething({ user: user.value, profile: profile.value }))

See: watch vs. watchEffect when to use what with Vue.js