Understanding the 'this' keyword in Vue

Question

I have started to learn VueJS from scratch. I am following their official Guide. But I am stuck here: https://v2.vuejs.org/v2/guide/#Handling-User-Input

In this example...

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

..how is it that the message property is directly being accessed without any reference to the data object? If this keyword refers to the current Vue instance, shouldn't the message property be accessed like this: this.data.message?

Consider the following example:

({
  name: "John Doe",
  data: {
    message: "Hello World"
  },
  greet: function(){
    console.log("I am " + this.name);
    console.log("I have a message for you: " + this.data.message); //see here
  }
}).greet();

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?

Answer 1

In Vue, Vue instance proxy properties of data and methods by using Proxy

Answer 2

Read this: Options / Data

From that we get "The data object for the Vue instance. Vue will recursively convert its properties into getter/setters to make it “reactive”." Meaning everything in the data object property is applied directly to the new Vue. This makes thos properties available on this as getters and setters.