title: Understanding the 'this' keyword in Vue
body: <p>I have started to learn VueJS from scratch. I am following their official Guide. But I am stuck here: <a href="https://v2.vuejs.org/v2/guide/#Handling-User-Input" rel="nofollow noreferrer">https://v2.vuejs.org/v2/guide/#Handling-User-Input</a></p>
  <p>In this example...</p>
  <pre><code>var app5 = new Vue({
    el: '#app-5',
    data: {
      message: 'Hello Vue.js!'
    },
    methods: {
      reverseMessage: function () {
        this.message = this.message.split('').reverse().join('')
      }
    }
  })
  </code></pre>
  <p>..how is it that the <code>message</code> property is directly being accessed without any reference to the <code>data</code> object? If <code>this</code> keyword refers to the current Vue instance, shouldn't the <code>message</code> property be accessed like this: <code>this.data.message</code>?</p>
  <p>Consider the following example:</p>
  <pre><code>({
    name: &quot;John Doe&quot;,
    data: {
      message: &quot;Hello World&quot;
    },
    greet: function(){
      console.log(&quot;I am &quot; + this.name);
      console.log(&quot;I have a message for you: &quot; + this.data.message); //see here
    }
  }).greet();
  </code></pre>
  <p>This is how I would have accessed a property in vanilla javascript. Can someone please make me understand what's going on behind the scenes?</p>