vue/no-arrow-functions-in-watch with deep.

[jens-morten-mikkelsen]

Tell us about your environment

• ESLint version: ^6.7.2
• eslint-plugin-vue version: ^7.0.0-0
• Node version: 10.18.0
• Operating System: Windows 10
• vue 3 CLI default environment

Please show your full configuration:

env: {
        browser: true,
        es6: true,
        node: true
    },
    extends: [
        'eslint:recommended',
        '@vue/typescript',
        'plugin:vue/vue3-recommended'
    ],
    plugins: [
        '@typescript-eslint'
    ],
    globals: {
        Atomics: 'readonly',
        SharedArrayBuffer: 'readonly'
    },
    parserOptions: {
        ecmaVersion: 2018,
        parser: '@typescript-eslint/parser',
        sourceType: 'module'
    },
    rules: {
        indent: ['error', 4],
        quotes: ['error', 'single'],
        semi: ['error', 'always'],
        'block-spacing': ['error'],
        'brace-style': ['error'],
        'comma-dangle': ['error'],
        'comma-spacing': ['error'],
        'comma-style': ['error'],
        'computed-property-spacing': ['error'],
        'func-call-spacing': ['error'],

        'eqeqeq': ['error', 'smart'],
        'lines-between-class-members': ['error', 'always', { exceptAfterSingleLine: true }],

        'space-infix-ops': ['error'],
        'no-multiple-empty-lines': ['warn', {
            max: 1,
            maxEOF: 1,
            maxBOF: 0
        }],

        'vue/no-arrow-functions-in-watch': ['error']
    }

What did you do?

<template>
    <div class="hello">
        <h1>
            {{ msg }}
        </h1>
        <p>
            For a guide and recipes on how to configure / customize this project,<br />
            check out the
            <a href="https://cli.vuejs.org"
               rel="noopener"
               target="_blank">
                vue-cli documentation
            </a>
            .
        </p>
        <h3>
            Installed CLI Plugins
        </h3>
        <ul>
            <li>
                <a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
                   rel="noopener"
                   target="_blank">
                    babel
                </a>
            </li>
            <li>
                <a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
                   rel="noopener"
                   target="_blank">
                    eslint
                </a>
            </li>
        </ul>
        <h3>
            Essential Links
        </h3>
        <ul>
            <li>
                <a href="https://vuejs.org"
                   rel="noopener"
                   target="_blank">
                    Core Docs
                </a>
            </li>
            <li>
                <a href="https://forum.vuejs.org"
                   rel="noopener"
                   target="_blank">
                    Forum
                </a>
            </li>
            <li v-for="a in arr"
                :key="a">
                <p v-for="b in arrProp"
                   :key="b">
                    a
                </p>
                <a v-for="aasdf in arr"
                   :key="aasdf"
                   href="https://chat.vuejs.org"
                   rel="noopener"
                   target="_blank">
                    Community Chat
                </a>
            </li>
            <li>
                <a href="https://twitter.com/vuejs"
                   rel="noopener"
                   target="_blank">
                    Twitter
                </a>
            </li>
            <li>
                <a href="https://news.vuejs.org"
                   rel="noopener"
                   target="_blank">
                    News
                </a>
            </li>
        </ul>
        <h3>
            Ecosystem
        </h3>
        <ul>
            <li>
                <a href="https://router.vuejs.org"
                   rel="noopener"
                   target="_blank">
                    vue-router
                </a>
            </li>
            <li>
                <a v-if="asdf"
                   href="https://vuex.vuejs.org"
                   rel="noopener"
                   target="_blank">
                    vuex
                </a>
            </li>
            <li>
                <a href="https://github.com/vuejs/vue-devtools#vue-devtools"
                   rel="noopener"
                   target="_blank"
                   @click="bar">
                    vue-devtools
                </a>
            </li>
            <li>
                <a href="https://vue-loader.vuejs.org"
                   rel="noopener"
                   target="_blank">
                    vue-loader
                </a>
            </li>
            <li>
                <a :class="{
                       'lil': asdf,
                       'lul': !asdf
                   }"
                   href="https://github.com/vuejs/awesome-vue"
                   rel="noopener"
                   target="_blank">
                    awesom
                    vue
                </a>
            </li>
        </ul>
        <div>
            asdf
            asdf
        </div>
    </div>
</template>

<script>
export default {
    name: 'HelloWorld',
    props: {
        msgProp: {
            default: '',
            type: String
        },
        arrProp: {
            default: () => [],
            type: Array
        }
    },
    data() {
        return {
            arr: [
                '1',
                '2'
            ]
        };
    },
    computed: {
        revMsg: function() {
            return this.arr.slice(0).reverse();
        },
        asdf: function () {
            if (this.msg === 'asdf') {
                this.bar();
            } else {
                this.baz();
            }

            if (this.msg === 'asdf') {
                this.bar();
            } else {
                this.baz();
            }

            if (this.msg === 'asdf') {
                this.bar();
            } else {
                this.baz();
            }
            if (this.msg === 'asdf') {
                return false;
            }
            return false;
        }
    },

    watch: {
        arr: {
            deep: true,
            handler: (oldVal, newVal) => { /* **(mark 1)** */
                this.bar();
            }
        },
        revMsg: {
            deep: true,
            handler: function (oldVal, newVal) {
                this.bar();
            }
        },
        asdf: (oldVal, newVal) => { /* **(mark 2)** */
            this.bar();
        }
    },

    bar: function () {
        let a = 1;
        a = a + 4;
        console.log('bar');
    },

    baz: function () {
        console.log('baz');
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    h3 {
      margin: 40px 0 0;
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      display: inline-block;
      margin: 0 10px;
    }
    a {
      color: #42b983;
    }
</style>

What did you expect to happen?
I expected that the linter would have given me errors on (mark 1) and (mark 2)

What actually happened?
145:22 warning Missing return type on function @typescript-eslint/explicit-module-boundary-types
149:5 warning Missing return type on function @typescript-eslint/explicit-module-boundary-types
158:17 warning Missing return type on function @typescript-eslint/explicit-module-boundary-types
161:15 warning Missing return type on function @typescript-eslint/explicit-module-boundary-types
189:22 warning Missing return type on function @typescript-eslint/explicit-module-boundary-types
189:23 warning 'oldVal' is defined but never used @typescript-eslint/no-unused-vars
189:23 warning Argument 'oldVal' should be typed @typescript-eslint/explicit-module-boundary-types
189:31 warning Argument 'newVal' should be typed @typescript-eslint/explicit-module-boundary-types
189:31 warning 'newVal' is defined but never used @typescript-eslint/no-unused-vars
195:22 warning Missing return type on function @typescript-eslint/explicit-module-boundary-types
195:32 warning Argument 'oldVal' should be typed @typescript-eslint/explicit-module-boundary-types
195:32 warning 'oldVal' is defined but never used @typescript-eslint/no-unused-vars
195:40 warning 'newVal' is defined but never used @typescript-eslint/no-unused-vars
195:40 warning Argument 'newVal' should be typed @typescript-eslint/explicit-module-boundary-types
199:9 error You should not use an arrow function to define a watcher vue/no-arrow-functions-in-watch
199:15 warning Missing return type on function @typescript-eslint/explicit-module-boundary-types
199:16 warning Argument 'oldVal' should be typed @typescript-eslint/explicit-module-boundary-types
199:16 warning 'oldVal' is defined but never used @typescript-eslint/no-unused-vars
199:24 warning 'newVal' is defined but never used @typescript-eslint/no-unused-vars
199:24 warning Argument 'newVal' should be typed @typescript-eslint/explicit-module-boundary-types
204:10 warning Missing return type on function @typescript-eslint/explicit-module-boundary-types
205:13 warning 'a' is assigned a value but never used @typescript-eslint/no-unused-vars
210:10 warning Missing return type on function @typescript-eslint/explicit-module-boundary-types

Repository to reproduce this issue
I'll try and put out a repo in the next counple of days

[ota-meshi]

Thank you for this issue!

The current no-arrow-functions-in-watch rule doesn't seem to check the handler. We need to change the no-arrow-functions-in-watch rule.