diff --git a/auto-imports.d.ts b/auto-imports.d.ts
index 5af89ea..834ce70 100644
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -1,36 +1,32 @@
 // Generated by 'unplugin-auto-import'
 // We suggest you to commit this file into source control
 declare global {
-  const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
-  const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
-  const biSyncRef: typeof import('@vueuse/core')['biSyncRef']
   const computed: typeof import('vue')['computed']
+  const computedAsync: typeof import('@vueuse/core')['computedAsync']
+  const computedEager: typeof import('@vueuse/core')['computedEager']
   const computedInject: typeof import('@vueuse/core')['computedInject']
-  const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
-  const controlledRef: typeof import('@vueuse/core')['controlledRef']
+  const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
   const createApp: typeof import('vue')['createApp']
   const createEventHook: typeof import('@vueuse/core')['createEventHook']
   const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
-  const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
   const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
   const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
   const customRef: typeof import('vue')['customRef']
-  const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
-  const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
   const defineComponent: typeof import('vue')['defineComponent']
-  const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
   const effectScope: typeof import('vue')['effectScope']
   const EffectScope: typeof import('vue')['EffectScope']
   const extendRef: typeof import('@vueuse/core')['extendRef']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
   const h: typeof import('vue')['h']
-  const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
   const inject: typeof import('vue')['inject']
   const isDefined: typeof import('@vueuse/core')['isDefined']
   const isReadonly: typeof import('vue')['isReadonly']
   const isRef: typeof import('vue')['isRef']
+  const logicAnd: typeof import('@vueuse/core')['logicAnd']
+  const logicNot: typeof import('@vueuse/core')['logicNot']
+  const logicOr: typeof import('@vueuse/core')['logicOr']
   const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
   const markRaw: typeof import('vue')['markRaw']
   const nextTick: typeof import('vue')['nextTick']
@@ -51,7 +47,6 @@ declare global {
   const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
   const onUnmounted: typeof import('vue')['onUnmounted']
   const onUpdated: typeof import('vue')['onUpdated']
-  const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
   const provide: typeof import('vue')['provide']
   const reactify: typeof import('@vueuse/core')['reactify']
   const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
@@ -61,15 +56,18 @@ declare global {
   const reactivePick: typeof import('@vueuse/core')['reactivePick']
   const readonly: typeof import('vue')['readonly']
   const ref: typeof import('vue')['ref']
+  const refAutoReset: typeof import('@vueuse/core')['refAutoReset']
+  const refDebounced: typeof import('@vueuse/core')['refDebounced']
   const refDefault: typeof import('@vueuse/core')['refDefault']
+  const refThrottled: typeof import('@vueuse/core')['refThrottled']
+  const refWithControl: typeof import('@vueuse/core')['refWithControl']
   const resolveComponent: typeof import('vue')['resolveComponent']
   const shallowReactive: typeof import('vue')['shallowReactive']
   const shallowReadonly: typeof import('vue')['shallowReadonly']
   const shallowRef: typeof import('vue')['shallowRef']
   const syncRef: typeof import('@vueuse/core')['syncRef']
+  const syncRefs: typeof import('@vueuse/core')['syncRefs']
   const templateRef: typeof import('@vueuse/core')['templateRef']
-  const throttledRef: typeof import('@vueuse/core')['throttledRef']
-  const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
   const toRaw: typeof import('vue')['toRaw']
   const toReactive: typeof import('@vueuse/core')['toReactive']
   const toRef: typeof import('vue')['toRef']
@@ -102,7 +100,7 @@ declare global {
   const useCssVars: typeof import('vue')['useCssVars']
   const useCycleList: typeof import('@vueuse/core')['useCycleList']
   const useDark: typeof import('@vueuse/core')['useDark']
-  const useDebounce: typeof import('@vueuse/core')['useDebounce']
+  const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
   const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
   const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
   const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
@@ -123,10 +121,12 @@ declare global {
   const useEyeDropper: typeof import('@vueuse/core')['useEyeDropper']
   const useFavicon: typeof import('@vueuse/core')['useFavicon']
   const useFetch: typeof import('@vueuse/core')['useFetch']
+  const useFileSystemAccess: typeof import('@vueuse/core')['useFileSystemAccess']
   const useFocus: typeof import('@vueuse/core')['useFocus']
   const useFocusWithin: typeof import('@vueuse/core')['useFocusWithin']
   const useFps: typeof import('@vueuse/core')['useFps']
   const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
+  const useGamepad: typeof import('@vueuse/core')['useGamepad']
   const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
   const useIdle: typeof import('@vueuse/core')['useIdle']
   const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
@@ -180,12 +180,12 @@ declare global {
   const useSwipe: typeof import('@vueuse/core')['useSwipe']
   const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
   const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
-  const useThrottle: typeof import('@vueuse/core')['useThrottle']
   const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
   const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn']
   const useTimeAgo: typeof import('@vueuse/core')['useTimeAgo']
   const useTimeout: typeof import('@vueuse/core')['useTimeout']
   const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn']
+  const useTimeoutPoll: typeof import('@vueuse/core')['useTimeoutPoll']
   const useTimestamp: typeof import('@vueuse/core')['useTimestamp']
   const useTitle: typeof import('@vueuse/core')['useTitle']
   const useToggle: typeof import('@vueuse/core')['useToggle']
@@ -206,8 +206,12 @@ declare global {
   const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
   const watch: typeof import('vue')['watch']
   const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
+  const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
   const watchEffect: typeof import('vue')['watchEffect']
+  const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
   const watchOnce: typeof import('@vueuse/core')['watchOnce']
+  const watchPausable: typeof import('@vueuse/core')['watchPausable']
+  const watchThrottled: typeof import('@vueuse/core')['watchThrottled']
   const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
   const whenever: typeof import('@vueuse/core')['whenever']
 }
diff --git a/package.json b/package.json
index 559ca6d..ceabcc2 100644
--- a/package.json
+++ b/package.json
@@ -10,12 +10,12 @@
     "test": "vitest"
   },
   "dependencies": {
-    "@vueuse/core": "^7.7.1",
+    "@vueuse/core": "^8.0.0",
     "vue": "^3.2.31",
     "vue-router": "^4.0.14"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.18.6",
+    "@antfu/eslint-config": "^0.18.8",
     "@iconify-json/carbon": "^1.1.1",
     "@types/node": "^17.0.21",
     "@unocss/reset": "^0.27.6",
@@ -26,7 +26,7 @@
     "pnpm": "^6.32.3",
     "typescript": "^4.6.2",
     "unocss": "^0.27.6",
-    "unplugin-auto-import": "^0.6.1",
+    "unplugin-auto-import": "^0.6.2",
     "unplugin-vue-components": "^0.17.21",
     "vite": "^2.8.6",
     "vite-plugin-pages": "^0.21.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1ef1689..e2f3480 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,19 +1,19 @@
 lockfileVersion: 5.3
 
 specifiers:
-  '@antfu/eslint-config': ^0.18.6
+  '@antfu/eslint-config': ^0.18.8
   '@iconify-json/carbon': ^1.1.1
   '@types/node': ^17.0.21
   '@unocss/reset': ^0.27.6
   '@vitejs/plugin-vue': ^2.2.4
   '@vue/test-utils': ^2.0.0-rc.18
-  '@vueuse/core': ^7.7.1
+  '@vueuse/core': ^8.0.0
   eslint: ^8.10.0
   jsdom: ^19.0.0
   pnpm: ^6.32.3
   typescript: ^4.6.2
   unocss: ^0.27.6
-  unplugin-auto-import: ^0.6.1
+  unplugin-auto-import: ^0.6.2
   unplugin-vue-components: ^0.17.21
   vite: ^2.8.6
   vite-plugin-pages: ^0.21.4
@@ -23,12 +23,12 @@ specifiers:
   vue-tsc: ^0.32.1
 
 dependencies:
-  '@vueuse/core': 7.7.1_vue@3.2.31
+  '@vueuse/core': 8.0.0_vue@3.2.31
   vue: 3.2.31
   vue-router: 4.0.14_vue@3.2.31
 
 devDependencies:
-  '@antfu/eslint-config': 0.18.6_eslint@8.10.0+typescript@4.6.2
+  '@antfu/eslint-config': 0.18.8_eslint@8.10.0+typescript@4.6.2
   '@iconify-json/carbon': 1.1.1
   '@types/node': 17.0.21
   '@unocss/reset': 0.27.6
@@ -39,7 +39,7 @@ devDependencies:
   pnpm: 6.32.3
   typescript: 4.6.2
   unocss: 0.27.6_jsdom@19.0.0
-  unplugin-auto-import: 0.6.1_@vueuse+core@7.7.1+vite@2.8.6
+  unplugin-auto-import: 0.6.2_@vueuse+core@8.0.0+vite@2.8.6
   unplugin-vue-components: 0.17.21_vite@2.8.6+vue@3.2.31
   vite: 2.8.6
   vite-plugin-pages: 0.21.4_vite@2.8.6
@@ -48,8 +48,8 @@ devDependencies:
 
 packages:
 
-  /@antfu/eslint-config-basic/0.18.6_eslint@8.10.0:
-    resolution: {integrity: sha512-C4k89A+c7XYSpItVxtPl26+JNCZUYwOtqrB3zWL+RRV3WB8Qi4oJpNSg3SbzPCbH1T18oO3/VRPM9ivW/cIONA==}
+  /@antfu/eslint-config-basic/0.18.8_eslint@8.10.0:
+    resolution: {integrity: sha512-xgBANrnK7rODHwUtnrbYf7rdqCFEIQelwWtrZxn7aoKMvkRnUUbgVGtuDJOsEdI9eiZblsTx0Z60Y4EcJMmEWw==}
     peerDependencies:
       eslint: '>=7.4.0'
     dependencies:
@@ -70,12 +70,12 @@ packages:
       - supports-color
     dev: true
 
-  /@antfu/eslint-config-react/0.18.6_eslint@8.10.0+typescript@4.6.2:
-    resolution: {integrity: sha512-z2kwpc0H2glR+C1sNivQ79aAlyP9Cslu7G6JFQ1N/86ln982xmaZpNKXnsfugjAav/D5viwrskHSOpdf46BxDA==}
+  /@antfu/eslint-config-react/0.18.8_eslint@8.10.0+typescript@4.6.2:
+    resolution: {integrity: sha512-HszlqJRyxKzLXmGsLf0ONK2oDAZ+A7kon9jNdkmUYyoFjRU93W9lNfNQLfqtNMzmFgXhUMZqJQJP4p+6S8flVQ==}
     peerDependencies:
       eslint: '>=7.4.0'
     dependencies:
-      '@antfu/eslint-config-ts': 0.18.6_eslint@8.10.0+typescript@4.6.2
+      '@antfu/eslint-config-ts': 0.18.8_eslint@8.10.0+typescript@4.6.2
       eslint: 8.10.0
       eslint-plugin-react: 7.29.3_eslint@8.10.0
     transitivePeerDependencies:
@@ -83,13 +83,13 @@ packages:
       - typescript
     dev: true
 
-  /@antfu/eslint-config-ts/0.18.6_eslint@8.10.0+typescript@4.6.2:
-    resolution: {integrity: sha512-SXzJVMlCuNyGGhPc9ypeNt9AUl50NjoUpZt41U3+0ieli0FA5kvMiKeIXFVrMl+t8oFyuuv3UaPYJtTKkYSDcw==}
+  /@antfu/eslint-config-ts/0.18.8_eslint@8.10.0+typescript@4.6.2:
+    resolution: {integrity: sha512-BeQcYwluWr2Elc/z6kfg0MowHl0smsLq2+s/OKJ2dJMSez+Pmkp/T+dMlo01PExODWvlROlmgtm34Z7JNUd+nA==}
     peerDependencies:
       eslint: '>=7.4.0'
       typescript: '>=3.9'
     dependencies:
-      '@antfu/eslint-config-basic': 0.18.6_eslint@8.10.0
+      '@antfu/eslint-config-basic': 0.18.8_eslint@8.10.0
       '@typescript-eslint/eslint-plugin': 5.14.0_f4054b8c3cd621db16ae1b9d571bccc0
       '@typescript-eslint/parser': 5.14.0_eslint@8.10.0+typescript@4.6.2
       eslint: 8.10.0
@@ -98,12 +98,12 @@ packages:
       - supports-color
     dev: true
 
-  /@antfu/eslint-config-vue/0.18.6_eslint@8.10.0+typescript@4.6.2:
-    resolution: {integrity: sha512-ZnlOiWaA4/ce3NrLjFQpCHI3CVyoann6vJcwXw3BF7IWzKSubbm1Q4PlJqsOWlNOokR5GHWKN5CwJa6kQLEWsw==}
+  /@antfu/eslint-config-vue/0.18.8_eslint@8.10.0+typescript@4.6.2:
+    resolution: {integrity: sha512-WJuU9LeFE3lpm2GcmTMHtLyxtqUd1oxQWtgsiQbF5bAcGCjyRoVzDGBq29E17GnsgNijmHKKxONmaCod1DzW/Q==}
     peerDependencies:
       eslint: '>=7.4.0'
     dependencies:
-      '@antfu/eslint-config-ts': 0.18.6_eslint@8.10.0+typescript@4.6.2
+      '@antfu/eslint-config-ts': 0.18.8_eslint@8.10.0+typescript@4.6.2
       eslint: 8.10.0
       eslint-plugin-vue: 8.5.0_eslint@8.10.0
     transitivePeerDependencies:
@@ -111,13 +111,13 @@ packages:
       - typescript
     dev: true
 
-  /@antfu/eslint-config/0.18.6_eslint@8.10.0+typescript@4.6.2:
-    resolution: {integrity: sha512-z+8xe0UKxk/7AvnJ2IeBDaY+MnE9QdpkUy8E1zd2V5A06Bpg5n8Na7/Xb3K9tETwLV0/4NA5GBY8W/68k483Fg==}
+  /@antfu/eslint-config/0.18.8_eslint@8.10.0+typescript@4.6.2:
+    resolution: {integrity: sha512-Y2lxcnO2VsnceYiyKxN+IbCRkQfpNG7Zs62mxE9uKU1ylLtVNThOLBdDFq/0f6dKXyTkit+FqdfRDokl1nYKzQ==}
     peerDependencies:
       eslint: '>=7.4.0'
     dependencies:
-      '@antfu/eslint-config-react': 0.18.6_eslint@8.10.0+typescript@4.6.2
-      '@antfu/eslint-config-vue': 0.18.6_eslint@8.10.0+typescript@4.6.2
+      '@antfu/eslint-config-react': 0.18.8_eslint@8.10.0+typescript@4.6.2
+      '@antfu/eslint-config-vue': 0.18.8_eslint@8.10.0+typescript@4.6.2
       '@typescript-eslint/eslint-plugin': 5.14.0_f4054b8c3cd621db16ae1b9d571bccc0
       '@typescript-eslint/parser': 5.14.0_eslint@8.10.0+typescript@4.6.2
       eslint: 8.10.0
@@ -778,8 +778,8 @@ packages:
       vue: 3.2.31
     dev: true
 
-  /@vueuse/core/7.7.1_vue@3.2.31:
-    resolution: {integrity: sha512-PRRgbATMpoeUmkCEBtUeJgOwtew8s+4UsEd+Pm7MhkjL2ihCNrSqxNVtM6NFE4uP2sWnkGcZpCjPuNSxowJ1Ow==}
+  /@vueuse/core/8.0.0_vue@3.2.31:
+    resolution: {integrity: sha512-CU8oQhTaAQ4+9IlEHnaGk88qQ2fSvALHixWZhfyA2j18G42XeyJz3V0FmnBMWZUwd7VRSHJZFbGziZ6o5npNow==}
     peerDependencies:
       '@vue/composition-api': ^1.1.0
       vue: ^2.6.0 || ^3.2.0
@@ -789,13 +789,18 @@ packages:
       vue:
         optional: true
     dependencies:
-      '@vueuse/shared': 7.7.1_vue@3.2.31
+      '@vueuse/metadata': 8.0.0
+      '@vueuse/shared': 8.0.0_vue@3.2.31
       vue: 3.2.31
       vue-demi: 0.12.1_vue@3.2.31
     dev: false
 
-  /@vueuse/shared/7.7.1_vue@3.2.31:
-    resolution: {integrity: sha512-rN2qd22AUl7VdBxihagWyhUNHCyVk9IpvBTTfHoLH9G7rGE552X1f+zeCfehuno0zXif13jPw+icW/wn2a0rnQ==}
+  /@vueuse/metadata/8.0.0:
+    resolution: {integrity: sha512-23R9pqgfJnfmUnGCOtaDkwaNYEAO7N6whvaAFAs5D5xHXgqAj+z/tLhwQzSJw/ZzJGUb8W5L+VgP9S7SL35riw==}
+    dev: false
+
+  /@vueuse/shared/8.0.0_vue@3.2.31:
+    resolution: {integrity: sha512-HUIFZ5Vc3aGvIzDQJJhg2+Ok5xvNuwxoz5HrOr/M765wlj357WiMYzhU2XGljL6IcmK29SP/1Jb4Fra7A4PBCw==}
     peerDependencies:
       '@vue/composition-api': ^1.1.0
       vue: ^2.6.0 || ^3.2.0
@@ -3724,8 +3729,8 @@ packages:
       - supports-color
     dev: true
 
-  /unplugin-auto-import/0.6.1_@vueuse+core@7.7.1+vite@2.8.6:
-    resolution: {integrity: sha512-rSukyyROmSkqL9tjkA88oLhpG4tXYkk2rTpqGaYKjXRNktHEKf03pit8bamPt95KPVfMLjT0+TPKi6ju0toOIw==}
+  /unplugin-auto-import/0.6.2_@vueuse+core@8.0.0+vite@2.8.6:
+    resolution: {integrity: sha512-S9TbxRiMe7FmEH4wy0PF+YrpLrLjahioSuNoxuW/FM/PEWEEm7Uw6NDExvPaWHw2BTJL5h6luD7R2spTT/7GbQ==}
     engines: {node: '>=14'}
     peerDependencies:
       '@vueuse/core': '*'
@@ -3735,7 +3740,7 @@ packages:
     dependencies:
       '@antfu/utils': 0.5.0
       '@rollup/pluginutils': 4.1.2
-      '@vueuse/core': 7.7.1_vue@3.2.31
+      '@vueuse/core': 8.0.0_vue@3.2.31
       local-pkg: 0.4.1
       magic-string: 0.25.7
       resolve: 1.22.0