fix(compat): watch arrays as deep: 1

packages/reactivity/src/watch.ts

@@ -189,6 +189,10 @@ export class WatcherEffect extends ReactiveEffect {
     this.forceTrigger = forceTrigger
     this.isMultiSource = isMultiSource
 
+    if (__COMPAT__ && (options as any).compatWatchArray) {
+      ;(this as any).compatWatchArray = true
+    }
+
     if (once && cb) {
       const _cb = cb
       cb = (...args) => {
@@ -224,7 +228,8 @@ export class WatcherEffect extends ReactiveEffect {
       this.forceTrigger ||
       (this.isMultiSource
         ? (newValue as any[]).some((v, i) => hasChanged(v, oldValue[i]))
-        : hasChanged(newValue, oldValue))
+        : hasChanged(newValue, oldValue)) ||
+      (__COMPAT__ && (this as any).compatWatchArray && isArray(newValue))
     ) {
       // cleanup before running cb again
       cleanup(this)

packages/runtime-core/src/apiWatch.ts

@@ -8,9 +8,17 @@ import {
   type WatchHandle,
   type WatchSource,
   WatcherEffect,
+  traverse,
 } from '@vue/reactivity'
 import { type SchedulerJob, SchedulerJobFlags, queueJob } from './scheduler'
-import { EMPTY_OBJ, NOOP, extend, isFunction, isString } from '@vue/shared'
+import {
+  EMPTY_OBJ,
+  NOOP,
+  extend,
+  isArray,
+  isFunction,
+  isString,
+} from '@vue/shared'
 import {
   type ComponentInternalInstance,
   type GenericComponentInstance,
@@ -21,6 +29,11 @@ import {
 import { callWithAsyncErrorHandling } from './errorHandling'
 import { queuePostRenderEffect } from './renderer'
 import { warn } from './warning'
+import {
+  DeprecationTypes,
+  checkCompatEnabled,
+  isCompatEnabled,
+} from './compat/compatConfig'
 import type { ObjectWatchOptionItem } from './componentOptions'
 import { useSSRContext } from './helpers/useSsrContext'
 import type { ComponentPublicInstance } from './componentPublicInstance'
@@ -275,6 +288,22 @@ function doWatch(
   return stop
 }
 
+export function createCompatWatchGetter(
+  baseGetter: () => any,
+  instance: ComponentInternalInstance,
+) {
+  return (): any => {
+    const val = baseGetter()
+    if (
+      isArray(val) &&
+      checkCompatEnabled(DeprecationTypes.WATCH_ARRAY, instance)
+    ) {
+      traverse(val, 1)
+    }
+    return val
+  }
+}
+
 // this.$watch
 export function instanceWatch(
   this: ComponentInternalInstance,
@@ -283,7 +312,7 @@ export function instanceWatch(
   options?: WatchOptions,
 ): WatchHandle {
   const publicThis = this.proxy
-  const getter = isString(source)
+  let getter = isString(source)
     ? source.includes('.')
       ? createPathGetter(publicThis!, source)
       : () => publicThis![source as keyof typeof publicThis]
@@ -295,6 +324,19 @@ export function instanceWatch(
     cb = value.handler as Function
     options = value
   }
+
+  if (
+    __COMPAT__ &&
+    isString(source) &&
+    isCompatEnabled(DeprecationTypes.WATCH_ARRAY, this)
+  ) {
+    const deep = options && options.deep
+    if (!deep) {
+      options = extend({ compatWatchArray: true }, options)
+      getter = createCompatWatchGetter(getter, this)
+    }
+  }
+
   const prev = setCurrentInstance(this)
   const res = doWatch(getter, cb.bind(publicThis), options)
   setCurrentInstance(...prev)

packages/runtime-core/src/componentOptions.ts

@@ -1,12 +1,11 @@
-import {
-  type AsyncComponentInternalOptions,
-  type Component,
-  type ComponentInternalInstance,
-  type ComponentInternalOptions,
-  type Data,
-  type InternalRenderFunction,
-  type SetupContext,
-  getCurrentInstance,
+import type {
+  AsyncComponentInternalOptions,
+  Component,
+  ComponentInternalInstance,
+  ComponentInternalOptions,
+  Data,
+  InternalRenderFunction,
+  SetupContext,
 } from './component'
 import {
   type LooseRequired,
@@ -19,11 +18,12 @@ import {
   isPromise,
   isString,
 } from '@vue/shared'
-import { type Ref, getCurrentScope, isRef, traverse } from '@vue/reactivity'
+import { type Ref, isRef } from '@vue/reactivity'
 import { computed } from './apiComputed'
 import {
   type WatchCallback,
   type WatchOptions,
+  createCompatWatchGetter,
   createPathGetter,
   watch,
 } from './apiWatch'
@@ -72,9 +72,9 @@ import { warn } from './warning'
 import type { VNodeChild } from './vnode'
 import { callWithAsyncErrorHandling } from './errorHandling'
 import { deepMergeData } from './compat/data'
-import { DeprecationTypes, checkCompatEnabled } from './compat/compatConfig'
 import {
   type CompatConfig,
+  DeprecationTypes,
   isCompatEnabled,
   softAssertCompatEnabled,
 } from './compat/compatConfig'
@@ -825,7 +825,7 @@ function callHook(
   )
 }
 
-export function createWatcher(
+function createWatcher(
   raw: ComponentWatchOptionItem,
   ctx: Data,
   publicThis: ComponentPublicInstance,
@@ -836,28 +836,14 @@ export function createWatcher(
     : () => publicThis[key as keyof typeof publicThis]
 
   const options: WatchOptions = {}
-  if (__COMPAT__) {
-    const cur = getCurrentInstance()
-    const instance = cur && getCurrentScope() === cur.scope ? cur : null
-
-    const newValue = getter()
-    if (
-      isArray(newValue) &&
-      isCompatEnabled(DeprecationTypes.WATCH_ARRAY, instance)
-    ) {
-      options.deep = true
-    }
-
-    const baseGetter = getter
-    getter = () => {
-      const val = baseGetter()
-      if (
-        isArray(val) &&
-        checkCompatEnabled(DeprecationTypes.WATCH_ARRAY, instance)
-      ) {
-        traverse(val)
-      }
-      return val
+  if (
+    __COMPAT__ &&
+    isCompatEnabled(DeprecationTypes.WATCH_ARRAY, publicThis.$)
+  ) {
+    const deep = isObject(raw) && !isArray(raw) && !isFunction(raw) && raw.deep
+    if (!deep) {
+      ;(options as any).compatWatchArray = true
+      getter = createCompatWatchGetter(getter, publicThis.$)
     }
   }