Rule proposal: no-arrow-functions-in-watch

[alert-debug]

Please describe what the rule should do:
According to the Vue docs, "you should not use an arrow function to define a watcher". The rule should detect when a component uses an arrow function inside the watch section. Code that doesn't follow this requirement leads to confusing errors about this not being defined.

What category should the rule belong to?

• Enforces code style
• Warns about a potential error
• Suggests an alternate way of doing something
• Other (please specify:)

Provide 2-3 code examples that this rule should warn about:

watch: {
    propShow: {
        handler: (val, oldVal) => {
            this.show = val;
        }
    }
}

(The above example is taken from an actual question asked on StackOverflow.)

watch: {
    dialog: (newState) => {
        this.$nextTick(() => {
            console.log('Tick')
        })
    }
}

[ota-meshi]

Thank you for suggesting the this rule.

I like this rule 👍

[nikkipelchat]

Hey, two questions about this rule:

1. Should this rule also apply to methods? The docs say you can't use an arrow function in them either. Maybe that would even be a new rule no-arrow-functions-in-methods.
2. The rule implemented doesn't do a deep search of the whole watcher functions. It checks if the immediate watchers are arrow functions but it won't check inside the watchers. Should it catch all arrow functions inside watchers? Examples below.

Things it will catch:

watch: {
    validation: () => { // will catch this
        this.something = 'hi'
    }
}

Things it won't catch at the moment:

watch: {
    propShow: {
        handler: (val, oldVal) => { // won't catch this
            this.show = val
        }
    }
}

watch: {
    validation() {
        this.$nextTick(() => { // won't catch this
            console.log('Tick')
        })
    }
}