Vue watch[fat arrow scope] providing wrong this context [duplicate]

Answer 1

This is only an additional answer to explain the misunderstanding of this in arrow functions.

How does this work in arrow functions?

this in lexical functions always refers to the surrounding scope. That can either be:

1. The nearest surrounding function
2. The nearest surrounding module
3. The global scope

If we have a look at your code, and we assume you're using ES6 modules (judging from the import/export statements):

import debounce from 'lodash/debounce';

export default {
    watch: {
        query: debounce(() => {
            this.autocomplete();
        }, 200, {
            leading: false,
            trailing: true
        }),
    }
};

Let's go through the list:

1. The nearest surrounding function

There is no surrounding function for your arrow function. An example would be:

var obj = {
    a: function() {
        return () => {
            console.log(this);
        }
    }
};

obj.a()(); // `this` refers to `obj`, because `this` refers to `obj` in the surrounding function `a`

2. The nearest surrounding module

Since we are in a (fake) module in this case, this is defined in the module scope as pseudo module object (probably a babel or webpack object?).

Object
    __esModule: true
    default: Object
    __proto: Object

It seems because Vue binds these properties, methods and events by default

That's true and it's a very useful feature of vue. But it doesn't help us in this case, because this cannot be overridden in an arrow function, it always refers to the surrounding scope.

Have a look at the following link for a deeper understanding of arrow functions: http://exploringjs.com/es6/ch_arrow-functions.html#_variables-that-are-lexical-in-arrow-functions

Answer 2

See https://vuejs.org/v2/guide/instance.html#Properties-and-Methods

Don’t use arrow functions on an instance property or callback (e.g. vm.$watch('a', newVal => this.myMethod())). As arrow functions are bound to the parent context, this will not be the Vue instance as you’d expect and this.myMethod will be undefined.

As the same limitation applies to watchers, you have to use something like this:

watch: {
    query: function() {
        return debounce(() => {
            this.autocomplete();
        },
        200,
        {
            leading: false,
            trailing: true
        });
   }
}