How to Create Component on the fly?

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

1. Whats the good way to duplicate the component dynamically?
2. Since we are going to create components dynamically, how to create data values also dynamically?