storing a component in a variable

[sanba-anass]

[mbokil]

You can't refer to the components using their template syntax (HTML) since you are not using JSX. Also since your isFoo variable is reactive you should use let instead otherwise if the value changes an error will be thrown. So instead you could use:

let Comp = isFoo.value ? Foo : Bar

<template>
    <Comp/>
</template>

[ubbcou]

You can use "Component" element

<script setup>
import { ref, computed } from 'vue'
import Foo from './Foo.vue'
import Bar from './Bar.vue'

const bl = ref(false)

const Comp = computed(() => bl.value ? Foo : Bar)
</script>

<template>
  <button @click="bl = !bl">Click To Toggle Component</button>
  <hr />
  <Component :is="Comp" />
</template>

Example: SFC