watch and watchEffect both allow us to reactively perform side effects. Their main difference is the way they track their reactive dependencies:
watch only tracks the explicitly watched source. It won’t track anything accessed inside the callback. In addition, the callback only triggers when the source has changed. watch separates dependency tracking from the side effect, giving us more precise control over when the callback should fire.
watchEffect, on the other hand, combines dependency tracking and side effects into one phase. It automatically tracks every reactive property accessed during its synchronous execution. This is more convenient and typically results in terser code, but makes its reactive dependencies less explicit.