Dynamic QueryOptions via VueJS props

[spaceemotion]

I've recently learned about the queryOptions approach and wanted to see if I can update my code base a bit. Right now I have one component that i use at serveral places, but it takes a queryKey and a queryFn as props, creating and managing the query inside of it.

<script setup>
const props = defineProps<{
  queryKey: string[];
  queryFn: () => Promise<Novel[]>;
}>();

const { isLoading, loadingError, data: novels } = useQuery({
  queryKey: computed(() => (props.queryKey)),
  queryFn: () => props.queryFn(),
  refetchOnWindowFocus: false,
});

I am using functions here so the query and key can change from the outside. However I seem to loose that functionality as I can't seem to figure out to make the passed queryOptions dynamic?

<script setup>
const props = defineProps<{
  query: UseQueryOptions<Novel[], unknown, unknown, unknown>;
}>();

const { isLoading, loadingError, data: novels } = useQuery(
  () => props.query()
  // ^ this does not work
);

One way to do this is to simply pass in the list of models I want to load, but the component handles the loading and error states for me, showing different components for each; loading spinner, error message and the actual listing of models if all goes well.

I like the new options in principle, but am I missing something here? Thanks in advance!