title: Vue - Cannot set property of undefined in promise
body: <p>So I have the following Vue file:</p>
  
  <pre><code>&lt;template&gt;
  
    &lt;li class="notifications new"&gt;
        &lt;a href="" data-toggle="dropdown"&gt; &lt;i class="fa fa-bell-o"&gt;&lt;/i&gt; &lt;sup&gt;
            &lt;span class="counter"&gt;0&lt;/span&gt;
            &lt;/sup&gt;
         &lt;/a&gt;
         &lt;div class="dropdown-menu notifications-dropdown-menu animated flipInX"&gt;
              &lt;ul v-for="notification in notifications" @click="" class="notifications-container"&gt;
                &lt;li&gt;
                  &lt;div class="img-col"&gt;
                    &lt;div class="img" style="background-image: url('assets/faces/3.jpg')"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
    &lt;/li&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
  
      data: function() {
          return {
            notifications: [],
            message: "",
          }
      },
  
      methods: {
  
          loadData: function() {
              Vue.http.get('/notifications').then(function(response) {
  
                  console.log(response.data);
                  //this.notifications = response.data;
                  //this.notifications.push(response.data);
  
                  this.message = "This is a message";
  
                  console.log(this.message);
              });
  
          },
      },
  
      mounted() {
          this.loadData();
      },
  
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>This is compiling just fine, however, when loading up the web page, I get the following error:</p>
  
  <blockquote>
    <blockquote>
      <p>app.js:1769 Uncaught (in promise) TypeError: Cannot set property 'message' of undefined</p>
    </blockquote>
  </blockquote>
  
  <p>I have tried to create another method as well, but had no joy. I literally cannot seem to work out why <code>this</code> wouldn't be accessible here. </p>