I've been attempting to render a component using the is directive
<template>
<div>
<v-tabs v-model="currentTab" fixed-tabs>
<v-tab v-for="(item, i) in tabItems" :key="i">{{ item }} </v-tab>
</v-tabs>
<v-form ref="form" v-model="isValid" lazy-validation>
<v-tabs-items v-model="currentTab">
<v-tab-item v-for="(item, i) in tabItems" :key="i">
<component :is="'my-company-form-general'"></component>
<my-company-form-general />
</v-tab-item>
</v-tabs-items>
</v-form>
</div>
</template>
This line works
<my-company-form-general />however, this doesn't seem to work as expected
<component :is="'my-company-form-general'"></component>
I also tried by using the file name
<component :is="'MyCompantFormGeneral'"></component>
Why isn't it working?
I am using nuxt version 2.14.6
The component is named MyCompanyFormGeneral.vue and resides in the same folder
<template>
<div>
General Component
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
})
</script>
<style scoped>
</style>