Nuxt3中Transition组件动画警告及布局渲染异常排查

遇到两条Vue警告：

已确认所有组件、页面和布局均有单个根元素，相关布局文件代码如下：

布局文件 #

default.vue #

<template>
  <div>
    <slot />
  </div>
</template>

main.vue #

<template>
  <div class="relative">
    <NavBarTop class="sticky top-0 z-40" />
    <!-- Content -->
    <div class="container mx-auto lg:mt-5">
      <div class="grid grid-cols-12 lg:px-8 p-3.5 mx-auto lg:gap-x-9">
        <!-- left column -->
        <div class="col-span-12 lg:block lg:col-span-3 place-items-start">
          <NavMain class="hidden lg:flex" />
          <slot name="left-column"></slot>
        </div>
        <!-- Center -->
        <div class="col-span-12 lg:col-span-6">
          <slot name="content"></slot>
        </div>
        <!-- right- -->
        <div class="order-first col-span-12 lg:col-span-3 lg:order-none">
          <slot name="right-column"></slot>
        </div>
      </div>
      <slot />
    </div>
  </div>
</template>

app.vue #

<template>
  <div class="font-inter">
    <ToastNotification />
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

应用在<NuxtLayout>前表现正常，<ToastNotification>已渲染到DOM中，但body标签内的其他内容缺失。项目的package.json配置如下：

package.json 配置 #

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
     ...
    "nuxt": "3.0.0-rc.9",
     ...
  },
  "dependencies": {
   ...

    "nuxt3": "^3.0.1-rc.0-27821553.ab125bd",
   ...

  }
}

内容的提问来源于stack exchange，提问作者Georg