The difference between watch and watchEffect in Vue.js

watch and watchEffect both let you run side effects. So how do they differ?

Both react to state changes in reactive variables, but:

➝ watch only tracks the source it is given: it does not react to state changes in the other variables used inside the callback.

➝ watchEffect reacts to a state change in any reactive property read during its synchronous execution — every reactive variable used before the first await tick. The resulting code is more concise, but it makes its reactive dependencies less explicit. With watchEffect there is no long list of dependencies to maintain by hand, and no need for { immediate: true } to run it straight away.