什麼時候寫deep這個問題 困擾了我很久。這次深度解析下：

需要 deep: true 的情況
// 情況1：直接監聽一個 ref/reactive 對象，且可能只修改內部屬性

const obj = ref({ a: { b: 1 } })
watch(obj, callback)  // 不會觸發
obj.value.a.b = 2     // 修改內部屬性
watch(obj, callback, { deep: true }) // 會觸發
obj.value.a.b = 2    // 修改內部屬性

// 情況2：監聽一個可能被複用的對象引用

const config = ref({ formItems: [...] })
watch(config, callback)  // 不會觸發
config.value.formItems[0].options.items = [...]  // 只修改內部屬性
watch(config, callback, { deep: true })  // 會觸發config.value.formItems[0].options.items = [...]

不需要 deep: true 的情況
// 情況1：監聽 computed（總是返回新對象）

const computedValue = computed(() => ({ ...someValue }))
watch(computedValue, callback)  // 不需要 deep，因為總是新對象

// 情況2：監聽 ref，但總是整體替換

const obj = ref({ a: 1 })watch(obj, callback)  // 不需要 
deepobj.value = { a: 2 }  // 整體替換，引用變化