Understanding The 'this' Keyword In Vue

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

Solution 1:

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.

Solution 2:

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

Solution 3:

this is special object. When compiled, (yes, it is compiled!) the data keyword would disappear. All the properties and methods will wrap to a new object, so this can now conform to the JS rules.