JSFiddle - React, Tailwind, and code Playground

by Tony Georgiev

HTML

<script src="https://rawgit.com/yyx990803/vue/58d022899a4dc4598bd4b58b56c6d22d4564144e/dist/vue.min.js"></script>
<button id="addItemBtn">add item</button>
<button id="removeItemBtn">remove item</button>

<hr/>

<div id="vueHolder">
  <list>
    <list-item v-for="item in items" track-by="id">
      <div>{{item.id}}</div>
    </list-item>
  </list>
</div>

JavaScript

var VueListItem = Vue.extend({
  template: '<div class="list-item"><slot></slot></div>',
  attached: function() {
    console.log("attached");
  },
  detached: function() {
    console.log("detached");
  }
});
Vue.component('list-item', VueListItem);

var VueList = Vue.extend({
  template: '<div class="list"><slot></slot></div>'
});
Vue.component('list', VueList);


this.vueHolder = new Vue({
  el: "#vueHolder",
  data: {
    items: []
  }
});

var items = [
  {id: "0"},
  {id: "1"}
];

Vue.set(vueHolder.$data, 'items', items);

document.getElementById('addItemBtn').onclick = function() {
  items.push({id: items.length + ""});
  Vue.set(vueHolder.$data, 'items', items);
};
        
document.getElementById('removeItemBtn').onclick = function() {
  items.pop();
  Vue.set(vueHolder.$data, 'items', items);
};