How can I specify default headers when using UseFetch in nuxt 3?

Question

With nuxt 2 you could use axios and easily define default headers. For example on login I could do:

axios.defaults.headers.common['Authorization'] = 'Token ' + token

and when logging out I could do:

axios.defaults.headers.common['Authorization'] = ''

Then when requests were made these headers would be used.

With nuxt 3, axios is deprecated and it is advised to use UseFetch.

How can I add default headers for authorization just as previously done with nuxt 2?/axios?

What I tried

Following this example I was able to make a custom myFetch.

First I made a file in plugins/api.js:

//plugins/api.js
export default defineNuxtPlugin(() => {
    const store = useUserStore()
    const $api = $fetch.create({
        baseURL: 'http://127.0.0.1:8000/',
        onRequest({ request, options, error }) {
            console.log('hello from the api plugin')
            if (store.user.access) {
                // Add Authorization header
                options.headers.Authorization = "Bearer " + store.user.access
            }
            else {
                options.headers.Authorization = ''
            }
        },
    })
    // Expose to useNuxtApp().$api
    return {
        provide: {
            api: $api
        }
    }
})

and I then made a composable in composables/useMyFetch.js:

//composables/useMyFetch.js
export const useMyFetch = (request, opts) => {
    return useFetch(request, {
        ...opts,
        $fetch: useNuxtApp().$api,
    })
}

Now I make my requests with UseMyFetch

I can make requests but it seems that the api.js is only loaded once at start-up. So if I register a token in my store during a login, the api.js does not register this token. Therefore during a next request where authorization is needed, the Bearer token is not included in the headers.

What might I be doing wrong?

Edit:

It seems I still had a OnRequest function in my component. After removing this it worked.