navigateTo in $fetch onResponseError is doesn't work

[nogolang]

Environment

Nuxt 3.12.3 with Nitro 2.9.7

Reproduction

see Describe

Describe the bug

this is offical example，But it didn't work
https://nuxt.com/docs/guide/recipes/custom-usefetch

this is plugins，to injecct nuxt

export default defineNuxtPlugin(() => {
    const router=useRouter()
    const api = $fetch.create({
        baseURL: 'http://127.0.0.1:4523/m1/4632367-4282747-default',
         async onResponseError({response}) {
            if (response.status === 401) {
                console.log("yes, is runing here,but navigateTo doesn't work")
                 await navigateTo('/login', {
                    redirectCode: 302,
                })
            }
        }
    })

    // Expose to useNuxtApp().$api
    return {
        provide: {
            api
        }
    }
})

The page does not change to login.vue when my http status is 401, navigateTo doesn't work
I'm pretty sure this is the official case

<script setup lang="ts">
let path="/user/1"
const { $api } = useNuxtApp()
const { data: modules } = await useAsyncData(path, () => $api(path))
</script>

Additional context

No response

Logs

No response

[Ayax0]

I once did something similar. as I understand it, the Nuxt plugins are not necessarily connected to the Nuxt instance. I solved the whole thing by calling the navigateTo function using callWithNuxt. That works for me.

export default defineNuxtPlugin(async (nuxtApp) => {
    await callWithNuxt(nuxtApp, () => navigateTo("/login"));
});

[danielroe]

We should update the example.