fix(watch): traverse refs in deep watch (#753)

Co-authored-by: webfansplz <>

src/apis/watch.ts

@@ -332,6 +332,11 @@ function createWatcher(
       )
   }
 
+  if (deep) {
+    const baseGetter = getter
+    getter = () => traverse(baseGetter())
+  }
+
   const applyCb = (n: any, o: any) => {
     // cleanup before running cb again
     runCleanup()

test/v3/runtime-core/apiWatch.spec.ts

@@ -531,4 +531,23 @@ describe('api: watch', () => {
 
     expect(data2.value).toMatchObject([1])
   })
+
+  it('watching deep ref', async () => {
+    const count = ref(0)
+    const double = computed(() => count.value * 2)
+    const state = reactive([count, double])
+
+    let dummy
+    watch(
+      () => state,
+      (state) => {
+        dummy = [state[0].value, state[1].value]
+      },
+      { deep: true }
+    )
+
+    count.value++
+    await nextTick()
+    expect(dummy).toEqual([1, 2])
+  })
 })