Vue js proper way to clone an element and append to dom

var demo = new Vue({
  el: '#demo',
  data: {
    counter: 0,
    inputs: [{
      id: 'fruit0',
      label: 'Enter Fruit Name',
      value: '',
    }],
  },
  methods: {
    addInput() {
      this.inputs.push({
        id: `fruit${++this.counter}`,
        label: 'Enter Fruit Name',
        value: '',
      });
    }
  }
});

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<div id="demo">
  <div class="inputArea" v-for="input in inputs" :key="input.id">
    <label :for="input.id">{{input.label}}</label>
    <input :id="input.id" v-model="input.value"></input>
  </div>
  <button @click="addInput">Add input</button>
</div>

Modify that code as per your requirement.