Tanstack vue query dont apply after updated

I use vue and @tanstack/vue-query. it is my code:

  <a-select
     v-model="selectedPersonId"
     @search="handleSearch"
     @change="selectPerson"
     show-search
     :disabled="persons.isFetching">
     <a-select-option v-for="person in persons.data" :key="person.id" :value="person.id">
       {{ person.fullName }}
     </a-select-option>
     <a-select-option v-if="persons.isFetching" disabled> Loading... </a-select-option>
     <a-select-option v-if="persons.isError" disabled>
         Error fetching data.
     </a-select-option>
  </a-select>

and i have script files:

const {
  data: persons,
  refetch,
  isFetching,
  isError,
} = useQuery({
  queryKey: ['persons', searchQuery],
  queryFn: () => getPersons({ q: searchQuery.value }),
  enabled: false, // Initially disable the query
})
watch(
  () => searchQuery.value,
  async (newQuery) => {
    console.log('icinde')
    await refetch()
    console.log(persons.data)
  }
)
onMounted(() => {
  refetch()
})

When I see tanstack/vue-query-devtool i show data. but select options don't change. How to solve this? at console I show icinde undefined my getPersonss function this:

const getPersons = (queryKey) => {
  return new Promise((resolve, reject) => {
    axios
      .get(`${server}/api/persons`, {
        params: queryKey,
        withCredentials: true,
      })
      .then((res) => {
        const { data } = res

        resolve(data)
      })
      .catch((err) => {

        reject(err?.response?.data?.message || 'Serwerde näsazlyk bar')
      })
  })

here not problem, it is work vell }