title: Using Axios and Vue to fetch api data - returning undefined
body: <p>Running into a snag with trying to integrate my API with Vue/Axios. Basically, Axios is getting the data (it DOES console.log what I want)... But when I try to get that data to my empty variable (in the data object of my component) to store it, it throws an "undefined at eval" error. Any ideas on why this isn't working for me? Thanks!</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="wallet-container"&gt;
      &lt;h1 class="title"&gt;{{ title }}&lt;/h1&gt;
      &lt;div class="row"&gt;
        {{ thoughtWallet }}
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  import axios from 'axios';
  export default {
  
    name: 'ThoughtWallet',
    data () {
      return {
        title: 'My ThoughtWallet',
        thoughtWallet: [],
      }
    },
    created: function() {
      this.loadThoughtWallet();
    },
    methods: {
      loadThoughtWallet: function() {
        this.thoughtWallet[0] = 'Loading...',
        axios.get('http://localhost:3000/api/thoughts').then(function(response) {
          console.log(response.data); // DISPLAYS THE DATA I WANT
          this.thoughtWallet = response.data; // THROWS TYPE ERROR: Cannot set property 'thoughtWallet' of undefined at eval
        }).catch(function(error) {
          console.log(error);
        });
      }
    }
  }
  
  &lt;/script&gt;
  </code></pre>