如何监听vuejs中作为对象的道具的更改

<template>
  <div>
    <input v-model="user.name" placeholder="Enter your name">
    <p>Name: {{ user.name }}</p>
  </div>
</template>

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

export default {
  setup() {
    const user = ref({ name: '' });

    watch(user, (newValue, oldValue) => {
      console.log(`User changed from ${JSON.stringify(oldValue)} to ${JSON.stringify(newValue)}`);
    }, {
      deep: true // 深度监听
    });

    return { user };
  }
};
</script>

<template>
  <div>
    <input v-model="user.name" placeholder="Enter your name">
    <p>Name: {{ user.name }}</p>
  </div>
</template>

<script>
import { ref, watchEffect } from 'vue';

export default {
  setup() {
    const user = ref({ name: '' });

    watchEffect(() => {
      console.log(`User name is now ${user.value.name}`);
    });

    return { user };
  }
};
</script>