You are using useFetch WRONG! (I hope you don't)
Why Stack Overflow recommends it
Stack Overflow users link it when answering Nuxt 3 questions where useFetch or useAsyncData is called in the wrong place (onMounted, button handlers, refresh logic) and $fetch or execute() is the better choice.
Recommended by 2 people across 2 different months, 2024 to 2025.
What it is
Nuxt developer Alexander Lichter walks through the most common mistake with Nuxt's useFetch composable: calling it inside event handlers or other non-setup code instead of during setup. He demos the bug in a small app, explains why it happens, and shows two ways to fix it plus a rule of thumb for when to use $fetch instead.
What people said
Recommends kissu · 2024-01 · Stack Overflow · on “Nuxt3 useAsyncData not working onMounted lifecycle hook”
@MaxFlex hm, it's maybe not exactly a lifecycle actually but still behaving not like people think it is. Check this video from Alex Lichter to see how to use it properly: [this video]
Recommends Alex Liu · 2025-06 · Stack Overflow · on “Auto refresh data is not working in pinia store”
Just a small suggestion. Would you like to try writing it like this? It might help. export const useRoomStore = defineStore('roomStore', () => { const body = ref<IRoomBody>(ROOM_BODY_DEFAULT) const { data, execute } = useFetch('/api/rooms', { key: 'rooms', method: 'post', body, immediate: false, onRequest ({ options }) { let bearer = 'Bearer ' const token = localStorage.getItem('access_token') if (!token) { console.log('token ERROR GO TO LOGIN', token) } else { bearer = bearer + token } const headers = new Headers(options.headers) headers.set('Content-Type', 'application/json') headers.set('Authorization', bearer) options.headers = headers }, }) const fetch = () => execute() return { body, d
Cites Анатолий Якимов · 2024-02 · Stack Overflow · on “Struggling to use $fetch instead of usefetch in Nuxt :”
<script setup lang="ts"> import { useApiFetch } from '~/file' const { data, error, execute } = useApiFetch( '/api/path', { immediate: false } ) const doFetch = async () => { await execute() } </script> see this: [this video]
Cites okainov · 2025-09 · Stack Overflow · on “How to reinitiate/resend a request with $fetch like Axios?”
While this sounds great and probably answers the question, please note it's wrong way of using `useFetch` as per Nuxt core team member video explaining exactly this [this video] Sounds like you should use `$fetch` when doing refresh.