When using dynamic components, how do you manage the current component's state?

[yoshi-pi]

When using dynamic components with the Composition API, you specify the component directly in the ':is' attribute.

Do you manage the current component's state as a string?

<script setup>
import { ref } from 'vue'
import CompA from './components/CompA.vue'
import CompB from './components/CompB.vue'
import CompC from './components/CompC.vue'
const tabs = {
  CompA,
  CompB,
  CompC,
}
const currentComp = ref('CompA') // string
</script>
<template>
  <button @click="currentComp = 'CompA'">A</button>
  <button @click="currentComp = 'CompB'">B</button>
  <button @click="currentComp = 'CompC'">C</button>
  <component :is="tabs[currentComp]" />
</template>

Or do you use shallowRef to manage the components directly?

<script setup>
import { shallowRef } from 'vue'
import CompA from './components/CompA.vue'
import CompB from './components/CompB.vue'
import CompC from './components/CompC.vue'
const currentComp = shallowRef(CompA) // shallowRef
</script>
<template>
  <button @click="currentComp = CompA">A</button>
  <button @click="currentComp = CompB">B</button>
  <button @click="currentComp = CompC">C</button>
  <component :is="currentComp" />
</template>