useFetch, useAsyncData Network calls duplication is broken

[Nisekoi5]

Environment

• Operating System: Linux
• Node Version: v18.18.0
• Nuxt Version: 3.11.2
• CLI Version: 3.11.1
• Nitro Version: 2.9.6
• Package Manager: npm@10.2.3
• Builder: -
• User Config: devtools, ssr, build, modules, vite
• Runtime Modules: ()
• Build Modules: -

Reproduction

https://stackblitz.com/edit/github-vzhr2r?file=app.vue

Describe the bug

When using useAsyncData or useFetch inside the component in vMain of vuetify.
Open the console. can see that the call was run once on the server and client at the same time.

  <vApp>
    <vMain>
      <Test></Test>
    </vMain>
  </vApp>

No longer calls 2 times after removing the component from vMain

  <vApp>
     <Test></Test>
    <vMain>
    </vMain>
  </vApp>

Additional context

Should this issue be fixed by vuetify or nuxt? But if nuxt can fix it, it can also prevent similar situations in other UI library pages.

Logs

No response

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• github-vzhr2r (Open reproduction)

[manniL]

Let's track in #25853