fix(computedWithControl): allow deeply watching source (#4786)

MetRonnie · antfu · web-flow · commit ffc1ae3dca3e · 2025-06-19T08:10:50.000Z
Co-authored-by: Anthony Fu &lt;anthonyfu117@hotmail.com&gt;
diff --git a/packages/shared/computedWithControl/index.md b/packages/shared/computedWithControl/index.md
@@ -48,6 +48,17 @@ const computedRef = computedWithControl(
 computedRef.trigger()
 ```
 
-::: warning
-Manual triggering only works for Vue 3
-:::
+### Deep Watch
+
+Unlike `computed`, `computedWithControl` is shallow by default.
+You can specify the same options as `watch` to control the behavior:
+
+```ts
+const source = ref({ name: 'foo' })
+
+const computedRef = computedWithControl(
+  source,
+  () => counter.value,
+  { deep: true },
+)
+```
diff --git a/packages/shared/computedWithControl/index.test.ts b/packages/shared/computedWithControl/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { shallowRef } from 'vue'
+import { ref as deepRef, shallowRef } from 'vue'
 import { computedWithControl, controlledComputed } from './index'
 
 describe('computedWithControl', () => {
@@ -84,4 +84,28 @@ describe('computedWithControl', () => {
 
     expect(data.value).toBe('BAZ')
   })
+
+  it('shallow watches by default', () => {
+    const trigger = deepRef({ a: 1 })
+
+    const computed = computedWithControl(trigger, () => trigger.value.a)
+
+    expect(computed.value).toBe(1)
+
+    trigger.value.a = 42
+
+    expect(computed.value).toBe(1)
+  })
+
+  it('can deep watch if specified', () => {
+    const trigger = deepRef({ a: 1 })
+
+    const computed = computedWithControl(trigger, () => trigger.value.a, { deep: true })
+
+    expect(computed.value).toBe(1)
+
+    trigger.value.a = 42
+
+    expect(computed.value).toBe(42)
+  })
 })
diff --git a/packages/shared/computedWithControl/index.ts b/packages/shared/computedWithControl/index.ts
@@ -1,4 +1,4 @@
-import type { ComputedGetter, ComputedRef, WatchSource, WritableComputedOptions, WritableComputedRef } from 'vue'
+import type { ComputedGetter, ComputedRef, WatchOptions, WatchSource, WritableComputedOptions, WritableComputedRef } from 'vue'
 import type { Fn } from '../utils'
 import { customRef, watch } from 'vue'
 
@@ -16,12 +16,14 @@ export type ComputedWithControlRef<T = any> = ComputedRefWithControl<T> | Writab
 
 export function computedWithControl<T, S>(
   source: WatchSource<S> | WatchSource<S>[],
-  fn: ComputedGetter<T>
+  fn: ComputedGetter<T>,
+  options?: WatchOptions
 ): ComputedRefWithControl<T>
 
 export function computedWithControl<T, S>(
   source: WatchSource<S> | WatchSource<S>[],
-  fn: WritableComputedOptions<T>
+  fn: WritableComputedOptions<T>,
+  options?: WatchOptions
 ): WritableComputedRefWithControl<T>
 
 /**
@@ -33,6 +35,7 @@ export function computedWithControl<T, S>(
 export function computedWithControl<T, S>(
   source: WatchSource<S> | WatchSource<S>[],
   fn: ComputedGetter<T> | WritableComputedOptions<T>,
+  options: WatchOptions = {},
 ): ComputedWithControlRef<T> {
   let v: T = undefined!
   let track: Fn
@@ -44,7 +47,7 @@ export function computedWithControl<T, S>(
     trigger()
   }
 
-  watch(source, update, { flush: 'sync' })
+  watch(source, update, { flush: 'sync', ...options })
 
   const get = typeof fn === 'function' ? fn : fn.get
   const set = typeof fn === 'function' ? undefined : fn.set
@@ -68,9 +71,7 @@ export function computedWithControl<T, S>(
     }
   }) as ComputedRefWithControl<T>
 
-  if (Object.isExtensible(result))
-    result.trigger = update
-
+  result.trigger = update
   return result
 }
 
