How to Create Component on the fly? - vue.js

Question

First of all here is my structure
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>
My Case
When i click on that plus button, it should create new component. and when i click on that REMOVE button from that component, it should delete that component.
Right now i have followed this. The problem in this approach is, whenever a new component is created. the value of the exsisting dynamically created values got refereshed.
My Question
Whats the good way to duplicate the component dynamically?
Since we are going to create components dynamically, how to create data values also dynamically?