In my Vue 3 project, I am attempting to dynamically load Vuetify components using the code below:
<template>
<v-chip>try</v-chip>
<component :is="object.tag">{{ object.content }}</component>
</template>
<script>
export default {
name: 'component1',
data: () => ({
object: {
tag: 'v-chip',
content: 'hey'
},
}),
}
</script>
When trying this approach, I encountered no errors. The v-chip component worked fine, but the second component did not initialize properly as a Vuetify component. Instead, I received the following output: https://i.sstatic.net/oP9fE.png I attempted using variations like VChip or vChip, but they also failed to work without any errors. Interestingly, when I used a non-Vuetify component that I had created myself, it loaded successfully.