I am using Vue3 + Nuxt3. My backend API is a separate NestJS project on a separate URL that will also change within environments. Because of this it is best for me to have a custom useFetch composable whenever I am interacting with my API. It works and I have followed the docs in order to do it: https://nuxt.com/docs/guide/recipes/custom-usefetch#custom-usefetchuseasyncdata

The problem is that when I try to use this composable in a pinia action, I get a warning:
enter image description here

This is how I am calling my composable in the pinia store:
const {data, error} = await useAPI('/auth/login', { method: 'POST', body: JSON.stringify({email, password}) });

It works but I am aware that using composables outside of setup is not correct and in this case I should use $fetch directly. However, the custom composable is specifically to make calling my API a lot easier, I need to be able to use it in event handlers. Can anybody point me in the right direction please? I’ve looked everywhere.

I have tried to incorporate the same utility into $fetch but I cannot achieve it.