SOURCE

Vue.component('test-row', {
  props: {
    name: String
  },
  template: '<span>名字是：{{name}}</span>',
  mounted() {
    console.log('mounted', this.name);
  },
  updated() {
    console.log('updated', this.name);
  }
})
var Main = {
  data() {
    return {
      list: [
        'cat',
        'dog',
        'pig',
        'bird',
        'horse',
        'rat'
      ]
    }
  },
  methods: {
    handleRemove(i) {
      this.list.splice(i, 1);
    }
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@1.4.5/lib/index.js"></script>
<div id="app">
<template>
  <ul>
    <li v-for="(item, index) in list" :key="index">
      <test-row :name="item"></test-row>
      <span style="color: red;cursor: pointer" @click="handleRemove(index)">X</span>
    </li>
  </ul>
</template>
</div>

@import url("//unpkg.com/element-ui@1.4.5/lib/theme-default/index.css");