title: Vue delete child component
body: <p>I have this code:</p>
  
  <pre><code>Vue.component('parent', {
    template: `
      &lt;div&gt;
        &lt;child v-for='(child, index) in children' :key='index' :childNumber="index+1" v-on:removeChild="removeChild" /&gt;
      &lt;/div&gt;
    `,
    data: function() {
      return {
        children: [{}, {}, {}]
      }
    },
    methods: {
      removeChild: function(index) {
        this.children.splice(index, 1);
      }
    }
  });
  
  Vue.component('child', {
    template: `
      &lt;div&gt;
        &lt;input :value="'I am child number: '+childNumber"&gt;&lt;/input&gt;
        &lt;button v-on:click="removeChild"&gt;Remove child {{childNumber}}&lt;/button&gt;
      &lt;/div&gt;
    `,
    data: function() {
      return {}
    },
    methods: {
      removeChild: function() {
        this.$emit('removeChild', this.childNumber);
      }
    },
    props: ['childNumber']
  });
  
  const app = new Vue({
      el: '#app',
      data: {
          message: 'Hello Vue!',
      }
  });
  </code></pre>
  
  <p>At the moment when you click any of the "remove" buttons, it deletes the last child, regardless of which button you clicked. How can I change my code so that it deletes the child you think it will delete, without touching the other children? (ie. clicking "Remove child 2" will leave just child 1 and 3 on the screen)</p>
  
  <p>Fiddle: <a href="https://jsfiddle.net/wgr3sxqr/6/" rel="nofollow noreferrer">https://jsfiddle.net/wgr3sxqr/6/</a></p>