如何动态创建组件？

Question

首先，这是我的结构

CHILD COMPONENT

// HTML
<v-select
 v-bind:items="selectItems"
 v-model="selectedItemModel"
 label="Category"
 item-value="text"
></v-select>
<v-text-field
 label="Enter Value"
 type="number"
 v-model="compValModel"
></v-text-field>

// REMOVE BUTTON for deleting this component in render.
<v-btn icon>
  <v-icon>cancel</v-icon>
</v-btn>

// JS
props: {
 selectItems: {
  type: Array,
  required: true
 },
 selectedItem: {
  type: String
 },
 compVal: {
  type: Number
 },
}
data () {
 return {
  selectedItemModel: this.selectedItem,
  compValModel: this.compVal
 }
},
watch: {
 selectedItemModel(value) {
   this.$emit('selectedItemInput', value);
 },
 compValModel(value) {
   this.$emit('compValInput', value);
 }
}

PARENT COMPONENT

// HTML
<component 
 :selecItems="selectItems" 
 :selectedItem="selectOneItem" 
 :compVal="compOneVal"
 @selectedItemInput="selectOneItem = $event"
 @compValInput="compOneVal = $event"
></component>

// ADD BUTTON for adding the above component more.
<v-btn icon>
  <v-icon>cancel</v-icon>
</v-btn>

我的案例

当我点击该加号按钮时，它应该创建新组件。当我点击该组件中的REMOVE按钮时，它应该删除该组件。

现在我已经关注this了。无论何时创建新组件，此方法的问题都存在。现有的动态创造价值的价值得到了重视。

我的问题

1. 什么是动态复制组件的好方法？
2. 由于我们要动态创建组件，如何动态创建数据值？