JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.js"></script>
<div id="example">
<ul >
    <li v-for="(cJren">
        the child at <span>{{ index }}</span> is <span >{{ child }}</span>
        <input v-model = "person.children[index]">
        <button @click="addChild(index)">newChild</button>
        <button v-on:click="removeChild(index)">X</button>
    </li>
</ul>
<button v-on:click="getData">watch data</button>
<div>{{ $data | json }} </div>
</div>

JavaScript

var person = {
  name: '',
  children: ['Please enter a name']
};

var vm = new Vue({
  el: "#example",
  data: { person },
  methods: {
    addChild: function (index) {
      this.person.children.splice(index+1, 0, ""); //
    },
    removeChild: function (index) {
      this.person.children.splice(index , 1)
    },
    getData: function () {
      console.log(this.children);
    }
  }    
});