feat(computedAsync): introduce shadow option (#2616)

packages/core/computedAsync/index.md

@@ -83,3 +83,5 @@ const userInfo = computedAsync(
 - Just like Vue's built-in `computed` function, `computedAsync` does dependency tracking and is automatically re-evaluated when dependencies change. Note however that only dependency referenced in the first call stack are considered for this. In other words: **Dependencies that are accessed asynchronously will not trigger re-evaluation of the async computed value.**
 
 - As opposed to Vue's built-in `computed` function, re-evaluation of the async computed value is triggered whenever dependencies are changing, regardless of whether its result is currently being tracked or not.
+
+- The default value of the `shallow` will be changed to `true` in the next major version.

packages/core/computedAsync/index.ts

@@ -1,7 +1,7 @@
 import type { Fn } from '@vueuse/shared'
 import { noop } from '@vueuse/shared'
 import type { Ref } from 'vue-demi'
-import { computed, isRef, ref, watchEffect } from 'vue-demi'
+import { computed, isRef, ref, shallowRef, watchEffect } from 'vue-demi'
 
 /**
  * Handle overlapping async evaluations.
@@ -23,6 +23,15 @@ export interface AsyncComputedOptions {
    */
   evaluating?: Ref<boolean>
 
+  /**
+   * Use shallowRef
+   *
+   * The default value will be changed to `true` in the next major version
+   *
+   * @default false
+   */
+  shallow?: boolean
+
   /**
    * Callback when error is caught.
    */
@@ -56,11 +65,12 @@ export function computedAsync<T>(
   const {
     lazy = false,
     evaluating = undefined,
+    shallow = false,
     onError = noop,
   } = options
 
   const started = ref(!lazy)
-  const current = ref(initialState) as Ref<T>
+  const current = (shallow ? shallowRef(initialState) : ref(initialState)) as Ref<T>
   let counter = 0
 
   watchEffect(async (onInvalidate) => {