尝试在vue.js v2.6.11中对动态组件执行转换。我参考了文档-组件之间的转换，但无法获得结果。
我已经在codesandbox中创建了一个示例，并进行了不同的尝试和错误。但下面是基本的代码片段，应该足以实现转换。

模板

<template>
  <div id="app">
    <button @click="toggle = !toggle">Toggle</button>
    <transition class="component-fade" mode="out-in">
      <component :is="currentComp" val="msg" :key="currentComp" />
    </transition>
    <transition class="component-fade" mode="out-in">
      <div v-if="toggle">test</div>
      <p v-else>Sorry, no items found.</p>
    </transition>
  </div>
</template>

脚本

<script>
export default {
  name: "App",
  data() {
    return {
      toggle: true
    };
  },
  components: {
    home2: {
      template: `<h1>home2</h1>`,
    },
    "about-us2": {
      template: `<h1>about2</h1>`,
    },
  },
  computed: {
    currentComp() {
      return this.toggle ? "home2" : "about-us2";
    },
  },
};
</script>

风格

<style scoped>
.component-fade-enter-active,
.component-fade-leave-active {
  transition: all 6s ease;
}

.component-fade-enter,
.component-fade-leave-to {
  opacity: 0;
}
</style>

代码解释：点击切换按钮，组件将使用计算值切换，组件将使用:is或<component>进行更改。因此，当它更改时，我将尝试基本过渡（现在不透明度更改）。
如果我的代码中缺少了什么，请告诉我。