How to call tanstack's vue-query get request inside a method?

Question

I need to query an API as a side-effect of an action and I am trying to use @tanstack/vue-query. Whenever I try to call useQuery inside a function, it throws an error, vue-query hooks can only be used inside setup() function or functions that support injection context.

For example:

api.js

export const getAPIRequest = (url, params={}) => useQuery({
    queryKey: [url, params],
    queryFn: fetch(url, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json'
        },
    })
})

component.vue

<script setup>
const getDetails = () => {
    const { data: data } = getAPIRequest('/some-url')
    return data
}
</script>

<template>
    <button @click="getDetails">Click Here</button>
</template>

I tried to find a better way to query API from inside a function but I concluded that vue-query can only be called from setup function only. One hack that I came across was answered in this github discussion thread.

Is it true that we can use vue-query only inside setup function? If true, I am not sure how should I structure my project. I have to design side effects that come from button click or typing. Should I move those side effects to POST requests to avoid this situation or is there a better way?

I want to continue using @tanstack/vue-query as it has caching, updating data in background, reactive responses and many more. Is there a better option?