SOURCE

Vue.component('test-row', {
  template: '<span>'+
  '<span>请输入 {{name}} 的个数：</span>' + 
  '<input v-model="nums" />' + 
  '</span>',
  props: {
    name: String
  },
  data() {
    return {
      nums: []
    }
  },
  watch: {
    name(newVal, oldVal) {
      console.log('watch', newVal, oldVal)
    }
  },
  mounted() {
    console.log('mounted', this.name);
  },
  updated() {
    console.log('updated', this.name);
  }
})
var Main = {
  data() {
    return {
      list: [
        'cat',
        'dog'
      ]
    }
  },
  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");