Vue3.0中Watch的几个问题

<template>
  <h2>当前求和为：{{ sum }}</h2>
  <button @click="sum++">点我+1</button>
  <hr />
  <h2>当前的信息为：{{ msg }}</h2>
  <button @click="msg += '!'">修改信息</button>
  <hr />
  姓名：<input type="text" v-model="person.name" /> 年龄：<input
    type="text"
    v-model="person.age"
  />

  子姓名：<input type="text" v-model="person.obj.name1" /> 子年龄：<input
    type="text"
    v-model="person.obj.age1"
  />
</template>

<script>
import { reactive, computed, ref, watch } from "vue";
export default {
  setup(props) {
    let sum = ref(0);
    let msg = ref("你好啊");
    let person = reactive({
      name: "毛宣飞",
      age: 18,
      obj: {
        name1: "张三",
        age1: 22,
      },
    });

    /*
       情况一：监视ref所定义的响应式数据
       watch(sum,(newvalue,oldvalue)=>{
       console.log('sum变了',newvalue,oldvalue);
       })

*/
    /*
    情况二：监视ref所定义的响应式数据
    watch([msg,sum],(newvalue,oldvalue)=>{
      console.log('msg变了',newvalue,oldvalue);
    },{immediate:true,})
*/

    /* 
      情况三：监视reactive所定义的一个响应式数据的全部属性
       1.注意：此处无法正确的监听到旧值(oldvalue)
       2.注意：强制开启了深度监听(deep配置无效)
        watch(person, (newvalue, oldvalue) => {
      console.log(newvalue, oldvalue);
    });
*/
    /*
     情况四：监视reactive所定义的一个响应式数据中的某个属性
     监听的这个属性需要通过函数的形式书写
    watch(()=>person.name,(newvalue,oldvalue)=>{
      console.log(newvalue,oldvalue);
    })
*/
    /*
     情况五：监视reactive所定义的一个响应式数据中的某些属性
     watch([()=>person.name,()=>person.age],(newvalue,oldvalue)=>{
    console.log(newvalue,oldvalue);
})
*/

    /*
     特殊情况
         watch(
      () => person.obj,
      (newvalue, oldvalue) => {
        console.log(newvalue, oldvalue);
      },
      { deep: true }
    ); //此处由于监视的时reactive定义的对象中的某个属性所以deep配置有效

*/
    return {
      sum,
      msg,
      person,
    };
  },
};`