How does 'this' keyword work in a Vue component?

Question

why can the keyword 'this' access tasks which are not in the same object ?

 anyobject = {
  template: '#task-list',
  props: {
    tasks: {default: []}
  },
  data() {
    return {
      newTask: ''
    };
  },
  computed: {
    incomplete() {
      return this.tasks.length; // I DONT UNDERSTAND HOW THIS WORKS HERE 
    }
  },

Answer 1

We know that every Vue application starts by creating a new Vue instance and unless specified, all declared objects encompass the same instance.

Within it, it adds all the properties from the data object to Vue’s reactivity system as suggested in the docs. When these property values change, the view “reacts”, updating to match the new values.

In this case, so does the compute property. Here the declared computed property we have, is incomplete(). The function provided will be used as the getter function for the property vueinstance.incomplete

this has access to the external object properties because Vue has Proxy that makes this.$data.property accesible as this.property

This, sort of, is one of those things Vue does that makes life easy, once you get used to it.