vue3 setup watch 深层监听

在Vue3中，可以使用`watch`函数来监听数据的变化。如果要深度监听一个对象的变化，可以使用`deep`选项。下面是一个示例代码：

import { ref, watch } from 'vue'

export default {
  setup() {
    const obj = ref({
      a: {
        b: {
          c: 1
        }
      }
    })

    watch(() => obj.value, (newVal, oldVal) => {
      console.log('obj changed', newVal, oldVal)
    }, { deep: true })

    return {
      obj
    }
  }
}

在上面的代码中，我们使用了`ref`函数来创建一个响应式对象`obj`，并使用`watch`函数来监听`obj`的变化。在`watch`函数的第三个参数中，我们设置了`deep`选项为`true`，表示要深度监听`obj`的变化。这样，当`obj`中的任何一个属性发生变化时，都会触发`watch`函数的回调函数。