title: Set object in data from a method in VUE.js
body: <p>I have been stuck with this issues for 2 hours now and I really can't seem to get it work.</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>const app = new Vue({
    el: '#book-search',
    data: {
      searchInput: 'a',
      books: {},
    },
    methods: {
      foo: function () {
        axios.get('https://www.googleapis.com/books/v1/volumes', {
          params: {
            q: this.searchInput
          }
        })
        .then(function (response) {
          var items = response.data.items
          for (i = 0; i &lt; items.length; i++) {
  
            var item = items[i].volumeInfo;
  
            Vue.set(this.books[i], 'title', item.title);   
  
          }
        })
        .catch(function (error) {
          console.log(error);
        });
  
      }
    }
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>When I initiate search and the API call I want the values to be passed to data so the final structure looks similar to the one below.</p>
  
  <pre><code>data: {
    searchInput: '',
    books: {
      "0": {
         title: "Book 1"
       },
      "1": {
         title: "Book 2"
       }
  },
  </code></pre>
  
  <p>Currently I get <code>Cannot read property '0' of undefined</code>.</p>