vue3 watch使用方式，如何监听reactive子属性 ref数据等

代码

<template>
  <div class="box">childB</div>
</template>
<script lang="ts" setup>
import { reactive, watch, ref } from "vue";

const data1 = reactive({
  msg: "childB",
  abc: "sldfkjslfd",
  ddd: 1,
});
//监听reactive 数据方式1
watch(
  data1,
  (val) => {
    console.log("data1_change", val);
  },
  {
    immediate: true, //加载组件就会触发监听
  }
);
// 监听reactive 数据方式2，监听子属性，多个子属性
watch(
  () => [data1.ddd, data1.msg],
  (val: Array<any>) => {
    console.log("data1_ddd_change", val);
  },
  {
    deep: true,
  }
);
/**
 * 总之第一个参数需要为object类型才行，不能直接reactive子属性直接监听，需要利用数组或者函数转化来监听
 */
// 监听reactive 数据方式3，监听多个属性
watch(
  [() => data1.ddd, () => data1.msg],
  (val: Array<any>) => {
    console.log("监听reactive多个属性：", val);
  },
  {
    deep: true,
  }
);

setTimeout(() => {
  data1.ddd = 3;
  setTimeout(() => {
    data1.msg = "msg_change";
  }, 2000);
}, 2000);

const ref1 = ref("ttt");
const ref2 = ref(333);

// 监听ref数据方式1
watch(
  ref1,
  (val) => {
    console.log("ref1_change", val);
  },
  {
    immediate: true, //加载组件就会触发监听
  }
);
// 监听ref数据方式2，监听多个ref
watch(
  [ref1, ref2],
  (val: Array<any>) => {
    console.log("监听ref多个属性：", val);
  },
  {
    deep: true,
  }
);

setTimeout(() => {
  ref1.value = "ttt2";
  setTimeout(() => {
    ref2.value = 3333;
  }, 2000);
}, 2000);
</script>
<style lang="stylus" scoped></style>