JSFiddle - React, Tailwind, and code Playground

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="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;
      this.obj.list.push(this.obj.nextId++);
      //console.log(obj);
      //this.$emit('update', obj);
    },
    remove: function(el) {
			//let obj = Object.assign({}, this.obj);
      //let obj = this.obj;
      this.obj.list = this.obj.list.filter((item) => {return item !== el});
      //console.log(obj);
      //this.$emit('update', obj);
    }
  }
})

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