In my previous Vue 2 project, I had implemented a custom routing solution which sometimes required passing components as props.
<template>
<div>
<component :is="component" :data="componentData"/>
</div>
</template>
<script>
export default {
props: {
component: {}
componentData: {}
}
}
</script>
When trying to do the same in Vue 3, a warning is generated stating: "Vue received a Component which was made reactive".
Is there a way to resolve this warning? Can we dynamically add components to another component in Vue 3?
If an array of components is not globally registered in App.components, can they still be rendered without warnings in Vue 3?
You can find a similar question regarding Vue 2 here: Is it possible to pass a component as props and use it in a child Component in Vue?
Please note that while the code worked well in Vue 2, this inquiry specifically pertains to Vue 3.