From b4f67867c0f193e6f5cc460f870dbfc45e7e50c8 Mon Sep 17 00:00:00 2001
From: Kate Corcoran <kate.corcoran@dfstudio.com>
Date: Tue, 22 Oct 2024 15:09:23 -0700
Subject: [PATCH 1/2] fix(reactivity): fix WATCH_ARRAY v2 compat deep watching
 elements

close #11872
---
 packages/runtime-core/src/componentOptions.ts | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/packages/runtime-core/src/componentOptions.ts b/packages/runtime-core/src/componentOptions.ts
index f864f39e419..ae8715d2baf 100644
--- a/packages/runtime-core/src/componentOptions.ts
+++ b/packages/runtime-core/src/componentOptions.ts
@@ -860,14 +860,6 @@ export function createWatcher(
         ? currentInstance
         : null
 
-    const newValue = getter()
-    if (
-      isArray(newValue) &&
-      isCompatEnabled(DeprecationTypes.WATCH_ARRAY, instance)
-    ) {
-      options.deep = true
-    }
-
     const baseGetter = getter
     getter = () => {
       const val = baseGetter()
@@ -875,7 +867,7 @@ export function createWatcher(
         isArray(val) &&
         checkCompatEnabled(DeprecationTypes.WATCH_ARRAY, instance)
       ) {
-        traverse(val)
+        traverse(val, 1)
       }
       return val
     }

From 971412445d8c3e7a1fed0118f6ca6048d7d3c660 Mon Sep 17 00:00:00 2001
From: Kate Corcoran <kate.corcoran@dfstudio.com>
Date: Wed, 23 Oct 2024 11:15:05 -0700
Subject: [PATCH 2/2] fix(reactivity): fix WATCH_ARRAY compat not triggering on
 mutation

---
 packages/reactivity/src/watch.ts              |  9 ++++++
 packages/runtime-core/src/componentOptions.ts |  1 +
 packages/vue-compat/__tests__/misc.spec.ts    | 28 +++++++++++++++++++
 3 files changed, 38 insertions(+)

diff --git a/packages/reactivity/src/watch.ts b/packages/reactivity/src/watch.ts
index 073bf88b93f..2eb9387faec 100644
--- a/packages/reactivity/src/watch.ts
+++ b/packages/reactivity/src/watch.ts
@@ -264,6 +264,15 @@ export function watch(
                 : oldValue,
             boundCleanup,
           ]
+
+          if (__COMPAT__) {
+            for (let i = 0; i < args.length - 1; i++) {
+              if (args[i] && args[i].WATCH_ARRAY_UNWRAP) {
+                args[i] = args[i].WATCH_ARRAY_UNWRAP
+              }
+            }
+          }
+
           call
             ? call(cb!, WatchErrorCodes.WATCH_CALLBACK, args)
             : // @ts-expect-error
diff --git a/packages/runtime-core/src/componentOptions.ts b/packages/runtime-core/src/componentOptions.ts
index ae8715d2baf..f8545397d1c 100644
--- a/packages/runtime-core/src/componentOptions.ts
+++ b/packages/runtime-core/src/componentOptions.ts
@@ -868,6 +868,7 @@ export function createWatcher(
         checkCompatEnabled(DeprecationTypes.WATCH_ARRAY, instance)
       ) {
         traverse(val, 1)
+        return { WATCH_ARRAY_UNWRAP: val }
       }
       return val
     }
diff --git a/packages/vue-compat/__tests__/misc.spec.ts b/packages/vue-compat/__tests__/misc.spec.ts
index 1a873633b85..56cace9b819 100644
--- a/packages/vue-compat/__tests__/misc.spec.ts
+++ b/packages/vue-compat/__tests__/misc.spec.ts
@@ -69,6 +69,34 @@ test('WATCH_ARRAY', async () => {
   expect(spy).toHaveBeenCalledTimes(1)
 })
 
+test('WATCH_ARRAY with non-array initial value', async () => {
+  const spy = vi.fn()
+  const vm = new Vue({
+    data() {
+      return {
+        foo: null,
+      }
+    },
+    watch: {
+      foo: spy,
+    },
+  }) as any
+  expect(
+    deprecationData[DeprecationTypes.WATCH_ARRAY].message,
+  ).not.toHaveBeenWarned()
+
+  expect(spy).not.toHaveBeenCalled()
+  vm.foo = []
+  await nextTick()
+  expect(
+    deprecationData[DeprecationTypes.WATCH_ARRAY].message,
+  ).toHaveBeenWarned()
+  expect(spy).toHaveBeenCalledTimes(1)
+  vm.foo.push(1)
+  await nextTick()
+  expect(spy).toHaveBeenCalledTimes(2)
+})
+
 test('PROPS_DEFAULT_THIS', () => {
   let thisCtx: any
   const Child = {