Vue watch[fat arrow scope] providing wrong this context

I am using lodash to debounce a function call but I am wondering why my this value is not inheriting the scope like I expect.

These are are the relevant parts of my Vue component.

import debounce from 'lodash/debounce';

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

The above case does not work because my this value does not point to the Vue component but rather shows an Object like this:

Object
    __esModule: true
    default: Object
    __proto: Object

Isn't my arrow syntax suppose to inherit the context of this?

The following seem to works fine:

query: debounce(function test() {
    this.autocomplete();
}, 200, {
    leading: false,
    trailing: true
})

There is probably an easy answer for this but I am hoping someone can help me out here.