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' changeswatch(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' changeswatchEffect(() => {  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().