Environment

Nuxt project info:

Reproduction

https://stackblitz.com/edit/github-pt2vwnd7?file=app%2Fapp.vue

Describe the bug

Hello,

Following setup causes the whole page to be duplicated whenever the template branch containing a <NuxtPage> changes:

1. You have a wrapper page that renders <NuxtPage> conditionally AND a <template> tag is used as the direct (conditional) parent of the <NuxtPage>

<script setup lang="ts">
  const toggleOn = ref(true);
</script>

<template>
  <div>
    <button @click="toggleOn = !toggleOn">TOGGLE PATH</button>

    <template v-if="toggleOn">
      <h4>Path A</h4>
      <NuxtPage />
    </template>
    <template v-else>
      <h4>Path B</h4>
      <NuxtPage />
    </template>
  </div>
</template>

2. The rendered page contains a component that uses a top-level await in its setup block

<!-- Page index.vue -->
<template>
  <div >
    <ComponentWithAwait />
  </div>
</template>

<!-- ComponentWithAwait.vue -->
<script setup lang="ts">
  const someValue = await Promise.resolve(1);
</script>

<template>
  <div>
    Component with await
  </div>
</template>

3. Page transitions are enabled in nuxt.config.ts

In this case whenever the <NuxtPage> branch changes, the whole page gets stuck in the DOM and a new instance of the same page is created under the stuck old page.

As a workaround a div instead of a template can be used to wrap the NuxtPages.

Additional context

There are a few issues that have similar reproductions but I think it is not 100% the same problem. In those cases the order of components was changed or the onMounted hook is called twice:
#28220
#32371

Logs