@tanstack/vue-query plugin: allow passing Refs in generated option functions

[PotatoesMaster]

Description

queryOptions() allows to pass refs (Vue reactive variables) in the queryKey property (it is typed using MaybeRefDeep, a helper type in @tanstack/vue-query). Tanstack Query automatically refetches when a ref is updated.

Considering a endpoint named "getFoo" having a query param "bar", calling the generated getFooOptions with an argument containing refs (bypassing the type check) seems to work:

const bar = ref('foo');

const { data } = useQuery(getFooOptions({
    query: {
        bar: bar as any
    }
}));

const someTrigger = () => {
   bar.value = 'bar'; // will trigger a refetch
}

Ideally the plugin generated function signature should allows this usage.

// query key creation functions are impacted, because query key may be reactive
export const getFooQueryKey = (options?: Options<GetFooData>) => createQueryKey('getFoo', options);
//                             options?: MaybeRefDeep<Options<GetFooData>>

export const getFooOptions = (options?: Options<GetFooData>) => {
//                            options?: MaybeRefDeep<Options<GetFooData>>
    return queryOptions({
        queryFn: async ({ queryKey, signal }) => {
            const { data } = await getFoo({
                ...options, // refs are passed here, but this is unwanted
                ...queryKey[0], // here are the finite values
                signal,
                throwOnError: true
            });
            return data;
        },
        queryKey: getFooQueryKey(options)
    });
};