javascript - Why does vue fail to use component dynamic components?

Question

1. Why using component to dynamically add components failed?

<template>

<component @showHide="recieveAddData" :is="addModal"
 ></component>
 <button @click="switchComponent"></button>

</template>
import modal from './company/modal.vue'
export default {

name: 'addItem',
data () {
  addModal: 'modal'
},
methods: {
  switchComponent () {
   this.addModal = 'first'
},
components: {
  modal,
  first: {
     template: "<p>这里是子组件3</p>"  
  }
}

}

Why can the first component be added dynamically, but why can’t the introduced modal component work?

Answer 1

Isn’t modal the first component?
The modal cannot be loaded when mounted.
After clicking the button, the first component can be loaded instead?

One more thing.
The correct way to write data is to return an object

data() {
    return {}
}

Answer 2

import modal from './company/modal.vue';
export default {

name: 'addItem',
methods: {
  switchComponent () {
   this.addModal = 'first'
},
computed:{
    addmodal:modal 
},
components: {
  first: {
     template: "<p>这里是子组件3</p>"  
  }
}
}

Remove the modal in components and write the value of addModal as modal instead of 'modal';