diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 4f6c4808d10..98b5e6005c5 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -43,7 +43,7 @@ jobs:
 
     strategy:
       matrix:
-        node: [18.x, 20.x, 22.x]
+        node: [20.x, 22.x]
       fail-fast: false
 
     steps:
@@ -79,6 +79,6 @@ jobs:
       - name: browser tests
         run: pnpm run test:browser
 
-      - if: matrix.node == '18.x'
+      - if: matrix.node == '22.x'
         name: Playground Smoke Test
         run: cd playgrounds && bash ./build.sh
diff --git a/eslint.config.js b/eslint.config.js
index 0068d11c1e8..0017f6cd640 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -1,6 +1,8 @@
 import { resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import antfu from '@antfu/eslint-config'
+import { createSimplePlugin } from 'eslint-factory'
+import { createAutoInsert } from 'eslint-plugin-unimport'
 
 const dir = fileURLToPath(new URL('.', import.meta.url))
 const restricted = [
@@ -122,4 +124,33 @@ export default antfu(
       'no-restricted-imports': 'off',
     },
   },
+  createAutoInsert({
+    imports: [
+      {
+        from: 'vue',
+        name: 'shallowRef',
+      },
+      {
+        from: 'vue',
+        name: 'ref',
+        as: 'deepRef',
+      },
+    ],
+  }),
+  createSimplePlugin({
+    name: 'no-ref',
+    exclude: ['**/*.md', '**/*.md/**'],
+    create(context) {
+      return {
+        CallExpression(node) {
+          if (node.callee.type === 'Identifier' && node.callee.name === 'ref') {
+            context.report({
+              node,
+              message: 'Usage of ref() is restricted. Use shallowRef() or deepRef() instead.',
+            })
+          }
+        },
+      }
+    },
+  }),
 )
diff --git a/package.json b/package.json
index 57f9527ed2a..a7ee050c499 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@vueuse/monorepo",
   "type": "module",
-  "version": "12.6.1",
+  "version": "12.7.0",
   "private": true,
   "packageManager": "pnpm@10.4.0",
   "description": "Collection of essential Vue Composition Utilities",
@@ -67,7 +67,9 @@
     "consola": "catalog:",
     "esbuild-register": "catalog:",
     "eslint": "catalog:",
+    "eslint-factory": "^0.1.2",
     "eslint-plugin-format": "catalog:",
+    "eslint-plugin-unimport": "^0.1.2",
     "export-size": "catalog:",
     "fake-indexeddb": "catalog:",
     "firebase": "catalog:",
diff --git a/packages/.test/mount.ts b/packages/.test/mount.ts
index 35a2cd7b18d..a4fd0e1b455 100644
--- a/packages/.test/mount.ts
+++ b/packages/.test/mount.ts
@@ -1,5 +1,5 @@
 import type { InjectionKey, Ref } from 'vue'
-import { createApp, defineComponent, h, provide, ref } from 'vue'
+import { createApp, defineComponent, h, provide, shallowRef } from 'vue'
 
 type InstanceType<V> = V extends { new (...arg: any[]): infer X } ? X : never
 type VM<V> = InstanceType<V> & { unmount: () => void }
@@ -38,7 +38,7 @@ export function useInjectedSetup<V>(setup: () => V) {
   const Provider = defineComponent({
     components: Comp,
     setup() {
-      provide(Key, ref(1))
+      provide(Key, shallowRef(1))
     },
     render() {
       return h('div', [])
diff --git a/packages/.vitepress/theme/components/DemoContainer.vue b/packages/.vitepress/theme/components/DemoContainer.vue
index 37bec84439d..b6c4b635ead 100644
--- a/packages/.vitepress/theme/components/DemoContainer.vue
+++ b/packages/.vitepress/theme/components/DemoContainer.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { onErrorCaptured, ref } from 'vue'
+import { ref as deepRef, onErrorCaptured } from 'vue'
 
-const error = ref<Error | null>(null)
+const error = deepRef<Error | null>(null)
 
 onErrorCaptured((err) => {
   error.value = err
diff --git a/packages/components/package.json b/packages/components/package.json
index 6509a6ff23e..44f2e6497b7 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@vueuse/components",
   "type": "module",
-  "version": "12.6.1",
+  "version": "12.7.0",
   "description": "Renderless components for VueUse",
   "author": "Jacob Clevenger<https://github.com/wheatjs>",
   "license": "MIT",
diff --git a/packages/core/_template/index.ts b/packages/core/_template/index.ts
index eaaef69d937..34824b9505c 100644
--- a/packages/core/_template/index.ts
+++ b/packages/core/_template/index.ts
@@ -1,7 +1,7 @@
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 
 export function useCounter(initialValue = 0) {
-  const count = ref(initialValue)
+  const count = shallowRef(initialValue)
 
   const inc = (delta = 1) => (count.value += delta)
   const dec = (delta = 1) => (count.value -= delta)
diff --git a/packages/core/computedAsync/index.test.ts b/packages/core/computedAsync/index.test.ts
index daa690674dc..b268e8ec383 100644
--- a/packages/core/computedAsync/index.test.ts
+++ b/packages/core/computedAsync/index.test.ts
@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 import { describe, expect, expectTypeOf, it, vi } from 'vitest'
-import { computed, nextTick, ref } from 'vue'
+import { computed, nextTick, shallowRef } from 'vue'
 import { asyncComputed, computedAsync } from './index'
 
 describe('computed', () => {
@@ -46,7 +46,7 @@ describe('computedAsync', () => {
   })
 
   it('call onError when error is thrown', async () => {
-    const errorMessage = ref()
+    const errorMessage = shallowRef()
     const func = vi.fn(async () => {
       throw new Error('An Error Message')
     })
@@ -84,7 +84,7 @@ describe('computedAsync', () => {
   })
 
   it('re-computes when dependency changes', async () => {
-    const counter = ref(1)
+    const counter = shallowRef(1)
     const double = computedAsync(() => {
       const result = counter.value * 2
       return Promise.resolve(result)
@@ -106,10 +106,10 @@ describe('computedAsync', () => {
   })
 
   it('uses last result', async () => {
-    const evaluating = ref(false)
+    const evaluating = shallowRef(false)
     const resolutions: Array<() => void> = []
 
-    const counter = ref(1)
+    const counter = shallowRef(1)
     const double = computedAsync(() => {
       const result = counter.value * 2
       return new Promise(resolve => (resolutions.push(() => resolve(result))))
@@ -162,7 +162,7 @@ describe('computedAsync', () => {
 
   it('evaluating works', async () => {
     vi.useFakeTimers()
-    const evaluating = ref(false)
+    const evaluating = shallowRef(false)
 
     const data = computedAsync(
       () => new Promise(resolve => setTimeout(() => resolve('data'), 0)),
@@ -181,7 +181,7 @@ describe('computedAsync', () => {
   })
 
   it('triggers', async () => {
-    const counter = ref(1)
+    const counter = shallowRef(1)
     const double = computedAsync(() => {
       const result = counter.value * 2
       return Promise.resolve(result)
@@ -211,9 +211,9 @@ describe('computedAsync', () => {
   it('cancel is called', async () => {
     vi.useFakeTimers()
     const onCancel = vi.fn()
-    const evaluating = ref(false)
+    const evaluating = shallowRef(false)
 
-    const data = ref('initial')
+    const data = shallowRef('initial')
     const uppercase = computedAsync((cancel) => {
       cancel(onCancel)
 
@@ -246,7 +246,7 @@ describe('computedAsync', () => {
   it('cancel is called for lazy', async () => {
     const onCancel = vi.fn()
 
-    const data = ref('initial')
+    const data = shallowRef('initial')
     const uppercase = computedAsync((cancel) => {
       cancel(() => onCancel())
 
diff --git a/packages/core/computedAsync/index.ts b/packages/core/computedAsync/index.ts
index 23e63db0385..c1c6a63e4a7 100644
--- a/packages/core/computedAsync/index.ts
+++ b/packages/core/computedAsync/index.ts
@@ -1,7 +1,7 @@
 import type { Fn } from '@vueuse/shared'
 import type { Ref } from 'vue'
 import { noop } from '@vueuse/shared'
-import { computed, isRef, ref, shallowRef, watchEffect } from 'vue'
+import { computed, ref as deepRef, isRef, shallowRef, watchEffect } from 'vue'
 
 /**
  * Handle overlapping async evaluations.
@@ -77,8 +77,8 @@ export function computedAsync<T>(
     onError = noop,
   } = options
 
-  const started = ref(!lazy)
-  const current = (shallow ? shallowRef(initialState) : ref(initialState)) as Ref<T>
+  const started = shallowRef(!lazy)
+  const current = (shallow ? shallowRef(initialState) : deepRef(initialState)) as Ref<T>
   let counter = 0
 
   watchEffect(async (onInvalidate) => {
diff --git a/packages/core/computedInject/demo.vue b/packages/core/computedInject/demo.vue
index 67ef8db6526..c9a884a23c5 100644
--- a/packages/core/computedInject/demo.vue
+++ b/packages/core/computedInject/demo.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { provide, ref } from 'vue'
+import { ref as deepRef, provide } from 'vue'
 import Receiver, { ArrayKey } from './demoReceiver.vue'
 
-const array = ref([{ key: 1, value: '1' }, { key: 2, value: '2' }, { key: 3, value: '3' }])
+const array = deepRef([{ key: 1, value: '1' }, { key: 2, value: '2' }, { key: 3, value: '3' }])
 
 provide(ArrayKey, array)
 </script>
diff --git a/packages/core/computedInject/demoReceiver.vue b/packages/core/computedInject/demoReceiver.vue
index d9467ec170d..33bb338fc07 100644
--- a/packages/core/computedInject/demoReceiver.vue
+++ b/packages/core/computedInject/demoReceiver.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import type { InjectionKey, Ref } from 'vue'
-import { defineComponent, ref } from 'vue'
+import { ref as deepRef, defineComponent } from 'vue'
 import { computedInject } from './index'
 
 type OptionsRef = Ref<{ key: number, value: string }[]>
@@ -12,7 +12,7 @@ export default defineComponent({
   setup() {
     const computedArr = computedInject(ArrayKey, (source) => {
       if (!source)
-        return ref([]) as OptionsRef
+        return deepRef([]) as OptionsRef
       const arr = [...source.value]
       arr.unshift({ key: 0, value: 'all' })
       return arr
diff --git a/packages/core/computedInject/index.test.ts b/packages/core/computedInject/index.test.ts
index 92f18ff1334..a501ec974b9 100644
--- a/packages/core/computedInject/index.test.ts
+++ b/packages/core/computedInject/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 import { Key, useInjectedSetup } from '../../.test'
 import { computedInject } from './index'
 
@@ -17,7 +17,7 @@ describe('computedInject', () => {
       const anotherComputedNum = computedInject(Key, (source) => {
         if (source)
           return source.value + 10
-      }, ref(10))
+      }, shallowRef(10))
 
       expect(computedNum.value).toBe(2)
       expect(anotherComputedNum.value).toBe(11)
diff --git a/packages/core/createTemplatePromise/index.ts b/packages/core/createTemplatePromise/index.ts
index 0490ff78007..53cda77d37c 100644
--- a/packages/core/createTemplatePromise/index.ts
+++ b/packages/core/createTemplatePromise/index.ts
@@ -1,5 +1,5 @@
 import type { DefineComponent, Ref, TransitionGroupProps } from 'vue'
-import { defineComponent, Fragment, h, ref, shallowReactive, TransitionGroup } from 'vue'
+import { ref as deepRef, defineComponent, Fragment, h, shallowReactive, TransitionGroup } from 'vue'
 
 export interface TemplatePromiseProps<Return, Args extends any[] = []> {
   /**
@@ -66,7 +66,7 @@ export function createTemplatePromise<Return, Args extends any[] = []>(
   options: TemplatePromiseOptions = {},
 ): TemplatePromise<Return, Args> {
   let index = 0
-  const instances = ref([]) as Ref<TemplatePromiseProps<Return, Args>[]>
+  const instances = deepRef([]) as Ref<TemplatePromiseProps<Return, Args>[]>
 
   function create(...args: Args) {
     const props = shallowReactive({
diff --git a/packages/core/onClickOutside/component.ts b/packages/core/onClickOutside/component.ts
index 96d65f06de0..acd72d59fd1 100644
--- a/packages/core/onClickOutside/component.ts
+++ b/packages/core/onClickOutside/component.ts
@@ -1,7 +1,7 @@
 import type { RenderableComponent } from '../types'
 import type { OnClickOutsideOptions } from './index'
 import { onClickOutside } from '@vueuse/core'
-import { defineComponent, h, ref } from 'vue'
+import { defineComponent, h, shallowRef } from 'vue'
 
 export interface OnClickOutsideProps extends RenderableComponent {
   options?: Omit<OnClickOutsideOptions, 'controls'>
@@ -12,7 +12,7 @@ export const OnClickOutside = /* #__PURE__ */ defineComponent<OnClickOutsideProp
   props: ['as', 'options'] as unknown as undefined,
   emits: ['trigger'],
   setup(props, { slots, emit }) {
-    const target = ref()
+    const target = shallowRef<HTMLDivElement>()
     onClickOutside(target, (e) => {
       emit('trigger', e)
     }, props.options)
diff --git a/packages/core/onClickOutside/demo.vue b/packages/core/onClickOutside/demo.vue
index 1c3c22c7c37..6edd33afea6 100644
--- a/packages/core/onClickOutside/demo.vue
+++ b/packages/core/onClickOutside/demo.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import type { OnClickOutsideHandler } from '@vueuse/core'
 import { onClickOutside } from '@vueuse/core'
-import { ref } from 'vue'
+import { shallowRef, useTemplateRef } from 'vue'
 import { vOnClickOutside } from './directive'
 
-const modal = ref(false)
-const modalRef = ref(null)
+const modal = shallowRef(false)
+const modalRef = useTemplateRef('modalRef')
 
 onClickOutside(
   modalRef,
@@ -15,7 +15,7 @@ onClickOutside(
   },
 )
 
-const dropdown = ref(false)
+const dropdown = shallowRef(false)
 const dropdownHandler: OnClickOutsideHandler = (event) => {
   console.log(event)
   dropdown.value = false
diff --git a/packages/core/onElementRemoval/demo.vue b/packages/core/onElementRemoval/demo.vue
index 3cfa11321ba..9bedeefb427 100644
--- a/packages/core/onElementRemoval/demo.vue
+++ b/packages/core/onElementRemoval/demo.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { onElementRemoval } from '@vueuse/core'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 
 // demo1: recreate new element
-const demo1Ref = ref<HTMLElement | null>(null)
-const demo1State = ref(true)
-const demo1Count = ref(0)
+const demo1Ref = shallowRef<HTMLElement | null>(null)
+const demo1State = shallowRef(true)
+const demo1Count = shallowRef(0)
 
 function demo1BtnOnClick() {
   demo1State.value = !demo1State.value
@@ -14,10 +14,10 @@ function demo1BtnOnClick() {
 onElementRemoval(demo1Ref, () => demo1Count.value++)
 
 // demo2: reuse same element
-const demo2ParentRef = ref<HTMLElement | null>(null)
-const demo2Ref = ref<HTMLElement | null>(null)
-const demo2State = ref(true)
-const demo2Count = ref(0)
+const demo2ParentRef = shallowRef<HTMLElement | null>(null)
+const demo2Ref = shallowRef<HTMLElement | null>(null)
+const demo2State = shallowRef(true)
+const demo2Count = shallowRef(0)
 
 function demo2BtnOnClick() {
   demo2State.value = !demo2State.value
diff --git a/packages/core/onElementRemoval/index.test.ts b/packages/core/onElementRemoval/index.test.ts
index 5ea4e25d6a9..0b6a2f7baa9 100644
--- a/packages/core/onElementRemoval/index.test.ts
+++ b/packages/core/onElementRemoval/index.test.ts
@@ -1,7 +1,7 @@
 import type { AnyFn } from '@vueuse/shared'
 import type { Ref } from 'vue'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { effectScope, nextTick, ref } from 'vue'
+import { effectScope, nextTick, shallowRef } from 'vue'
 import { onElementRemoval } from './index'
 
 describe('onElementRemoval', () => {
@@ -12,9 +12,9 @@ describe('onElementRemoval', () => {
 
   beforeEach(() => {
     callBackFn = vi.fn(m => expect(m[0]).toBeInstanceOf(MutationRecord))
-    grandElement = ref(document.createElement('div'))
-    parentElement = ref(document.createElement('div'))
-    targetElement = ref(document.createElement('div'))
+    grandElement = shallowRef(document.createElement('div'))
+    parentElement = shallowRef(document.createElement('div'))
+    targetElement = shallowRef(document.createElement('div'))
 
     parentElement.value.appendChild(targetElement.value)
     grandElement.value.appendChild(parentElement.value)
@@ -87,7 +87,7 @@ describe('onElementRemoval', () => {
   })
 
   it('should correctly triggered even if the element is assigned a value after initialization', async () => {
-    const targetElement2 = ref()
+    const targetElement2 = shallowRef<HTMLElement>()
     onElementRemoval(targetElement2, callBackFn)
 
     const el = document.createElement('div')
diff --git a/packages/core/onKeyStroke/demo.vue b/packages/core/onKeyStroke/demo.vue
index a514c0bd9d7..ce972698bf3 100644
--- a/packages/core/onKeyStroke/demo.vue
+++ b/packages/core/onKeyStroke/demo.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { onKeyStroke } from '@vueuse/core'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 
-const translateX = ref(0)
-const translateY = ref(0)
+const translateX = shallowRef(0)
+const translateY = shallowRef(0)
 
 onKeyStroke(['w', 'W', 'ArrowUp'], (e) => {
   if (e.key === 'ArrowUp') {
diff --git a/packages/core/onKeyStroke/index.test.ts b/packages/core/onKeyStroke/index.test.ts
index 046c84f7573..b484fa9ea44 100644
--- a/packages/core/onKeyStroke/index.test.ts
+++ b/packages/core/onKeyStroke/index.test.ts
@@ -1,7 +1,7 @@
 import type { Ref } from 'vue'
 import type { KeyStrokeEventName } from './index'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 import { onKeyStroke } from './index'
 
 describe('onKeyStroke', () => {
@@ -9,7 +9,7 @@ describe('onKeyStroke', () => {
   let callBackFn: any
 
   beforeEach(() => {
-    element = ref(document.createElement('div'))
+    element = shallowRef(document.createElement('div'))
     callBackFn = vi.fn()
   })
 
diff --git a/packages/core/onLongPress/component.ts b/packages/core/onLongPress/component.ts
index 0832fe95d16..561528bfed4 100644
--- a/packages/core/onLongPress/component.ts
+++ b/packages/core/onLongPress/component.ts
@@ -1,6 +1,6 @@
 import type { RenderableComponent } from '../types'
 import type { OnLongPressOptions } from './index'
-import { defineComponent, h, ref } from 'vue'
+import { defineComponent, h, shallowRef } from 'vue'
 import { onLongPress } from './index'
 
 export interface OnLongPressProps extends RenderableComponent {
@@ -12,7 +12,7 @@ export const OnLongPress = /* #__PURE__ */ defineComponent<OnLongPressProps>({
   props: ['as', 'options'] as unknown as undefined,
   emits: ['trigger'],
   setup(props, { slots, emit }) {
-    const target = ref()
+    const target = shallowRef<HTMLElement>()
     onLongPress(
       target,
       (e) => {
diff --git a/packages/core/onLongPress/demo.vue b/packages/core/onLongPress/demo.vue
index ff4608ac5e1..803186a80e9 100644
--- a/packages/core/onLongPress/demo.vue
+++ b/packages/core/onLongPress/demo.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 import { onLongPress } from './'
 
-const htmlRef = ref<HTMLElement | null>(null)
-const htmlRefOptions = ref<HTMLElement | null>(null)
-const htmlRefOnMouseUp = ref<HTMLElement | null>(null)
+const htmlRef = shallowRef<HTMLElement | null>(null)
+const htmlRefOptions = shallowRef<HTMLElement | null>(null)
+const htmlRefOnMouseUp = shallowRef<HTMLElement | null>(null)
 
-const longPressed = ref(false)
-const clicked = ref(false)
+const longPressed = shallowRef(false)
+const clicked = shallowRef(false)
 
 function onLongPressCallback(e: PointerEvent) {
   longPressed.value = true
diff --git a/packages/core/onLongPress/index.test.ts b/packages/core/onLongPress/index.test.ts
index 3729ce502c8..13a5bda0469 100644
--- a/packages/core/onLongPress/index.test.ts
+++ b/packages/core/onLongPress/index.test.ts
@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 import { useEventListener } from '../useEventListener'
 import { onLongPress } from './index'
 
@@ -203,9 +203,9 @@ describe('onLongPress', () => {
   }
 
   beforeEach(() => {
-    element = ref(document.createElement('div'))
-    parentElement = ref(document.createElement('div'))
-    childElement = ref(document.createElement('div'))
+    element = shallowRef(document.createElement('div'))
+    parentElement = shallowRef(document.createElement('div'))
+    childElement = shallowRef(document.createElement('div'))
     parentElement.value.appendChild(element.value)
     element.value.appendChild(childElement.value)
 
diff --git a/packages/core/onStartTyping/demo.vue b/packages/core/onStartTyping/demo.vue
index 44ae8501a36..0096c16b81b 100644
--- a/packages/core/onStartTyping/demo.vue
+++ b/packages/core/onStartTyping/demo.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { onStartTyping } from '@vueuse/core'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 
-const input = ref<HTMLInputElement | null>(null)
+const input = shallowRef<HTMLInputElement | null>(null)
 
 onStartTyping(() => {
   if (input.value !== document.activeElement)
diff --git a/packages/core/package.json b/packages/core/package.json
index fabbbf8f1bf..d3f8f0cb762 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@vueuse/core",
   "type": "module",
-  "version": "12.6.1",
+  "version": "12.7.0",
   "description": "Collection of essential Vue Composition Utilities",
   "author": "Anthony Fu <https://github.com/antfu>",
   "license": "MIT",
diff --git a/packages/core/templateRef/index.test.ts b/packages/core/templateRef/index.test.ts
index 2996ce10e06..09fbd8eb4c0 100644
--- a/packages/core/templateRef/index.test.ts
+++ b/packages/core/templateRef/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { defineComponent, h, nextTick, ref } from 'vue'
+import { defineComponent, h, nextTick, shallowRef } from 'vue'
 import { mount } from '../../.test'
 import { templateRef } from './index'
 
@@ -27,7 +27,7 @@ describe('templateRef', () => {
   it('string ref update', async () => {
     const vm = mount(defineComponent({
       setup() {
-        const refKey = ref('foo')
+        const refKey = shallowRef('foo')
         const fooEl = templateRef<HTMLElement | null>('foo', null)
         const barEl = templateRef<HTMLElement | null>('bar', null)
         return {
@@ -54,7 +54,7 @@ describe('templateRef', () => {
   it('string ref unmount', async () => {
     const vm = mount(defineComponent({
       setup() {
-        const toggle = ref(true)
+        const toggle = shallowRef(true)
         const targetEl = templateRef<HTMLElement | null>('target', null)
         return {
           toggle,
diff --git a/packages/core/useActiveElement/index.ts b/packages/core/useActiveElement/index.ts
index 1ed7b45b491..f5050ebb2a2 100644
--- a/packages/core/useActiveElement/index.ts
+++ b/packages/core/useActiveElement/index.ts
@@ -1,5 +1,5 @@
 import type { ConfigurableDocumentOrShadowRoot, ConfigurableWindow } from '../_configurable'
-import { ref } from 'vue'
+import { ref as deepRef } from 'vue'
 import { defaultWindow } from '../_configurable'
 import { onElementRemoval } from '../onElementRemoval'
 import { useEventListener } from '../useEventListener'
@@ -44,7 +44,7 @@ export function useActiveElement<T extends HTMLElement>(
     return element
   }
 
-  const activeElement = ref<T | null | undefined>()
+  const activeElement = deepRef<T | null | undefined>()
   const trigger = () => {
     activeElement.value = getDeepActiveElement() as T | null | undefined
   }
diff --git a/packages/core/useAsyncQueue/index.ts b/packages/core/useAsyncQueue/index.ts
index faaf37d68fc..94fec2e8d7f 100644
--- a/packages/core/useAsyncQueue/index.ts
+++ b/packages/core/useAsyncQueue/index.ts
@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 import { noop } from '@vueuse/shared'
-import { reactive, ref } from 'vue'
+import { reactive, shallowRef } from 'vue'
 
 export type UseAsyncQueueTask<T> = (...args: any[]) => T | Promise<T>
 
@@ -75,7 +75,7 @@ export function useAsyncQueue<T extends any[], S = MapQueueTask<T>>(
 
   const result = reactive(initialResult) as { [P in keyof T]: UseAsyncQueueResult<T[P]> }
 
-  const activeIndex = ref<number>(-1)
+  const activeIndex = shallowRef<number>(-1)
 
   if (!tasks || tasks.length === 0) {
     onFinished()
diff --git a/packages/core/useAsyncState/index.ts b/packages/core/useAsyncState/index.ts
index 351e2f67f40..ec1a4f2786a 100644
--- a/packages/core/useAsyncState/index.ts
+++ b/packages/core/useAsyncState/index.ts
@@ -1,6 +1,6 @@
 import type { Ref, ShallowRef, UnwrapRef } from 'vue'
 import { noop, promiseTimeout, until } from '@vueuse/shared'
-import { ref, shallowRef } from 'vue'
+import { ref as deepRef, shallowRef } from 'vue'
 
 export interface UseAsyncStateReturnBase<Data, Params extends any[], Shallow extends boolean> {
   state: Shallow extends true ? Ref<Data> : Ref<UnwrapRef<Data>>
@@ -92,9 +92,9 @@ export function useAsyncState<Data, Params extends any[] = any[], Shallow extend
     shallow = true,
     throwError,
   } = options ?? {}
-  const state = shallow ? shallowRef(initialState) : ref(initialState)
-  const isReady = ref(false)
-  const isLoading = ref(false)
+  const state = shallow ? shallowRef(initialState) : deepRef(initialState)
+  const isReady = shallowRef(false)
+  const isLoading = shallowRef(false)
   const error = shallowRef<unknown | undefined>(undefined)
 
   async function execute(delay = 0, ...args: any[]) {
diff --git a/packages/core/useBase64/demo.vue b/packages/core/useBase64/demo.vue
index 47d8f595a87..41dd1a669cb 100644
--- a/packages/core/useBase64/demo.vue
+++ b/packages/core/useBase64/demo.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import type { Ref } from 'vue'
 import { useBase64 } from '@vueuse/core'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 
-const text = ref('')
-const file = ref() as Ref<File>
-const image = ref() as Ref<HTMLImageElement>
+const text = shallowRef('')
+const file = shallowRef<File>()
+const image = shallowRef<HTMLImageElement>()
 
 const { base64: textBase64 } = useBase64(text)
 const { base64: fileBase64 } = useBase64(file)
diff --git a/packages/core/useBase64/index.ts b/packages/core/useBase64/index.ts
index 4ce28e8d243..60ce7cda0da 100644
--- a/packages/core/useBase64/index.ts
+++ b/packages/core/useBase64/index.ts
@@ -1,7 +1,7 @@
 import type { MaybeRefOrGetter } from '@vueuse/shared'
 import type { Ref } from 'vue'
 import { isClient } from '@vueuse/shared'
-import { isRef, ref, toValue, watch } from 'vue'
+import { isRef, shallowRef, toValue, watch } from 'vue'
 import { getDefaultSerialization } from './serialization'
 
 export interface UseBase64Options {
@@ -34,11 +34,11 @@ export interface UseBase64Return {
   execute: () => Promise<string>
 }
 
-export function useBase64(target: MaybeRefOrGetter<string>, options?: UseBase64Options): UseBase64Return
-export function useBase64(target: MaybeRefOrGetter<Blob>, options?: UseBase64Options): UseBase64Return
-export function useBase64(target: MaybeRefOrGetter<ArrayBuffer>, options?: UseBase64Options): UseBase64Return
-export function useBase64(target: MaybeRefOrGetter<HTMLCanvasElement>, options?: ToDataURLOptions): UseBase64Return
-export function useBase64(target: MaybeRefOrGetter<HTMLImageElement>, options?: ToDataURLOptions): UseBase64Return
+export function useBase64(target: MaybeRefOrGetter<string | undefined>, options?: UseBase64Options): UseBase64Return
+export function useBase64(target: MaybeRefOrGetter<Blob | undefined>, options?: UseBase64Options): UseBase64Return
+export function useBase64(target: MaybeRefOrGetter<ArrayBuffer | undefined>, options?: UseBase64Options): UseBase64Return
+export function useBase64(target: MaybeRefOrGetter<HTMLCanvasElement | undefined>, options?: ToDataURLOptions): UseBase64Return
+export function useBase64(target: MaybeRefOrGetter<HTMLImageElement | undefined>, options?: ToDataURLOptions): UseBase64Return
 export function useBase64<T extends Record<string, unknown>>(target: MaybeRefOrGetter<T>, options?: UseBase64ObjectOptions<T>): UseBase64Return
 export function useBase64<T extends Map<string, unknown>>(target: MaybeRefOrGetter<T>, options?: UseBase64ObjectOptions<T>): UseBase64Return
 export function useBase64<T extends Set<unknown>>(target: MaybeRefOrGetter<T>, options?: UseBase64ObjectOptions<T>): UseBase64Return
@@ -47,8 +47,8 @@ export function useBase64(
   target: any,
   options?: any,
 ) {
-  const base64 = ref('')
-  const promise = ref() as Ref<Promise<string>>
+  const base64 = shallowRef('')
+  const promise = shallowRef<Promise<string>>()
 
   function execute() {
     if (!isClient)
diff --git a/packages/core/useBattery/index.ts b/packages/core/useBattery/index.ts
index 404b890045e..fff8ab94e75 100644
--- a/packages/core/useBattery/index.ts
+++ b/packages/core/useBattery/index.ts
@@ -1,7 +1,7 @@
 /* this implementation is original ported from https://github.com/logaretm/vue-use-web by Abdelrahman Awad */
 
 import type { ConfigurableNavigator } from '../_configurable'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 import { defaultNavigator } from '../_configurable'
 import { useEventListener } from '../useEventListener'
 import { useSupported } from '../useSupported'
@@ -28,10 +28,10 @@ export function useBattery(options: ConfigurableNavigator = {}) {
 
   const isSupported = useSupported(() => navigator && 'getBattery' in navigator && typeof navigator.getBattery === 'function')
 
-  const charging = ref(false)
-  const chargingTime = ref(0)
-  const dischargingTime = ref(0)
-  const level = ref(1)
+  const charging = shallowRef(false)
+  const chargingTime = shallowRef(0)
+  const dischargingTime = shallowRef(0)
+  const level = shallowRef(1)
 
   let battery: BatteryManager | null
 
diff --git a/packages/core/useBreakpoints/demo.vue b/packages/core/useBreakpoints/demo.vue
index 60afdf66e6d..3b932c069da 100644
--- a/packages/core/useBreakpoints/demo.vue
+++ b/packages/core/useBreakpoints/demo.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 
 const breakpoints = useBreakpoints(breakpointsTailwind)
 
 const smWidth = breakpointsTailwind.sm
 
-const reactiveStuff = ref<keyof typeof breakpointsTailwind>('sm')
+const reactiveStuff = shallowRef<keyof typeof breakpointsTailwind>('sm')
 const isGreaterThanBreakpoint = breakpoints.greaterOrEqual(() => reactiveStuff.value)
 
 const current = breakpoints.current()
diff --git a/packages/core/useBreakpoints/index.ts b/packages/core/useBreakpoints/index.ts
index d8f84d3239e..029481346f4 100644
--- a/packages/core/useBreakpoints/index.ts
+++ b/packages/core/useBreakpoints/index.ts
@@ -1,7 +1,7 @@
 import type { MaybeRefOrGetter } from '@vueuse/shared'
 import type { ConfigurableWindow } from '../_configurable'
 import { increaseWithUnit, pxValue, tryOnMounted } from '@vueuse/shared'
-import { computed, ref, toValue } from 'vue'
+import { computed, shallowRef, toValue } from 'vue'
 import { defaultWindow } from '../_configurable'
 import { useMediaQuery } from '../useMediaQuery'
 import { useSSRWidth } from '../useSSRWidth'
@@ -47,7 +47,7 @@ export function useBreakpoints<K extends string>(
   const { window = defaultWindow, strategy = 'min-width', ssrWidth = useSSRWidth() } = options
 
   const ssrSupport = typeof ssrWidth === 'number'
-  const mounted = ssrSupport ? ref(false) : { value: true }
+  const mounted = ssrSupport ? shallowRef(false) : { value: true }
   if (ssrSupport) {
     tryOnMounted(() => mounted.value = !!window)
   }
diff --git a/packages/core/useBroadcastChannel/demo.vue b/packages/core/useBroadcastChannel/demo.vue
index 48a97ee6f47..622871a6178 100644
--- a/packages/core/useBroadcastChannel/demo.vue
+++ b/packages/core/useBroadcastChannel/demo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useBroadcastChannel } from '@vueuse/core'
-import { ref, watch } from 'vue'
+import { shallowRef, watch } from 'vue'
 
 const {
   isSupported,
@@ -9,7 +9,7 @@ const {
   error,
 } = useBroadcastChannel({ name: 'vueuse-demo-channel' })
 
-const message = ref('')
+const message = shallowRef('')
 
 watch(data, () => {
   if (data.value)
diff --git a/packages/core/useBroadcastChannel/index.ts b/packages/core/useBroadcastChannel/index.ts
index 6b6327226dd..d46965dffb8 100644
--- a/packages/core/useBroadcastChannel/index.ts
+++ b/packages/core/useBroadcastChannel/index.ts
@@ -1,7 +1,7 @@
 import type { ComputedRef, Ref } from 'vue'
 import type { ConfigurableWindow } from '../_configurable'
 import { tryOnMounted, tryOnScopeDispose } from '@vueuse/shared'
-import { ref, shallowRef } from 'vue'
+import { ref as deepRef, shallowRef } from 'vue'
 import { defaultWindow } from '../_configurable'
 import { useEventListener } from '../useEventListener'
 import { useSupported } from '../useSupported'
@@ -28,10 +28,10 @@ export function useBroadcastChannel<D, P>(options: UseBroadcastChannelOptions):
   } = options
 
   const isSupported = useSupported(() => window && 'BroadcastChannel' in window)
-  const isClosed = ref(false)
+  const isClosed = shallowRef(false)
 
-  const channel = ref<BroadcastChannel | undefined>()
-  const data = ref()
+  const channel = deepRef<BroadcastChannel | undefined>()
+  const data = deepRef()
   const error = shallowRef<Event | null>(null)
 
   const post = (data: unknown) => {
diff --git a/packages/core/useBrowserLocation/index.ts b/packages/core/useBrowserLocation/index.ts
index e9fd8fd5318..b02acc4f27e 100644
--- a/packages/core/useBrowserLocation/index.ts
+++ b/packages/core/useBrowserLocation/index.ts
@@ -3,7 +3,7 @@
 import type { Ref } from 'vue'
 import type { ConfigurableWindow } from '../_configurable'
 import { objectEntries } from '@vueuse/shared'
-import { reactive, ref, watch } from 'vue'
+import { ref as deepRef, reactive, watch } from 'vue'
 import { defaultWindow } from '../_configurable'
 import { useEventListener } from '../useEventListener'
 
@@ -41,7 +41,7 @@ export interface BrowserLocationState {
 export function useBrowserLocation(options: ConfigurableWindow = {}) {
   const { window = defaultWindow } = options
   const refs = Object.fromEntries(
-    WRITABLE_PROPERTIES.map(key => [key, ref()]),
+    WRITABLE_PROPERTIES.map(key => [key, deepRef()]),
   ) as Record<typeof WRITABLE_PROPERTIES[number], Ref<string | undefined>>
 
   for (const [key, ref] of objectEntries(refs)) {
@@ -68,7 +68,7 @@ export function useBrowserLocation(options: ConfigurableWindow = {}) {
     })
   }
 
-  const state = ref(buildState('load'))
+  const state = deepRef(buildState('load'))
 
   if (window) {
     const listenerOptions = { passive: true }
diff --git a/packages/core/useCached/demo.vue b/packages/core/useCached/demo.vue
index f043e4aab95..ba83df82726 100644
--- a/packages/core/useCached/demo.vue
+++ b/packages/core/useCached/demo.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
 import { useCached } from '@vueuse/core'
-import { ref } from 'vue'
+import { ref as deepRef } from 'vue'
 
 interface Value {
   value: number
   extra: number
 }
 
-const value = ref<Value>({ value: 42, extra: 0 })
+const value = deepRef<Value>({ value: 42, extra: 0 })
 function comparator(a: Value, b: Value) {
   return a.value === b.value
 }
 const cachedValue = useCached(value, comparator)
 
-const inputValue = ref(value.value.value)
-const inputExtra = ref(value.value.extra)
+const inputValue = deepRef(value.value.value)
+const inputExtra = deepRef(value.value.extra)
 
 function onSyncClick() {
   value.value = {
diff --git a/packages/core/useCached/index.test.ts b/packages/core/useCached/index.test.ts
index c51c1f53615..8414da1d265 100644
--- a/packages/core/useCached/index.test.ts
+++ b/packages/core/useCached/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { ref } from 'vue'
+import { ref as deepRef, shallowRef } from 'vue'
 import { nextTwoTick } from '../../.test'
 import { useCached } from './index'
 
@@ -20,7 +20,7 @@ describe('useCached', () => {
   })
 
   it('should work with default comparator', async () => {
-    const booleanRef = ref(true)
+    const booleanRef = shallowRef(true)
 
     const cachedBooleanRef = useCached(booleanRef)
     await nextTwoTick()
@@ -34,7 +34,7 @@ describe('useCached', () => {
   })
 
   it('should work with custom comparator', async () => {
-    const arrayRef = ref([1])
+    const arrayRef = deepRef([1])
     const initialArrayValue = arrayRef.value
 
     const cachedArrayRef = useCached(arrayRef, arrayEquals)
diff --git a/packages/core/useCached/index.ts b/packages/core/useCached/index.ts
index 1d2153900ea..bd16e0449e4 100644
--- a/packages/core/useCached/index.ts
+++ b/packages/core/useCached/index.ts
@@ -1,12 +1,12 @@
 import type { Ref, WatchOptions } from 'vue'
-import { ref, watch } from 'vue'
+import { ref as deepRef, watch } from 'vue'
 
 export function useCached<T>(
   refValue: Ref<T>,
   comparator: (a: T, b: T) => boolean = (a, b) => a === b,
   watchOptions?: WatchOptions,
 ): Ref<T> {
-  const cachedValue = ref(refValue.value) as Ref<T>
+  const cachedValue = deepRef(refValue.value) as Ref<T>
 
   watch(() => refValue.value, (value) => {
     if (!comparator(value, cachedValue.value))
diff --git a/packages/core/useClipboard/demo.vue b/packages/core/useClipboard/demo.vue
index 456bd590659..5cc5ac91241 100644
--- a/packages/core/useClipboard/demo.vue
+++ b/packages/core/useClipboard/demo.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { useClipboard, usePermission } from '@vueuse/core'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 
-const input = ref('')
+const input = shallowRef('')
 
 const { text, isSupported, copy } = useClipboard()
 const permissionRead = usePermission('clipboard-read')
diff --git a/packages/core/useClipboard/index.ts b/packages/core/useClipboard/index.ts
index 910f200ae1d..ffeaac4a5b7 100644
--- a/packages/core/useClipboard/index.ts
+++ b/packages/core/useClipboard/index.ts
@@ -4,7 +4,7 @@ import type { MaybeRefOrGetter } from '@vueuse/shared'
 import type { ComputedRef } from 'vue'
 import type { ConfigurableNavigator } from '../_configurable'
 import { useTimeoutFn } from '@vueuse/shared'
-import { computed, ref, toValue } from 'vue'
+import { computed, shallowRef, toValue } from 'vue'
 import { defaultNavigator } from '../_configurable'
 import { useEventListener } from '../useEventListener'
 import { usePermission } from '../usePermission'
@@ -66,8 +66,8 @@ export function useClipboard(options: UseClipboardOptions<MaybeRefOrGetter<strin
   const permissionRead = usePermission('clipboard-read')
   const permissionWrite = usePermission('clipboard-write')
   const isSupported = computed(() => isClipboardApiSupported.value || legacy)
-  const text = ref('')
-  const copied = ref(false)
+  const text = shallowRef('')
+  const copied = shallowRef(false)
   const timeout = useTimeoutFn(() => copied.value = false, copiedDuring, { immediate: false })
 
   function updateText() {
diff --git a/packages/core/useClipboardItems/demo.vue b/packages/core/useClipboardItems/demo.vue
index 4eb46f330a3..0a259d43fdc 100644
--- a/packages/core/useClipboardItems/demo.vue
+++ b/packages/core/useClipboardItems/demo.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { useClipboardItems, usePermission } from '@vueuse/core'
-import { effect, ref } from 'vue'
+import { effect, shallowRef } from 'vue'
 
-const input = ref('')
+const input = shallowRef('')
 
 const { content, isSupported, copy } = useClipboardItems()
-const computedText = ref('')
-const computedMimeType = ref('')
+const computedText = shallowRef('')
+const computedMimeType = shallowRef('')
 effect(() => {
   Promise.all(content.value.map(item => item.getType('text/plain')))
     .then(async (blobs) => {
diff --git a/packages/core/useClipboardItems/index.ts b/packages/core/useClipboardItems/index.ts
index c0717bbc27b..10a03c0c2fe 100644
--- a/packages/core/useClipboardItems/index.ts
+++ b/packages/core/useClipboardItems/index.ts
@@ -2,7 +2,7 @@ import type { MaybeRefOrGetter } from '@vueuse/shared'
 import type { ComputedRef } from 'vue'
 import type { ConfigurableNavigator } from '../_configurable'
 import { useTimeoutFn } from '@vueuse/shared'
-import { ref, toValue } from 'vue'
+import { ref as deepRef, shallowRef, toValue } from 'vue'
 import { defaultNavigator } from '../_configurable'
 import { useEventListener } from '../useEventListener'
 import { useSupported } from '../useSupported'
@@ -52,8 +52,8 @@ export function useClipboardItems(options: UseClipboardItemsOptions<MaybeRefOrGe
   } = options
 
   const isSupported = useSupported(() => (navigator && 'clipboard' in navigator))
-  const content = ref<ClipboardItems>([])
-  const copied = ref(false)
+  const content = deepRef<ClipboardItems>([])
+  const copied = shallowRef(false)
   const timeout = useTimeoutFn(() => copied.value = false, copiedDuring, { immediate: false })
 
   function updateContent() {
diff --git a/packages/core/useCloned/index.test.ts b/packages/core/useCloned/index.test.ts
index 716a499f785..1ce9f4f8eb3 100644
--- a/packages/core/useCloned/index.test.ts
+++ b/packages/core/useCloned/index.test.ts
@@ -1,6 +1,6 @@
 import { useCloned } from '@vueuse/core'
 import { describe, expect, it } from 'vitest'
-import { nextTick, ref } from 'vue'
+import { ref as deepRef, nextTick } from 'vue'
 
 describe('useCloned', () => {
   it('works with simple objects', () => {
@@ -18,7 +18,7 @@ describe('useCloned', () => {
   })
 
   it('works with refs', async () => {
-    const data = ref({ test: 'test' })
+    const data = deepRef({ test: 'test' })
 
     const { cloned } = useCloned(data)
 
@@ -30,7 +30,7 @@ describe('useCloned', () => {
   })
 
   it('works with getter function', async () => {
-    const data = ref({ test: 'test' })
+    const data = deepRef({ test: 'test' })
 
     const { cloned } = useCloned(() => data.value)
 
@@ -42,7 +42,7 @@ describe('useCloned', () => {
   })
 
   it('works with refs and manual sync', async () => {
-    const data = ref({ test: 'test' })
+    const data = deepRef({ test: 'test' })
 
     const { cloned, sync } = useCloned(data, { manual: true })
 
@@ -56,7 +56,7 @@ describe('useCloned', () => {
   })
 
   it('works with custom clone function', async () => {
-    const data = ref<Record<string, any>>({ test: 'test' })
+    const data = deepRef<Record<string, any>>({ test: 'test' })
 
     const { cloned } = useCloned(data, {
       clone: source => ({ ...source, proxyTest: true }),
@@ -71,7 +71,7 @@ describe('useCloned', () => {
   })
 
   it('works with watch options', async () => {
-    const data = ref({ test: 'test' })
+    const data = deepRef({ test: 'test' })
 
     const { cloned } = useCloned(data, { immediate: false, deep: false })
 
@@ -95,7 +95,7 @@ describe('useCloned', () => {
   })
 
   it('works with use isModified', async () => {
-    const data = ref({ test: 'test' })
+    const data = deepRef({ test: 'test' })
 
     const { cloned, isModified, sync } = useCloned(data)
 
diff --git a/packages/core/useCloned/index.ts b/packages/core/useCloned/index.ts
index 8cb2c642b01..9ee215f3cef 100644
--- a/packages/core/useCloned/index.ts
+++ b/packages/core/useCloned/index.ts
@@ -1,6 +1,6 @@
 import type { MaybeRefOrGetter } from '@vueuse/shared'
 import type { Ref, WatchOptions } from 'vue'
-import { isRef, ref, toValue, watch } from 'vue'
+import { ref as deepRef, isRef, toValue, watch } from 'vue'
 
 export interface UseClonedOptions<T = any> extends WatchOptions {
   /**
@@ -43,8 +43,8 @@ export function useCloned<T>(
   source: MaybeRefOrGetter<T>,
   options: UseClonedOptions = {},
 ): UseClonedReturn<T> {
-  const cloned = ref({} as T) as Ref<T>
-  const isModified = ref<boolean>(false)
+  const cloned = deepRef({} as T) as Ref<T>
+  const isModified = deepRef<boolean>(false)
   let _lastSync = false
 
   const {
diff --git a/packages/core/useColorMode/index.test.ts b/packages/core/useColorMode/index.test.ts
index 0cd0d76bd89..ce5df908f13 100644
--- a/packages/core/useColorMode/index.test.ts
+++ b/packages/core/useColorMode/index.test.ts
@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 import { afterAll, beforeEach, describe, expect, it, vi } from 'vitest'
-import { nextTick, ref } from 'vue'
+import { nextTick, shallowRef } from 'vue'
 import { nextTwoTick } from '../../.test'
 import { usePreferredDark } from '../usePreferredDark'
 import { useColorMode } from './index'
@@ -10,7 +10,7 @@ describe('useColorMode', () => {
   const htmlEl = document.querySelector('html')
 
   vi.mock('../usePreferredDark', () => {
-    const mockPreferredDark = ref(false)
+    const mockPreferredDark = shallowRef(false)
     return {
       usePreferredDark: () => mockPreferredDark,
     }
diff --git a/packages/core/useConfirmDialog/demo.vue b/packages/core/useConfirmDialog/demo.vue
index 3c1daa5597e..8f391633509 100644
--- a/packages/core/useConfirmDialog/demo.vue
+++ b/packages/core/useConfirmDialog/demo.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { useConfirmDialog } from '@vueuse/core'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 
-const message = ref('')
-const revaled1 = ref(false)
-const revaled2 = ref(false)
+const message = shallowRef('')
+const revaled1 = shallowRef(false)
+const revaled2 = shallowRef(false)
 
 const dialog1 = useConfirmDialog(revaled1)
 const dialog2 = useConfirmDialog(revaled2)
diff --git a/packages/core/useConfirmDialog/index.test.ts b/packages/core/useConfirmDialog/index.test.ts
index 3069ea24c03..05e3552aa90 100644
--- a/packages/core/useConfirmDialog/index.test.ts
+++ b/packages/core/useConfirmDialog/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { nextTick, ref } from 'vue'
+import { nextTick, shallowRef } from 'vue'
 import { useConfirmDialog } from './index'
 
 describe('useConfirmDialog', () => {
@@ -8,7 +8,7 @@ describe('useConfirmDialog', () => {
   })
 
   it('should open the dialog and close on confirm', () => {
-    const show = ref(false)
+    const show = shallowRef(false)
 
     const {
       reveal,
@@ -23,7 +23,7 @@ describe('useConfirmDialog', () => {
   })
 
   it('should close on cancel', () => {
-    const show = ref(false)
+    const show = shallowRef(false)
 
     const {
       reveal,
@@ -38,8 +38,8 @@ describe('useConfirmDialog', () => {
   })
 
   it('should execute `onReveal` fn on open dialog', () => {
-    const show = ref(false)
-    const message = ref('initial')
+    const show = shallowRef(false)
+    const message = shallowRef('initial')
 
     const {
       reveal,
@@ -58,8 +58,8 @@ describe('useConfirmDialog', () => {
   })
 
   it('should execute a callback inside `onConfirm` hook only after confirming', () => {
-    const show = ref(false)
-    const message = ref('initial')
+    const show = shallowRef(false)
+    const message = shallowRef('initial')
 
     const {
       reveal,
@@ -79,8 +79,8 @@ describe('useConfirmDialog', () => {
   })
 
   it('should execute a callback inside `onCancel` hook only after canceling dialog', () => {
-    const show = ref(false)
-    const message = ref('initial')
+    const show = shallowRef(false)
+    const message = shallowRef('initial')
 
     const {
       reveal,
@@ -100,8 +100,8 @@ describe('useConfirmDialog', () => {
   })
 
   it('should pass data from confirm fn to `onConfirm` hook', () => {
-    const message = ref('initial')
-    const show = ref(false)
+    const message = shallowRef('initial')
+    const show = shallowRef(false)
     const data = { value: 'confirm' }
 
     const {
@@ -121,8 +121,8 @@ describe('useConfirmDialog', () => {
   })
 
   it('should pass data from cancel fn to `onCancel` hook', async () => {
-    const message = ref('initial')
-    const show = ref(false)
+    const message = shallowRef('initial')
+    const show = shallowRef(false)
     const data = { value: 'confirm' }
 
     const {
@@ -142,7 +142,7 @@ describe('useConfirmDialog', () => {
   })
 
   it('should return promise that will be resolved on `confirm()`', async () => {
-    const show = ref(false)
+    const show = shallowRef(false)
 
     const {
       reveal,
@@ -162,7 +162,7 @@ describe('useConfirmDialog', () => {
   })
 
   it('should return promise that will be resolved on `cancel()`', async () => {
-    const show = ref(false)
+    const show = shallowRef(false)
 
     const {
       reveal,
diff --git a/packages/core/useConfirmDialog/index.ts b/packages/core/useConfirmDialog/index.ts
index b4ebb6d02df..9ead19a454d 100644
--- a/packages/core/useConfirmDialog/index.ts
+++ b/packages/core/useConfirmDialog/index.ts
@@ -1,7 +1,7 @@
 import type { EventHook, EventHookOn } from '@vueuse/shared'
 import type { ComputedRef, Ref } from 'vue'
 import { createEventHook, noop } from '@vueuse/shared'
-import { computed, ref } from 'vue'
+import { computed, shallowRef } from 'vue'
 
 export type UseConfirmDialogRevealResult<C, D>
   = {
@@ -67,7 +67,7 @@ export function useConfirmDialog<
   ConfirmData = any,
   CancelData = any,
 >(
-  revealed: Ref<boolean> = ref(false),
+  revealed: Ref<boolean> = shallowRef(false),
 ): UseConfirmDialogReturn<RevealData, ConfirmData, CancelData> {
   const confirmHook: EventHook = createEventHook<ConfirmData>()
   const cancelHook: EventHook = createEventHook<CancelData>()
diff --git a/packages/core/useCountdown/demo.vue b/packages/core/useCountdown/demo.vue
index 7055483239d..ee8f9f70ef6 100644
--- a/packages/core/useCountdown/demo.vue
+++ b/packages/core/useCountdown/demo.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { useEventListener } from '@vueuse/core'
-import { ref } from 'vue'
+import { ref as deepRef, shallowRef } from 'vue'
 import { useCountdown } from './index'
 
-const countdownSeconds = ref(5)
-const rocketRef = ref<HTMLDivElement>()
+const countdownSeconds = shallowRef(5)
+const rocketRef = deepRef<HTMLDivElement>()
 const { remaining, start, stop, pause, resume } = useCountdown(countdownSeconds, {
   onComplete() {
     rocketRef.value!.classList.add('launching')
diff --git a/packages/core/useCountdown/index.test.ts b/packages/core/useCountdown/index.test.ts
index 273b74f246b..75242c02397 100644
--- a/packages/core/useCountdown/index.test.ts
+++ b/packages/core/useCountdown/index.test.ts
@@ -1,7 +1,7 @@
 import type { Pausable } from '@vueuse/shared'
 import type { UseCountdownOptions } from './index'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { effectScope, ref } from 'vue'
+import { effectScope, shallowRef } from 'vue'
 import { useCountdown } from './index'
 
 describe('useCountdown', () => {
@@ -112,7 +112,7 @@ describe('useCountdown', () => {
   })
 
   it('initial interval can be changed', async () => {
-    const countdown = ref(3)
+    const countdown = shallowRef(3)
 
     const { start } = useCountdown(countdown, { ...options, immediate: false })
 
diff --git a/packages/core/useCountdown/index.ts b/packages/core/useCountdown/index.ts
index 0337ae7da8f..1417f43f222 100644
--- a/packages/core/useCountdown/index.ts
+++ b/packages/core/useCountdown/index.ts
@@ -1,7 +1,7 @@
 import type { MaybeRefOrGetter, Pausable } from '@vueuse/shared'
 import type { Ref } from 'vue'
 import { useIntervalFn } from '@vueuse/shared'
-import { ref, toValue } from 'vue'
+import { shallowRef, toValue } from 'vue'
 
 export interface UseCountdownOptions {
   /**
@@ -52,7 +52,7 @@ export interface UseCountdownReturn extends Pausable {
  * @see https://vueuse.org/useCountdown
  */
 export function useCountdown(initialCountdown: MaybeRefOrGetter<number>, options?: UseCountdownOptions): UseCountdownReturn {
-  const remaining = ref(toValue(initialCountdown))
+  const remaining = shallowRef(toValue(initialCountdown))
 
   const intervalController = useIntervalFn(() => {
     const value = remaining.value - 1
diff --git a/packages/core/useCssVar/demo.vue b/packages/core/useCssVar/demo.vue
index 9c3cbe8b27b..79e6ea8210c 100644
--- a/packages/core/useCssVar/demo.vue
+++ b/packages/core/useCssVar/demo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useCssVar } from '@vueuse/core'
-import { ref, useTemplateRef } from 'vue'
+import { shallowRef, useTemplateRef } from 'vue'
 
 const el = useTemplateRef('el')
 const color = useCssVar('--color', el)
@@ -13,7 +13,7 @@ function switchColor() {
 }
 
 const elv = useTemplateRef('elv')
-const key = ref('--color')
+const key = shallowRef('--color')
 const colorVal = useCssVar(key, elv)
 function changeVar() {
   if (key.value === '--color')
diff --git a/packages/core/useCssVar/index.test.ts b/packages/core/useCssVar/index.test.ts
index 894ee3d9af7..1a4e5056735 100644
--- a/packages/core/useCssVar/index.test.ts
+++ b/packages/core/useCssVar/index.test.ts
@@ -1,6 +1,6 @@
 import { defaultWindow } from '@vueuse/core'
 import { describe, expect, it } from 'vitest'
-import { defineComponent, h, nextTick, onMounted, ref, shallowRef, useTemplateRef } from 'vue'
+import { defineComponent, h, nextTick, onMounted, shallowRef, useTemplateRef } from 'vue'
 import { mount } from '../../.test'
 import { useCssVar } from './index'
 
@@ -173,7 +173,7 @@ describe('useCssVar', () => {
     const vm = mount(defineComponent({
       setup() {
         const el = useTemplateRef<HTMLDivElement>('el')
-        const key = ref('--color')
+        const key = shallowRef('--color')
         const variable = useCssVar(key, el)
 
         function changeVar() {
diff --git a/packages/core/useCssVar/index.ts b/packages/core/useCssVar/index.ts
index 5bf58c37e47..d1a6a5a889d 100644
--- a/packages/core/useCssVar/index.ts
+++ b/packages/core/useCssVar/index.ts
@@ -1,7 +1,7 @@
 import type { MaybeRefOrGetter } from '@vueuse/shared'
 import type { ConfigurableWindow } from '../_configurable'
 import type { MaybeElementRef } from '../unrefElement'
-import { computed, ref, toValue, watch } from 'vue'
+import { computed, shallowRef, toValue, watch } from 'vue'
 import { defaultWindow } from '../_configurable'
 import { unrefElement } from '../unrefElement'
 import { useMutationObserver } from '../useMutationObserver'
@@ -29,7 +29,7 @@ export function useCssVar(
   options: UseCssVarOptions = {},
 ) {
   const { window = defaultWindow, initialValue, observe = false } = options
-  const variable = ref(initialValue)
+  const variable = shallowRef(initialValue)
   const elRef = computed(() => unrefElement(target) || window?.document?.documentElement)
 
   function updateCssVar() {
diff --git a/packages/core/useCycleList/demo.vue b/packages/core/useCycleList/demo.vue
index ebc7a248dfd..c30b315bf4a 100644
--- a/packages/core/useCycleList/demo.vue
+++ b/packages/core/useCycleList/demo.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { useCycleList } from '@vueuse/core'
-import { ref } from 'vue'
+import { ref as deepRef } from 'vue'
 
-const list = ref([
+const list = deepRef([
   'Dog',
   'Cat',
   'Lizard',
diff --git a/packages/core/useCycleList/index.test.ts b/packages/core/useCycleList/index.test.ts
index 43d194cbb0e..d18d321abe7 100644
--- a/packages/core/useCycleList/index.test.ts
+++ b/packages/core/useCycleList/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { ref } from 'vue'
+import { ref as deepRef } from 'vue'
 import { useCycleList } from './index'
 
 describe('useCycleList', () => {
@@ -31,7 +31,7 @@ describe('useCycleList', () => {
   })
 
   it('should work with ref', () => {
-    const list = ref(['foo', 'bar', 'fooBar'])
+    const list = deepRef(['foo', 'bar', 'fooBar'])
 
     const { state, next, prev, index, go } = useCycleList(list)
 
@@ -71,7 +71,7 @@ describe('useCycleList', () => {
 
   describe('when list empty', () => {
     it('returns the correctly data', () => {
-      const list = ref(['foo', 'bar', 'fooBar'])
+      const list = deepRef(['foo', 'bar', 'fooBar'])
 
       const { state, index } = useCycleList(list)
 
diff --git a/packages/core/useDebouncedRefHistory/demo.vue b/packages/core/useDebouncedRefHistory/demo.vue
index 44d8be18f00..a0afaf94af9 100644
--- a/packages/core/useDebouncedRefHistory/demo.vue
+++ b/packages/core/useDebouncedRefHistory/demo.vue
@@ -2,13 +2,12 @@
 import type { Ref } from 'vue'
 import { formatDate, useDebouncedRefHistory } from '@vueuse/core'
 import { useCounter } from '@vueuse/shared'
-
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 
 function format(ts: number) {
   return formatDate(new Date(ts), 'YYYY-MM-DD HH:mm:ss')
 }
-const delay: Ref<number> = ref(1000)
+const delay: Ref<number> = shallowRef(1000)
 
 const { count, inc, dec } = useCounter()
 const { history, undo, redo, canUndo, canRedo } = useDebouncedRefHistory(
diff --git a/packages/core/useDebouncedRefHistory/index.test.ts b/packages/core/useDebouncedRefHistory/index.test.ts
index 7b635f8c4d4..bcb9150cfc2 100644
--- a/packages/core/useDebouncedRefHistory/index.test.ts
+++ b/packages/core/useDebouncedRefHistory/index.test.ts
@@ -1,10 +1,10 @@
 import { describe, expect, it, vi } from 'vitest'
-import { nextTick, ref } from 'vue'
+import { nextTick, shallowRef } from 'vue'
 import { useDebouncedRefHistory } from './index'
 
 describe('useDebouncedRefHistory', () => {
   it('once the ref\'s value has changed and some time has passed, ensure the snapshot is updated', async () => {
-    const v = ref(0)
+    const v = shallowRef(0)
 
     const { history } = useDebouncedRefHistory(v, { debounce: 10 })
     v.value = 100
@@ -18,7 +18,7 @@ describe('useDebouncedRefHistory', () => {
   })
 
   it('when debounce is undefined', async () => {
-    const v = ref(0)
+    const v = shallowRef(0)
 
     const { history } = useDebouncedRefHistory(v, { deep: false })
 
diff --git a/packages/core/useDeviceMotion/index.ts b/packages/core/useDeviceMotion/index.ts
index 9c4e02352d5..c6dd78dd89b 100644
--- a/packages/core/useDeviceMotion/index.ts
+++ b/packages/core/useDeviceMotion/index.ts
@@ -4,7 +4,7 @@ import type { ConfigurableEventFilter } from '@vueuse/shared'
 import type { Ref } from 'vue'
 import type { ConfigurableWindow } from '../_configurable'
 import { bypassFilter, createFilterWrapper } from '@vueuse/shared'
-import { ref } from 'vue'
+import { ref as deepRef, shallowRef } from 'vue'
 import { defaultWindow } from '../_configurable'
 import { useEventListener } from '../useEventListener'
 import { useSupported } from '../useSupported'
@@ -38,11 +38,11 @@ export function useDeviceMotion(options: DeviceMotionOptions = {}) {
 
   const isSupported = useSupported(() => typeof DeviceMotionEvent !== 'undefined')
   const requirePermissions = useSupported(() => isSupported.value && 'requestPermission' in DeviceMotionEvent && typeof DeviceMotionEvent.requestPermission === 'function')
-  const permissionGranted = ref(false)
-  const acceleration: Ref<DeviceMotionEvent['acceleration']> = ref({ x: null, y: null, z: null })
-  const rotationRate: Ref<DeviceMotionEvent['rotationRate']> = ref({ alpha: null, beta: null, gamma: null })
-  const interval = ref(0)
-  const accelerationIncludingGravity: Ref<DeviceMotionEvent['accelerationIncludingGravity']> = ref({
+  const permissionGranted = shallowRef(false)
+  const acceleration: Ref<DeviceMotionEvent['acceleration']> = deepRef({ x: null, y: null, z: null })
+  const rotationRate: Ref<DeviceMotionEvent['rotationRate']> = deepRef({ alpha: null, beta: null, gamma: null })
+  const interval = shallowRef(0)
+  const accelerationIncludingGravity: Ref<DeviceMotionEvent['accelerationIncludingGravity']> = deepRef({
     x: null,
     y: null,
     z: null,
diff --git a/packages/core/useDeviceOrientation/index.ts b/packages/core/useDeviceOrientation/index.ts
index 379b9aacf14..55528b5d62e 100644
--- a/packages/core/useDeviceOrientation/index.ts
+++ b/packages/core/useDeviceOrientation/index.ts
@@ -2,7 +2,7 @@
 
 import type { Ref } from 'vue'
 import type { ConfigurableWindow } from '../_configurable'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 import { defaultWindow } from '../_configurable'
 import { useEventListener } from '../useEventListener'
 import { useSupported } from '../useSupported'
@@ -17,10 +17,10 @@ export function useDeviceOrientation(options: ConfigurableWindow = {}) {
   const { window = defaultWindow } = options
   const isSupported = useSupported(() => window && 'DeviceOrientationEvent' in window)
 
-  const isAbsolute = ref(false)
-  const alpha: Ref<number | null> = ref(null)
-  const beta: Ref<number | null> = ref(null)
-  const gamma: Ref<number | null> = ref(null)
+  const isAbsolute = shallowRef(false)
+  const alpha: Ref<number | null> = shallowRef(null)
+  const beta: Ref<number | null> = shallowRef(null)
+  const gamma: Ref<number | null> = shallowRef(null)
 
   if (window && isSupported.value) {
     useEventListener(window, 'deviceorientation', (event) => {
diff --git a/packages/core/useDevicePixelRatio/index.ts b/packages/core/useDevicePixelRatio/index.ts
index fc72231a42c..268bc528be1 100644
--- a/packages/core/useDevicePixelRatio/index.ts
+++ b/packages/core/useDevicePixelRatio/index.ts
@@ -1,6 +1,6 @@
 import type { ConfigurableWindow } from '../_configurable'
 import { noop, watchImmediate } from '@vueuse/shared'
-import { readonly, ref } from 'vue'
+import { readonly, shallowRef } from 'vue'
 import { defaultWindow } from '../_configurable'
 import { useMediaQuery } from '../useMediaQuery'
 
@@ -14,7 +14,7 @@ export function useDevicePixelRatio(options: ConfigurableWindow = {}) {
     window = defaultWindow,
   } = options
 
-  const pixelRatio = ref(1)
+  const pixelRatio = shallowRef(1)
   const query = useMediaQuery(() => `(resolution: ${pixelRatio.value}dppx)`, options)
   let stop = noop
 
diff --git a/packages/core/useDevicesList/index.ts b/packages/core/useDevicesList/index.ts
index 8263117ad45..8b512bab28c 100644
--- a/packages/core/useDevicesList/index.ts
+++ b/packages/core/useDevicesList/index.ts
@@ -2,7 +2,7 @@
 
 import type { ComputedRef, Ref } from 'vue'
 import type { ConfigurableNavigator } from '../_configurable'
-import { computed, ref } from 'vue'
+import { computed, ref as deepRef, shallowRef } from 'vue'
 import { defaultNavigator } from '../_configurable'
 import { useEventListener } from '../useEventListener'
 import { usePermission } from '../usePermission'
@@ -52,12 +52,12 @@ export function useDevicesList(options: UseDevicesListOptions = {}): UseDevicesL
     onUpdated,
   } = options
 
-  const devices = ref([]) as Ref<MediaDeviceInfo[]>
+  const devices = deepRef([]) as Ref<MediaDeviceInfo[]>
   const videoInputs = computed(() => devices.value.filter(i => i.kind === 'videoinput'))
   const audioInputs = computed(() => devices.value.filter(i => i.kind === 'audioinput'))
   const audioOutputs = computed(() => devices.value.filter(i => i.kind === 'audiooutput'))
   const isSupported = useSupported(() => navigator && navigator.mediaDevices && navigator.mediaDevices.enumerateDevices)
-  const permissionGranted = ref(false)
+  const permissionGranted = shallowRef(false)
   let stream: MediaStream | null
 
   async function update() {
diff --git a/packages/core/useDisplayMedia/demo.vue b/packages/core/useDisplayMedia/demo.vue
index 2afb8734286..4029334bb5a 100644
--- a/packages/core/useDisplayMedia/demo.vue
+++ b/packages/core/useDisplayMedia/demo.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { useDisplayMedia } from '@vueuse/core'
-import { ref, watchEffect } from 'vue'
+import { ref as deepRef, watchEffect } from 'vue'
 
-const video = ref<HTMLVideoElement>()
+const video = deepRef<HTMLVideoElement>()
 const { stream, enabled } = useDisplayMedia()
 
 watchEffect(() => {
diff --git a/packages/core/useDisplayMedia/index.ts b/packages/core/useDisplayMedia/index.ts
index ed1e2c640bc..626b56be984 100644
--- a/packages/core/useDisplayMedia/index.ts
+++ b/packages/core/useDisplayMedia/index.ts
@@ -1,7 +1,7 @@
 import type { MaybeRef } from '@vueuse/shared'
 import type { Ref } from 'vue'
 import type { ConfigurableNavigator } from '../_configurable'
-import { ref, shallowRef, watch } from 'vue'
+import { shallowRef, watch } from 'vue'
 import { defaultNavigator } from '../_configurable'
 import { useEventListener } from '../useEventListener'
 import { useSupported } from '../useSupported'
@@ -30,7 +30,7 @@ export interface UseDisplayMediaOptions extends ConfigurableNavigator {
  * @param options
  */
 export function useDisplayMedia(options: UseDisplayMediaOptions = {}) {
-  const enabled = ref(options.enabled ?? false)
+  const enabled = shallowRef(options.enabled ?? false)
   const video = options.video
   const audio = options.audio
   const { navigator = defaultNavigator } = options
diff --git a/packages/core/useDocumentVisibility/demo.vue b/packages/core/useDocumentVisibility/demo.vue
index a2255c18a72..69f11f809d9 100644
--- a/packages/core/useDocumentVisibility/demo.vue
+++ b/packages/core/useDocumentVisibility/demo.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { useDocumentVisibility } from '@vueuse/core'
 import { useTimeoutFn } from '@vueuse/shared'
-import { ref, watch } from 'vue'
+import { shallowRef, watch } from 'vue'
 
 const startMessage = '💡 Minimize the page or switch tab then return'
-const message = ref(startMessage)
+const message = shallowRef(startMessage)
 const visibility = useDocumentVisibility()
 
 const timeout = useTimeoutFn(() => {
diff --git a/packages/core/useDocumentVisibility/index.ts b/packages/core/useDocumentVisibility/index.ts
index c290cea1752..8797febe791 100644
--- a/packages/core/useDocumentVisibility/index.ts
+++ b/packages/core/useDocumentVisibility/index.ts
@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 import type { ConfigurableDocument } from '../_configurable'
-import { ref } from 'vue'
+import { ref as deepRef, shallowRef } from 'vue'
 import { defaultDocument } from '../_configurable'
 import { useEventListener } from '../useEventListener'
 
@@ -12,9 +12,9 @@ import { useEventListener } from '../useEventListener'
 export function useDocumentVisibility(options: ConfigurableDocument = {}): Ref<DocumentVisibilityState> {
   const { document = defaultDocument } = options
   if (!document)
-    return ref('visible')
+    return shallowRef('visible')
 
-  const visibility = ref(document.visibilityState)
+  const visibility = deepRef(document.visibilityState)
 
   useEventListener(document, 'visibilitychange', () => {
     visibility.value = document.visibilityState
diff --git a/packages/core/useDraggable/component.ts b/packages/core/useDraggable/component.ts
index 3bc0f6d2779..06db1b965ee 100644
--- a/packages/core/useDraggable/component.ts
+++ b/packages/core/useDraggable/component.ts
@@ -1,7 +1,7 @@
 import type { UseDraggableOptions } from '@vueuse/core'
 import type { Position, RenderableComponent } from '../types'
 import { isClient, useDraggable, useStorage } from '@vueuse/core'
-import { computed, defineComponent, h, reactive, ref, toValue } from 'vue'
+import { computed, defineComponent, h, reactive, shallowRef, toValue } from 'vue'
 
 export interface UseDraggableProps extends UseDraggableOptions, RenderableComponent {
   /**
@@ -38,7 +38,7 @@ export const UseDraggable = /* #__PURE__ */ defineComponent<UseDraggableProps>({
     'containerElement',
   ] as unknown as undefined,
   setup(props, { slots }) {
-    const target = ref()
+    const target = shallowRef()
     const handle = computed(() => props.handle ?? target.value)
     const containerElement = computed(() => props.containerElement as (HTMLElement | SVGElement | null | undefined) ?? undefined)
     const disabled = computed(() => !!props.disabled)
diff --git a/packages/core/useDraggable/demo.vue b/packages/core/useDraggable/demo.vue
index e93e1db7717..d66a0144c3a 100644
--- a/packages/core/useDraggable/demo.vue
+++ b/packages/core/useDraggable/demo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useDraggable } from '@vueuse/core'
 import { isClient } from '@vueuse/shared'
-import { ref, useTemplateRef } from 'vue'
+import { shallowRef, useTemplateRef } from 'vue'
 import { UseDraggable as Draggable } from './component'
 
 const el = useTemplateRef<HTMLElement>('el')
@@ -9,7 +9,7 @@ const handle = useTemplateRef<HTMLElement>('handle')
 
 const innerWidth = isClient ? window.innerWidth : 200
 
-const disabled = ref(false)
+const disabled = shallowRef(false)
 const { x, y, style } = useDraggable(el, {
   initialValue: { x: innerWidth / 4.2, y: 80 },
   preventDefault: true,
diff --git a/packages/core/useDraggable/index.ts b/packages/core/useDraggable/index.ts
index 41444107084..d370949b42d 100644
--- a/packages/core/useDraggable/index.ts
+++ b/packages/core/useDraggable/index.ts
@@ -1,7 +1,7 @@
 import type { MaybeRefOrGetter } from '@vueuse/shared'
 import type { PointerType, Position } from '../types'
 import { isClient, toRefs } from '@vueuse/shared'
-import { computed, ref, toValue } from 'vue'
+import { computed, ref as deepRef, toValue } from 'vue'
 import { defaultWindow } from '../_configurable'
 import { useEventListener } from '../useEventListener'
 
@@ -140,11 +140,11 @@ export function useDraggable(
     buttons = [0],
   } = options
 
-  const position = ref<Position>(
+  const position = deepRef<Position>(
     toValue(initialValue) ?? { x: 0, y: 0 },
   )
 
-  const pressedDelta = ref<Position>()
+  const pressedDelta = deepRef<Position>()
 
   const filterEvent = (e: PointerEvent) => {
     if (pointerTypes)
diff --git a/packages/core/useDropZone/demo.vue b/packages/core/useDropZone/demo.vue
index 34d5a0eb5c2..6d5eba5ac75 100644
--- a/packages/core/useDropZone/demo.vue
+++ b/packages/core/useDropZone/demo.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { useDropZone } from '@vueuse/core'
-import { ref } from 'vue'
+import { ref as deepRef } from 'vue'
 
-const filesData = ref<{ name: string, size: number, type: string, lastModified: number }[]>([])
-const imageFilesData = ref<{ name: string, size: number, type: string, lastModified: number }[]>([])
+const filesData = deepRef<{ name: string, size: number, type: string, lastModified: number }[]>([])
+const imageFilesData = deepRef<{ name: string, size: number, type: string, lastModified: number }[]>([])
 
 function onDrop(files: File[] | null) {
   filesData.value = []
@@ -29,8 +29,8 @@ function onImageDrop(files: File[] | null) {
   }
 }
 
-const dropZoneRef = ref<HTMLElement>()
-const imageDropZoneRef = ref<HTMLElement>()
+const dropZoneRef = deepRef<HTMLElement>()
+const imageDropZoneRef = deepRef<HTMLElement>()
 
 const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
 
diff --git a/packages/core/useDropZone/index.ts b/packages/core/useDropZone/index.ts
index f435edbea05..3ccee0735ad 100644
--- a/packages/core/useDropZone/index.ts
+++ b/packages/core/useDropZone/index.ts
@@ -3,7 +3,7 @@ import type { MaybeRef, MaybeRefOrGetter } from '@vueuse/shared'
 import type { Ref } from 'vue'
 import { isClient } from '@vueuse/shared'
 // eslint-disable-next-line no-restricted-imports
-import { ref, shallowRef, unref } from 'vue'
+import { shallowRef, unref } from 'vue'
 
 import { useEventListener } from '../useEventListener'
 
@@ -36,7 +36,7 @@ export function useDropZone(
   target: MaybeRefOrGetter<HTMLElement | null | undefined>,
   options: UseDropZoneOptions | UseDropZoneOptions['onDrop'] = {},
 ): UseDropZoneReturn {
-  const isOverDropZone = ref(false)
+  const isOverDropZone = shallowRef(false)
   const files = shallowRef<File[] | null>(null)
   let counter = 0
   let isValid = true
diff --git a/packages/core/useElementBounding/component.ts b/packages/core/useElementBounding/component.ts
index 5f08978bf75..6451b141036 100644
--- a/packages/core/useElementBounding/component.ts
+++ b/packages/core/useElementBounding/component.ts
@@ -1,13 +1,13 @@
 import type { RenderableComponent } from '../types'
 import type { UseResizeObserverOptions } from '../useResizeObserver'
 import { useElementBounding } from '@vueuse/core'
-import { defineComponent, h, reactive, ref } from 'vue'
+import { defineComponent, h, reactive, shallowRef } from 'vue'
 
 export const UseElementBounding = /* #__PURE__ */ defineComponent<UseResizeObserverOptions & RenderableComponent>({
   name: 'UseElementBounding',
   props: ['box', 'as'] as unknown as undefined,
   setup(props, { slots }) {
-    const target = ref()
+    const target = shallowRef<HTMLElement>()
     const data = reactive(useElementBounding(target))
 
     return () => {
diff --git a/packages/core/useElementBounding/index.ts b/packages/core/useElementBounding/index.ts
index 8de30414faa..d587e5972d2 100644
--- a/packages/core/useElementBounding/index.ts
+++ b/packages/core/useElementBounding/index.ts
@@ -1,6 +1,6 @@
 import type { MaybeComputedElementRef } from '../unrefElement'
 import { tryOnMounted } from '@vueuse/shared'
-import { ref, watch } from 'vue'
+import { shallowRef, watch } from 'vue'
 import { unrefElement } from '../unrefElement'
 import { useEventListener } from '../useEventListener'
 import { useMutationObserver } from '../useMutationObserver'
@@ -63,14 +63,14 @@ export function useElementBounding(
     updateTiming = 'sync',
   } = options
 
-  const height = ref(0)
-  const bottom = ref(0)
-  const left = ref(0)
-  const right = ref(0)
-  const top = ref(0)
-  const width = ref(0)
-  const x = ref(0)
-  const y = ref(0)
+  const height = shallowRef(0)
+  const bottom = shallowRef(0)
+  const left = shallowRef(0)
+  const right = shallowRef(0)
+  const top = shallowRef(0)
+  const width = shallowRef(0)
+  const x = shallowRef(0)
+  const y = shallowRef(0)
 
   function recalculate() {
     const el = unrefElement(target)
diff --git a/packages/core/useElementByPoint/index.ts b/packages/core/useElementByPoint/index.ts
index 8015c6308f8..3d362c55e3d 100644
--- a/packages/core/useElementByPoint/index.ts
+++ b/packages/core/useElementByPoint/index.ts
@@ -2,7 +2,7 @@ import type { MaybeRefOrGetter, Pausable } from '@vueuse/shared'
 import type { ComputedRef, Ref } from 'vue'
 import type { ConfigurableDocument } from '../_configurable'
 import { useIntervalFn } from '@vueuse/shared'
-import { ref, toValue } from 'vue'
+import { ref as deepRef, toValue } from 'vue'
 import { defaultDocument } from '../_configurable'
 import { useRafFn } from '../useRafFn'
 import { useSupported } from '../useSupported'
@@ -43,7 +43,7 @@ export function useElementByPoint<M extends boolean = false>(options: UseElement
     return document && 'elementFromPoint' in document
   })
 
-  const element = ref<any>(null)
+  const element = deepRef<any>(null)
 
   const cb = () => {
     element.value = toValue(multiple)
diff --git a/packages/core/useElementHover/demo.vue b/packages/core/useElementHover/demo.vue
index c6254da0c53..ed040ff28ae 100644
--- a/packages/core/useElementHover/demo.vue
+++ b/packages/core/useElementHover/demo.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { useElementHover } from '@vueuse/core'
-import { ref, useTemplateRef } from 'vue'
+import { shallowRef, useTemplateRef } from 'vue'
 import { vElementHover } from './directive'
 
 const el = useTemplateRef<HTMLButtonElement>('el')
-const isDirectiveHovered = ref(false)
+const isDirectiveHovered = shallowRef(false)
 const isHovered = useElementHover(el, { delayEnter: 200, delayLeave: 600 })
 function onHover(hovered: boolean) {
   isDirectiveHovered.value = hovered
diff --git a/packages/core/useElementHover/index.ts b/packages/core/useElementHover/index.ts
index a30f1f4fb13..993ea4c25d6 100644
--- a/packages/core/useElementHover/index.ts
+++ b/packages/core/useElementHover/index.ts
@@ -2,7 +2,7 @@ import type { MaybeRefOrGetter } from '@vueuse/shared'
 import type { Ref } from 'vue'
 import type { ConfigurableWindow } from '../_configurable'
 import type { MaybeComputedElementRef } from '../unrefElement'
-import { computed, ref } from 'vue'
+import { computed, shallowRef } from 'vue'
 import { defaultWindow } from '../_configurable'
 import { onElementRemoval } from '../onElementRemoval'
 import { unrefElement } from '../unrefElement'
@@ -22,7 +22,7 @@ export function useElementHover(el: MaybeRefOrGetter<EventTarget | null | undefi
     window = defaultWindow,
   } = options
 
-  const isHovered = ref(false)
+  const isHovered = shallowRef(false)
   let timer: ReturnType<typeof setTimeout> | undefined
 
   const toggle = (entering: boolean) => {
diff --git a/packages/core/useElementSize/component.ts b/packages/core/useElementSize/component.ts
index 75b1476cd20..4342ef1c0bb 100644
--- a/packages/core/useElementSize/component.ts
+++ b/packages/core/useElementSize/component.ts
@@ -2,13 +2,13 @@ import type { ElementSize } from '@vueuse/core'
 import type { RenderableComponent } from '../types'
 import type { UseResizeObserverOptions } from '../useResizeObserver'
 import { useElementSize } from '@vueuse/core'
-import { defineComponent, h, reactive, ref } from 'vue'
+import { ref as deepRef, defineComponent, h, reactive } from 'vue'
 
 export const UseElementSize = /* #__PURE__ */ defineComponent<ElementSize & UseResizeObserverOptions & RenderableComponent>({
   name: 'UseElementSize',
   props: ['width', 'height', 'box', 'as'] as unknown as undefined,
   setup(props, { slots }) {
-    const target = ref()
+    const target = deepRef()
     const data = reactive(useElementSize(target, { width: props.width, height: props.height }, { box: props.box }))
 
     return () => {
diff --git a/packages/core/useElementSize/index.ts b/packages/core/useElementSize/index.ts
index 262b186807a..0c0deb09e5b 100644
--- a/packages/core/useElementSize/index.ts
+++ b/packages/core/useElementSize/index.ts
@@ -1,7 +1,7 @@
 import type { MaybeComputedElementRef } from '../unrefElement'
 import type { UseResizeObserverOptions } from '../useResizeObserver'
 import { toArray, tryOnMounted } from '@vueuse/shared'
-import { computed, ref, watch } from 'vue'
+import { computed, ref as deepRef, watch } from 'vue'
 import { defaultWindow } from '../_configurable'
 import { unrefElement } from '../unrefElement'
 import { useResizeObserver } from '../useResizeObserver'
@@ -23,8 +23,8 @@ export function useElementSize(
 ) {
   const { window = defaultWindow, box = 'content-box' } = options
   const isSVG = computed(() => unrefElement(target)?.namespaceURI?.includes('svg'))
-  const width = ref(initialSize.width)
-  const height = ref(initialSize.height)
+  const width = deepRef(initialSize.width)
+  const height = deepRef(initialSize.height)
 
   const { stop: stop1 } = useResizeObserver(
     target,
diff --git a/packages/core/useElementVisibility/component.ts b/packages/core/useElementVisibility/component.ts
index 0b2240280bc..81dcdca4174 100644
--- a/packages/core/useElementVisibility/component.ts
+++ b/packages/core/useElementVisibility/component.ts
@@ -1,12 +1,12 @@
 import type { RenderableComponent } from '../types'
 import { useElementVisibility } from '@vueuse/core'
-import { defineComponent, h, reactive, ref } from 'vue'
+import { ref as deepRef, defineComponent, h, reactive } from 'vue'
 
 export const UseElementVisibility = /* #__PURE__ */ defineComponent<RenderableComponent>({
   name: 'UseElementVisibility',
   props: ['as'] as unknown as undefined,
   setup(props, { slots }) {
-    const target = ref()
+    const target = deepRef()
     const data = reactive({
       isVisible: useElementVisibility(target),
     })
diff --git a/packages/core/useElementVisibility/index.ts b/packages/core/useElementVisibility/index.ts
index da679800c0c..c189c95e2a5 100644
--- a/packages/core/useElementVisibility/index.ts
+++ b/packages/core/useElementVisibility/index.ts
@@ -3,7 +3,7 @@ import type { ConfigurableWindow } from '../_configurable'
 import type { MaybeComputedElementRef } from '../unrefElement'
 import type { UseIntersectionObserverOptions } from '../useIntersectionObserver'
 import { watchOnce } from '@vueuse/shared'
-import { ref, toValue } from 'vue'
+import { shallowRef, toValue } from 'vue'
 import { defaultWindow } from '../_configurable'
 import { useIntersectionObserver } from '../useIntersectionObserver'
 
@@ -40,7 +40,7 @@ export function useElementVisibility(
     rootMargin,
     once = false,
   } = options
-  const elementIsVisible = ref(false)
+  const elementIsVisible = shallowRef(false)
 
   const { stop } = useIntersectionObserver(
     element,
diff --git a/packages/core/useEventBus/demo.vue b/packages/core/useEventBus/demo.vue
index 5eacddeddf0..704da9d48ad 100644
--- a/packages/core/useEventBus/demo.vue
+++ b/packages/core/useEventBus/demo.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { useEventBus } from '@vueuse/core'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 
 const { on, emit } = useEventBus<string>('vue-use-event-bus')
-const message = ref('')
+const message = shallowRef('')
 const news = [
   'Su Bingtian broke the Asian record and entered the Olympic 100-meter race finals as the first person in China-RTHK',
   'Comprehensive investigation in Zhengzhou to avoid further spread of the epidemic-RTHK',
diff --git a/packages/core/useEventListener/index.test.ts b/packages/core/useEventListener/index.test.ts
index 0041b3aa241..4a6833ce1f5 100644
--- a/packages/core/useEventListener/index.test.ts
+++ b/packages/core/useEventListener/index.test.ts
@@ -2,7 +2,7 @@ import type { Fn } from '@vueuse/shared'
 import type { MockInstance } from 'vitest'
 import type { Ref } from 'vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { computed, effectScope, nextTick, ref } from 'vue'
+import { computed, ref as deepRef, effectScope, nextTick, shallowRef } from 'vue'
 import { useEventListener } from './index'
 
 describe('useEventListener', () => {
@@ -153,7 +153,7 @@ describe('useEventListener', () => {
     let listener: () => any
 
     beforeEach(() => {
-      target = ref(document.createElement('div'))
+      target = shallowRef(document.createElement('div'))
       listener = vi.fn()
     })
 
@@ -245,7 +245,7 @@ describe('useEventListener', () => {
       const listener = vi.fn()
       const el1 = document.createElement('div')
       const el2 = document.createElement('div')
-      const active = ref(true)
+      const active = shallowRef(true)
 
       useEventListener(() => active.value ? [el1, el2] : [], 'mousedown', listener)
       await nextTick()
@@ -283,7 +283,7 @@ describe('useEventListener', () => {
       const listener = vi.fn()
       const el1 = document.createElement('div')
       const el2 = document.createElement('div')
-      const active = ref(true)
+      const active = shallowRef(true)
 
       useEventListener(() => active.value ? [el1, el2] : [], ['mousedown', 'click'], listener)
       await nextTick()
@@ -310,9 +310,9 @@ describe('useEventListener', () => {
       const listener2 = vi.fn()
       const el1 = document.createElement('div')
       const el2 = document.createElement('div')
-      const els = ref([el1])
-      const events = ref(['click'])
-      const listeners = ref([listener1])
+      const els = deepRef([el1])
+      const events = deepRef(['click'])
+      const listeners = deepRef([listener1])
 
       useEventListener(els, events, listeners)
       el1.dispatchEvent(new Event('click'))
@@ -340,9 +340,9 @@ describe('useEventListener', () => {
   })
 
   it('should auto re-register', async () => {
-    const target = ref()
+    const target = deepRef()
     const listener = vi.fn()
-    const options = ref<any>(false)
+    const options = deepRef<any>(false)
     useEventListener(target, 'click', listener, options)
 
     const el = document.createElement('div')
diff --git a/packages/core/useEventSource/index.ts b/packages/core/useEventSource/index.ts
index 89d91485896..ac450e5f493 100644
--- a/packages/core/useEventSource/index.ts
+++ b/packages/core/useEventSource/index.ts
@@ -1,7 +1,7 @@
 import type { Fn, MaybeRefOrGetter } from '@vueuse/shared'
 import type { Ref } from 'vue'
 import { isClient, toRef, tryOnScopeDispose } from '@vueuse/shared'
-import { ref, shallowRef, watch } from 'vue'
+import { ref as deepRef, shallowRef, watch } from 'vue'
 import { useEventListener } from '../useEventListener'
 
 export type EventSourceStatus = 'CONNECTING' | 'OPEN' | 'CLOSED'
@@ -115,10 +115,10 @@ export function useEventSource<Events extends string[]>(
   events: Events = [] as unknown as Events,
   options: UseEventSourceOptions = {},
 ): UseEventSourceReturn<Events> {
-  const event: Ref<string | null> = ref(null)
-  const data: Ref<string | null> = ref(null)
-  const status = ref('CONNECTING') as Ref<EventSourceStatus>
-  const eventSource = ref(null) as Ref<EventSource | null>
+  const event: Ref<string | null> = deepRef(null)
+  const data: Ref<string | null> = deepRef(null)
+  const status = shallowRef('CONNECTING') as Ref<EventSourceStatus>
+  const eventSource = deepRef(null) as Ref<EventSource | null>
   const error = shallowRef(null) as Ref<Event | null>
   const urlRef = toRef(url)
   const lastEventId = shallowRef<string | null>(null)
diff --git a/packages/core/useEyeDropper/index.ts b/packages/core/useEyeDropper/index.ts
index 4bdc552877b..1755296a3ac 100644
--- a/packages/core/useEyeDropper/index.ts
+++ b/packages/core/useEyeDropper/index.ts
@@ -1,4 +1,4 @@
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 import { useSupported } from '../useSupported'
 
 export interface EyeDropperOpenOptions {
@@ -32,7 +32,7 @@ export interface UseEyeDropperOptions {
 export function useEyeDropper(options: UseEyeDropperOptions = {}) {
   const { initialValue = '' } = options
   const isSupported = useSupported(() => typeof window !== 'undefined' && 'EyeDropper' in window)
-  const sRGBHex = ref(initialValue)
+  const sRGBHex = shallowRef(initialValue)
 
   async function open(openOptions?: EyeDropperOpenOptions) {
     if (!isSupported.value)
diff --git a/packages/core/useFavicon/demo.vue b/packages/core/useFavicon/demo.vue
index 7a3399ffd90..3306781b2d7 100644
--- a/packages/core/useFavicon/demo.vue
+++ b/packages/core/useFavicon/demo.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { useFavicon } from '@vueuse/core'
-import { computed, ref } from 'vue'
+import { computed, shallowRef } from 'vue'
 
-const type = ref('vueuse')
+const type = shallowRef('vueuse')
 
 const favicon = computed(() =>
   type.value === 'vue' ? 'vue.png' : 'favicon-32x32.png')
diff --git a/packages/core/useFavicon/index.test.ts b/packages/core/useFavicon/index.test.ts
index 61de6e4cf22..3eff620283e 100644
--- a/packages/core/useFavicon/index.test.ts
+++ b/packages/core/useFavicon/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { computed, ref } from 'vue'
+import { computed, ref as deepRef, shallowRef } from 'vue'
 import { useFavicon } from './index'
 
 describe('useFavicon', () => {
@@ -32,7 +32,7 @@ describe('useFavicon', () => {
   })
 
   it('ref const', () => {
-    const targetRef = ref('v1')
+    const targetRef = shallowRef('v1')
     const favicon = useFavicon(targetRef)
     expect(favicon.value).toEqual('v1')
     targetRef.value = 'v2'
@@ -40,18 +40,18 @@ describe('useFavicon', () => {
   })
 
   it('ref null', () => {
-    const targetRef = ref(null)
+    const targetRef = deepRef(null)
     const favicon = useFavicon(targetRef)
     expect(favicon.value).toEqual(null)
   })
 
   it('ref undefined', () => {
-    const favicon = useFavicon(ref(undefined))
+    const favicon = useFavicon(deepRef(undefined))
     expect(favicon.value).toEqual(undefined)
   })
 
   it('computed/readonly', () => {
-    const onoff = ref(1)
+    const onoff = shallowRef(1)
     const target = computed(() => onoff.value === 1 ? 'a.jpg' : 'b.jpg')
     const favicon = useFavicon(target)
     expect(favicon.value).toEqual('a.jpg')
diff --git a/packages/core/useFetch/demo.vue b/packages/core/useFetch/demo.vue
index 7364592ec44..fca831ed6a6 100644
--- a/packages/core/useFetch/demo.vue
+++ b/packages/core/useFetch/demo.vue
@@ -2,10 +2,10 @@
 import { useFetch } from '@vueuse/core'
 import { stringify } from '@vueuse/docs-utils'
 import { useToggle } from '@vueuse/shared'
-import { computed, reactive, ref } from 'vue'
+import { computed, reactive, shallowRef } from 'vue'
 
-const url = ref('https://httpbin.org/get')
-const refetch = ref(false)
+const url = shallowRef('https://httpbin.org/get')
+const refetch = shallowRef(false)
 
 const toggleRefetch = useToggle(refetch)
 
diff --git a/packages/core/useFetch/index.test.ts b/packages/core/useFetch/index.test.ts
index 1601b88ea16..e67e427ab5c 100644
--- a/packages/core/useFetch/index.test.ts
+++ b/packages/core/useFetch/index.test.ts
@@ -1,7 +1,7 @@
 import type { AfterFetchContext, OnFetchErrorContext } from './index'
 import { until } from '@vueuse/shared'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { nextTick, ref } from 'vue'
+import { ref as deepRef, nextTick, shallowRef } from 'vue'
 import { isBelowNode18 } from '../../.test'
 import { createFetch, useFetch } from './index'
 import '../../.test/mockServer'
@@ -135,7 +135,7 @@ describe.skipIf(isBelowNode18)('useFetch', () => {
   })
 
   it('should refetch if refetch is set to true', async () => {
-    const url = ref('https://example.com')
+    const url = shallowRef('https://example.com')
     useFetch(url, { refetch: true })
     url.value = 'https://example.com?text'
     await vi.waitFor(() => {
@@ -144,7 +144,7 @@ describe.skipIf(isBelowNode18)('useFetch', () => {
   })
 
   it('should auto refetch when the refetch is set to true and the payload is a ref', async () => {
-    const param = ref({ num: 1 })
+    const param = deepRef({ num: 1 })
     useFetch('https://example.com', { refetch: true }).post(param)
     param.value.num = 2
     await vi.waitFor(() => {
@@ -722,7 +722,7 @@ describe.skipIf(isBelowNode18)('useFetch', () => {
   })
 
   it('should listen url ref change abort previous request', async () => {
-    const url = ref('https://example.com')
+    const url = shallowRef('https://example.com')
     const { onFetchResponse } = useFetch(url, { refetch: true, immediate: false })
 
     onFetchResponse(onFetchResponseSpy)
@@ -739,7 +739,7 @@ describe.skipIf(isBelowNode18)('useFetch', () => {
   })
 
   it('should be generated payloadType on execute', async () => {
-    const form = ref()
+    const form = deepRef()
     const { execute } = useFetch('https://example.com').post(form)
 
     form.value = { x: 1 }
@@ -751,7 +751,7 @@ describe.skipIf(isBelowNode18)('useFetch', () => {
   })
 
   it('should be generated payloadType on execute with formdata', async () => {
-    const form = ref<any>({ x: 1 })
+    const form = deepRef<any>({ x: 1 })
     const { execute } = useFetch('https://example.com').post(form)
 
     form.value = new FormData()
@@ -807,4 +807,32 @@ describe.skipIf(isBelowNode18)('useFetch', () => {
       expect(options?.execute).toBeDefined()
     })
   })
+
+  it('should partial overwrite when combination is overwrite', async () => {
+    const useMyFetch = createFetch({
+      baseUrl: 'https://example.com',
+      combination: 'overwrite',
+      options: {
+        beforeFetch({ options }) {
+          options.headers = { ...options.headers, before: 'Global' }
+          return { options }
+        },
+        afterFetch(ctx) {
+          ctx.data.after = 'Global'
+          return ctx
+        },
+      },
+    })
+
+    const { data } = useMyFetch('test', {
+      beforeFetch({ options }) {
+        options.headers = { ...options.headers, before: 'Local' }
+      },
+    }).json()
+
+    await vi.waitFor(() => {
+      expect(fetchSpyHeaders()).toMatchObject({ before: 'Local' })
+      expect(data.value).toEqual(expect.objectContaining({ after: 'Global' }))
+    })
+  })
 })
diff --git a/packages/core/useFetch/index.ts b/packages/core/useFetch/index.ts
index c65a3c1cced..7c347434c9d 100644
--- a/packages/core/useFetch/index.ts
+++ b/packages/core/useFetch/index.ts
@@ -1,7 +1,7 @@
 import type { EventHookOn, Fn, MaybeRefOrGetter, Stoppable } from '@vueuse/shared'
 import type { ComputedRef, Ref } from 'vue'
 import { containsProp, createEventHook, toRef, until, useTimeoutFn } from '@vueuse/shared'
-import { computed, isRef, readonly, ref, shallowRef, toValue, watch } from 'vue'
+import { computed, ref as deepRef, isRef, readonly, shallowRef, toValue, watch } from 'vue'
 import { defaultWindow } from '../_configurable'
 
 export interface UseFetchReturn<T> {
@@ -247,7 +247,13 @@ function combineCallbacks<T = any>(combination: Combination, ...callbacks: (((ct
   if (combination === 'overwrite') {
     // use last callback
     return async (ctx: T) => {
-      const callback = callbacks[callbacks.length - 1]
+      let callback
+      for (let i = callbacks.length - 1; i >= 0; i--) {
+        if (callbacks[i] != null) {
+          callback = callbacks[i]
+          break
+        }
+      }
       if (callback)
         return { ...ctx, ...(await callback(ctx)) }
 
@@ -375,10 +381,10 @@ export function useFetch<T>(url: MaybeRefOrGetter<string>, ...args: any[]): UseF
   const errorEvent = createEventHook<any>()
   const finallyEvent = createEventHook<any>()
 
-  const isFinished = ref(false)
-  const isFetching = ref(false)
-  const aborted = ref(false)
-  const statusCode = ref<number | null>(null)
+  const isFinished = shallowRef(false)
+  const isFetching = shallowRef(false)
+  const aborted = shallowRef(false)
+  const statusCode = deepRef<number | null>(null)
   const response = shallowRef<Response | null>(null)
   const error = shallowRef<any>(null)
   const data = shallowRef<T | null>(initialData || null)
diff --git a/packages/core/useFileDialog/index.ts b/packages/core/useFileDialog/index.ts
index c165f0dcc72..da0d2f3ec0e 100644
--- a/packages/core/useFileDialog/index.ts
+++ b/packages/core/useFileDialog/index.ts
@@ -2,7 +2,7 @@ import type { EventHookOn } from '@vueuse/shared'
 import type { Ref } from 'vue'
 import type { ConfigurableDocument } from '../_configurable'
 import { createEventHook, hasOwn } from '@vueuse/shared'
-import { readonly, ref } from 'vue'
+import { ref as deepRef, readonly } from 'vue'
 import { defaultDocument } from '../_configurable'
 
 export interface UseFileDialogOptions extends ConfigurableDocument {
@@ -79,7 +79,7 @@ export function useFileDialog(options: UseFileDialogOptions = {}): UseFileDialog
     document = defaultDocument,
   } = options
 
-  const files = ref<FileList | null>(prepareInitialFiles(options.initialFiles))
+  const files = deepRef<FileList | null>(prepareInitialFiles(options.initialFiles))
   const { on: onChange, trigger: changeTrigger } = createEventHook()
   const { on: onCancel, trigger: cancelTrigger } = createEventHook()
   let input: HTMLInputElement | undefined
diff --git a/packages/core/useFileSystemAccess/demo.vue b/packages/core/useFileSystemAccess/demo.vue
index 927f5705458..7058ed0b9eb 100644
--- a/packages/core/useFileSystemAccess/demo.vue
+++ b/packages/core/useFileSystemAccess/demo.vue
@@ -2,9 +2,9 @@
 import type { Ref } from 'vue'
 import { useFileSystemAccess } from '@vueuse/core'
 import { stringify } from '@vueuse/docs-utils'
-import { reactive, ref } from 'vue'
+import { reactive, shallowRef } from 'vue'
 
-const dataType = ref('Text') as Ref<'Text' | 'ArrayBuffer' | 'Blob'>
+const dataType = shallowRef('Text') as Ref<'Text' | 'ArrayBuffer' | 'Blob'>
 const res = useFileSystemAccess({
   dataType,
   types: [{
diff --git a/packages/core/useFileSystemAccess/index.ts b/packages/core/useFileSystemAccess/index.ts
index 0933b6efc79..77d6b6902af 100644
--- a/packages/core/useFileSystemAccess/index.ts
+++ b/packages/core/useFileSystemAccess/index.ts
@@ -1,7 +1,7 @@
 import type { Awaitable, MaybeRefOrGetter } from '@vueuse/shared'
 import type { ComputedRef, Ref } from 'vue'
 import type { ConfigurableWindow } from '../_configurable'
-import { computed, ref, toValue, watch } from 'vue'
+import { computed, shallowRef, toValue, watch } from 'vue'
 import { defaultWindow } from '../_configurable'
 import { useSupported } from '../useSupported'
 
@@ -106,10 +106,10 @@ export function useFileSystemAccess(options: UseFileSystemAccessOptions = {}): U
   const window = _window as FileSystemAccessWindow
   const isSupported = useSupported(() => window && 'showSaveFilePicker' in window && 'showOpenFilePicker' in window)
 
-  const fileHandle = ref<FileSystemFileHandle>()
-  const data = ref<string | ArrayBuffer | Blob>()
+  const fileHandle = shallowRef<FileSystemFileHandle>()
+  const data = shallowRef<string | ArrayBuffer | Blob>()
 
-  const file = ref<File>()
+  const file = shallowRef<File>()
   const fileName = computed(() => file.value?.name ?? '')
   const fileMIME = computed(() => file.value?.type ?? '')
   const fileSize = computed(() => file.value?.size ?? 0)
diff --git a/packages/core/useFocus/demo.vue b/packages/core/useFocus/demo.vue
index 24bf12f85dd..8a0640b7135 100644
--- a/packages/core/useFocus/demo.vue
+++ b/packages/core/useFocus/demo.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { useFocus } from '@vueuse/core'
-import { ref } from 'vue'
+import { ref as deepRef } from 'vue'
 
-const text = ref()
-const input = ref()
-const button = ref()
+const text = deepRef()
+const input = deepRef()
+const button = deepRef()
 
 const { focused: paragraphFocus } = useFocus(text)
 const { focused: inputFocus } = useFocus(input, { initialValue: true })
@@ -48,8 +48,8 @@ const { focused: buttonFocus } = useFocus(button)
 </template>
 
 <style scoped>
-.demo-el:focus {
-  opacity: 0.7;
-  box-shadow: 0 0 2px 1px var(--vp-c-brand);
-}
+.demo-el:focus {
+  opacity: 0.7;
+  box-shadow: 0 0 2px 1px var(--vp-c-brand);
+}
 </style>
diff --git a/packages/core/useFocus/index.test.ts b/packages/core/useFocus/index.test.ts
index 37b204f4d2b..dddc57c04e1 100644
--- a/packages/core/useFocus/index.test.ts
+++ b/packages/core/useFocus/index.test.ts
@@ -1,13 +1,13 @@
 import type { Ref } from 'vue'
 import { beforeEach, describe, expect, it } from 'vitest'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 import { useFocus } from './index'
 
 describe('useFocus', () => {
   let target: Ref<HTMLButtonElement>
 
   beforeEach(() => {
-    target = ref(document.createElement('button'))
+    target = shallowRef(document.createElement('button'))
     target.value.tabIndex = 0
     document.body.appendChild(target.value)
   })
diff --git a/packages/core/useFocus/index.ts b/packages/core/useFocus/index.ts
index 87dc9b8cbbf..02dfcca3f61 100644
--- a/packages/core/useFocus/index.ts
+++ b/packages/core/useFocus/index.ts
@@ -1,7 +1,7 @@
 import type { Ref } from 'vue'
 import type { ConfigurableWindow } from '../_configurable'
 import type { MaybeElementRef } from '../unrefElement'
-import { computed, ref, watch } from 'vue'
+import { computed, shallowRef, watch } from 'vue'
 import { unrefElement } from '../unrefElement'
 import { useEventListener } from '../useEventListener'
 
@@ -46,7 +46,7 @@ export interface UseFocusReturn {
 export function useFocus(target: MaybeElementRef, options: UseFocusOptions = {}): UseFocusReturn {
   const { initialValue = false, focusVisible = false, preventScroll = false } = options
 
-  const innerFocused = ref(false)
+  const innerFocused = shallowRef(false)
   const targetElement = computed(() => unrefElement(target))
 
   const listenerOptions = { passive: true }
diff --git a/packages/core/useFocusWithin/demo.vue b/packages/core/useFocusWithin/demo.vue
index c2f34a47ec2..46ad4676608 100644
--- a/packages/core/useFocusWithin/demo.vue
+++ b/packages/core/useFocusWithin/demo.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { useFocusWithin } from '@vueuse/core'
-import { ref } from 'vue'
+import { ref as deepRef } from 'vue'
 
-const target = ref()
+const target = deepRef()
 
 const { focused } = useFocusWithin(target)
 </script>
diff --git a/packages/core/useFocusWithin/index.test.ts b/packages/core/useFocusWithin/index.test.ts
index d561697302b..59426e5eef6 100644
--- a/packages/core/useFocusWithin/index.test.ts
+++ b/packages/core/useFocusWithin/index.test.ts
@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 import { beforeEach, describe, expect, it } from 'vitest'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 import { useFocusWithin } from './index'
 
 describe('useFocusWithin', () => {
@@ -10,19 +10,19 @@ describe('useFocusWithin', () => {
   let grandchild: Ref<HTMLInputElement>
 
   beforeEach(() => {
-    parent = ref(document.createElement('form'))
+    parent = shallowRef(document.createElement('form'))
     parent.value.tabIndex = 0
     document.body.appendChild(parent.value)
 
-    child = ref(document.createElement('div'))
+    child = shallowRef(document.createElement('div'))
     child.value.tabIndex = 0
     parent.value.appendChild(child.value)
 
-    child2 = ref(document.createElement('div'))
+    child2 = shallowRef(document.createElement('div'))
     child2.value.tabIndex = 0
     parent.value.appendChild(child2.value)
 
-    grandchild = ref(document.createElement('input'))
+    grandchild = shallowRef(document.createElement('input'))
     grandchild.value.tabIndex = 0
     child.value.appendChild(grandchild.value)
   })
diff --git a/packages/core/useFocusWithin/index.ts b/packages/core/useFocusWithin/index.ts
index 020a5c63892..84db0fabfbd 100644
--- a/packages/core/useFocusWithin/index.ts
+++ b/packages/core/useFocusWithin/index.ts
@@ -1,7 +1,7 @@
 import type { ComputedRef } from 'vue'
 import type { ConfigurableWindow } from '../_configurable'
 import type { MaybeElementRef } from '../unrefElement'
-import { computed, ref } from 'vue'
+import { computed, shallowRef } from 'vue'
 import { defaultWindow } from '../_configurable'
 import { unrefElement } from '../unrefElement'
 import { useActiveElement } from '../useActiveElement'
@@ -28,7 +28,7 @@ const PSEUDO_CLASS_FOCUS_WITHIN = ':focus-within'
 export function useFocusWithin(target: MaybeElementRef, options: ConfigurableWindow = {}): UseFocusWithinReturn {
   const { window = defaultWindow } = options
   const targetElement = computed(() => unrefElement(target))
-  const _focused = ref(false)
+  const _focused = shallowRef(false)
   const focused = computed(() => _focused.value)
   const activeElement = useActiveElement(options)
 
diff --git a/packages/core/useFps/index.ts b/packages/core/useFps/index.ts
index 5170ff28d83..2657e7cf243 100644
--- a/packages/core/useFps/index.ts
+++ b/packages/core/useFps/index.ts
@@ -1,5 +1,5 @@
 import type { Ref } from 'vue'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 import { useRafFn } from '../useRafFn'
 
 export interface UseFpsOptions {
@@ -11,7 +11,7 @@ export interface UseFpsOptions {
 }
 
 export function useFps(options?: UseFpsOptions): Ref<number> {
-  const fps = ref(0)
+  const fps = shallowRef(0)
   if (typeof performance === 'undefined')
     return fps
   const every = options?.every ?? 10
diff --git a/packages/core/useFullscreen/component.ts b/packages/core/useFullscreen/component.ts
index d975e4ec5ae..6201e50a7bc 100644
--- a/packages/core/useFullscreen/component.ts
+++ b/packages/core/useFullscreen/component.ts
@@ -1,12 +1,12 @@
 import type { RenderableComponent } from '../types'
 import { useFullscreen } from '@vueuse/core'
-import { defineComponent, h, reactive, ref } from 'vue'
+import { ref as deepRef, defineComponent, h, reactive } from 'vue'
 
 export const UseFullscreen = /* #__PURE__ */ defineComponent<RenderableComponent>({
   name: 'UseFullscreen',
   props: ['as'] as unknown as undefined,
   setup(props, { slots }) {
-    const target = ref()
+    const target = deepRef()
     const data = reactive(useFullscreen(target))
 
     return () => {
diff --git a/packages/core/useFullscreen/index.ts b/packages/core/useFullscreen/index.ts
index 9af4974cebc..3e31b1e6043 100644
--- a/packages/core/useFullscreen/index.ts
+++ b/packages/core/useFullscreen/index.ts
@@ -1,7 +1,7 @@
 import type { ConfigurableDocument } from '../_configurable'
 import type { MaybeElementRef } from '../unrefElement'
 import { tryOnScopeDispose } from '@vueuse/shared'
-import { computed, ref } from 'vue'
+import { computed, shallowRef } from 'vue'
 import { defaultDocument } from '../_configurable'
 import { unrefElement } from '../unrefElement'
 import { useEventListener } from '../useEventListener'
@@ -41,7 +41,7 @@ export function useFullscreen(
   } = options
 
   const targetRef = computed(() => unrefElement(target) ?? document?.documentElement)
-  const isFullscreen = ref(false)
+  const isFullscreen = shallowRef(false)
 
   const requestMethod = computed<'requestFullscreen' | undefined>(() => {
     return [
diff --git a/packages/core/useGamepad/index.ts b/packages/core/useGamepad/index.ts
index 655f3aeac50..d16c8707966 100644
--- a/packages/core/useGamepad/index.ts
+++ b/packages/core/useGamepad/index.ts
@@ -1,7 +1,7 @@
 import type { Ref } from 'vue'
 import type { ConfigurableNavigator, ConfigurableWindow } from '../_configurable'
 import { createEventHook, tryOnMounted } from '@vueuse/shared'
-import { computed, ref } from 'vue'
+import { computed, ref as deepRef } from 'vue'
 import { defaultNavigator } from '../_configurable'
 import { useEventListener } from '../useEventListener'
 import { useRafFn } from '../useRafFn'
@@ -64,7 +64,7 @@ export function useGamepad(options: UseGamepadOptions = {}) {
     navigator = defaultNavigator,
   } = options
   const isSupported = useSupported(() => navigator && 'getGamepads' in navigator)
-  const gamepads = ref<Gamepad[]>([])
+  const gamepads = deepRef<Gamepad[]>([])
 
   const onConnectedHook = createEventHook<number>()
   const onDisconnectedHook = createEventHook<number>()
diff --git a/packages/core/useGeolocation/index.ts b/packages/core/useGeolocation/index.ts
index fb14b6b89e1..a1e7daab097 100644
--- a/packages/core/useGeolocation/index.ts
+++ b/packages/core/useGeolocation/index.ts
@@ -3,7 +3,7 @@
 import type { Ref } from 'vue'
 import type { ConfigurableNavigator } from '../_configurable'
 import { tryOnScopeDispose } from '@vueuse/shared'
-import { ref, shallowRef } from 'vue'
+import { ref as deepRef, shallowRef } from 'vue'
 import { defaultNavigator } from '../_configurable'
 import { useSupported } from '../useSupported'
 
@@ -28,9 +28,9 @@ export function useGeolocation(options: UseGeolocationOptions = {}) {
 
   const isSupported = useSupported(() => navigator && 'geolocation' in navigator)
 
-  const locatedAt: Ref<number | null> = ref(null)
+  const locatedAt: Ref<number | null> = deepRef(null)
   const error = shallowRef<GeolocationPositionError | null>(null)
-  const coords: Ref<Omit<GeolocationPosition['coords'], 'toJSON'>> = ref({
+  const coords: Ref<Omit<GeolocationPosition['coords'], 'toJSON'>> = deepRef({
     accuracy: 0,
     latitude: Number.POSITIVE_INFINITY,
     longitude: Number.POSITIVE_INFINITY,
diff --git a/packages/core/useIdle/index.ts b/packages/core/useIdle/index.ts
index 78da19366f1..bd050619594 100644
--- a/packages/core/useIdle/index.ts
+++ b/packages/core/useIdle/index.ts
@@ -3,7 +3,7 @@ import type { Ref } from 'vue'
 import type { ConfigurableWindow } from '../_configurable'
 import type { WindowEventName } from '../useEventListener'
 import { createFilterWrapper, throttleFilter, timestamp } from '@vueuse/shared'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 import { defaultWindow } from '../_configurable'
 import { useEventListener } from '../useEventListener'
 
@@ -55,8 +55,8 @@ export function useIdle(
     window = defaultWindow,
     eventFilter = throttleFilter(50),
   } = options
-  const idle = ref(initialState)
-  const lastActive = ref(timestamp())
+  const idle = shallowRef(initialState)
+  const lastActive = shallowRef(timestamp())
 
   let timer: any
 
diff --git a/packages/core/useImage/demo.vue b/packages/core/useImage/demo.vue
index d36492f50cd..0b044d2f04b 100644
--- a/packages/core/useImage/demo.vue
+++ b/packages/core/useImage/demo.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { useImage } from '@vueuse/core'
-import { ref } from 'vue'
+import { ref as deepRef } from 'vue'
 
-const imageOptions = ref({ src: 'https://place-hold.it/300x200' })
+const imageOptions = deepRef({ src: 'https://place-hold.it/300x200' })
 const colors = ['fff', '000', '5f0caa']
 const { isLoading, error } = useImage(imageOptions, { delay: 1000 })
 
diff --git a/packages/core/useInfiniteScroll/demo.vue b/packages/core/useInfiniteScroll/demo.vue
index 054d8690ffc..cda396d72dd 100644
--- a/packages/core/useInfiniteScroll/demo.vue
+++ b/packages/core/useInfiniteScroll/demo.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { useInfiniteScroll } from '@vueuse/core'
-import { ref, useTemplateRef } from 'vue'
+import { ref as deepRef, useTemplateRef } from 'vue'
 
 const el = useTemplateRef<HTMLElement>('el')
-const data = ref<number[]>([])
+const data = deepRef<number[]>([])
 
 const { reset } = useInfiniteScroll(
   el,
diff --git a/packages/core/useInfiniteScroll/index.test.ts b/packages/core/useInfiniteScroll/index.test.ts
index 42ae4238122..735185d903b 100644
--- a/packages/core/useInfiniteScroll/index.test.ts
+++ b/packages/core/useInfiniteScroll/index.test.ts
@@ -1,6 +1,6 @@
 import { flushPromises } from '@vue/test-utils'
 import { describe, expect, it, vi } from 'vitest'
-import { ref } from 'vue'
+import { ref as deepRef } from 'vue'
 import { useElementVisibility } from '../useElementVisibility'
 import { useInfiniteScroll } from './index'
 
@@ -11,7 +11,7 @@ describe('useInfiniteScroll', () => {
   })
 
   it.each([
-    [ref(givenMockElement())],
+    [deepRef(givenMockElement())],
     [givenMockElement()],
     [document],
     [window],
@@ -66,7 +66,7 @@ describe('useInfiniteScroll', () => {
   }
 
   function givenElementVisibilityRefMock(defaultValue: boolean) {
-    const mockVisibilityRef = ref(defaultValue)
+    const mockVisibilityRef = deepRef(defaultValue)
     vi.mocked(useElementVisibility).mockReturnValue(mockVisibilityRef)
     return mockVisibilityRef
   }
diff --git a/packages/core/useInfiniteScroll/index.ts b/packages/core/useInfiniteScroll/index.ts
index 3209c170349..365338e360f 100644
--- a/packages/core/useInfiniteScroll/index.ts
+++ b/packages/core/useInfiniteScroll/index.ts
@@ -2,7 +2,7 @@ import type { Awaitable, MaybeRefOrGetter } from '@vueuse/shared'
 import type { UnwrapNestedRefs } from 'vue'
 import type { UseScrollOptions } from '../useScroll'
 import { tryOnUnmounted } from '@vueuse/shared'
-import { computed, nextTick, reactive, ref, toValue, watch } from 'vue'
+import { computed, ref as deepRef, nextTick, reactive, toValue, watch } from 'vue'
 import { resolveElement } from '../_resolve-element'
 import { useElementVisibility } from '../useElementVisibility'
 import { useScroll } from '../useScroll'
@@ -66,7 +66,7 @@ export function useInfiniteScroll<T extends InfiniteScrollElement>(
     },
   ))
 
-  const promise = ref<any>()
+  const promise = deepRef<any>()
   const isLoading = computed(() => !!promise.value)
 
   // Document and Window cannot be observed by IntersectionObserver
diff --git a/packages/core/useIntersectionObserver/demo.vue b/packages/core/useIntersectionObserver/demo.vue
index 82d58e13494..d8b78a7ff65 100644
--- a/packages/core/useIntersectionObserver/demo.vue
+++ b/packages/core/useIntersectionObserver/demo.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { useIntersectionObserver } from '@vueuse/core'
-import { ref } from 'vue'
+import { ref as deepRef, shallowRef } from 'vue'
 
-const root = ref(null)
-const target = ref(null)
-const isVisible = ref(false)
+const root = deepRef(null)
+const target = deepRef(null)
+const isVisible = shallowRef(false)
 
 const { isActive, pause, resume } = useIntersectionObserver(
   target,
diff --git a/packages/core/useIntersectionObserver/index.ts b/packages/core/useIntersectionObserver/index.ts
index e15e3e8d2e4..390d250f91c 100644
--- a/packages/core/useIntersectionObserver/index.ts
+++ b/packages/core/useIntersectionObserver/index.ts
@@ -3,7 +3,7 @@ import type { ComputedRef } from 'vue'
 import type { ConfigurableWindow } from '../_configurable'
 import type { MaybeComputedElementRef, MaybeElement } from '../unrefElement'
 import { noop, notNullish, toArray, tryOnScopeDispose } from '@vueuse/shared'
-import { computed, ref, toValue, watch } from 'vue'
+import { computed, ref as deepRef, toValue, watch } from 'vue'
 import { defaultWindow } from '../_configurable'
 import { unrefElement } from '../unrefElement'
 import { useSupported } from '../useSupported'
@@ -66,7 +66,7 @@ export function useIntersectionObserver(
   })
 
   let cleanup = noop
-  const isActive = ref(immediate)
+  const isActive = deepRef(immediate)
 
   const stopWatch = isSupported.value
     ? watch(
diff --git a/packages/core/useKeyModifier/index.ts b/packages/core/useKeyModifier/index.ts
index e0da904a0ea..3d463e9c9f8 100644
--- a/packages/core/useKeyModifier/index.ts
+++ b/packages/core/useKeyModifier/index.ts
@@ -1,7 +1,7 @@
 import type { Ref } from 'vue'
 import type { ConfigurableDocument } from '../_configurable'
 import type { WindowEventName } from '../useEventListener'
-import { ref } from 'vue'
+import { ref as deepRef } from 'vue'
 import { defaultDocument } from '../_configurable'
 import { useEventListener } from '../useEventListener'
 
@@ -34,7 +34,7 @@ export function useKeyModifier<Initial extends boolean | null>(modifier: KeyModi
     initial = null,
   } = options
 
-  const state = ref(initial) as Ref<boolean>
+  const state = deepRef(initial) as Ref<boolean>
 
   if (document) {
     events.forEach((listenerEvent) => {
diff --git a/packages/core/useMagicKeys/index.ts b/packages/core/useMagicKeys/index.ts
index 660297ec5ba..a7da4dc57bf 100644
--- a/packages/core/useMagicKeys/index.ts
+++ b/packages/core/useMagicKeys/index.ts
@@ -1,7 +1,7 @@
 import type { MaybeRefOrGetter } from '@vueuse/shared'
 import type { ComputedRef } from 'vue'
 import { noop } from '@vueuse/shared'
-import { computed, reactive, ref, toValue } from 'vue'
+import { computed, reactive, shallowRef, toValue } from 'vue'
 import { defaultWindow } from '../_configurable'
 import { useEventListener } from '../useEventListener'
 import { DefaultMagicKeysAliasMap } from './aliasMap'
@@ -168,7 +168,7 @@ export function useMagicKeys(options: UseMagicKeysOptions<boolean> = {}): any {
             refs[prop] = computed(() => keys.map(key => toValue(proxy[key])).every(Boolean))
           }
           else {
-            refs[prop] = ref(false)
+            refs[prop] = shallowRef(false)
           }
         }
         const r = Reflect.get(target, prop, rec)
diff --git a/packages/core/useManualRefHistory/index.test.ts b/packages/core/useManualRefHistory/index.test.ts
index caeb41e23cd..259d557dfa4 100644
--- a/packages/core/useManualRefHistory/index.test.ts
+++ b/packages/core/useManualRefHistory/index.test.ts
@@ -1,10 +1,10 @@
 import { describe, expect, it } from 'vitest'
-import { isReactive, ref } from 'vue'
+import { ref as deepRef, isReactive, shallowRef } from 'vue'
 import { useManualRefHistory } from './index'
 
 describe('useManualRefHistory', () => {
   it('should record', () => {
-    const v = ref(0)
+    const v = shallowRef(0)
     const { history, commit } = useManualRefHistory(v)
 
     expect(history.value.length).toBe(1)
@@ -19,7 +19,7 @@ describe('useManualRefHistory', () => {
   })
 
   it('should be able to undo and redo', () => {
-    const v = ref(0)
+    const v = shallowRef(0)
     const { commit, undo, redo, clear, canUndo, canRedo, history, last } = useManualRefHistory(v)
 
     expect(canUndo.value).toBe(false)
@@ -68,7 +68,7 @@ describe('useManualRefHistory', () => {
   })
 
   it('object with deep', () => {
-    const v = ref({ foo: 'bar' })
+    const v = deepRef({ foo: 'bar' })
     const { commit, undo, history } = useManualRefHistory(v, { clone: true })
 
     expect(history.value.length).toBe(1)
@@ -91,7 +91,7 @@ describe('useManualRefHistory', () => {
   })
 
   it('object with clone function', () => {
-    const v = ref({ foo: 'bar' })
+    const v = deepRef({ foo: 'bar' })
     const { commit, undo, history } = useManualRefHistory(v, { clone: x => JSON.parse(JSON.stringify(x)) })
 
     expect(history.value.length).toBe(1)
@@ -114,7 +114,7 @@ describe('useManualRefHistory', () => {
   })
 
   it('dump + parse', () => {
-    const v = ref({ a: 'bar' })
+    const v = deepRef({ a: 'bar' })
     const { history, commit, undo } = useManualRefHistory(v, {
       dump: v => JSON.stringify(v),
       parse: (v: string) => JSON.parse(v),
@@ -136,7 +136,7 @@ describe('useManualRefHistory', () => {
   })
 
   it('reset', () => {
-    const v = ref(0)
+    const v = shallowRef(0)
     const { history, commit, undoStack, redoStack, reset, undo } = useManualRefHistory(v)
 
     expect(history.value.length).toBe(1)
@@ -190,7 +190,7 @@ describe('useManualRefHistory', () => {
   })
 
   it('snapshots should not be reactive', async () => {
-    const v = ref(0)
+    const v = shallowRef(0)
     const { history, commit } = useManualRefHistory(v)
 
     expect(history.value.length).toBe(1)
diff --git a/packages/core/useManualRefHistory/index.ts b/packages/core/useManualRefHistory/index.ts
index 0ea80ea59f0..aae840d4585 100644
--- a/packages/core/useManualRefHistory/index.ts
+++ b/packages/core/useManualRefHistory/index.ts
@@ -1,7 +1,7 @@
 import type { ComputedRef, Ref } from 'vue'
 import type { CloneFn } from '../useCloned'
 import { timestamp } from '@vueuse/shared'
-import { computed, markRaw, ref } from 'vue'
+import { computed, ref as deepRef, markRaw } from 'vue'
 import { cloneFnJSON } from '../useCloned'
 
 export interface UseRefHistoryRecord<T> {
@@ -150,10 +150,10 @@ export function useManualRefHistory<Raw, Serialized = Raw>(
     })
   }
 
-  const last: Ref<UseRefHistoryRecord<Serialized>> = ref(_createHistoryRecord()) as Ref<UseRefHistoryRecord<Serialized>>
+  const last: Ref<UseRefHistoryRecord<Serialized>> = deepRef(_createHistoryRecord()) as Ref<UseRefHistoryRecord<Serialized>>
 
-  const undoStack: Ref<UseRefHistoryRecord<Serialized>[]> = ref([])
-  const redoStack: Ref<UseRefHistoryRecord<Serialized>[]> = ref([])
+  const undoStack: Ref<UseRefHistoryRecord<Serialized>[]> = deepRef([])
+  const redoStack: Ref<UseRefHistoryRecord<Serialized>[]> = deepRef([])
 
   const _setSource = (record: UseRefHistoryRecord<Serialized>) => {
     setSource(source, parse(record.snapshot))
diff --git a/packages/core/useMediaControls/components/Menu.vue b/packages/core/useMediaControls/components/Menu.vue
index cd2def5430a..7707901ab33 100644
--- a/packages/core/useMediaControls/components/Menu.vue
+++ b/packages/core/useMediaControls/components/Menu.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { onClickOutside, useEventListener } from '@vueuse/core'
-import { ref } from 'vue'
+import { shallowRef, useTemplateRef } from 'vue'
 
-const menu = ref()
-const isOpen = ref()
+const menu = useTemplateRef('menu')
+const isOpen = shallowRef(false)
 
 onClickOutside(menu, () => isOpen.value = false)
 useEventListener('keydown', (e) => {
diff --git a/packages/core/useMediaControls/components/Scrubber.vue b/packages/core/useMediaControls/components/Scrubber.vue
index f0d70bc149d..63cdb860e96 100644
--- a/packages/core/useMediaControls/components/Scrubber.vue
+++ b/packages/core/useMediaControls/components/Scrubber.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useEventListener, useMouseInElement, useVModel } from '@vueuse/core'
-import { ref, watch } from 'vue'
+import { ref as deepRef, shallowRef, watch } from 'vue'
 
 const props = defineProps({
   min: { type: Number, default: 0 },
@@ -11,9 +11,9 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue'])
 
-const scrubber = ref()
-const scrubbing = ref(false)
-const pendingValue = ref(0)
+const scrubber = deepRef()
+const scrubbing = shallowRef(false)
+const pendingValue = shallowRef(0)
 
 useEventListener('mouseup', () => scrubbing.value = false, { passive: true })
 
diff --git a/packages/core/useMediaControls/demo.vue b/packages/core/useMediaControls/demo.vue
index 04816351741..06128d72ff4 100644
--- a/packages/core/useMediaControls/demo.vue
+++ b/packages/core/useMediaControls/demo.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { useMediaControls } from '@vueuse/core'
 import { stringify } from '@vueuse/docs-utils'
-import { computed, reactive, ref } from 'vue'
+import { computed, ref as deepRef, reactive, shallowRef } from 'vue'
 import Menu from './components/Menu.vue'
 import MenuItem from './components/MenuItem.vue'
 import Scrubber from './components/Scrubber.vue'
 import Spinner from './components/Spinner.vue'
 
-const video = ref<HTMLVideoElement>()
-const loop = ref(false)
+const video = deepRef<HTMLVideoElement>()
+const loop = shallowRef(false)
 const poster = 'https://cdn.bitmovin.com/content/assets/sintel/poster.png'
 
 const controls = useMediaControls(video, {
diff --git a/packages/core/useMediaControls/index.ts b/packages/core/useMediaControls/index.ts
index b884f69eb55..f1dc43abada 100644
--- a/packages/core/useMediaControls/index.ts
+++ b/packages/core/useMediaControls/index.ts
@@ -1,7 +1,7 @@
 import type { Fn, MaybeRef, MaybeRefOrGetter } from '@vueuse/shared'
 import type { ConfigurableDocument } from '../_configurable'
 import { createEventHook, isObject, toRef, tryOnScopeDispose, watchIgnorable } from '@vueuse/shared'
-import { ref, toValue, watch, watchEffect } from 'vue'
+import { ref as deepRef, shallowRef, toValue, watch, watchEffect } from 'vue'
 import { defaultDocument } from '../_configurable'
 import { useEventListener } from '../useEventListener'
 
@@ -161,20 +161,20 @@ export function useMediaControls(target: MaybeRef<HTMLMediaElement | null | unde
 
   const listenerOptions = { passive: true }
 
-  const currentTime = ref(0)
-  const duration = ref(0)
-  const seeking = ref(false)
-  const volume = ref(1)
-  const waiting = ref(false)
-  const ended = ref(false)
-  const playing = ref(false)
-  const rate = ref(1)
-  const stalled = ref(false)
-  const buffered = ref<[number, number][]>([])
-  const tracks = ref<UseMediaTextTrack[]>([])
-  const selectedTrack = ref<number>(-1)
-  const isPictureInPicture = ref(false)
-  const muted = ref(false)
+  const currentTime = shallowRef(0)
+  const duration = shallowRef(0)
+  const seeking = shallowRef(false)
+  const volume = shallowRef(1)
+  const waiting = shallowRef(false)
+  const ended = shallowRef(false)
+  const playing = shallowRef(false)
+  const rate = shallowRef(1)
+  const stalled = shallowRef(false)
+  const buffered = deepRef<[number, number][]>([])
+  const tracks = deepRef<UseMediaTextTrack[]>([])
+  const selectedTrack = shallowRef<number>(-1)
+  const isPictureInPicture = shallowRef(false)
+  const muted = shallowRef(false)
 
   const supportsPictureInPicture = document && 'pictureInPictureEnabled' in document
 
diff --git a/packages/core/useMediaQuery/index.test.ts b/packages/core/useMediaQuery/index.test.ts
index d89615faea3..3cbc254eb14 100644
--- a/packages/core/useMediaQuery/index.test.ts
+++ b/packages/core/useMediaQuery/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { createSSRApp, nextTick, ref } from 'vue'
+import { createSSRApp, nextTick, shallowRef } from 'vue'
 import { provideSSRWidth } from '../useSSRWidth'
 import { useMediaQuery } from './index'
 
@@ -13,7 +13,7 @@ describe('useMediaQuery', () => {
   })
 
   it('should support ssr media queries', async () => {
-    const query = ref('(min-width: 500px)')
+    const query = shallowRef('(min-width: 500px)')
     const mediaQuery = useMediaQuery(query, { window: null as unknown as undefined, ssrWidth: 500 })
     expect(mediaQuery.value).toBe(true)
     query.value = '(min-width: 501px)'
@@ -49,7 +49,7 @@ describe('useMediaQuery', () => {
     const app = createSSRApp({ render: () => '' })
     provideSSRWidth(500, app)
     await app.runWithContext(async () => {
-      const query = ref('(min-width: 500px)')
+      const query = shallowRef('(min-width: 500px)')
       const mediaQuery = useMediaQuery(query, { window: null as unknown as undefined })
       expect(mediaQuery.value).toBe(true)
       query.value = '(min-width: 501px)'
diff --git a/packages/core/useMediaQuery/index.ts b/packages/core/useMediaQuery/index.ts
index a5965b6518b..4b58ed8b381 100644
--- a/packages/core/useMediaQuery/index.ts
+++ b/packages/core/useMediaQuery/index.ts
@@ -3,7 +3,7 @@
 import type { MaybeRefOrGetter } from '@vueuse/shared'
 import type { ConfigurableWindow } from '../_configurable'
 import { pxValue } from '@vueuse/shared'
-import { computed, ref, shallowRef, toValue, watchEffect } from 'vue'
+import { computed, ref as deepRef, shallowRef, toValue, watchEffect } from 'vue'
 import { defaultWindow } from '../_configurable'
 import { useEventListener } from '../useEventListener'
 import { useSSRWidth } from '../useSSRWidth'
@@ -20,10 +20,10 @@ export function useMediaQuery(query: MaybeRefOrGetter<string>, options: Configur
   const { window = defaultWindow, ssrWidth = useSSRWidth() } = options
   const isSupported = useSupported(() => window && 'matchMedia' in window && typeof window.matchMedia === 'function')
 
-  const ssrSupport = ref(typeof ssrWidth === 'number')
+  const ssrSupport = deepRef(typeof ssrWidth === 'number')
 
   const mediaQuery = shallowRef<MediaQueryList>()
-  const matches = ref(false)
+  const matches = shallowRef(false)
 
   const handler = (event: MediaQueryListEvent) => {
     matches.value = event.matches
diff --git a/packages/core/useMemory/index.ts b/packages/core/useMemory/index.ts
index 827f9525617..0e8c78e6983 100644
--- a/packages/core/useMemory/index.ts
+++ b/packages/core/useMemory/index.ts
@@ -1,6 +1,6 @@
 import type { UseIntervalFnOptions } from '@vueuse/shared'
 import { useIntervalFn } from '@vueuse/shared'
-import { ref } from 'vue'
+import { ref as deepRef } from 'vue'
 import { useSupported } from '../useSupported'
 
 /**
@@ -40,7 +40,7 @@ type PerformanceMemory = Performance & {
  * @param options
  */
 export function useMemory(options: UseMemoryOptions = {}) {
-  const memory = ref<MemoryInfo>()
+  const memory = deepRef<MemoryInfo>()
   const isSupported = useSupported(() => typeof performance !== 'undefined' && 'memory' in performance)
 
   if (isSupported.value) {
diff --git a/packages/core/useMounted/index.ts b/packages/core/useMounted/index.ts
index 4eecc6ce065..de568536fef 100644
--- a/packages/core/useMounted/index.ts
+++ b/packages/core/useMounted/index.ts
@@ -1,5 +1,9 @@
-// eslint-disable-next-line no-restricted-imports
-import { getCurrentInstance, onMounted, ref } from 'vue'
+import {
+  getCurrentInstance,
+  // eslint-disable-next-line no-restricted-imports
+  onMounted,
+  shallowRef,
+} from 'vue'
 
 /**
  * Mounted state in ref.
@@ -7,7 +11,7 @@ import { getCurrentInstance, onMounted, ref } from 'vue'
  * @see https://vueuse.org/useMounted
  */
 export function useMounted() {
-  const isMounted = ref(false)
+  const isMounted = shallowRef(false)
 
   const instance = getCurrentInstance()
   if (instance) {
diff --git a/packages/core/useMouse/index.ts b/packages/core/useMouse/index.ts
index 14e4f2df9fc..b1aefc0569d 100644
--- a/packages/core/useMouse/index.ts
+++ b/packages/core/useMouse/index.ts
@@ -1,7 +1,7 @@
 import type { ConfigurableEventFilter, MaybeRefOrGetter } from '@vueuse/shared'
 import type { ConfigurableWindow } from '../_configurable'
 import type { Position } from '../types'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 import { defaultWindow } from '../_configurable'
 import { useEventListener } from '../useEventListener'
 
@@ -83,9 +83,9 @@ export function useMouse(options: UseMouseOptions = {}) {
   let _prevScrollX = 0
   let _prevScrollY = 0
 
-  const x = ref(initialValue.x)
-  const y = ref(initialValue.y)
-  const sourceType = ref<UseMouseSourceType>(null)
+  const x = shallowRef(initialValue.x)
+  const y = shallowRef(initialValue.y)
+  const sourceType = shallowRef<UseMouseSourceType>(null)
 
   const extractor = typeof type === 'function'
     ? type
diff --git a/packages/core/useMouseInElement/component.ts b/packages/core/useMouseInElement/component.ts
index 0d942845108..85890fd319f 100644
--- a/packages/core/useMouseInElement/component.ts
+++ b/packages/core/useMouseInElement/component.ts
@@ -1,13 +1,13 @@
 import type { MouseInElementOptions } from '@vueuse/core'
 import type { RenderableComponent } from '../types'
 import { useMouseInElement } from '@vueuse/core'
-import { defineComponent, h, reactive, ref } from 'vue'
+import { ref as deepRef, defineComponent, h, reactive } from 'vue'
 
 export const UseMouseInElement = /* #__PURE__ */ defineComponent<MouseInElementOptions & RenderableComponent>({
   name: 'UseMouseElement',
   props: ['handleOutside', 'as'] as unknown as undefined,
   setup(props, { slots }) {
-    const target = ref()
+    const target = deepRef()
     const data = reactive(useMouseInElement(target, props))
 
     return () => {
diff --git a/packages/core/useMouseInElement/demo.vue b/packages/core/useMouseInElement/demo.vue
index 722bf0fd256..eec4c88ef27 100644
--- a/packages/core/useMouseInElement/demo.vue
+++ b/packages/core/useMouseInElement/demo.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { useMouseInElement } from '@vueuse/core'
 import { stringify } from '@vueuse/docs-utils'
-import { reactive, ref } from 'vue'
+import { ref as deepRef, reactive } from 'vue'
 import Area from './Area.vue'
 
-const target = ref(null)
+const target = deepRef(null)
 const mouse = reactive(useMouseInElement(target))
 const text = stringify(mouse)
 </script>
diff --git a/packages/core/useMouseInElement/index.ts b/packages/core/useMouseInElement/index.ts
index 7e056062e4f..94d9f104ca9 100644
--- a/packages/core/useMouseInElement/index.ts
+++ b/packages/core/useMouseInElement/index.ts
@@ -1,6 +1,6 @@
 import type { MaybeElementRef } from '../unrefElement'
 import type { UseMouseOptions } from '../useMouse'
-import { ref, watch } from 'vue'
+import { ref as deepRef, shallowRef, watch } from 'vue'
 import { defaultWindow } from '../_configurable'
 import { unrefElement } from '../unrefElement'
 import { useEventListener } from '../useEventListener'
@@ -29,14 +29,14 @@ export function useMouseInElement(
 
   const { x, y, sourceType } = useMouse(options)
 
-  const targetRef = ref(target ?? window?.document.body)
-  const elementX = ref(0)
-  const elementY = ref(0)
-  const elementPositionX = ref(0)
-  const elementPositionY = ref(0)
-  const elementHeight = ref(0)
-  const elementWidth = ref(0)
-  const isOutside = ref(true)
+  const targetRef = deepRef(target ?? window?.document.body)
+  const elementX = shallowRef(0)
+  const elementY = shallowRef(0)
+  const elementPositionX = shallowRef(0)
+  const elementPositionY = shallowRef(0)
+  const elementHeight = shallowRef(0)
+  const elementWidth = shallowRef(0)
+  const isOutside = shallowRef(true)
 
   let stop = () => {}
 
diff --git a/packages/core/useMousePressed/component.ts b/packages/core/useMousePressed/component.ts
index ff145340dfe..8cb58ae5189 100644
--- a/packages/core/useMousePressed/component.ts
+++ b/packages/core/useMousePressed/component.ts
@@ -1,13 +1,13 @@
 import type { MousePressedOptions } from '@vueuse/core'
 import type { RenderableComponent } from '../types'
 import { useMousePressed } from '@vueuse/core'
-import { defineComponent, h, reactive, ref } from 'vue'
+import { ref as deepRef, defineComponent, h, reactive } from 'vue'
 
 export const UseMousePressed = /* #__PURE__ */ defineComponent<Omit<MousePressedOptions, 'target'> & RenderableComponent>({
   name: 'UseMousePressed',
   props: ['touch', 'initialValue', 'as'] as unknown as undefined,
   setup(props, { slots }) {
-    const target = ref()
+    const target = deepRef()
     const data = reactive(useMousePressed({ ...props, target }))
 
     return () => {
diff --git a/packages/core/useMousePressed/index.ts b/packages/core/useMousePressed/index.ts
index 2a6ca1cbd2a..05eec3f7518 100644
--- a/packages/core/useMousePressed/index.ts
+++ b/packages/core/useMousePressed/index.ts
@@ -1,7 +1,7 @@
 import type { ConfigurableWindow } from '../_configurable'
 import type { MaybeComputedElementRef } from '../unrefElement'
 import type { UseMouseSourceType } from '../useMouse'
-import { computed, ref } from 'vue'
+import { computed, ref as deepRef } from 'vue'
 import { defaultWindow } from '../_configurable'
 import { unrefElement } from '../unrefElement'
 import { useEventListener } from '../useEventListener'
@@ -71,8 +71,8 @@ export function useMousePressed(options: MousePressedOptions = {}) {
     window = defaultWindow,
   } = options
 
-  const pressed = ref(initialValue)
-  const sourceType = ref<UseMouseSourceType>(null)
+  const pressed = deepRef(initialValue)
+  const sourceType = deepRef<UseMouseSourceType>(null)
 
   if (!window) {
     return {
diff --git a/packages/core/useMutationObserver/demo.vue b/packages/core/useMutationObserver/demo.vue
index 8d28b2ff453..0cef2be3310 100644
--- a/packages/core/useMutationObserver/demo.vue
+++ b/packages/core/useMutationObserver/demo.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { useMutationObserver } from '@vueuse/core'
-import { ref } from 'vue'
+import { ref as deepRef } from 'vue'
 
-const el = ref(null)
-const messages = ref<string[]>([])
-const className = ref({})
-const style = ref({})
+const el = deepRef(null)
+const messages = deepRef<string[]>([])
+const className = deepRef({})
+const style = deepRef({})
 
 useMutationObserver(
   el,
diff --git a/packages/core/useMutationObserver/index.test.ts b/packages/core/useMutationObserver/index.test.ts
index 61568076f09..e942ee0548c 100644
--- a/packages/core/useMutationObserver/index.test.ts
+++ b/packages/core/useMutationObserver/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from 'vitest'
-import { computed, nextTick, ref } from 'vue'
+import { computed, ref as deepRef, nextTick } from 'vue'
 import { useMutationObserver } from './index'
 
 describe('useMutationObserver', () => {
@@ -188,10 +188,10 @@ describe('useMutationObserver', () => {
   })
 
   it('should work with multiple targets', async () => {
-    const headerElement = ref<HTMLDivElement | null>(
+    const headerElement = deepRef<HTMLDivElement | null>(
       document.createElement('div'),
     )
-    const footerElement = ref<HTMLDivElement | null>(
+    const footerElement = deepRef<HTMLDivElement | null>(
       document.createElement('div'),
     )
     const targets = computed(() => [headerElement.value, footerElement.value])
diff --git a/packages/core/useNavigatorLanguage/index.ts b/packages/core/useNavigatorLanguage/index.ts
index 8d334e9151f..582b57243f2 100644
--- a/packages/core/useNavigatorLanguage/index.ts
+++ b/packages/core/useNavigatorLanguage/index.ts
@@ -1,7 +1,7 @@
 import type { ComputedRef, Ref } from 'vue'
 import type { ConfigurableWindow } from '../_configurable'
+import { ref as deepRef } from 'vue'
 
-import { ref } from 'vue'
 import { defaultWindow } from '../_configurable'
 
 import { useEventListener } from '../useEventListener'
@@ -43,7 +43,7 @@ export function useNavigatorLanguage(options: ConfigurableWindow = {}): Readonly
 
   const isSupported = useSupported(() => navigator && 'language' in navigator)
 
-  const language = ref<string | undefined>(navigator?.language)
+  const language = deepRef<string | undefined>(navigator?.language)
 
   // Listen to when to user changes language:
   useEventListener(window, 'languagechange', () => {
diff --git a/packages/core/useNetwork/index.ts b/packages/core/useNetwork/index.ts
index a03c0005ce7..81aa4c0d9d7 100644
--- a/packages/core/useNetwork/index.ts
+++ b/packages/core/useNetwork/index.ts
@@ -2,7 +2,7 @@
 
 import type { ComputedRef, Ref } from 'vue'
 import type { ConfigurableWindow } from '../_configurable'
-import { readonly, ref } from 'vue'
+import { ref as deepRef, readonly, shallowRef } from 'vue'
 import { defaultWindow } from '../_configurable'
 import { useEventListener } from '../useEventListener'
 import { useSupported } from '../useSupported'
@@ -62,15 +62,15 @@ export function useNetwork(options: ConfigurableWindow = {}): Readonly<NetworkSt
   const navigator = window?.navigator
   const isSupported = useSupported(() => navigator && 'connection' in navigator)
 
-  const isOnline = ref(true)
-  const saveData = ref(false)
-  const offlineAt: Ref<number | undefined> = ref(undefined)
-  const onlineAt: Ref<number | undefined> = ref(undefined)
-  const downlink: Ref<number | undefined> = ref(undefined)
-  const downlinkMax: Ref<number | undefined> = ref(undefined)
-  const rtt: Ref<number | undefined> = ref(undefined)
-  const effectiveType: Ref<NetworkEffectiveType> = ref(undefined)
-  const type: Ref<NetworkType> = ref<NetworkType>('unknown')
+  const isOnline = shallowRef(true)
+  const saveData = shallowRef(false)
+  const offlineAt: Ref<number | undefined> = deepRef(undefined)
+  const onlineAt: Ref<number | undefined> = deepRef(undefined)
+  const downlink: Ref<number | undefined> = deepRef(undefined)
+  const downlinkMax: Ref<number | undefined> = deepRef(undefined)
+  const rtt: Ref<number | undefined> = deepRef(undefined)
+  const effectiveType: Ref<NetworkEffectiveType> = deepRef(undefined)
+  const type: Ref<NetworkType> = deepRef<NetworkType>('unknown')
 
   const connection = isSupported.value && (navigator as any).connection
 
diff --git a/packages/core/useNow/index.ts b/packages/core/useNow/index.ts
index 9ad81ea4b23..23fd03bee03 100644
--- a/packages/core/useNow/index.ts
+++ b/packages/core/useNow/index.ts
@@ -1,7 +1,7 @@
 import type { Pausable } from '@vueuse/shared'
 import type { Ref } from 'vue'
 import { useIntervalFn } from '@vueuse/shared'
-import { ref } from 'vue'
+import { ref as deepRef } from 'vue'
 import { useRafFn } from '../useRafFn'
 
 export interface UseNowOptions<Controls extends boolean> {
@@ -34,7 +34,7 @@ export function useNow(options: UseNowOptions<boolean> = {}) {
     interval = 'requestAnimationFrame',
   } = options
 
-  const now = ref(new Date())
+  const now = deepRef(new Date())
 
   const update = () => now.value = new Date()
 
diff --git a/packages/core/useObjectUrl/index.ts b/packages/core/useObjectUrl/index.ts
index 8f11d60931a..e0e085729da 100644
--- a/packages/core/useObjectUrl/index.ts
+++ b/packages/core/useObjectUrl/index.ts
@@ -1,6 +1,6 @@
 import type { MaybeRefOrGetter } from '@vueuse/shared'
 import { tryOnScopeDispose } from '@vueuse/shared'
-import { readonly, ref, toValue, watch } from 'vue'
+import { ref as deepRef, readonly, toValue, watch } from 'vue'
 
 /**
  * Reactive URL representing an object.
@@ -9,7 +9,7 @@ import { readonly, ref, toValue, watch } from 'vue'
  * @param object
  */
 export function useObjectUrl(object: MaybeRefOrGetter<Blob | MediaSource | null | undefined>) {
-  const url = ref<string | undefined>()
+  const url = deepRef<string | undefined>()
 
   const release = () => {
     if (url.value)
diff --git a/packages/core/useOffsetPagination/demo.vue b/packages/core/useOffsetPagination/demo.vue
index 66fac7eda20..ac7194e88df 100644
--- a/packages/core/useOffsetPagination/demo.vue
+++ b/packages/core/useOffsetPagination/demo.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
 import { useOffsetPagination } from '@vueuse/core'
-import { ref } from 'vue'
+import { ref as deepRef, shallowRef } from 'vue'
 
 interface User {
   id: number
   name: string
 }
-const database = ref([]) as Ref<User[]>
+const database = deepRef([]) as Ref<User[]>
 
 for (let i = 0; i < 80; i++)
   database.value.push({ id: i, name: `user ${i}` })
@@ -22,10 +22,10 @@ function fetch(page: number, pageSize: number) {
   })
 }
 
-const data: Ref<User[]> = ref([])
+const data: Ref<User[]> = deepRef([])
 
-const page = ref(1)
-const pageSize = ref(10)
+const page = shallowRef(1)
+const pageSize = shallowRef(10)
 
 fetchData({
   currentPage: page.value,
diff --git a/packages/core/useOffsetPagination/index.test.ts b/packages/core/useOffsetPagination/index.test.ts
index e281464c350..c4c064df709 100644
--- a/packages/core/useOffsetPagination/index.test.ts
+++ b/packages/core/useOffsetPagination/index.test.ts
@@ -1,6 +1,6 @@
 import type { UseOffsetPaginationOptions, UseOffsetPaginationReturn } from './index'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { isRef, nextTick, ref } from 'vue'
+import { isRef, nextTick, shallowRef } from 'vue'
 import { useOffsetPagination } from './index'
 
 describe('useOffsetPagination', () => {
@@ -110,7 +110,7 @@ describe('useOffsetPagination', () => {
 
   describe('when the page is outside of the range of possible pages', () => {
     let currentPage: UseOffsetPaginationReturn['currentPage']
-    const page: UseOffsetPaginationOptions['page'] = ref(0)
+    const page: UseOffsetPaginationOptions['page'] = shallowRef(0)
 
     beforeEach(() => {
       ({
@@ -139,7 +139,7 @@ describe('useOffsetPagination', () => {
 
   describe('when the page is a ref', () => {
     let currentPage: UseOffsetPaginationReturn['currentPage']
-    const pageRef = ref(0)
+    const pageRef = shallowRef(0)
 
     beforeEach(() => {
       pageRef.value = 2;
@@ -206,7 +206,7 @@ describe('useOffsetPagination', () => {
 
     describe('when pageSize is given as a ref', () => {
       let currentPageSize: UseOffsetPaginationReturn['currentPageSize']
-      const pageSize = ref(11)
+      const pageSize = shallowRef(11)
 
       beforeEach(() => {
         ({
@@ -308,7 +308,7 @@ describe('useOffsetPagination', () => {
   describe('onPageChange', () => {
     it('is called when the page changes', async () => {
       const onPageChange = vi.fn()
-      const page = ref(1)
+      const page = shallowRef(1)
 
       useOffsetPagination({
         total: 50,
@@ -333,7 +333,7 @@ describe('useOffsetPagination', () => {
 
     it('is called with the correct UseOffsetPaginationReturn values', async () => {
       const onPageChange = vi.fn()
-      const page = ref(1)
+      const page = shallowRef(1)
 
       useOffsetPagination({
         total: 35,
@@ -394,7 +394,7 @@ describe('useOffsetPagination', () => {
   describe('onPageSizeChange', () => {
     it('is called when the page size changes', async () => {
       const onPageSizeChange = vi.fn()
-      const pageSize = ref(5)
+      const pageSize = shallowRef(5)
 
       useOffsetPagination({
         total: 50,
@@ -412,7 +412,7 @@ describe('useOffsetPagination', () => {
     })
 
     it('is called with the correct UseOffsetPaginationReturn values', async () => {
-      const pageSize = ref(5)
+      const pageSize = shallowRef(5)
       const onPageSizeChange = vi.fn()
 
       useOffsetPagination({
@@ -450,7 +450,7 @@ describe('useOffsetPagination', () => {
   describe('onPageCountChange', () => {
     it('is called when the page count changes', async () => {
       const onPageCountChange = vi.fn()
-      const pageSize = ref(5)
+      const pageSize = shallowRef(5)
 
       useOffsetPagination({
         total: 50,
@@ -468,7 +468,7 @@ describe('useOffsetPagination', () => {
     })
 
     it('is called with the correct UseOffsetPaginationReturn values', async () => {
-      const pageSize = ref(5)
+      const pageSize = shallowRef(5)
       const onPageCountChange = vi.fn()
 
       useOffsetPagination({
diff --git a/packages/core/usePageLeave/index.ts b/packages/core/usePageLeave/index.ts
index 24049e8b98d..a939f51606a 100644
--- a/packages/core/usePageLeave/index.ts
+++ b/packages/core/usePageLeave/index.ts
@@ -1,5 +1,5 @@
 import type { ConfigurableWindow } from '../_configurable'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 import { defaultWindow } from '../_configurable'
 import { useEventListener } from '../useEventListener'
 
@@ -11,7 +11,7 @@ import { useEventListener } from '../useEventListener'
  */
 export function usePageLeave(options: ConfigurableWindow = {}) {
   const { window = defaultWindow } = options
-  const isLeft = ref(false)
+  const isLeft = shallowRef(false)
 
   const handler = (event: MouseEvent) => {
     if (!window)
diff --git a/packages/core/useParallax/demo.vue b/packages/core/useParallax/demo.vue
index 3e6190c06f2..4edca03a4c9 100644
--- a/packages/core/useParallax/demo.vue
+++ b/packages/core/useParallax/demo.vue
@@ -2,9 +2,9 @@
 import type { CSSProperties } from 'vue'
 import { useMediaQuery, useParallax } from '@vueuse/core'
 import YAML from 'js-yaml'
-import { computed, reactive, ref } from 'vue'
+import { computed, ref as deepRef, reactive } from 'vue'
 
-const target = ref(null)
+const target = deepRef(null)
 const isMobile = useMediaQuery('(max-width: 700px)')
 
 const parallax = reactive(useParallax(target))
diff --git a/packages/core/useParentElement/index.test.ts b/packages/core/useParentElement/index.test.ts
index 5bf2bf73110..2c5e7995027 100644
--- a/packages/core/useParentElement/index.test.ts
+++ b/packages/core/useParentElement/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { defineComponent, h, nextTick, ref } from 'vue'
+import { ref as deepRef, defineComponent, h, nextTick } from 'vue'
 import { mount } from '../../.test'
 import { useParentElement } from './index'
 
@@ -30,7 +30,7 @@ describe('useParentElement', () => {
   })
 
   it('should accept ref', async () => {
-    const liEl = ref()
+    const liEl = deepRef()
     const parentElement = useParentElement(liEl)
 
     mount(defineComponent({
diff --git a/packages/core/usePerformanceObserver/demo.vue b/packages/core/usePerformanceObserver/demo.vue
index b344eec0d5e..b6ad9a73563 100644
--- a/packages/core/usePerformanceObserver/demo.vue
+++ b/packages/core/usePerformanceObserver/demo.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { usePerformanceObserver } from '@vueuse/core'
-import { ref } from 'vue'
+import { ref as deepRef } from 'vue'
 
-const entrys = ref<PerformanceEntry[]>([])
+const entrys = deepRef<PerformanceEntry[]>([])
 usePerformanceObserver({
   entryTypes: ['paint'],
 }, (list) => {
diff --git a/packages/core/usePointer/component.ts b/packages/core/usePointer/component.ts
index da91df5eb43..c1ba032db70 100644
--- a/packages/core/usePointer/component.ts
+++ b/packages/core/usePointer/component.ts
@@ -1,6 +1,6 @@
 import type { UsePointerOptions } from '@vueuse/core'
 import { usePointer } from '@vueuse/core'
-import { defineComponent, reactive, ref } from 'vue'
+import { defineComponent, reactive, shallowRef } from 'vue'
 import { defaultWindow } from '../_configurable'
 
 export const UsePointer = /* #__PURE__ */ defineComponent<Omit<UsePointerOptions, 'target'> & { target: 'window' | 'self' }>({
@@ -11,7 +11,7 @@ export const UsePointer = /* #__PURE__ */ defineComponent<Omit<UsePointerOptions
     'target',
   ] as unknown as undefined,
   setup(props, { slots }) {
-    const el = ref<HTMLElement | null>(null)
+    const el = shallowRef<HTMLElement | null>(null)
 
     const data = reactive(usePointer({
       ...props,
diff --git a/packages/core/usePointer/index.ts b/packages/core/usePointer/index.ts
index c13a3c2f8c7..81c99794a3f 100644
--- a/packages/core/usePointer/index.ts
+++ b/packages/core/usePointer/index.ts
@@ -3,7 +3,7 @@ import type { Ref } from 'vue'
 import type { ConfigurableWindow } from '../_configurable'
 import type { PointerType, Position } from '../types'
 import { objectPick, toRefs } from '@vueuse/shared'
-import { ref } from 'vue'
+import { ref as deepRef, shallowRef } from 'vue'
 import { defaultWindow } from '../_configurable'
 import { useEventListener } from '../useEventListener'
 
@@ -62,8 +62,8 @@ export function usePointer(options: UsePointerOptions = {}) {
     target = defaultWindow,
   } = options
 
-  const isInside = ref(false)
-  const state = ref(options.initialValue || {}) as unknown as Ref<UsePointerState>
+  const isInside = shallowRef(false)
+  const state = deepRef(options.initialValue || {}) as unknown as Ref<UsePointerState>
   Object.assign(state.value, defaultState, state.value)
 
   const handler = (event: PointerEvent) => {
diff --git a/packages/core/usePointerLock/component.ts b/packages/core/usePointerLock/component.ts
index c1a0d2781ec..4e2e65660bd 100644
--- a/packages/core/usePointerLock/component.ts
+++ b/packages/core/usePointerLock/component.ts
@@ -1,12 +1,12 @@
 import type { RenderableComponent } from '../types'
 import { usePointerLock } from '@vueuse/core'
-import { defineComponent, h, reactive, ref } from 'vue'
+import { ref as deepRef, defineComponent, h, reactive } from 'vue'
 
 export const UsePointerLock = defineComponent<RenderableComponent>({
   name: 'UsePointerLock',
   props: ['as'] as unknown as undefined,
   setup(props, { slots }) {
-    const target = ref()
+    const target = deepRef()
     const data = reactive(usePointerLock(target))
 
     return () => {
diff --git a/packages/core/usePointerLock/demo.vue b/packages/core/usePointerLock/demo.vue
index 102df87a32f..f529226b29e 100644
--- a/packages/core/usePointerLock/demo.vue
+++ b/packages/core/usePointerLock/demo.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { useMouse, usePointerLock } from '@vueuse/core'
-import { ref, watch } from 'vue'
+import { ref as deepRef, shallowRef, watch } from 'vue'
 
 const { lock, unlock, element } = usePointerLock()
 const { x, y } = useMouse({ type: 'movement' })
-const rotY = ref(-45)
-const rotX = ref(0)
+const rotY = deepRef(-45)
+const rotX = shallowRef(0)
 
 watch([x, y], ([x, y]) => {
   if (!element.value)
diff --git a/packages/core/usePointerLock/index.ts b/packages/core/usePointerLock/index.ts
index 58b0a7e2ee6..d4a10a079ef 100644
--- a/packages/core/usePointerLock/index.ts
+++ b/packages/core/usePointerLock/index.ts
@@ -1,7 +1,7 @@
 import type { ConfigurableDocument } from '../_configurable'
 import type { MaybeElement, MaybeElementRef } from '../unrefElement'
 import { until } from '@vueuse/shared'
-import { ref } from 'vue'
+import { ref as deepRef } from 'vue'
 import { defaultDocument } from '../_configurable'
 import { unrefElement } from '../unrefElement'
 import { useEventListener } from '../useEventListener'
@@ -29,9 +29,9 @@ export function usePointerLock(target?: MaybeElementRef, options: UsePointerLock
 
   const isSupported = useSupported(() => document && 'pointerLockElement' in document)
 
-  const element = ref<MaybeElement>()
+  const element = deepRef<MaybeElement>()
 
-  const triggerElement = ref<MaybeElement>()
+  const triggerElement = deepRef<MaybeElement>()
 
   let targetElement: MaybeElement
 
diff --git a/packages/core/usePointerSwipe/demo.vue b/packages/core/usePointerSwipe/demo.vue
index 1164a986a45..23e3329776e 100644
--- a/packages/core/usePointerSwipe/demo.vue
+++ b/packages/core/usePointerSwipe/demo.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import type { UseSwipeDirection } from '@vueuse/core'
 import { usePointerSwipe } from '@vueuse/core'
-import { computed, ref } from 'vue'
+import { computed, shallowRef } from 'vue'
 
-const target = ref<HTMLElement | null>(null)
-const container = ref<HTMLElement | null>(null)
+const target = shallowRef<HTMLElement | null>(null)
+const container = shallowRef<HTMLElement | null>(null)
 
 const containerWidth = computed(() => container.value?.offsetWidth)
 
-const left = ref('0')
-const opacity = ref(1)
+const left = shallowRef('0')
+const opacity = shallowRef(1)
 
 function reset() {
   left.value = '0'
diff --git a/packages/core/usePointerSwipe/index.ts b/packages/core/usePointerSwipe/index.ts
index b9adf94f1ad..8c220a01e9f 100644
--- a/packages/core/usePointerSwipe/index.ts
+++ b/packages/core/usePointerSwipe/index.ts
@@ -3,7 +3,7 @@ import type { Ref } from 'vue'
 import type { PointerType, Position } from '../types'
 import type { UseSwipeDirection } from '../useSwipe'
 import { toRef, tryOnMounted } from '@vueuse/shared'
-import { computed, reactive, readonly, ref } from 'vue'
+import { computed, reactive, readonly, shallowRef } from 'vue'
 import { useEventListener } from '../useEventListener'
 
 export interface UsePointerSwipeOptions {
@@ -90,8 +90,8 @@ export function usePointerSwipe(
 
   const { max, abs } = Math
   const isThresholdExceeded = computed(() => max(abs(distanceX.value), abs(distanceY.value)) >= threshold)
-  const isSwiping = ref(false)
-  const isPointerDown = ref(false)
+  const isSwiping = shallowRef(false)
+  const isPointerDown = shallowRef(false)
 
   const direction = computed(() => {
     if (!isThresholdExceeded.value)
diff --git a/packages/core/usePreferredLanguages/index.ts b/packages/core/usePreferredLanguages/index.ts
index 331bc38428d..7b57622539e 100644
--- a/packages/core/usePreferredLanguages/index.ts
+++ b/packages/core/usePreferredLanguages/index.ts
@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 import type { ConfigurableWindow } from '../_configurable'
-import { ref } from 'vue'
+import { ref as deepRef } from 'vue'
 import { defaultWindow } from '../_configurable'
 import { useEventListener } from '../useEventListener'
 
@@ -13,10 +13,10 @@ import { useEventListener } from '../useEventListener'
 export function usePreferredLanguages(options: ConfigurableWindow = {}): Ref<readonly string[]> {
   const { window = defaultWindow } = options
   if (!window)
-    return ref(['en'])
+    return deepRef(['en'])
 
   const navigator = window.navigator
-  const value = ref<readonly string[]>(navigator.languages)
+  const value = deepRef<readonly string[]>(navigator.languages)
 
   useEventListener(window, 'languagechange', () => {
     value.value = navigator.languages
diff --git a/packages/core/usePrevious/index.test.ts b/packages/core/usePrevious/index.test.ts
index 48c4283feee..ecf6005c399 100644
--- a/packages/core/usePrevious/index.test.ts
+++ b/packages/core/usePrevious/index.test.ts
@@ -1,10 +1,10 @@
 import { describe, expect, it } from 'vitest'
-import { ref } from 'vue'
+import { ref as deepRef, shallowRef } from 'vue'
 import { usePrevious } from './index'
 
 describe('usePrevious', () => {
   it('works for literals', () => {
-    const target = ref(1)
+    const target = shallowRef(1)
     const previous = usePrevious(target)
 
     expect(previous.value).toBe(undefined)
@@ -19,7 +19,7 @@ describe('usePrevious', () => {
   })
 
   it('works with initial value', () => {
-    const target = ref('Hello')
+    const target = shallowRef('Hello')
     const previous = usePrevious(() => target.value, 'initial')
 
     expect(previous.value).toBe('initial')
@@ -30,7 +30,7 @@ describe('usePrevious', () => {
   })
 
   it('works with object', () => {
-    const target = ref<any>({ a: 1 })
+    const target = deepRef<any>({ a: 1 })
     const previous = usePrevious(target)
 
     expect(previous.value).toEqual(undefined)
diff --git a/packages/core/useRafFn/demo.vue b/packages/core/useRafFn/demo.vue
index 759cc5e87d0..597e92336bd 100644
--- a/packages/core/useRafFn/demo.vue
+++ b/packages/core/useRafFn/demo.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 import { useRafFn } from './index'
 
 const fpsLimit = 60
-const count = ref(0)
-const deltaMs = ref(0)
+const count = shallowRef(0)
+const deltaMs = shallowRef(0)
 const { pause, resume } = useRafFn(({ delta }) => {
   deltaMs.value = delta
   count.value += 1
diff --git a/packages/core/useRafFn/index.test.ts b/packages/core/useRafFn/index.test.ts
index b01490336bd..fb364561198 100644
--- a/packages/core/useRafFn/index.test.ts
+++ b/packages/core/useRafFn/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from 'vitest'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 import { useRafFn } from './index'
 
 describe('useRafFn', () => {
@@ -72,7 +72,7 @@ describe('useRafFn', () => {
 
   it('should handle a framerate change', { retry: 3 }, async () => {
     const initialFramerate = 60
-    const fr = ref(initialFramerate)
+    const fr = shallowRef(initialFramerate)
     const fn1 = vi.fn()
     const fn2 = vi.fn()
     useRafFn(fn1, { fpsLimit: fr })
@@ -91,4 +91,18 @@ describe('useRafFn', () => {
     })
     expect(fn1.mock.calls.length).toBeLessThan(fn2.mock.calls.length)
   })
+
+  it('should only be called once when the once option is set to true', async () => {
+    const fn = vi.fn()
+    const fn1 = vi.fn()
+    useRafFn(fn, { once: true })
+    useRafFn(fn1)
+    await vi.waitFor(() => {
+      expect(fn).toHaveBeenCalled()
+      expect(fn1).toHaveBeenCalled()
+    })
+
+    expect(fn.mock.calls.length).toBe(1)
+    expect(fn1.mock.calls.length).toBeGreaterThan(1)
+  })
 })
diff --git a/packages/core/useRafFn/index.ts b/packages/core/useRafFn/index.ts
index 05429486746..d697daa55ab 100644
--- a/packages/core/useRafFn/index.ts
+++ b/packages/core/useRafFn/index.ts
@@ -2,7 +2,7 @@ import type { Pausable } from '@vueuse/shared'
 import type { MaybeRefOrGetter } from 'vue'
 import type { ConfigurableWindow } from '../_configurable'
 import { tryOnScopeDispose } from '@vueuse/shared'
-import { computed, readonly, ref, toValue } from 'vue'
+import { computed, readonly, shallowRef, toValue } from 'vue'
 import { defaultWindow } from '../_configurable'
 
 export interface UseRafFnCallbackArguments {
@@ -31,6 +31,12 @@ export interface UseRafFnOptions extends ConfigurableWindow {
    * @default undefined
    */
   fpsLimit?: MaybeRefOrGetter<number>
+  /**
+   * After the requestAnimationFrame loop executed once, it will be automatically stopped.
+   *
+   * @default false
+   */
+  once?: boolean
 }
 
 /**
@@ -45,9 +51,10 @@ export function useRafFn(fn: (args: UseRafFnCallbackArguments) => void, options:
     immediate = true,
     fpsLimit = undefined,
     window = defaultWindow,
+    once = false,
   } = options
 
-  const isActive = ref(false)
+  const isActive = shallowRef(false)
   const intervalLimit = computed(() => {
     return fpsLimit ? 1000 / toValue(fpsLimit) : null
   })
@@ -70,6 +77,11 @@ export function useRafFn(fn: (args: UseRafFnCallbackArguments) => void, options:
 
     previousFrameTimestamp = timestamp
     fn({ delta, timestamp })
+    if (once) {
+      isActive.value = false
+      rafId = null
+      return
+    }
     rafId = window.requestAnimationFrame(loop)
   }
 
diff --git a/packages/core/useRefHistory/index.test.ts b/packages/core/useRefHistory/index.test.ts
index 2b98a962887..9cc2328b07c 100644
--- a/packages/core/useRefHistory/index.test.ts
+++ b/packages/core/useRefHistory/index.test.ts
@@ -1,10 +1,10 @@
 import { describe, expect, it } from 'vitest'
-import { nextTick, ref } from 'vue'
+import { ref as deepRef, nextTick, shallowRef } from 'vue'
 import { useRefHistory } from './index'
 
 describe('useRefHistory - sync', () => {
   it('sync: should record', () => {
-    const v = ref(0)
+    const v = shallowRef(0)
     const { history } = useRefHistory(v, { flush: 'sync' })
 
     expect(history.value.length).toBe(1)
@@ -18,7 +18,7 @@ describe('useRefHistory - sync', () => {
   })
 
   it('sync: should be able to undo and redo', () => {
-    const v = ref(0)
+    const v = shallowRef(0)
     const { undo, redo, clear, canUndo, canRedo, history, last } = useRefHistory(v, { flush: 'sync' })
 
     expect(canUndo.value).toBe(false)
@@ -64,7 +64,7 @@ describe('useRefHistory - sync', () => {
   })
 
   it('sync: object with deep', () => {
-    const v = ref({ foo: 'bar' })
+    const v = deepRef({ foo: 'bar' })
     const { history, undo } = useRefHistory(v, { flush: 'sync', deep: true })
 
     expect(history.value.length).toBe(1)
@@ -86,7 +86,7 @@ describe('useRefHistory - sync', () => {
   })
 
   it('sync: shallow watch with clone', () => {
-    const v = ref({ foo: 'bar' })
+    const v = deepRef({ foo: 'bar' })
     const { history, undo } = useRefHistory(v, { flush: 'sync', clone: true })
 
     expect(history.value.length).toBe(1)
@@ -113,7 +113,7 @@ describe('useRefHistory - sync', () => {
   })
 
   it('sync: dump + parse', () => {
-    const v = ref({ a: 'bar' })
+    const v = deepRef({ a: 'bar' })
     const { history, undo } = useRefHistory(v, {
       flush: 'sync',
       deep: true,
@@ -136,7 +136,7 @@ describe('useRefHistory - sync', () => {
   })
 
   it('sync: commit', () => {
-    const v = ref(0)
+    const v = shallowRef(0)
     const { commit, history } = useRefHistory(v, { flush: 'sync' })
 
     expect(history.value.length).toBe(1)
@@ -150,7 +150,7 @@ describe('useRefHistory - sync', () => {
   })
 
   it('sync: without batch', () => {
-    const v = ref({ foo: 1, bar: 'one' })
+    const v = deepRef({ foo: 1, bar: 'one' })
     const { history } = useRefHistory(v, { flush: 'sync', deep: true })
 
     expect(history.value.length).toBe(1)
@@ -166,7 +166,7 @@ describe('useRefHistory - sync', () => {
   })
 
   it('sync: with batch', () => {
-    const v = ref({ foo: 1, bar: 'one' })
+    const v = deepRef({ foo: 1, bar: 'one' })
     const { history, batch } = useRefHistory(v, { flush: 'sync', deep: true })
 
     expect(history.value.length).toBe(1)
@@ -193,7 +193,7 @@ describe('useRefHistory - sync', () => {
   })
 
   it('sync: pause and resume', () => {
-    const v = ref(1)
+    const v = shallowRef(1)
     const { history, pause, resume, last } = useRefHistory(v, { flush: 'sync' })
 
     expect(history.value.length).toBe(1)
@@ -229,7 +229,7 @@ describe('useRefHistory - sync', () => {
   })
 
   it('sync: reset', () => {
-    const v = ref(0)
+    const v = shallowRef(0)
     const { history, commit, undoStack, redoStack, pause, reset, undo } = useRefHistory(v, { flush: 'sync' })
 
     expect(history.value.length).toBe(1)
@@ -284,7 +284,7 @@ describe('useRefHistory - sync', () => {
   })
 
   it('sync: dispose', () => {
-    const v = ref(0)
+    const v = shallowRef(0)
     const { history, dispose, last } = useRefHistory(v, { flush: 'sync' })
 
     v.value = 1
@@ -302,7 +302,7 @@ describe('useRefHistory - sync', () => {
 
 describe('useRefHistory - pre', () => {
   it('pre: should record', async () => {
-    const v = ref(0)
+    const v = shallowRef(0)
     const { history } = useRefHistory(v)
 
     expect(history.value.length).toBe(1)
@@ -317,7 +317,7 @@ describe('useRefHistory - pre', () => {
   })
 
   it('pre: should be able to undo and redo', async () => {
-    const v = ref(0)
+    const v = shallowRef(0)
     const { undo, redo, clear, canUndo, canRedo, history, last } = useRefHistory(v)
 
     expect(canUndo.value).toBe(false)
@@ -367,7 +367,7 @@ describe('useRefHistory - pre', () => {
   })
 
   it('pre: object with deep', async () => {
-    const v = ref({ foo: 'bar' })
+    const v = deepRef({ foo: 'bar' })
     const { history } = useRefHistory(v, { deep: true })
 
     expect(history.value.length).toBe(1)
@@ -385,7 +385,7 @@ describe('useRefHistory - pre', () => {
   })
 
   it('pre: dump + parse', async () => {
-    const v = ref({ a: 'bar' })
+    const v = deepRef({ a: 'bar' })
     const { history, undo } = useRefHistory(v, {
       deep: true,
       dump: v => JSON.stringify(v),
@@ -409,7 +409,7 @@ describe('useRefHistory - pre', () => {
   })
 
   it('pre: commit', async () => {
-    const v = ref(0)
+    const v = shallowRef(0)
     const { commit, history, undo } = useRefHistory(v)
 
     expect(history.value.length).toBe(1)
@@ -432,7 +432,7 @@ describe('useRefHistory - pre', () => {
   })
 
   it('pre: pause and resume', async () => {
-    const v = ref(1)
+    const v = shallowRef(1)
     const { history, pause, resume, last } = useRefHistory(v)
 
     expect(history.value.length).toBe(1)
@@ -473,7 +473,7 @@ describe('useRefHistory - pre', () => {
   })
 
   it('pre: reset', async () => {
-    const v = ref(0)
+    const v = shallowRef(0)
     const { history, commit, undoStack, redoStack, pause, reset, undo } = useRefHistory(v)
 
     expect(history.value.length).toBe(1)
@@ -533,7 +533,7 @@ describe('useRefHistory - pre', () => {
   })
 
   it('pre: auto batching', async () => {
-    const v = ref(0)
+    const v = shallowRef(0)
     const { history } = useRefHistory(v)
 
     expect(history.value.length).toBe(1)
@@ -559,7 +559,7 @@ describe('useRefHistory - pre', () => {
   })
 
   it('pre: dispose', async () => {
-    const v = ref(0)
+    const v = shallowRef(0)
     const { history, dispose, last } = useRefHistory(v)
 
     v.value = 1
diff --git a/packages/core/useResizeObserver/demo.vue b/packages/core/useResizeObserver/demo.vue
index a32ba719d5e..58fc5b68d11 100644
--- a/packages/core/useResizeObserver/demo.vue
+++ b/packages/core/useResizeObserver/demo.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { useResizeObserver } from '@vueuse/core'
-import { ref, useTemplateRef } from 'vue'
+import { shallowRef, useTemplateRef } from 'vue'
 
 const el = useTemplateRef('el')
-const text = ref('')
+const text = shallowRef('')
 
 useResizeObserver(el, (entries) => {
   const [entry] = entries
diff --git a/packages/core/useScreenOrientation/index.ts b/packages/core/useScreenOrientation/index.ts
index b499069b279..df115f8e421 100644
--- a/packages/core/useScreenOrientation/index.ts
+++ b/packages/core/useScreenOrientation/index.ts
@@ -1,5 +1,5 @@
 import type { ConfigurableWindow } from '../_configurable'
-import { ref } from 'vue'
+import { ref as deepRef } from 'vue'
 import { defaultWindow } from '../_configurable'
 import { useEventListener } from '../useEventListener'
 import { useSupported } from '../useSupported'
@@ -32,8 +32,8 @@ export function useScreenOrientation(options: ConfigurableWindow = {}) {
 
   const screenOrientation = (isSupported.value ? window!.screen.orientation : {}) as ScreenOrientation
 
-  const orientation = ref<OrientationType | undefined>(screenOrientation.type)
-  const angle = ref(screenOrientation.angle || 0)
+  const orientation = deepRef<OrientationType | undefined>(screenOrientation.type)
+  const angle = deepRef(screenOrientation.angle || 0)
 
   if (isSupported.value) {
     useEventListener(window, 'orientationchange', () => {
diff --git a/packages/core/useScreenSafeArea/index.ts b/packages/core/useScreenSafeArea/index.ts
index bfebcb488d8..6d9f156236f 100644
--- a/packages/core/useScreenSafeArea/index.ts
+++ b/packages/core/useScreenSafeArea/index.ts
@@ -1,5 +1,5 @@
 import { isClient, useDebounceFn } from '@vueuse/shared'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 import { useCssVar } from '../useCssVar'
 import { useEventListener } from '../useEventListener'
 
@@ -14,10 +14,10 @@ const leftVarName = '--vueuse-safe-area-left'
  * @see https://vueuse.org/useScreenSafeArea
  */
 export function useScreenSafeArea() {
-  const top = ref('')
-  const right = ref('')
-  const bottom = ref('')
-  const left = ref('')
+  const top = shallowRef('')
+  const right = shallowRef('')
+  const bottom = shallowRef('')
+  const left = shallowRef('')
 
   if (isClient) {
     const topCssVar = useCssVar(topVarName)
diff --git a/packages/core/useScriptTag/index.ts b/packages/core/useScriptTag/index.ts
index d9ca3b46c39..c8d381d13e3 100644
--- a/packages/core/useScriptTag/index.ts
+++ b/packages/core/useScriptTag/index.ts
@@ -1,7 +1,7 @@
 import type { MaybeRefOrGetter } from '@vueuse/shared'
 import type { ConfigurableDocument } from '../_configurable'
 import { noop, tryOnMounted, tryOnUnmounted } from '@vueuse/shared'
-import { ref, toValue } from 'vue'
+import { ref as deepRef, toValue } from 'vue'
 import { defaultDocument } from '../_configurable'
 import { useEventListener } from '../useEventListener'
 
@@ -72,7 +72,7 @@ export function useScriptTag(
     document = defaultDocument,
     attrs = {},
   } = options
-  const scriptTag = ref<HTMLScriptElement | null>(null)
+  const scriptTag = deepRef<HTMLScriptElement | null>(null)
 
   let _promise: Promise<HTMLScriptElement | boolean> | null = null
 
diff --git a/packages/core/useScroll/demo.vue b/packages/core/useScroll/demo.vue
index 305d0fbf601..b105578a6a1 100644
--- a/packages/core/useScroll/demo.vue
+++ b/packages/core/useScroll/demo.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { useScroll } from '@vueuse/core'
-import { computed, ref, toRefs, useTemplateRef } from 'vue'
+import { computed, shallowRef, toRefs, useTemplateRef } from 'vue'
 
 const el = useTemplateRef<HTMLElement>('el')
-const smooth = ref(false)
+const smooth = shallowRef(false)
 const behavior = computed(() => smooth.value ? 'smooth' : 'auto')
 const { x, y, isScrolling, arrivedState, directions } = useScroll(el, { behavior })
 const { left, right, top, bottom } = toRefs(arrivedState)
diff --git a/packages/core/useScroll/index.ts b/packages/core/useScroll/index.ts
index 828cdca993e..f4b1629bbac 100644
--- a/packages/core/useScroll/index.ts
+++ b/packages/core/useScroll/index.ts
@@ -1,7 +1,7 @@
 import type { MaybeRefOrGetter } from '@vueuse/shared'
 import type { ConfigurableWindow } from '../_configurable'
 import { noop, tryOnMounted, useDebounceFn, useThrottleFn } from '@vueuse/shared'
-import { computed, reactive, ref, toValue } from 'vue'
+import { computed, reactive, shallowRef, toValue } from 'vue'
 import { defaultWindow } from '../_configurable'
 import { unrefElement } from '../unrefElement'
 import { useEventListener } from '../useEventListener'
@@ -107,8 +107,8 @@ export function useScroll(
     onError = (e) => { console.error(e) },
   } = options
 
-  const internalX = ref(0)
-  const internalY = ref(0)
+  const internalX = shallowRef(0)
+  const internalY = shallowRef(0)
 
   // Use a computed for x and y because we want to write the value to the refs
   // during a `scrollTo()` without firing additional `scrollTo()`s in the process.
@@ -153,7 +153,7 @@ export function useScroll(
       internalY.value = scrollContainer.scrollTop
   }
 
-  const isScrolling = ref(false)
+  const isScrolling = shallowRef(false)
   const arrivedState = reactive({
     left: true,
     right: false,
diff --git a/packages/core/useScrollLock/directive.ts b/packages/core/useScrollLock/directive.ts
index 8761eda2f86..d083b67a4bc 100644
--- a/packages/core/useScrollLock/directive.ts
+++ b/packages/core/useScrollLock/directive.ts
@@ -1,5 +1,5 @@
 import type { FunctionDirective } from 'vue'
-import { ref, watch } from 'vue'
+import { shallowRef, watch } from 'vue'
 import { useScrollLock } from './index'
 
 function onScrollLock(): FunctionDirective<
@@ -7,7 +7,7 @@ function onScrollLock(): FunctionDirective<
   boolean
 > {
   let isMounted = false
-  const state = ref(false)
+  const state = shallowRef(false)
   return (el, binding) => {
     state.value = binding.value
     if (isMounted)
diff --git a/packages/core/useScrollLock/index.ts b/packages/core/useScrollLock/index.ts
index 3b4a018c649..bd3aa3d3082 100644
--- a/packages/core/useScrollLock/index.ts
+++ b/packages/core/useScrollLock/index.ts
@@ -1,6 +1,6 @@
 import type { Fn, MaybeRefOrGetter } from '@vueuse/shared'
 import { isIOS, toRef, tryOnScopeDispose } from '@vueuse/shared'
-import { computed, ref, toValue, watch } from 'vue'
+import { computed, ref as deepRef, toValue, watch } from 'vue'
 
 import { resolveElement } from '../_resolve-element'
 import { useEventListener } from '../useEventListener'
@@ -56,7 +56,7 @@ export function useScrollLock(
   element: MaybeRefOrGetter<HTMLElement | SVGElement | Window | Document | null | undefined>,
   initialState = false,
 ) {
-  const isLocked = ref(initialState)
+  const isLocked = deepRef(initialState)
   let stopTouchMoveListener: Fn | null = null
   let initialOverflow: CSSStyleDeclaration['overflow'] = ''
 
diff --git a/packages/core/useShare/demo.client.vue b/packages/core/useShare/demo.client.vue
index 4c87c9c820a..38932c76714 100644
--- a/packages/core/useShare/demo.client.vue
+++ b/packages/core/useShare/demo.client.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { useShare } from '@vueuse/core'
 import { isClient } from '@vueuse/shared'
-import { ref } from 'vue'
+import { ref as deepRef } from 'vue'
 
-const options = ref({
+const options = deepRef({
   title: 'VueUse',
   text: 'Collection of essential Vue Composition Utilities!',
   url: isClient ? location.href : '',
diff --git a/packages/core/useSorted/demo.vue b/packages/core/useSorted/demo.vue
index a15d2728cb2..5a08fd63d97 100644
--- a/packages/core/useSorted/demo.vue
+++ b/packages/core/useSorted/demo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { rand } from '@vueuse/shared'
-import { computed, ref } from 'vue'
+import { computed, shallowRef } from 'vue'
 import { useSorted } from './index'
 
 const objArr = [{
@@ -18,7 +18,7 @@ const objArr = [{
 }]
 const result2 = useSorted(objArr, (a, b) => a.age - b.age)
 
-const arrText = ref('')
+const arrText = shallowRef('')
 const inputArr = computed(() => arrText.value.split(','))
 const inputOut = useSorted(inputArr)
 
diff --git a/packages/core/useSpeechRecognition/demo.vue b/packages/core/useSpeechRecognition/demo.vue
index 6581c8fc903..575b43d9297 100644
--- a/packages/core/useSpeechRecognition/demo.vue
+++ b/packages/core/useSpeechRecognition/demo.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { useSpeechRecognition } from '@vueuse/core'
-import { ref, watch } from 'vue'
+import { ref as deepRef, shallowRef, watch } from 'vue'
 
-const lang = ref('en-US')
+const lang = shallowRef('en-US')
 
 function sample<T>(arr: T[], size: number) {
   const shuffled = arr.slice(0)
@@ -26,7 +26,7 @@ const speech = useSpeechRecognition({
   continuous: true,
 })
 
-const color = ref('transparent')
+const color = shallowRef('transparent')
 
 if (speech.isSupported.value) {
   // @ts-expect-error missing types
@@ -45,7 +45,7 @@ if (speech.isSupported.value) {
   })
 }
 
-const sampled = ref<string[]>([])
+const sampled = deepRef<string[]>([])
 
 function start() {
   color.value = 'transparent'
@@ -56,7 +56,7 @@ function start() {
 
 const { isListening, isSupported, stop, result } = speech
 
-const selectedLanguage = ref(lang.value)
+const selectedLanguage = shallowRef(lang.value)
 watch(lang, lang => isListening.value ? null : selectedLanguage.value = lang)
 watch(isListening, isListening => isListening ? null : selectedLanguage.value = lang.value)
 </script>
diff --git a/packages/core/useSpeechRecognition/index.ts b/packages/core/useSpeechRecognition/index.ts
index 33ddf529b70..8089c0c94e6 100644
--- a/packages/core/useSpeechRecognition/index.ts
+++ b/packages/core/useSpeechRecognition/index.ts
@@ -6,7 +6,7 @@ import type { Ref } from 'vue'
 import type { ConfigurableWindow } from '../_configurable'
 import type { SpeechRecognition, SpeechRecognitionErrorEvent } from './types'
 import { toRef, tryOnScopeDispose } from '@vueuse/shared'
-import { ref, shallowRef, toValue, watch } from 'vue'
+import { shallowRef, toValue, watch } from 'vue'
 import { defaultWindow } from '../_configurable'
 import { useSupported } from '../useSupported'
 
@@ -54,9 +54,9 @@ export function useSpeechRecognition(options: UseSpeechRecognitionOptions = {})
   } = options
 
   const lang = toRef(options.lang || 'en-US')
-  const isListening = ref(false)
-  const isFinal = ref(false)
-  const result = ref('')
+  const isListening = shallowRef(false)
+  const isFinal = shallowRef(false)
+  const result = shallowRef('')
   const error = shallowRef(undefined) as Ref<SpeechRecognitionErrorEvent | undefined>
 
   let recognition: SpeechRecognition | undefined
diff --git a/packages/core/useSpeechSynthesis/demo.vue b/packages/core/useSpeechSynthesis/demo.vue
index 347663bc0ef..8ac466bc3fe 100644
--- a/packages/core/useSpeechSynthesis/demo.vue
+++ b/packages/core/useSpeechSynthesis/demo.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { useSpeechSynthesis } from '@vueuse/core'
-import { onMounted, ref } from 'vue'
+import { ref as deepRef, onMounted, shallowRef } from 'vue'
 
-const voice = ref<SpeechSynthesisVoice>(undefined as unknown as SpeechSynthesisVoice)
-const text = ref('Hello, everyone! Good morning!')
-const pitch = ref(1)
-const rate = ref(1)
+const voice = deepRef<SpeechSynthesisVoice>(undefined as unknown as SpeechSynthesisVoice)
+const text = shallowRef('Hello, everyone! Good morning!')
+const pitch = shallowRef(1)
+const rate = shallowRef(1)
 
 const speech = useSpeechSynthesis(text, {
   voice,
@@ -15,7 +15,7 @@ const speech = useSpeechSynthesis(text, {
 
 let synth: SpeechSynthesis
 
-const voices = ref<SpeechSynthesisVoice[]>([])
+const voices = deepRef<SpeechSynthesisVoice[]>([])
 
 onMounted(() => {
   if (speech.isSupported.value) {
diff --git a/packages/core/useSpeechSynthesis/index.ts b/packages/core/useSpeechSynthesis/index.ts
index d4257d80b2e..103497a0e65 100644
--- a/packages/core/useSpeechSynthesis/index.ts
+++ b/packages/core/useSpeechSynthesis/index.ts
@@ -2,7 +2,7 @@ import type { MaybeRef, MaybeRefOrGetter } from '@vueuse/shared'
 import type { Ref } from 'vue'
 import type { ConfigurableWindow } from '../_configurable'
 import { toRef, tryOnScopeDispose } from '@vueuse/shared'
-import { computed, ref, shallowRef, toValue, watch } from 'vue'
+import { computed, ref as deepRef, shallowRef, toValue, watch } from 'vue'
 import { defaultWindow } from '../_configurable'
 import { useSupported } from '../useSupported'
 
@@ -59,8 +59,8 @@ export function useSpeechSynthesis(
   const synth = window && (window as any).speechSynthesis as SpeechSynthesis
   const isSupported = useSupported(() => synth)
 
-  const isPlaying = ref(false)
-  const status = ref<UseSpeechSynthesisStatus>('init')
+  const isPlaying = shallowRef(false)
+  const status = deepRef<UseSpeechSynthesisStatus>('init')
 
   const spokenText = toRef(text || '')
   const lang = toRef(options.lang || 'en-US')
diff --git a/packages/core/useStepper/index.test.ts b/packages/core/useStepper/index.test.ts
index 8c406d71f8b..acbe06d68b0 100644
--- a/packages/core/useStepper/index.test.ts
+++ b/packages/core/useStepper/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { reactive, ref } from 'vue'
+import { reactive, shallowRef } from 'vue'
 import { useStepper } from './index'
 
 describe('useStepper', () => {
@@ -9,7 +9,7 @@ describe('useStepper', () => {
 
   describe('common', () => {
     it('steps are reactive', () => {
-      const flag = ref(true)
+      const flag = shallowRef(true)
       const steps = reactive({
         first: {
           title: 'First',
diff --git a/packages/core/useStepper/index.ts b/packages/core/useStepper/index.ts
index b641029f5ef..9d1fabd44a5 100644
--- a/packages/core/useStepper/index.ts
+++ b/packages/core/useStepper/index.ts
@@ -1,6 +1,6 @@
 import type { MaybeRef } from '@vueuse/shared'
 import type { ComputedRef, Ref } from 'vue'
-import { computed, ref } from 'vue'
+import { computed, ref as deepRef } from 'vue'
 
 export interface UseStepperReturn<StepName, Steps, Step> {
   /** List of steps. */
@@ -46,9 +46,9 @@ export interface UseStepperReturn<StepName, Steps, Step> {
 export function useStepper<T extends string | number>(steps: MaybeRef<T[]>, initialStep?: T): UseStepperReturn<T, T[], T>
 export function useStepper<T extends Record<string, any>>(steps: MaybeRef<T>, initialStep?: keyof T): UseStepperReturn<Exclude<keyof T, symbol>, T, T[keyof T]>
 export function useStepper(steps: any, initialStep?: any): UseStepperReturn<any, any, any> {
-  const stepsRef = ref<any[]>(steps)
+  const stepsRef = deepRef<any[]>(steps)
   const stepNames = computed<any[]>(() => Array.isArray(stepsRef.value) ? stepsRef.value : Object.keys(stepsRef.value))
-  const index = ref(stepNames.value.indexOf(initialStep ?? stepNames.value[0]))
+  const index = deepRef(stepNames.value.indexOf(initialStep ?? stepNames.value[0]))
   const current = computed(() => at(index.value))
   const isFirst = computed(() => index.value === 0)
   const isLast = computed(() => index.value === stepNames.value.length - 1)
diff --git a/packages/core/useStorage/index.test.ts b/packages/core/useStorage/index.test.ts
index 70ab634c9c3..108a383873d 100644
--- a/packages/core/useStorage/index.test.ts
+++ b/packages/core/useStorage/index.test.ts
@@ -1,6 +1,6 @@
 import { debounceFilter } from '@vueuse/shared'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { defineComponent, nextTick, ref, toRaw } from 'vue'
+import { ref as deepRef, defineComponent, nextTick, toRaw } from 'vue'
 import { mount, nextTwoTick, useSetup } from '../../.test'
 import { customStorageEventName, StorageSerializers, useStorage } from './index'
 
@@ -245,7 +245,7 @@ describe('useStorage', () => {
   it('pass ref as initialValue', async () => {
     expect(storage.getItem(KEY)).toEqual(undefined)
 
-    const init = ref({
+    const init = deepRef({
       name: 'a',
       data: 123,
     })
@@ -548,7 +548,7 @@ describe('useStorage', () => {
 
   it('updates on key change when thew new storage value is presented', async () => {
     storage.setItem(ANOTHER_KEY, '1')
-    const key = ref(KEY)
+    const key = deepRef(KEY)
     const data = useStorage(key, 0, storage)
 
     data.value = 2
@@ -567,7 +567,7 @@ describe('useStorage', () => {
   })
 
   it('changes to defaults on key change when the new storage value is undefined', async () => {
-    const key = ref(KEY)
+    const key = deepRef(KEY)
     const data = useStorage(key, 0, storage)
 
     data.value = 1
@@ -587,7 +587,7 @@ describe('useStorage', () => {
   })
 
   it('listens to new storage value changes after key change', async () => {
-    const key = ref(KEY)
+    const key = deepRef(KEY)
     const data = useStorage(key, 0, localStorage)
 
     key.value = ANOTHER_KEY
diff --git a/packages/core/useStorageAsync/index.ts b/packages/core/useStorageAsync/index.ts
index 2c33419ab1a..18992821a80 100644
--- a/packages/core/useStorageAsync/index.ts
+++ b/packages/core/useStorageAsync/index.ts
@@ -2,7 +2,7 @@ import type { MaybeRefOrGetter, RemovableRef } from '@vueuse/shared'
 import type { StorageLikeAsync } from '../ssr-handlers'
 import type { SerializerAsync, UseStorageOptions } from '../useStorage'
 import { watchWithFilter } from '@vueuse/shared'
-import { ref, shallowRef, toValue } from 'vue'
+import { ref as deepRef, shallowRef, toValue } from 'vue'
 import { defaultWindow } from '../_configurable'
 import { getSSRHandler } from '../ssr-handlers'
 import { useEventListener } from '../useEventListener'
@@ -54,7 +54,7 @@ export function useStorageAsync<T extends(string | number | boolean | object | n
   const rawInit: T = toValue(initialValue)
   const type = guessSerializerType<T>(rawInit)
 
-  const data = (shallow ? shallowRef : ref)(toValue(initialValue)) as RemovableRef<T>
+  const data = (shallow ? shallowRef : deepRef)(toValue(initialValue)) as RemovableRef<T>
   const serializer = options.serializer ?? StorageSerializers[type]
 
   if (!storage) {
diff --git a/packages/core/useStyleTag/index.ts b/packages/core/useStyleTag/index.ts
index abd637c743e..806c6a87c30 100644
--- a/packages/core/useStyleTag/index.ts
+++ b/packages/core/useStyleTag/index.ts
@@ -2,7 +2,7 @@ import type { MaybeRef } from '@vueuse/shared'
 import type { Ref } from 'vue'
 import type { ConfigurableDocument } from '../_configurable'
 import { tryOnMounted, tryOnScopeDispose } from '@vueuse/shared'
-import { readonly, ref, watch } from 'vue'
+import { readonly, shallowRef, watch } from 'vue'
 import { defaultDocument } from '../_configurable'
 
 export interface UseStyleTagOptions extends ConfigurableDocument {
@@ -56,7 +56,7 @@ export function useStyleTag(
   css: MaybeRef<string>,
   options: UseStyleTagOptions = {},
 ): UseStyleTagReturn {
-  const isLoaded = ref(false)
+  const isLoaded = shallowRef(false)
 
   const {
     document = defaultDocument,
@@ -65,7 +65,7 @@ export function useStyleTag(
     id = `vueuse_styletag_${++_id}`,
   } = options
 
-  const cssRef = ref(css)
+  const cssRef = shallowRef(css)
 
   let stop = () => { }
   const load = () => {
diff --git a/packages/core/useSwipe/demo.vue b/packages/core/useSwipe/demo.vue
index 33c2f5be827..81ed77dda36 100644
--- a/packages/core/useSwipe/demo.vue
+++ b/packages/core/useSwipe/demo.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import type { UseSwipeDirection } from '@vueuse/core'
 import { useSwipe } from '@vueuse/core'
-import { computed, ref } from 'vue'
+import { computed, shallowRef } from 'vue'
 
-const target = ref<HTMLElement | null>(null)
-const container = ref<HTMLElement | null>(null)
+const target = shallowRef<HTMLElement | null>(null)
+const container = shallowRef<HTMLElement | null>(null)
 const containerWidth = computed(() => container.value?.offsetWidth)
-const left = ref('0')
-const opacity = ref(1)
+const left = shallowRef('0')
+const opacity = shallowRef(1)
 
 function reset() {
   left.value = '0'
diff --git a/packages/core/useSwipe/index.ts b/packages/core/useSwipe/index.ts
index 739c792aeba..e674630d9aa 100644
--- a/packages/core/useSwipe/index.ts
+++ b/packages/core/useSwipe/index.ts
@@ -2,7 +2,7 @@ import type { MaybeRefOrGetter } from '@vueuse/shared'
 import type { ComputedRef, Ref } from 'vue'
 import type { ConfigurableWindow } from '../_configurable'
 import type { Position } from '../types'
-import { computed, reactive, ref } from 'vue'
+import { computed, reactive, shallowRef } from 'vue'
 import { useEventListener } from '../useEventListener'
 
 export type UseSwipeDirection = 'up' | 'down' | 'left' | 'right' | 'none'
@@ -80,7 +80,7 @@ export function useSwipe(
   const { max, abs } = Math
   const isThresholdExceeded = computed(() => max(abs(diffX.value), abs(diffY.value)) >= threshold)
 
-  const isSwiping = ref(false)
+  const isSwiping = shallowRef(false)
 
   const direction = computed((): UseSwipeDirection => {
     if (!isThresholdExceeded.value)
diff --git a/packages/core/useTemplateRefsList/demo.vue b/packages/core/useTemplateRefsList/demo.vue
index 869ce3f305b..8ffd85c4f50 100644
--- a/packages/core/useTemplateRefsList/demo.vue
+++ b/packages/core/useTemplateRefsList/demo.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { useTemplateRefsList } from '@vueuse/core'
-import { nextTick, ref, watch } from 'vue'
+import { nextTick, shallowRef, watch } from 'vue'
 
-const count = ref(5)
+const count = shallowRef(5)
 const refs = useTemplateRefsList<HTMLDivElement>()
 
 watch(refs, async () => {
diff --git a/packages/core/useTemplateRefsList/index.test.ts b/packages/core/useTemplateRefsList/index.test.ts
index 9675376adb3..7b89286a59a 100644
--- a/packages/core/useTemplateRefsList/index.test.ts
+++ b/packages/core/useTemplateRefsList/index.test.ts
@@ -1,11 +1,11 @@
 import { describe, expect, it } from 'vitest'
-import { defineComponent, h, nextTick, ref, toRefs } from 'vue'
+import { ref as deepRef, defineComponent, h, nextTick, toRefs } from 'vue'
 import { mount } from '../../.test'
 import { useTemplateRefsList } from './index'
 
 const Component1 = defineComponent({
   setup() {
-    const list = ref([1, 2, 3])
+    const list = deepRef([1, 2, 3])
     const refs = useTemplateRefsList()
     return { list, refs }
   },
@@ -45,7 +45,7 @@ const Child = defineComponent({
 
 const testCom2 = defineComponent({
   setup() {
-    const list = ref([1, 2, 3])
+    const list = deepRef([1, 2, 3])
     const refs = useTemplateRefsList<ChildAPI>()
     return { list, refs }
   },
diff --git a/packages/core/useTemplateRefsList/index.ts b/packages/core/useTemplateRefsList/index.ts
index 64b29432c5d..5c1c4db1989 100644
--- a/packages/core/useTemplateRefsList/index.ts
+++ b/packages/core/useTemplateRefsList/index.ts
@@ -1,12 +1,12 @@
 import type { Ref } from 'vue'
-import { onBeforeUpdate, ref } from 'vue'
+import { ref as deepRef, onBeforeUpdate } from 'vue'
 
 export type TemplateRefsList<T> = T[] & {
   set: (el: object | null) => void
 }
 
 export function useTemplateRefsList<T = Element>(): Readonly<Ref<Readonly<TemplateRefsList<T>>>> {
-  const refs = ref<unknown>([]) as Ref<TemplateRefsList<T>>
+  const refs = deepRef<unknown>([]) as Ref<TemplateRefsList<T>>
   refs.value.set = (el: object | null) => {
     if (el)
       refs.value.push(el as T)
diff --git a/packages/core/useTextDirection/index.ts b/packages/core/useTextDirection/index.ts
index 9e6e5c018db..be8d3b842b0 100644
--- a/packages/core/useTextDirection/index.ts
+++ b/packages/core/useTextDirection/index.ts
@@ -1,8 +1,8 @@
 import type { ConfigurableDocument } from '../_configurable'
 import type { MaybeElement } from '../unrefElement'
-
 import { tryOnMounted } from '@vueuse/shared'
-import { computed, ref } from 'vue'
+
+import { computed, ref as deepRef } from 'vue'
 import { defaultDocument } from '../_configurable'
 import { useMutationObserver } from '../useMutationObserver'
 
@@ -46,7 +46,7 @@ export function useTextDirection(options: UseTextDirectionOptions = {}) {
     return document?.querySelector(selector)?.getAttribute('dir') as UseTextDirectionValue ?? initialValue
   }
 
-  const dir = ref<UseTextDirectionValue>(getValue())
+  const dir = deepRef<UseTextDirectionValue>(getValue())
 
   tryOnMounted(() => dir.value = getValue())
 
diff --git a/packages/core/useTextSelection/demo.vue b/packages/core/useTextSelection/demo.vue
index d5dc59a9568..bcff4e82fbd 100644
--- a/packages/core/useTextSelection/demo.vue
+++ b/packages/core/useTextSelection/demo.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
 import { useTextSelection } from '@vueuse/core'
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 
-const demo = ref()
 const { rects, text } = useTextSelection()
 const selectedStyle = computed(() => text.value ? 'text-primary' : 'text-gray-400')
 </script>
 
 <template>
-  <div ref="demo">
+  <div>
     <p class="font-600 text-blue-600">
       You can select any text on the page.
     </p>
diff --git a/packages/core/useTextSelection/index.ts b/packages/core/useTextSelection/index.ts
index 18e48e1287e..919579d8354 100644
--- a/packages/core/useTextSelection/index.ts
+++ b/packages/core/useTextSelection/index.ts
@@ -1,5 +1,5 @@
 import type { ConfigurableWindow } from '../_configurable'
-import { computed, ref } from 'vue'
+import { computed, ref as deepRef } from 'vue'
 import { defaultWindow } from '../_configurable'
 import { useEventListener } from '../useEventListener'
 
@@ -18,7 +18,7 @@ export function useTextSelection(options: ConfigurableWindow = {}) {
     window = defaultWindow,
   } = options
 
-  const selection = ref<Selection | null>(null)
+  const selection = deepRef<Selection | null>(null)
   const text = computed(() => selection.value?.toString() ?? '')
   const ranges = computed<Range[]>(() => selection.value ? getRangesFromSelection(selection.value) : [])
   const rects = computed(() => ranges.value.map(range => range.getBoundingClientRect()))
diff --git a/packages/core/useTextareaAutosize/index.ts b/packages/core/useTextareaAutosize/index.ts
index 8eea60da022..fac08c83785 100644
--- a/packages/core/useTextareaAutosize/index.ts
+++ b/packages/core/useTextareaAutosize/index.ts
@@ -1,10 +1,12 @@
-import type { MaybeRef } from '@vueuse/shared'
+import type { Fn, MaybeRef } from '@vueuse/shared'
 import type { WatchSource } from 'vue'
+import type { ConfigurableWindow } from '../_configurable'
 import { toRef } from '@vueuse/shared'
-import { nextTick, ref, toValue, watch } from 'vue'
+import { nextTick, shallowRef, toValue, watch } from 'vue'
+import { defaultWindow } from '../_configurable'
 import { useResizeObserver } from '../useResizeObserver'
 
-export interface UseTextareaAutosizeOptions {
+export interface UseTextareaAutosizeOptions extends ConfigurableWindow {
   /** Textarea element to autosize. */
   element?: MaybeRef<HTMLTextAreaElement | undefined>
   /** Textarea content. */
@@ -19,12 +21,31 @@ export interface UseTextareaAutosizeOptions {
   styleProp?: 'height' | 'minHeight'
 }
 
-export function useTextareaAutosize(options?: UseTextareaAutosizeOptions) {
+/**
+ * Call window.requestAnimationFrame(), if not available, just call the function
+ *
+ * @param window
+ * @param fn
+ */
+function tryRequestAnimationFrame(
+  window: Window | undefined = defaultWindow,
+  fn: Fn,
+) {
+  if (window && typeof window.requestAnimationFrame === 'function') {
+    window.requestAnimationFrame(fn)
+  }
+  else {
+    fn()
+  }
+}
+
+export function useTextareaAutosize(options: UseTextareaAutosizeOptions = {}) {
+  const { window = defaultWindow } = options
   const textarea = toRef(options?.element)
   const input = toRef(options?.input ?? '')
   const styleProp = options?.styleProp ?? 'height'
-  const textareaScrollHeight = ref(1)
-  const textareaOldWidth = ref(0)
+  const textareaScrollHeight = shallowRef(1)
+  const textareaOldWidth = shallowRef(0)
 
   function triggerResize() {
     if (!textarea.value)
@@ -52,8 +73,11 @@ export function useTextareaAutosize(options?: UseTextareaAutosizeOptions) {
   useResizeObserver(textarea, ([{ contentRect }]) => {
     if (textareaOldWidth.value === contentRect.width)
       return
-    textareaOldWidth.value = contentRect.width
-    triggerResize()
+
+    tryRequestAnimationFrame(window, () => {
+      textareaOldWidth.value = contentRect.width
+      triggerResize()
+    })
   })
 
   if (options?.watch)
diff --git a/packages/core/useThrottledRefHistory/demo.vue b/packages/core/useThrottledRefHistory/demo.vue
index 8b9585d78e7..ab5096e87e8 100644
--- a/packages/core/useThrottledRefHistory/demo.vue
+++ b/packages/core/useThrottledRefHistory/demo.vue
@@ -2,12 +2,12 @@
 import type { Ref } from 'vue'
 import { formatDate, useThrottledRefHistory } from '@vueuse/core'
 import { useCounter } from '@vueuse/shared'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 
 function format(ts: number) {
   return formatDate(new Date(ts), 'YYYY-MM-DD HH:mm:ss')
 }
-const delay: Ref<number> = ref(1000)
+const delay: Ref<number> = shallowRef(1000)
 
 const { count, inc, dec } = useCounter()
 const { history, undo, redo, canUndo, canRedo } = useThrottledRefHistory(
diff --git a/packages/core/useThrottledRefHistory/index.test.ts b/packages/core/useThrottledRefHistory/index.test.ts
index 763853294f5..9f5b99a43e3 100644
--- a/packages/core/useThrottledRefHistory/index.test.ts
+++ b/packages/core/useThrottledRefHistory/index.test.ts
@@ -1,12 +1,12 @@
 import { describe, expect, it, vi } from 'vitest'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 import { useThrottledRefHistory } from './index'
 
 describe('useThrottledRefHistory - sync', () => {
   it('take first snapshot right after data was changed and second after given time', async () => {
     vi.useFakeTimers()
     const ms = 10
-    const v = ref(0)
+    const v = shallowRef(0)
 
     const { history } = useThrottledRefHistory(v, { throttle: ms })
 
diff --git a/packages/core/useTimeAgo/demo.vue b/packages/core/useTimeAgo/demo.vue
index 31f75913c9f..39d05f58310 100644
--- a/packages/core/useTimeAgo/demo.vue
+++ b/packages/core/useTimeAgo/demo.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { useTimeAgo } from '@vueuse/core'
 import { timestamp } from '@vueuse/shared'
-import { computed, ref } from 'vue'
+import { computed, shallowRef } from 'vue'
 
-const slider = ref(0)
+const slider = shallowRef(0)
 const value = computed(() => timestamp() + slider.value ** 3)
 const timeAgo = useTimeAgo(value)
 </script>
diff --git a/packages/core/useTimeAgo/index.test.ts b/packages/core/useTimeAgo/index.test.ts
index 76a774ee72e..e7618b03858 100644
--- a/packages/core/useTimeAgo/index.test.ts
+++ b/packages/core/useTimeAgo/index.test.ts
@@ -1,7 +1,7 @@
 import type { ComputedRef } from 'vue'
 import { timestamp } from '@vueuse/shared'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { computed, ref } from 'vue'
+import { computed, shallowRef } from 'vue'
 import { useTimeAgo } from './index'
 
 type TimeUnit = 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year'
@@ -27,7 +27,7 @@ function getNeededTimeChange(type: TimeUnit, count: number, adjustSecond?: numbe
 
 describe('useTimeAgo', () => {
   let baseTime: number
-  const changeValue = ref(0)
+  const changeValue = shallowRef(0)
   let changeTime: ComputedRef<number>
 
   function reset() {
diff --git a/packages/core/useTimeoutPoll/demo.vue b/packages/core/useTimeoutPoll/demo.vue
index 27365425317..d1f5016dba7 100644
--- a/packages/core/useTimeoutPoll/demo.vue
+++ b/packages/core/useTimeoutPoll/demo.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { useTimeoutPoll } from '@vueuse/core'
 import { promiseTimeout } from '@vueuse/shared'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 
-const count = ref(0)
+const count = shallowRef(0)
 
 async function fetchData() {
   await promiseTimeout(1000)
diff --git a/packages/core/useTimeoutPoll/index.test.ts b/packages/core/useTimeoutPoll/index.test.ts
index 789ca8bc7a0..01c2cc76221 100644
--- a/packages/core/useTimeoutPoll/index.test.ts
+++ b/packages/core/useTimeoutPoll/index.test.ts
@@ -1,5 +1,5 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { effectScope, ref } from 'vue'
+import { effectScope, shallowRef } from 'vue'
 import { useTimeoutPoll } from './index'
 
 describe('useTimeoutPoll', () => {
@@ -9,7 +9,7 @@ describe('useTimeoutPoll', () => {
 
   it('basic pause/resume', async () => {
     const callback = vi.fn()
-    const interval = ref(0)
+    const interval = shallowRef(0)
     const { pause, resume } = useTimeoutPoll(callback, interval)
 
     await vi.advanceTimersByTimeAsync(1)
@@ -37,7 +37,7 @@ describe('useTimeoutPoll', () => {
 
   it('pause/resume in scope', async () => {
     const callback = vi.fn()
-    const interval = ref(0)
+    const interval = shallowRef(0)
     const scope = effectScope()
     await scope.run(async () => {
       useTimeoutPoll(callback, interval)
diff --git a/packages/core/useTimeoutPoll/index.ts b/packages/core/useTimeoutPoll/index.ts
index f36278f8096..bb3b034f3ff 100644
--- a/packages/core/useTimeoutPoll/index.ts
+++ b/packages/core/useTimeoutPoll/index.ts
@@ -1,6 +1,6 @@
 import type { Awaitable, MaybeRefOrGetter, Pausable, UseTimeoutFnOptions } from '@vueuse/shared'
 import { isClient, tryOnScopeDispose, useTimeoutFn } from '@vueuse/shared'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 
 export interface UseTimeoutPollOptions {
   /**
@@ -30,7 +30,7 @@ export function useTimeoutPoll(
 
   const { start } = useTimeoutFn(loop, interval, { immediate })
 
-  const isActive = ref(false)
+  const isActive = shallowRef(false)
 
   async function loop() {
     if (!isActive.value)
diff --git a/packages/core/useTimestamp/index.test.ts b/packages/core/useTimestamp/index.test.ts
index 227a143f5f5..23d48b2882a 100644
--- a/packages/core/useTimestamp/index.test.ts
+++ b/packages/core/useTimestamp/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from 'vitest'
-import { ref } from 'vue'
+import { ref as deepRef } from 'vue'
 import { useTimestamp } from './index'
 
 describe('useTimestamp', () => {
@@ -13,7 +13,7 @@ describe('useTimestamp', () => {
   })
 
   it('allows for a delayed start using requestAnimationFrame', async () => {
-    const now = ref()
+    const now = deepRef()
     const callback = vi.fn((time) => {
       now.value = time
     })
diff --git a/packages/core/useTimestamp/index.ts b/packages/core/useTimestamp/index.ts
index e0076db482d..7963285499c 100644
--- a/packages/core/useTimestamp/index.ts
+++ b/packages/core/useTimestamp/index.ts
@@ -1,7 +1,7 @@
 import type { Pausable } from '@vueuse/shared'
 import type { Ref } from 'vue'
 import { timestamp, useIntervalFn } from '@vueuse/shared'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 import { useRafFn } from '../useRafFn'
 
 export interface UseTimestampOptions<Controls extends boolean> {
@@ -55,7 +55,7 @@ export function useTimestamp(options: UseTimestampOptions<boolean> = {}) {
     callback,
   } = options
 
-  const ts = ref(timestamp() + offset)
+  const ts = shallowRef(timestamp() + offset)
 
   const update = () => ts.value = timestamp() + offset
   const cb = callback
diff --git a/packages/core/useTitle/index.test.ts b/packages/core/useTitle/index.test.ts
index dd54e203cd1..325bb83e4c0 100644
--- a/packages/core/useTitle/index.test.ts
+++ b/packages/core/useTitle/index.test.ts
@@ -1,6 +1,6 @@
 import type { ComputedRef, Ref } from 'vue'
 import { beforeEach, describe, expect, expectTypeOf, it } from 'vitest'
-import { computed, isReadonly, ref } from 'vue'
+import { computed, ref as deepRef, isReadonly, shallowRef } from 'vue'
 import { useTitle } from './index'
 
 const defaultTitle = 'VueUse testing'
@@ -41,7 +41,7 @@ describe('useTitle', () => {
 
     describe('ref param', () => {
       it('string', () => {
-        const targetRef = ref('old title')
+        const targetRef = shallowRef('old title')
         const title = useTitle(targetRef)
         expect(title.value).toEqual('old title')
         targetRef.value = 'new title'
@@ -51,7 +51,7 @@ describe('useTitle', () => {
       })
 
       it('null', () => {
-        const targetRef = ref<null | string>(null)
+        const targetRef = deepRef<null | string>(null)
         const title = useTitle(targetRef)
         expect(title.value).toEqual(null)
         targetRef.value = 'new title'
@@ -61,7 +61,7 @@ describe('useTitle', () => {
       })
 
       it('undefined', () => {
-        const targetRef = ref<undefined | string>(undefined)
+        const targetRef = deepRef<undefined | string>(undefined)
         const title = useTitle(targetRef)
         expect(title.value).toEqual(undefined)
         targetRef.value = 'new title'
@@ -74,7 +74,7 @@ describe('useTitle', () => {
 
   describe('with readonly param', () => {
     it('computed', () => {
-      const condition = ref(false)
+      const condition = shallowRef(false)
       const target = computed(() => condition.value ? 'new title' : 'old title')
       const title = useTitle(target)
       expect(title.value).toEqual('old title')
@@ -105,7 +105,7 @@ describe('useTitle', () => {
     })
 
     it('should return a ref if initial value is ref', () => {
-      const title = useTitle(ref(''))
+      const title = useTitle(shallowRef(''))
       expect(isReadonly(title)).toBeFalsy()
       expectTypeOf(title).toEqualTypeOf<Ref<string | null | undefined>>()
     })
diff --git a/packages/core/useTitle/index.ts b/packages/core/useTitle/index.ts
index cc32506e9a3..91ac7242b40 100644
--- a/packages/core/useTitle/index.ts
+++ b/packages/core/useTitle/index.ts
@@ -1,7 +1,7 @@
 import type { MaybeRef, MaybeRefOrGetter, ReadonlyRefOrGetter } from '@vueuse/shared'
 import type { ComputedRef, Ref } from 'vue'
 import type { ConfigurableDocument } from '../_configurable'
-import { toRef, tryOnBeforeUnmount } from '@vueuse/shared'
+import { toRef, tryOnScopeDispose } from '@vueuse/shared'
 import { toValue, watch } from 'vue'
 import { defaultDocument } from '../_configurable'
 import { useMutationObserver } from '../useMutationObserver'
@@ -94,7 +94,7 @@ export function useTitle(
     )
   }
 
-  tryOnBeforeUnmount(() => {
+  tryOnScopeDispose(() => {
     if (restoreOnUnmount) {
       const restoredTitle = restoreOnUnmount(originalTitle, title.value || '')
       if (restoredTitle != null && document)
diff --git a/packages/core/useTransition/demo.vue b/packages/core/useTransition/demo.vue
index 3b455eaeb1e..8d2ebccbc60 100644
--- a/packages/core/useTransition/demo.vue
+++ b/packages/core/useTransition/demo.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { TransitionPresets, useTransition } from '@vueuse/core'
 import { rand } from '@vueuse/shared'
-import { ref } from 'vue'
+import { ref as deepRef, shallowRef } from 'vue'
 
 const duration = 1500
 
-const baseNumber = ref(0)
+const baseNumber = shallowRef(0)
 
-const baseVector = ref([0, 0])
+const baseVector = deepRef([0, 0])
 
 function easeOutElastic(n: number) {
   return n === 0
diff --git a/packages/core/useTransition/index.test.ts b/packages/core/useTransition/index.test.ts
index 5f93c666137..b54eca3c39d 100644
--- a/packages/core/useTransition/index.test.ts
+++ b/packages/core/useTransition/index.test.ts
@@ -1,6 +1,6 @@
 import { promiseTimeout } from '@vueuse/shared'
 import { describe, expect, it, vi } from 'vitest'
-import { ref } from 'vue'
+import { ref as deepRef, shallowRef } from 'vue'
 import { executeTransition, useTransition } from './index'
 
 function expectBetween(val: number, floor: number, ceiling: number) {
@@ -10,7 +10,7 @@ function expectBetween(val: number, floor: number, ceiling: number) {
 
 describe('executeTransition', () => {
   it('transitions between numbers', async () => {
-    const source = ref(0)
+    const source = shallowRef(0)
 
     const trans = executeTransition(source, 0, 1, { duration: 50 })
 
@@ -24,7 +24,7 @@ describe('executeTransition', () => {
   })
 
   it('transitions between vectors', async () => {
-    const source = ref([0, 0, 0])
+    const source = deepRef([0, 0, 0])
 
     const trans = executeTransition(source, [0, 1, 2], [1, 2, 3], { duration: 50 })
 
@@ -44,7 +44,7 @@ describe('executeTransition', () => {
   it('transitions can be aborted', async () => {
     let abort = false
 
-    const source = ref(0)
+    const source = shallowRef(0)
 
     const trans = executeTransition(source, 0, 1, {
       abort: () => abort,
@@ -63,7 +63,7 @@ describe('executeTransition', () => {
 
 describe('useTransition', () => {
   it('transitions between numbers', async () => {
-    const source = ref(0)
+    const source = shallowRef(0)
     const transition = useTransition(source, { duration: 100 })
 
     expect(transition.value).toBe(0)
@@ -78,7 +78,7 @@ describe('useTransition', () => {
   })
 
   it('transitions between vectors', async () => {
-    const source = ref([0, 0])
+    const source = deepRef([0, 0])
     const transition = useTransition(source, { duration: 100 })
 
     expect(transition.value).toEqual([0, 0])
@@ -95,8 +95,8 @@ describe('useTransition', () => {
   })
 
   it('transitions between refs', async () => {
-    const source1 = ref(0)
-    const source2 = ref(0)
+    const source1 = shallowRef(0)
+    const source2 = shallowRef(0)
     const transition = useTransition([source1, source2], { duration: 100 })
 
     expect(transition.value).toEqual([0, 0])
@@ -114,7 +114,7 @@ describe('useTransition', () => {
   })
 
   it('supports cubic bezier curves', async () => {
-    const source = ref(0)
+    const source = shallowRef(0)
 
     // https://cubic-bezier.com/#0,2,0,1
     const easeOutBack = useTransition(source, {
@@ -140,7 +140,7 @@ describe('useTransition', () => {
   })
 
   it('supports custom easing functions', async () => {
-    const source = ref(0)
+    const source = shallowRef(0)
     const linear = vi.fn(n => n)
     const transition = useTransition(source, {
       duration: 100,
@@ -160,7 +160,7 @@ describe('useTransition', () => {
   })
 
   it('supports non-linear custom easing functions', async () => {
-    const source = ref(0)
+    const source = shallowRef(0)
     const easeInQuad = vi.fn(n => n * n)
     const transition = useTransition(source, {
       duration: 100,
@@ -180,7 +180,7 @@ describe('useTransition', () => {
   })
 
   it('supports delayed transitions', async () => {
-    const source = ref(0)
+    const source = shallowRef(0)
 
     const transition = useTransition(source, {
       delay: 100,
@@ -197,10 +197,10 @@ describe('useTransition', () => {
   })
 
   it('supports dynamic transitions', async () => {
-    const source = ref(0)
+    const source = shallowRef(0)
     const first = vi.fn(n => n)
     const second = vi.fn(n => n)
-    const easingFn = ref(first)
+    const easingFn = deepRef(first)
 
     useTransition(source, {
       duration: 100,
@@ -228,8 +228,8 @@ describe('useTransition', () => {
   })
 
   it('supports dynamic durations', async () => {
-    const source = ref(0)
-    const duration = ref(100)
+    const source = shallowRef(0)
+    const duration = shallowRef(100)
     const transition = useTransition(source, { duration })
 
     source.value = 1
@@ -251,7 +251,7 @@ describe('useTransition', () => {
   })
 
   it('fires onStarted and onFinished callbacks', async () => {
-    const source = ref(0)
+    const source = shallowRef(0)
     const onStarted = vi.fn()
     const onFinished = vi.fn()
 
@@ -279,7 +279,7 @@ describe('useTransition', () => {
   })
 
   it('clears pending transitions before starting a new one', async () => {
-    const source = ref(0)
+    const source = shallowRef(0)
     const onStarted = vi.fn()
     const onFinished = vi.fn()
 
@@ -302,8 +302,8 @@ describe('useTransition', () => {
 
   it('can be disabled for sychronous changes', async () => {
     const onStarted = vi.fn()
-    const disabled = ref(false)
-    const source = ref(0)
+    const disabled = shallowRef(false)
+    const source = shallowRef(0)
 
     const transition = useTransition(source, {
       disabled,
@@ -322,7 +322,7 @@ describe('useTransition', () => {
   })
 
   it('begins transition from where previous transition was interrupted', async () => {
-    const source = ref(0)
+    const source = shallowRef(0)
 
     const transition = useTransition(source, {
       duration: 100,
diff --git a/packages/core/useTransition/index.ts b/packages/core/useTransition/index.ts
index 67ddffd0d24..e2fd3c2ff88 100644
--- a/packages/core/useTransition/index.ts
+++ b/packages/core/useTransition/index.ts
@@ -1,7 +1,7 @@
 import type { MaybeRef, MaybeRefOrGetter } from '@vueuse/shared'
 import type { ComputedRef, Ref } from 'vue'
 import { identity as linear, promiseTimeout, tryOnScopeDispose } from '@vueuse/shared'
-import { computed, ref, toValue, watch } from 'vue'
+import { computed, ref as deepRef, toValue, watch } from 'vue'
 
 /**
  * Cubic bezier points
@@ -219,7 +219,7 @@ export function useTransition(
       : v.map(toValue<number>)
   }
 
-  const outputRef = ref(sourceVal())
+  const outputRef = deepRef(sourceVal())
 
   watch(sourceVal, async (to) => {
     if (toValue(options.disabled))
diff --git a/packages/core/useUserMedia/demo.vue b/packages/core/useUserMedia/demo.vue
index fd05226ab91..02e0a72bd26 100644
--- a/packages/core/useUserMedia/demo.vue
+++ b/packages/core/useUserMedia/demo.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { useDevicesList, useUserMedia } from '@vueuse/core'
-import { reactive, ref, watchEffect } from 'vue'
+import { ref as deepRef, reactive, watchEffect } from 'vue'
 
-const currentCamera = ref<string>()
+const currentCamera = deepRef<string>()
 const { videoInputs: cameras } = useDevicesList({
   requestPermissions: true,
   onUpdated() {
@@ -11,7 +11,7 @@ const { videoInputs: cameras } = useDevicesList({
   },
 })
 
-const video = ref<HTMLVideoElement>()
+const video = deepRef<HTMLVideoElement>()
 const { stream, enabled } = useUserMedia({
   constraints: reactive({ video: { deviceId: currentCamera } }),
 })
diff --git a/packages/core/useUserMedia/index.ts b/packages/core/useUserMedia/index.ts
index 11e91fbd6a3..07aa208ed4b 100644
--- a/packages/core/useUserMedia/index.ts
+++ b/packages/core/useUserMedia/index.ts
@@ -4,7 +4,7 @@ import type { MaybeRef } from '@vueuse/shared'
 import type { Ref } from 'vue'
 import type { ConfigurableNavigator } from '../_configurable'
 import { tryOnScopeDispose } from '@vueuse/shared'
-import { ref, shallowRef, watch } from 'vue'
+import { ref as deepRef, shallowRef, watch } from 'vue'
 import { defaultNavigator } from '../_configurable'
 import { useSupported } from '../useSupported'
 
@@ -36,9 +36,9 @@ export interface UseUserMediaOptions extends ConfigurableNavigator {
  * @param options
  */
 export function useUserMedia(options: UseUserMediaOptions = {}) {
-  const enabled = ref(options.enabled ?? false)
-  const autoSwitch = ref(options.autoSwitch ?? true)
-  const constraints = ref(options.constraints)
+  const enabled = deepRef(options.enabled ?? false)
+  const autoSwitch = deepRef(options.autoSwitch ?? true)
+  const constraints = deepRef(options.constraints)
   const { navigator = defaultNavigator } = options
   const isSupported = useSupported(() => navigator?.mediaDevices?.getUserMedia)
 
diff --git a/packages/core/useVModel/index.ts b/packages/core/useVModel/index.ts
index 2cbcfc8c16d..b1e9cfa19ff 100644
--- a/packages/core/useVModel/index.ts
+++ b/packages/core/useVModel/index.ts
@@ -1,7 +1,7 @@
 import type { Ref, UnwrapRef, WritableComputedRef } from 'vue'
 import type { CloneFn } from '../useCloned'
 import { isDef } from '@vueuse/shared'
-import { computed, getCurrentInstance, nextTick, ref, watch } from 'vue'
+import { computed, ref as deepRef, getCurrentInstance, nextTick, watch } from 'vue'
 import { cloneFnJSON } from '../useCloned'
 
 export interface UseVModelOptions<T, Passive extends boolean = false> {
@@ -118,7 +118,7 @@ export function useVModel<P extends object, K extends keyof P, Name extends stri
 
   if (passive) {
     const initialValue = getValue()
-    const proxy = ref<P[K]>(initialValue!)
+    const proxy = deepRef<P[K]>(initialValue!)
     let isUpdating = false
 
     watch(
diff --git a/packages/core/useVirtualList/demo.vue b/packages/core/useVirtualList/demo.vue
index d1a6cbd2bff..4bdc600874c 100644
--- a/packages/core/useVirtualList/demo.vue
+++ b/packages/core/useVirtualList/demo.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
 import { useVirtualList } from '@vueuse/core'
-import { computed, ref } from 'vue'
+import { computed, ref as deepRef, shallowRef } from 'vue'
 
-const index: Ref = ref()
-const search = ref('')
+const index: Ref = deepRef()
+const search = shallowRef('')
 
 const allItems = Array.from(Array.from({ length: 99999 }).keys())
   .map(i => ({
diff --git a/packages/core/useVirtualList/index.test.ts b/packages/core/useVirtualList/index.test.ts
index 462bcc2be5f..0abe37a5cfb 100644
--- a/packages/core/useVirtualList/index.test.ts
+++ b/packages/core/useVirtualList/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { ref } from 'vue'
+import { ref as deepRef } from 'vue'
 import { useVirtualList } from './index'
 
 describe('useVirtualList', () => {
@@ -14,7 +14,7 @@ describe('useVirtualList, vertical', () => {
       list,
       containerProps: { ref: containerRef },
       scrollTo,
-    } = useVirtualList(ref(['a', 'b', 'c', 'd', 'e', 'f']), { itemHeight: () => 50, overscan: 1 })
+    } = useVirtualList(deepRef(['a', 'b', 'c', 'd', 'e', 'f']), { itemHeight: () => 50, overscan: 1 })
     const div = { ...document.createElement('div'), clientHeight: 50 }
 
     containerRef.value = div
@@ -33,7 +33,7 @@ describe('useVirtualList, vertical', () => {
       list,
       containerProps: { ref: containerRef },
       scrollTo,
-    } = useVirtualList(ref(['a', 'b', 'c', 'd', 'e', 'f', 'g']), { itemHeight: () => 50, overscan: 1 })
+    } = useVirtualList(deepRef(['a', 'b', 'c', 'd', 'e', 'f', 'g']), { itemHeight: () => 50, overscan: 1 })
     const div = { ...document.createElement('div'), clientHeight: 50 }
 
     containerRef.value = div
@@ -67,7 +67,7 @@ describe('useVirtualList, horizontal', () => {
       list,
       containerProps: { ref: containerRef },
       scrollTo,
-    } = useVirtualList(ref(['a', 'b', 'c', 'd', 'e', 'f']), { itemWidth: () => 50, overscan: 1 })
+    } = useVirtualList(deepRef(['a', 'b', 'c', 'd', 'e', 'f']), { itemWidth: () => 50, overscan: 1 })
     const div = { ...document.createElement('div'), clientWidth: 50 }
 
     containerRef.value = div
@@ -86,7 +86,7 @@ describe('useVirtualList, horizontal', () => {
       list,
       containerProps: { ref: containerRef },
       scrollTo,
-    } = useVirtualList(ref(['a', 'b', 'c', 'd', 'e', 'f', 'g']), { itemWidth: () => 50, overscan: 1 })
+    } = useVirtualList(deepRef(['a', 'b', 'c', 'd', 'e', 'f', 'g']), { itemWidth: () => 50, overscan: 1 })
     const div = { ...document.createElement('div'), clientWidth: 50 }
 
     containerRef.value = div
@@ -119,10 +119,10 @@ describe('useVirtualList, horizontal', () => {
 
     const {
       list: readonlyList,
-    } = useVirtualList(ref(readonlyInput), { itemHeight: () => 50, overscan: 1 })
+    } = useVirtualList(deepRef(readonlyInput), { itemHeight: () => 50, overscan: 1 })
     const {
       list: mutableList,
-    } = useVirtualList(ref(mutableInput), { itemHeight: () => 50, overscan: 1 })
+    } = useVirtualList(deepRef(mutableInput), { itemHeight: () => 50, overscan: 1 })
 
     expect(readonlyList.value).toBeDefined()
     expect(mutableList.value).toBeDefined()
diff --git a/packages/core/useVirtualList/index.ts b/packages/core/useVirtualList/index.ts
index 3eb22c5786e..fadedb0110e 100644
--- a/packages/core/useVirtualList/index.ts
+++ b/packages/core/useVirtualList/index.ts
@@ -1,6 +1,6 @@
 import type { MaybeRef } from '@vueuse/shared'
 import type { ComputedRef, Ref, ShallowRef, StyleValue } from 'vue'
-import { computed, ref, shallowRef, watch } from 'vue'
+import { computed, ref as deepRef, shallowRef, watch } from 'vue'
 import { useElementSize } from '../useElementSize'
 
 type UseVirtualListItemSize = number | ((index: number) => number)
@@ -111,13 +111,13 @@ interface UseVirtualListResources<T> {
 }
 
 function useVirtualListResources<T>(list: MaybeRef<readonly T[]>): UseVirtualListResources<T> {
-  const containerRef = ref<HTMLElement | null>(null)
+  const containerRef = shallowRef<HTMLElement | null>(null)
   const size = useElementSize(containerRef)
 
-  const currentList: Ref<UseVirtualListItem<T>[]> = ref([])
+  const currentList: Ref<UseVirtualListItem<T>[]> = deepRef([])
   const source = shallowRef(list)
 
-  const state: Ref<{ start: number, end: number }> = ref({ start: 0, end: 10 })
+  const state: Ref<{ start: number, end: number }> = deepRef({ start: 0, end: 10 })
 
   return { state, source, currentList, size, containerRef }
 }
diff --git a/packages/core/useWakeLock/index.ts b/packages/core/useWakeLock/index.ts
index 749ba3b4f2a..47c26665b60 100644
--- a/packages/core/useWakeLock/index.ts
+++ b/packages/core/useWakeLock/index.ts
@@ -1,6 +1,6 @@
 import type { ConfigurableDocument, ConfigurableNavigator } from '../_configurable'
 import { whenever } from '@vueuse/shared'
-import { computed, ref, shallowRef } from 'vue'
+import { computed, ref as deepRef, shallowRef } from 'vue'
 import { defaultDocument, defaultNavigator } from '../_configurable'
 import { useDocumentVisibility } from '../useDocumentVisibility'
 import { useEventListener } from '../useEventListener'
@@ -31,7 +31,7 @@ export function useWakeLock(options: UseWakeLockOptions = {}) {
     navigator = defaultNavigator,
     document = defaultDocument,
   } = options
-  const requestedType = ref<WakeLockType | false>(false)
+  const requestedType = deepRef<WakeLockType | false>(false)
   const sentinel = shallowRef<WakeLockSentinel | null>(null)
   const documentVisibility = useDocumentVisibility({ document })
   const isSupported = useSupported(() => navigator && 'wakeLock' in navigator)
diff --git a/packages/core/useWebNotification/index.ts b/packages/core/useWebNotification/index.ts
index 5d07aec8b66..596d23e8ec8 100644
--- a/packages/core/useWebNotification/index.ts
+++ b/packages/core/useWebNotification/index.ts
@@ -2,7 +2,7 @@ import type { EventHook } from '@vueuse/shared'
 import type { Ref } from 'vue'
 import type { ConfigurableWindow } from '../_configurable'
 import { createEventHook, tryOnMounted, tryOnScopeDispose } from '@vueuse/shared'
-import { ref } from 'vue'
+import { ref as deepRef } from 'vue'
 import { defaultWindow } from '../_configurable'
 import { useEventListener } from '../useEventListener'
 import { useSupported } from '../useSupported'
@@ -131,9 +131,9 @@ export function useWebNotification(
     return true
   })
 
-  const permissionGranted = ref(isSupported.value && 'permission' in Notification && Notification.permission === 'granted')
+  const permissionGranted = deepRef(isSupported.value && 'permission' in Notification && Notification.permission === 'granted')
 
-  const notification: Ref<Notification | null> = ref(null)
+  const notification: Ref<Notification | null> = deepRef(null)
 
   const ensurePermissions = async () => {
     if (!isSupported.value)
diff --git a/packages/core/useWebSocket/index.test.ts b/packages/core/useWebSocket/index.test.ts
index 1ec8e67d058..b7119c4bcab 100644
--- a/packages/core/useWebSocket/index.test.ts
+++ b/packages/core/useWebSocket/index.test.ts
@@ -1,6 +1,6 @@
 import type { UseWebSocketReturn } from './index'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { nextTick, ref } from 'vue'
+import { nextTick, shallowRef } from 'vue'
 import { useSetup } from '../../.test'
 import { useWebSocket } from './index'
 
@@ -43,7 +43,7 @@ describe('useWebSocket', () => {
   })
 
   it('should reconnect if URL changes', async () => {
-    const url = ref('ws://localhost')
+    const url = shallowRef('ws://localhost')
     vm = useSetup(() => {
       const ref = useWebSocket(url)
 
@@ -61,7 +61,7 @@ describe('useWebSocket', () => {
   })
 
   it('should not reconnect on URL change if immediate and autoConnect are false', async () => {
-    const url = ref('ws://localhost')
+    const url = shallowRef('ws://localhost')
     vm = useSetup(() => {
       const ref = useWebSocket(url, {
         immediate: false,
diff --git a/packages/core/useWebSocket/index.ts b/packages/core/useWebSocket/index.ts
index cc13e5098a6..2de7aee4017 100644
--- a/packages/core/useWebSocket/index.ts
+++ b/packages/core/useWebSocket/index.ts
@@ -1,7 +1,7 @@
 import type { Fn, MaybeRefOrGetter } from '@vueuse/shared'
 import type { Ref } from 'vue'
 import { isClient, isWorker, toRef, tryOnScopeDispose, useIntervalFn } from '@vueuse/shared'
-import { ref, toValue, watch } from 'vue'
+import { ref as deepRef, toValue, watch } from 'vue'
 import { useEventListener } from '../useEventListener'
 
 export type WebSocketStatus = 'OPEN' | 'CONNECTING' | 'CLOSED'
@@ -170,9 +170,9 @@ export function useWebSocket<Data = any>(
     protocols = [],
   } = options
 
-  const data: Ref<Data | null> = ref(null)
-  const status = ref<WebSocketStatus>('CLOSED')
-  const wsRef = ref<WebSocket | undefined>()
+  const data: Ref<Data | null> = deepRef(null)
+  const status = deepRef<WebSocketStatus>('CLOSED')
+  const wsRef = deepRef<WebSocket | undefined>()
   const urlRef = toRef(url)
 
   let heartbeatPause: Fn | undefined
diff --git a/packages/core/useWebWorker/index.ts b/packages/core/useWebWorker/index.ts
index ec3d95780b5..071bf7ecbde 100644
--- a/packages/core/useWebWorker/index.ts
+++ b/packages/core/useWebWorker/index.ts
@@ -3,7 +3,7 @@
 import type { Ref, ShallowRef } from 'vue'
 import type { ConfigurableWindow } from '../_configurable'
 import { tryOnScopeDispose } from '@vueuse/shared'
-import { ref, shallowRef } from 'vue'
+import { ref as deepRef, shallowRef } from 'vue'
 import { defaultWindow } from '../_configurable'
 
 type PostMessage = typeof Worker.prototype['postMessage']
@@ -50,7 +50,7 @@ export function useWebWorker<Data = any>(
     window = defaultWindow,
   } = options ?? {}
 
-  const data: Ref<any> = ref(null)
+  const data: Ref<any> = deepRef(null)
   const worker = shallowRef<Worker>()
 
   const post: PostMessage = (...args) => {
diff --git a/packages/core/useWebWorkerFn/demo.vue b/packages/core/useWebWorkerFn/demo.vue
index b6912df6acd..b198f93c9fc 100644
--- a/packages/core/useWebWorkerFn/demo.vue
+++ b/packages/core/useWebWorkerFn/demo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useDateFormat, useTimestamp, useWebWorkerFn } from '@vueuse/core'
-import { computed, nextTick, ref } from 'vue'
+import { computed, ref as deepRef, nextTick, shallowRef } from 'vue'
 
 function heavyTask() {
   const randomNumber = () => Math.trunc(Math.random() * 5_000_00)
@@ -14,8 +14,8 @@ const time = useTimestamp()
 const computedTime = useDateFormat(time, 'YYYY-MM-DD HH:mm:ss SSS')
 const running = computed(() => workerStatus.value === 'RUNNING')
 
-const data = ref<number[] | null>(null)
-const runner = ref('')
+const data = deepRef<number[] | null>(null)
+const runner = shallowRef('')
 
 async function baseSort() {
   data.value = null
diff --git a/packages/core/useWebWorkerFn/index.ts b/packages/core/useWebWorkerFn/index.ts
index 14026cdfd01..ba0ecbf992d 100644
--- a/packages/core/useWebWorkerFn/index.ts
+++ b/packages/core/useWebWorkerFn/index.ts
@@ -2,7 +2,7 @@
 
 import type { ConfigurableWindow } from '../_configurable'
 import { tryOnScopeDispose } from '@vueuse/shared'
-import { ref } from 'vue'
+import { ref as deepRef } from 'vue'
 import { defaultWindow } from '../_configurable'
 import createWorkerBlobUrl from './lib/createWorkerBlobUrl'
 
@@ -45,10 +45,10 @@ export function useWebWorkerFn<T extends (...fnArgs: any[]) => any>(fn: T, optio
     window = defaultWindow,
   } = options
 
-  const worker = ref<(Worker & { _url?: string }) | undefined>()
-  const workerStatus = ref<WebWorkerStatus>('PENDING')
-  const promise = ref<({ reject?: (result: ReturnType<T> | ErrorEvent) => void, resolve?: (result: ReturnType<T>) => void })>({})
-  const timeoutId = ref<number>()
+  const worker = deepRef<(Worker & { _url?: string }) | undefined>()
+  const workerStatus = deepRef<WebWorkerStatus>('PENDING')
+  const promise = deepRef<({ reject?: (result: ReturnType<T> | ErrorEvent) => void, resolve?: (result: ReturnType<T>) => void })>({})
+  const timeoutId = deepRef<number>()
 
   const workerTerminate = (status: WebWorkerStatus = 'PENDING') => {
     if (worker.value && worker.value._url && window) {
diff --git a/packages/core/useWindowFocus/demo.vue b/packages/core/useWindowFocus/demo.vue
index 16412bffaa0..3d2885b28e3 100644
--- a/packages/core/useWindowFocus/demo.vue
+++ b/packages/core/useWindowFocus/demo.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { useWindowFocus } from '@vueuse/core'
-import { ref, watch } from 'vue'
+import { ref as deepRef, watch } from 'vue'
 
 const startMessage = '💡 Click somewhere outside of the document to unfocus.'
-const message = ref(startMessage)
+const message = deepRef(startMessage)
 const focused = useWindowFocus()
 
 watch(focused, (isFocused) => {
diff --git a/packages/core/useWindowFocus/index.ts b/packages/core/useWindowFocus/index.ts
index a00a3e8d6ea..f7f2a931382 100644
--- a/packages/core/useWindowFocus/index.ts
+++ b/packages/core/useWindowFocus/index.ts
@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 import type { ConfigurableWindow } from '../_configurable'
-import { ref } from 'vue'
+import { ref as deepRef, shallowRef } from 'vue'
 import { defaultWindow } from '../_configurable'
 import { useEventListener } from '../useEventListener'
 
@@ -12,9 +12,9 @@ import { useEventListener } from '../useEventListener'
 export function useWindowFocus(options: ConfigurableWindow = {}): Ref<boolean> {
   const { window = defaultWindow } = options
   if (!window)
-    return ref(false)
+    return shallowRef(false)
 
-  const focused = ref(window.document.hasFocus())
+  const focused = deepRef(window.document.hasFocus())
 
   const listenerOptions = { passive: true }
 
diff --git a/packages/core/useWindowSize/index.ts b/packages/core/useWindowSize/index.ts
index 89c07629780..ca150155dd2 100644
--- a/packages/core/useWindowSize/index.ts
+++ b/packages/core/useWindowSize/index.ts
@@ -1,6 +1,6 @@
 import type { ConfigurableWindow } from '../_configurable'
 import { tryOnMounted } from '@vueuse/shared'
-import { ref, watch } from 'vue'
+import { ref as deepRef, watch } from 'vue'
 import { defaultWindow } from '../_configurable'
 import { useEventListener } from '../useEventListener'
 import { useMediaQuery } from '../useMediaQuery'
@@ -47,8 +47,8 @@ export function useWindowSize(options: UseWindowSizeOptions = {}) {
     type = 'inner',
   } = options
 
-  const width = ref(initialWidth)
-  const height = ref(initialHeight)
+  const width = deepRef(initialWidth)
+  const height = deepRef(initialHeight)
 
   const update = () => {
     if (window) {
diff --git a/packages/electron/package.json b/packages/electron/package.json
index 6dcecb4728e..ed47a06868a 100644
--- a/packages/electron/package.json
+++ b/packages/electron/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@vueuse/electron",
   "type": "module",
-  "version": "12.6.1",
+  "version": "12.7.0",
   "description": "Electron renderer process modules for VueUse",
   "author": "Archer Gu<https://github.com/ArcherGu>",
   "license": "MIT",
diff --git a/packages/electron/useZoomFactor/index.ts b/packages/electron/useZoomFactor/index.ts
index 218d7686582..61267343af4 100644
--- a/packages/electron/useZoomFactor/index.ts
+++ b/packages/electron/useZoomFactor/index.ts
@@ -1,7 +1,7 @@
 import type { MaybeRef } from '@vueuse/shared'
 import type { WebFrame } from 'electron'
 import type { Ref } from 'vue'
-import { isRef, ref, watch } from 'vue'
+import { ref as deepRef, isRef, watch } from 'vue'
 
 export function useZoomFactor(factor: MaybeRef<number>): Ref<number>
 export function useZoomFactor(webFrame: WebFrame, factor: MaybeRef<number>): Ref<number>
@@ -24,11 +24,11 @@ export function useZoomFactor(...args: any[]): Ref<number> {
     || typeof args[0] === 'number'
   ) {
     webFrame = window.require ? window.require('electron').webFrame : undefined
-    newFactor = args.length > 0 ? ref(args[0]) : null
+    newFactor = args.length > 0 ? deepRef(args[0]) : null
   }
   else {
     webFrame = args[0]
-    newFactor = args.length > 1 ? ref(args[1]) : null
+    newFactor = args.length > 1 ? deepRef(args[1]) : null
   }
 
   if (!webFrame)
@@ -37,7 +37,7 @@ export function useZoomFactor(...args: any[]): Ref<number> {
   if (newFactor && newFactor.value === 0)
     throw new Error('the factor must be greater than 0.0.')
 
-  const factor = ref(newFactor ?? webFrame.getZoomFactor())
+  const factor = deepRef(newFactor ?? webFrame.getZoomFactor())
 
   watch(
     factor,
diff --git a/packages/electron/useZoomLevel/index.ts b/packages/electron/useZoomLevel/index.ts
index 09489f50729..33bd8d8c7f9 100644
--- a/packages/electron/useZoomLevel/index.ts
+++ b/packages/electron/useZoomLevel/index.ts
@@ -1,7 +1,7 @@
 import type { MaybeRef } from '@vueuse/shared'
 import type { WebFrame } from 'electron'
 import type { Ref } from 'vue'
-import { isRef, ref, watch } from 'vue'
+import { ref as deepRef, isRef, watch } from 'vue'
 
 export function useZoomLevel(level: MaybeRef<number>): Ref<number>
 export function useZoomLevel(webFrame: WebFrame, level: MaybeRef<number>): Ref<number>
@@ -24,17 +24,17 @@ export function useZoomLevel(...args: any[]): Ref<number> {
     || typeof args[0] === 'number'
   ) {
     webFrame = window.require ? window.require('electron').webFrame : undefined
-    newLevel = args.length > 0 ? ref(args[0]) : null
+    newLevel = args.length > 0 ? deepRef(args[0]) : null
   }
   else {
     webFrame = args[0]
-    newLevel = args.length > 1 ? ref(args[1]) : null
+    newLevel = args.length > 1 ? deepRef(args[1]) : null
   }
 
   if (!webFrame)
     throw new Error('provide WebFrame module or enable nodeIntegration')
 
-  const level = ref(newLevel ?? webFrame.getZoomLevel())
+  const level = deepRef(newLevel ?? webFrame.getZoomLevel())
 
   watch(
     level,
diff --git a/packages/firebase/package.json b/packages/firebase/package.json
index 648d49d48a0..584d3170299 100644
--- a/packages/firebase/package.json
+++ b/packages/firebase/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@vueuse/firebase",
   "type": "module",
-  "version": "12.6.1",
+  "version": "12.7.0",
   "description": "Enables realtime bindings for Firebase",
   "author": "Anthony Fu <https://github.com/antfu>",
   "license": "MIT",
diff --git a/packages/firebase/useAuth/index.ts b/packages/firebase/useAuth/index.ts
index a4bc92a3888..94ac6799f0f 100644
--- a/packages/firebase/useAuth/index.ts
+++ b/packages/firebase/useAuth/index.ts
@@ -1,6 +1,6 @@
 import type { Auth, User } from 'firebase/auth'
 import type { ComputedRef, Ref } from 'vue'
-import { computed, ref } from 'vue'
+import { computed, ref as deepRef } from 'vue'
 
 export interface UseFirebaseAuthOptions {
   isAuthenticated: ComputedRef<boolean>
@@ -13,7 +13,7 @@ export interface UseFirebaseAuthOptions {
  * @see https://vueuse.org/useAuth
  */
 export function useAuth(auth: Auth) {
-  const user = ref<User | null>(auth.currentUser)
+  const user = deepRef<User | null>(auth.currentUser)
   const isAuthenticated = computed(() => !!user.value)
 
   auth.onIdTokenChanged(authUser => user.value = authUser)
diff --git a/packages/firebase/useFirestore/index.test.ts b/packages/firebase/useFirestore/index.test.ts
index c20ff9b8017..b93a6291aac 100644
--- a/packages/firebase/useFirestore/index.test.ts
+++ b/packages/firebase/useFirestore/index.test.ts
@@ -1,7 +1,7 @@
 import type { Firestore } from 'firebase/firestore'
 import { collection, doc } from 'firebase/firestore'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { computed, effectScope, nextTick, ref } from 'vue'
+import { computed, ref as deepRef, effectScope, nextTick, shallowRef } from 'vue'
 import { useFirestore } from './index'
 
 const dummyFirestore = {} as Firestore
@@ -95,7 +95,7 @@ describe('useFirestore', () => {
 
   it('should get reactive query data & unsubscribe previous query when re-querying', async () => {
     const queryRef = collection(dummyFirestore, 'posts')
-    const reactiveQueryRef = ref(queryRef)
+    const reactiveQueryRef = deepRef(queryRef)
     const data = useFirestore(reactiveQueryRef)
     expect(data.value).toEqual([getData(getMockSnapFromRef(reactiveQueryRef.value))])
     reactiveQueryRef.value = collection(dummyFirestore, 'todos')
@@ -105,7 +105,7 @@ describe('useFirestore', () => {
   })
 
   it('should get user data only when user id exists', async () => {
-    const userId = ref('')
+    const userId = shallowRef('')
     const queryRef = computed(() => !!userId.value && collection(dummyFirestore, `users/${userId.value}/posts`))
     const data = useFirestore(queryRef, [{ id: 'default' }])
     expect(data.value).toEqual([{ id: 'default' }])
@@ -128,7 +128,7 @@ describe('useFirestore', () => {
   it('should close when scope dispose', async () => {
     const scope = effectScope()
     let data: any
-    const userId = ref('')
+    const userId = shallowRef('')
     const queryRef = computed(() => !!userId.value && collection(dummyFirestore, `users/${userId.value}/posts`))
 
     scope.run(() => {
diff --git a/packages/firebase/useFirestore/index.ts b/packages/firebase/useFirestore/index.ts
index e3f1761efe3..a80c250e2d5 100644
--- a/packages/firebase/useFirestore/index.ts
+++ b/packages/firebase/useFirestore/index.ts
@@ -3,7 +3,7 @@ import type { DocumentData, DocumentReference, DocumentSnapshot, Query, QueryDoc
 import type { Ref } from 'vue'
 import { isDef, tryOnScopeDispose, useTimeoutFn } from '@vueuse/shared'
 import { onSnapshot } from 'firebase/firestore'
-import { computed, isRef, ref, watch } from 'vue'
+import { computed, ref as deepRef, isRef, watch } from 'vue'
 
 export interface UseFirestoreOptions {
   errorHandler?: (err: Error) => void
@@ -79,7 +79,7 @@ export function useFirestore<T extends DocumentData>(
     : computed(() => maybeDocRef)
 
   let close = () => { }
-  const data = ref(initialValue) as Ref<T | T[] | null | undefined>
+  const data = deepRef(initialValue) as Ref<T | T[] | null | undefined>
 
   watch(refOfDocRef, (docRef) => {
     close()
diff --git a/packages/firebase/useRTDB/index.ts b/packages/firebase/useRTDB/index.ts
index 31771ffff19..512342a600c 100644
--- a/packages/firebase/useRTDB/index.ts
+++ b/packages/firebase/useRTDB/index.ts
@@ -2,7 +2,7 @@ import type { DatabaseReference, DataSnapshot } from 'firebase/database'
 import type { Ref } from 'vue'
 import { tryOnScopeDispose } from '@vueuse/shared'
 import { onValue } from 'firebase/database'
-import { ref } from 'vue'
+import { ref as deepRef } from 'vue'
 
 export interface UseRTDBOptions {
   errorHandler?: (err: Error) => void
@@ -22,7 +22,7 @@ export function useRTDB<T = any>(
     errorHandler = (err: Error) => console.error(err),
     autoDispose = true,
   } = options
-  const data = ref(undefined) as Ref<T | undefined>
+  const data = deepRef(undefined) as Ref<T | undefined>
 
   function update(snapshot: DataSnapshot) {
     data.value = snapshot.val()
diff --git a/packages/guidelines.md b/packages/guidelines.md
index 161bbbb8c11..f50089f873b 100644
--- a/packages/guidelines.md
+++ b/packages/guidelines.md
@@ -12,7 +12,8 @@ You can also find some reasons for those design decisions and also some tips for
 - Import all Vue APIs from `"vue"`
 - Use `ref` instead of `reactive` whenever possible
 - Use options object as arguments whenever possible to be more flexible for future extensions.
-- Use `shallowRef` instead of `ref` when wrapping large amounts of data.
+- Prefer `shallowRef` over `ref` whenever possible
+- In case of deep reactivity, prefer explicitly named `deepRef` instead of `ref`
 - Use `configurableWindow` (etc.) when using global variables like `window` to be flexible when working with multi-windows, testing mocks, and SSR.
 - When involved with Web APIs that are not yet implemented by the browser widely, also outputs `isSupported` flag
 - When using `watch` or `watchEffect` internally, also make the `immediate` and `flush` options configurable whenever possible
diff --git a/packages/integrations/package.json b/packages/integrations/package.json
index bedee2f0059..afee302d68a 100644
--- a/packages/integrations/package.json
+++ b/packages/integrations/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@vueuse/integrations",
   "type": "module",
-  "version": "12.6.1",
+  "version": "12.7.0",
   "description": "Integration wrappers for utility libraries",
   "author": "Anthony Fu <https://github.com/antfu>",
   "license": "MIT",
diff --git a/packages/integrations/useAsyncValidator/index.test.ts b/packages/integrations/useAsyncValidator/index.test.ts
index 2c60411c99a..cdab1c43f4c 100644
--- a/packages/integrations/useAsyncValidator/index.test.ts
+++ b/packages/integrations/useAsyncValidator/index.test.ts
@@ -1,7 +1,7 @@
 import type { Rules } from 'async-validator'
 import type { Ref } from 'vue'
 import { beforeEach, describe, expect, it } from 'vitest'
-import { nextTick, ref } from 'vue'
+import { ref as deepRef, nextTick } from 'vue'
 import { useAsyncValidator } from './index'
 
 describe('useAsyncValidator', () => {
@@ -177,12 +177,12 @@ describe('useAsyncValidator', () => {
   })
 
   it('should reactive', async () => {
-    const form = ref({
+    const form = deepRef({
       name: 'jelf',
       age: 24,
     })
 
-    const rules = ref({
+    const rules = deepRef({
       name: {
         type: 'string',
         min: 5,
@@ -274,12 +274,12 @@ describe('set manual true', () => {
   })
 
   it('manual trigger validator', async () => {
-    const form = ref({
+    const form = deepRef({
       name: 'jelf',
       age: 24,
     })
 
-    const rules = ref({
+    const rules = deepRef({
       name: {
         type: 'string',
         min: 5,
diff --git a/packages/integrations/useAsyncValidator/index.ts b/packages/integrations/useAsyncValidator/index.ts
index 50532d09869..a461d3e20aa 100644
--- a/packages/integrations/useAsyncValidator/index.ts
+++ b/packages/integrations/useAsyncValidator/index.ts
@@ -3,7 +3,7 @@ import type { Rules, ValidateError, ValidateOption } from 'async-validator'
 import type { Ref } from 'vue'
 import { toRef, until } from '@vueuse/shared'
 import Schema from 'async-validator'
-import { computed, ref, shallowRef, toValue, watch } from 'vue'
+import { computed, ref as deepRef, shallowRef, toValue, watch } from 'vue'
 
 // @ts-expect-error Schema.default is exist in ssr mode
 const AsyncValidatorSchema = Schema.default || Schema
@@ -67,8 +67,8 @@ export function useAsyncValidator(
   const valueRef = toRef(value)
 
   const errorInfo = shallowRef<AsyncValidatorError | null>(null)
-  const isFinished = ref(true)
-  const pass = ref(!immediate || manual)
+  const isFinished = shallowRef(true)
+  const pass = deepRef(!immediate || manual)
   const errors = computed(() => errorInfo.value?.errors || [])
   const errorFields = computed(() => errorInfo.value?.fields || {})
 
diff --git a/packages/integrations/useAxios/index.ts b/packages/integrations/useAxios/index.ts
index 9b1aeb036f7..d457ce6a1f4 100644
--- a/packages/integrations/useAxios/index.ts
+++ b/packages/integrations/useAxios/index.ts
@@ -2,7 +2,7 @@ import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
 import type { Ref, ShallowRef } from 'vue'
 import { noop, until } from '@vueuse/shared'
 import axios, { AxiosError } from 'axios'
-import { ref, shallowRef } from 'vue'
+import { ref as deepRef, shallowRef } from 'vue'
 
 export interface UseAxiosReturn<T, R = AxiosResponse<T>, _D = any, O extends UseAxiosOptions = UseAxiosOptions<T>> {
   /**
@@ -177,10 +177,10 @@ export function useAxios<T = any, R = AxiosResponse<T>, D = any>(...args: any[])
 
   const initialData = (options as UseAxiosOptionsWithInitialData<T>).initialData
   const response = shallowRef<AxiosResponse<T>>()
-  const data = (shallow ? shallowRef : ref)<T>(initialData!) as Ref<T>
-  const isFinished = ref(false)
-  const isLoading = ref(false)
-  const isAborted = ref(false)
+  const data = (shallow ? shallowRef : deepRef)<T>(initialData!) as Ref<T>
+  const isFinished = shallowRef(false)
+  const isLoading = shallowRef(false)
+  const isAborted = shallowRef(false)
   const error = shallowRef<unknown>()
 
   let abortController: AbortController = new AbortController()
diff --git a/packages/integrations/useChangeCase/demo.vue b/packages/integrations/useChangeCase/demo.vue
index 54a9390bf21..63d81303dbb 100644
--- a/packages/integrations/useChangeCase/demo.vue
+++ b/packages/integrations/useChangeCase/demo.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import type { ChangeCaseType } from './index'
 import * as ChangeCase from 'change-case'
-import { ref } from 'vue'
+import { ref as deepRef, shallowRef } from 'vue'
 import { useChangeCase } from './index'
 
 const transforms: any = Object.keys(ChangeCase).filter(v => v.endsWith('Case'))
-const input = ref('helloWorld')
-const type = ref<ChangeCaseType>(transforms[0])
+const input = shallowRef('helloWorld')
+const type = deepRef<ChangeCaseType>(transforms[0])
 const changeCase = useChangeCase(input, type)
 </script>
 
diff --git a/packages/integrations/useChangeCase/index.test.ts b/packages/integrations/useChangeCase/index.test.ts
index 19203a1b107..6bc9549d3a9 100644
--- a/packages/integrations/useChangeCase/index.test.ts
+++ b/packages/integrations/useChangeCase/index.test.ts
@@ -1,7 +1,7 @@
 import type { Options } from 'change-case'
 import type { ChangeCaseType } from './index'
 import { describe, expect, it } from 'vitest'
-import { ref } from 'vue'
+import { ref as deepRef } from 'vue'
 import { useChangeCase } from './index'
 
 describe('useChangeCase', () => {
@@ -92,7 +92,7 @@ describe('useChangeCase', () => {
     })
 
     it(`ref ${key}`, () => {
-      const input = ref(helloWorld)
+      const input = deepRef(helloWorld)
       const changeCase = useChangeCase(input, key)
       expect(changeCase.value).toBe(obj[key].helloWorld)
       changeCase.value = vueuse
diff --git a/packages/integrations/useChangeCase/index.ts b/packages/integrations/useChangeCase/index.ts
index d5751d637af..68f088cf1bd 100644
--- a/packages/integrations/useChangeCase/index.ts
+++ b/packages/integrations/useChangeCase/index.ts
@@ -2,7 +2,7 @@ import type { MaybeRef, MaybeRefOrGetter } from '@vueuse/shared'
 import type { Options } from 'change-case'
 import type { ComputedRef, WritableComputedRef } from 'vue'
 import * as changeCase from 'change-case'
-import { computed, ref, toValue } from 'vue'
+import { computed, ref as deepRef, toValue } from 'vue'
 
 type EndsWithCase<T> = T extends `${infer _}Case` ? T : never
 type FilterKeys<T> = { [K in keyof T as K extends string ? K : never]: EndsWithCase<K> }
@@ -36,7 +36,7 @@ export function useChangeCase(input: MaybeRefOrGetter<string>, type: MaybeRefOrG
   if (typeof input === 'function')
     return computed(() => changeCaseTransforms[typeRef.value](toValue(input), toValue(options)))
 
-  const text = ref(input)
+  const text = deepRef(input)
   return computed<string>({
     get() {
       return changeCaseTransforms[typeRef.value](text.value, toValue(options))
diff --git a/packages/integrations/useCookies/index.ts b/packages/integrations/useCookies/index.ts
index 7980e1e66e8..63f7444fd1d 100644
--- a/packages/integrations/useCookies/index.ts
+++ b/packages/integrations/useCookies/index.ts
@@ -1,7 +1,7 @@
 import type { IncomingMessage } from 'node:http'
 import { tryOnScopeDispose } from '@vueuse/shared'
 import Cookie from 'universal-cookie'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 
 type RawCookies = Record<string, string>
 
@@ -40,7 +40,7 @@ export function useCookies(
   /**
    * Adds reactivity to get/getAll methods
    */
-  const touches = ref(0)
+  const touches = shallowRef(0)
 
   const onChange = () => {
     const newCookies = cookies.getAll({ doNotParse: true })
diff --git a/packages/integrations/useDrauu/demo.client.vue b/packages/integrations/useDrauu/demo.client.vue
index 5422192bfbd..9b805658a70 100644
--- a/packages/integrations/useDrauu/demo.client.vue
+++ b/packages/integrations/useDrauu/demo.client.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { toRefs } from '@vueuse/shared'
-import { ref } from 'vue'
+import { ref as deepRef } from 'vue'
 import Scrubber from '../../core/useMediaControls/components/Scrubber.vue'
 import { useDrauu } from './index'
 
-const colors = ref(['black', '#ef4444', '#22c55e', '#3b82f6'])
-const target = ref()
+const colors = deepRef(['black', '#ef4444', '#22c55e', '#3b82f6'])
+const target = deepRef()
 const { undo, redo, canUndo, canRedo, clear, brush } = useDrauu(target, {
   brush: {
     color: 'black',
diff --git a/packages/integrations/useDrauu/index.ts b/packages/integrations/useDrauu/index.ts
index 25020dc7f16..ae141f9bcf1 100644
--- a/packages/integrations/useDrauu/index.ts
+++ b/packages/integrations/useDrauu/index.ts
@@ -5,7 +5,7 @@ import type { Ref } from 'vue'
 import { createEventHook, unrefElement } from '@vueuse/core'
 import { tryOnScopeDispose } from '@vueuse/shared'
 import { createDrauu } from 'drauu'
-import { ref, watch } from 'vue'
+import { ref as deepRef, shallowRef, watch } from 'vue'
 
 export type UseDrauuOptions = Omit<Options, 'el'>
 
@@ -39,7 +39,7 @@ export function useDrauu(
   target: MaybeComputedElementRef,
   options?: UseDrauuOptions,
 ): UseDrauuReturn {
-  const drauuInstance = ref<Drauu>()
+  const drauuInstance = deepRef<Drauu>()
 
   let disposables: Fn[] = []
 
@@ -48,12 +48,12 @@ export function useDrauu(
   const onCommittedHook = createEventHook<SVGElement | undefined>()
   const onStartHook = createEventHook<void>()
   const onEndHook = createEventHook<void>()
-  const canUndo = ref(false)
-  const canRedo = ref(false)
-  const altPressed = ref(false)
-  const shiftPressed = ref(false)
+  const canUndo = shallowRef(false)
+  const canRedo = shallowRef(false)
+  const altPressed = shallowRef(false)
+  const shiftPressed = shallowRef(false)
 
-  const brush = ref<Brush>({
+  const brush = deepRef<Brush>({
     color: 'black',
     size: 3,
     arrowEnd: false,
diff --git a/packages/integrations/useFocusTrap/component.ts b/packages/integrations/useFocusTrap/component.ts
index d3583fa2c5c..c0850fd608c 100644
--- a/packages/integrations/useFocusTrap/component.ts
+++ b/packages/integrations/useFocusTrap/component.ts
@@ -3,7 +3,7 @@ import type { FocusTrap } from 'focus-trap'
 import type { UseFocusTrapOptions } from './index'
 import { unrefElement } from '@vueuse/core'
 import { createFocusTrap } from 'focus-trap'
-import { defineComponent, h, onScopeDispose, ref, watch } from 'vue'
+import { ref as deepRef, defineComponent, h, onScopeDispose, watch } from 'vue'
 
 export interface ComponentUseFocusTrapOptions extends RenderableComponent {
   options?: UseFocusTrapOptions
@@ -14,7 +14,7 @@ export const UseFocusTrap = /* #__PURE__ */ defineComponent <ComponentUseFocusTr
   props: ['as', 'options'] as unknown as undefined,
   setup(props, { slots }) {
     let trap: undefined | FocusTrap
-    const target = ref()
+    const target = deepRef()
 
     const activate = () => trap && trap.activate()
     const deactivate = () => trap && trap.deactivate()
diff --git a/packages/integrations/useFocusTrap/demo.vue b/packages/integrations/useFocusTrap/demo.vue
index 1f0afb2e2f8..e9a19bd08f8 100644
--- a/packages/integrations/useFocusTrap/demo.vue
+++ b/packages/integrations/useFocusTrap/demo.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref as deepRef } from 'vue'
 import { useFocusTrap } from './index'
 
-const target = ref()
+const target = deepRef()
 const { hasFocus, activate, deactivate } = useFocusTrap(target)
 </script>
 
diff --git a/packages/integrations/useFocusTrap/index.ts b/packages/integrations/useFocusTrap/index.ts
index b48e9ae1774..f3b24ac3ba4 100644
--- a/packages/integrations/useFocusTrap/index.ts
+++ b/packages/integrations/useFocusTrap/index.ts
@@ -5,7 +5,7 @@ import type { Ref } from 'vue'
 import { toArray, tryOnScopeDispose, unrefElement } from '@vueuse/core'
 import { notNullish } from '@vueuse/shared'
 import { createFocusTrap } from 'focus-trap'
-import { computed, ref, toValue, watch } from 'vue'
+import { computed, shallowRef, toValue, watch } from 'vue'
 
 export interface UseFocusTrapOptions extends Options {
   /**
@@ -68,8 +68,8 @@ export function useFocusTrap(
   let trap: undefined | FocusTrap
 
   const { immediate, ...focusTrapOptions } = options
-  const hasFocus = ref(false)
-  const isPaused = ref(false)
+  const hasFocus = shallowRef(false)
+  const isPaused = shallowRef(false)
 
   const activate = (opts?: ActivateOptions) => trap && trap.activate(opts)
   const deactivate = (opts?: DeactivateOptions) => trap && trap.deactivate(opts)
diff --git a/packages/integrations/useFuse/demo.vue b/packages/integrations/useFuse/demo.vue
index 52380f90c58..79c587beda6 100644
--- a/packages/integrations/useFuse/demo.vue
+++ b/packages/integrations/useFuse/demo.vue
@@ -1,6 +1,6 @@
 <script setup lang='ts'>
 import type { UseFuseOptions } from './index'
-import { computed, ref, watch } from 'vue'
+import { computed, ref as deepRef, shallowRef, watch } from 'vue'
 import { useFuse } from './index'
 
 interface DataItem {
@@ -8,7 +8,7 @@ interface DataItem {
   lastName: string
 }
 
-const data = ref<DataItem[]>([
+const data = deepRef<DataItem[]>([
   {
     firstName: 'Roslyn',
     lastName: 'Mitchell',
@@ -91,8 +91,8 @@ const data = ref<DataItem[]>([
   },
 ])
 
-const search = ref('')
-const filterBy = ref('both')
+const search = shallowRef('')
+const filterBy = shallowRef('both')
 const keys = computed(() => {
   if (filterBy.value === 'first')
     return ['firstName']
@@ -101,8 +101,8 @@ const keys = computed(() => {
   else return ['firstName', 'lastName']
 })
 
-const resultLimit = ref<number | undefined>(undefined)
-const resultLimitString = ref<string>('')
+const resultLimit = shallowRef<number | undefined>(undefined)
+const resultLimitString = shallowRef<string>('')
 watch(resultLimitString, () => {
   if (resultLimitString.value === '') {
     resultLimit.value = undefined
@@ -116,9 +116,9 @@ watch(resultLimitString, () => {
   }
 })
 
-const exactMatch = ref(false)
-const isCaseSensitive = ref(false)
-const matchAllWhenSearchEmpty = ref(true)
+const exactMatch = shallowRef(false)
+const isCaseSensitive = shallowRef(false)
+const matchAllWhenSearchEmpty = shallowRef(true)
 
 const options = computed<UseFuseOptions<DataItem>>(() => ({
   fuseOptions: {
diff --git a/packages/integrations/useFuse/index.ts b/packages/integrations/useFuse/index.ts
index 79e2a12f860..c1984c755e3 100644
--- a/packages/integrations/useFuse/index.ts
+++ b/packages/integrations/useFuse/index.ts
@@ -2,7 +2,7 @@ import type { MaybeRefOrGetter } from '@vueuse/shared'
 import type { FuseResult, IFuseOptions } from 'fuse.js'
 import type { ComputedRef } from 'vue'
 import Fuse from 'fuse.js'
-import { computed, ref, toValue, watch } from 'vue'
+import { computed, ref as deepRef, toValue, watch } from 'vue'
 
 export type FuseOptions<T> = IFuseOptions<T>
 export interface UseFuseOptions<T> {
@@ -23,7 +23,7 @@ export function useFuse<DataItem>(
     )
   }
 
-  const fuse = ref(createFuse())
+  const fuse = deepRef(createFuse())
 
   watch(
     () => toValue(options)?.fuseOptions,
diff --git a/packages/integrations/useIDBKeyval/index.ts b/packages/integrations/useIDBKeyval/index.ts
index 16fed056160..fab8d9406a9 100644
--- a/packages/integrations/useIDBKeyval/index.ts
+++ b/packages/integrations/useIDBKeyval/index.ts
@@ -2,7 +2,7 @@ import type { ConfigurableFlush, MaybeRefOrGetter, RemovableRef } from '@vueuse/
 import type { Ref } from 'vue'
 import { watchPausable } from '@vueuse/core'
 import { del, get, set, update } from 'idb-keyval'
-import { ref, shallowRef, toRaw, toValue } from 'vue'
+import { ref as deepRef, shallowRef, toRaw, toValue } from 'vue'
 
 export interface UseIDBOptions extends ConfigurableFlush {
   /**
@@ -60,8 +60,8 @@ export function useIDBKeyval<T>(
     writeDefaults = true,
   } = options
 
-  const isFinished = ref(false)
-  const data = (shallow ? shallowRef : ref)(initialValue) as Ref<T>
+  const isFinished = shallowRef(false)
+  const data = (shallow ? shallowRef : deepRef)(initialValue) as Ref<T>
 
   const rawInit: T = toValue(initialValue)
 
diff --git a/packages/integrations/useJwt/demo.vue b/packages/integrations/useJwt/demo.vue
index b1cdf995cb7..a7392848574 100644
--- a/packages/integrations/useJwt/demo.vue
+++ b/packages/integrations/useJwt/demo.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 
 import { useJwt } from './index'
 
-const encodedJwt = ref('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwiaWF0IjoxNTE2MjM5MDIyfQ.L8i6g3PfcHlioHCCPURC9pmXT7gdJpx3kOoyAfNUwCc')
+const encodedJwt = shallowRef('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwiaWF0IjoxNTE2MjM5MDIyfQ.L8i6g3PfcHlioHCCPURC9pmXT7gdJpx3kOoyAfNUwCc')
 const { header, payload } = useJwt(encodedJwt)
 </script>
 
diff --git a/packages/integrations/useJwt/index.test.ts b/packages/integrations/useJwt/index.test.ts
index 8ff6e637ac5..7f5dc734937 100644
--- a/packages/integrations/useJwt/index.test.ts
+++ b/packages/integrations/useJwt/index.test.ts
@@ -1,6 +1,6 @@
 import type { JwtHeader, JwtPayload } from 'jwt-decode'
 import { describe, expect, it, vi } from 'vitest'
-import { ref } from 'vue'
+import { ref as deepRef, shallowRef } from 'vue'
 import { useJwt } from './index'
 
 interface CustomJwtHeader extends JwtHeader {
@@ -12,7 +12,7 @@ interface CustomJwtPayload extends JwtPayload {
 }
 
 describe('useJwt', () => {
-  const encodedJwt = ref('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwiaWF0IjoxNTE2MjM5MDIyfQ.L8i6g3PfcHlioHCCPURC9pmXT7gdJpx3kOoyAfNUwCc')
+  const encodedJwt = shallowRef('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwiaWF0IjoxNTE2MjM5MDIyfQ.L8i6g3PfcHlioHCCPURC9pmXT7gdJpx3kOoyAfNUwCc')
 
   it('decoded jwt', () => {
     const { header, payload } = useJwt(encodedJwt)
@@ -25,13 +25,13 @@ describe('useJwt', () => {
   it('decode jwt error', () => {
     const onErrorSpy = vi.fn()
 
-    const { header, payload } = useJwt(ref('bad-token'), { onError: onErrorSpy })
+    const { header, payload } = useJwt(shallowRef('bad-token'), { onError: onErrorSpy })
     expect(header.value).toBe(null)
     expect(payload.value).toBe(null)
     expect(onErrorSpy).toHaveBeenCalled()
   })
 
-  const encodedCustomJwt = ref('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImZvbyI6ImJhciJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyLCJmb28iOiJiYXIifQ.S5QwvREUfgEdpB1ljG_xN6NI3HubQ79xx6J1J4dsJmg')
+  const encodedCustomJwt = shallowRef('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImZvbyI6ImJhciJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyLCJmb28iOiJiYXIifQ.S5QwvREUfgEdpB1ljG_xN6NI3HubQ79xx6J1J4dsJmg')
 
   it('decoded jwt with custom fields', () => {
     const { header, payload } = useJwt<CustomJwtPayload, CustomJwtHeader>(encodedCustomJwt)
@@ -40,7 +40,7 @@ describe('useJwt', () => {
   })
 
   it('reactivity', () => {
-    const jwt = ref(encodedJwt.value)
+    const jwt = deepRef(encodedJwt.value)
     const { header, payload } = useJwt<CustomJwtPayload, CustomJwtHeader>(jwt)
     expect(header.value?.foo).toBeUndefined()
     expect(payload.value?.foo).toBeUndefined()
diff --git a/packages/integrations/useQRCode/demo.vue b/packages/integrations/useQRCode/demo.vue
index 4773ed034ee..1470a027ca1 100644
--- a/packages/integrations/useQRCode/demo.vue
+++ b/packages/integrations/useQRCode/demo.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 import { useQRCode } from './index'
 
-const text = ref('https://vueuse.org')
+const text = shallowRef('https://vueuse.org')
 const qrcode = useQRCode(text, {
   errorCorrectionLevel: 'H',
   margin: 3,
diff --git a/packages/integrations/useQRCode/index.ts b/packages/integrations/useQRCode/index.ts
index 5600d330cf2..3584fca5d49 100644
--- a/packages/integrations/useQRCode/index.ts
+++ b/packages/integrations/useQRCode/index.ts
@@ -1,7 +1,7 @@
 import type { MaybeRefOrGetter } from '@vueuse/shared'
 import { isClient, toRef } from '@vueuse/shared'
 import QRCode from 'qrcode'
-import { ref, watch } from 'vue'
+import { shallowRef, watch } from 'vue'
 
 /**
  * Wrapper for qrcode.
@@ -15,7 +15,7 @@ export function useQRCode(
   options?: QRCode.QRCodeToDataURLOptions,
 ) {
   const src = toRef(text)
-  const result = ref('')
+  const result = shallowRef('')
 
   watch(
     src,
diff --git a/packages/integrations/useSortable/component.ts b/packages/integrations/useSortable/component.ts
index fc3265df1e8..f330876de85 100644
--- a/packages/integrations/useSortable/component.ts
+++ b/packages/integrations/useSortable/component.ts
@@ -1,7 +1,7 @@
 import type { PropType } from 'vue'
 import type { UseSortableOptions } from './index'
 import { useVModel } from '@vueuse/core'
-import { defineComponent, h, reactive, ref } from 'vue'
+import { ref as deepRef, defineComponent, h, reactive } from 'vue'
 import { useSortable } from './index'
 
 export const UseSortable = /* #__PURE__ */ defineComponent({
@@ -23,7 +23,7 @@ export const UseSortable = /* #__PURE__ */ defineComponent({
 
   setup(props, { slots }) {
     const list = useVModel(props, 'modelValue')
-    const target = ref()
+    const target = deepRef()
     const data = reactive(useSortable(target, list, props.options))
     return () => {
       if (slots.default)
diff --git a/packages/integrations/useSortable/demo.vue b/packages/integrations/useSortable/demo.vue
index 7d2aa616544..795809fa6c6 100644
--- a/packages/integrations/useSortable/demo.vue
+++ b/packages/integrations/useSortable/demo.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { ref, useTemplateRef } from 'vue'
+import { ref as deepRef, useTemplateRef } from 'vue'
 import { useSortable } from './index'
 
 const el = useTemplateRef<HTMLElement>('el')
-const list = ref([{ id: 1, name: 'a' }, { id: 2, name: 'b' }, { id: 3, name: 'c' }])
+const list = deepRef([{ id: 1, name: 'a' }, { id: 2, name: 'b' }, { id: 3, name: 'c' }])
 
 const { option } = useSortable(el, list, {
   animation: 150,
diff --git a/packages/math/createProjection/index.test.ts b/packages/math/createProjection/index.test.ts
index 246896d5efe..a9e491c966f 100644
--- a/packages/math/createProjection/index.test.ts
+++ b/packages/math/createProjection/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { ref } from 'vue'
+import { ref as deepRef, shallowRef } from 'vue'
 import { createProjection } from './index'
 
 describe('createProjection', () => {
@@ -8,15 +8,15 @@ describe('createProjection', () => {
   })
 
   it('should work with projector', () => {
-    const fromStart = ref(0)
-    const fromEnd = ref(10)
-    const toRange = ref<[number, number]>([50, 100])
+    const fromStart = shallowRef(0)
+    const fromEnd = shallowRef(10)
+    const toRange = deepRef<[number, number]>([50, 100])
 
     const useProjector = createProjection(
       () => [fromStart.value, fromEnd.value],
       toRange,
     )
-    const input = ref(0)
+    const input = shallowRef(0)
     const output = useProjector(input)
 
     expect(output.value).toBe(50)
diff --git a/packages/math/logicAnd/index.test.ts b/packages/math/logicAnd/index.test.ts
index 5ecea19f7c3..5822325deb7 100644
--- a/packages/math/logicAnd/index.test.ts
+++ b/packages/math/logicAnd/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { ref, toValue } from 'vue'
+import { shallowRef, toValue } from 'vue'
 import { logicAnd } from './index'
 
 describe('logicAnd', () => {
@@ -12,12 +12,12 @@ describe('logicAnd', () => {
   })
 
   it('returns true only when all arguments are truthy', () => {
-    expect(toValue(logicAnd(ref(true), ref(true)))).toBe(true)
-    expect(toValue(logicAnd(ref('foo'), ref(true)))).toBe(true)
-    expect(toValue(logicAnd(ref('foo'), ref(1)))).toBe(true)
+    expect(toValue(logicAnd(shallowRef(true), shallowRef(true)))).toBe(true)
+    expect(toValue(logicAnd(shallowRef('foo'), shallowRef(true)))).toBe(true)
+    expect(toValue(logicAnd(shallowRef('foo'), shallowRef(1)))).toBe(true)
 
-    expect(toValue(logicAnd(ref(true), ref(false)))).toBe(false)
-    expect(toValue(logicAnd(ref('foo'), ref(0)))).toBe(false)
+    expect(toValue(logicAnd(shallowRef(true), shallowRef(false)))).toBe(false)
+    expect(toValue(logicAnd(shallowRef('foo'), shallowRef(0)))).toBe(false)
   })
 
   it('works with values', () => {
diff --git a/packages/math/logicNot/index.test.ts b/packages/math/logicNot/index.test.ts
index 7a9781a0e5a..8372b8f47e8 100644
--- a/packages/math/logicNot/index.test.ts
+++ b/packages/math/logicNot/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { ref, toValue } from 'vue'
+import { shallowRef, toValue } from 'vue'
 import { logicNot } from './index'
 
 describe('logicNot', () => {
@@ -8,13 +8,13 @@ describe('logicNot', () => {
   })
 
   it('returns the logical complement of the given ref', () => {
-    expect(toValue(logicNot(ref(true)))).toBe(false)
-    expect(toValue(logicNot(ref('foo')))).toBe(false)
-    expect(toValue(logicNot(ref(1)))).toBe(false)
+    expect(toValue(logicNot(shallowRef(true)))).toBe(false)
+    expect(toValue(logicNot(shallowRef('foo')))).toBe(false)
+    expect(toValue(logicNot(shallowRef(1)))).toBe(false)
 
-    expect(toValue(logicNot(ref(false)))).toBe(true)
-    expect(toValue(logicNot(ref('')))).toBe(true)
-    expect(toValue(logicNot(ref(0)))).toBe(true)
+    expect(toValue(logicNot(shallowRef(false)))).toBe(true)
+    expect(toValue(logicNot(shallowRef('')))).toBe(true)
+    expect(toValue(logicNot(shallowRef(0)))).toBe(true)
   })
 
   it('returns the logical complement of the given value', () => {
diff --git a/packages/math/logicOr/index.test.ts b/packages/math/logicOr/index.test.ts
index d60d626979d..e35aff63abc 100644
--- a/packages/math/logicOr/index.test.ts
+++ b/packages/math/logicOr/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { ref, toValue } from 'vue'
+import { shallowRef, toValue } from 'vue'
 import { logicOr } from './index'
 
 describe('logicOr', () => {
@@ -12,12 +12,12 @@ describe('logicOr', () => {
   })
 
   it('returns true only when any arguments are truthy', () => {
-    expect(toValue(logicOr(ref(true), ref(true)))).toBe(true)
-    expect(toValue(logicOr(ref('foo'), ref(false)))).toBe(true)
-    expect(toValue(logicOr(ref('foo'), ref(1), ref(false)))).toBe(true)
+    expect(toValue(logicOr(shallowRef(true), shallowRef(true)))).toBe(true)
+    expect(toValue(logicOr(shallowRef('foo'), shallowRef(false)))).toBe(true)
+    expect(toValue(logicOr(shallowRef('foo'), shallowRef(1), shallowRef(false)))).toBe(true)
 
-    expect(toValue(logicOr(ref(false), ref(false)))).toBe(false)
-    expect(toValue(logicOr(ref(''), ref(0)))).toBe(false)
+    expect(toValue(logicOr(shallowRef(false), shallowRef(false)))).toBe(false)
+    expect(toValue(logicOr(shallowRef(''), shallowRef(0)))).toBe(false)
   })
 
   it('works with values', () => {
diff --git a/packages/math/package.json b/packages/math/package.json
index f49375bb852..a538460a400 100644
--- a/packages/math/package.json
+++ b/packages/math/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@vueuse/math",
   "type": "module",
-  "version": "12.6.1",
+  "version": "12.7.0",
   "description": "Math functions for VueUse",
   "author": "Anthony Fu <https://github.com/antfu>",
   "license": "MIT",
diff --git a/packages/math/useAbs/index.test.ts b/packages/math/useAbs/index.test.ts
index 6ea65a92a94..6a2b4479d35 100644
--- a/packages/math/useAbs/index.test.ts
+++ b/packages/math/useAbs/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { ref } from 'vue'
+import { ref as deepRef } from 'vue'
 import { useAbs } from './index'
 
 describe('useAbs', () => {
@@ -8,7 +8,7 @@ describe('useAbs', () => {
   })
 
   it('this should work', () => {
-    const original = ref(-1)
+    const original = deepRef(-1)
     const abs = useAbs(original)
 
     expect(abs.value).toBe(1)
@@ -24,7 +24,7 @@ describe('useAbs', () => {
   })
 
   it('getter', () => {
-    const original = ref(-1)
+    const original = deepRef(-1)
     const abs = useAbs(() => original.value)
 
     expect(abs.value).toBe(1)
diff --git a/packages/math/useAverage/index.test.ts b/packages/math/useAverage/index.test.ts
index 6f741619f3b..8ab094cfb7a 100644
--- a/packages/math/useAverage/index.test.ts
+++ b/packages/math/useAverage/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { ref } from 'vue'
+import { ref as deepRef, shallowRef } from 'vue'
 import { useAverage } from './index'
 
 describe('useAverage', () => {
@@ -8,7 +8,7 @@ describe('useAverage', () => {
   })
 
   it('should be the average', () => {
-    const arr = ref([1, 2, 3])
+    const arr = deepRef([1, 2, 3])
 
     const v = useAverage(arr)
 
@@ -19,8 +19,8 @@ describe('useAverage', () => {
   })
 
   it('should be the average when some are ref', () => {
-    const a = ref(2)
-    const arr = ref([1, a, 9])
+    const a = shallowRef(2)
+    const arr = deepRef([1, a, 9])
 
     const v = useAverage(arr)
 
@@ -31,8 +31,8 @@ describe('useAverage', () => {
   })
 
   it('should be the average when some items are getter', () => {
-    const a = ref(1)
-    const arr = ref([1, () => a.value + 1, 9])
+    const a = shallowRef(1)
+    const arr = deepRef([1, () => a.value + 1, 9])
 
     const v = useAverage(arr)
 
@@ -43,8 +43,8 @@ describe('useAverage', () => {
   })
 
   it('should be the average when the array is a getter', () => {
-    const arr = ref([1, 2, 3])
-    const last = ref(0)
+    const arr = deepRef([1, 2, 3])
+    const last = shallowRef(0)
 
     const v = useAverage(() => arr.value.concat(last.value))
 
@@ -55,8 +55,8 @@ describe('useAverage', () => {
   })
 
   it('should work with rest', () => {
-    const a = ref(1)
-    const b = ref(2)
+    const a = shallowRef(1)
+    const b = shallowRef(2)
     const sum = useAverage(a, () => b.value, 3)
     expect(sum.value).toBe(2)
     b.value = 11
diff --git a/packages/math/useCeil/index.test.ts b/packages/math/useCeil/index.test.ts
index 52d8792e140..7f32ec5a899 100644
--- a/packages/math/useCeil/index.test.ts
+++ b/packages/math/useCeil/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { ref } from 'vue'
+import { ref as deepRef } from 'vue'
 import { useCeil } from './index'
 
 describe('useCeil', () => {
@@ -7,7 +7,7 @@ describe('useCeil', () => {
     expect(useCeil).toBeDefined()
   })
   it('should work', () => {
-    const base = ref(0.95)
+    const base = deepRef(0.95)
     const result = useCeil(base)
     expect(result.value).toBe(1)
     base.value = -7.004
diff --git a/packages/math/useClamp/demo.vue b/packages/math/useClamp/demo.vue
index d7cb32c642d..56b91a351a6 100644
--- a/packages/math/useClamp/demo.vue
+++ b/packages/math/useClamp/demo.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { useClamp } from '@vueuse/math'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 
-const min = ref(0)
-const max = ref(10)
+const min = shallowRef(0)
+const max = shallowRef(10)
 
 const value = useClamp(0, min, max)
 </script>
diff --git a/packages/math/useClamp/index.test.ts b/packages/math/useClamp/index.test.ts
index 3ffad6b8693..abe62695b38 100644
--- a/packages/math/useClamp/index.test.ts
+++ b/packages/math/useClamp/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { computed, isReadonly, ref } from 'vue'
+import { computed, isReadonly, shallowRef } from 'vue'
 import { useClamp } from './index'
 
 describe('useClamp', () => {
@@ -13,9 +13,9 @@ describe('useClamp', () => {
   })
 
   it('should be max', () => {
-    const value = ref(10)
-    const min = ref(0)
-    const max = ref(100)
+    const value = shallowRef(10)
+    const min = shallowRef(0)
+    const max = shallowRef(100)
 
     const v = useClamp(value, min, max)
 
@@ -32,9 +32,9 @@ describe('useClamp', () => {
   })
 
   it('should be min', () => {
-    const value = ref(10)
-    const min = ref(0)
-    const max = ref(100)
+    const value = shallowRef(10)
+    const min = shallowRef(0)
+    const max = shallowRef(100)
 
     const v = useClamp(value, min, max)
 
@@ -52,10 +52,10 @@ describe('useClamp', () => {
   })
 
   it('should work with computed', () => {
-    const baseRef = ref(10)
+    const baseRef = shallowRef(10)
     const value = computed(() => baseRef.value)
-    const min = ref(0)
-    const max = ref(100)
+    const min = shallowRef(0)
+    const max = shallowRef(100)
 
     const v = useClamp(value, min, max)
 
@@ -71,10 +71,10 @@ describe('useClamp', () => {
   })
 
   it('should work with function', () => {
-    const baseRef = ref(10)
+    const baseRef = shallowRef(10)
     const value = () => baseRef.value
-    const min = ref(0)
-    const max = ref(100)
+    const min = shallowRef(0)
+    const max = shallowRef(100)
 
     const v = useClamp(value, min, max)
 
diff --git a/packages/math/useClamp/index.ts b/packages/math/useClamp/index.ts
index ed85e96fa66..d4930591b7c 100644
--- a/packages/math/useClamp/index.ts
+++ b/packages/math/useClamp/index.ts
@@ -1,7 +1,7 @@
 import type { MaybeRefOrGetter, ReadonlyRefOrGetter } from '@vueuse/shared'
 import type { ComputedRef, Ref } from 'vue'
 import { clamp } from '@vueuse/shared'
-import { computed, isReadonly, ref, toValue } from 'vue'
+import { computed, ref as deepRef, isReadonly, toValue } from 'vue'
 
 export function useClamp(
   value: ReadonlyRefOrGetter<number>,
@@ -27,7 +27,7 @@ export function useClamp(value: MaybeRefOrGetter<number>, min: MaybeRefOrGetter<
   if (typeof value === 'function' || isReadonly(value))
     return computed(() => clamp(toValue(value), toValue(min), toValue(max)))
 
-  const _value = ref(value)
+  const _value = deepRef(value)
   return computed<number>({
     get() {
       return _value.value = clamp(_value.value, toValue(min), toValue(max))
diff --git a/packages/math/useFloor/index.test.ts b/packages/math/useFloor/index.test.ts
index acc054e01b5..5b49ba4ade3 100644
--- a/packages/math/useFloor/index.test.ts
+++ b/packages/math/useFloor/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { ref } from 'vue'
+import { ref as deepRef } from 'vue'
 import { useFloor } from './index'
 
 describe('useFloor', () => {
@@ -7,7 +7,7 @@ describe('useFloor', () => {
     expect(useFloor).toBeDefined()
   })
   it('should work', () => {
-    const base = ref(45.95)
+    const base = deepRef(45.95)
     const result = useFloor(base)
     expect(result.value).toBe(45)
     base.value = -45.05
diff --git a/packages/math/useMath/index.test.ts b/packages/math/useMath/index.test.ts
index a198dee6713..89b4cb22651 100644
--- a/packages/math/useMath/index.test.ts
+++ b/packages/math/useMath/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 import { useMath } from './index'
 
 describe('useMath', () => {
@@ -13,13 +13,13 @@ describe('useMath', () => {
   })
 
   it('should accept refs', () => {
-    const base = ref(2)
-    const exponent = ref(3)
+    const base = shallowRef(2)
+    const exponent = shallowRef(3)
     const result = useMath('pow', base, exponent)
 
     expect(result.value).toBe(8)
 
-    const num = ref(4)
+    const num = shallowRef(4)
     const root = useMath('sqrt', num)
 
     expect(root.value).toBe(2)
diff --git a/packages/math/useMax/index.test.ts b/packages/math/useMax/index.test.ts
index 5be0fd321d1..6e613fadcf1 100644
--- a/packages/math/useMax/index.test.ts
+++ b/packages/math/useMax/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 import { useMax } from './index'
 
 describe('useMax', () => {
@@ -13,9 +13,9 @@ describe('useMax', () => {
   })
 
   it('should accept refs', () => {
-    const value1 = ref(10)
-    const value2 = ref(100)
-    const value3 = ref(1000)
+    const value1 = shallowRef(10)
+    const value2 = shallowRef(100)
+    const value3 = shallowRef(1000)
 
     const v = useMax(value1, value2, value3)
     expect(v.value).toBe(1000)
@@ -32,7 +32,7 @@ describe('useMax', () => {
 
   it('should accept numbers and refs', () => {
     const value1 = 10
-    const value2 = ref(100)
+    const value2 = shallowRef(100)
 
     const v = useMax(50, value1, value2)
 
diff --git a/packages/math/useMin/index.test.ts b/packages/math/useMin/index.test.ts
index 20be08a1fe3..078f00e302d 100644
--- a/packages/math/useMin/index.test.ts
+++ b/packages/math/useMin/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 import { useMin } from './index'
 
 describe('useMin', () => {
@@ -13,9 +13,9 @@ describe('useMin', () => {
   })
 
   it('should accept refs', () => {
-    const value1 = ref(10)
-    const value2 = ref(100)
-    const value3 = ref(1000)
+    const value1 = shallowRef(10)
+    const value2 = shallowRef(100)
+    const value3 = shallowRef(1000)
 
     const v = useMin(value1, value2, value3)
     expect(v.value).toBe(10)
@@ -32,7 +32,7 @@ describe('useMin', () => {
 
   it('should accept numbers and refs', () => {
     const value1 = 10
-    const value2 = ref(100)
+    const value2 = shallowRef(100)
 
     const v = useMin(50, value1, value2)
 
diff --git a/packages/math/usePrecision/index.test.ts b/packages/math/usePrecision/index.test.ts
index 9d7b63dd876..bda1a4e30a8 100644
--- a/packages/math/usePrecision/index.test.ts
+++ b/packages/math/usePrecision/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { ref } from 'vue'
+import { ref as deepRef } from 'vue'
 import { usePrecision } from './index'
 
 describe('usePrecision', () => {
@@ -7,21 +7,21 @@ describe('usePrecision', () => {
     expect(usePrecision).toBeDefined()
   })
   it('should work', () => {
-    const base = ref(45.125)
+    const base = deepRef(45.125)
     const result = usePrecision(base, 2)
     expect(result.value).toBe(45.13)
     base.value = -45.155
     expect(result.value).toBe(-45.15)
   })
   it('out ceil should work', () => {
-    const base = ref(45.125)
+    const base = deepRef(45.125)
     const result = usePrecision(base, 2, { math: 'ceil' })
     expect(result.value).toMatchInlineSnapshot('45.13')
     base.value = -45.151
     expect(result.value).toMatchInlineSnapshot('-45.15')
   })
   it('out floor should work', () => {
-    const base = ref(45.129)
+    const base = deepRef(45.129)
     const result = usePrecision(base, 2, { math: 'floor' })
     expect(result.value).toMatchInlineSnapshot('45.12')
     base.value = -45.159
diff --git a/packages/math/useProjection/demo.vue b/packages/math/useProjection/demo.vue
index 7bd22394a0d..7c33518f9fa 100644
--- a/packages/math/useProjection/demo.vue
+++ b/packages/math/useProjection/demo.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref as deepRef, shallowRef } from 'vue'
 import { useProjection } from './index'
 
-const from = ref<[number, number]>([0, 10])
-const to = ref<[number, number]>([10, 100])
-const input = ref(0)
+const from = deepRef<[number, number]>([0, 10])
+const to = deepRef<[number, number]>([10, 100])
+const input = shallowRef(0)
 
 const output = useProjection(input, from, to)
 </script>
diff --git a/packages/math/useProjection/index.test.ts b/packages/math/useProjection/index.test.ts
index 5908a119db2..2a7970e5db2 100644
--- a/packages/math/useProjection/index.test.ts
+++ b/packages/math/useProjection/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { isRef, ref } from 'vue'
+import { isRef, shallowRef } from 'vue'
 import { useProjection } from './index'
 
 describe('useProjection', () => {
@@ -8,7 +8,7 @@ describe('useProjection', () => {
   })
 
   it('returns a ref', () => {
-    expect(isRef(useProjection(ref(5), [0, 10], [0, 100]))).toBe(true)
+    expect(isRef(useProjection(shallowRef(5), [0, 10], [0, 100]))).toBe(true)
   })
 
   it('projects correctly', () => {
@@ -18,7 +18,7 @@ describe('useProjection', () => {
   })
 
   it('is reactive', () => {
-    const inputRef = ref(5)
+    const inputRef = shallowRef(5)
     const projection = useProjection(inputRef, [0, 10], [0, 100])
     expect(isRef(projection)).toBe(true)
 
diff --git a/packages/math/useRound/index.test.ts b/packages/math/useRound/index.test.ts
index bc0f0cec027..a520b77381b 100644
--- a/packages/math/useRound/index.test.ts
+++ b/packages/math/useRound/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 import { useRound } from './index'
 
 describe('useRound', () => {
@@ -7,7 +7,7 @@ describe('useRound', () => {
     expect(useRound).toBeDefined()
   })
   it('should work', () => {
-    const base = ref(20.49)
+    const base = shallowRef(20.49)
     const result = useRound(base)
     expect(result.value).toBe(20)
     base.value = -20.51
diff --git a/packages/math/useSum/index.test.ts b/packages/math/useSum/index.test.ts
index e29fa9ec950..0ce672ac385 100644
--- a/packages/math/useSum/index.test.ts
+++ b/packages/math/useSum/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { ref } from 'vue'
+import { ref as deepRef, shallowRef } from 'vue'
 import { useSum } from './index'
 
 describe('useSum', () => {
@@ -8,7 +8,7 @@ describe('useSum', () => {
   })
 
   it('array usage', () => {
-    const array = ref([1, 2, 3, 4])
+    const array = deepRef([1, 2, 3, 4])
     const sum = useSum(array)
     expect(sum.value).toBe(10)
     array.value = [-1, -2, 3, 4]
@@ -16,8 +16,8 @@ describe('useSum', () => {
   })
 
   it('rest usage', () => {
-    const a = ref(1)
-    const b = ref(2)
+    const a = shallowRef(1)
+    const b = shallowRef(2)
     const sum = useSum(a, () => b.value, 3)
     expect(sum.value).toBe(6)
     b.value = 3
diff --git a/packages/math/useTrunc/index.test.ts b/packages/math/useTrunc/index.test.ts
index b98dd3c457a..4899d83a547 100644
--- a/packages/math/useTrunc/index.test.ts
+++ b/packages/math/useTrunc/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { ref } from 'vue'
+import { ref as deepRef } from 'vue'
 import { useTrunc } from './index'
 
 // Returns:
@@ -19,7 +19,7 @@ describe('useTrunk', () => {
     expect(useTrunc).toBeDefined()
   })
   it('should work', () => {
-    const base = ref(1.95)
+    const base = deepRef(1.95)
     const result = useTrunc(base)
     expect(result.value).toBe(1)
     base.value = -7.004
diff --git a/packages/metadata/package.json b/packages/metadata/package.json
index 95e1a580e5e..e782850f4ef 100644
--- a/packages/metadata/package.json
+++ b/packages/metadata/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@vueuse/metadata",
   "type": "module",
-  "version": "12.6.1",
+  "version": "12.7.0",
   "description": "Metadata for VueUse functions",
   "author": "Anthony Fu <https://github.com/antfu>",
   "license": "MIT",
diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json
index ee25709e88f..79addb87b0e 100644
--- a/packages/nuxt/package.json
+++ b/packages/nuxt/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@vueuse/nuxt",
   "type": "module",
-  "version": "12.6.1",
+  "version": "12.7.0",
   "description": "VueUse Nuxt Module",
   "author": "Anthony Fu <https://github.com/antfu>",
   "license": "MIT",
diff --git a/packages/router/package.json b/packages/router/package.json
index ad99a5d3085..8f7632e251b 100644
--- a/packages/router/package.json
+++ b/packages/router/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@vueuse/router",
   "type": "module",
-  "version": "12.6.1",
+  "version": "12.7.0",
   "description": "Utilities for vue-router",
   "author": "Anthony Fu <https://github.com/antfu>",
   "license": "MIT",
diff --git a/packages/router/useRouteHash/index.test.ts b/packages/router/useRouteHash/index.test.ts
index 8ed7c492c6c..ddf49a190a5 100644
--- a/packages/router/useRouteHash/index.test.ts
+++ b/packages/router/useRouteHash/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from 'vitest'
-import { computed, nextTick, reactive, ref, watch } from 'vue'
+import { computed, nextTick, reactive, shallowRef, watch } from 'vue'
 import { useRouteHash } from './index'
 
 describe('useRouteHash', () => {
@@ -100,7 +100,7 @@ describe('useRouteHash', () => {
     let route = getRoute()
     const router = { replace: (r: any) => route = r } as any
 
-    const defaultTarget = ref('foo')
+    const defaultTarget = shallowRef('foo')
 
     const target = useRouteHash(defaultTarget, { route, router })
 
diff --git a/packages/router/useRouteParams/index.test.ts b/packages/router/useRouteParams/index.test.ts
index 6f8cccd016b..e88c7e4422f 100644
--- a/packages/router/useRouteParams/index.test.ts
+++ b/packages/router/useRouteParams/index.test.ts
@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 import { describe, expect, it, vi } from 'vitest'
-import { computed, effectScope, nextTick, reactive, ref, watch } from 'vue'
+import { computed, ref as deepRef, effectScope, nextTick, reactive, shallowRef, watch } from 'vue'
 import { useRouteParams } from './index'
 
 describe('useRouteParams', () => {
@@ -169,10 +169,10 @@ describe('useRouteParams', () => {
     const scopeA = effectScope()
     const scopeB = effectScope()
 
-    let page: Ref<any> = ref(null)
-    let lang: Ref<any> = ref(null)
-    let code: Ref<any> = ref(null)
-    let slug: Ref<any> = ref(null)
+    let page: Ref<any> = deepRef(null)
+    let lang: Ref<any> = deepRef(null)
+    let code: Ref<any> = deepRef(null)
+    let slug: Ref<any> = deepRef(null)
 
     await scopeA.run(async () => {
       page = useRouteParams('page', null, { route, router })
@@ -228,12 +228,12 @@ describe('useRouteParams', () => {
     route.params.page = 2
 
     const defaultPage = 'DEFAULT_PAGE'
-    let page1: Ref<any> = ref(null)
+    let page1: Ref<any> = deepRef(null)
     await scopeA.run(async () => {
       page1 = useRouteParams('page', defaultPage, { route, router })
     })
 
-    let page2: Ref<any> = ref(null)
+    let page2: Ref<any> = deepRef(null)
     await scopeB.run(async () => {
       page2 = useRouteParams('page', defaultPage, { route, router })
     })
@@ -344,7 +344,7 @@ describe('useRouteParams', () => {
     let route = getRoute()
     const router = { replace: (r: any) => route = r } as any
 
-    const defaultPage = ref(1)
+    const defaultPage = shallowRef(1)
     const defaultLang = () => 'pt-BR'
 
     const page: Ref<any> = useRouteParams('page', defaultPage, { route, router })
diff --git a/packages/router/useRouteQuery/index.test.ts b/packages/router/useRouteQuery/index.test.ts
index b1636f1e4fd..ef8d393d4e7 100644
--- a/packages/router/useRouteQuery/index.test.ts
+++ b/packages/router/useRouteQuery/index.test.ts
@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 import { describe, expect, it, vi } from 'vitest'
-import { computed, effectScope, nextTick, reactive, ref, toValue, watch } from 'vue'
+import { computed, ref as deepRef, effectScope, nextTick, reactive, shallowRef, toValue, watch } from 'vue'
 import { useRouteQuery } from './index'
 
 describe('useRouteQuery', () => {
@@ -157,10 +157,10 @@ describe('useRouteQuery', () => {
     const scopeA = effectScope()
     const scopeB = effectScope()
 
-    let page: Ref<any> = ref(null)
-    let lang: Ref<any> = ref(null)
-    let code: Ref<any> = ref(null)
-    let search: Ref<any> = ref(null)
+    let page: Ref<any> = deepRef(null)
+    let lang: Ref<any> = deepRef(null)
+    let code: Ref<any> = deepRef(null)
+    let search: Ref<any> = deepRef(null)
 
     await scopeA.run(async () => {
       page = useRouteQuery('page', null, { route, router })
@@ -215,12 +215,12 @@ describe('useRouteQuery', () => {
     route.query.page = 2
 
     const defaultPage = 'DEFAULT_PAGE'
-    let page1: Ref<any> = ref(null)
+    let page1: Ref<any> = deepRef(null)
     await scopeA.run(async () => {
       page1 = useRouteQuery('page', defaultPage, { route, router })
     })
 
-    let page2: Ref<any> = ref(null)
+    let page2: Ref<any> = deepRef(null)
     await scopeB.run(async () => {
       page2 = useRouteQuery('page', defaultPage, { route, router })
     })
@@ -374,7 +374,7 @@ describe('useRouteQuery', () => {
     let route = getRoute()
     const router = { replace: (r: any) => route = r } as any
 
-    const defaultPage = ref(1)
+    const defaultPage = shallowRef(1)
     const defaultLang = () => 'pt-BR'
 
     const page: Ref<any> = useRouteQuery('page', defaultPage, { route, router })
diff --git a/packages/rxjs/from/_demo.vue b/packages/rxjs/from/_demo.vue
index def4af660c3..bef6b61c2f5 100644
--- a/packages/rxjs/from/_demo.vue
+++ b/packages/rxjs/from/_demo.vue
@@ -7,13 +7,13 @@ import {
   takeUntil,
   withLatestFrom,
 } from 'rxjs/operators'
-import { ref } from 'vue'
+import { ref as deepRef, shallowRef } from 'vue'
 import { toObserver } from '../toObserver'
 import { useSubscription } from '../useSubscription'
 import { from, fromEvent } from './index'
 
-const count = ref(0)
-const button = ref<HTMLButtonElement | null>(null)
+const count = shallowRef(0)
+const button = deepRef<HTMLButtonElement | null>(null)
 
 useSubscription(
   interval(1000)
diff --git a/packages/rxjs/package.json b/packages/rxjs/package.json
index 4e2258e46f1..38e28fdaff2 100644
--- a/packages/rxjs/package.json
+++ b/packages/rxjs/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@vueuse/rxjs",
   "type": "module",
-  "version": "12.6.1",
+  "version": "12.7.0",
   "description": "Enables RxJS reactive functions in Vue",
   "author": "Anthony Fu <https://github.com/antfu>",
   "license": "MIT",
diff --git a/packages/rxjs/toObserver/_demo.vue b/packages/rxjs/toObserver/_demo.vue
index 0f0368681cb..c8f1e4658b8 100644
--- a/packages/rxjs/toObserver/_demo.vue
+++ b/packages/rxjs/toObserver/_demo.vue
@@ -8,13 +8,13 @@ import {
   takeUntil,
   withLatestFrom,
 } from 'rxjs/operators'
-import { ref } from 'vue'
+import { ref as deepRef, shallowRef } from 'vue'
 import { from, fromEvent } from '../from'
 import { useSubscription } from '../useSubscription'
 import { toObserver } from './index'
 
-const count = ref(0)
-const button = ref<HTMLButtonElement | null>(null)
+const count = shallowRef(0)
+const button = deepRef<HTMLButtonElement | null>(null)
 
 useSubscription(
   interval(1000)
diff --git a/packages/rxjs/useExtractedObservable/_demo.vue b/packages/rxjs/useExtractedObservable/_demo.vue
index 65ba9f52c01..6a1a8414a12 100644
--- a/packages/rxjs/useExtractedObservable/_demo.vue
+++ b/packages/rxjs/useExtractedObservable/_demo.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { interval } from 'rxjs'
 import { mapTo, scan, startWith } from 'rxjs/operators'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 import { useExtractedObservable } from './index'
 
-const start = ref(0)
+const start = shallowRef(0)
 
 const count = useExtractedObservable(
   start,
diff --git a/packages/rxjs/useExtractedObservable/index.test.ts b/packages/rxjs/useExtractedObservable/index.test.ts
index 8fb28de7fd8..33085288196 100644
--- a/packages/rxjs/useExtractedObservable/index.test.ts
+++ b/packages/rxjs/useExtractedObservable/index.test.ts
@@ -1,7 +1,7 @@
 import { BehaviorSubject, of, Subject } from 'rxjs'
 import { delay, endWith, tap } from 'rxjs/operators'
 import { describe, expect, it, vi } from 'vitest'
-import { nextTick, reactive, ref } from 'vue'
+import { ref as deepRef, nextTick, reactive, shallowRef } from 'vue'
 import { useExtractedObservable } from './index'
 
 describe('useExtractedObservable', () => {
@@ -9,7 +9,7 @@ describe('useExtractedObservable', () => {
     it('should call the extractor immediately', () => {
       const obs = new Subject<number>()
 
-      const last = ref(42)
+      const last = shallowRef(42)
 
       const extractor = vi.fn((lastValue: number) => obs.pipe(endWith(lastValue)))
 
@@ -25,7 +25,7 @@ describe('useExtractedObservable', () => {
       expect.hasAssertions()
       const obs = new Subject<number>()
 
-      const last = ref(42)
+      const last = shallowRef(42)
 
       const refObs = useExtractedObservable(last, lastValue => obs.pipe(endWith(lastValue)))
 
@@ -44,7 +44,7 @@ describe('useExtractedObservable', () => {
       expect.hasAssertions()
       const obs = new Subject<number>()
 
-      const last = ref(42)
+      const last = shallowRef(42)
 
       const refObs = useExtractedObservable(last, lastValue => obs.pipe(endWith(lastValue)), {
         initialValue: 13,
@@ -63,7 +63,7 @@ describe('useExtractedObservable', () => {
       expect.hasAssertions()
       const obs = new BehaviorSubject(16)
 
-      const last = ref(42)
+      const last = shallowRef(42)
 
       const refObs = useExtractedObservable(last, () => obs, {
         initialValue: 13,
@@ -76,7 +76,7 @@ describe('useExtractedObservable', () => {
   describe('when onError is provided', () => {
     it('calls onError when an observable emits an error', async () => {
       expect.hasAssertions()
-      const re = ref(0)
+      const re = shallowRef(0)
       const error = new Error('Odd number')
 
       const extractor = (num: number) => of(num).pipe(
@@ -105,7 +105,7 @@ describe('useExtractedObservable', () => {
     it('doesn\'t call onError when the observable doesn\'t emit an error', async () => {
       expect.hasAssertions()
 
-      const re = ref([1, 2])
+      const re = deepRef([1, 2])
       const onError = vi.fn()
 
       /* const obsRef = */ useExtractedObservable(re, (arr: unknown[]) => of(...arr), {
@@ -126,7 +126,7 @@ describe('useExtractedObservable', () => {
     it('calls onComplete when an observable completes', async () => {
       expect.hasAssertions()
 
-      const re = ref()
+      const re = deepRef()
       const extractor = (args: unknown[]) => of(...args)
       const onComplete = vi.fn()
 
@@ -151,7 +151,7 @@ describe('useExtractedObservable', () => {
       vi.useFakeTimers()
       expect.hasAssertions()
 
-      const re = ref([13, 23, 420])
+      const re = deepRef([13, 23, 420])
       const extractor = (arr: unknown[]) => of(...arr).pipe(
         delay(1000),
       )
@@ -176,7 +176,7 @@ describe('useExtractedObservable', () => {
       xyz: 'abc',
     })
 
-    const re = ref('def')
+    const re = shallowRef('def')
 
     const extractor = ([abc, def]: [string, string]) => of(`${abc}${def}`)
 
diff --git a/packages/rxjs/useObservable/index.ts b/packages/rxjs/useObservable/index.ts
index 2a6c4347ec1..9648e7bab31 100644
--- a/packages/rxjs/useObservable/index.ts
+++ b/packages/rxjs/useObservable/index.ts
@@ -1,7 +1,7 @@
 import type { Observable } from 'rxjs'
 import type { Ref, UnwrapRef } from 'vue'
 import { tryOnScopeDispose } from '@vueuse/shared'
-import { ref } from 'vue'
+import { ref as deepRef } from 'vue'
 
 export interface UseObservableOptions<I> {
   onError?: (err: any) => void
@@ -15,7 +15,7 @@ export function useObservable<H, I = undefined>(
   observable: Observable<H>,
   options?: UseObservableOptions<I | undefined>,
 ): Readonly<Ref<H | I>> {
-  const value = ref<H | I | undefined>(options?.initialValue)
+  const value = deepRef<H | I | undefined>(options?.initialValue)
   const subscription = observable.subscribe({
     next: val => (value.value = (val as UnwrapRef<H>)),
     error: options?.onError,
diff --git a/packages/rxjs/useSubject/index.ts b/packages/rxjs/useSubject/index.ts
index b9e4089709c..6b66bdf77b3 100644
--- a/packages/rxjs/useSubject/index.ts
+++ b/packages/rxjs/useSubject/index.ts
@@ -3,7 +3,7 @@ import type { Ref } from 'vue'
 import type { UseObservableOptions } from '../useObservable'
 import { tryOnScopeDispose } from '@vueuse/shared'
 import { BehaviorSubject } from 'rxjs'
-import { ref, watch } from 'vue'
+import { ref as deepRef, watch } from 'vue'
 
 export interface UseSubjectOptions<I = undefined> extends Omit<UseObservableOptions<I>, 'initialValue'> {
 }
@@ -11,7 +11,7 @@ export interface UseSubjectOptions<I = undefined> extends Omit<UseObservableOpti
 export function useSubject<H>(subject: BehaviorSubject<H>, options?: UseSubjectOptions): Ref<H>
 export function useSubject<H>(subject: Subject<H>, options?: UseSubjectOptions): Ref<H | undefined>
 export function useSubject<H>(subject: Subject<H>, options?: UseSubjectOptions) {
-  const value = ref(
+  const value = deepRef(
     subject instanceof BehaviorSubject
       ? subject.value
       : undefined,
diff --git a/packages/rxjs/useSubscription/_demo.vue b/packages/rxjs/useSubscription/_demo.vue
index 18f97ab4e29..7570d786274 100644
--- a/packages/rxjs/useSubscription/_demo.vue
+++ b/packages/rxjs/useSubscription/_demo.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { interval } from 'rxjs'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 import { useSubscription } from './index'
 
-const count = ref(0)
+const count = shallowRef(0)
 useSubscription(
   interval(1000)
     .subscribe(() => {
diff --git a/packages/rxjs/watchExtractedObservable/_demo.vue b/packages/rxjs/watchExtractedObservable/_demo.vue
index a09f8dd0397..6ffdd5af2a0 100644
--- a/packages/rxjs/watchExtractedObservable/_demo.vue
+++ b/packages/rxjs/watchExtractedObservable/_demo.vue
@@ -2,7 +2,7 @@
 import type { Observable } from 'rxjs'
 import { fromEvent } from 'rxjs'
 import { map, skip, tap } from 'rxjs/operators'
-import { computed, reactive, ref } from 'vue'
+import { computed, ref as deepRef, reactive } from 'vue'
 import { watchExtractedObservable } from './index'
 
 class AudioPlayer {
@@ -61,7 +61,7 @@ class AudioPlayer {
   }
 }
 
-const audio = ref<HTMLAudioElement>()
+const audio = deepRef<HTMLAudioElement>()
 const player = computed(() => audio.value ? new AudioPlayer(audio.value) : null)
 
 const state = reactive({
diff --git a/packages/rxjs/watchExtractedObservable/index.test.ts b/packages/rxjs/watchExtractedObservable/index.test.ts
index b228a107745..704563d49f4 100644
--- a/packages/rxjs/watchExtractedObservable/index.test.ts
+++ b/packages/rxjs/watchExtractedObservable/index.test.ts
@@ -4,7 +4,7 @@ import type { ComputedRef, Ref } from 'vue'
 import { BehaviorSubject, of } from 'rxjs'
 import { delay, map, tap } from 'rxjs/operators'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { computed, nextTick, reactive, ref } from 'vue'
+import { computed, ref as deepRef, nextTick, reactive, shallowRef } from 'vue'
 import { watchExtractedObservable } from './index'
 
 class TestWrapper {
@@ -27,7 +27,7 @@ describe('watchExtractedObservable', () => {
     let callback: MockedFunction<(num: number) => void>
 
     beforeEach(() => {
-      numRef = ref<number>()
+      numRef = deepRef<number>()
       obj = computed(() => typeof numRef.value == 'number' ? new TestWrapper(numRef.value) : null)
       extractor = vi.fn().mockImplementation((wrapper: TestWrapper) => wrapper.obs$)
       callback = vi.fn()
@@ -64,7 +64,7 @@ describe('watchExtractedObservable', () => {
     it('calls onError when an observable emits an error', async () => {
       expect.hasAssertions()
 
-      const re = ref(0)
+      const re = shallowRef(0)
       const error = new Error('Odd number')
 
       const extractor = (num: number) => of(num).pipe(
@@ -100,7 +100,7 @@ describe('watchExtractedObservable', () => {
     it('doesn\'t call onError when the observable doesn\'t emit an error', async () => {
       expect.hasAssertions()
 
-      const re = ref([1, 2])
+      const re = deepRef([1, 2])
       const callback = vi.fn()
       const onError = vi.fn()
 
@@ -129,7 +129,7 @@ describe('watchExtractedObservable', () => {
 
   describe('when onComplete is provided', () => {
     it('calls onComplete when an observable completes', async () => {
-      const re = ref([1, 2])
+      const re = deepRef([1, 2])
       const extractor = (args: unknown[]) => of(...args)
       const callback = vi.fn()
       const onComplete = vi.fn()
@@ -162,7 +162,7 @@ describe('watchExtractedObservable', () => {
       vi.useFakeTimers()
       expect.hasAssertions()
 
-      const re = ref([42, 23, 420])
+      const re = deepRef([42, 23, 420])
       const extractor = (arr: unknown[]) => of(...arr).pipe(
         delay(1000),
         map(() => 42),
@@ -191,7 +191,7 @@ describe('watchExtractedObservable', () => {
       xyz: 'abc',
     })
 
-    const re = ref('def')
+    const re = shallowRef('def')
 
     const extractor = ([abc, def]: [string, string]) => of([abc, def])
     const callback = vi.fn(() => {})
diff --git a/packages/shared/computedEager/demo.vue b/packages/shared/computedEager/demo.vue
index eaee857cb4e..c9e5278fd8a 100644
--- a/packages/shared/computedEager/demo.vue
+++ b/packages/shared/computedEager/demo.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 import EagerDemo from './demo/EagerDemo.vue'
 import LazyDemo from './demo/LazyDemo.vue'
 import { count } from './demo/state'
 
-const lazyRenders = ref(0)
-const eagerRenders = ref(0)
+const lazyRenders = shallowRef(0)
+const eagerRenders = shallowRef(0)
 </script>
 
 <template>
diff --git a/packages/shared/computedEager/demo/state.ts b/packages/shared/computedEager/demo/state.ts
index 568680b8392..558ee007c60 100644
--- a/packages/shared/computedEager/demo/state.ts
+++ b/packages/shared/computedEager/demo/state.ts
@@ -1,3 +1,3 @@
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 
-export const count = ref(0)
+export const count = shallowRef(0)
diff --git a/packages/shared/computedEager/index.test.ts b/packages/shared/computedEager/index.test.ts
index 76467996809..a27a39cbcd5 100644
--- a/packages/shared/computedEager/index.test.ts
+++ b/packages/shared/computedEager/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from 'vitest'
-import { computed, ref, watch } from 'vue'
+import { computed, shallowRef, watch } from 'vue'
 import { nextTwoTick } from '../../.test'
 import { computedEager } from './index'
 
@@ -9,7 +9,7 @@ describe('computedEager', () => {
   })
 
   it('should work', async () => {
-    const foo = ref(0)
+    const foo = shallowRef(0)
 
     const plusOneComputed = computed(() => {
       return foo.value + 1
@@ -46,7 +46,7 @@ describe('computedEager', () => {
   })
 
   it('should not trigger collect change if result is not changed', async () => {
-    const foo = ref(1)
+    const foo = shallowRef(1)
 
     const isOddComputed = computed(() => {
       return foo.value % 2 === 0
diff --git a/packages/shared/computedWithControl/index.test.ts b/packages/shared/computedWithControl/index.test.ts
index b85b4106cff..0813a715a2f 100644
--- 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 { ref } from 'vue'
+import { shallowRef } from 'vue'
 import { computedWithControl, controlledComputed } from './index'
 
 describe('computedWithControl', () => {
@@ -9,8 +9,8 @@ describe('computedWithControl', () => {
   })
 
   it('should work', () => {
-    const trigger = ref(0)
-    const data = ref('foo')
+    const trigger = shallowRef(0)
+    const data = shallowRef('foo')
 
     const computed = computedWithControl(trigger, () => data.value.toUpperCase())
 
@@ -26,7 +26,7 @@ describe('computedWithControl', () => {
   })
 
   it('optional old value', () => {
-    const trigger = ref(0)
+    const trigger = shallowRef(0)
 
     const computed = computedWithControl(trigger, (oldValue?: number) =>
       oldValue ? oldValue * 2 : 1)
@@ -58,8 +58,8 @@ describe('computedWithControl', () => {
   })
 
   it('getter and setter', () => {
-    const trigger = ref(0)
-    const data = ref('foo')
+    const trigger = shallowRef(0)
+    const data = shallowRef('foo')
 
     const computed = computedWithControl(trigger, {
       get() {
diff --git a/packages/shared/computedWithControl/index.ts b/packages/shared/computedWithControl/index.ts
index fc4d6da461e..5d808d7ded3 100644
--- a/packages/shared/computedWithControl/index.ts
+++ b/packages/shared/computedWithControl/index.ts
@@ -1,6 +1,6 @@
 import type { ComputedGetter, ComputedRef, WatchSource, WritableComputedOptions, WritableComputedRef } from 'vue'
 import type { Fn } from '../utils'
-import { customRef, ref, watch } from 'vue'
+import { customRef, shallowRef, watch } from 'vue'
 
 export interface ComputedWithControlRefExtra {
   /**
@@ -35,7 +35,7 @@ export function computedWithControl<T, S>(
   let v: T = undefined!
   let track: Fn
   let trigger: Fn
-  const dirty = ref(true)
+  const dirty = shallowRef(true)
 
   const update = () => {
     dirty.value = true
diff --git a/packages/shared/createGlobalState/index.test.ts b/packages/shared/createGlobalState/index.test.ts
index 1d043176a49..8178e59b734 100644
--- a/packages/shared/createGlobalState/index.test.ts
+++ b/packages/shared/createGlobalState/index.test.ts
@@ -1,12 +1,12 @@
 import { describe, expect, it } from 'vitest'
-import { computed, ref } from 'vue'
+import { computed, shallowRef } from 'vue'
 import { useSetup } from '../../.test'
 import { createGlobalState } from './index'
 
 describe('createGlobalState', () => {
   it('should work after dispose 1', async () => {
     const useGlobalState = createGlobalState(() => {
-      const counter = ref(1)
+      const counter = shallowRef(1)
       const doubled = computed(() => counter.value * 2)
 
       return {
diff --git a/packages/shared/createInjectionState/demo/CountComponent.vue b/packages/shared/createInjectionState/demo/CountComponent.vue
index fa8bbe5defd..626aacd2d53 100644
--- a/packages/shared/createInjectionState/demo/CountComponent.vue
+++ b/packages/shared/createInjectionState/demo/CountComponent.vue
@@ -4,7 +4,7 @@ import { useCounterStore } from './useCounterStore'
 // use non-null assertion operator to ignore the case that store is not provided.
 const { count, double } = useCounterStore()!
 // if you want to allow component to working without providing store, you can use follow code instead:
-// const { count, double } = useCounterStore() ?? { count: ref(0), double: ref(0) }
+// const { count, double } = useCounterStore() ?? { count: shallowRef(0), double: shallowRef(0) }
 // also, you can use another hook to provide default value
 // const { count, double } = useCounterStoreWithDefaultValue()
 // or throw error
diff --git a/packages/shared/createInjectionState/demo/useCounterStore.ts b/packages/shared/createInjectionState/demo/useCounterStore.ts
index 65c50ae7b5b..e76d1e1d529 100644
--- a/packages/shared/createInjectionState/demo/useCounterStore.ts
+++ b/packages/shared/createInjectionState/demo/useCounterStore.ts
@@ -1,9 +1,9 @@
-import { computed, ref } from 'vue'
+import { computed, ref as deepRef, shallowRef } from 'vue'
 import { createInjectionState } from '../../createInjectionState'
 
 const [useProvideCounterStore, useCounterStore] = createInjectionState((initialValue: number) => {
   // state
-  const count = ref(initialValue)
+  const count = deepRef(initialValue)
 
   // getters
   const double = computed(() => count.value * 2)
@@ -22,8 +22,8 @@ export { useCounterStore }
 
 export function useCounterStoreWithDefaultValue() {
   return useCounterStore() ?? {
-    count: ref(0),
-    double: ref(0),
+    count: shallowRef(0),
+    double: shallowRef(0),
     increment: () => {},
   }
 }
diff --git a/packages/shared/createInjectionState/index.test.ts b/packages/shared/createInjectionState/index.test.ts
index 4cc4f020e0e..2de5b7427f1 100644
--- a/packages/shared/createInjectionState/index.test.ts
+++ b/packages/shared/createInjectionState/index.test.ts
@@ -1,13 +1,13 @@
 import type { InjectionKey, Ref } from 'vue'
 import { createInjectionState, injectLocal } from '@vueuse/shared'
 import { describe, expect, it } from 'vitest'
-import { defineComponent, h, inject, nextTick, ref } from 'vue'
+import { ref as deepRef, defineComponent, h, inject, nextTick } from 'vue'
 import { mount, useSetup } from '../../.test'
 
 describe('createInjectionState', () => {
   it('should work for simple nested component', async () => {
     const [useProvideCountState, useCountState] = createInjectionState((initialValue: number) => {
-      const count = ref(initialValue)
+      const count = deepRef(initialValue)
       return count
     })
 
@@ -40,7 +40,7 @@ describe('createInjectionState', () => {
     const KEY: InjectionKey<Ref<number>> = Symbol('count-state')
 
     const [useProvideCountState, useCountState] = createInjectionState((initialValue: number) => {
-      const count = ref(initialValue)
+      const count = deepRef(initialValue)
       return count
     }, { injectionKey: KEY })
 
@@ -72,7 +72,7 @@ describe('createInjectionState', () => {
 
   it('allow call useProvidingState and useInjectedState in same component', async () => {
     const [useProvideCountState, useCountState] = createInjectionState((initialValue: number) => {
-      const count = ref(initialValue)
+      const count = deepRef(initialValue)
       return count
     })
     const vm = useSetup(() => {
@@ -89,7 +89,7 @@ describe('createInjectionState', () => {
   it('allow call useProvidingState and injectLocal in same component', async () => {
     const KEY: InjectionKey<Ref<number>> | string = Symbol('count-state')
     const [useProvideCountState] = createInjectionState((initialValue: number) => {
-      const count = ref(initialValue)
+      const count = deepRef(initialValue)
       return count
     }, { injectionKey: KEY })
     const vm = useSetup(() => {
diff --git a/packages/shared/get/index.test.ts b/packages/shared/get/index.test.ts
index b1e08ac9cf2..8c8fc787365 100644
--- a/packages/shared/get/index.test.ts
+++ b/packages/shared/get/index.test.ts
@@ -1,17 +1,17 @@
 import { describe, expect, it } from 'vitest'
-import { ref } from 'vue'
+import { ref as deepRef, shallowRef } from 'vue'
 import { get } from './index'
 
 describe('get', () => {
   it('unref', () => {
-    const a = ref(42)
+    const a = shallowRef(42)
 
     expect(get(a)).toBe(42)
     expect(get(42)).toBe(42)
   })
 
   it('ref object', () => {
-    const reactive = ref({ foo: 'bar' })
+    const reactive = deepRef({ foo: 'bar' })
     const plain = { foo: 'bar' }
 
     expect(get(reactive, 'foo')).toBe('bar')
@@ -24,7 +24,7 @@ describe('get', () => {
   })
 
   it('ref array', () => {
-    const reactive = ref([1, 2, 3])
+    const reactive = deepRef([1, 2, 3])
     const plain = [1, 2, 3]
 
     expect(get(reactive, 2)).toBe(3)
diff --git a/packages/shared/isDefined/index.test.ts b/packages/shared/isDefined/index.test.ts
index ff463094998..4954adc65eb 100644
--- a/packages/shared/isDefined/index.test.ts
+++ b/packages/shared/isDefined/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { computed, ref } from 'vue'
+import { computed, ref as deepRef, shallowRef } from 'vue'
 import { isDefined } from './index'
 
 describe('isDefined', () => {
@@ -8,9 +8,9 @@ describe('isDefined', () => {
   })
 
   it('should support refs', () => {
-    const definedRef = ref('test')
-    const undefinedRef = ref(undefined)
-    const nullRef = ref(null)
+    const definedRef = shallowRef('test')
+    const undefinedRef = deepRef(undefined)
+    const nullRef = deepRef(null)
 
     expect(isDefined(definedRef)).toBe(true)
     expect(isDefined(undefinedRef)).toBe(false)
diff --git a/packages/shared/package.json b/packages/shared/package.json
index bd90fa38b62..2381c53bc7f 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@vueuse/shared",
   "type": "module",
-  "version": "12.6.1",
+  "version": "12.7.0",
   "author": "Anthony Fu <https://github.com/antfu>",
   "license": "MIT",
   "funding": "https://github.com/sponsors/antfu",
diff --git a/packages/shared/reactify/index.test.ts b/packages/shared/reactify/index.test.ts
index 72c139d9a9f..3ce17f6a940 100644
--- a/packages/shared/reactify/index.test.ts
+++ b/packages/shared/reactify/index.test.ts
@@ -1,10 +1,10 @@
 import { describe, expect, it } from 'vitest'
-import { ref } from 'vue'
+import { ref as deepRef, shallowRef } from 'vue'
 import { reactify } from './index'
 
 describe('reactify', () => {
   it('one arg', () => {
-    const base = ref(1.5)
+    const base = deepRef(1.5)
     const floor = reactify(Math.floor)
     const result = floor(base)
 
@@ -16,8 +16,8 @@ describe('reactify', () => {
   })
 
   it('two args', () => {
-    const base = ref(0)
-    const exponent = ref(0)
+    const base = shallowRef(0)
+    const exponent = shallowRef(0)
 
     const pow = reactify(Math.pow)
     const result = pow(base, exponent)
@@ -40,7 +40,7 @@ describe('reactify', () => {
   })
 
   it('mixed with literal', () => {
-    const base = ref(0)
+    const base = shallowRef(0)
 
     const pow = reactify(Math.pow)
     const result = pow(base, 2)
@@ -53,7 +53,7 @@ describe('reactify', () => {
   })
 
   it('jSON.stringify', () => {
-    const base = ref<any>(0)
+    const base = deepRef<any>(0)
     const stringify = reactify(JSON.stringify)
     const result = stringify(base, null, 2)
 
@@ -69,8 +69,8 @@ describe('reactify', () => {
     const sqrt = reactify(Math.sqrt)
     const add = reactify((a: number, b: number) => a + b)
 
-    const a = ref(3)
-    const b = ref(4)
+    const a = shallowRef(3)
+    const b = shallowRef(4)
 
     const c = sqrt(add(pow(a, 2), pow(b, 2)))
 
@@ -85,8 +85,8 @@ describe('reactify', () => {
   it('computed getter', () => {
     const add = reactify((a: number, b: number) => a + b)
 
-    const a = ref(3)
-    const b = ref(4)
+    const a = shallowRef(3)
+    const b = shallowRef(4)
 
     const c = add(a, () => b.value)
 
diff --git a/packages/shared/reactifyObject/index.test.ts b/packages/shared/reactifyObject/index.test.ts
index 8ac7c9bd433..d10bc062ffc 100644
--- a/packages/shared/reactifyObject/index.test.ts
+++ b/packages/shared/reactifyObject/index.test.ts
@@ -1,13 +1,13 @@
 import { describe, expect, it } from 'vitest'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 import { reactifyObject } from './index'
 
 describe('reactifyObject', () => {
   it('math', () => {
     const { pow } = reactifyObject(Math, { includeOwnProperties: true })
 
-    const base = ref(0)
-    const exponent = ref(0)
+    const base = shallowRef(0)
+    const exponent = shallowRef(0)
     const result = pow(base, exponent)
 
     expect(base.value).toBe(0)
@@ -30,7 +30,7 @@ describe('reactifyObject', () => {
   it('jSON', () => {
     const { stringify, parse } = reactifyObject(JSON)
 
-    const base = ref('{"foo":"bar"}')
+    const base = shallowRef('{"foo":"bar"}')
     const result = stringify(parse(base))
 
     expect(result.value).toBe(base.value)
diff --git a/packages/shared/reactiveComputed/index.test.ts b/packages/shared/reactiveComputed/index.test.ts
index 30d6f5b3332..0aa0eec3068 100644
--- a/packages/shared/reactiveComputed/index.test.ts
+++ b/packages/shared/reactiveComputed/index.test.ts
@@ -1,10 +1,10 @@
 import { describe, expect, expectTypeOf, it } from 'vitest'
-import { nextTick, ref, watch, watchEffect } from 'vue'
+import { nextTick, shallowRef, watch, watchEffect } from 'vue'
 import { reactiveComputed } from './index'
 
 describe('reactiveComputed', () => {
   it('should work', () => {
-    const count = ref(0)
+    const count = shallowRef(0)
 
     const state = reactiveComputed(() => {
       return {
@@ -21,7 +21,7 @@ describe('reactiveComputed', () => {
   })
 
   it('should work with dynamic props', async () => {
-    const foo = ref(false)
+    const foo = shallowRef(false)
 
     const state = reactiveComputed(() => {
       return foo.value
@@ -55,7 +55,7 @@ describe('reactiveComputed', () => {
   })
 
   it('should allow for previous value access (for vue 3.4+)', () => {
-    const test = ref(0)
+    const test = shallowRef(0)
 
     const obj = reactiveComputed<{ test: number, num: number }>(
       prev => ({ test: test.value, num: (prev?.num ?? 2) }),
diff --git a/packages/shared/refAutoReset/index.test.ts b/packages/shared/refAutoReset/index.test.ts
index c2cba46da53..67a23162a7c 100644
--- a/packages/shared/refAutoReset/index.test.ts
+++ b/packages/shared/refAutoReset/index.test.ts
@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 import { describe, expect, it, vi } from 'vitest'
-import { effectScope, ref } from 'vue'
+import { effectScope, shallowRef } from 'vue'
 import { autoResetRef, refAutoReset } from './index'
 
 describe('refAutoReset', () => {
@@ -39,7 +39,7 @@ describe('refAutoReset', () => {
   })
 
   it('should change afterMs', async () => {
-    const afterMs = ref(150)
+    const afterMs = shallowRef(150)
     const val = refAutoReset('default', afterMs)
     val.value = 'update'
     afterMs.value = 100
@@ -57,7 +57,7 @@ describe('refAutoReset', () => {
   })
 
   it('should not reset when scope dispose', async () => {
-    let val: Ref<string> = ref('')
+    let val: Ref<string> = shallowRef('')
     const scope = effectScope()
 
     scope.run(() => {
diff --git a/packages/shared/refDebounced/demo.vue b/packages/shared/refDebounced/demo.vue
index f830488a540..554ead11b57 100644
--- a/packages/shared/refDebounced/demo.vue
+++ b/packages/shared/refDebounced/demo.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { refDebounced } from '@vueuse/core'
-import { ref, watch } from 'vue'
+import { shallowRef, watch } from 'vue'
 
-const input = ref('')
+const input = shallowRef('')
 const debounced = refDebounced(input, 1000)
-const updated = ref(0)
+const updated = shallowRef(0)
 
 watch(debounced, () => (updated.value += 1))
 </script>
diff --git a/packages/shared/refDebounced/index.ts b/packages/shared/refDebounced/index.ts
index 8bf01e0ab5b..0ffd57850e1 100644
--- a/packages/shared/refDebounced/index.ts
+++ b/packages/shared/refDebounced/index.ts
@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 import type { DebounceFilterOptions, MaybeRefOrGetter } from '../utils'
-import { ref, watch } from 'vue'
+import { ref as deepRef, watch } from 'vue'
 import { useDebounceFn } from '../useDebounceFn'
 
 /**
@@ -9,7 +9,7 @@ import { useDebounceFn } from '../useDebounceFn'
  * @return A new debounced ref.
  */
 export function refDebounced<T>(value: Ref<T>, ms: MaybeRefOrGetter<number> = 200, options: DebounceFilterOptions = {}): Readonly<Ref<T>> {
-  const debounced = ref(value.value as T) as Ref<T>
+  const debounced = deepRef(value.value as T) as Ref<T>
 
   const updater = useDebounceFn(() => {
     debounced.value = value.value
diff --git a/packages/shared/refThrottled/demo.vue b/packages/shared/refThrottled/demo.vue
index 2de04680585..723a31f6d48 100644
--- a/packages/shared/refThrottled/demo.vue
+++ b/packages/shared/refThrottled/demo.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { refThrottled } from '@vueuse/core'
-import { ref, watch } from 'vue'
+import { shallowRef, watch } from 'vue'
 
-const trailing = ref(true)
-const leading = ref(false)
-const input = ref('')
+const trailing = shallowRef(true)
+const leading = shallowRef(false)
+const input = shallowRef('')
 const throttled = refThrottled(input, 1000, trailing.value, leading.value)
-const updated = ref(0)
+const updated = shallowRef(0)
 
 watch(throttled, () => {
   updated.value += 1
diff --git a/packages/shared/refThrottled/index.ts b/packages/shared/refThrottled/index.ts
index 491294cc90f..4be271707ed 100644
--- a/packages/shared/refThrottled/index.ts
+++ b/packages/shared/refThrottled/index.ts
@@ -1,5 +1,5 @@
 import type { Ref } from 'vue'
-import { ref, watch } from 'vue'
+import { ref as deepRef, watch } from 'vue'
 import { useThrottleFn } from '../useThrottleFn'
 
 /**
@@ -15,7 +15,7 @@ export function refThrottled<T>(value: Ref<T>, delay = 200, trailing = true, lea
   if (delay <= 0)
     return value
 
-  const throttled: Ref<T> = ref(value.value as T) as Ref<T>
+  const throttled: Ref<T> = deepRef(value.value as T) as Ref<T>
 
   const updater = useThrottleFn(() => {
     throttled.value = value.value
diff --git a/packages/shared/set/index.test.ts b/packages/shared/set/index.test.ts
index 7e129888b70..55147f9942d 100644
--- a/packages/shared/set/index.test.ts
+++ b/packages/shared/set/index.test.ts
@@ -1,10 +1,10 @@
 import { describe, expect, it } from 'vitest'
-import { reactive, ref, watch } from 'vue'
+import { reactive, shallowRef, watch } from 'vue'
 import { set } from './index'
 
 describe('set', () => {
   it('set ref', () => {
-    const source = ref('foo')
+    const source = shallowRef('foo')
 
     expect(source.value).toBe('foo')
 
diff --git a/packages/shared/syncRef/demo.vue b/packages/shared/syncRef/demo.vue
index dae76238dfd..44585264f09 100644
--- a/packages/shared/syncRef/demo.vue
+++ b/packages/shared/syncRef/demo.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { syncRef } from '@vueuse/core'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 
-const a = ref('')
-const b = ref('')
+const a = shallowRef('')
+const b = shallowRef('')
 
 syncRef(a, b)
 </script>
diff --git a/packages/shared/syncRef/index.test.ts b/packages/shared/syncRef/index.test.ts
index 6c72efb7525..df587b61771 100644
--- a/packages/shared/syncRef/index.test.ts
+++ b/packages/shared/syncRef/index.test.ts
@@ -1,11 +1,11 @@
 import { describe, expect, it } from 'vitest'
-import { ref } from 'vue'
+import { ref as deepRef, shallowRef } from 'vue'
 import { syncRef } from './index'
 
 describe('syncRef', () => {
   it('should work', () => {
-    const a = ref('foo')
-    const b = ref('bar')
+    const a = shallowRef('foo')
+    const b = shallowRef('bar')
 
     const stop = syncRef(a, b)
 
@@ -30,8 +30,8 @@ describe('syncRef', () => {
   })
 
   it('trl', () => {
-    const left = ref('left')
-    const right = ref('right')
+    const left = shallowRef('left')
+    const right = shallowRef('right')
 
     syncRef(left, right, { direction: 'rtl' })
 
@@ -50,8 +50,8 @@ describe('syncRef', () => {
   })
 
   it('works with mutual convertors', () => {
-    const left = ref(10)
-    const right = ref(2)
+    const left = shallowRef(10)
+    const right = shallowRef(2)
 
     syncRef(left, right, {
       transform: {
@@ -74,8 +74,8 @@ describe('syncRef', () => {
   })
 
   it('works with only rtl convertor', () => {
-    const left = ref(10)
-    const right = ref(2)
+    const left = shallowRef(10)
+    const right = shallowRef(2)
 
     syncRef(left, right, {
       direction: 'rtl',
@@ -99,12 +99,12 @@ describe('syncRef', () => {
   })
 
   it('ts works', () => {
-    const ref0 = ref(0)
-    const ref1 = ref(1)
-    const refString = ref('1')
-    const refNumber = ref(1)
-    const refNumString = ref<number | string>(1)
-    const refNumBoolean = ref<number | boolean>(1)
+    const ref0 = shallowRef(0)
+    const ref1 = shallowRef(1)
+    const refString = shallowRef('1')
+    const refNumber = shallowRef(1)
+    const refNumString = deepRef<number | string>(1)
+    const refNumBoolean = deepRef<number | boolean>(1)
     // L = A && direction === 'both'
     syncRef(ref0, ref1)()
     syncRef(ref0, ref1, {
@@ -251,8 +251,8 @@ describe('syncRef', () => {
       direction: 'rtl',
     })
 
-    const bool0 = ref(false)
-    const bool1 = ref(false)
+    const bool0 = shallowRef(false)
+    const bool1 = shallowRef(false)
     syncRef(bool0, bool1)
 
     syncRef(refNumber, refString, {
diff --git a/packages/shared/syncRefs/demo.vue b/packages/shared/syncRefs/demo.vue
index a503da0aa1e..0d5dfefb9c3 100644
--- a/packages/shared/syncRefs/demo.vue
+++ b/packages/shared/syncRefs/demo.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { syncRefs } from '@vueuse/core'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 
-const source = ref('')
-const target1 = ref('')
-const target2 = ref('')
+const source = shallowRef('')
+const target1 = shallowRef('')
+const target2 = shallowRef('')
 
 syncRefs(source, [target1, target2])
 </script>
diff --git a/packages/shared/syncRefs/index.test.ts b/packages/shared/syncRefs/index.test.ts
index 9ed979696e3..54d9077041e 100644
--- a/packages/shared/syncRefs/index.test.ts
+++ b/packages/shared/syncRefs/index.test.ts
@@ -1,12 +1,12 @@
 import { describe, expect, it } from 'vitest'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 import { syncRefs } from './index'
 
 describe('syncRefs', () => {
   it('should work with array', () => {
-    const source = ref('foo')
-    const target1 = ref('bar')
-    const target2 = ref('bar2')
+    const source = shallowRef('foo')
+    const target1 = shallowRef('bar')
+    const target2 = shallowRef('bar2')
 
     const stop = syncRefs(source, [target1, target2])
 
@@ -27,8 +27,8 @@ describe('syncRefs', () => {
   })
 
   it('should work with non-array', () => {
-    const source = ref('foo')
-    const target = ref('bar')
+    const source = shallowRef('foo')
+    const target = shallowRef('bar')
 
     const stop = syncRefs(source, target)
 
diff --git a/packages/shared/toReactive/index.test.ts b/packages/shared/toReactive/index.test.ts
index acbbe857ff0..3104a321590 100644
--- a/packages/shared/toReactive/index.test.ts
+++ b/packages/shared/toReactive/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { isReactive, nextTick, reactive, ref, watchSyncEffect } from 'vue'
+import { ref as deepRef, isReactive, nextTick, reactive, watchSyncEffect } from 'vue'
 import { toRefs } from '../toRefs'
 import { toReactive } from './index'
 
@@ -9,7 +9,7 @@ describe('toReactive', () => {
   })
 
   it('should work', () => {
-    const r = ref({ a: 'a', b: 0 })
+    const r = deepRef({ a: 'a', b: 0 })
     const state = toReactive(r)
     expect(state.a).toBe('a')
     expect(state.b).toBe(0)
@@ -22,7 +22,7 @@ describe('toReactive', () => {
 
   it('should be enumerable', () => {
     const obj = { a: 'a', b: 0 }
-    const r = ref(obj)
+    const r = deepRef(obj)
     const state = toReactive(r)
 
     expect(JSON.stringify(state)).toBe(JSON.stringify(r.value))
@@ -30,7 +30,7 @@ describe('toReactive', () => {
   })
 
   it('should be reactive', async () => {
-    const r = ref({ a: 'a', b: 0 })
+    const r = deepRef({ a: 'a', b: 0 })
     const state = toReactive(r)
     let dummy = 0
 
@@ -55,7 +55,7 @@ describe('toReactive', () => {
   })
 
   it('should be replaceable', async () => {
-    const r = ref<any>({ a: 'a', b: 0 })
+    const r = deepRef<any>({ a: 'a', b: 0 })
     const state = toReactive(r)
     let dummy = 0
 
diff --git a/packages/shared/toRef/index.ts b/packages/shared/toRef/index.ts
index f8adf2062ba..75553eb4394 100644
--- a/packages/shared/toRef/index.ts
+++ b/packages/shared/toRef/index.ts
@@ -1,12 +1,8 @@
 import type { ComputedRef, Ref, ToRef } from 'vue'
 import type { MaybeRefOrGetter } from '../utils'
-import {
-  customRef,
-  readonly,
-  ref,
+import { customRef, ref as deepRef, readonly,
   // eslint-disable-next-line no-restricted-imports
-  toRef as vueToRef,
-} from 'vue'
+  toRef as vueToRef } from 'vue'
 import { noop } from '../utils'
 
 /**
@@ -24,7 +20,7 @@ export function toRef(...args: any[]) {
   const r = args[0]
   return typeof r === 'function'
     ? readonly(customRef(() => ({ get: r as any, set: noop })))
-    : ref(r)
+    : deepRef(r)
 }
 
 /**
diff --git a/packages/shared/toRefs/index.test.ts b/packages/shared/toRefs/index.test.ts
index e46d0cccd33..7a96b826542 100644
--- a/packages/shared/toRefs/index.test.ts
+++ b/packages/shared/toRefs/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from 'vitest'
-import { computed, reactive, ref, watchSyncEffect } from 'vue'
+import { computed, ref as deepRef, reactive, watchSyncEffect } from 'vue'
 import { toRefs } from './index'
 
 describe('toRefs', () => {
@@ -32,7 +32,7 @@ describe('toRefs', () => {
   })
 
   it('should return refs when an object ref was passed', () => {
-    const obj = ref({ a: 'a', b: 0 })
+    const obj = deepRef({ a: 'a', b: 0 })
     const refs = toRefs(obj)
     expect(refs.a.value).toBe('a')
     expect(refs.b.value).toBe(0)
@@ -44,7 +44,7 @@ describe('toRefs', () => {
   })
 
   it('should return refs when an array ref was passed', () => {
-    const arr = ref(['a', 0])
+    const arr = deepRef(['a', 0])
     const refs = toRefs(arr)
     expect(refs[0].value).toBe('a')
     expect(refs[1].value).toBe(0)
@@ -99,7 +99,7 @@ describe('toRefs', () => {
 
   it('should trigger unwanted effects with replaceRef = false', () => {
     const spy = vi.fn()
-    const obj = ref({
+    const obj = deepRef({
       a: 'a',
       b: 0,
     })
@@ -118,7 +118,7 @@ describe('toRefs', () => {
 
   it('should not trigger unwanted effects with replaceRef = false', () => {
     const spy = vi.fn()
-    const obj = ref({
+    const obj = deepRef({
       a: 'a',
       b: 0,
     })
@@ -144,7 +144,7 @@ describe('toRefs', () => {
       }
     }
 
-    const obj = ref(new SomeClass())
+    const obj = deepRef(new SomeClass())
 
     const { v } = toRefs(obj)
 
diff --git a/packages/shared/until/index.test.ts b/packages/shared/until/index.test.ts
index 0336388ec9b..a6fd26c5a21 100644
--- a/packages/shared/until/index.test.ts
+++ b/packages/shared/until/index.test.ts
@@ -2,7 +2,7 @@ import type { Equal, Expect } from '@type-challenges/utils'
 import type { Ref } from 'vue'
 import { invoke } from '@vueuse/shared'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { ref } from 'vue'
+import { ref as deepRef, shallowRef } from 'vue'
 import { until } from './index'
 
 describe('until', () => {
@@ -11,15 +11,15 @@ describe('until', () => {
   })
   it('should toBe', () => {
     return new Promise<void>((resolve, reject) => {
-      const r1 = ref(0)
-      const r2 = ref(0)
+      const r1 = shallowRef(0)
+      const r2 = shallowRef(0)
 
       invoke(async () => {
         expect(r1.value).toBe(0)
         expect(r2.value).toBe(0)
         let x = await until(r1).toBe(1)
         expect(x).toBe(1)
-        x = await until(r2).toBe(ref(2))
+        x = await until(r2).toBe(shallowRef(2))
         expect(x).toBe(2)
         resolve()
       }).catch(reject)
@@ -37,7 +37,7 @@ describe('until', () => {
   })
 
   it('should toBeTruthy', async () => {
-    const r = ref(false)
+    const r = shallowRef(false)
     setTimeout(() => {
       r.value = true
     }, 100)
@@ -47,7 +47,7 @@ describe('until', () => {
   })
 
   it('should toBeUndefined', async () => {
-    const r = ref<boolean | undefined>(false)
+    const r = deepRef<boolean | undefined>(false)
     setTimeout(() => {
       r.value = undefined
     }, 100)
@@ -57,7 +57,7 @@ describe('until', () => {
   })
 
   it('should toBeNaN', async () => {
-    const r = ref(0)
+    const r = shallowRef(0)
     setTimeout(() => {
       r.value = Number.NaN
     }, 100)
@@ -68,10 +68,10 @@ describe('until', () => {
 
   it('should toBe timeout with ref', async () => {
     vi.useRealTimers()
-    const r = ref(0)
+    const r = shallowRef(0)
     const reject = vi.fn()
     await invoke(async () => {
-      await until(r).toBe(ref(1), { timeout: 200, throwOnTimeout: true })
+      await until(r).toBe(shallowRef(1), { timeout: 200, throwOnTimeout: true })
     }).catch(reject)
 
     expect(reject).toHaveBeenCalledWith('Timeout')
@@ -79,7 +79,7 @@ describe('until', () => {
 
   it('should work for changedTimes', async () => {
     await new Promise<void>((resolve, reject) => {
-      const r = ref(0)
+      const r = shallowRef(0)
 
       invoke(async () => {
         expect(r.value).toBe(0)
@@ -94,7 +94,7 @@ describe('until', () => {
       vi.advanceTimersByTime(100)
     })
     await new Promise<void>((resolve, reject) => {
-      const r = ref(0)
+      const r = shallowRef(0)
 
       invoke(async () => {
         expect(r.value).toBe(0)
@@ -114,7 +114,7 @@ describe('until', () => {
 
   it('should support `not`', () => {
     return new Promise<void>((resolve, reject) => {
-      const r = ref(0)
+      const r = shallowRef(0)
 
       invoke(async () => {
         expect(r.value).toBe(0)
@@ -132,7 +132,7 @@ describe('until', () => {
 
   it('should support `not` as separate instances', () => {
     return new Promise<void>((resolve, reject) => {
-      const r = ref(0)
+      const r = shallowRef(0)
 
       invoke(async () => {
         expect(r.value).toBe(0)
@@ -153,7 +153,7 @@ describe('until', () => {
 
   it('should support toBeNull()', () => {
     return new Promise<void>((resolve, reject) => {
-      const r = ref<number | null>(null)
+      const r = deepRef<number | null>(null)
 
       invoke(async () => {
         expect(r.value).toBe(null)
@@ -171,7 +171,7 @@ describe('until', () => {
 
   it('should support array', () => {
     return new Promise<void>((resolve, reject) => {
-      const r = ref<number[]>([1, 2, 3])
+      const r = deepRef<number[]>([1, 2, 3])
 
       invoke(async () => {
         expect(r.value).toEqual([1, 2, 3])
@@ -189,7 +189,7 @@ describe('until', () => {
 
   it('should support array with not', () => {
     return new Promise<void>((resolve, reject) => {
-      const r = ref<number[]>([1, 2, 3])
+      const r = deepRef<number[]>([1, 2, 3])
 
       invoke(async () => {
         expect(r.value).toEqual([1, 2, 3])
@@ -209,7 +209,7 @@ describe('until', () => {
   it('should immediately timeout', () => {
     vi.useRealTimers()
     return new Promise<void>((resolve, reject) => {
-      const r = ref(0)
+      const r = shallowRef(0)
 
       invoke(async () => {
         expect(r.value).toBe(0)
@@ -226,7 +226,7 @@ describe('until', () => {
   it('should type check', () => {
     // eslint-disable-next-line ts/no-unused-expressions
     async () => {
-      const x = ref<'x'>()
+      const x = deepRef<'x'>()
       // type checks are done this way to prevent unused variable warnings
       // and duplicate name warnings
       'test' as any as Expect<Equal<typeof x, Ref<'x' | undefined>>>
@@ -246,7 +246,7 @@ describe('until', () => {
       const xNotUndef = await until(x).not.toBeUndefined()
       'test' as any as Expect<Equal<typeof xNotUndef, 'x'>>
 
-      const y = ref<'y' | null>(null)
+      const y = deepRef<'y' | null>(null)
       'test' as any as Expect<Equal<typeof y, Ref<'y' | null>>>
 
       const yNull = await until(y).toBeNull()
@@ -255,7 +255,7 @@ describe('until', () => {
       const yNotNull = await until(y).not.toBeNull()
       'test' as any as Expect<Equal<typeof yNotNull, 'y'>>
 
-      const z = ref<1 | 2 | 3>(1)
+      const z = deepRef<1 | 2 | 3>(1)
       'test' as any as Expect<Equal<typeof z, Ref<1 | 2 | 3>>>
 
       const is1 = (x: number): x is 1 => x === 1
diff --git a/packages/shared/useArrayDifference/index.test.ts b/packages/shared/useArrayDifference/index.test.ts
index 9731a378e1d..1d13dff09bb 100644
--- a/packages/shared/useArrayDifference/index.test.ts
+++ b/packages/shared/useArrayDifference/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { ref } from 'vue'
+import { ref as deepRef } from 'vue'
 import { useArrayDifference } from './index'
 
 describe('useArrayDifference', () => {
@@ -7,8 +7,8 @@ describe('useArrayDifference', () => {
     expect(useArrayDifference).toBeDefined()
   })
   it('should return the difference of two array', () => {
-    const list1 = ref([1, 2, 3, 4, 5])
-    const list2 = ref([4, 5, 6])
+    const list1 = deepRef([1, 2, 3, 4, 5])
+    const list2 = deepRef([4, 5, 6])
 
     const result = useArrayDifference(list1, list2)
     expect(result.value).toEqual([1, 2, 3])
@@ -21,8 +21,8 @@ describe('useArrayDifference', () => {
   })
 
   it('should return the difference of two array with iteratee', () => {
-    const list1 = ref([{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }])
-    const list2 = ref([{ id: 4 }, { id: 5 }])
+    const list1 = deepRef([{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }])
+    const list2 = deepRef([{ id: 4 }, { id: 5 }])
 
     const result = useArrayDifference(list1, list2, (value, othVal) => value.id === othVal.id)
     expect(result.value).toEqual([{ id: 1 }, { id: 2 }, { id: 3 }])
@@ -36,8 +36,8 @@ describe('useArrayDifference', () => {
 
   // key
   it('should return the difference of two array with key', () => {
-    const list1 = ref([{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }])
-    const list2 = ref([{ id: 3 }, { id: 4 }, { id: 5 }])
+    const list1 = deepRef([{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }])
+    const list2 = deepRef([{ id: 3 }, { id: 4 }, { id: 5 }])
 
     const result = useArrayDifference(list1, list2, 'id')
     expect(result.value).toEqual([{ id: 1 }, { id: 2 }])
@@ -50,8 +50,8 @@ describe('useArrayDifference', () => {
   })
 
   it('symmetric diff case 1', () => {
-    const list1 = ref([{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }])
-    const list2 = ref([{ id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }])
+    const list1 = deepRef([{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }])
+    const list2 = deepRef([{ id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }])
 
     const result = useArrayDifference(list1, list2, 'id', { symmetric: true })
     expect(result.value).toEqual([{ id: 1 }, { id: 2 }, { id: 6 }])
@@ -64,8 +64,8 @@ describe('useArrayDifference', () => {
   })
 
   it('symmetric diff case 2', () => {
-    const list1 = ref([{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }])
-    const list2 = ref([{ id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }])
+    const list1 = deepRef([{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }])
+    const list2 = deepRef([{ id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }])
 
     const result = useArrayDifference(list1, list2, (x, y) => x.id === y.id, { symmetric: true })
     expect(result.value).toEqual([{ id: 1 }, { id: 2 }, { id: 6 }])
diff --git a/packages/shared/useArrayEvery/index.test.ts b/packages/shared/useArrayEvery/index.test.ts
index b30ffcb9606..a66a05272da 100644
--- a/packages/shared/useArrayEvery/index.test.ts
+++ b/packages/shared/useArrayEvery/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { ref } from 'vue'
+import { ref as deepRef, shallowRef } from 'vue'
 import { useArrayEvery } from './index'
 
 describe('useArrayEvery', () => {
@@ -8,11 +8,11 @@ describe('useArrayEvery', () => {
   })
 
   it('should work with array of refs', () => {
-    const item1 = ref(0)
-    const item2 = ref(2)
-    const item3 = ref(4)
-    const item4 = ref(6)
-    const item5 = ref(8)
+    const item1 = shallowRef(0)
+    const item2 = shallowRef(2)
+    const item3 = shallowRef(4)
+    const item4 = shallowRef(6)
+    const item5 = shallowRef(8)
     const list = [item1, item2, item3, item4, item5]
     const result = useArrayEvery(list, i => i % 2 === 0)
     expect(result.value).toBe(true)
@@ -21,7 +21,7 @@ describe('useArrayEvery', () => {
   })
 
   it('should work with reactive array', () => {
-    const list = ref([0, 2, 4, 6, 8])
+    const list = deepRef([0, 2, 4, 6, 8])
     const result = useArrayEvery(list, i => i % 2 === 0)
     expect(result.value).toBe(true)
     list.value.push(9)
diff --git a/packages/shared/useArrayFilter/index.test.ts b/packages/shared/useArrayFilter/index.test.ts
index 77494bc3667..de0ec793433 100644
--- a/packages/shared/useArrayFilter/index.test.ts
+++ b/packages/shared/useArrayFilter/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { ref } from 'vue'
+import { ref as deepRef, shallowRef } from 'vue'
 import { useArrayFilter } from './index'
 
 describe('useArrayFilter', () => {
@@ -8,11 +8,11 @@ describe('useArrayFilter', () => {
   })
 
   it('should work with array of refs', () => {
-    const item1 = ref(0)
-    const item2 = ref(2)
-    const item3 = ref(4)
-    const item4 = ref(6)
-    const item5 = ref(8)
+    const item1 = shallowRef(0)
+    const item2 = shallowRef(2)
+    const item3 = shallowRef(4)
+    const item4 = shallowRef(6)
+    const item5 = shallowRef(8)
     const list = [item1, item2, item3, item4, item5]
     const result = useArrayFilter(list, i => i % 2 === 0)
     expect(result.value).toStrictEqual([0, 2, 4, 6, 8])
@@ -21,7 +21,7 @@ describe('useArrayFilter', () => {
   })
 
   it('should work with reactive array', () => {
-    const list = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9])
+    const list = deepRef([0, 1, 2, 3, 4, 5, 6, 7, 8, 9])
     const result = useArrayFilter(list, i => i % 2 === 0)
     expect(result.value).toStrictEqual([0, 2, 4, 6, 8])
     list.value.shift()
@@ -29,7 +29,7 @@ describe('useArrayFilter', () => {
   })
 
   it('should allow values other than boolean in fn', () => {
-    const list = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9])
+    const list = deepRef([0, 1, 2, 3, 4, 5, 6, 7, 8, 9])
     const result = useArrayFilter(list, i => i % 2)
     expect(result.value).toStrictEqual([1, 3, 5, 7, 9])
   })
diff --git a/packages/shared/useArrayFind/index.test.ts b/packages/shared/useArrayFind/index.test.ts
index 3a87c3c3186..b0d8b99f764 100644
--- a/packages/shared/useArrayFind/index.test.ts
+++ b/packages/shared/useArrayFind/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { reactive, ref } from 'vue'
+import { reactive, shallowRef } from 'vue'
 import { useSetup } from '../../.test'
 import { useArrayFind } from './index'
 
@@ -10,9 +10,9 @@ describe('useArrayFind', () => {
 
   it('should find positive', () => {
     useSetup(() => {
-      const item1 = ref(1)
-      const item2 = ref(2)
-      const item3 = ref(3)
+      const item1 = shallowRef(1)
+      const item2 = shallowRef(2)
+      const item3 = shallowRef(3)
       const positive = useArrayFind([item1, item2, item3], val => val > 0)
       expect(positive.value).toBe(1)
       item1.value = -1
diff --git a/packages/shared/useArrayFindIndex/index.test.ts b/packages/shared/useArrayFindIndex/index.test.ts
index 075b9d07874..491cccf2631 100644
--- a/packages/shared/useArrayFindIndex/index.test.ts
+++ b/packages/shared/useArrayFindIndex/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { ref } from 'vue'
+import { ref as deepRef, shallowRef } from 'vue'
 import { useArrayFindIndex } from './index'
 
 describe('useArrayFindIndex', () => {
@@ -8,11 +8,11 @@ describe('useArrayFindIndex', () => {
   })
 
   it('should work with array of refs', () => {
-    const item1 = ref(0)
-    const item2 = ref(2)
-    const item3 = ref(4)
-    const item4 = ref(6)
-    const item5 = ref(8)
+    const item1 = shallowRef(0)
+    const item2 = shallowRef(2)
+    const item3 = shallowRef(4)
+    const item4 = shallowRef(6)
+    const item5 = shallowRef(8)
     const list = [item1, item2, item3, item4, item5]
     const result = useArrayFindIndex(list, i => i % 2 === 0)
     expect(result.value).toBe(0)
@@ -29,7 +29,7 @@ describe('useArrayFindIndex', () => {
   })
 
   it('should work with reactive array', () => {
-    const list = ref([0, 2, 4, 6, 8])
+    const list = deepRef([0, 2, 4, 6, 8])
     const result = useArrayFindIndex(list, i => i % 2 === 0)
     expect(result.value).toBe(0)
     list.value.unshift(-1)
diff --git a/packages/shared/useArrayFindLast/index.test.ts b/packages/shared/useArrayFindLast/index.test.ts
index 398e66d6fdd..97bd0b417c9 100644
--- a/packages/shared/useArrayFindLast/index.test.ts
+++ b/packages/shared/useArrayFindLast/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { reactive, ref } from 'vue'
+import { reactive, shallowRef } from 'vue'
 import { useSetup } from '../../.test'
 import { useArrayFindLast } from './index'
 
@@ -10,9 +10,9 @@ describe('useArrayFindLast', () => {
 
   it('should find positive', () => {
     useSetup(() => {
-      const item1 = ref(1)
-      const item2 = ref(2)
-      const item3 = ref(3)
+      const item1 = shallowRef(1)
+      const item2 = shallowRef(2)
+      const item3 = shallowRef(3)
       const positive = useArrayFindLast([item1, item2, item3], val => val > 0)
       expect(positive.value).toBe(3)
       item3.value = -1
diff --git a/packages/shared/useArrayIncludes/index.test.ts b/packages/shared/useArrayIncludes/index.test.ts
index f8006da470c..fe37c361b1e 100644
--- a/packages/shared/useArrayIncludes/index.test.ts
+++ b/packages/shared/useArrayIncludes/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { ref } from 'vue'
+import { ref as deepRef } from 'vue'
 import { useArrayIncludes } from './index'
 
 describe('useArrayIncludes', () => {
@@ -8,7 +8,7 @@ describe('useArrayIncludes', () => {
   })
 
   it('should work with array of refs', () => {
-    const array = ref([0, 2, 4, 6])
+    const array = deepRef([0, 2, 4, 6])
     const result = useArrayIncludes(array, 8)
     expect(result.value).toBeFalsy()
     array.value.push(8)
@@ -18,7 +18,7 @@ describe('useArrayIncludes', () => {
   })
 
   it('should work with array of refs and comparator', () => {
-    const array = ref([{ id: 1 }, { id: 2 }, { id: 3 }])
+    const array = deepRef([{ id: 1 }, { id: 2 }, { id: 3 }])
     const result = useArrayIncludes(array, 3, 'id')
     expect(result.value).toBeTruthy()
     array.value.pop()
@@ -26,7 +26,7 @@ describe('useArrayIncludes', () => {
   })
 
   it('should work with array of refs and comparatorFn', () => {
-    const array = ref([{ id: 1 }, { id: 2 }, { id: 3 }])
+    const array = deepRef([{ id: 1 }, { id: 2 }, { id: 3 }])
     const result = useArrayIncludes(array, { id: 3 }, (element, value) => element.id === value.id)
     expect(result.value).toBeTruthy()
     array.value.pop()
@@ -34,7 +34,7 @@ describe('useArrayIncludes', () => {
   })
 
   it('should work with array of refs and fromIndex', () => {
-    const array = ref([{ id: 1 }, { id: 2 }, { id: 3 }])
+    const array = deepRef([{ id: 1 }, { id: 2 }, { id: 3 }])
     const result = useArrayIncludes(array, { id: 1 }, { fromIndex: 1, comparator: (element, value) => element.id === value.id })
     expect(result.value).toBeFalsy()
   })
diff --git a/packages/shared/useArrayJoin/index.test.ts b/packages/shared/useArrayJoin/index.test.ts
index 37136dc475c..3c6677e9d3c 100644
--- a/packages/shared/useArrayJoin/index.test.ts
+++ b/packages/shared/useArrayJoin/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { ref } from 'vue'
+import { ref as deepRef, shallowRef } from 'vue'
 import { useArrayJoin } from './index'
 
 describe('useArrayJoin', () => {
@@ -8,9 +8,9 @@ describe('useArrayJoin', () => {
   })
 
   it('should work with array of refs', () => {
-    const item1 = ref('foo')
-    const item2 = ref(0)
-    const item3 = ref({ prop: 'val' })
+    const item1 = shallowRef('foo')
+    const item2 = shallowRef(0)
+    const item3 = deepRef({ prop: 'val' })
     const list = [item1, item2, item3]
     const result = useArrayJoin(list)
     expect(result.value).toBe('foo,0,[object Object]')
@@ -19,7 +19,7 @@ describe('useArrayJoin', () => {
   })
 
   it('should work with reactive array', () => {
-    const list = ref(['string', 0, { prop: 'val' }, false, [1], [[2]], null, undefined, []])
+    const list = deepRef(['string', 0, { prop: 'val' }, false, [1], [[2]], null, undefined, []])
     const result = useArrayJoin(list)
     expect(result.value).toBe('string,0,[object Object],false,1,2,,,')
     list.value.push(true)
@@ -29,8 +29,8 @@ describe('useArrayJoin', () => {
   })
 
   it('should work with reactive separator', () => {
-    const list = ref(['string', 0, { prop: 'val' }, [1], [[2]], null, undefined, []])
-    const separator = ref()
+    const list = deepRef(['string', 0, { prop: 'val' }, [1], [[2]], null, undefined, []])
+    const separator = deepRef()
     const result = useArrayJoin(list, separator)
     expect(result.value).toBe('string,0,[object Object],1,2,,,')
     separator.value = ''
diff --git a/packages/shared/useArrayMap/index.test.ts b/packages/shared/useArrayMap/index.test.ts
index 619ca8970e8..8a7ca203749 100644
--- a/packages/shared/useArrayMap/index.test.ts
+++ b/packages/shared/useArrayMap/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { ref } from 'vue'
+import { ref as deepRef, shallowRef } from 'vue'
 import { useArrayMap } from './index'
 
 describe('useArrayMap', () => {
@@ -8,11 +8,11 @@ describe('useArrayMap', () => {
   })
 
   it('should work with array of refs', () => {
-    const item1 = ref(0)
-    const item2 = ref(2)
-    const item3 = ref(4)
-    const item4 = ref(6)
-    const item5 = ref(8)
+    const item1 = shallowRef(0)
+    const item2 = shallowRef(2)
+    const item3 = shallowRef(4)
+    const item4 = shallowRef(6)
+    const item5 = shallowRef(8)
     const list = [item1, item2, item3, item4, item5]
     const result = useArrayMap(list, i => i * 2)
     expect(result.value).toStrictEqual([0, 4, 8, 12, 16])
@@ -21,7 +21,7 @@ describe('useArrayMap', () => {
   })
 
   it('should work with reactive array', () => {
-    const list = ref([0, 1, 2, 3, 4])
+    const list = deepRef([0, 1, 2, 3, 4])
     const result = useArrayMap(list, i => i * 2)
     expect(result.value).toStrictEqual([0, 2, 4, 6, 8])
     list.value.pop()
@@ -29,7 +29,7 @@ describe('useArrayMap', () => {
   })
 
   it('should match the return type of mapper function', () => {
-    const list = ref([0, 1, 2, 3])
+    const list = deepRef([0, 1, 2, 3])
     const result1 = useArrayMap(list, i => i.toString())
     result1.value.forEach(i => expect(i).toBeTypeOf('string'))
 
diff --git a/packages/shared/useArrayReduce/index.test.ts b/packages/shared/useArrayReduce/index.test.ts
index 0ac9df1c3a3..b382bebf4e6 100644
--- a/packages/shared/useArrayReduce/index.test.ts
+++ b/packages/shared/useArrayReduce/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { reactive, ref } from 'vue'
+import { reactive, shallowRef } from 'vue'
 import { useArrayReduce } from './index'
 
 describe('useArrayReduce', () => {
@@ -8,8 +8,8 @@ describe('useArrayReduce', () => {
   })
 
   it('should calculate the array sum', () => {
-    const item1 = ref(1)
-    const item2 = ref(2)
+    const item1 = shallowRef(1)
+    const item2 = shallowRef(2)
     const sum = useArrayReduce([item1, item2, 3], (a, b) => a + b)
     expect(sum.value).toBe(6)
 
diff --git a/packages/shared/useArraySome/index.test.ts b/packages/shared/useArraySome/index.test.ts
index 9023cc13531..df46bdf3c36 100644
--- a/packages/shared/useArraySome/index.test.ts
+++ b/packages/shared/useArraySome/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { ref } from 'vue'
+import { ref as deepRef, shallowRef } from 'vue'
 import { useArraySome } from './index'
 
 describe('useArraySome', () => {
@@ -8,11 +8,11 @@ describe('useArraySome', () => {
   })
 
   it('should work with array of refs', () => {
-    const item1 = ref(0)
-    const item2 = ref(2)
-    const item3 = ref(4)
-    const item4 = ref(6)
-    const item5 = ref(8)
+    const item1 = shallowRef(0)
+    const item2 = shallowRef(2)
+    const item3 = shallowRef(4)
+    const item4 = shallowRef(6)
+    const item5 = shallowRef(8)
     const list = [item1, item2, item3, item4, item5]
     const result = useArraySome(list, i => i > 10)
     expect(result.value).toBe(false)
@@ -21,7 +21,7 @@ describe('useArraySome', () => {
   })
 
   it('should work with reactive array', () => {
-    const list = ref([0, 2, 4, 6, 8])
+    const list = deepRef([0, 2, 4, 6, 8])
     const result = useArraySome(list, i => i > 10)
     expect(result.value).toBe(false)
     list.value.push(11)
diff --git a/packages/shared/useArrayUnique/index.test.ts b/packages/shared/useArrayUnique/index.test.ts
index ade6f00c921..99889d847c5 100644
--- a/packages/shared/useArrayUnique/index.test.ts
+++ b/packages/shared/useArrayUnique/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { reactive, ref } from 'vue'
+import { ref as deepRef, reactive, shallowRef } from 'vue'
 import { useArrayUnique } from './index'
 
 describe('useArrayUnique', () => {
@@ -8,11 +8,11 @@ describe('useArrayUnique', () => {
   })
 
   it('should work with array of refs', () => {
-    const item1 = ref(0)
-    const item2 = ref(1)
-    const item3 = ref(1)
-    const item4 = ref(2)
-    const item5 = ref(3)
+    const item1 = shallowRef(0)
+    const item2 = shallowRef(1)
+    const item3 = shallowRef(1)
+    const item4 = shallowRef(2)
+    const item5 = shallowRef(3)
     const list = [item1, item2, item3, item4, item5]
     const result = useArrayUnique(list)
     expect(result.value.length).toBe(4)
@@ -21,7 +21,7 @@ describe('useArrayUnique', () => {
   })
 
   it('should work with ref array', () => {
-    const list = ref([1, 2, 2, 3])
+    const list = deepRef([1, 2, 2, 3])
     const result = useArrayUnique(list)
     expect(result.value.length).toBe(3)
     list.value.push(1)
diff --git a/packages/shared/useCounter/index.test.ts b/packages/shared/useCounter/index.test.ts
index 2b61e564dc4..1399874be40 100644
--- a/packages/shared/useCounter/index.test.ts
+++ b/packages/shared/useCounter/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 import { useCounter } from './index'
 
 describe('useCounter', () => {
@@ -45,7 +45,7 @@ describe('useCounter', () => {
   })
 
   it('should be update initial & counter', () => {
-    const initial = ref(0)
+    const initial = shallowRef(0)
     const { count, inc, dec, get, set, reset } = useCounter(initial)
 
     expect(count.value).toBe(0)
diff --git a/packages/shared/useCounter/index.ts b/packages/shared/useCounter/index.ts
index 1d27f1d9127..03937f6c30c 100644
--- a/packages/shared/useCounter/index.ts
+++ b/packages/shared/useCounter/index.ts
@@ -1,6 +1,9 @@
 import type { MaybeRef } from '../utils'
-// eslint-disable-next-line no-restricted-imports
-import { ref, unref } from 'vue'
+import {
+  ref as deepRef,
+  // eslint-disable-next-line no-restricted-imports
+  unref,
+} from 'vue'
 
 export interface UseCounterOptions {
   min?: number
@@ -16,7 +19,7 @@ export interface UseCounterOptions {
  */
 export function useCounter(initialValue: MaybeRef<number> = 0, options: UseCounterOptions = {}) {
   let _initialValue = unref(initialValue)
-  const count = ref(initialValue)
+  const count = deepRef(initialValue)
 
   const {
     max = Number.POSITIVE_INFINITY,
diff --git a/packages/shared/useDateFormat/demo.vue b/packages/shared/useDateFormat/demo.vue
index a1bd47c93fd..637c1521286 100644
--- a/packages/shared/useDateFormat/demo.vue
+++ b/packages/shared/useDateFormat/demo.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { useDateFormat, useNow } from '@vueuse/core'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 
-const formatter = ref('dddd YYYY-MM-DD HH:mm:ss')
-const lang = ref('en-US')
+const formatter = shallowRef('dddd YYYY-MM-DD HH:mm:ss')
+const lang = shallowRef('en-US')
 const formatted = useDateFormat(useNow(), formatter, { locales: lang })
 </script>
 
diff --git a/packages/shared/useDebounceFn/demo.vue b/packages/shared/useDebounceFn/demo.vue
index 6c2fad7119c..fc489363da1 100644
--- a/packages/shared/useDebounceFn/demo.vue
+++ b/packages/shared/useDebounceFn/demo.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { useDebounceFn } from '@vueuse/core'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 
-const updated = ref(0)
-const clicked = ref(0)
+const updated = shallowRef(0)
+const clicked = shallowRef(0)
 const debouncedFn = useDebounceFn(() => {
   updated.value += 1
 }, 1000, { maxWait: 5000 })
diff --git a/packages/shared/useInterval/index.ts b/packages/shared/useInterval/index.ts
index cfa8aca6bd7..bfcb26fda76 100644
--- a/packages/shared/useInterval/index.ts
+++ b/packages/shared/useInterval/index.ts
@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 import type { MaybeRefOrGetter, Pausable } from '../utils'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 import { useIntervalFn } from '../useIntervalFn'
 
 export interface UseIntervalOptions<Controls extends boolean> {
@@ -45,7 +45,7 @@ export function useInterval(interval: MaybeRefOrGetter<number> = 1000, options:
     callback,
   } = options
 
-  const counter = ref(0)
+  const counter = shallowRef(0)
   const update = () => counter.value += 1
   const reset = () => {
     counter.value = 0
diff --git a/packages/shared/useIntervalFn/demo.vue b/packages/shared/useIntervalFn/demo.vue
index b707fc02492..75e311a23ff 100644
--- a/packages/shared/useIntervalFn/demo.vue
+++ b/packages/shared/useIntervalFn/demo.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { useIntervalFn } from '@vueuse/core'
 import { rand } from '@vueuse/shared'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 
 const greetings = ['Hello', 'Hi', 'Yo!', 'Hey', 'Hola', 'こんにちは', 'Bonjour', 'Salut!', '你好', 'Привет']
-const word = ref('Hello')
-const interval = ref(500)
+const word = shallowRef('Hello')
+const interval = shallowRef(500)
 
 const { pause, resume, isActive } = useIntervalFn(() => {
   word.value = greetings[rand(0, greetings.length - 1)]
diff --git a/packages/shared/useIntervalFn/index.test.ts b/packages/shared/useIntervalFn/index.test.ts
index f25f303646f..93ce5bdb1e9 100644
--- a/packages/shared/useIntervalFn/index.test.ts
+++ b/packages/shared/useIntervalFn/index.test.ts
@@ -1,6 +1,6 @@
 import type { Pausable } from '../utils'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { effectScope, nextTick, ref } from 'vue'
+import { effectScope, nextTick, shallowRef } from 'vue'
 import { useIntervalFn } from './index'
 
 describe('useIntervalFn', () => {
@@ -57,7 +57,7 @@ describe('useIntervalFn', () => {
 
     callback = vi.fn()
 
-    const interval = ref(50)
+    const interval = shallowRef(50)
     await exec(useIntervalFn(callback, interval))
 
     callback.mockClear()
@@ -71,7 +71,7 @@ describe('useIntervalFn', () => {
 
     callback = vi.fn()
 
-    const interval = ref(50)
+    const interval = shallowRef(50)
     await execImmediateCallback(useIntervalFn(callback, interval, { immediateCallback: true }))
 
     callback.mockClear()
diff --git a/packages/shared/useIntervalFn/index.ts b/packages/shared/useIntervalFn/index.ts
index 415b5985f82..c9f5969ecc3 100644
--- a/packages/shared/useIntervalFn/index.ts
+++ b/packages/shared/useIntervalFn/index.ts
@@ -1,5 +1,5 @@
 import type { Fn, MaybeRefOrGetter, Pausable } from '../utils'
-import { isRef, ref, toValue, watch } from 'vue'
+import { isRef, shallowRef, toValue, watch } from 'vue'
 import { tryOnScopeDispose } from '../tryOnScopeDispose'
 import { isClient } from '../utils'
 
@@ -33,7 +33,7 @@ export function useIntervalFn(cb: Fn, interval: MaybeRefOrGetter<number> = 1000,
   } = options
 
   let timer: ReturnType<typeof setInterval> | null = null
-  const isActive = ref(false)
+  const isActive = shallowRef(false)
 
   function clean() {
     if (timer) {
diff --git a/packages/shared/useLastChanged/demo.vue b/packages/shared/useLastChanged/demo.vue
index ac42941a69b..d45bde5783c 100644
--- a/packages/shared/useLastChanged/demo.vue
+++ b/packages/shared/useLastChanged/demo.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { timestamp, useLastChanged, useTimeAgo } from '@vueuse/core'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 
-const input = ref('')
+const input = shallowRef('')
 const ms = useLastChanged(input, { initialValue: timestamp() - 1000 * 60 * 5 })
 const timeago = useTimeAgo(ms)
 </script>
diff --git a/packages/shared/useLastChanged/index.ts b/packages/shared/useLastChanged/index.ts
index 23dde40e537..a2830b98eb4 100644
--- a/packages/shared/useLastChanged/index.ts
+++ b/packages/shared/useLastChanged/index.ts
@@ -1,5 +1,5 @@
 import type { Ref, WatchOptions, WatchSource } from 'vue'
-import { ref, watch } from 'vue'
+import { ref as deepRef, watch } from 'vue'
 import { timestamp } from '../utils'
 
 export interface UseLastChangedOptions<
@@ -17,7 +17,7 @@ export interface UseLastChangedOptions<
 export function useLastChanged(source: WatchSource, options?: UseLastChangedOptions<false>): Ref<number | null>
 export function useLastChanged(source: WatchSource, options: UseLastChangedOptions<true> | UseLastChangedOptions<boolean, number>): Ref<number>
 export function useLastChanged(source: WatchSource, options: UseLastChangedOptions<boolean, any> = {}): Ref<number | null> | Ref<number> {
-  const ms = ref<number | null>(options.initialValue ?? null)
+  const ms = deepRef<number | null>(options.initialValue ?? null)
 
   watch(
     source,
diff --git a/packages/shared/useThrottleFn/demo.vue b/packages/shared/useThrottleFn/demo.vue
index 63486c7f1a3..d6ba99dd2c1 100644
--- a/packages/shared/useThrottleFn/demo.vue
+++ b/packages/shared/useThrottleFn/demo.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { useThrottleFn } from '@vueuse/core'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 
-const updated = ref(0)
-const clicked = ref(0)
+const updated = shallowRef(0)
+const clicked = shallowRef(0)
 const throttledFn = useThrottleFn(() => {
   updated.value += 1
 }, 1000)
diff --git a/packages/shared/useTimeout/index.test.ts b/packages/shared/useTimeout/index.test.ts
index f5b8c1cd1d3..4941ee3de67 100644
--- a/packages/shared/useTimeout/index.test.ts
+++ b/packages/shared/useTimeout/index.test.ts
@@ -1,5 +1,5 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 import { useTimeout } from './index'
 
 describe('useTimeout', () => {
@@ -21,7 +21,7 @@ describe('useTimeout', () => {
   })
 
   it('works with ref target', () => {
-    const interval = ref(10)
+    const interval = shallowRef(10)
     const ready = useTimeout(interval)
     expect(ready.value).toEqual(false)
     vi.advanceTimersByTime(10)
@@ -29,7 +29,7 @@ describe('useTimeout', () => {
   })
 
   it('works with controls and ref target', () => {
-    const interval = ref(10)
+    const interval = shallowRef(10)
     const { ready } = useTimeout(interval, { controls: true })
     expect(ready.value).toEqual(false)
     vi.advanceTimersByTime(10)
diff --git a/packages/shared/useTimeoutFn/demo.vue b/packages/shared/useTimeoutFn/demo.vue
index 0f7e2d01c40..8eed686aefe 100644
--- a/packages/shared/useTimeoutFn/demo.vue
+++ b/packages/shared/useTimeoutFn/demo.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { useTimeoutFn } from '@vueuse/core'
-import { ref } from 'vue'
+import { ref as deepRef } from 'vue'
 
 const defaultText = 'Please wait for 3 seconds'
-const text = ref(defaultText)
+const text = deepRef(defaultText)
 const { start, isPending } = useTimeoutFn(() => {
   text.value = 'Fired!'
 }, 3000)
diff --git a/packages/shared/useTimeoutFn/index.test.ts b/packages/shared/useTimeoutFn/index.test.ts
index ee877b728d8..ff4dac95d0a 100644
--- a/packages/shared/useTimeoutFn/index.test.ts
+++ b/packages/shared/useTimeoutFn/index.test.ts
@@ -1,5 +1,5 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 import { useTimeoutFn } from './index'
 
 describe('useTimeoutFn', () => {
@@ -9,7 +9,7 @@ describe('useTimeoutFn', () => {
 
   it('basic start/stop', async () => {
     const callback = vi.fn()
-    const interval = ref(0)
+    const interval = shallowRef(0)
     const { start } = useTimeoutFn(callback, interval)
 
     vi.advanceTimersByTime(1)
diff --git a/packages/shared/useTimeoutFn/index.ts b/packages/shared/useTimeoutFn/index.ts
index 304972698b2..496cf620a44 100644
--- a/packages/shared/useTimeoutFn/index.ts
+++ b/packages/shared/useTimeoutFn/index.ts
@@ -1,5 +1,5 @@
 import type { AnyFn, MaybeRefOrGetter, Stoppable } from '../utils'
-import { readonly, ref, toValue } from 'vue'
+import { readonly, shallowRef, toValue } from 'vue'
 import { tryOnScopeDispose } from '../tryOnScopeDispose'
 import { isClient } from '../utils'
 
@@ -36,7 +36,7 @@ export function useTimeoutFn<CallbackFn extends AnyFn>(
     immediateCallback = false,
   } = options
 
-  const isPending = ref(false)
+  const isPending = shallowRef(false)
 
   let timer: ReturnType<typeof setTimeout> | null = null
 
diff --git a/packages/shared/useToNumber/index.test.ts b/packages/shared/useToNumber/index.test.ts
index 91b6082501f..fb2417b8ea4 100644
--- a/packages/shared/useToNumber/index.test.ts
+++ b/packages/shared/useToNumber/index.test.ts
@@ -1,10 +1,10 @@
 import { describe, expect, it, vi } from 'vitest'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 import { useToNumber } from './index'
 
 describe('useToNumber', () => {
   it('default', () => {
-    const value = ref<string | number>('123.345')
+    const value = shallowRef<string | number>('123.345')
     const float = useToNumber(value)
     const int = useToNumber(value, { method: 'parseInt' })
 
@@ -28,20 +28,20 @@ describe('useToNumber', () => {
   })
 
   it('radix', () => {
-    const value = ref<string | number>('0xFA')
+    const value = shallowRef<string | number>('0xFA')
     const int = useToNumber(value, { method: 'parseInt', radix: 16 })
 
     expect(int.value).toBe(250)
   })
 
   it('nanToZero', () => {
-    const value = ref<string | number>('Hi')
+    const value = shallowRef<string | number>('Hi')
     const float = useToNumber(value, { nanToZero: true })
     expect(float.value).toBe(0)
   })
 
   it('custom method function', () => {
-    const value = ref<string | number>(`${Number.MAX_SAFE_INTEGER}1`)
+    const value = shallowRef<string | number>(`${Number.MAX_SAFE_INTEGER}1`)
     let warn = ''
     const warnFn = vi.fn(str => warn = str)
     const result = useToNumber(value, { method: (v) => {
diff --git a/packages/shared/useToString/index.test.ts b/packages/shared/useToString/index.test.ts
index 4d7b1ac481e..c187f5a2b6b 100644
--- a/packages/shared/useToString/index.test.ts
+++ b/packages/shared/useToString/index.test.ts
@@ -1,10 +1,10 @@
 import { describe, expect, it } from 'vitest'
-import { ref } from 'vue'
+import { ref as deepRef } from 'vue'
 import { useToString } from './index'
 
 describe('useToString', () => {
   it('default', () => {
-    const value = ref<any>(123.345)
+    const value = deepRef<any>(123.345)
     const str = useToString(value)
 
     expect(str.value).toBe('123.345')
diff --git a/packages/shared/useToggle/index.test.ts b/packages/shared/useToggle/index.test.ts
index c8fa220917a..26ba1fcec96 100644
--- a/packages/shared/useToggle/index.test.ts
+++ b/packages/shared/useToggle/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { isRef, ref, toValue } from 'vue'
+import { isRef, shallowRef, toValue } from 'vue'
 import { useToggle } from './index'
 
 describe('useToggle', () => {
@@ -54,7 +54,7 @@ describe('useToggle', () => {
   })
 
   it('ref initialValue', () => {
-    const isDark = ref(true)
+    const isDark = shallowRef(true)
     const toggle = useToggle(isDark)
 
     expect(typeof toggle).toBe('function')
@@ -73,7 +73,7 @@ describe('useToggle', () => {
   })
 
   it('should toggle with truthy & falsy', () => {
-    const status = ref('ON')
+    const status = shallowRef('ON')
     const toggle = useToggle(status, {
       truthyValue: 'ON',
       falsyValue: 'OFF',
diff --git a/packages/shared/useToggle/index.ts b/packages/shared/useToggle/index.ts
index f6b24fe2c6c..4f058307045 100644
--- a/packages/shared/useToggle/index.ts
+++ b/packages/shared/useToggle/index.ts
@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 import type { MaybeRef, MaybeRefOrGetter } from '../utils'
-import { isRef, ref, toValue } from 'vue'
+import { ref as deepRef, isRef, toValue } from 'vue'
 
 export interface UseToggleOptions<Truthy, Falsy> {
   truthyValue?: MaybeRefOrGetter<Truthy>
@@ -26,7 +26,7 @@ export function useToggle(
   } = options
 
   const valueIsRef = isRef(initialValue)
-  const _value = ref(initialValue) as Ref<boolean>
+  const _value = deepRef(initialValue) as Ref<boolean>
 
   function toggle(value?: boolean) {
     // has arguments
diff --git a/packages/shared/utils/index.test.ts b/packages/shared/utils/index.test.ts
index 15c76a7d0c0..b42e23b8095 100644
--- a/packages/shared/utils/index.test.ts
+++ b/packages/shared/utils/index.test.ts
@@ -1,6 +1,6 @@
 import type { MockInstance } from 'vitest'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 import {
   assert,
   clamp,
@@ -52,7 +52,7 @@ describe('utils', () => {
 
 describe('promise', () => {
   it('should promiseTimeout work', async () => {
-    const num = ref(0)
+    const num = shallowRef(0)
     setTimeout(() => {
       num.value = 1
     }, 100)
@@ -143,7 +143,7 @@ describe('filters', () => {
 
     it('should debounce with ref', () => {
       const debouncedFilterSpy = vi.fn()
-      const debounceTime = ref(0)
+      const debounceTime = shallowRef(0)
       const filter = createFilterWrapper(debounceFilter(debounceTime), debouncedFilterSpy)
 
       filter()
@@ -190,7 +190,7 @@ describe('filters', () => {
 
     it('should throttle with ref', () => {
       const debouncedFilterSpy = vi.fn()
-      const throttle = ref(0)
+      const throttle = shallowRef(0)
       const filter = createFilterWrapper(throttleFilter(throttle), debouncedFilterSpy)
 
       filter()
@@ -405,7 +405,7 @@ describe('optionsFilters', () => {
 
   it('optionsThrottleFilter should throttle with ref', () => {
     const debouncedFilterSpy = vi.fn()
-    const throttle = ref(0)
+    const throttle = shallowRef(0)
     const filter = createFilterWrapper(throttleFilter(throttle), debouncedFilterSpy)
 
     filter()
diff --git a/packages/shared/watchArray/index.test.ts b/packages/shared/watchArray/index.test.ts
index b795442b9ab..cf17c6a7cc0 100644
--- a/packages/shared/watchArray/index.test.ts
+++ b/packages/shared/watchArray/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from 'vitest'
-import { nextTick, reactive, ref } from 'vue'
+import { ref as deepRef, nextTick, reactive } from 'vue'
 import { watchArray } from './index'
 
 describe('watchArray', () => {
@@ -11,7 +11,7 @@ describe('watchArray', () => {
       expect(removed).toEqual([2, 3])
     })
 
-    const num = ref([1, 2, 3])
+    const num = deepRef([1, 2, 3])
     watchArray(num, spy)
     num.value = [1, 1, 4]
     await nextTick()
@@ -26,7 +26,7 @@ describe('watchArray', () => {
       expect(removed).toEqual([])
     })
 
-    const num = ref([1, 2, 3])
+    const num = deepRef([1, 2, 3])
     watchArray(num, spy)
     num.value = [1, 2, 3]
     await nextTick()
@@ -41,7 +41,7 @@ describe('watchArray', () => {
       expect(removed).toEqual([])
     })
 
-    const num = ref([1, 2, 3])
+    const num = deepRef([1, 2, 3])
     watchArray(num, spy, { deep: true })
     num.value.push(4)
     await nextTick()
@@ -56,7 +56,7 @@ describe('watchArray', () => {
       expect(removed).toEqual([2])
     })
 
-    const num = ref([1, 2, 3])
+    const num = deepRef([1, 2, 3])
     watchArray(num, spy, { deep: true })
     num.value.splice(1, 1, 5, 6, 7)
     await nextTick()
@@ -86,7 +86,7 @@ describe('watchArray', () => {
       expect(removed).toEqual([])
     })
 
-    const num = ref([1, 2, 3])
+    const num = deepRef([1, 2, 3])
     watchArray(() => num.value, spy)
     num.value = [...num.value, 4]
     await nextTick()
@@ -96,7 +96,7 @@ describe('watchArray', () => {
   it('should work when immediate is true', async () => {
     const spy = vi.fn()
 
-    const num = ref([1, 2, 3])
+    const num = deepRef([1, 2, 3])
     watchArray(() => num.value, spy, { immediate: true })
     expect(spy).toHaveBeenCalledWith([1, 2, 3], [], [1, 2, 3], [], expect.anything())
     num.value = [1, 2, 3, 4]
diff --git a/packages/shared/watchAtMost/index.test.ts b/packages/shared/watchAtMost/index.test.ts
index 1fe1a064891..1acf5ee2487 100644
--- a/packages/shared/watchAtMost/index.test.ts
+++ b/packages/shared/watchAtMost/index.test.ts
@@ -1,10 +1,10 @@
 import { describe, expect, it, vi } from 'vitest'
-import { nextTick, ref } from 'vue'
+import { nextTick, shallowRef } from 'vue'
 import { watchAtMost } from './index'
 
 describe('watchAtMost', () => {
   it('should work', async () => {
-    const num = ref(0)
+    const num = shallowRef(0)
     const spy = vi.fn()
 
     const { count } = watchAtMost(num, spy, {
diff --git a/packages/shared/watchAtMost/index.ts b/packages/shared/watchAtMost/index.ts
index a3b085709bb..d3d501297a5 100644
--- a/packages/shared/watchAtMost/index.ts
+++ b/packages/shared/watchAtMost/index.ts
@@ -1,7 +1,7 @@
 import type { Ref, WatchCallback, WatchSource, WatchStopHandle } from 'vue'
 import type { MapOldSources, MapSources, MaybeRefOrGetter } from '../utils'
 import type { WatchWithFilterOptions } from '../watchWithFilter'
-import { nextTick, ref, toValue } from 'vue'
+import { nextTick, shallowRef, toValue } from 'vue'
 import { watchWithFilter } from '../watchWithFilter'
 
 export interface WatchAtMostOptions<Immediate> extends WatchWithFilterOptions<Immediate> {
@@ -29,7 +29,7 @@ export function watchAtMost<Immediate extends Readonly<boolean> = false>(
     ...watchOptions
   } = options
 
-  const current = ref(0)
+  const current = shallowRef(0)
 
   const stop = watchWithFilter(
     source,
diff --git a/packages/shared/watchDebounced/demo.vue b/packages/shared/watchDebounced/demo.vue
index 8620f6e0543..7c0703a0c37 100644
--- a/packages/shared/watchDebounced/demo.vue
+++ b/packages/shared/watchDebounced/demo.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { watchDebounced } from '@vueuse/core'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 
-const input = ref('')
-const updated = ref(0)
+const input = shallowRef('')
+const updated = shallowRef(0)
 
 watchDebounced(input, () => {
   updated.value += 1
diff --git a/packages/shared/watchDebounced/index.test.ts b/packages/shared/watchDebounced/index.test.ts
index 68521cfd8bd..08aaee57c5b 100644
--- a/packages/shared/watchDebounced/index.test.ts
+++ b/packages/shared/watchDebounced/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from 'vitest'
-import { nextTick, ref } from 'vue'
+import { nextTick, shallowRef } from 'vue'
 import { debouncedWatch, watchDebounced } from './index'
 
 describe('watchDebounced', () => {
@@ -9,7 +9,7 @@ describe('watchDebounced', () => {
   })
 
   it('should work by default', async () => {
-    const num = ref(0)
+    const num = shallowRef(0)
     const cb = vi.fn()
     watchDebounced(num, cb)
 
@@ -20,7 +20,7 @@ describe('watchDebounced', () => {
 
   it('should work when set debounce and maxWait', async () => {
     vi.useFakeTimers()
-    const num = ref(0)
+    const num = shallowRef(0)
     const cb = vi.fn()
     watchDebounced(num, cb, { debounce: 100, maxWait: 150 })
 
@@ -47,7 +47,7 @@ describe('watchDebounced', () => {
 
   it('should work with constant changes over multiple maxWaits', async () => {
     vi.useFakeTimers()
-    const num = ref(0)
+    const num = shallowRef(0)
     const cb = vi.fn()
 
     const constantUpdateOverTime = async (ms: number) => {
diff --git a/packages/shared/watchDeep/index.test.ts b/packages/shared/watchDeep/index.test.ts
index 26900a9419d..3e0f4018d23 100644
--- a/packages/shared/watchDeep/index.test.ts
+++ b/packages/shared/watchDeep/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from 'vitest'
-import { nextTick, ref } from 'vue'
+import { ref as deepRef, nextTick } from 'vue'
 import { watchDeep } from './index'
 
 describe('watchDeep', () => {
@@ -8,7 +8,7 @@ describe('watchDeep', () => {
       expect(objectUpdate).toEqual({ foo: { bar: { deep: 10 } } })
     })
 
-    const obj = ref({ foo: { bar: { deep: 5 } } })
+    const obj = deepRef({ foo: { bar: { deep: 5 } } })
     watchDeep(obj, spy)
     obj.value.foo.bar.deep = 10
     await nextTick()
diff --git a/packages/shared/watchIgnorable/demo.vue b/packages/shared/watchIgnorable/demo.vue
index a3cd2c7735e..afaeee2d8f6 100644
--- a/packages/shared/watchIgnorable/demo.vue
+++ b/packages/shared/watchIgnorable/demo.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { watchIgnorable } from '@vueuse/core'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 
-const log = ref('')
-const source = ref(0)
+const log = shallowRef('')
+const source = shallowRef(0)
 
 const { ignoreUpdates } = watchIgnorable(
   source,
diff --git a/packages/shared/watchIgnorable/index.test.ts b/packages/shared/watchIgnorable/index.test.ts
index 5a22f26a1ca..b23f2a20bb0 100644
--- a/packages/shared/watchIgnorable/index.test.ts
+++ b/packages/shared/watchIgnorable/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from 'vitest'
-import { nextTick, ref } from 'vue'
+import { nextTick, shallowRef } from 'vue'
 import { ignorableWatch, watchIgnorable } from './index'
 
 describe('watchIgnorable', () => {
@@ -9,8 +9,8 @@ describe('watchIgnorable', () => {
   })
 
   it('ignore async updates', async () => {
-    const source = ref(0)
-    const target = ref(0)
+    const source = shallowRef(0)
+    const target = shallowRef(0)
     const { ignoreUpdates } = watchIgnorable(source, value => target.value = value)
 
     source.value = 1
@@ -36,8 +36,8 @@ describe('watchIgnorable', () => {
   })
 
   it('ignore prev async updates', async () => {
-    const source = ref(0)
-    const target = ref(0)
+    const source = shallowRef(0)
+    const target = shallowRef(0)
     const { ignorePrevAsyncUpdates } = watchIgnorable(source, value => target.value = value)
 
     source.value = 1
@@ -61,8 +61,8 @@ describe('watchIgnorable', () => {
   })
 
   it('ignore sync updates', () => {
-    const source = ref(0)
-    const target = ref(0)
+    const source = shallowRef(0)
+    const target = shallowRef(0)
     const { ignoreUpdates, ignorePrevAsyncUpdates } = watchIgnorable(source, value => target.value = value, { flush: 'sync' })
 
     source.value = 1
@@ -88,7 +88,7 @@ describe('watchIgnorable', () => {
   })
 
   it('stop watch', async () => {
-    const source = ref(0)
+    const source = shallowRef(0)
     const callback = vi.fn()
     const { stop } = watchIgnorable(source, callback)
 
diff --git a/packages/shared/watchIgnorable/index.ts b/packages/shared/watchIgnorable/index.ts
index f5e41a44d6f..1a786f2337e 100644
--- a/packages/shared/watchIgnorable/index.ts
+++ b/packages/shared/watchIgnorable/index.ts
@@ -1,7 +1,7 @@
 import type { WatchCallback, WatchSource, WatchStopHandle } from 'vue'
 import type { Fn, MapOldSources, MapSources } from '../utils'
 import type { WatchWithFilterOptions } from '../watchWithFilter'
-import { ref, watch } from 'vue'
+import { shallowRef, watch } from 'vue'
 import { bypassFilter, createFilterWrapper } from '../utils'
 
 // watchIgnorable(source,callback,options) composable
@@ -40,7 +40,7 @@ export function watchIgnorable<Immediate extends Readonly<boolean> = false>(
   let stop: () => void
 
   if (watchOptions.flush === 'sync') {
-    const ignore = ref(false)
+    const ignore = shallowRef(false)
 
     // no op for flush: sync
     ignorePrevAsyncUpdates = () => {}
@@ -76,8 +76,8 @@ export function watchIgnorable<Immediate extends Readonly<boolean> = false>(
     // are more sync triggers than the ignore count, the we now
     // there are modifications in the source ref value that we
     // need to commit
-    const ignoreCounter = ref(0)
-    const syncCounter = ref(0)
+    const ignoreCounter = shallowRef(0)
+    const syncCounter = shallowRef(0)
 
     ignorePrevAsyncUpdates = () => {
       ignoreCounter.value = syncCounter.value
diff --git a/packages/shared/watchImmediate/index.test.ts b/packages/shared/watchImmediate/index.test.ts
index 06816ff9157..c5d41cc36a9 100644
--- a/packages/shared/watchImmediate/index.test.ts
+++ b/packages/shared/watchImmediate/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from 'vitest'
-import { nextTick, ref } from 'vue'
+import { nextTick, shallowRef } from 'vue'
 import { watchImmediate } from './index'
 
 describe('watchImmediate', () => {
@@ -15,7 +15,7 @@ describe('watchImmediate', () => {
       currentRun++
     })
 
-    const obj = ref('vue-use')
+    const obj = shallowRef('vue-use')
     watchImmediate(obj, spy)
     obj.value = 'VueUse'
     await nextTick()
diff --git a/packages/shared/watchOnce/index.test.ts b/packages/shared/watchOnce/index.test.ts
index b4415605a65..e214f6661e1 100644
--- a/packages/shared/watchOnce/index.test.ts
+++ b/packages/shared/watchOnce/index.test.ts
@@ -1,10 +1,10 @@
 import { describe, expect, it, vi } from 'vitest'
-import { nextTick, ref } from 'vue'
+import { nextTick, shallowRef } from 'vue'
 import { watchOnce } from './index'
 
 describe('watchOnce', () => {
   it('should work', async () => {
-    const num = ref(0)
+    const num = shallowRef(0)
     const spy = vi.fn()
 
     watchOnce(num, spy)
diff --git a/packages/shared/watchPausable/demo.vue b/packages/shared/watchPausable/demo.vue
index 34510e68209..1865024ac4d 100644
--- a/packages/shared/watchPausable/demo.vue
+++ b/packages/shared/watchPausable/demo.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { onStartTyping, watchPausable } from '@vueuse/core'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 
-const input = ref<HTMLInputElement | null>()
-const log = ref('')
+const input = shallowRef<HTMLInputElement | null>()
+const log = shallowRef('')
 
-const source = ref('')
+const source = shallowRef('')
 
 const watcher = watchPausable(
   source,
diff --git a/packages/shared/watchPausable/index.test.ts b/packages/shared/watchPausable/index.test.ts
index 856baba9fa8..e2184721355 100644
--- a/packages/shared/watchPausable/index.test.ts
+++ b/packages/shared/watchPausable/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from 'vitest'
-import { nextTick, ref } from 'vue'
+import { nextTick, shallowRef } from 'vue'
 import { pausableWatch, watchPausable } from './index'
 
 describe('watchPausable', () => {
@@ -9,7 +9,7 @@ describe('watchPausable', () => {
   })
 
   it('should work', async () => {
-    const num = ref(0)
+    const num = shallowRef(0)
     const cb = vi.fn()
     const { stop, pause, resume, isActive } = watchPausable(num, cb)
 
@@ -38,7 +38,7 @@ describe('watchPausable', () => {
   })
 
   it('should work with initialState "paused"', async () => {
-    const num = ref(0)
+    const num = shallowRef(0)
     const cb = vi.fn()
     const { resume, isActive } = watchPausable(num, cb, { initialState: 'paused' })
 
diff --git a/packages/shared/watchThrottled/demo.vue b/packages/shared/watchThrottled/demo.vue
index 9c87671ce4c..5674d6f5ca6 100644
--- a/packages/shared/watchThrottled/demo.vue
+++ b/packages/shared/watchThrottled/demo.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { watchThrottled } from '@vueuse/core'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 
-const input = ref('')
-const updated = ref(0)
+const input = shallowRef('')
+const updated = shallowRef(0)
 
 watchThrottled(input, () => {
   updated.value += 1
diff --git a/packages/shared/watchThrottled/index.test.ts b/packages/shared/watchThrottled/index.test.ts
index dbb7e518da9..70fc7fe86c3 100644
--- a/packages/shared/watchThrottled/index.test.ts
+++ b/packages/shared/watchThrottled/index.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from 'vitest'
-import { nextTick, ref } from 'vue'
+import { nextTick, shallowRef } from 'vue'
 import { throttledWatch, watchThrottled } from './index'
 
 describe('watchThrottled', () => {
@@ -10,7 +10,7 @@ describe('watchThrottled', () => {
 
   it('should work', async () => {
     vi.useFakeTimers()
-    const num = ref(0)
+    const num = shallowRef(0)
     const cb = vi.fn()
     watchThrottled(num, cb, { throttle: 100 })
 
diff --git a/packages/shared/watchTriggerable/demo.vue b/packages/shared/watchTriggerable/demo.vue
index 6938436b8ae..2199bf6f3f6 100644
--- a/packages/shared/watchTriggerable/demo.vue
+++ b/packages/shared/watchTriggerable/demo.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { watchTriggerable } from '@vueuse/core'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 
-const log = ref('')
-const source = ref(0)
+const log = shallowRef('')
+const source = shallowRef(0)
 
 const { trigger, ignoreUpdates } = watchTriggerable(
   source,
diff --git a/packages/shared/watchTriggerable/index.test.ts b/packages/shared/watchTriggerable/index.test.ts
index 633767bb16f..b9e90815a53 100644
--- a/packages/shared/watchTriggerable/index.test.ts
+++ b/packages/shared/watchTriggerable/index.test.ts
@@ -1,11 +1,11 @@
 import { describe, expect, it } from 'vitest'
-import { nextTick, reactive, ref } from 'vue'
+import { ref as deepRef, nextTick, reactive, shallowRef } from 'vue'
 import { watchTriggerable } from './index'
 
 describe('watchTriggerable', () => {
   it('this should work', async () => {
-    const source = ref(0)
-    const effect = ref(0)
+    const source = shallowRef(0)
+    const effect = shallowRef(0)
     let cleanupCount = -1
     const { trigger } = watchTriggerable(source, (value, oldValue, onCleanup) => {
       onCleanup(() => {
@@ -36,10 +36,10 @@ describe('watchTriggerable', () => {
   })
 
   it('source array', async () => {
-    const source1 = ref(0)
+    const source1 = shallowRef(0)
     const source2 = reactive({ a: 'a' })
-    const effect1 = ref(-1)
-    const effect2 = ref('z')
+    const effect1 = deepRef(-1)
+    const effect2 = shallowRef('z')
     let cleanupCount = -1
     const { trigger } = watchTriggerable([source1, () => source2.a], ([value1, value2], _, onCleanup) => {
       onCleanup(() => {
@@ -65,7 +65,7 @@ describe('watchTriggerable', () => {
 
   it('source reactive object', async () => {
     const source = reactive({ a: 'a' })
-    const effect = ref('')
+    const effect = shallowRef('')
     let cleanupCount = 0
     const { trigger } = watchTriggerable(source, (value, old, onCleanup) => {
       onCleanup(() => {
@@ -86,8 +86,8 @@ describe('watchTriggerable', () => {
   })
 
   it('trigger should await', async () => {
-    const source = ref(1)
-    const effect = ref(0)
+    const source = shallowRef(1)
+    const effect = shallowRef(0)
     const { trigger } = watchTriggerable(source, async (value) => {
       await new Promise(resolve => setTimeout(resolve, 10))
       effect.value = value
diff --git a/packages/shared/whenever/index.test.ts b/packages/shared/whenever/index.test.ts
index 13d125fd18c..d3a42f1c553 100644
--- a/packages/shared/whenever/index.test.ts
+++ b/packages/shared/whenever/index.test.ts
@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 import { describe, expect, it } from 'vitest'
-import { nextTick, ref, toValue } from 'vue'
+import { ref as deepRef, nextTick, shallowRef, toValue } from 'vue'
 import { useSetup } from '../../.test'
 import { whenever } from './index'
 
@@ -10,10 +10,10 @@ describe('whenever', () => {
   it('ignore falsy state change', async () => {
     // use a component to simulate normal use case
     const vm = useSetup(() => {
-      const number = ref<number | null | undefined>(1)
+      const number = deepRef<number | null | undefined>(1)
       const changeNumber = (v: number) => number.value = v
-      const watchCount = ref(0)
-      const watchValue: Ref<number | undefined> = ref()
+      const watchCount = shallowRef(0)
+      const watchValue: Ref<number | undefined> = deepRef()
 
       whenever(number, (value) => {
         watchCount.value += 1
@@ -59,9 +59,9 @@ describe('whenever', () => {
 
   it('once', async () => {
     const vm = useSetup(() => {
-      const number = ref<number | null | undefined>(1)
-      const watchCount = ref(0)
-      const watchValue: Ref<number | undefined> = ref()
+      const number = deepRef<number | null | undefined>(1)
+      const watchCount = shallowRef(0)
+      const watchValue: Ref<number | undefined> = deepRef()
 
       whenever(number, (value) => {
         watchCount.value += 1
diff --git a/playgrounds/nuxt/app.vue b/playgrounds/nuxt/app.vue
index 57ca3757242..56df616b68b 100644
--- a/playgrounds/nuxt/app.vue
+++ b/playgrounds/nuxt/app.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { useColorMode, useWindowSize } from '@vueuse/core'
-import { onMounted, reactive, ref } from 'vue'
+import { onMounted, reactive, shallowRef } from 'vue'
 
-const mounted = ref(false)
+const mounted = shallowRef(false)
 const { width, height } = useWindowSize()
 const color = useColorMode()
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dcf29ae6c53..8f246290528 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,14 +7,14 @@ settings:
 catalogs:
   default:
     '@antfu/eslint-config':
-      specifier: ^4.2.0
-      version: 4.2.0
+      specifier: ^4.2.1
+      version: 4.2.1
     '@antfu/ni':
       specifier: ^23.3.1
       version: 23.3.1
     '@iconify/json':
-      specifier: ^2.2.306
-      version: 2.2.306
+      specifier: ^2.2.307
+      version: 2.2.307
     '@nuxt/kit':
       specifier: ^3.15.4
       version: 3.15.4
@@ -238,14 +238,14 @@ catalogs:
       specifier: ^7.2.2
       version: 7.2.2
     unocss:
-      specifier: ^65.4.3
-      version: 65.4.3
+      specifier: ^65.5.0
+      version: 65.5.0
     unplugin-icons:
       specifier: ^22.0.0
       version: 22.0.0
     unplugin-vue-components:
-      specifier: ^28.0.0
-      version: 28.0.0
+      specifier: ^28.1.0
+      version: 28.1.0
     vite-plugin-inspect:
       specifier: ^10.2.1
       version: 10.2.1
@@ -276,7 +276,7 @@ overrides:
   '@vueuse/shared': workspace:*
   eslint: ^9.20.1
   magic-string: ^0.30.17
-  rollup: ^4.34.6
+  rollup: ^4.34.7
   vite: ^6.1.0
   vite-plugin-pwa: ^0.21.1
   vue: ^3.5.13
@@ -287,19 +287,19 @@ importers:
     devDependencies:
       '@antfu/eslint-config':
         specifier: 'catalog:'
-        version: 4.2.0(@typescript-eslint/utils@8.24.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3))(@vue/compiler-sfc@3.5.13)(eslint-plugin-format@1.0.1(eslint@9.20.1(jiti@2.4.2)))(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)(vitest@3.0.5)
+        version: 4.2.1(@typescript-eslint/utils@8.24.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3))(@vue/compiler-sfc@3.5.13)(eslint-plugin-format@1.0.1(eslint@9.20.1(jiti@2.4.2)))(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)(vitest@3.0.5)
       '@antfu/ni':
         specifier: 'catalog:'
         version: 23.3.1
       '@iconify/json':
         specifier: 'catalog:'
-        version: 2.2.306
+        version: 2.2.307
       '@rollup/plugin-json':
         specifier: 'catalog:'
-        version: 6.1.0(rollup@4.34.6)
+        version: 6.1.0(rollup@4.34.7)
       '@rollup/plugin-replace':
         specifier: 'catalog:'
-        version: 6.0.2(rollup@4.34.6)
+        version: 6.0.2(rollup@4.34.7)
       '@shikijs/vitepress-twoslash':
         specifier: 'catalog:'
         version: 2.3.2(@nuxt/kit@3.15.4(magicast@0.3.5))(typescript@5.7.3)
@@ -378,9 +378,15 @@ importers:
       eslint:
         specifier: ^9.20.1
         version: 9.20.1(jiti@2.4.2)
+      eslint-factory:
+        specifier: ^0.1.2
+        version: 0.1.2(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)
       eslint-plugin-format:
         specifier: 'catalog:'
         version: 1.0.1(eslint@9.20.1(jiti@2.4.2))
+      eslint-plugin-unimport:
+        specifier: ^0.1.2
+        version: 0.1.2(eslint@9.20.1(jiti@2.4.2))(rollup@4.34.7)(typescript@5.7.3)
       export-size:
         specifier: 'catalog:'
         version: 0.7.0
@@ -448,17 +454,17 @@ importers:
         specifier: 'catalog:'
         version: 0.6.0
       rollup:
-        specifier: ^4.34.6
-        version: 4.34.6
+        specifier: ^4.34.7
+        version: 4.34.7
       rollup-plugin-dts:
         specifier: 'catalog:'
-        version: 6.1.1(rollup@4.34.6)(typescript@5.7.3)
+        version: 6.1.1(rollup@4.34.7)(typescript@5.7.3)
       rollup-plugin-esbuild:
         specifier: 'catalog:'
-        version: 6.2.0(esbuild@0.24.2)(rollup@4.34.6)
+        version: 6.2.0(esbuild@0.24.2)(rollup@4.34.7)
       rollup-plugin-pure:
         specifier: 'catalog:'
-        version: 0.2.1(rollup@4.34.6)
+        version: 0.2.1(rollup@4.34.7)
       sharp:
         specifier: 'catalog:'
         version: 0.33.5
@@ -482,13 +488,13 @@ importers:
         version: 5.7.3
       unocss:
         specifier: 'catalog:'
-        version: 65.4.3(postcss@8.5.2)(rollup@4.34.6)(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(terser@5.24.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+        version: 65.5.0(postcss@8.5.2)(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(terser@5.24.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       unplugin-icons:
         specifier: 'catalog:'
         version: 22.0.0(@vue/compiler-sfc@3.5.13)(vue-template-compiler@2.7.16)
       unplugin-vue-components:
         specifier: 'catalog:'
-        version: 28.0.0(@babel/parser@7.26.7)(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@4.34.6)(vue@3.5.13(typescript@5.7.3))
+        version: 28.1.0(@babel/parser@7.26.7)(@nuxt/kit@3.15.4(magicast@0.3.5))(vue@3.5.13(typescript@5.7.3))
       vite:
         specifier: ^6.1.0
         version: 6.1.0(@types/node@22.13.4)(jiti@2.4.2)(terser@5.24.0)(tsx@4.19.2)(yaml@2.7.0)
@@ -655,7 +661,7 @@ importers:
         version: 3.15.4
       nuxt:
         specifier: 'catalog:'
-        version: 3.15.4(@parcel/watcher@2.4.1)(@types/node@22.13.4)(db0@0.2.1)(encoding@0.1.13)(eslint@9.20.1(jiti@2.4.2))(idb-keyval@6.2.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.3)(rollup@4.34.6)(terser@5.24.0)(tsx@4.19.2)(typescript@5.7.3)(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(terser@5.24.0)(tsx@4.19.2)(yaml@2.7.0))(vue-tsc@2.2.0(typescript@5.7.3))(yaml@2.7.0)
+        version: 3.15.4(@parcel/watcher@2.4.1)(@types/node@22.13.4)(db0@0.2.1)(encoding@0.1.13)(eslint@9.20.1(jiti@2.4.2))(idb-keyval@6.2.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.3)(rollup@4.34.7)(terser@5.24.0)(tsx@4.19.2)(typescript@5.7.3)(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(terser@5.24.0)(tsx@4.19.2)(yaml@2.7.0))(vue-tsc@2.2.0(typescript@5.7.3))(yaml@2.7.0)
       unimport:
         specifier: 'catalog:'
         version: 4.1.1
@@ -774,8 +780,8 @@ packages:
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
 
-  '@antfu/eslint-config@4.2.0':
-    resolution: {integrity: sha512-FoYfLF2QfWZ3ifix495g23sFlsy45/enEw+ZCMWRPzs7tah3Mw1/zu4i73ZcbLa37QgCJSNv7licFmgQ25E0MQ==}
+  '@antfu/eslint-config@4.2.1':
+    resolution: {integrity: sha512-FZBO4IooaWr5r7SKLC9XTsRR8B4+yLC2p5ACOQ1dEDe1hs3sj8F5nySs06mGDPRIrzotluG/FPbEZl6Gwr4AzQ==}
     hasBin: true
     peerDependencies:
       '@eslint-react/eslint-plugin': ^1.19.0
@@ -820,9 +826,6 @@ packages:
       svelte-eslint-parser:
         optional: true
 
-  '@antfu/install-pkg@0.4.1':
-    resolution: {integrity: sha512-T7yB5QNG29afhWVkVq7XeIMBa5U/vs9mX69YqayXypPRmYzUmzwnYltplHmPtZ4HPCn+sQKeXW8I47wCbuBOjw==}
-
   '@antfu/install-pkg@0.5.0':
     resolution: {integrity: sha512-dKnk2xlAyC7rvTkpkHmu+Qy/2Zc3Vm/l8PtNyIOGDBtXPY3kThfU4ORNEp3V7SXw5XSOb+tOJaUYpfquPzL/Tg==}
 
@@ -2268,14 +2271,14 @@ packages:
   '@iconify-json/simple-icons@1.2.21':
     resolution: {integrity: sha512-aqbIuVshMZ2fNEhm25//9DoKudboXF3CpoEQJJlHl9gVSVNOTr4cgaCIZvgSEYmys2HHEfmhcpoZIhoEFZS8SQ==}
 
-  '@iconify/json@2.2.306':
-    resolution: {integrity: sha512-TjpGQt8zrfA7ezi3CjbFzcm1C+6uvK94kCT3mcDC2y6u1E+7Oe0cvtN+hd+YzP1/YJe1ohe6HSR5TrHwZ0MXDw==}
+  '@iconify/json@2.2.307':
+    resolution: {integrity: sha512-540d6XxtPwSVdWf2fM0JTq9j7DYPV7SLpjxPtU5i/AXPTltqZVk0hjVCt5yiFW5fYi0/eiCM44tSDJZJXgKp/w==}
 
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
 
-  '@iconify/utils@2.2.1':
-    resolution: {integrity: sha512-0/7J7hk4PqXmxo5PDBDxmnecw5PxklZJfNjIVG9FM0mEfVrvfudS22rYWsqVk6gR3UJ/mSYS90X4R3znXnqfNA==}
+  '@iconify/utils@2.3.0':
+    resolution: {integrity: sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA==}
 
   '@img/sharp-darwin-arm64@0.33.5':
     resolution: {integrity: sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==}
@@ -2683,7 +2686,7 @@ packages:
     resolution: {integrity: sha512-PR9zDb+rOzkRb2VD+EuKB7UC41vU5DIwZ5qqCpk0KJudcWAyi8rvYOhS7+L5aZCspw1stTViLgN5v6FF1p5cgQ==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
-      rollup: ^4.34.6
+      rollup: ^4.34.7
     peerDependenciesMeta:
       rollup:
         optional: true
@@ -2694,7 +2697,7 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0
       '@types/babel__core': ^7.1.9
-      rollup: ^4.34.6
+      rollup: ^4.34.7
     peerDependenciesMeta:
       '@types/babel__core':
         optional: true
@@ -2703,7 +2706,7 @@ packages:
     resolution: {integrity: sha512-+tNWdlWKbpB3WgBN7ijjYkq9X5uhjmcvyjEght4NmH5fAU++zfQzAJ6wumLS+dNcvwEZhKx2Z+skY8m7v0wGSA==}
     engines: {node: '>=16.0.0 || 14 >= 14.17'}
     peerDependencies:
-      rollup: ^4.34.6
+      rollup: ^4.34.7
     peerDependenciesMeta:
       rollup:
         optional: true
@@ -2712,7 +2715,7 @@ packages:
     resolution: {integrity: sha512-2+DEJbNBoPROPkgTDNe8/1YXWcqxbN5DTjASVIOx8HS+pITXushyNiBV56RB08zuptzz8gT3YfkqriTBVycepg==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
-      rollup: ^4.34.6
+      rollup: ^4.34.7
     peerDependenciesMeta:
       rollup:
         optional: true
@@ -2721,7 +2724,7 @@ packages:
     resolution: {integrity: sha512-EGI2te5ENk1coGeADSIwZ7G2Q8CJS2sF120T7jLw4xFw9n7wIOXHo+kIYRAoVpJAN+kmqZSoO3Fp4JtoNF4ReA==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
-      rollup: ^4.34.6
+      rollup: ^4.34.7
     peerDependenciesMeta:
       rollup:
         optional: true
@@ -2730,13 +2733,13 @@ packages:
     resolution: {integrity: sha512-yc2n43jcqVyGE2sqV5/YCmocy9ArjVAP/BeXyTtADTBBX6V0e5UMqwO8CdQ0kzjb6zu5P1qMzsScCMRvE9OlVg==}
     engines: {node: '>= 10.0.0'}
     peerDependencies:
-      rollup: ^4.34.6
+      rollup: ^4.34.7
 
   '@rollup/plugin-node-resolve@15.3.0':
     resolution: {integrity: sha512-9eO5McEICxMzJpDW9OnMYSv4Sta3hmt7VtBFz5zR9273suNOydOyq/FrGeGy+KsTRFm8w0SLVhzig2ILFT63Ag==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
-      rollup: ^4.34.6
+      rollup: ^4.34.7
     peerDependenciesMeta:
       rollup:
         optional: true
@@ -2744,13 +2747,13 @@ packages:
   '@rollup/plugin-replace@2.4.2':
     resolution: {integrity: sha512-IGcu+cydlUMZ5En85jxHH4qj2hta/11BHq95iHEyb2sbgiN0eCdzvUcHw5gt9pBL5lTi4JDYJ1acCoMGpTvEZg==}
     peerDependencies:
-      rollup: ^4.34.6
+      rollup: ^4.34.7
 
   '@rollup/plugin-replace@6.0.2':
     resolution: {integrity: sha512-7QaYCf8bqF04dOy7w/eHmJeNExxTYwvKAmlSAH/EaWWUzbT0h5sbF6bktFoX/0F/0qwng5/dWFMyf3gzaM8DsQ==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
-      rollup: ^4.34.6
+      rollup: ^4.34.7
     peerDependenciesMeta:
       rollup:
         optional: true
@@ -2759,7 +2762,7 @@ packages:
     resolution: {integrity: sha512-XHeJC5Bgvs8LfukDwWZp7yeqin6ns8RTl2B9avbejt6tZqsqvVoWI7ZTQrcNsfKEDWBTnTxM8nMDkO2IFFbd0A==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
-      rollup: ^4.34.6
+      rollup: ^4.34.7
     peerDependenciesMeta:
       rollup:
         optional: true
@@ -2768,7 +2771,7 @@ packages:
     resolution: {integrity: sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==}
     engines: {node: '>= 8.0.0'}
     peerDependencies:
-      rollup: ^4.34.6
+      rollup: ^4.34.7
 
   '@rollup/pluginutils@4.2.1':
     resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
@@ -2778,103 +2781,103 @@ packages:
     resolution: {integrity: sha512-USm05zrsFxYLPdWWq+K3STlWiT/3ELn3RcV5hJMghpeAIhxfsUIg6mt12CBJBInWMV4VneoV7SfGv8xIwo2qNQ==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
-      rollup: ^4.34.6
+      rollup: ^4.34.7
     peerDependenciesMeta:
       rollup:
         optional: true
 
-  '@rollup/rollup-android-arm-eabi@4.34.6':
-    resolution: {integrity: sha512-+GcCXtOQoWuC7hhX1P00LqjjIiS/iOouHXhMdiDSnq/1DGTox4SpUvO52Xm+div6+106r+TcvOeo/cxvyEyTgg==}
+  '@rollup/rollup-android-arm-eabi@4.34.7':
+    resolution: {integrity: sha512-l6CtzHYo8D2TQ3J7qJNpp3Q1Iye56ssIAtqbM2H8axxCEEwvN7o8Ze9PuIapbxFL3OHrJU2JBX6FIIVnP/rYyw==}
     cpu: [arm]
     os: [android]
 
-  '@rollup/rollup-android-arm64@4.34.6':
-    resolution: {integrity: sha512-E8+2qCIjciYUnCa1AiVF1BkRgqIGW9KzJeesQqVfyRITGQN+dFuoivO0hnro1DjT74wXLRZ7QF8MIbz+luGaJA==}
+  '@rollup/rollup-android-arm64@4.34.7':
+    resolution: {integrity: sha512-KvyJpFUueUnSp53zhAa293QBYqwm94TgYTIfXyOTtidhm5V0LbLCJQRGkQClYiX3FXDQGSvPxOTD/6rPStMMDg==}
     cpu: [arm64]
     os: [android]
 
-  '@rollup/rollup-darwin-arm64@4.34.6':
-    resolution: {integrity: sha512-z9Ib+OzqN3DZEjX7PDQMHEhtF+t6Mi2z/ueChQPLS/qUMKY7Ybn5A2ggFoKRNRh1q1T03YTQfBTQCJZiepESAg==}
+  '@rollup/rollup-darwin-arm64@4.34.7':
+    resolution: {integrity: sha512-jq87CjmgL9YIKvs8ybtIC98s/M3HdbqXhllcy9EdLV0yMg1DpxES2gr65nNy7ObNo/vZ/MrOTxt0bE5LinL6mA==}
     cpu: [arm64]
     os: [darwin]
 
-  '@rollup/rollup-darwin-x64@4.34.6':
-    resolution: {integrity: sha512-PShKVY4u0FDAR7jskyFIYVyHEPCPnIQY8s5OcXkdU8mz3Y7eXDJPdyM/ZWjkYdR2m0izD9HHWA8sGcXn+Qrsyg==}
+  '@rollup/rollup-darwin-x64@4.34.7':
+    resolution: {integrity: sha512-rSI/m8OxBjsdnMMg0WEetu/w+LhLAcCDEiL66lmMX4R3oaml3eXz3Dxfvrxs1FbzPbJMaItQiksyMfv1hoIxnA==}
     cpu: [x64]
     os: [darwin]
 
-  '@rollup/rollup-freebsd-arm64@4.34.6':
-    resolution: {integrity: sha512-YSwyOqlDAdKqs0iKuqvRHLN4SrD2TiswfoLfvYXseKbL47ht1grQpq46MSiQAx6rQEN8o8URtpXARCpqabqxGQ==}
+  '@rollup/rollup-freebsd-arm64@4.34.7':
+    resolution: {integrity: sha512-oIoJRy3ZrdsXpFuWDtzsOOa/E/RbRWXVokpVrNnkS7npz8GEG++E1gYbzhYxhxHbO2om1T26BZjVmdIoyN2WtA==}
     cpu: [arm64]
     os: [freebsd]
 
-  '@rollup/rollup-freebsd-x64@4.34.6':
-    resolution: {integrity: sha512-HEP4CgPAY1RxXwwL5sPFv6BBM3tVeLnshF03HMhJYCNc6kvSqBgTMmsEjb72RkZBAWIqiPUyF1JpEBv5XT9wKQ==}
+  '@rollup/rollup-freebsd-x64@4.34.7':
+    resolution: {integrity: sha512-X++QSLm4NZfZ3VXGVwyHdRf58IBbCu9ammgJxuWZYLX0du6kZvdNqPwrjvDfwmi6wFdvfZ/s6K7ia0E5kI7m8Q==}
     cpu: [x64]
     os: [freebsd]
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.34.6':
-    resolution: {integrity: sha512-88fSzjC5xeH9S2Vg3rPgXJULkHcLYMkh8faix8DX4h4TIAL65ekwuQMA/g2CXq8W+NJC43V6fUpYZNjaX3+IIg==}
+  '@rollup/rollup-linux-arm-gnueabihf@4.34.7':
+    resolution: {integrity: sha512-Z0TzhrsNqukTz3ISzrvyshQpFnFRfLunYiXxlCRvcrb3nvC5rVKI+ZXPFG/Aa4jhQa1gHgH3A0exHaRRN4VmdQ==}
     cpu: [arm]
     os: [linux]
 
-  '@rollup/rollup-linux-arm-musleabihf@4.34.6':
-    resolution: {integrity: sha512-wM4ztnutBqYFyvNeR7Av+reWI/enK9tDOTKNF+6Kk2Q96k9bwhDDOlnCUNRPvromlVXo04riSliMBs/Z7RteEg==}
+  '@rollup/rollup-linux-arm-musleabihf@4.34.7':
+    resolution: {integrity: sha512-nkznpyXekFAbvFBKBy4nNppSgneB1wwG1yx/hujN3wRnhnkrYVugMTCBXED4+Ni6thoWfQuHNYbFjgGH0MBXtw==}
     cpu: [arm]
     os: [linux]
 
-  '@rollup/rollup-linux-arm64-gnu@4.34.6':
-    resolution: {integrity: sha512-9RyprECbRa9zEjXLtvvshhw4CMrRa3K+0wcp3KME0zmBe1ILmvcVHnypZ/aIDXpRyfhSYSuN4EPdCCj5Du8FIA==}
+  '@rollup/rollup-linux-arm64-gnu@4.34.7':
+    resolution: {integrity: sha512-KCjlUkcKs6PjOcxolqrXglBDcfCuUCTVlX5BgzgoJHw+1rWH1MCkETLkLe5iLLS9dP5gKC7mp3y6x8c1oGBUtA==}
     cpu: [arm64]
     os: [linux]
 
-  '@rollup/rollup-linux-arm64-musl@4.34.6':
-    resolution: {integrity: sha512-qTmklhCTyaJSB05S+iSovfo++EwnIEZxHkzv5dep4qoszUMX5Ca4WM4zAVUMbfdviLgCSQOu5oU8YoGk1s6M9Q==}
+  '@rollup/rollup-linux-arm64-musl@4.34.7':
+    resolution: {integrity: sha512-uFLJFz6+utmpbR313TTx+NpPuAXbPz4BhTQzgaP0tozlLnGnQ6rCo6tLwaSa6b7l6gRErjLicXQ1iPiXzYotjw==}
     cpu: [arm64]
     os: [linux]
 
-  '@rollup/rollup-linux-loongarch64-gnu@4.34.6':
-    resolution: {integrity: sha512-4Qmkaps9yqmpjY5pvpkfOerYgKNUGzQpFxV6rnS7c/JfYbDSU0y6WpbbredB5cCpLFGJEqYX40WUmxMkwhWCjw==}
+  '@rollup/rollup-linux-loongarch64-gnu@4.34.7':
+    resolution: {integrity: sha512-ws8pc68UcJJqCpneDFepnwlsMUFoWvPbWXT/XUrJ7rWUL9vLoIN3GAasgG+nCvq8xrE3pIrd+qLX/jotcLy0Qw==}
     cpu: [loong64]
     os: [linux]
 
-  '@rollup/rollup-linux-powerpc64le-gnu@4.34.6':
-    resolution: {integrity: sha512-Zsrtux3PuaxuBTX/zHdLaFmcofWGzaWW1scwLU3ZbW/X+hSsFbz9wDIp6XvnT7pzYRl9MezWqEqKy7ssmDEnuQ==}
+  '@rollup/rollup-linux-powerpc64le-gnu@4.34.7':
+    resolution: {integrity: sha512-vrDk9JDa/BFkxcS2PbWpr0C/LiiSLxFbNOBgfbW6P8TBe9PPHx9Wqbvx2xgNi1TOAyQHQJ7RZFqBiEohm79r0w==}
     cpu: [ppc64]
     os: [linux]
 
-  '@rollup/rollup-linux-riscv64-gnu@4.34.6':
-    resolution: {integrity: sha512-aK+Zp+CRM55iPrlyKiU3/zyhgzWBxLVrw2mwiQSYJRobCURb781+XstzvA8Gkjg/hbdQFuDw44aUOxVQFycrAg==}
+  '@rollup/rollup-linux-riscv64-gnu@4.34.7':
+    resolution: {integrity: sha512-rB+ejFyjtmSo+g/a4eovDD1lHWHVqizN8P0Hm0RElkINpS0XOdpaXloqM4FBkF9ZWEzg6bezymbpLmeMldfLTw==}
     cpu: [riscv64]
     os: [linux]
 
-  '@rollup/rollup-linux-s390x-gnu@4.34.6':
-    resolution: {integrity: sha512-WoKLVrY9ogmaYPXwTH326+ErlCIgMmsoRSx6bO+l68YgJnlOXhygDYSZe/qbUJCSiCiZAQ+tKm88NcWuUXqOzw==}
+  '@rollup/rollup-linux-s390x-gnu@4.34.7':
+    resolution: {integrity: sha512-nNXNjo4As6dNqRn7OrsnHzwTgtypfRA3u3AKr0B3sOOo+HkedIbn8ZtFnB+4XyKJojIfqDKmbIzO1QydQ8c+Pw==}
     cpu: [s390x]
     os: [linux]
 
-  '@rollup/rollup-linux-x64-gnu@4.34.6':
-    resolution: {integrity: sha512-Sht4aFvmA4ToHd2vFzwMFaQCiYm2lDFho5rPcvPBT5pCdC+GwHG6CMch4GQfmWTQ1SwRKS0dhDYb54khSrjDWw==}
+  '@rollup/rollup-linux-x64-gnu@4.34.7':
+    resolution: {integrity: sha512-9kPVf9ahnpOMSGlCxXGv980wXD0zRR3wyk8+33/MXQIpQEOpaNe7dEHm5LMfyRZRNt9lMEQuH0jUKj15MkM7QA==}
     cpu: [x64]
     os: [linux]
 
-  '@rollup/rollup-linux-x64-musl@4.34.6':
-    resolution: {integrity: sha512-zmmpOQh8vXc2QITsnCiODCDGXFC8LMi64+/oPpPx5qz3pqv0s6x46ps4xoycfUiVZps5PFn1gksZzo4RGTKT+A==}
+  '@rollup/rollup-linux-x64-musl@4.34.7':
+    resolution: {integrity: sha512-7wJPXRWTTPtTFDFezA8sle/1sdgxDjuMoRXEKtx97ViRxGGkVQYovem+Q8Pr/2HxiHp74SSRG+o6R0Yq0shPwQ==}
     cpu: [x64]
     os: [linux]
 
-  '@rollup/rollup-win32-arm64-msvc@4.34.6':
-    resolution: {integrity: sha512-3/q1qUsO/tLqGBaD4uXsB6coVGB3usxw3qyeVb59aArCgedSF66MPdgRStUd7vbZOsko/CgVaY5fo2vkvPLWiA==}
+  '@rollup/rollup-win32-arm64-msvc@4.34.7':
+    resolution: {integrity: sha512-MN7aaBC7mAjsiMEZcsJvwNsQVNZShgES/9SzWp1HC9Yjqb5OpexYnRjF7RmE4itbeesHMYYQiAtUAQaSKs2Rfw==}
     cpu: [arm64]
     os: [win32]
 
-  '@rollup/rollup-win32-ia32-msvc@4.34.6':
-    resolution: {integrity: sha512-oLHxuyywc6efdKVTxvc0135zPrRdtYVjtVD5GUm55I3ODxhU/PwkQFD97z16Xzxa1Fz0AEe4W/2hzRtd+IfpOA==}
+  '@rollup/rollup-win32-ia32-msvc@4.34.7':
+    resolution: {integrity: sha512-aeawEKYswsFu1LhDM9RIgToobquzdtSc4jSVqHV8uApz4FVvhFl/mKh92wc8WpFc6aYCothV/03UjY6y7yLgbg==}
     cpu: [ia32]
     os: [win32]
 
-  '@rollup/rollup-win32-x64-msvc@4.34.6':
-    resolution: {integrity: sha512-0PVwmgzZ8+TZ9oGBmdZoQVXflbvuwzN/HRclujpl4N/q3i+y0lqLw8n1bXA8ru3sApDjlmONaNAuYr38y1Kr9w==}
+  '@rollup/rollup-win32-x64-msvc@4.34.7':
+    resolution: {integrity: sha512-4ZedScpxxIrVO7otcZ8kCX1mZArtH2Wfj3uFCxRJ9NO80gg1XV0U/b2f/MKaGwj2X3QopHfoWiDQ917FRpwY3w==}
     cpu: [x64]
     os: [win32]
 
@@ -3072,8 +3075,8 @@ packages:
   '@types/wrap-ansi@3.0.0':
     resolution: {integrity: sha512-ltIpx+kM7g/MLRZfkbL7EsCEjfzCcScLpkg37eXEtx5kmrAKBkTJwd1GIAjDSL8wTpM6Hzn5YO4pSb91BEwu1g==}
 
-  '@typescript-eslint/eslint-plugin@8.23.0':
-    resolution: {integrity: sha512-vBz65tJgRrA1Q5gWlRfvoH+w943dq9K1p1yDBY2pc+a1nbBLZp7fB9+Hk8DaALUbzjqlMfgaqlVPT1REJdkt/w==}
+  '@typescript-eslint/eslint-plugin@8.24.0':
+    resolution: {integrity: sha512-aFcXEJJCI4gUdXgoo/j9udUYIHgF23MFkg09LFz2dzEmU0+1Plk4rQWv/IYKvPHAtlkkGoB3m5e6oUp+JPsNaQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       '@typescript-eslint/parser': ^8.0.0 || ^8.0.0-alpha.0
@@ -3087,35 +3090,21 @@ packages:
       eslint: ^9.20.1
       typescript: '>=4.8.4 <5.8.0'
 
-  '@typescript-eslint/scope-manager@8.23.0':
-    resolution: {integrity: sha512-OGqo7+dXHqI7Hfm+WqkZjKjsiRtFUQHPdGMXzk5mYXhJUedO7e/Y7i8AK3MyLMgZR93TX4bIzYrfyVjLC+0VSw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@typescript-eslint/scope-manager@8.24.0':
     resolution: {integrity: sha512-HZIX0UByphEtdVBKaQBgTDdn9z16l4aTUz8e8zPQnyxwHBtf5vtl1L+OhH+m1FGV9DrRmoDuYKqzVrvWDcDozw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/type-utils@8.23.0':
-    resolution: {integrity: sha512-iIuLdYpQWZKbiH+RkCGc6iu+VwscP5rCtQ1lyQ7TYuKLrcZoeJVpcLiG8DliXVkUxirW/PWlmS+d6yD51L9jvA==}
+  '@typescript-eslint/type-utils@8.24.0':
+    resolution: {integrity: sha512-8fitJudrnY8aq0F1wMiPM1UUgiXQRJ5i8tFjq9kGfRajU+dbPyOuHbl0qRopLEidy0MwqgTHDt6CnSeXanNIwA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^9.20.1
       typescript: '>=4.8.4 <5.8.0'
 
-  '@typescript-eslint/types@8.23.0':
-    resolution: {integrity: sha512-1sK4ILJbCmZOTt9k4vkoulT6/y5CHJ1qUYxqpF1K/DBAd8+ZUL4LlSCxOssuH5m4rUaaN0uS0HlVPvd45zjduQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@typescript-eslint/types@8.24.0':
     resolution: {integrity: sha512-VacJCBTyje7HGAw7xp11q439A+zeGG0p0/p2zsZwpnMzjPB5WteaWqt4g2iysgGFafrqvyLWqq6ZPZAOCoefCw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/typescript-estree@8.23.0':
-    resolution: {integrity: sha512-LcqzfipsB8RTvH8FX24W4UUFk1bl+0yTOf9ZA08XngFwMg4Kj8A+9hwz8Cr/ZS4KwHrmo9PJiLZkOt49vPnuvQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <5.8.0'
-
   '@typescript-eslint/typescript-estree@8.24.0':
     resolution: {integrity: sha512-ITjYcP0+8kbsvT9bysygfIfb+hBj6koDsu37JZG7xrCiy3fPJyNmfVtaGsgTUSEuTzcvME5YI5uyL5LD1EV5ZQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -3129,10 +3118,6 @@ packages:
       eslint: ^9.20.1
       typescript: '>=4.8.4 <5.8.0'
 
-  '@typescript-eslint/visitor-keys@8.23.0':
-    resolution: {integrity: sha512-oWWhcWDLwDfu++BGTZcmXWqpwtkwb5o7fxUIGksMQQDSdPW9prsSnfIOZMlsj4vBOSrcnjIUZMiIjODgGosFhQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@typescript-eslint/visitor-keys@8.24.0':
     resolution: {integrity: sha512-kArLq83QxGLbuHrTMoOEWO+l2MwsNS2TGISEdx8xgqpkbytB07XmlQyQdNDrCc1ecSqx0cnmhGvpX+VBwqqSkg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -3162,83 +3147,83 @@ packages:
     peerDependencies:
       vue: ^3.5.13
 
-  '@unocss/astro@65.4.3':
-    resolution: {integrity: sha512-yhPKH4CT2CFjvKR8lL6oS/7jarMWp4iSnYcNlTlZLmvTIS3dGxyhAsVy/xkdzdJ6sM+6FS0hUuQNv+NYvArRNg==}
+  '@unocss/astro@65.5.0':
+    resolution: {integrity: sha512-z0uLbOQhINYpd57p0p/fpVeBY1+Rv0t4GQQUMF00tH8tpIHGUdyHH9aE/yGZaeLI2onmaShTDgIVXT+7fR9fMw==}
     peerDependencies:
       vite: ^6.1.0
     peerDependenciesMeta:
       vite:
         optional: true
 
-  '@unocss/cli@65.4.3':
-    resolution: {integrity: sha512-pZESqf5tS5AjATkAP11M0ecIiias0//nir7MgUQLs/v2GX0x7K0KhVTJ50TiFePff0TnwTHheDNJGR3gesDiVg==}
+  '@unocss/cli@65.5.0':
+    resolution: {integrity: sha512-RZvAlu7vWIyeQr1TqFb5JsL95MWmDfopX9EaScUy5zuMjE05kvlPj4kM5y39N3XIpEDYWqI7WdwwrPqU45UraQ==}
     engines: {node: '>=14'}
     hasBin: true
 
-  '@unocss/config@65.4.3':
-    resolution: {integrity: sha512-Z3tnQ10UjM09Y1yVqfCYfZEh2pXFQlUQ1g188mMWxjXWEIXeei3f9dIApRBgC+xcPE6prqdu3fDC5emU+sqyxw==}
+  '@unocss/config@65.5.0':
+    resolution: {integrity: sha512-XK9Y3Z1m3oPXQl5pVOYk6+pltsk70RHFvsAtTyFd5G5kAHzQS/em4/lL6/0IubU7rn2j+9eHeCVOiWXW9lnvYA==}
     engines: {node: '>=14'}
 
-  '@unocss/core@65.4.3':
-    resolution: {integrity: sha512-luFgdcchSlNrYSaDvU2176T2PPQZdxqfREVbxEXNXlFEgyEFrx5hOSUXoJtJSZjRhAcE6zkWyLDf/JkQJ5Eeyw==}
+  '@unocss/core@65.5.0':
+    resolution: {integrity: sha512-XYWdS09M2XOjZNDotGhI2TIW/6duLNiyssopwjCbv4AlPklF0bZI86SKI55syYDBt6GRadoQbuvUkhSiTV/hzQ==}
 
-  '@unocss/extractor-arbitrary-variants@65.4.3':
-    resolution: {integrity: sha512-RhSOOzOxkNjJl9zeglaBe0U+o39jleCCNPWJ87DDJA3ckbyylIIf21ZwY1Xu76rmdar5DT9ob7ucuPfEpJLN9A==}
+  '@unocss/extractor-arbitrary-variants@65.5.0':
+    resolution: {integrity: sha512-7K3gftOdkv9jbWvbkExTcx6/FDP2Xk/NSsOYTvR9oITLnLjmdQvp+9276WSnNfKF3frBl8ZcqpkC2EsuL2Yutw==}
 
-  '@unocss/inspector@65.4.3':
-    resolution: {integrity: sha512-mj3K0WtnP0DuonQPzxkXhLMBU5qi13dpxaJcEOSv+EBMPlJbww0bj7K7uaFqXv8LPufs/hkQzI9yjOrEzR5WBQ==}
+  '@unocss/inspector@65.5.0':
+    resolution: {integrity: sha512-dhAijjVblrAUqHjqB2p4JhNTpRo85BTi6SLbG+ePwGsIL9oxNXtN57O2mzp1mSEKS1C+QjHmRV7u+gh8Bj93Zg==}
 
-  '@unocss/postcss@65.4.3':
-    resolution: {integrity: sha512-ZHlWfArfhhWBVhUeAETrtnD7nhqpfXv5muGrJCSDHmjgFJX8jtDa6rf52ICCFWEOe8p2dku7o27o26pGXYTYJg==}
+  '@unocss/postcss@65.5.0':
+    resolution: {integrity: sha512-mSGLX0KgygPhICZlUrjLgDJsEkgtrTjkDRI4skC7ZB/2pwQaESg8M3vhtWK/6XK+WGriUowfd5n6F6cfX3c2eg==}
     engines: {node: '>=14'}
     peerDependencies:
       postcss: ^8.4.21
 
-  '@unocss/preset-attributify@65.4.3':
-    resolution: {integrity: sha512-kN8levkt+BwzzWKA6glthasuFt/Cplc70oxzAYd/gZcosxwDK5+MmxjGDG5aLLu2PA58tPHUZ+ltW/QG5BM+Xw==}
+  '@unocss/preset-attributify@65.5.0':
+    resolution: {integrity: sha512-l3xQK6Om5fNknck04OZy3X7+k0EmVTEzF6BBMCYVaT2ZtCLhlznVt7tEg4ESLuXIZfx/+jd2sW3E3UY/EJ8rUA==}
 
-  '@unocss/preset-icons@65.4.3':
-    resolution: {integrity: sha512-g1WNamvYOIdD8YAOvZ5h4g3peel3rLTtKvB0wX4pVL5exsYsoyc0tmiGm57k+ZmnIucqSzxoUZ/vjHDLAViahw==}
+  '@unocss/preset-icons@65.5.0':
+    resolution: {integrity: sha512-lSwMNtj4nufpQDBFoioAM9S6hP8028lA9fLFM3Vw+KmI10/3TaZyOaCXJVH5UdsfNWexGGo/Qo+K1YFWfXLZ8A==}
 
-  '@unocss/preset-mini@65.4.3':
-    resolution: {integrity: sha512-JajAF18DKJRXgd9usrAYTcHUtZy606mD396ZswDgw/mUSu529tuiT6LOD43aJMYHgPEw7wKYjiGFHkeBTHijuQ==}
+  '@unocss/preset-mini@65.5.0':
+    resolution: {integrity: sha512-oD2INmEgTOxmFsVceflv4Zs67vz9PRbpg3+CMsJLWgfX4UdQ1H4jZms72+g3N1hhXBvOFwvGvqGaMnrVMRk54g==}
 
-  '@unocss/preset-tagify@65.4.3':
-    resolution: {integrity: sha512-8/MbMbgdvj1A87XNVVzD8gFVqywaSJAD3Bv8RwjcFn0rwlgZY0PdTBYo3M3FH25axb4znzXBmLZdEBVZOGUosg==}
+  '@unocss/preset-tagify@65.5.0':
+    resolution: {integrity: sha512-m0CfBawgf4VQlbaijgeWXG6vXEOt4VsNIk1NLUyRM0GBMiOB3usb1tPLWJtRpje6p+bR+k4rpe4LsPMHhKtFfQ==}
 
-  '@unocss/preset-typography@65.4.3':
-    resolution: {integrity: sha512-DEo7GECG0AQ8FkzH/x8QCEL5BR1D+GNoxHGmNxc7rFKghJONVyJ3jROA9mDmWNAva8JygN4Up+lzPZG3mNYezQ==}
+  '@unocss/preset-typography@65.5.0':
+    resolution: {integrity: sha512-lokYOVF/y1Zt1QufxrD/oJe4aUCK6hHPlisSJRReyKXuGUrBR9yWiIZfINqhkj3kMO6zzN23QiaA5E5cpUkDPg==}
 
-  '@unocss/preset-uno@65.4.3':
-    resolution: {integrity: sha512-gxELOQwR3YbMLR+WjYz3m/Zb6VXa8O0Xln0rfS2TI7OXXoQ1twak5zwYPrOI5fJF8lJ5yyKUiXiOR8UEPBpoCQ==}
+  '@unocss/preset-uno@65.5.0':
+    resolution: {integrity: sha512-aVlSjzBc7IqNFgfu06qyP+CBRRGMNQLoQtZteRwa/vsUcTqGLzo7KhvkDazPEKpurmurXiymrvujTHInW0IooQ==}
 
-  '@unocss/preset-web-fonts@65.4.3':
-    resolution: {integrity: sha512-edkyohQ4+qjuOxIJf+NeQiEayB47A9eA2NhBLbcqZ0OfMpN8tRZPVW5cyB3b5Ef253NGMd4S8H/96vGTBpqOBA==}
+  '@unocss/preset-web-fonts@65.5.0':
+    resolution: {integrity: sha512-zWPsQiMSCoP61J8DX++3Z8Ncs20a3rdBb3uI7bDzHdf9MZEIhKzYYchpYO9Dfw7pzclECeuKhq5IjPjM1lmPUQ==}
 
-  '@unocss/preset-wind@65.4.3':
-    resolution: {integrity: sha512-KM13xIARNeZ/ZKJr33fZ89l79wgI+1Oo8VPJzmckLjbH9IGOhcH2GON7wVIxQqqqM9IM3vALEqw2KNdM6ontWw==}
+  '@unocss/preset-wind@65.5.0':
+    resolution: {integrity: sha512-3krOUZ5qC2J3JGheZsTDNbzqr9qYJw9GP1yEcfeE6K3qVcZnf+3DyJ0i1PuaM5SusOA0MBsHmCU49rLKurdyoA==}
 
-  '@unocss/reset@65.4.3':
-    resolution: {integrity: sha512-f9QnMtY1yPS1HEIkeKmSwUYcp4QS6zdo9ZcIFE9PDSLOcns3v+M1lTQg8mLChxJHVl73Cf6PofWVh5tmnxV53Q==}
+  '@unocss/reset@65.5.0':
+    resolution: {integrity: sha512-jADqiBAfOO9aZNpnsmxc7WX7vIIxyalcmCJ7fwdyPRmFhxZZ5ZoSYsHDt0Wfn/W2BRQkLjXWL0956nXH0lz79Q==}
 
-  '@unocss/rule-utils@65.4.3':
-    resolution: {integrity: sha512-bzRRdb9mb82IvgOt3KiRyUh/njRfJC3hoV84lMyUPryT8YTEP/hl6kt2KQ2l1K3WDz7ZPQXVi2eqUbqc+AUpwg==}
+  '@unocss/rule-utils@65.5.0':
+    resolution: {integrity: sha512-xT4N0EY1dl1mqY5gTKD0H/Fg6xApe7xbfNTUwctOu02DMeJhqv9BTqfoAihH/hzGSI69+FtzVtz7hUxTypfehA==}
     engines: {node: '>=14'}
 
-  '@unocss/transformer-attributify-jsx@65.4.3':
-    resolution: {integrity: sha512-GI0joW6+jG3sLMzqDxT/Nr0lGarHKsXQzpKQt1LfBGEDgNSQZtDZ1IGlkdZeErRFvWcDLWU0xm2LikLS4Az8kw==}
+  '@unocss/transformer-attributify-jsx@65.5.0':
+    resolution: {integrity: sha512-ZWSGKw52h8nJSO1DaYGccjjNaBifl4LKJ4U0YpjaF2LDLA5BLBapUtyjTS7ffl6p7GZNokA6VUGL+MXPw+oDXg==}
 
-  '@unocss/transformer-compile-class@65.4.3':
-    resolution: {integrity: sha512-AzLeic0ESQ/yhLKfkSsQ72wQLkKEPsmX578+ZKcPSRh/HM5tfNz8RqffOHr6YOEKKTaZHN23OqbA511amRKC1w==}
+  '@unocss/transformer-compile-class@65.5.0':
+    resolution: {integrity: sha512-7QMtWhUVKkSYFCDzinR8PPubhLFA+KVJMoHCTX1KTw/lQ5Zt7/FiwLX5zepc50K3074dPgR3hWn5PpK+CZeq7g==}
 
-  '@unocss/transformer-directives@65.4.3':
-    resolution: {integrity: sha512-e3zZYjXqHSWb6YrC09/FnCsndhZdRzmYhPubTzOjnvb5K0ihIiLvHx9c2TRPWvMspXs0wHKQsLW5fAs8oyimeQ==}
+  '@unocss/transformer-directives@65.5.0':
+    resolution: {integrity: sha512-IsUd7L28bRAoN5fyWyNzHu7HOa1yjPqTU/QZfUEViJXApOEKUZ4anBSyU0lPU+59kMneg40xOvCBR70qNMCw4w==}
 
-  '@unocss/transformer-variant-group@65.4.3':
-    resolution: {integrity: sha512-nZNgKLclhIjfuqCaZTmJwhWSByL7vnhb3l/ChRX4qtWOweRLro79r6MvfcqQNrweK5nCw4yibsXCrFUWq7Jj5w==}
+  '@unocss/transformer-variant-group@65.5.0':
+    resolution: {integrity: sha512-I0ibbLRGI/9+BJy0yybxtmoYPIwGPMfwQDAvChhFXmokJG1YMpeJqPBI7fypHfbk/iO00W5lOGQ4XiIfsHfiHg==}
 
-  '@unocss/vite@65.4.3':
-    resolution: {integrity: sha512-YajF8Z2J/KvXdnC5BsGJjt3fm4D14vmYaHdlTyzi92Rkh/67JtaCz2OhElDoF6k4S4fm9B8uLRP10p+smRe9Fw==}
+  '@unocss/vite@65.5.0':
+    resolution: {integrity: sha512-v2rFIrBaWGQmSJeKv7us+2OMos2RqdZYpf/seOpf4MFHrmjjiFQ1ZWkTqFyNfUxAwj6VID5frVJhxJfZuEhhug==}
     peerDependencies:
       vite: ^6.1.0
 
@@ -3294,8 +3279,8 @@ packages:
       '@vitest/browser':
         optional: true
 
-  '@vitest/eslint-plugin@1.1.27':
-    resolution: {integrity: sha512-aGPTmeaNiUDo2OIMPj1HKiF5q4fu2IIA9lMc0AwOk0nOvL2kLmQBY8AbFmYj895ApzamN46UtQYmxlRSjbTZqQ==}
+  '@vitest/eslint-plugin@1.1.31':
+    resolution: {integrity: sha512-xlsLr+e+AXZ/00eVZCtNmMeCJoJaRCoLDiAgLcxgQjSS1EertieB2MUHf8xIqPKs9lECc/UpL+y1xDcpvi02hw==}
     peerDependencies:
       '@typescript-eslint/utils': ^8.24.0
       eslint: ^9.20.1
@@ -4404,6 +4389,11 @@ packages:
     peerDependencies:
       eslint: ^9.20.1
 
+  eslint-factory@0.1.2:
+    resolution: {integrity: sha512-0APUA89aVVxJ0BnP84Wbg1dx9co9ZixotdKjO0S0jz6uq51ev2JBNXpeu5do9oasEc9dn+v7wywUA2WBbmB/RA==}
+    peerDependencies:
+      eslint: ^9.20.1
+
   eslint-flat-config-utils@2.0.1:
     resolution: {integrity: sha512-brf0eAgQ6JlKj3bKfOTuuI7VcCZvi8ZCD1MMTVoEvS/d38j8cByZViLFALH/36+eqB17ukmfmKq3bWzGvizejA==}
 
@@ -4434,13 +4424,13 @@ packages:
   eslint-parser-plain@0.1.1:
     resolution: {integrity: sha512-KRgd6wuxH4U8kczqPp+Oyk4irThIhHWxgFgLDtpgjUGVIS3wGrJntvZW/p6hHq1T4FOwnOtCNkvAI4Kr+mQ/Hw==}
 
-  eslint-plugin-antfu@3.0.0:
-    resolution: {integrity: sha512-USaQMR17+l7a0XWS9Pk0T+t9PszkdeIncyAOp1vsjHQnDKIlusSg+9bwTYWIzlJXkHDarAI06cdt+d5mbAGEKA==}
+  eslint-plugin-antfu@3.1.0:
+    resolution: {integrity: sha512-BKlJcpIG8OGyU5JwQCdyTGaLuRgItheEYinhNroCx3bcuz2bCSYK0eNzJvPy2TY8yyz0uSSRxr5KHuQ1WOdOKg==}
     peerDependencies:
       eslint: ^9.20.1
 
-  eslint-plugin-command@3.0.0:
-    resolution: {integrity: sha512-6EFOKGnBMHr0dN/9uKYmxYz6RbsCmEzPRcKYrl+dfEMvlt6+zf6x5TzXKzOowhh3f/hqSBMZmxcB3HHyfbpwWw==}
+  eslint-plugin-command@3.1.0:
+    resolution: {integrity: sha512-KLgxB8NMQ0iL7iwehyeqWVE7MaqRPwLTGW4d2CXYOj5tt4j6yU/hiNxQ/35FLq4SnMhv+tpE6FCvYbV4VS+BLw==}
     peerDependencies:
       eslint: ^9.20.1
 
@@ -4483,8 +4473,8 @@ packages:
     resolution: {integrity: sha512-brcKcxGnISN2CcVhXJ/kEQlNa0MEfGRtwKtWA16SkqXHKitaKIMrfemJKLKX1YqDU5C/5JY3PvZXd5jEW04e0Q==}
     engines: {node: '>=5.0.0'}
 
-  eslint-plugin-perfectionist@4.8.0:
-    resolution: {integrity: sha512-ZF04IAPGItYMlj9xjgvvl/QpksZf79g0dkxbNcuxDjbcUSZ4CwucJ7h5Yzt5JuHe+i6igQbUYEp40j4ndfbvWQ==}
+  eslint-plugin-perfectionist@4.9.0:
+    resolution: {integrity: sha512-76lDfJnonOcXGW3bEXuqhEGId0LrOlvIE1yLHvK/eKMMPOc0b43KchAIR2Bdbqlg+LPXU5/Q+UzuzkO+cWHT6w==}
     engines: {node: ^18.0.0 || >=20.0.0}
     peerDependencies:
       eslint: ^9.20.1
@@ -4507,6 +4497,11 @@ packages:
     peerDependencies:
       eslint: ^9.20.1
 
+  eslint-plugin-unimport@0.1.2:
+    resolution: {integrity: sha512-C021i+pdXLZXlXwS9QGyRjxYo4PAB7QiOT89GgwwtvcBOhiQpfZFCCLya7iH1ALBICgrKM7GqRSKhUUNTXWALA==}
+    peerDependencies:
+      eslint: ^9.20.1
+
   eslint-plugin-unused-imports@4.1.4:
     resolution: {integrity: sha512-YptD6IzQjDardkl0POxnnRBhU1OEePMV0nd6siHaRBbd+lyh6NAhFEobiznKU7kTsSsDeSD62Pe7kAM1b7dAZQ==}
     peerDependencies:
@@ -4929,8 +4924,8 @@ packages:
     resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
     engines: {node: '>=18'}
 
-  globals@15.14.0:
-    resolution: {integrity: sha512-OkToC372DtlQeje9/zHIo5CT8lRP/FUgEOKBEhU4e0abL7J7CD24fD9ohiLN5hagG/kWCYj4K5oaxxtj2Z0Dig==}
+  globals@15.15.0:
+    resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==}
     engines: {node: '>=18'}
 
   globalthis@1.0.3:
@@ -6228,8 +6223,8 @@ packages:
   pathe@1.1.2:
     resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
 
-  pathe@2.0.2:
-    resolution: {integrity: sha512-15Ztpk+nov8DR524R4BF7uEuzESgzUEAV4Ah7CUMNGXdE5ELuvxElxGXndBl32vMSsWa1jpNf22Z+Er3sKwq+w==}
+  pathe@2.0.3:
+    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
 
   pathval@2.0.0:
     resolution: {integrity: sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==}
@@ -6734,7 +6729,7 @@ packages:
     resolution: {integrity: sha512-aSHRcJ6KG2IHIioYlvAOcEq6U99sVtqDDKVhnwt70rW6tsz3tv5OSjEiWcgzfsHdLyGXZ/3b/7b/+Za3Y6r1XA==}
     engines: {node: '>=16'}
     peerDependencies:
-      rollup: ^4.34.6
+      rollup: ^4.34.7
       typescript: ^4.5 || ^5.0
 
   rollup-plugin-esbuild@6.2.0:
@@ -6742,18 +6737,18 @@ packages:
     engines: {node: '>=14.18.0'}
     peerDependencies:
       esbuild: '>=0.18.0'
-      rollup: ^4.34.6
+      rollup: ^4.34.7
 
   rollup-plugin-pure@0.2.1:
     resolution: {integrity: sha512-syrId5HjF7P0EsxxSqcaQJo7csAH+o7x2kYnrJZOdYYT3ANXiTuYw/FcGi9d2MagRq5T7nYnVD5ogoHrNbGqYA==}
     peerDependencies:
-      rollup: ^4.34.6
+      rollup: ^4.34.7
 
   rollup-plugin-terser@7.0.2:
     resolution: {integrity: sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==}
     deprecated: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser
     peerDependencies:
-      rollup: ^4.34.6
+      rollup: ^4.34.7
 
   rollup-plugin-visualizer@5.14.0:
     resolution: {integrity: sha512-VlDXneTDaKsHIw8yzJAFWtrzguoJ/LnQ+lMpoVfYJ3jJF4Ihe5oYLAqLklIK/35lgUY+1yEzCkHyZ1j4A5w5fA==}
@@ -6761,15 +6756,15 @@ packages:
     hasBin: true
     peerDependencies:
       rolldown: 1.x
-      rollup: ^4.34.6
+      rollup: ^4.34.7
     peerDependenciesMeta:
       rolldown:
         optional: true
       rollup:
         optional: true
 
-  rollup@4.34.6:
-    resolution: {integrity: sha512-wc2cBWqJgkU3Iz5oztRkQbfVkbxoz5EhnCGOrnJvnLnQ7O0WhQUYyv18qQI79O8L7DdHrrlJNeCHd4VGpnaXKQ==}
+  rollup@4.34.7:
+    resolution: {integrity: sha512-8qhyN0oZ4x0H6wmBgfKxJtxM7qS98YJ0k0kNh5ECVtuchIJ7z9IVVvzpmtQyT10PXKMtBxYr1wQ5Apg8RS8kXQ==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
@@ -7335,6 +7330,9 @@ packages:
   unconfig@0.6.1:
     resolution: {integrity: sha512-cVU+/sPloZqOyJEAfNwnQSFCzFrZm85vcVkryH7lnlB/PiTycUkAjt5Ds79cfIshGOZ+M5v3PBDnKgpmlE5DtA==}
 
+  unconfig@7.0.0:
+    resolution: {integrity: sha512-G5CJSoG6ZTxgzCJblEfgpdRK2tos9+UdD2WtecDUVfImzQ0hFjwpH5RVvGMhP4pRpC9ML7NrC4qBsBl0Ttj35A==}
+
   uncrypto@0.1.3:
     resolution: {integrity: sha512-Ql87qFHB3s/De2ClA9e0gsnS6zXG27SkTiSJwjCc9MebbfapQfuPzumMIUMi38ezPZVNFcHI9sUIepeQfw8J8Q==}
 
@@ -7418,11 +7416,11 @@ packages:
     resolution: {integrity: sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==}
     engines: {node: '>= 10.0.0'}
 
-  unocss@65.4.3:
-    resolution: {integrity: sha512-mwSVi0ovPxaDv58yFB7Vm5v1x/q/pUc7aTh7SJbeYoRrpbUGdKiVf20YSQfMqmBNXV9CFDr4o6tabP/58as6RQ==}
+  unocss@65.5.0:
+    resolution: {integrity: sha512-dLTW89YK+5KCcB3vG/wxiwdpejkLLmZlK9hjWmP52sdeUFcmywc+/khD2/nid7or8dL3YCv1gwoyvnA7JRCwjA==}
     engines: {node: '>=14'}
     peerDependencies:
-      '@unocss/webpack': 65.4.3
+      '@unocss/webpack': 65.5.0
       vite: ^6.1.0
     peerDependenciesMeta:
       '@unocss/webpack':
@@ -7453,12 +7451,12 @@ packages:
       vue-template-es2015-compiler:
         optional: true
 
-  unplugin-utils@0.2.3:
-    resolution: {integrity: sha512-unB2e2ogZwEoMw/X0Gq1vj2jaRKLmTh9wcSEJggESPllcrZI68uO7B8ykixbXqsSwG8r9T7qaHZudXIC/3qvhw==}
+  unplugin-utils@0.2.4:
+    resolution: {integrity: sha512-8U/MtpkPkkk3Atewj1+RcKIjb5WBimZ/WSLhhR3w6SsIj8XJuKTacSP8g+2JhfSGw0Cb125Y+2zA/IzJZDVbhA==}
     engines: {node: '>=18.12.0'}
 
-  unplugin-vue-components@28.0.0:
-    resolution: {integrity: sha512-vYe0wSyqTVhyNFIad1iiGyQGhG++tDOMgohqenMDOAooMJP9vvzCdXTqCVx20A0rCQXFNjgoRbSeDAioLPH36Q==}
+  unplugin-vue-components@28.1.0:
+    resolution: {integrity: sha512-ScHoDBTf7NVxM+YzzV1b1YNHU1rRnLWIG5hhD8D3hKjgYLd6FNJife0zQhUafv3NKuGLdujRgoqy2vcdt7a55g==}
     engines: {node: '>=14'}
     peerDependencies:
       '@babel/parser': ^7.15.8
@@ -7486,6 +7484,10 @@ packages:
     resolution: {integrity: sha512-Q3LU0e4zxKfRko1wMV2HmP8lB9KWislY7hxXpxd+lGx0PRInE4vhMBVEZwpdVYHvtqzhSrzuIfErsob6bQfCzw==}
     engines: {node: '>=18.12.0'}
 
+  unplugin@2.2.0:
+    resolution: {integrity: sha512-m1ekpSwuOT5hxkJeZGRxO7gXbXT3gF26NjQ7GdVHoLoF8/nopLcd/QfPigpCy7i51oFHiRJg/CyHhj4vs2+KGw==}
+    engines: {node: '>=18.12.0'}
+
   unstorage@1.14.4:
     resolution: {integrity: sha512-1SYeamwuYeQJtJ/USE1x4l17LkmQBzg7deBJ+U9qOBoHo15d1cDxG4jM31zKRgF7pG0kirZy4wVMX6WL6Zoscg==}
     peerDependencies:
@@ -8186,40 +8188,40 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.5
       '@jridgewell/trace-mapping': 0.3.25
 
-  '@antfu/eslint-config@4.2.0(@typescript-eslint/utils@8.24.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3))(@vue/compiler-sfc@3.5.13)(eslint-plugin-format@1.0.1(eslint@9.20.1(jiti@2.4.2)))(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)(vitest@3.0.5)':
+  '@antfu/eslint-config@4.2.1(@typescript-eslint/utils@8.24.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3))(@vue/compiler-sfc@3.5.13)(eslint-plugin-format@1.0.1(eslint@9.20.1(jiti@2.4.2)))(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)(vitest@3.0.5)':
     dependencies:
       '@antfu/install-pkg': 1.0.0
       '@clack/prompts': 0.10.0
       '@eslint-community/eslint-plugin-eslint-comments': 4.4.1(eslint@9.20.1(jiti@2.4.2))
       '@eslint/markdown': 6.2.2
       '@stylistic/eslint-plugin': 4.0.0-beta.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)
-      '@typescript-eslint/eslint-plugin': 8.23.0(@typescript-eslint/parser@8.24.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3))(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)
+      '@typescript-eslint/eslint-plugin': 8.24.0(@typescript-eslint/parser@8.24.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3))(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)
       '@typescript-eslint/parser': 8.24.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)
-      '@vitest/eslint-plugin': 1.1.27(@typescript-eslint/utils@8.24.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3))(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)(vitest@3.0.5)
+      '@vitest/eslint-plugin': 1.1.31(@typescript-eslint/utils@8.24.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3))(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)(vitest@3.0.5)
+      ansis: 3.14.0
       eslint: 9.20.1(jiti@2.4.2)
       eslint-config-flat-gitignore: 2.0.0(eslint@9.20.1(jiti@2.4.2))
       eslint-flat-config-utils: 2.0.1
       eslint-merge-processors: 2.0.0(eslint@9.20.1(jiti@2.4.2))
-      eslint-plugin-antfu: 3.0.0(eslint@9.20.1(jiti@2.4.2))
-      eslint-plugin-command: 3.0.0(eslint@9.20.1(jiti@2.4.2))
+      eslint-plugin-antfu: 3.1.0(eslint@9.20.1(jiti@2.4.2))
+      eslint-plugin-command: 3.1.0(eslint@9.20.1(jiti@2.4.2))
       eslint-plugin-import-x: 4.6.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)
       eslint-plugin-jsdoc: 50.6.3(eslint@9.20.1(jiti@2.4.2))
       eslint-plugin-jsonc: 2.19.1(eslint@9.20.1(jiti@2.4.2))
       eslint-plugin-n: 17.15.1(eslint@9.20.1(jiti@2.4.2))
       eslint-plugin-no-only-tests: 3.3.0
-      eslint-plugin-perfectionist: 4.8.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)
+      eslint-plugin-perfectionist: 4.9.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)
       eslint-plugin-regexp: 2.7.0(eslint@9.20.1(jiti@2.4.2))
       eslint-plugin-toml: 0.12.0(eslint@9.20.1(jiti@2.4.2))
       eslint-plugin-unicorn: 56.0.1(eslint@9.20.1(jiti@2.4.2))
-      eslint-plugin-unused-imports: 4.1.4(@typescript-eslint/eslint-plugin@8.23.0(@typescript-eslint/parser@8.24.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3))(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3))(eslint@9.20.1(jiti@2.4.2))
+      eslint-plugin-unused-imports: 4.1.4(@typescript-eslint/eslint-plugin@8.24.0(@typescript-eslint/parser@8.24.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3))(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3))(eslint@9.20.1(jiti@2.4.2))
       eslint-plugin-vue: 9.32.0(eslint@9.20.1(jiti@2.4.2))
       eslint-plugin-yml: 1.16.0(eslint@9.20.1(jiti@2.4.2))
       eslint-processor-vue-blocks: 2.0.0(@vue/compiler-sfc@3.5.13)(eslint@9.20.1(jiti@2.4.2))
-      globals: 15.14.0
+      globals: 15.15.0
       jsonc-eslint-parser: 2.4.0
       local-pkg: 1.0.0
       parse-gitignore: 2.0.0
-      picocolors: 1.1.1
       toml-eslint-parser: 0.10.0
       vue-eslint-parser: 9.4.3(eslint@9.20.1(jiti@2.4.2))
       yaml-eslint-parser: 1.2.3
@@ -8234,11 +8236,6 @@ snapshots:
       - typescript
       - vitest
 
-  '@antfu/install-pkg@0.4.1':
-    dependencies:
-      package-manager-detector: 0.2.9
-      tinyexec: 0.3.2
-
   '@antfu/install-pkg@0.5.0':
     dependencies:
       package-manager-detector: 0.2.9
@@ -9792,22 +9789,22 @@ snapshots:
     dependencies:
       '@iconify/types': 2.0.0
 
-  '@iconify/json@2.2.306':
+  '@iconify/json@2.2.307':
     dependencies:
       '@iconify/types': 2.0.0
       pathe: 1.1.2
 
   '@iconify/types@2.0.0': {}
 
-  '@iconify/utils@2.2.1':
+  '@iconify/utils@2.3.0':
     dependencies:
-      '@antfu/install-pkg': 0.4.1
-      '@antfu/utils': 0.7.10
+      '@antfu/install-pkg': 1.0.0
+      '@antfu/utils': 8.1.0
       '@iconify/types': 2.0.0
       debug: 4.4.0(supports-color@9.4.0)
-      globals: 15.14.0
+      globals: 15.15.0
       kolorist: 1.8.0
-      local-pkg: 0.5.1
+      local-pkg: 1.0.0
       mlly: 1.7.4
     transitivePeerDependencies:
       - supports-color
@@ -10054,7 +10051,7 @@ snapshots:
       nypm: 0.5.2
       ofetch: 1.4.1
       ohash: 1.1.4
-      pathe: 2.0.2
+      pathe: 2.0.3
       perfect-debounce: 1.0.0
       pkg-types: 1.3.1
       scule: 1.3.0
@@ -10090,7 +10087,7 @@ snapshots:
       rc9: 2.1.2
       semver: 7.7.1
 
-  '@nuxt/devtools@1.7.0(rollup@4.34.6)(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(terser@5.24.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
+  '@nuxt/devtools@1.7.0(rollup@4.34.7)(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(terser@5.24.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@antfu/utils': 0.7.10
       '@nuxt/devtools-kit': 1.7.0(magicast@0.3.5)(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(terser@5.24.0)(tsx@4.19.2)(yaml@2.7.0))
@@ -10124,9 +10121,9 @@ snapshots:
       simple-git: 3.27.0
       sirv: 3.0.0
       tinyglobby: 0.2.10
-      unimport: 3.14.5(rollup@4.34.6)
+      unimport: 3.14.5(rollup@4.34.7)
       vite: 6.1.0(@types/node@22.13.4)(jiti@2.4.2)(terser@5.24.0)(tsx@4.19.2)(yaml@2.7.0)
-      vite-plugin-inspect: 0.8.9(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@4.34.6)(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(terser@5.24.0)(tsx@4.19.2)(yaml@2.7.0))
+      vite-plugin-inspect: 0.8.9(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@4.34.7)(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(terser@5.24.0)(tsx@4.19.2)(yaml@2.7.0))
       vite-plugin-vue-inspector: 5.3.1(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(terser@5.24.0)(tsx@4.19.2)(yaml@2.7.0))
       which: 3.0.1
       ws: 8.18.0
@@ -10150,7 +10147,7 @@ snapshots:
       knitwork: 1.2.0
       mlly: 1.7.4
       ohash: 1.1.4
-      pathe: 2.0.2
+      pathe: 2.0.3
       pkg-types: 1.3.1
       scule: 1.3.0
       semver: 7.7.1
@@ -10167,7 +10164,7 @@ snapshots:
     dependencies:
       consola: 3.4.0
       defu: 6.1.4
-      pathe: 2.0.2
+      pathe: 2.0.3
       std-env: 3.8.0
 
   '@nuxt/telemetry@2.6.4(magicast@0.3.5)':
@@ -10182,17 +10179,17 @@ snapshots:
       ofetch: 1.4.1
       package-manager-detector: 0.2.9
       parse-git-config: 3.0.0
-      pathe: 2.0.2
+      pathe: 2.0.3
       rc9: 2.1.2
       std-env: 3.8.0
     transitivePeerDependencies:
       - magicast
       - supports-color
 
-  '@nuxt/vite-builder@3.15.4(@types/node@22.13.4)(eslint@9.20.1(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.3)(rollup@4.34.6)(terser@5.24.0)(tsx@4.19.2)(typescript@5.7.3)(vue-tsc@2.2.0(typescript@5.7.3))(vue@3.5.13(typescript@5.7.3))(yaml@2.7.0)':
+  '@nuxt/vite-builder@3.15.4(@types/node@22.13.4)(eslint@9.20.1(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.3)(rollup@4.34.7)(terser@5.24.0)(tsx@4.19.2)(typescript@5.7.3)(vue-tsc@2.2.0(typescript@5.7.3))(vue@3.5.13(typescript@5.7.3))(yaml@2.7.0)':
     dependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
-      '@rollup/plugin-replace': 6.0.2(rollup@4.34.6)
+      '@rollup/plugin-replace': 6.0.2(rollup@4.34.7)
       '@vitejs/plugin-vue': 5.2.1(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(terser@5.24.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       '@vitejs/plugin-vue-jsx': 4.1.1(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(terser@5.24.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       autoprefixer: 10.4.20(postcss@8.5.2)
@@ -10209,15 +10206,15 @@ snapshots:
       magic-string: 0.30.17
       mlly: 1.7.4
       ohash: 1.1.4
-      pathe: 2.0.2
+      pathe: 2.0.3
       perfect-debounce: 1.0.0
       pkg-types: 1.3.1
       postcss: 8.5.2
-      rollup-plugin-visualizer: 5.14.0(rollup@4.34.6)
+      rollup-plugin-visualizer: 5.14.0(rollup@4.34.7)
       std-env: 3.8.0
       ufo: 1.5.4
       unenv: 1.10.0
-      unplugin: 2.1.2
+      unplugin: 2.2.0
       vite: 6.1.0(@types/node@22.13.4)(jiti@2.4.2)(terser@5.24.0)(tsx@4.19.2)(yaml@2.7.0)
       vite-node: 3.0.5(@types/node@22.13.4)(jiti@2.4.2)(terser@5.24.0)(tsx@4.19.2)(yaml@2.7.0)
       vite-plugin-checker: 0.8.0(eslint@9.20.1(jiti@2.4.2))(optionator@0.9.3)(typescript@5.7.3)(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(terser@5.24.0)(tsx@4.19.2)(yaml@2.7.0))(vue-tsc@2.2.0(typescript@5.7.3))
@@ -10376,22 +10373,22 @@ snapshots:
       - encoding
       - supports-color
 
-  '@rollup/plugin-alias@5.1.1(rollup@4.34.6)':
+  '@rollup/plugin-alias@5.1.1(rollup@4.34.7)':
     optionalDependencies:
-      rollup: 4.34.6
+      rollup: 4.34.7
 
-  '@rollup/plugin-babel@5.3.1(@babel/core@7.26.0)(rollup@4.34.6)':
+  '@rollup/plugin-babel@5.3.1(@babel/core@7.26.0)(rollup@4.34.7)':
     dependencies:
       '@babel/core': 7.26.0
       '@babel/helper-module-imports': 7.25.9
-      '@rollup/pluginutils': 3.1.0(rollup@4.34.6)
-      rollup: 4.34.6
+      '@rollup/pluginutils': 3.1.0(rollup@4.34.7)
+      rollup: 4.34.7
     transitivePeerDependencies:
       - supports-color
 
-  '@rollup/plugin-commonjs@28.0.1(rollup@4.34.6)':
+  '@rollup/plugin-commonjs@28.0.1(rollup@4.34.7)':
     dependencies:
-      '@rollup/pluginutils': 5.1.4(rollup@4.34.6)
+      '@rollup/pluginutils': 5.1.4(rollup@4.34.7)
       commondir: 1.0.1
       estree-walker: 2.0.2
       fdir: 6.4.2(picomatch@4.0.2)
@@ -10399,138 +10396,138 @@ snapshots:
       magic-string: 0.30.17
       picomatch: 4.0.2
     optionalDependencies:
-      rollup: 4.34.6
+      rollup: 4.34.7
 
-  '@rollup/plugin-inject@5.0.5(rollup@4.34.6)':
+  '@rollup/plugin-inject@5.0.5(rollup@4.34.7)':
     dependencies:
-      '@rollup/pluginutils': 5.1.4(rollup@4.34.6)
+      '@rollup/pluginutils': 5.1.4(rollup@4.34.7)
       estree-walker: 2.0.2
       magic-string: 0.30.17
     optionalDependencies:
-      rollup: 4.34.6
+      rollup: 4.34.7
 
-  '@rollup/plugin-json@6.1.0(rollup@4.34.6)':
+  '@rollup/plugin-json@6.1.0(rollup@4.34.7)':
     dependencies:
-      '@rollup/pluginutils': 5.1.4(rollup@4.34.6)
+      '@rollup/pluginutils': 5.1.4(rollup@4.34.7)
     optionalDependencies:
-      rollup: 4.34.6
+      rollup: 4.34.7
 
-  '@rollup/plugin-node-resolve@11.2.1(rollup@4.34.6)':
+  '@rollup/plugin-node-resolve@11.2.1(rollup@4.34.7)':
     dependencies:
-      '@rollup/pluginutils': 3.1.0(rollup@4.34.6)
+      '@rollup/pluginutils': 3.1.0(rollup@4.34.7)
       '@types/resolve': 1.17.1
       builtin-modules: 3.3.0
       deepmerge: 4.3.1
       is-module: 1.0.0
       resolve: 1.22.8
-      rollup: 4.34.6
+      rollup: 4.34.7
 
-  '@rollup/plugin-node-resolve@15.3.0(rollup@4.34.6)':
+  '@rollup/plugin-node-resolve@15.3.0(rollup@4.34.7)':
     dependencies:
-      '@rollup/pluginutils': 5.1.4(rollup@4.34.6)
+      '@rollup/pluginutils': 5.1.4(rollup@4.34.7)
       '@types/resolve': 1.20.2
       deepmerge: 4.3.1
       is-module: 1.0.0
       resolve: 1.22.8
     optionalDependencies:
-      rollup: 4.34.6
+      rollup: 4.34.7
 
-  '@rollup/plugin-replace@2.4.2(rollup@4.34.6)':
+  '@rollup/plugin-replace@2.4.2(rollup@4.34.7)':
     dependencies:
-      '@rollup/pluginutils': 3.1.0(rollup@4.34.6)
+      '@rollup/pluginutils': 3.1.0(rollup@4.34.7)
       magic-string: 0.30.17
-      rollup: 4.34.6
+      rollup: 4.34.7
 
-  '@rollup/plugin-replace@6.0.2(rollup@4.34.6)':
+  '@rollup/plugin-replace@6.0.2(rollup@4.34.7)':
     dependencies:
-      '@rollup/pluginutils': 5.1.4(rollup@4.34.6)
+      '@rollup/pluginutils': 5.1.4(rollup@4.34.7)
       magic-string: 0.30.17
     optionalDependencies:
-      rollup: 4.34.6
+      rollup: 4.34.7
 
-  '@rollup/plugin-terser@0.4.4(rollup@4.34.6)':
+  '@rollup/plugin-terser@0.4.4(rollup@4.34.7)':
     dependencies:
       serialize-javascript: 6.0.1
       smob: 1.4.0
       terser: 5.24.0
     optionalDependencies:
-      rollup: 4.34.6
+      rollup: 4.34.7
 
-  '@rollup/pluginutils@3.1.0(rollup@4.34.6)':
+  '@rollup/pluginutils@3.1.0(rollup@4.34.7)':
     dependencies:
       '@types/estree': 0.0.39
       estree-walker: 1.0.1
       picomatch: 2.3.1
-      rollup: 4.34.6
+      rollup: 4.34.7
 
   '@rollup/pluginutils@4.2.1':
     dependencies:
       estree-walker: 2.0.2
       picomatch: 2.3.1
 
-  '@rollup/pluginutils@5.1.4(rollup@4.34.6)':
+  '@rollup/pluginutils@5.1.4(rollup@4.34.7)':
     dependencies:
       '@types/estree': 1.0.6
       estree-walker: 2.0.2
       picomatch: 4.0.2
     optionalDependencies:
-      rollup: 4.34.6
+      rollup: 4.34.7
 
-  '@rollup/rollup-android-arm-eabi@4.34.6':
+  '@rollup/rollup-android-arm-eabi@4.34.7':
     optional: true
 
-  '@rollup/rollup-android-arm64@4.34.6':
+  '@rollup/rollup-android-arm64@4.34.7':
     optional: true
 
-  '@rollup/rollup-darwin-arm64@4.34.6':
+  '@rollup/rollup-darwin-arm64@4.34.7':
     optional: true
 
-  '@rollup/rollup-darwin-x64@4.34.6':
+  '@rollup/rollup-darwin-x64@4.34.7':
     optional: true
 
-  '@rollup/rollup-freebsd-arm64@4.34.6':
+  '@rollup/rollup-freebsd-arm64@4.34.7':
     optional: true
 
-  '@rollup/rollup-freebsd-x64@4.34.6':
+  '@rollup/rollup-freebsd-x64@4.34.7':
     optional: true
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.34.6':
+  '@rollup/rollup-linux-arm-gnueabihf@4.34.7':
     optional: true
 
-  '@rollup/rollup-linux-arm-musleabihf@4.34.6':
+  '@rollup/rollup-linux-arm-musleabihf@4.34.7':
     optional: true
 
-  '@rollup/rollup-linux-arm64-gnu@4.34.6':
+  '@rollup/rollup-linux-arm64-gnu@4.34.7':
     optional: true
 
-  '@rollup/rollup-linux-arm64-musl@4.34.6':
+  '@rollup/rollup-linux-arm64-musl@4.34.7':
     optional: true
 
-  '@rollup/rollup-linux-loongarch64-gnu@4.34.6':
+  '@rollup/rollup-linux-loongarch64-gnu@4.34.7':
     optional: true
 
-  '@rollup/rollup-linux-powerpc64le-gnu@4.34.6':
+  '@rollup/rollup-linux-powerpc64le-gnu@4.34.7':
     optional: true
 
-  '@rollup/rollup-linux-riscv64-gnu@4.34.6':
+  '@rollup/rollup-linux-riscv64-gnu@4.34.7':
     optional: true
 
-  '@rollup/rollup-linux-s390x-gnu@4.34.6':
+  '@rollup/rollup-linux-s390x-gnu@4.34.7':
     optional: true
 
-  '@rollup/rollup-linux-x64-gnu@4.34.6':
+  '@rollup/rollup-linux-x64-gnu@4.34.7':
     optional: true
 
-  '@rollup/rollup-linux-x64-musl@4.34.6':
+  '@rollup/rollup-linux-x64-musl@4.34.7':
     optional: true
 
-  '@rollup/rollup-win32-arm64-msvc@4.34.6':
+  '@rollup/rollup-win32-arm64-msvc@4.34.7':
     optional: true
 
-  '@rollup/rollup-win32-ia32-msvc@4.34.6':
+  '@rollup/rollup-win32-ia32-msvc@4.34.7':
     optional: true
 
-  '@rollup/rollup-win32-x64-msvc@4.34.6':
+  '@rollup/rollup-win32-x64-msvc@4.34.7':
     optional: true
 
   '@shikijs/core@2.1.0':
@@ -10773,14 +10770,14 @@ snapshots:
 
   '@types/wrap-ansi@3.0.0': {}
 
-  '@typescript-eslint/eslint-plugin@8.23.0(@typescript-eslint/parser@8.24.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3))(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)':
+  '@typescript-eslint/eslint-plugin@8.24.0(@typescript-eslint/parser@8.24.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3))(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
       '@typescript-eslint/parser': 8.24.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)
-      '@typescript-eslint/scope-manager': 8.23.0
-      '@typescript-eslint/type-utils': 8.23.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)
+      '@typescript-eslint/scope-manager': 8.24.0
+      '@typescript-eslint/type-utils': 8.24.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)
       '@typescript-eslint/utils': 8.24.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)
-      '@typescript-eslint/visitor-keys': 8.23.0
+      '@typescript-eslint/visitor-keys': 8.24.0
       eslint: 9.20.1(jiti@2.4.2)
       graphemer: 1.4.0
       ignore: 5.3.2
@@ -10802,19 +10799,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/scope-manager@8.23.0':
-    dependencies:
-      '@typescript-eslint/types': 8.23.0
-      '@typescript-eslint/visitor-keys': 8.23.0
-
   '@typescript-eslint/scope-manager@8.24.0':
     dependencies:
       '@typescript-eslint/types': 8.24.0
       '@typescript-eslint/visitor-keys': 8.24.0
 
-  '@typescript-eslint/type-utils@8.23.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)':
+  '@typescript-eslint/type-utils@8.24.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)':
     dependencies:
-      '@typescript-eslint/typescript-estree': 8.23.0(typescript@5.7.3)
+      '@typescript-eslint/typescript-estree': 8.24.0(typescript@5.7.3)
       '@typescript-eslint/utils': 8.24.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)
       debug: 4.4.0(supports-color@9.4.0)
       eslint: 9.20.1(jiti@2.4.2)
@@ -10823,24 +10815,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/types@8.23.0': {}
-
   '@typescript-eslint/types@8.24.0': {}
 
-  '@typescript-eslint/typescript-estree@8.23.0(typescript@5.7.3)':
-    dependencies:
-      '@typescript-eslint/types': 8.23.0
-      '@typescript-eslint/visitor-keys': 8.23.0
-      debug: 4.4.0(supports-color@9.4.0)
-      fast-glob: 3.3.3
-      is-glob: 4.0.3
-      minimatch: 9.0.5
-      semver: 7.7.1
-      ts-api-utils: 2.0.1(typescript@5.7.3)
-      typescript: 5.7.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/typescript-estree@8.24.0(typescript@5.7.3)':
     dependencies:
       '@typescript-eslint/types': 8.24.0
@@ -10866,11 +10842,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/visitor-keys@8.23.0':
-    dependencies:
-      '@typescript-eslint/types': 8.23.0
-      eslint-visitor-keys: 4.2.0
-
   '@typescript-eslint/visitor-keys@8.24.0':
     dependencies:
       '@typescript-eslint/types': 8.24.0
@@ -10913,54 +10884,47 @@ snapshots:
       unhead: 1.11.18
       vue: 3.5.13(typescript@5.7.3)
 
-  '@unocss/astro@65.4.3(rollup@4.34.6)(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(terser@5.24.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
+  '@unocss/astro@65.5.0(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(terser@5.24.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
-      '@unocss/core': 65.4.3
-      '@unocss/reset': 65.4.3
-      '@unocss/vite': 65.4.3(rollup@4.34.6)(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(terser@5.24.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@unocss/core': 65.5.0
+      '@unocss/reset': 65.5.0
+      '@unocss/vite': 65.5.0(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(terser@5.24.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
     optionalDependencies:
       vite: 6.1.0(@types/node@22.13.4)(jiti@2.4.2)(terser@5.24.0)(tsx@4.19.2)(yaml@2.7.0)
     transitivePeerDependencies:
-      - rollup
-      - supports-color
       - vue
 
-  '@unocss/cli@65.4.3(rollup@4.34.6)':
+  '@unocss/cli@65.5.0':
     dependencies:
       '@ampproject/remapping': 2.3.0
-      '@rollup/pluginutils': 5.1.4(rollup@4.34.6)
-      '@unocss/config': 65.4.3
-      '@unocss/core': 65.4.3
-      '@unocss/preset-uno': 65.4.3
+      '@unocss/config': 65.5.0
+      '@unocss/core': 65.5.0
+      '@unocss/preset-uno': 65.5.0
       cac: 6.7.14
       chokidar: 3.6.0
       colorette: 2.0.20
       consola: 3.4.0
       magic-string: 0.30.17
-      pathe: 2.0.2
+      pathe: 2.0.3
       perfect-debounce: 1.0.0
       tinyglobby: 0.2.10
-    transitivePeerDependencies:
-      - rollup
-      - supports-color
+      unplugin-utils: 0.2.4
 
-  '@unocss/config@65.4.3':
+  '@unocss/config@65.5.0':
     dependencies:
-      '@unocss/core': 65.4.3
-      unconfig: 0.6.1
-    transitivePeerDependencies:
-      - supports-color
+      '@unocss/core': 65.5.0
+      unconfig: 7.0.0
 
-  '@unocss/core@65.4.3': {}
+  '@unocss/core@65.5.0': {}
 
-  '@unocss/extractor-arbitrary-variants@65.4.3':
+  '@unocss/extractor-arbitrary-variants@65.5.0':
     dependencies:
-      '@unocss/core': 65.4.3
+      '@unocss/core': 65.5.0
 
-  '@unocss/inspector@65.4.3(vue@3.5.13(typescript@5.7.3))':
+  '@unocss/inspector@65.5.0(vue@3.5.13(typescript@5.7.3))':
     dependencies:
-      '@unocss/core': 65.4.3
-      '@unocss/rule-utils': 65.4.3
+      '@unocss/core': 65.5.0
+      '@unocss/rule-utils': 65.5.0
       colorette: 2.0.20
       gzip-size: 6.0.0
       sirv: 3.0.0
@@ -10968,101 +10932,98 @@ snapshots:
     transitivePeerDependencies:
       - vue
 
-  '@unocss/postcss@65.4.3(postcss@8.5.2)':
+  '@unocss/postcss@65.5.0(postcss@8.5.2)':
     dependencies:
-      '@unocss/config': 65.4.3
-      '@unocss/core': 65.4.3
-      '@unocss/rule-utils': 65.4.3
+      '@unocss/config': 65.5.0
+      '@unocss/core': 65.5.0
+      '@unocss/rule-utils': 65.5.0
       css-tree: 3.1.0
       postcss: 8.5.2
       tinyglobby: 0.2.10
-    transitivePeerDependencies:
-      - supports-color
 
-  '@unocss/preset-attributify@65.4.3':
+  '@unocss/preset-attributify@65.5.0':
     dependencies:
-      '@unocss/core': 65.4.3
+      '@unocss/core': 65.5.0
 
-  '@unocss/preset-icons@65.4.3':
+  '@unocss/preset-icons@65.5.0':
     dependencies:
-      '@iconify/utils': 2.2.1
-      '@unocss/core': 65.4.3
+      '@iconify/utils': 2.3.0
+      '@unocss/core': 65.5.0
       ofetch: 1.4.1
     transitivePeerDependencies:
       - supports-color
 
-  '@unocss/preset-mini@65.4.3':
+  '@unocss/preset-mini@65.5.0':
     dependencies:
-      '@unocss/core': 65.4.3
-      '@unocss/extractor-arbitrary-variants': 65.4.3
-      '@unocss/rule-utils': 65.4.3
+      '@unocss/core': 65.5.0
+      '@unocss/extractor-arbitrary-variants': 65.5.0
+      '@unocss/rule-utils': 65.5.0
 
-  '@unocss/preset-tagify@65.4.3':
+  '@unocss/preset-tagify@65.5.0':
     dependencies:
-      '@unocss/core': 65.4.3
+      '@unocss/core': 65.5.0
 
-  '@unocss/preset-typography@65.4.3':
+  '@unocss/preset-typography@65.5.0':
     dependencies:
-      '@unocss/core': 65.4.3
-      '@unocss/preset-mini': 65.4.3
+      '@unocss/core': 65.5.0
+      '@unocss/preset-mini': 65.5.0
+      '@unocss/rule-utils': 65.5.0
 
-  '@unocss/preset-uno@65.4.3':
+  '@unocss/preset-uno@65.5.0':
     dependencies:
-      '@unocss/core': 65.4.3
-      '@unocss/preset-mini': 65.4.3
-      '@unocss/preset-wind': 65.4.3
-      '@unocss/rule-utils': 65.4.3
+      '@unocss/core': 65.5.0
+      '@unocss/preset-mini': 65.5.0
+      '@unocss/preset-wind': 65.5.0
+      '@unocss/rule-utils': 65.5.0
 
-  '@unocss/preset-web-fonts@65.4.3':
+  '@unocss/preset-web-fonts@65.5.0':
     dependencies:
-      '@unocss/core': 65.4.3
+      '@unocss/core': 65.5.0
       ofetch: 1.4.1
 
-  '@unocss/preset-wind@65.4.3':
+  '@unocss/preset-wind@65.5.0':
     dependencies:
-      '@unocss/core': 65.4.3
-      '@unocss/preset-mini': 65.4.3
-      '@unocss/rule-utils': 65.4.3
+      '@unocss/core': 65.5.0
+      '@unocss/preset-mini': 65.5.0
+      '@unocss/rule-utils': 65.5.0
 
-  '@unocss/reset@65.4.3': {}
+  '@unocss/reset@65.5.0': {}
 
-  '@unocss/rule-utils@65.4.3':
+  '@unocss/rule-utils@65.5.0':
     dependencies:
-      '@unocss/core': 65.4.3
+      '@unocss/core': 65.5.0
       magic-string: 0.30.17
 
-  '@unocss/transformer-attributify-jsx@65.4.3':
+  '@unocss/transformer-attributify-jsx@65.5.0':
     dependencies:
-      '@unocss/core': 65.4.3
+      '@unocss/core': 65.5.0
 
-  '@unocss/transformer-compile-class@65.4.3':
+  '@unocss/transformer-compile-class@65.5.0':
     dependencies:
-      '@unocss/core': 65.4.3
+      '@unocss/core': 65.5.0
 
-  '@unocss/transformer-directives@65.4.3':
+  '@unocss/transformer-directives@65.5.0':
     dependencies:
-      '@unocss/core': 65.4.3
-      '@unocss/rule-utils': 65.4.3
+      '@unocss/core': 65.5.0
+      '@unocss/rule-utils': 65.5.0
       css-tree: 3.1.0
 
-  '@unocss/transformer-variant-group@65.4.3':
+  '@unocss/transformer-variant-group@65.5.0':
     dependencies:
-      '@unocss/core': 65.4.3
+      '@unocss/core': 65.5.0
 
-  '@unocss/vite@65.4.3(rollup@4.34.6)(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(terser@5.24.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
+  '@unocss/vite@65.5.0(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(terser@5.24.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@ampproject/remapping': 2.3.0
-      '@rollup/pluginutils': 5.1.4(rollup@4.34.6)
-      '@unocss/config': 65.4.3
-      '@unocss/core': 65.4.3
-      '@unocss/inspector': 65.4.3(vue@3.5.13(typescript@5.7.3))
+      '@unocss/config': 65.5.0
+      '@unocss/core': 65.5.0
+      '@unocss/inspector': 65.5.0(vue@3.5.13(typescript@5.7.3))
       chokidar: 3.6.0
       magic-string: 0.30.17
       tinyglobby: 0.2.10
+      unplugin-utils: 0.2.4
       vite: 6.1.0(@types/node@22.13.4)(jiti@2.4.2)(terser@5.24.0)(tsx@4.19.2)(yaml@2.7.0)
     transitivePeerDependencies:
-      - rollup
-      - supports-color
       - vue
 
   '@vercel/nft@0.27.6(encoding@0.1.13)':
@@ -11143,7 +11104,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@vitest/eslint-plugin@1.1.27(@typescript-eslint/utils@8.24.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3))(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)(vitest@3.0.5)':
+  '@vitest/eslint-plugin@1.1.31(@typescript-eslint/utils@8.24.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3))(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)(vitest@3.0.5)':
     dependencies:
       '@typescript-eslint/utils': 8.24.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)
       eslint: 9.20.1(jiti@2.4.2)
@@ -11183,13 +11144,13 @@ snapshots:
   '@vitest/runner@3.0.5':
     dependencies:
       '@vitest/utils': 3.0.5
-      pathe: 2.0.2
+      pathe: 2.0.3
 
   '@vitest/snapshot@3.0.5':
     dependencies:
       '@vitest/pretty-format': 3.0.5
       magic-string: 0.30.17
-      pathe: 2.0.2
+      pathe: 2.0.3
 
   '@vitest/spy@3.0.5':
     dependencies:
@@ -11200,7 +11161,7 @@ snapshots:
       '@vitest/utils': 3.0.5
       fflate: 0.8.2
       flatted: 3.3.2
-      pathe: 2.0.2
+      pathe: 2.0.3
       sirv: 3.0.0
       tinyglobby: 0.2.10
       tinyrainbow: 2.0.0
@@ -11230,7 +11191,7 @@ snapshots:
       ast-kit: 1.4.0
       local-pkg: 1.0.0
       magic-string-ast: 0.7.0
-      pathe: 2.0.2
+      pathe: 2.0.3
       picomatch: 4.0.2
     optionalDependencies:
       vue: 3.5.13(typescript@5.7.3)
@@ -11538,7 +11499,7 @@ snapshots:
   ast-kit@1.4.0:
     dependencies:
       '@babel/parser': 7.26.7
-      pathe: 2.0.2
+      pathe: 2.0.3
 
   ast-walker-scope@0.6.2:
     dependencies:
@@ -12426,9 +12387,17 @@ snapshots:
       '@eslint/compat': 1.2.5(eslint@9.20.1(jiti@2.4.2))
       eslint: 9.20.1(jiti@2.4.2)
 
+  eslint-factory@0.1.2(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3):
+    dependencies:
+      '@typescript-eslint/utils': 8.24.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)
+      eslint: 9.20.1(jiti@2.4.2)
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
   eslint-flat-config-utils@2.0.1:
     dependencies:
-      pathe: 2.0.2
+      pathe: 2.0.3
 
   eslint-formatting-reporter@0.0.0(eslint@9.20.1(jiti@2.4.2)):
     dependencies:
@@ -12455,11 +12424,11 @@ snapshots:
 
   eslint-parser-plain@0.1.1: {}
 
-  eslint-plugin-antfu@3.0.0(eslint@9.20.1(jiti@2.4.2)):
+  eslint-plugin-antfu@3.1.0(eslint@9.20.1(jiti@2.4.2)):
     dependencies:
       eslint: 9.20.1(jiti@2.4.2)
 
-  eslint-plugin-command@3.0.0(eslint@9.20.1(jiti@2.4.2)):
+  eslint-plugin-command@3.1.0(eslint@9.20.1(jiti@2.4.2)):
     dependencies:
       '@es-joy/jsdoccomment': 0.50.0
       eslint: 9.20.1(jiti@2.4.2)
@@ -12540,14 +12509,14 @@ snapshots:
       eslint: 9.20.1(jiti@2.4.2)
       eslint-plugin-es-x: 7.8.0(eslint@9.20.1(jiti@2.4.2))
       get-tsconfig: 4.10.0
-      globals: 15.14.0
+      globals: 15.15.0
       ignore: 5.3.2
       minimatch: 9.0.5
       semver: 7.7.1
 
   eslint-plugin-no-only-tests@3.3.0: {}
 
-  eslint-plugin-perfectionist@4.8.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3):
+  eslint-plugin-perfectionist@4.9.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3):
     dependencies:
       '@typescript-eslint/types': 8.24.0
       '@typescript-eslint/utils': 8.24.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)
@@ -12587,7 +12556,7 @@ snapshots:
       core-js-compat: 3.38.1
       eslint: 9.20.1(jiti@2.4.2)
       esquery: 1.6.0
-      globals: 15.14.0
+      globals: 15.15.0
       indent-string: 4.0.0
       is-builtin-module: 3.2.1
       jsesc: 3.0.2
@@ -12598,11 +12567,24 @@ snapshots:
       semver: 7.7.1
       strip-indent: 3.0.0
 
-  eslint-plugin-unused-imports@4.1.4(@typescript-eslint/eslint-plugin@8.23.0(@typescript-eslint/parser@8.24.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3))(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3))(eslint@9.20.1(jiti@2.4.2)):
+  eslint-plugin-unimport@0.1.2(eslint@9.20.1(jiti@2.4.2))(rollup@4.34.7)(typescript@5.7.3):
+    dependencies:
+      '@typescript-eslint/scope-manager': 8.24.0
+      '@typescript-eslint/utils': 8.24.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)
+      debug: 4.4.0(supports-color@9.4.0)
+      eslint: 9.20.1(jiti@2.4.2)
+      pathe: 1.1.2
+      unimport: 3.14.5(rollup@4.34.7)
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+      - typescript
+
+  eslint-plugin-unused-imports@4.1.4(@typescript-eslint/eslint-plugin@8.24.0(@typescript-eslint/parser@8.24.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3))(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3))(eslint@9.20.1(jiti@2.4.2)):
     dependencies:
       eslint: 9.20.1(jiti@2.4.2)
     optionalDependencies:
-      '@typescript-eslint/eslint-plugin': 8.23.0(@typescript-eslint/parser@8.24.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3))(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)
+      '@typescript-eslint/eslint-plugin': 8.24.0(@typescript-eslint/parser@8.24.0(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3))(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)
 
   eslint-plugin-vue@9.32.0(eslint@9.20.1(jiti@2.4.2)):
     dependencies:
@@ -12761,7 +12743,7 @@ snapshots:
     dependencies:
       '@babel/parser': 7.26.7
       '@babel/traverse': 7.25.9
-      '@rollup/plugin-node-resolve': 15.3.0(rollup@4.34.6)
+      '@rollup/plugin-node-resolve': 15.3.0(rollup@4.34.7)
       chalk: 5.4.1
       cli-progress: 3.12.0
       cli-table3: 0.6.3
@@ -12769,7 +12751,7 @@ snapshots:
       esbuild: 0.19.11
       filesize: 10.1.0
       fs-extra: 11.2.0
-      rollup: 4.34.6
+      rollup: 4.34.7
       terser: 5.24.0
       yargs: 17.7.2
     transitivePeerDependencies:
@@ -13046,7 +13028,7 @@ snapshots:
       node-fetch-native: 1.6.6
       nypm: 0.5.2
       ohash: 1.1.4
-      pathe: 2.0.2
+      pathe: 2.0.3
       tar: 6.2.1
 
   git-config-path@2.0.0: {}
@@ -13132,7 +13114,7 @@ snapshots:
 
   globals@14.0.0: {}
 
-  globals@15.14.0: {}
+  globals@15.15.0: {}
 
   globalthis@1.0.3:
     dependencies:
@@ -13355,9 +13337,9 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  impound@0.2.0(rollup@4.34.6):
+  impound@0.2.0(rollup@4.34.7):
     dependencies:
-      '@rollup/pluginutils': 5.1.4(rollup@4.34.6)
+      '@rollup/pluginutils': 5.1.4(rollup@4.34.7)
       mlly: 1.7.4
       pathe: 1.1.2
       unenv: 1.10.0
@@ -14262,7 +14244,7 @@ snapshots:
   mlly@1.7.4:
     dependencies:
       acorn: 8.14.0
-      pathe: 2.0.2
+      pathe: 2.0.3
       pkg-types: 1.3.1
       ufo: 1.5.4
 
@@ -14350,14 +14332,14 @@ snapshots:
     dependencies:
       '@cloudflare/kv-asset-handler': 0.3.4
       '@netlify/functions': 2.8.2
-      '@rollup/plugin-alias': 5.1.1(rollup@4.34.6)
-      '@rollup/plugin-commonjs': 28.0.1(rollup@4.34.6)
-      '@rollup/plugin-inject': 5.0.5(rollup@4.34.6)
-      '@rollup/plugin-json': 6.1.0(rollup@4.34.6)
-      '@rollup/plugin-node-resolve': 15.3.0(rollup@4.34.6)
-      '@rollup/plugin-replace': 6.0.2(rollup@4.34.6)
-      '@rollup/plugin-terser': 0.4.4(rollup@4.34.6)
-      '@rollup/pluginutils': 5.1.4(rollup@4.34.6)
+      '@rollup/plugin-alias': 5.1.1(rollup@4.34.7)
+      '@rollup/plugin-commonjs': 28.0.1(rollup@4.34.7)
+      '@rollup/plugin-inject': 5.0.5(rollup@4.34.7)
+      '@rollup/plugin-json': 6.1.0(rollup@4.34.7)
+      '@rollup/plugin-node-resolve': 15.3.0(rollup@4.34.7)
+      '@rollup/plugin-replace': 6.0.2(rollup@4.34.7)
+      '@rollup/plugin-terser': 0.4.4(rollup@4.34.7)
+      '@rollup/pluginutils': 5.1.4(rollup@4.34.7)
       '@types/http-proxy': 1.17.15
       '@vercel/nft': 0.27.6(encoding@0.1.13)
       archiver: 7.0.1
@@ -14401,8 +14383,8 @@ snapshots:
       pkg-types: 1.3.1
       pretty-bytes: 6.1.1
       radix3: 1.1.2
-      rollup: 4.34.6
-      rollup-plugin-visualizer: 5.14.0(rollup@4.34.6)
+      rollup: 4.34.7
+      rollup-plugin-visualizer: 5.14.0(rollup@4.34.7)
       scule: 1.3.0
       semver: 7.7.1
       serve-placeholder: 2.0.2
@@ -14412,7 +14394,7 @@ snapshots:
       uncrypto: 0.1.3
       unctx: 2.4.1
       unenv: 1.10.0
-      unimport: 3.14.5(rollup@4.34.6)
+      unimport: 3.14.5(rollup@4.34.7)
       unstorage: 1.14.4(db0@0.2.1)(idb-keyval@6.2.1)(ioredis@5.4.1)
       untyped: 1.5.2
       unwasm: 0.3.9
@@ -14523,15 +14505,15 @@ snapshots:
     dependencies:
       boolbase: 1.0.0
 
-  nuxt@3.15.4(@parcel/watcher@2.4.1)(@types/node@22.13.4)(db0@0.2.1)(encoding@0.1.13)(eslint@9.20.1(jiti@2.4.2))(idb-keyval@6.2.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.3)(rollup@4.34.6)(terser@5.24.0)(tsx@4.19.2)(typescript@5.7.3)(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(terser@5.24.0)(tsx@4.19.2)(yaml@2.7.0))(vue-tsc@2.2.0(typescript@5.7.3))(yaml@2.7.0):
+  nuxt@3.15.4(@parcel/watcher@2.4.1)(@types/node@22.13.4)(db0@0.2.1)(encoding@0.1.13)(eslint@9.20.1(jiti@2.4.2))(idb-keyval@6.2.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.3)(rollup@4.34.7)(terser@5.24.0)(tsx@4.19.2)(typescript@5.7.3)(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(terser@5.24.0)(tsx@4.19.2)(yaml@2.7.0))(vue-tsc@2.2.0(typescript@5.7.3))(yaml@2.7.0):
     dependencies:
       '@nuxt/cli': 3.21.1(magicast@0.3.5)
       '@nuxt/devalue': 2.0.2
-      '@nuxt/devtools': 1.7.0(rollup@4.34.6)(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(terser@5.24.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@nuxt/devtools': 1.7.0(rollup@4.34.7)(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(terser@5.24.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
       '@nuxt/schema': 3.15.4
       '@nuxt/telemetry': 2.6.4(magicast@0.3.5)
-      '@nuxt/vite-builder': 3.15.4(@types/node@22.13.4)(eslint@9.20.1(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.3)(rollup@4.34.6)(terser@5.24.0)(tsx@4.19.2)(typescript@5.7.3)(vue-tsc@2.2.0(typescript@5.7.3))(vue@3.5.13(typescript@5.7.3))(yaml@2.7.0)
+      '@nuxt/vite-builder': 3.15.4(@types/node@22.13.4)(eslint@9.20.1(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.3)(rollup@4.34.7)(terser@5.24.0)(tsx@4.19.2)(typescript@5.7.3)(vue-tsc@2.2.0(typescript@5.7.3))(vue@3.5.13(typescript@5.7.3))(yaml@2.7.0)
       '@unhead/dom': 1.11.18
       '@unhead/shared': 1.11.18
       '@unhead/ssr': 1.11.18
@@ -14554,7 +14536,7 @@ snapshots:
       h3: 1.15.0
       hookable: 5.5.3
       ignore: 7.0.3
-      impound: 0.2.0(rollup@4.34.6)
+      impound: 0.2.0(rollup@4.34.7)
       jiti: 2.4.2
       klona: 2.0.6
       knitwork: 1.2.0
@@ -14565,7 +14547,7 @@ snapshots:
       nypm: 0.5.2
       ofetch: 1.4.1
       ohash: 1.1.4
-      pathe: 2.0.2
+      pathe: 2.0.3
       perfect-debounce: 1.0.0
       pkg-types: 1.3.1
       radix3: 1.1.2
@@ -14581,8 +14563,8 @@ snapshots:
       unenv: 1.10.0
       unhead: 1.11.18
       unimport: 4.1.1
-      unplugin: 2.1.2
-      unplugin-vue-router: 0.11.2(rollup@4.34.6)(vue-router@4.5.0(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))
+      unplugin: 2.2.0
+      unplugin-vue-router: 0.11.2(rollup@4.34.7)(vue-router@4.5.0(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))
       unstorage: 1.14.4(db0@0.2.1)(idb-keyval@6.2.1)(ioredis@5.4.1)
       untyped: 1.5.2
       vue: 3.5.13(typescript@5.7.3)
@@ -14659,7 +14641,7 @@ snapshots:
     dependencies:
       citty: 0.1.6
       consola: 3.4.0
-      pathe: 2.0.2
+      pathe: 2.0.3
       pkg-types: 1.3.1
       tinyexec: 0.3.2
       ufo: 1.5.4
@@ -14843,7 +14825,7 @@ snapshots:
 
   pathe@1.1.2: {}
 
-  pathe@2.0.2: {}
+  pathe@2.0.3: {}
 
   pathval@2.0.0: {}
 
@@ -14866,7 +14848,7 @@ snapshots:
     dependencies:
       confbox: 0.1.8
       mlly: 1.7.4
-      pathe: 2.0.2
+      pathe: 2.0.3
 
   playwright-core@1.50.1: {}
 
@@ -15321,72 +15303,72 @@ snapshots:
       sprintf-js: 1.1.3
     optional: true
 
-  rollup-plugin-dts@6.1.1(rollup@4.34.6)(typescript@5.7.3):
+  rollup-plugin-dts@6.1.1(rollup@4.34.7)(typescript@5.7.3):
     dependencies:
       magic-string: 0.30.17
-      rollup: 4.34.6
+      rollup: 4.34.7
       typescript: 5.7.3
     optionalDependencies:
       '@babel/code-frame': 7.26.2
 
-  rollup-plugin-esbuild@6.2.0(esbuild@0.24.2)(rollup@4.34.6):
+  rollup-plugin-esbuild@6.2.0(esbuild@0.24.2)(rollup@4.34.7):
     dependencies:
       debug: 4.4.0(supports-color@9.4.0)
       es-module-lexer: 1.6.0
       esbuild: 0.24.2
       get-tsconfig: 4.10.0
-      rollup: 4.34.6
-      unplugin-utils: 0.2.3
+      rollup: 4.34.7
+      unplugin-utils: 0.2.4
     transitivePeerDependencies:
       - supports-color
 
-  rollup-plugin-pure@0.2.1(rollup@4.34.6):
+  rollup-plugin-pure@0.2.1(rollup@4.34.7):
     dependencies:
-      '@rollup/pluginutils': 5.1.4(rollup@4.34.6)
+      '@rollup/pluginutils': 5.1.4(rollup@4.34.7)
       magic-string: 0.30.17
-      rollup: 4.34.6
+      rollup: 4.34.7
       strip-literal: 1.3.0
 
-  rollup-plugin-terser@7.0.2(rollup@4.34.6):
+  rollup-plugin-terser@7.0.2(rollup@4.34.7):
     dependencies:
       '@babel/code-frame': 7.26.2
       jest-worker: 26.6.2
-      rollup: 4.34.6
+      rollup: 4.34.7
       serialize-javascript: 4.0.0
       terser: 5.24.0
 
-  rollup-plugin-visualizer@5.14.0(rollup@4.34.6):
+  rollup-plugin-visualizer@5.14.0(rollup@4.34.7):
     dependencies:
       open: 8.4.2
       picomatch: 4.0.2
       source-map: 0.7.4
       yargs: 17.7.2
     optionalDependencies:
-      rollup: 4.34.6
+      rollup: 4.34.7
 
-  rollup@4.34.6:
+  rollup@4.34.7:
     dependencies:
       '@types/estree': 1.0.6
     optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.34.6
-      '@rollup/rollup-android-arm64': 4.34.6
-      '@rollup/rollup-darwin-arm64': 4.34.6
-      '@rollup/rollup-darwin-x64': 4.34.6
-      '@rollup/rollup-freebsd-arm64': 4.34.6
-      '@rollup/rollup-freebsd-x64': 4.34.6
-      '@rollup/rollup-linux-arm-gnueabihf': 4.34.6
-      '@rollup/rollup-linux-arm-musleabihf': 4.34.6
-      '@rollup/rollup-linux-arm64-gnu': 4.34.6
-      '@rollup/rollup-linux-arm64-musl': 4.34.6
-      '@rollup/rollup-linux-loongarch64-gnu': 4.34.6
-      '@rollup/rollup-linux-powerpc64le-gnu': 4.34.6
-      '@rollup/rollup-linux-riscv64-gnu': 4.34.6
-      '@rollup/rollup-linux-s390x-gnu': 4.34.6
-      '@rollup/rollup-linux-x64-gnu': 4.34.6
-      '@rollup/rollup-linux-x64-musl': 4.34.6
-      '@rollup/rollup-win32-arm64-msvc': 4.34.6
-      '@rollup/rollup-win32-ia32-msvc': 4.34.6
-      '@rollup/rollup-win32-x64-msvc': 4.34.6
+      '@rollup/rollup-android-arm-eabi': 4.34.7
+      '@rollup/rollup-android-arm64': 4.34.7
+      '@rollup/rollup-darwin-arm64': 4.34.7
+      '@rollup/rollup-darwin-x64': 4.34.7
+      '@rollup/rollup-freebsd-arm64': 4.34.7
+      '@rollup/rollup-freebsd-x64': 4.34.7
+      '@rollup/rollup-linux-arm-gnueabihf': 4.34.7
+      '@rollup/rollup-linux-arm-musleabihf': 4.34.7
+      '@rollup/rollup-linux-arm64-gnu': 4.34.7
+      '@rollup/rollup-linux-arm64-musl': 4.34.7
+      '@rollup/rollup-linux-loongarch64-gnu': 4.34.7
+      '@rollup/rollup-linux-powerpc64le-gnu': 4.34.7
+      '@rollup/rollup-linux-riscv64-gnu': 4.34.7
+      '@rollup/rollup-linux-s390x-gnu': 4.34.7
+      '@rollup/rollup-linux-x64-gnu': 4.34.7
+      '@rollup/rollup-linux-x64-musl': 4.34.7
+      '@rollup/rollup-win32-arm64-msvc': 4.34.7
+      '@rollup/rollup-win32-ia32-msvc': 4.34.7
+      '@rollup/rollup-win32-x64-msvc': 4.34.7
       fsevents: 2.3.3
 
   rrweb-cssom@0.8.0: {}
@@ -16007,6 +15989,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  unconfig@7.0.0:
+    dependencies:
+      '@antfu/utils': 8.1.0
+      defu: 6.1.4
+      jiti: 2.4.2
+
   uncrypto@0.1.3: {}
 
   unctx@2.4.1:
@@ -16014,7 +16002,7 @@ snapshots:
       acorn: 8.14.0
       estree-walker: 3.0.3
       magic-string: 0.30.17
-      unplugin: 2.1.2
+      unplugin: 2.2.0
 
   undici-types@5.26.5: {}
 
@@ -16050,9 +16038,9 @@ snapshots:
 
   unicorn-magic@0.1.0: {}
 
-  unimport@3.14.5(rollup@4.34.6):
+  unimport@3.14.5(rollup@4.34.7):
     dependencies:
-      '@rollup/pluginutils': 5.1.4(rollup@4.34.6)
+      '@rollup/pluginutils': 5.1.4(rollup@4.34.7)
       acorn: 8.14.0
       escape-string-regexp: 5.0.0
       estree-walker: 3.0.3
@@ -16078,13 +16066,13 @@ snapshots:
       local-pkg: 1.0.0
       magic-string: 0.30.17
       mlly: 1.7.4
-      pathe: 2.0.2
+      pathe: 2.0.3
       picomatch: 4.0.2
       pkg-types: 1.3.1
       scule: 1.3.0
       strip-literal: 3.0.0
-      unplugin: 2.1.2
-      unplugin-utils: 0.2.3
+      unplugin: 2.2.0
+      unplugin-utils: 0.2.4
 
   unique-string@2.0.0:
     dependencies:
@@ -16124,30 +16112,29 @@ snapshots:
 
   universalify@2.0.0: {}
 
-  unocss@65.4.3(postcss@8.5.2)(rollup@4.34.6)(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(terser@5.24.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3)):
-    dependencies:
-      '@unocss/astro': 65.4.3(rollup@4.34.6)(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(terser@5.24.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
-      '@unocss/cli': 65.4.3(rollup@4.34.6)
-      '@unocss/core': 65.4.3
-      '@unocss/postcss': 65.4.3(postcss@8.5.2)
-      '@unocss/preset-attributify': 65.4.3
-      '@unocss/preset-icons': 65.4.3
-      '@unocss/preset-mini': 65.4.3
-      '@unocss/preset-tagify': 65.4.3
-      '@unocss/preset-typography': 65.4.3
-      '@unocss/preset-uno': 65.4.3
-      '@unocss/preset-web-fonts': 65.4.3
-      '@unocss/preset-wind': 65.4.3
-      '@unocss/transformer-attributify-jsx': 65.4.3
-      '@unocss/transformer-compile-class': 65.4.3
-      '@unocss/transformer-directives': 65.4.3
-      '@unocss/transformer-variant-group': 65.4.3
-      '@unocss/vite': 65.4.3(rollup@4.34.6)(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(terser@5.24.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+  unocss@65.5.0(postcss@8.5.2)(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(terser@5.24.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3)):
+    dependencies:
+      '@unocss/astro': 65.5.0(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(terser@5.24.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@unocss/cli': 65.5.0
+      '@unocss/core': 65.5.0
+      '@unocss/postcss': 65.5.0(postcss@8.5.2)
+      '@unocss/preset-attributify': 65.5.0
+      '@unocss/preset-icons': 65.5.0
+      '@unocss/preset-mini': 65.5.0
+      '@unocss/preset-tagify': 65.5.0
+      '@unocss/preset-typography': 65.5.0
+      '@unocss/preset-uno': 65.5.0
+      '@unocss/preset-web-fonts': 65.5.0
+      '@unocss/preset-wind': 65.5.0
+      '@unocss/transformer-attributify-jsx': 65.5.0
+      '@unocss/transformer-compile-class': 65.5.0
+      '@unocss/transformer-directives': 65.5.0
+      '@unocss/transformer-variant-group': 65.5.0
+      '@unocss/vite': 65.5.0(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(terser@5.24.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
     optionalDependencies:
       vite: 6.1.0(@types/node@22.13.4)(jiti@2.4.2)(terser@5.24.0)(tsx@4.19.2)(yaml@2.7.0)
     transitivePeerDependencies:
       - postcss
-      - rollup
       - supports-color
       - vue
 
@@ -16155,46 +16142,43 @@ snapshots:
     dependencies:
       '@antfu/install-pkg': 0.5.0
       '@antfu/utils': 0.7.10
-      '@iconify/utils': 2.2.1
+      '@iconify/utils': 2.3.0
       debug: 4.4.0(supports-color@9.4.0)
       kolorist: 1.8.0
       local-pkg: 0.5.1
-      unplugin: 2.1.2
+      unplugin: 2.2.0
     optionalDependencies:
       '@vue/compiler-sfc': 3.5.13
       vue-template-compiler: 2.7.16
     transitivePeerDependencies:
       - supports-color
 
-  unplugin-utils@0.2.3:
+  unplugin-utils@0.2.4:
     dependencies:
-      pathe: 2.0.2
+      pathe: 2.0.3
       picomatch: 4.0.2
 
-  unplugin-vue-components@28.0.0(@babel/parser@7.26.7)(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@4.34.6)(vue@3.5.13(typescript@5.7.3)):
+  unplugin-vue-components@28.1.0(@babel/parser@7.26.7)(@nuxt/kit@3.15.4(magicast@0.3.5))(vue@3.5.13(typescript@5.7.3)):
     dependencies:
-      '@antfu/utils': 0.7.10
-      '@rollup/pluginutils': 5.1.4(rollup@4.34.6)
       chokidar: 3.6.0
       debug: 4.4.0(supports-color@9.4.0)
-      fast-glob: 3.3.3
-      local-pkg: 0.5.1
+      local-pkg: 1.0.0
       magic-string: 0.30.17
-      minimatch: 9.0.5
       mlly: 1.7.4
-      unplugin: 2.1.2
+      tinyglobby: 0.2.10
+      unplugin: 2.2.0
+      unplugin-utils: 0.2.4
       vue: 3.5.13(typescript@5.7.3)
     optionalDependencies:
       '@babel/parser': 7.26.7
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
     transitivePeerDependencies:
-      - rollup
       - supports-color
 
-  unplugin-vue-router@0.11.2(rollup@4.34.6)(vue-router@4.5.0(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3)):
+  unplugin-vue-router@0.11.2(rollup@4.34.7)(vue-router@4.5.0(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3)):
     dependencies:
       '@babel/types': 7.26.8
-      '@rollup/pluginutils': 5.1.4(rollup@4.34.6)
+      '@rollup/pluginutils': 5.1.4(rollup@4.34.7)
       '@vue-macros/common': 1.16.1(vue@3.5.13(typescript@5.7.3))
       ast-walker-scope: 0.6.2
       chokidar: 3.6.0
@@ -16203,7 +16187,7 @@ snapshots:
       local-pkg: 1.0.0
       magic-string: 0.30.17
       mlly: 1.7.4
-      pathe: 2.0.2
+      pathe: 2.0.3
       scule: 1.3.0
       unplugin: 2.1.2
       yaml: 2.7.0
@@ -16223,6 +16207,11 @@ snapshots:
       acorn: 8.14.0
       webpack-virtual-modules: 0.6.2
 
+  unplugin@2.2.0:
+    dependencies:
+      acorn: 8.14.0
+      webpack-virtual-modules: 0.6.2
+
   unstorage@1.14.4(db0@0.2.1)(idb-keyval@6.2.1)(ioredis@5.4.1):
     dependencies:
       anymatch: 3.1.3
@@ -16326,7 +16315,7 @@ snapshots:
       cac: 6.7.14
       debug: 4.4.0(supports-color@9.4.0)
       es-module-lexer: 1.6.0
-      pathe: 2.0.2
+      pathe: 2.0.3
       vite: 6.1.0(@types/node@22.13.4)(jiti@2.4.2)(terser@5.24.0)(tsx@4.19.2)(yaml@2.7.0)
     transitivePeerDependencies:
       - '@types/node'
@@ -16365,10 +16354,10 @@ snapshots:
       typescript: 5.7.3
       vue-tsc: 2.2.0(typescript@5.7.3)
 
-  vite-plugin-inspect@0.8.9(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@4.34.6)(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(terser@5.24.0)(tsx@4.19.2)(yaml@2.7.0)):
+  vite-plugin-inspect@0.8.9(@nuxt/kit@3.15.4(magicast@0.3.5))(rollup@4.34.7)(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(terser@5.24.0)(tsx@4.19.2)(yaml@2.7.0)):
     dependencies:
       '@antfu/utils': 0.7.10
-      '@rollup/pluginutils': 5.1.4(rollup@4.34.6)
+      '@rollup/pluginutils': 5.1.4(rollup@4.34.7)
       debug: 4.4.0(supports-color@9.4.0)
       error-stack-parser-es: 0.1.5
       fs-extra: 11.2.0
@@ -16426,7 +16415,7 @@ snapshots:
     dependencies:
       esbuild: 0.24.2
       postcss: 8.5.2
-      rollup: 4.34.6
+      rollup: 4.34.7
     optionalDependencies:
       '@types/node': 22.13.4
       fsevents: 2.3.3
@@ -16496,7 +16485,7 @@ snapshots:
       debug: 4.4.0(supports-color@9.4.0)
       expect-type: 1.1.0
       magic-string: 0.30.17
-      pathe: 2.0.2
+      pathe: 2.0.3
       std-env: 3.8.0
       tinybench: 2.9.0
       tinyexec: 0.3.2
@@ -16698,9 +16687,9 @@ snapshots:
       '@babel/core': 7.26.0
       '@babel/preset-env': 7.21.5(@babel/core@7.26.0)
       '@babel/runtime': 7.21.5
-      '@rollup/plugin-babel': 5.3.1(@babel/core@7.26.0)(rollup@4.34.6)
-      '@rollup/plugin-node-resolve': 11.2.1(rollup@4.34.6)
-      '@rollup/plugin-replace': 2.4.2(rollup@4.34.6)
+      '@rollup/plugin-babel': 5.3.1(@babel/core@7.26.0)(rollup@4.34.7)
+      '@rollup/plugin-node-resolve': 11.2.1(rollup@4.34.7)
+      '@rollup/plugin-replace': 2.4.2(rollup@4.34.7)
       '@surma/rollup-plugin-off-main-thread': 2.2.3
       ajv: 8.12.0
       common-tags: 1.8.2
@@ -16709,8 +16698,8 @@ snapshots:
       glob: 7.2.3
       lodash: 4.17.21
       pretty-bytes: 5.6.0
-      rollup: 4.34.6
-      rollup-plugin-terser: 7.0.2(rollup@4.34.6)
+      rollup: 4.34.7
+      rollup-plugin-terser: 7.0.2(rollup@4.34.7)
       source-map: 0.8.0-beta.0
       stringify-object: 3.3.0
       strip-comments: 2.0.1
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 7cef76c4f4d..7559dcf3d65 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -2,9 +2,9 @@ packages:
   - packages/*
   - '!playgrounds'
 catalog:
-  '@antfu/eslint-config': ^4.2.0
+  '@antfu/eslint-config': ^4.2.1
   '@antfu/ni': ^23.3.1
-  '@iconify/json': ^2.2.306
+  '@iconify/json': ^2.2.307
   '@nuxt/kit': ^3.15.4
   '@nuxt/schema': ^3.15.4
   '@rollup/plugin-json': ^6.1.0
@@ -69,7 +69,7 @@ catalog:
   qrcode: ^1.5.4
   remove-markdown: ^0.6.0
   rimraf: ^6.0.1
-  rollup: ^4.34.6
+  rollup: ^4.34.7
   rollup-plugin-dts: ^6.1.1
   rollup-plugin-esbuild: ^6.2.0
   rollup-plugin-pure: ^0.2.1
@@ -84,9 +84,9 @@ catalog:
   typescript: ^5.7.3
   unimport: ^4.1.1
   universal-cookie: ^7.2.2
-  unocss: ^65.4.3
+  unocss: ^65.5.0
   unplugin-icons: ^22.0.0
-  unplugin-vue-components: ^28.0.0
+  unplugin-vue-components: ^28.1.0
   vite: ^6.1.0
   vite-plugin-inspect: ^10.2.1
   vite-plugin-pwa: ^0.21.1