Whats the difference between `watch()` and `watchEffect()`?

Both watch and watchEffect are Composition API functions used for reactivity, but they serve different purposes and behave differently.

watch: It is used to watch specific reactive sources (like ref or computed) and respond to changes. This function is lazy. i.e, The callback is not called immediately but only on changes. It is useful when you need to access both old and new values, and performs side-effects conditionally.

watch(count, (newVal, oldVal) => {
console.log('Count changed:', newVal);
});

watchEffect: This function is automatic and eager. It runs a function immediately and tracks its dependencies automatically. It cannot access old values directly.

watchEffect(() => {
console.log(`Count is ${count.value}`);
});