What is watch() and how is it used?

The watch() function observes a reactive source((like ref, reactive, getter functions or computed values)) and
runs a callback function whenever that source changes.

Syntax:

 watch(source, callback, options ?) 

• source: a ref, reactive property, getter function, or array of them.
• callback(newValue, oldValue): function to run when the value changes.
• options (optional): object to control behavior (e.g., immediate, deep).

#### Example 1: Watching a ref

import {ref, watch} from 'vue';
    
const count = ref(0);
    
watch(count, (newVal, oldVal) => {
   console.log(`Count changed from ${oldVal} to ${newVal}`);
});
count.value = 5; // triggers the watch callback

#### Example 2: Watching a function (getter)

const firstName = ref('Sudheer');
const lastName = ref('Jonna');
    
watch(
   () => `${firstName.value} ${lastName.value}`,
   (newFullName, oldFullName) => {
       console.log(`Full name changed from ${oldFullName} to ${newFullName}`);
   }
);

#### Example 3: Watching a reactive object deeply

    import {reactive, watch} from 'vue';
   
    const user = reactive({name: 'Sudheer', age: 38});
   
    watch(
       () => user,
       (newUser, oldUser) => {
           console.log('User object changed:', newUser);
       },
       {deep: true}
    );

The main uses of watch() are:

1. Watching route changes
2. Triggering API calls
3. Responding to complex data changes
4. Manually reacting to specific state updates

****