Currently, I am working on a component that receives another component via props to render. However, this component has the ability to update and change itself. The issue arises when the first time it is changed, the component functions correctly but crashes the Vue instance, preventing the second component from functioning independently.
I have included a link to the Playground where you can view my code:
Playground Link
Main Component
<script setup>
import { ref,shallowRef } from 'vue'
import Component1 from './Component1.vue';
const msg = ref('Hello World!')
const renderComponent = shallowRef(Component1)
const updateComponent = (component)=>{
renderComponent.value=component
}
</script>
<template>
<component :is="renderComponent" @updateComponent="updateComponent"></component>
</template>
Component 1
<script setup>
import Component2 from './Component2.vue';
const emit=defineEmits(["updateComponent"])
</script>
<template>
<div>
Hello, I'm component 1
</div>
<button @click="emit('updateComponent',Component2)">
click here to change component</button>
</template>
Component 2
<script setup>
import Component1 from './Component1.vue';
const emit=defineEmits(["updateComponent"])
</script>
<template>
<div>
Hello, I'm component 2
</div>
<button @click="emit('updateComponent',Component1)">
click here to change component</button>
</template>
I have made attempts using "ref", "shallowRef", "markRaw", as well as importing all components into the main file, but none of these solutions worked successfully.