这是我的测试代码，我使用Vite && Vue Router 4.x

<template>
        <div>
            <label>測試</label><br>
            <input v-model="testInput" />
            <button @click="search">查詢</button>
        </div>
        <div>
            {{ testInput }}
        </div>
    </template>
    
    <script setup>
     import { ref, onMounted } from 'vue'
     import { useRouter, useRoute } from 'vue-router';
     const testInput = ref();
     const router = useRouter()
     const route = useRoute();
    
     console.log(route.query);
    
     
     onMounted(() => {
       testInput.value = route.query.testInput || '';
     });
    
     function search() {
        router.push({ name: 'Test', query: { testInput: testInput.value } });
     }
    
    </script>

在我的代码中，为什么查询值没有自动填充到路由器中？这是我的URL

http://localhost/#/?testInput=aaaa