Vue Tip: watch() vs. watchEffect()

We can use the watch() hook to trigger a callback whenever a piece of reactive state changes. It also enables us to access the previous value of the watched variables:

<script>
// The callback is called whenever 'refA' changes
watch(refA, () => {
  console.log(refA.value)
  console.log(refB.value)
})
</script>

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:

<script>
// The callback is called immediately, and whenever 'refA' or 'refB' changes
watchEffect(() => {
  console.log(refA.value)
  console.log(refB.value)
})
</script>

watchEffect() might seem superior to watch(), but if you only want to trigger the callback function when one or multiple specific variables change, you must use watch() instead of watchEffect().