title: How to add and remove item from array in components in Vue 2
body: <p>I made a component "my-item" which contains three elements: a dropdown (populated by "itemList") and two input boxes populated from the dropdown.
  This component is considered a row.</p>
  
  <p>I am trying to add and delete one row at a time but two things i am not sure about.
  (1) what to add to the rows array?
  (2) why is this.rows.splice(index,1) removing only the last row?</p>
  
  <p><a href="https://jsbin.com/mugunum/edit?html,output" rel="noreferrer">https://jsbin.com/mugunum/edit?html,output</a></p>
  
  <p>Thanks</p>
  
  <pre><code>&lt;div id="app"&gt;
      &lt;my-item v-for="(row, index) in rows"
           :itemdata="itemList"
            v-on:remove="removeRow(index)"&gt;
      &lt;/my-item&gt;
  &lt;div&gt;
      &lt;button @click="addRow"&gt; Add Row &lt;/button&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;template id="item-template"&gt;
  &lt;div&gt;
      &lt;select v-model="selected"&gt;
          &lt;option v-for="item in itemdata"  :value="item"&gt;
             {{ item.code }}
          &lt;/option&gt;
      &lt;/select&gt;
      &lt;input type="text" placeholder="Text" v-model="selected.description"&gt;
      &lt;input type="text" placeholder="value" v-model="selected.unitprice"&gt;
      &lt;button v-on:click= "remove"&gt; X &lt;/button&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  Vue.component('my-item', {
  props: ['itemdata'],
  template: '#item-template',
  data: function () {
      return {
      selected: this.itemdata[0]
      }
  },
  methods: {
      remove() {
          this.$emit('remove');
      }
  }
  }),
  
  new Vue({
  el: "#app",
  data: {
      rows: [],
      itemList: [
          { code: 'Select an Item', description: '', unitprice: ''},
          { code: 'One', description: 'Item A', unitprice: '10'},
          { code: 'Two', description: 'Item B', unitprice: '22'},
          { code: 'Three', description: 'Item C', unitprice: '56'}
      ]
  },
  
  methods: {
      addRow(){
         this.rows.push(''); // what to push unto the rows array?
      },
      removeRow(index){
         this.rows.splice(index,1); // why is this removing only the last row?
      }
  }
  })
  </code></pre>