Vue-Query and AG-Grid ServerSide model support?

[HenrijsFF]

So I have this dataSource code for my AGGrid serverside model data fetching:

const dataSource = {
  getRows: async (params: IServerSideGetRowsParams) => {
    try {
      const { data } = await useHttp.post(props.endpoint, {
        filterModel: params.request.filterModel,
        sortModel: params.request.sortModel,
        startRow: params.request.startRow,
        endRow: params.request.endRow,
      });

      params.success({
        rowData: data.data,
        rowCount: data.total,
      });
    } catch (error) {
      console.error("Error fetching rows:", error);
      params.fail();
    }

    // Update filter model from preferences if available
    if (preferencesStorage.value && props.tableName !== null) {
      params.api.setFilterModel(preferencesStorage.value.filterModel || null);
    }

    autoSizeTable();
  },
};

I tried wrapping the post request in useQuery, but it's throwing me that:
vue-query composable like "useQuery()" should only be used inside a "setup()" function or a running effect scope. They might otherwise lead to memory leaks.
and
Error fetching rows: Error: vue-query hooks can only be used inside setup() function or functions that support injection context.

The whole const datasource function is at the root level of <script setup> in my ag-grid wrapper component.

What's the best way to handle this?
I've tried using the queryClient.fetchQuery() but that loses the whole re-fetching, bg fetching etc.