title: Unexpected behaviour removing a child component (row)
body: <p><strong>Description:</strong></p>
  <p>I have a table with some products, each row is a custom vue <code>&lt;row&gt;</code> component.</p>
  <p>Each  element has a closing (removing) button that triggers the custom &quot;remove&quot; event. The main app listens to this event and removes the children (by index)</p>
  <p>The row a part from some static text it contains an input with a number.</p>
  <p><strong>The problem:</strong></p>
  <p>The parent (Vue app) removes the row, but the value of the input is then moved (and replaces its previous value) to the input in the next row.</p>
  <p><strong>Expected behaviour:</strong></p>
  <p>I want to simply remove the item I do not care about the value of the text input once it's removed. It should not move its value to the next sibling.</p>
  <p>I attach an example.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let row = Vue.component('row', {
    name: 'row',
    props: ['number', 'name', 'sq'],
    data: () =&gt; ({
      quantity: 0
    }),
    template: '&lt;tr&gt;' +
      '&lt;td&gt;{{number}}&lt;/td&gt;' +
      '&lt;td&gt;{{name}}&lt;/td&gt;' +
      '&lt;td&gt;&lt;button v-on:click="quantity--"&gt;-&lt;/button&gt;&lt;input type="text" :value="quantity"&gt;&lt;button v-on:click="quantity++"&gt;+&lt;/button&gt;&lt;/td&gt;' +
      '&lt;td&gt;&lt;button v-on:click="remove"&gt;&amp;times;&lt;/button&gt;&lt;/td&gt;' +
      '&lt;/tr&gt;',
    methods: {
      remove: function() {
        this.$emit('remove', this.quantity)
      }
    },
    beforeMount() {
      this.quantity = this.sq
    }
  
  })
  
  
  new Vue({
    el: "#app",
    data: {
      out: [],
      rows: [{
          name: "Icecream",
          sq: 0
        },
        {
          name: "Sugar cube",
          sq: 50
        },
        {
          name: "Peanut butter",
          sq: 0
        },
        {
          name: "Heavy cream",
          sq: 0
        },
        {
          name: "Cramberry juice",
          sq: 0
        }
      ]
    },
    methods: {
      removeRow: function(index, quantity) {
        this.out.push(`Removing row ${index} (${this.rows[index].name} | ${quantity} units)`)
        this.rows.splice(index, 1)
      }
    },
    computed: {
      log: function() {
        return this.out.join("\r\n")
      }
    }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: #20262E;
    padding: 20px;
    font-family: Helvetica;
  }
  
  h2 {
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  #app {
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    transition: all 0.2s;
  }
  
  td {
    padding: 4px 5px;
  }
  
  input {
    width: 40px;
    text-align: center;
  }
  
  h4 {
    margin-top: 20px;
    margin-bottom: 5px;
  }
  
  #log {
    padding: 10px;
    background: #20262E;
    color: #fff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"&gt;&lt;/script&gt;
  &lt;div id="app"&gt;
    &lt;h2&gt;Cart:&lt;/h2&gt;
    &lt;table&gt;
      &lt;row v-for="(row, index) in rows" :number="index" :name="row.name" :sq="row.sq" v-on:remove="removeRow(index, $event)"&gt;&lt;/row&gt;
    &lt;/table&gt;
  
    &lt;h4&gt;Log&lt;/h4&gt;
    &lt;pre id="log" v-html="log"&gt;&lt;/pre&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>