Switch between component definitions with shallowRef
Use shallowRef() when storing a component definition in reactive state. Replacing the active component updates the view without turning the definition into a reactive proxy.
<script setup>
import { shallowRef } from 'vue'
import UserSettings from './UserSettings.vue'
import UserNotifications from './UserNotifications.vue'
const activeComponent = shallowRef(UserSettings)
</script>
<template>
<button @click="activeComponent = UserSettings">Settings</button>
<button @click="activeComponent = UserNotifications">Notifications</button>
<component :is="activeComponent" />
</template>
Switching unmounts the previous component. Wrap the dynamic component in KeepAlive if you need to preserve its local state.