SOURCE

var i = 1; 
Vue.component('user', {
  props: ['user', 'users'],
  template: '<li @click="click">{{ user.text }}</li>',
  methods: {
     click: function() {
        this.users.splice(this.users.indexOf(this.user), 1)
     }
   }
})
 Vue.component('add', {
   props: ['users'],
   template: '<li @click="click">+</li>',
   methods: {
     click: function() {
       this.users.push({text: "用户" + i++})
     }
   }
})

Vue.component('level', {
   props: ['users', 'levels'],
   template: '<ol><user v-for="each in users" v-bind:user="each" v-bind:users="users"></user><add v-bind:users="users"></add></ol>',
   watch: {
     users: function() {
       var isLast = this.levels[this.levels.length - 1] == this.users
       if (isLast) {
         return
       }
       if (this.users.length == 0) {
         this.levels.splice(this.levels.indexOf(this.users), 1)
       }
     },
     levels: function() {
        this.levels[this.levels.length - 1].length != 0
        && this.levels.push([])
     }
   }
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    levels: [
      [ { text: '用户1' },  { text: '用户2' }],
      [ { text: '用户3' },  { text: '用户4' }],
    	[]
    ]
  }
})

<div id="app-7">
  <level v-for="users in levels" v-bind:users="users" v-bind:levels="levels">
  </level>
</div>