Vue Query not refetching when key changes?

<template>
<DataTable :data="data" v-if="data" :sorting="sorting" />
</template>

<script>
const salesFetcher = async () => {
    const resp = await StatusDataService.get({
        page: 1,
        itemsPerPage: 20,
        input: '',
        store
    })

    return resp.data
}

const sorting = ref<SortingState>([])
const { isLoading, isError, data, error, isFetching } = useQuery({
    queryKey: ['sales', sorting],
    queryFn: () => salesFetcher(sorting)
})

</script>

const table = useVueTable({
    data,
    columns: salescolumns,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    state: {
        get sorting() {
            return sorting.value
        }
    },
    onSortingChange: (updaterOrValue) => {
        sorting.value =
            typeof updaterOrValue === 'function' ? updaterOrValue(sorting.value) : updaterOrValue
    },
    manualSorting: true,
    enableMultiSort: false
})