JSFiddle - React, Tailwind, and code Playground

by Dmitriy Belyaev

HTML

<script src="https://unpkg.com/vue"></script>
<script type="text/x-template" id="subcomponent-template">
  <div>
    <p><a @click="add">add</a></p>
    <ul>
      <li v-for="elem in obj.list" ><a @click="remove(elem)">{{elem}}</a></li>
    </ul>
  </div>
</script>

<div id="app">
  <subcomponent :obj.sync="obj"></subcomponent>
  {{obj}}
</div>

JavaScript

Vue.component('subcomponent', {
  template: '#subcomponent-template',
  props: ['obj'],
  methods: {
    add: function() {
      let obj = Object.assign({}, this.obj);
      //let obj = this.obj;
      obj.list.push(obj.nextId++);
      console.log(obj);
      this.$emit('update:obj', obj);
    },
    remove: function(el) {
      let obj = Object.assign({}, this.obj);
      //let obj = this.obj;
      obj.list = obj.list.filter((item) => {return item !== el});
      console.log(obj);
      this.$emit('update:obj', obj);
    }
  }
})

var app = new Vue({
  el: '#app',
  data: {
    obj: {
      list: [],
      nextId: 1
    }
  }
})