Dynamic component doesn't display anything in Vue3?

Question

I have a dynamic component in my project like that can be "Login" or "RegisterForm"

But it doesn't display anything.

<script setup lang="ts">

import { ref } from "vue";
import RegisterForm from '@/components/Layout/Navbar/Register.vue'
import Login from '@/components/Layout/Navbar/Login.vue'


let activeComponent = ref('Login')
</script>

<template>
<button @click="activeComponent='RegisterForm'">change to register</button>
  <component :is="activeComponent" />
</template>

How can I fix this?

Answer 1

I'm not sure if this is the exact best way to write that in Composition API but this works without any error/warning.

<script setup>
import { shallowRef } from "vue";

import CompA from "@/components/CompA.vue";
import CompB from "@/components/CompB.vue";

const activeComponent = shallowRef(CompA);
</script>

<template>
  <button @click="activeComponent = CompB">toggle to Component B</button>
  <component :is="activeComponent" />
</template>