Page navigation shows warning - Component is already mounted, please use $fetch instead

[Martins Zeltins]

Environment

------------------------------
- Operating System: Linux
- Node Version:     v20.11.0
- Nuxt Version:     3.11.2
- CLI Version:      3.11.1
- Nitro Version:    -
- Package Manager:  pnpm@8.1.0
- Builder:          -
- User Config:      devtools
- Runtime Modules:  -
- Build Modules:    -
------------------------------

Reproduction

https://stackblitz.com/github/martinszeltins/nuxt-fetch-warning-middleware?file=middleware%2Fsettings.ts

Describe the bug

I have 2 pages in my app - index and settings. When I navigate from the index page to the settings page it throws this warning in the console:

[nuxt] [useFetch] Component is already mounted, please use $fetch instead. See https://nuxt.com/docs/getting-started/data-fetching

The settings page has a middleware that loads the settings from the API using useFetch.

I understand that I should use $fetch upon user interaction and useFetch on initial page load. In this case, I think I am using useFetch for the initial page load from inside the middleware. I need to use useFetch for SSR.

But I don't think this warning should be showing, something seems wrong.

pages/settings.vue:

<template>
    <div>
        <h1>About</h1>

        <div>
            <NuxtLink to="/settings">Settings</NuxtLink> | 
            <NuxtLink to="/">Home</NuxtLink>
        </div>
    </div>
</template>


<script setup lang="ts">
    definePageMeta({ middleware: ['settings'] })
</script>

middleware/settings.ts:

export default defineNuxtRouteMiddleware(async () => {
    // Load settings
    const { data: settings } = await useFetch('/api/settings')

    console.log(settings.value)
})

Additional context

No response

Logs

No response