Vue.js 如何在 vue 3 脚本设置中使用

我用实验script setup来创造一个学习环境.我有一个brew 的导航栏，打开了一个组件.

我在使用<component :is="" />方法时遇到困难.这种方法在component basics -> dynamic-components以下的文档中有描述

在Vue 3 Composition API中，它按预期工作:

<template>
  <NavigationBar
    @switchTab="changeTab"
    :activeTab="tab"
  />
  <component :is="tab" />
</template>

<script>
import { ref } from 'vue'
import NavigationBar from './components/NavigationBar.vue'
import TemplateSyntax from './components/TemplateSyntax.vue'
import DataPropsAndMethods from './components/DataPropsAndMethods.vue'

export default {
  components: {
    NavigationBar,
    TemplateSyntax,
    DataPropsAndMethods
  },
  setup () {
    const tab = ref('DataPropsAndMethods')
    function changeTab (newTab) {
      tab.value = newTab
    }

    return {
      changeTab,
      tab
    }
  }
}
</script>

My approach with the 100 fails:

<template>
  <NavigationBar
    @switchTab="changeTab"
    :activeTab="tab"
  />
  <component :is="tab" />
</template>

<script setup>
import NavigationBar from './components/NavigationBar.vue'
import TemplateSyntax from './components/TemplateSyntax.vue'
import DataPropsAndMethods from './components/DataPropsAndMethods.vue'
import { ref } from 'vue'

const tab = ref('DataPropsAndMethods')
function changeTab (newTab) {
  tab.value = newTab
}
</script>

你知道如何用脚本设置方法解决这个问题吗？