title: How to use <component :is=""> in vue 3 script setup
body: <p>I am using the experimental <a href="https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md" rel="noreferrer">script setup</a> to create a learn enviroment. I got a selfmade navigation bar with open a single component.</p>
  <p>I am having trouble using the <code>&lt;component :is=&quot;&quot; /&gt;</code> method. This method is described in the docs under <a href="https://v3.vuejs.org/guide/component-basics.html#dynamic-components" rel="noreferrer">component basics -&gt; dynamic-components</a></p>
  <p>In the Vue 3 Composition API, it works as expected:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;NavigationBar
      @switchTab=&quot;changeTab&quot;
      :activeTab=&quot;tab&quot;
    /&gt;
    &lt;component :is=&quot;tab&quot; /&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  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
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  <hr />
  <p><strong>My approach with the <code>script setup</code> fails:</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;NavigationBar
      @switchTab=&quot;changeTab&quot;
      :activeTab=&quot;tab&quot;
    /&gt;
    &lt;component :is=&quot;tab&quot; /&gt;
  &lt;/template&gt;
  
  &lt;script setup&gt;
  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
  }
  &lt;/script&gt;
  </code></pre>
  <p>do you got any idea how to solve this with the script setup method?</p>