diff --git a/auto-imports.d.ts b/auto-imports.d.ts
index 834ce70..00d42fd 100644
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -1,25 +1,41 @@
 // Generated by 'unplugin-auto-import'
 // We suggest you to commit this file into source control
 declare global {
+  const $: typeof import('vue/macros')['$']
+  const $$: typeof import('vue/macros')['$$']
+  const $computed: typeof import('vue/macros')['$computed']
+  const $customRef: typeof import('vue/macros')['$customRef']
+  const $ref: typeof import('vue/macros')['$ref']
+  const $shallowRef: typeof import('vue/macros')['$shallowRef']
+  const $toRef: typeof import('vue/macros')['$toRef']
+  const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
+  const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
   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 computedWithControl: typeof import('@vueuse/core')['computedWithControl']
+  const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
+  const controlledRef: typeof import('@vueuse/core')['controlledRef']
   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']
@@ -30,6 +46,7 @@ declare global {
   const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
   const markRaw: typeof import('vue')['markRaw']
   const nextTick: typeof import('vue')['nextTick']
+  const note: typeof import('@vueuse/core')['note']
   const onActivated: typeof import('vue')['onActivated']
   const onBeforeMount: typeof import('vue')['onBeforeMount']
   const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
@@ -47,6 +64,7 @@ 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']
@@ -68,6 +86,8 @@ declare global {
   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']
@@ -101,6 +121,7 @@ declare global {
   const useCycleList: typeof import('@vueuse/core')['useCycleList']
   const useDark: typeof import('@vueuse/core')['useDark']
   const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
+  const useDebounce: typeof import('@vueuse/core')['useDebounce']
   const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
   const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
   const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
@@ -180,6 +201,7 @@ 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']
diff --git a/package.json b/package.json
index ceabcc2..bcdf5ac 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "pnpm": "^6.32.3",
     "typescript": "^4.6.2",
     "unocss": "^0.27.6",
-    "unplugin-auto-import": "^0.6.2",
+    "unplugin-auto-import": "^0.6.4",
     "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 e2f3480..bd2fb96 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13,7 +13,7 @@ specifiers:
   pnpm: ^6.32.3
   typescript: ^4.6.2
   unocss: ^0.27.6
-  unplugin-auto-import: ^0.6.2
+  unplugin-auto-import: ^0.6.4
   unplugin-vue-components: ^0.17.21
   vite: ^2.8.6
   vite-plugin-pages: ^0.21.4
@@ -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.2_@vueuse+core@8.0.0+vite@2.8.6
+  unplugin-auto-import: 0.6.4_@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
@@ -299,6 +299,14 @@ packages:
       picomatch: 2.3.0
     dev: true
 
+  /@rollup/pluginutils/4.2.0:
+    resolution: {integrity: sha512-2WUyJNRkyH5p487pGnn4tWAsxhEFKN/pT8CMgHshd5H+IXkOnKvKZwsz5ZWz+YCXkleZRAU5kwbfgF8CPfDRqA==}
+    engines: {node: '>= 8.0.0'}
+    dependencies:
+      estree-walker: 2.0.2
+      picomatch: 2.3.0
+    dev: true
+
   /@tootallnate/once/2.0.0:
     resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
     engines: {node: '>= 10'}
@@ -3729,8 +3737,8 @@ packages:
       - supports-color
     dev: true
 
-  /unplugin-auto-import/0.6.2_@vueuse+core@8.0.0+vite@2.8.6:
-    resolution: {integrity: sha512-S9TbxRiMe7FmEH4wy0PF+YrpLrLjahioSuNoxuW/FM/PEWEEm7Uw6NDExvPaWHw2BTJL5h6luD7R2spTT/7GbQ==}
+  /unplugin-auto-import/0.6.4_@vueuse+core@8.0.0+vite@2.8.6:
+    resolution: {integrity: sha512-gkjVKnugRCIh1JtwZhn8bdvdW8RW17WoCEJgJXJ9sGMsKrgP9xbaNMLULrmtrfxyGOabm42XXWoaR12EzdcVNA==}
     engines: {node: '>=14'}
     peerDependencies:
       '@vueuse/core': '*'
@@ -3739,12 +3747,12 @@ packages:
         optional: true
     dependencies:
       '@antfu/utils': 0.5.0
-      '@rollup/pluginutils': 4.1.2
+      '@rollup/pluginutils': 4.2.0
       '@vueuse/core': 8.0.0_vue@3.2.31
       local-pkg: 0.4.1
-      magic-string: 0.25.7
+      magic-string: 0.26.1
       resolve: 1.22.0
-      unplugin: 0.3.2_vite@2.8.6
+      unplugin: 0.4.0_vite@2.8.6
     transitivePeerDependencies:
       - esbuild
       - rollup
@@ -3805,8 +3813,8 @@ packages:
       webpack-virtual-modules: 0.4.3
     dev: true
 
-  /unplugin/0.3.2_vite@2.8.6:
-    resolution: {integrity: sha512-5d0DMYNKZU+S9eZUiBfw6Co32eRg8myUgBPoWSqG/wDFCUE/WznfSsJnZWi1P9l69x4uLJqt2qVq1xW/AsXFrw==}
+  /unplugin/0.4.0_vite@2.8.6:
+    resolution: {integrity: sha512-4ScITEmzlz1iZW3tkz+3L1V5k/xMQ6kjgm4lEXKxH0ozd8/OUWfiSA7RMRyrawsvq/t50JIzPpp1UyuSL/AXkA==}
     peerDependencies:
       esbuild: '>=0.13'
       rollup: ^2.50.0
@@ -3822,6 +3830,7 @@ packages:
       webpack:
         optional: true
     dependencies:
+      chokidar: 3.5.3
       vite: 2.8.6
       webpack-virtual-modules: 0.4.3
     dev: true
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 0260305..16c3e39 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-const name = ref('')
+const name = $ref('')
 
 const router = useRouter()
 const go = () => {
-  if (name.value)
-    router.push(`/hi/${encodeURIComponent(name.value)}`)
+  if (name)
+    router.push(`/hi/${encodeURIComponent(name)}`)
 }
 </script>
 
diff --git a/vite.config.ts b/vite.config.ts
index f8cbc67..3763117 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -15,7 +15,9 @@ export default defineConfig({
     },
   },
   plugins: [
-    Vue(),
+    Vue({
+      reactivityTransform: true,
+    }),
 
     // https://github.com/hannoeru/vite-plugin-pages
     Pages(),
@@ -24,6 +26,7 @@ export default defineConfig({
     AutoImport({
       imports: [
         'vue',
+        'vue/macros',
         'vue-router',
         '@vueuse/core',
       ],