title: Moving items between arrays in vue.js
body: <p>I have two arrays with custom components in each.</p>
  
  <p>List a is a search result. List b is a list of selected items.</p>
  
  <p>Each component has a template that renders the item in the array.</p>
  
  <p>So... the trouble I'm having is, once I have my list in list a, i want to click a link and have it add to list b. But when I try to add the item, I'm being told that <code>Cannot read property 'push' of undefined</code></p>
  
  <p>Here's my entire Vue. What am I doing wrong?</p>
  
  <pre><code>new Vue({
  
      el: '#search',
      data: {
          query: '',
          listA: '',
          listB: ''
      },
      methods: {
  
          search: function(event) {
  
              if (this.query != "") {
                  this.$http({url: '/list-a?search=' + this.query, method: 'GET'}).then(function(response) {
                      this.listA = response.data
                  });
              };
  
              event.preventDefault();
          }
  
      },
      components: {
          listaitem: {
              template: '#listaitem-template',
              props: ['lista-item'],
              methods: {
                  selected: function(listaitem) {
                      // When clicked, this will add this listaitem to listB
                      this.listB.push(listaitem);
                  }
              }
          },
  
          listbitem: {
              template: '#listbitem-template',
              props: ['listbitem']
  
          }  
      }
  });
  </code></pre>