Понимание ключевого слова this в Vue

Я начал изучать VueJS с нуля. Я следую их официальному руководству. Но я застрял здесь: https://vuejs.org/v2/guide/#Handling-User-Input

В этом примере...

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

... как получилось, что доступ к свойству message осуществляется напрямую без какой-либо ссылки на объект data? Если ключевое слово this относится к текущему экземпляру Vue, не следует ли обращаться к свойству message следующим образом: this.data.message?

Рассмотрим следующий пример:

({
  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();

Вот как я получил бы доступ к свойству в ванильном javascript. Может кто-нибудь, пожалуйста, помогите мне понять, что происходит за кулисами?