useFetch with reactive variables called twice

export default function useTable<T>(url: string) {
  const searchText = useState<string>('table-search-text', () => '')
  const pagination = useState('table-pagination', () => ({ pageIndex: 1, pageSize: 10 }))

  const { data, error, refresh, status, pending } = useFetch<{ results: Array<T>, total: number }>(url, {
    query: computed(() => ({ search: searchText.value, pageIndex: pagination.value.pageIndex - 1, pageSize: pagination.value.pageSize })),
    // default: () => ({ results: [], total: 0 }),
  })

  const paginate = computed(() => ({ ...pagination.value }))

  function setPage(p: number) {
    pagination.value.pageIndex = p
  }

  const doSearch = useDebounceFn((text: string) => {
    searchText.value = text

    pagination.value.pageIndex = 1
  }, 300)

  function setSearchText(text: AcceptableValue) {
    doSearch(text as string)
  }

  return {
    data,
    error,
    refresh,
    status,
    pending,
    searchText,
    paginate,
    setPage,
    setSearchText
  }
}