fix(computedWithControl): allow different types in watch sources array (#5184)

kricsleo · web-flow · commit bc4aca904a68 · 2025-11-26T01:39:29.000Z
diff --git a/packages/shared/computedWithControl/index.test.ts b/packages/shared/computedWithControl/index.test.ts
@@ -108,4 +108,17 @@ describe('computedWithControl', () => {
 
     expect(computed.value).toBe(42)
   })
+
+  it('can watch an array of multiple sources', () => {
+    const trigger1 = shallowRef(1)
+    const trigger2 = shallowRef('2')
+
+    const computed = computedWithControl([trigger1, trigger2], () => trigger1.value + trigger2.value)
+
+    expect(computed.value).toBe('12')
+
+    trigger1.value = 2
+
+    expect(computed.value).toBe('22')
+  })
 })
diff --git a/packages/shared/computedWithControl/index.ts b/packages/shared/computedWithControl/index.ts
@@ -1,4 +1,4 @@
-import type { ComputedGetter, ComputedRef, WatchOptions, WatchSource, WritableComputedOptions, WritableComputedRef } from 'vue'
+import type { ComputedGetter, ComputedRef, MultiWatchSources, WatchOptions, WatchSource, WritableComputedOptions, WritableComputedRef } from 'vue'
 import type { Fn } from '../utils'
 import { customRef, watch } from 'vue'
 
@@ -14,14 +14,14 @@ export interface WritableComputedRefWithControl<T> extends WritableComputedRef<T
 
 export type ComputedWithControlRef<T = any> = ComputedRefWithControl<T> | WritableComputedRefWithControl<T>
 
-export function computedWithControl<T, S>(
-  source: WatchSource<S> | WatchSource<S>[],
+export function computedWithControl<T>(
+  source: WatchSource | MultiWatchSources,
   fn: ComputedGetter<T>,
   options?: WatchOptions
 ): ComputedRefWithControl<T>
 
-export function computedWithControl<T, S>(
-  source: WatchSource<S> | WatchSource<S>[],
+export function computedWithControl<T>(
+  source: WatchSource | MultiWatchSources,
   fn: WritableComputedOptions<T>,
   options?: WatchOptions
 ): WritableComputedRefWithControl<T>
@@ -32,8 +32,8 @@ export function computedWithControl<T, S>(
  * @param source
  * @param fn
  */
-export function computedWithControl<T, S>(
-  source: WatchSource<S> | WatchSource<S>[],
+export function computedWithControl<T>(
+  source: WatchSource | MultiWatchSources,
   fn: ComputedGetter<T> | WritableComputedOptions<T>,
   options: WatchOptions = {},
 ): ComputedWithControlRef<T> {
