fix(computedWithControl): add vue2 compatibility

packages/core/useActiveElement/index.ts

@@ -11,14 +11,15 @@ import { defaultWindow } from '../_configurable'
  */
 export function useActiveElement<T extends HTMLElement>(options: ConfigurableWindow = {}) {
   const { window = defaultWindow } = options
-  const activeElement = computedWithControl(
+  const [activeElement, update] = computedWithControl(
     () => null,
     () => window?.document.activeElement as T | null | undefined,
+    true,
   )
 
   if (window) {
-    useEventListener(window, 'blur', activeElement.trigger, true)
-    useEventListener(window, 'focus', activeElement.trigger, true)
+    useEventListener(window, 'blur', update, true)
+    useEventListener(window, 'focus', update, true)
   }
 
   return activeElement

packages/core/useCurrentElement/index.ts

@@ -4,13 +4,14 @@ import { computedWithControl } from '@vueuse/shared'
 
 export function useCurrentElement<T extends Element = Element>() {
   const vm = getCurrentInstance()!
-  const currentElement = computedWithControl(
+  const [currentElement, update] = computedWithControl(
     () => null,
     () => vm.proxy!.$el as T,
+    true,
   )
 
-  onUpdated(currentElement.trigger)
-  onMounted(currentElement.trigger)
+  onUpdated(update)
+  onMounted(update)
 
   return currentElement
 }

packages/shared/computedWithControl/index.md

@@ -49,3 +49,17 @@ const computedRef = computedWithControl(
 
 computedRef.trigger()
 ```
+
+> Works in both Vue2 & Vue3
+
+To be compatible in both Vue2 & Vue3, specify the third parameter as `true` and use them separately:
+
+```ts
+const [computedRef, trigger] = computedWithControl(
+  () => source.value,
+  () => counter.value,
+  true,
+)
+
+trigger()
+```

packages/shared/computedWithControl/index.test.ts

@@ -61,4 +61,17 @@ describe('computedWithControl', () => {
 
     expect(data.value).toBe('BAZ')
   })
+
+  it('separate mode', () => {
+    let count = 0
+    const [computed, trigger] = computedWithControl(() => {}, () => count, true)
+
+    expect(computed.value).toBe(0)
+
+    count += 1
+
+    trigger()
+
+    expect(computed.value).toBe(1)
+  })
 })

packages/shared/computedWithControl/index.ts

@@ -13,25 +13,37 @@ export interface ComputedWithControlRefExtra {
 export interface ComputedRefWithControl<T> extends ComputedRef<T>, ComputedWithControlRefExtra {}
 export interface WritableComputedRefWithControl<T> extends WritableComputedRef<T>, ComputedWithControlRefExtra {}
 
-export function computedWithControl<T, S>(
+export type ArrayComputedRefWithControl<T> = [ComputedRef<T>, ComputedWithControlRefExtra['trigger']]
+export type ArrayWritableComputedRefWithControl<T> = [WritableComputedRef<T>, ComputedWithControlRefExtra['trigger']]
+
+export function computedWithControl<T, S, U extends boolean = false>(
   source: WatchSource<S> | WatchSource<S>[],
-  fn: ComputedGetter<T>
-): ComputedRefWithControl<T>
+  fn: ComputedGetter<T>,
+  separate?: U
+): U extends true
+  ? ArrayComputedRefWithControl<T>
+  : ComputedRefWithControl<T>
 
-export function computedWithControl<T, S>(
+export function computedWithControl<T, S, U extends boolean = false>(
   source: WatchSource<S> | WatchSource<S>[],
-  fn: WritableComputedOptions<T>
-): WritableComputedRefWithControl<T>
+  fn: WritableComputedOptions<T>,
+  separate?: U
+): U extends true
+  ? ArrayWritableComputedRefWithControl<T>
+  : WritableComputedRefWithControl<T>
 
 /**
  * Explicitly define the deps of computed.
  *
  * @param source
  * @param fn
+ * @param separate `true` if you want to trigger update manually that compatible with vue2/vue3.
+ * `false` by default for backward usage compatibility.
  */
 export function computedWithControl<T, S>(
   source: WatchSource<S> | WatchSource<S>[],
   fn: ComputedGetter<T> | WritableComputedOptions<T>,
+  separate = false,
 ) {
   let v: T = undefined!
   let track: Fn
@@ -67,6 +79,9 @@ export function computedWithControl<T, S>(
     }
   }) as ComputedRefWithControl<T>
 
+  if (separate)
+    return [result, update] as ArrayComputedRefWithControl<T>
+
   if (Object.isExtensible(result))
     result.trigger = update