JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/0.10.5/vue.min.js"></script>
      <section id="content">
          <h1>{{title}}</h1>
          <ul>
            <li v-repeat="items">
              <p>{{name}}</p>
              <p v-text="value"></p>
              <input type="text" v-model="name">
              <button v-on="click: value=9999">change value</button>
              <button v-on="click: removeItem($index, $value, $event)">removeItem</button>
              <button v-on="click: addChildren($index)">addChildren</button>
              <div v-repeat="children">
                <p>{{$value}}</p>
              </div>
            </li>
          </ul>
          <form v-on="submit: addItem($event)">
            <input type="text" name="name">
            <input type="text" name="value">
            <input type="submit" value="addItem">
          </form>
        </section>

JavaScript

var content = new Vue({
    el: '#content',
    title: 'vue',
    data: {
      items: [
        { name: 'item1', value: '100' },
        { name: 'item2', value: '200' },
        { name: 'item3', value: '300' }
      ]
    },
    
    ready: function() {
      this.$watch('items', function(newValue) {
        console.log(newValue);
      });
    },
    
    methods: {
      addItem: function(e) {
        e.preventDefault();
        var form = e.target;
        var item = {
          name: form.name.value,
          value: form.value.value
        };
        this.$data.items.push(item);
      },
      
      removeItem: function(index, value, event) {
        console.log(value);
        this.$data.items.splice(index, 1);
      },
      
      addChildren: function(index) {
        this.$data.items[index].children = [
          'aaa', 'bbb', 'ccc'
        ];
      }
    }
  });