fix(reactivity): fix WATCH_ARRAY compat not triggering on mutation

Author: thecodewarrior

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

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
     }

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 = {