Implement Deep Watchers for Nested Data Changes in Vue 3

<template>
  <div>
    <p>User Name: {{ user.name }}</p>
    <p>User Address City: {{ user.address.city }}</p>
    <p>Messages: {{ messages.length }}</p>
    <button @click="changeUserName">Change Name</button>
    <button @click="changeUserCity">Change City</button>
    <button @click="addMessage">Add Message</button>
  </div>
</template>

<script setup>
import { reactive, ref, watch } from 'vue';

const user = reactive({
  name: 'Alice',
  age: 30,
  address: {
    street: '123 Vue St',
    city: 'Vueville',
    zip: '12345'
  }
});

const messages = ref(['Hello', 'World']);

// Watch a reactive object deeply
watch(
  user,
  (newValue, oldValue) => {
    console.log('User (deep watch) changed!');
    console.log('New User:', newValue);
    console.log('Old User:', oldValue); // Note: oldValue for deep watches is the same object as newValue in most cases, requiring a clone if you need a true snapshot.
  },
  { deep: true }
);

// Watch a ref array deeply (also implicitly deep for refs holding objects)
watch(
  messages,
  (newValue, oldValue) => {
    console.log('Messages (deep watch) changed!');
    console.log('New Messages:', newValue);
    console.log('Old Messages:', oldValue);
  },
  { deep: true }
);

const changeUserName = () => {
  user.name = 'Bob'; // Triggers deep watch
};

const changeUserCity = () => {
  user.address.city = 'Nuxt City'; // Triggers deep watch due to deep: true
};

const addMessage = () => {
  messages.value.push('New message ' + (messages.value.length + 1)); // Triggers deep watch
};

// Example: Watch a specific nested property
watch(
  () => user.address.city,
  (newCity, oldCity) => {
    console.log(`User's city changed from ${oldCity} to ${newCity}`);
  }
);
</script>