From c240877d1033922553a1e0bbdea604d20357d593 Mon Sep 17 00:00:00 2001
From: Flo Edelmann <florian-edelmann@online.de>
Date: Wed, 30 Dec 2020 14:06:49 +0100
Subject: [PATCH 01/17] Add rule docs

---
 docs/rules/next-tick-style.md | 99 +++++++++++++++++++++++++++++++++++
 1 file changed, 99 insertions(+)
 create mode 100644 docs/rules/next-tick-style.md

diff --git a/docs/rules/next-tick-style.md b/docs/rules/next-tick-style.md
new file mode 100644
index 000000000..efe8528a2
--- /dev/null
+++ b/docs/rules/next-tick-style.md
@@ -0,0 +1,99 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/next-tick-style
+description: enforce `v-for` directive's delimiter style
+since: v7.5.0
+---
+# vue/next-tick-style
+
+> enforce `Vue.nextTick` / `this.$nextTick` style
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule enforces whether the callback version or Promise version (which was introduced in Vue v2.1.0) should be used in `Vue.nextTick` and `this.$nextTick`.
+
+<eslint-code-block fix :rules="{'vue/next-tick-style': ['error']}">
+
+```vue
+<script>
+import { nextTick } from 'vue';
+
+export default {
+  async mounted() {
+    /* ✓ GOOD */
+    nextTick().then(() => callback());
+    await nextTick(); callback();
+    this.$nextTick().then(() => callback());
+    await this.$nextTick(); callback();
+
+    /* ✗ BAD */
+    nextTick(() => callback());
+    nextTick(callback);
+    this.$nextTick(() => callback());
+    this.$nextTick(callback);
+  }
+}
+</script>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+Default is set to `promise`.
+
+```json
+{
+  "vue/next-tick-style": ["error", "promise" | "callback"]
+}
+```
+
+- `"promise"` (default) ... requires using the promise version.
+- `"callback"` ... requires using the callback version. Use this if you use a Vue version below v2.1.0.
+
+### `"callback"`
+
+<eslint-code-block :rules="{'vue/next-tick-style': ['error', 'callback']}">
+
+```vue
+<script>
+import { nextTick } from 'vue';
+
+export default {
+  async mounted() {
+    /* ✓ GOOD */
+    nextTick(() => callback());
+    nextTick(callback);
+    this.$nextTick(() => callback());
+    this.$nextTick(callback);
+
+    /* ✗ BAD */
+    nextTick().then(() => callback());
+    await nextTick(); callback();
+    this.$nextTick().then(() => callback());
+    await this.$nextTick(); callback();
+  }
+}
+</script>
+```
+
+</eslint-code-block>
+
+## :books: Further Reading
+
+- [`Vue.nextTick` API in Vue 2](https://vuejs.org/v2/api/#Vue-nextTick)
+- [`vm.$nextTick` API in Vue 2](https://vuejs.org/v2/api/#vm-nextTick)
+- [Global API Treeshaking](https://v3.vuejs.org/guide/migration/global-api-treeshaking.html)
+- [Global `nextTick` API in Vue 3](https://v3.vuejs.org/api/global-api.html#nexttick)
+- [Instance `$nextTick` API in Vue 3](https://v3.vuejs.org/api/instance-methods.html#nexttick)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.5.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/next-tick-style.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/next-tick-style.js)

From af38d7ece52434919eff7f1cf688875c20c7c2df Mon Sep 17 00:00:00 2001
From: Flo Edelmann <florian-edelmann@online.de>
Date: Wed, 30 Dec 2020 14:06:29 +0100
Subject: [PATCH 02/17] Add rule tests

---
 tests/lib/rules/next-tick-style.js | 281 +++++++++++++++++++++++++++++
 1 file changed, 281 insertions(+)
 create mode 100644 tests/lib/rules/next-tick-style.js

diff --git a/tests/lib/rules/next-tick-style.js b/tests/lib/rules/next-tick-style.js
new file mode 100644
index 000000000..3fed63c45
--- /dev/null
+++ b/tests/lib/rules/next-tick-style.js
@@ -0,0 +1,281 @@
+/**
+ * @fileoverview enforce `Vue.nextTick` / `this.$nextTick` style
+ * @author Flo Edelmann
+ * @copyright 2020 Flo Edelmann. All rights reserved.
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const RuleTester = require('eslint').RuleTester
+const rule = require('../../../lib/rules/next-tick-style')
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+const tester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: {
+    ecmaVersion: 2017,
+    sourceType: 'module'
+  }
+})
+
+tester.run('next-tick-style', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: ''
+    },
+    {
+      filename: 'test.vue',
+      code: `<script>import { nextTick as nt } from 'vue';
+      export default {
+        async mounted() {
+          this.$nextTick().then(() => callback());
+          Vue.nextTick().then(() => callback());
+          nt().then(() => callback());
+
+          await this.$nextTick(); callback();
+          await Vue.nextTick(); callback();
+          await nt(); callback();
+        }
+      }</script>`
+    },
+    {
+      filename: 'test.vue',
+      options: ['promise'],
+      code: `<script>import { nextTick as nt } from 'vue';
+      export default {
+        async mounted() {
+          this.$nextTick().then(() => callback());
+          Vue.nextTick().then(() => callback());
+          nt().then(() => callback());
+
+          await this.$nextTick(); callback();
+          await Vue.nextTick(); callback();
+          await nt(); callback();
+        }
+      }</script>`
+    },
+    {
+      filename: 'test.vue',
+      options: ['callback'],
+      code: `<script>import { nextTick as nt } from 'vue';
+      export default {
+        mounted() {
+          this.$nextTick(() => callback());
+          Vue.nextTick(() => callback());
+          nt(() => callback());
+
+          this.$nextTick(callback);
+          Vue.nextTick(callback);
+          nt(callback);
+        }
+      }</script>`
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `<script>import { nextTick as nt } from 'vue';
+      export default {
+        mounted() {
+          this.$nextTick(() => callback());
+          Vue.nextTick(() => callback());
+          nt(() => callback());
+
+          this.$nextTick(callback);
+          Vue.nextTick(callback);
+          nt(callback);
+        }
+      }</script>`,
+      output: `<script>import { nextTick as nt } from 'vue';
+      export default {
+        mounted() {
+          this.$nextTick().then(() => callback());
+          Vue.nextTick().then(() => callback());
+          nt().then(() => callback());
+
+          this.$nextTick().then(callback);
+          Vue.nextTick().then(callback);
+          nt().then(callback);
+        }
+      }</script>`,
+      errors: [
+        {
+          message:
+            'Use the Promise returned by `nextTick` instead of passing a callback function.',
+          line: 4,
+          column: 16
+        },
+        {
+          message:
+            'Use the Promise returned by `nextTick` instead of passing a callback function.',
+          line: 5,
+          column: 15
+        },
+        {
+          message:
+            'Use the Promise returned by `nextTick` instead of passing a callback function.',
+          line: 6,
+          column: 11
+        },
+        {
+          message:
+            'Use the Promise returned by `nextTick` instead of passing a callback function.',
+          line: 8,
+          column: 16
+        },
+        {
+          message:
+            'Use the Promise returned by `nextTick` instead of passing a callback function.',
+          line: 9,
+          column: 15
+        },
+        {
+          message:
+            'Use the Promise returned by `nextTick` instead of passing a callback function.',
+          line: 10,
+          column: 11
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      options: ['promise'],
+      code: `<script>import { nextTick as nt } from 'vue';
+      export default {
+        mounted() {
+          this.$nextTick(() => callback());
+          Vue.nextTick(() => callback());
+          nt(() => callback());
+
+          this.$nextTick(callback);
+          Vue.nextTick(callback);
+          nt(callback);
+        }
+      }</script>`,
+      output: `<script>import { nextTick as nt } from 'vue';
+      export default {
+        mounted() {
+          this.$nextTick().then(() => callback());
+          Vue.nextTick().then(() => callback());
+          nt().then(() => callback());
+
+          this.$nextTick().then(callback);
+          Vue.nextTick().then(callback);
+          nt().then(callback);
+        }
+      }</script>`,
+      errors: [
+        {
+          message:
+            'Use the Promise returned by `nextTick` instead of passing a callback function.',
+          line: 4,
+          column: 16
+        },
+        {
+          message:
+            'Use the Promise returned by `nextTick` instead of passing a callback function.',
+          line: 5,
+          column: 15
+        },
+        {
+          message:
+            'Use the Promise returned by `nextTick` instead of passing a callback function.',
+          line: 6,
+          column: 11
+        },
+        {
+          message:
+            'Use the Promise returned by `nextTick` instead of passing a callback function.',
+          line: 8,
+          column: 16
+        },
+        {
+          message:
+            'Use the Promise returned by `nextTick` instead of passing a callback function.',
+          line: 9,
+          column: 15
+        },
+        {
+          message:
+            'Use the Promise returned by `nextTick` instead of passing a callback function.',
+          line: 10,
+          column: 11
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      options: ['callback'],
+      code: `<script>import { nextTick as nt } from 'vue';
+      export default {
+        async mounted() {
+          this.$nextTick().then(() => callback());
+          Vue.nextTick().then(() => callback());
+          nt().then(() => callback());
+
+          await this.$nextTick(); callback();
+          await Vue.nextTick(); callback();
+          await nt(); callback();
+        }
+      }</script>`,
+      output: `<script>import { nextTick as nt } from 'vue';
+      export default {
+        async mounted() {
+          this.$nextTick().then(() => callback());
+          Vue.nextTick().then(() => callback());
+          nt().then(() => callback());
+
+          await this.$nextTick(); callback();
+          await Vue.nextTick(); callback();
+          await nt(); callback();
+        }
+      }</script>`,
+      errors: [
+        {
+          message:
+            'Pass a callback function to `nextTick` instead of using the returned Promise.',
+          line: 4,
+          column: 16
+        },
+        {
+          message:
+            'Pass a callback function to `nextTick` instead of using the returned Promise.',
+          line: 5,
+          column: 15
+        },
+        {
+          message:
+            'Pass a callback function to `nextTick` instead of using the returned Promise.',
+          line: 6,
+          column: 11
+        },
+        {
+          message:
+            'Pass a callback function to `nextTick` instead of using the returned Promise.',
+          line: 8,
+          column: 22
+        },
+        {
+          message:
+            'Pass a callback function to `nextTick` instead of using the returned Promise.',
+          line: 9,
+          column: 21
+        },
+        {
+          message:
+            'Pass a callback function to `nextTick` instead of using the returned Promise.',
+          line: 10,
+          column: 17
+        }
+      ]
+    }
+  ]
+})

From 3bbb7f07848517bebb640dc80eb8e1832ed56159 Mon Sep 17 00:00:00 2001
From: Flo Edelmann <florian-edelmann@online.de>
Date: Wed, 30 Dec 2020 14:58:13 +0100
Subject: [PATCH 03/17] Initial implementation: detect nextTick calls

---
 lib/rules/next-tick-style.js | 105 +++++++++++++++++++++++++++++++++++
 1 file changed, 105 insertions(+)
 create mode 100644 lib/rules/next-tick-style.js

diff --git a/lib/rules/next-tick-style.js b/lib/rules/next-tick-style.js
new file mode 100644
index 000000000..e8ecf07eb
--- /dev/null
+++ b/lib/rules/next-tick-style.js
@@ -0,0 +1,105 @@
+/**
+ * @fileoverview enforce `Vue.nextTick` / `this.$nextTick` style
+ * @author Flo Edelmann
+ * @copyright 2020 Flo Edelmann. All rights reserved.
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const utils = require('../utils')
+const { findVariable } = require('eslint-utils/index.js')
+
+// ------------------------------------------------------------------------------
+// Helpers
+// ------------------------------------------------------------------------------
+
+/**
+ * @param {Identifier} identifier
+ * @param {RuleContext} context
+ * @returns {CallExpression|undefined}
+ */
+function getVueNextTickCallExpression(identifier, context) {
+  // Instance API: this.$nextTick()
+  if (
+    identifier.name === '$nextTick' &&
+    identifier.parent.type === 'MemberExpression' &&
+    utils.isThis(identifier.parent.object, context) &&
+    identifier.parent.parent.type === 'CallExpression'
+  ) {
+    return identifier.parent.parent
+  }
+
+  // Vue 2 Global API: Vue.nextTick()
+  if (
+    identifier.name === 'nextTick' &&
+    identifier.parent.type === 'MemberExpression' &&
+    identifier.parent.object.type === 'Identifier' &&
+    identifier.parent.object.name === 'Vue' &&
+    identifier.parent.parent.type === 'CallExpression'
+  ) {
+    return identifier.parent.parent
+  }
+
+  // Vue 3 Global API: import { nextTick as nt } from 'vue'; nt()
+  if (identifier.parent.type === 'CallExpression') {
+    const variable = findVariable(context.getScope(), identifier)
+
+    if (variable != null && variable.defs.length === 1) {
+      const def = variable.defs[0]
+      if (
+        def.type === 'ImportBinding' &&
+        def.node.type === 'ImportSpecifier' &&
+        def.node.imported.type === 'Identifier' &&
+        def.node.imported.name === 'nextTick' &&
+        def.node.parent.type === 'ImportDeclaration' &&
+        def.node.parent.source.value === 'vue'
+      ) {
+        return identifier.parent
+      }
+    }
+  }
+
+  return undefined
+}
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    type: 'layout',
+    docs: {
+      description: 'enforce `Vue.nextTick` / `this.$nextTick` style',
+      categories: undefined,
+      recommended: false,
+      url: 'https://eslint.vuejs.org/rules/next-tick-style.html'
+    },
+    fixable: null,
+    schema: [{ enum: ['promise', 'callback'] }]
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    const preferredStyle =
+      /** @type {string|undefined} */ (context.options[0]) || 'promise'
+
+    return utils.defineVueVisitor(context, {
+      /** @param {Identifier} node */
+      Identifier(node) {
+        if (!getVueNextTickCallExpression(node, context)) {
+          return
+        }
+
+        context.report({
+          node,
+          message:
+            'Use the Promise returned by `nextTick` instead of passing a callback function.'
+        })
+      }
+    })
+  }
+}

From db2ff3bf2ee73f9e8b855cb32cc1a1aad3cfaf3e Mon Sep 17 00:00:00 2001
From: Flo Edelmann <florian-edelmann@online.de>
Date: Wed, 30 Dec 2020 16:10:20 +0100
Subject: [PATCH 04/17] Finish rule implementation

---
 lib/rules/next-tick-style.js | 46 +++++++++++++++++++++++++++++++-----
 1 file changed, 40 insertions(+), 6 deletions(-)

diff --git a/lib/rules/next-tick-style.js b/lib/rules/next-tick-style.js
index e8ecf07eb..119004130 100644
--- a/lib/rules/next-tick-style.js
+++ b/lib/rules/next-tick-style.js
@@ -66,6 +66,19 @@ function getVueNextTickCallExpression(identifier, context) {
   return undefined
 }
 
+/**
+ * @param {CallExpression} callExpression
+ * @returns {boolean}
+ */
+function isAwaitedPromise(callExpression) {
+  return (
+    callExpression.parent.type === 'AwaitExpression' ||
+    (callExpression.parent.type === 'MemberExpression' &&
+      callExpression.parent.property.type === 'Identifier' &&
+      callExpression.parent.property.name === 'then')
+  )
+}
+
 // ------------------------------------------------------------------------------
 // Rule Definition
 // ------------------------------------------------------------------------------
@@ -90,15 +103,36 @@ module.exports = {
     return utils.defineVueVisitor(context, {
       /** @param {Identifier} node */
       Identifier(node) {
-        if (!getVueNextTickCallExpression(node, context)) {
+        const callExpression = getVueNextTickCallExpression(node, context)
+        if (!callExpression) {
           return
         }
 
-        context.report({
-          node,
-          message:
-            'Use the Promise returned by `nextTick` instead of passing a callback function.'
-        })
+        if (preferredStyle === 'callback') {
+          if (
+            callExpression.arguments.length !== 1 ||
+            isAwaitedPromise(callExpression)
+          ) {
+            context.report({
+              node,
+              message:
+                'Pass a callback function to `nextTick` instead of using the returned Promise.'
+            })
+          }
+
+          return
+        }
+
+        if (
+          callExpression.arguments.length !== 0 ||
+          !isAwaitedPromise(callExpression)
+        ) {
+          context.report({
+            node,
+            message:
+              'Use the Promise returned by `nextTick` instead of passing a callback function.'
+          })
+        }
       }
     })
   }

From c9767081b3de2a69ab79bf5d3b41298950d6a8bf Mon Sep 17 00:00:00 2001
From: Flo Edelmann <florian-edelmann@online.de>
Date: Wed, 30 Dec 2020 18:26:33 +0100
Subject: [PATCH 05/17] Add fixer for promise style

---
 lib/rules/next-tick-style.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/lib/rules/next-tick-style.js b/lib/rules/next-tick-style.js
index 119004130..2f3a06995 100644
--- a/lib/rules/next-tick-style.js
+++ b/lib/rules/next-tick-style.js
@@ -92,7 +92,7 @@ module.exports = {
       recommended: false,
       url: 'https://eslint.vuejs.org/rules/next-tick-style.html'
     },
-    fixable: null,
+    fixable: 'code',
     schema: [{ enum: ['promise', 'callback'] }]
   },
   /** @param {RuleContext} context */
@@ -130,7 +130,10 @@ module.exports = {
           context.report({
             node,
             message:
-              'Use the Promise returned by `nextTick` instead of passing a callback function.'
+              'Use the Promise returned by `nextTick` instead of passing a callback function.',
+            *fix(fixer) {
+              yield fixer.insertTextAfter(node, '().then')
+            }
           })
         }
       }

From 8485c3acdc738c54e8e5084fcc1a71be2933d327 Mon Sep 17 00:00:00 2001
From: Flo Edelmann <florian-edelmann@online.de>
Date: Wed, 30 Dec 2020 16:14:17 +0100
Subject: [PATCH 06/17] Add new rule to rule collections

---
 docs/rules/README.md           | 1 +
 lib/configs/no-layout-rules.js | 3 ++-
 lib/index.js                   | 1 +
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/docs/rules/README.md b/docs/rules/README.md
index 5f848467b..06f8a7f6c 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -294,6 +294,7 @@ For example:
 | [vue/html-comment-indent](./html-comment-indent.md) | enforce consistent indentation in HTML comments | :wrench: |
 | [vue/match-component-file-name](./match-component-file-name.md) | require component name property to match its file name |  |
 | [vue/new-line-between-multi-line-property](./new-line-between-multi-line-property.md) | enforce new lines between multi-line properties in Vue components | :wrench: |
+| [vue/next-tick-style](./next-tick-style.md) | enforce `Vue.nextTick` / `this.$nextTick` style |  |
 | [vue/no-bare-strings-in-template](./no-bare-strings-in-template.md) | disallow the use of bare strings in `<template>` |  |
 | [vue/no-boolean-default](./no-boolean-default.md) | disallow boolean defaults | :wrench: |
 | [vue/no-duplicate-attr-inheritance](./no-duplicate-attr-inheritance.md) | enforce `inheritAttrs` to be set to `false` when using `v-bind="$attrs"` |  |
diff --git a/lib/configs/no-layout-rules.js b/lib/configs/no-layout-rules.js
index b7d33e0c1..565176d0e 100644
--- a/lib/configs/no-layout-rules.js
+++ b/lib/configs/no-layout-rules.js
@@ -45,6 +45,7 @@ module.exports = {
     'vue/space-infix-ops': 'off',
     'vue/space-unary-ops': 'off',
     'vue/template-curly-spacing': 'off',
-    'vue/v-for-delimiter-style': 'off'
+    'vue/v-for-delimiter-style': 'off',
+    'vue/next-tick-style': 'off'
   }
 }
diff --git a/lib/index.js b/lib/index.js
index 21091a9f8..cc4c352cd 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -48,6 +48,7 @@ module.exports = {
     'mustache-interpolation-spacing': require('./rules/mustache-interpolation-spacing'),
     'name-property-casing': require('./rules/name-property-casing'),
     'new-line-between-multi-line-property': require('./rules/new-line-between-multi-line-property'),
+    'next-tick-style': require('./rules/next-tick-style'),
     'no-arrow-functions-in-watch': require('./rules/no-arrow-functions-in-watch'),
     'no-async-in-computed-properties': require('./rules/no-async-in-computed-properties'),
     'no-bare-strings-in-template': require('./rules/no-bare-strings-in-template'),

From 8176d1b323e8158e264e2232a11295372442068c Mon Sep 17 00:00:00 2001
From: Flo Edelmann <florian-edelmann@online.de>
Date: Wed, 30 Dec 2020 16:26:09 +0100
Subject: [PATCH 07/17] Improve short description

---
 docs/rules/README.md               | 2 +-
 docs/rules/next-tick-style.md      | 2 +-
 lib/rules/next-tick-style.js       | 4 ++--
 tests/lib/rules/next-tick-style.js | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/rules/README.md b/docs/rules/README.md
index 06f8a7f6c..cbd9fccb2 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -294,7 +294,7 @@ For example:
 | [vue/html-comment-indent](./html-comment-indent.md) | enforce consistent indentation in HTML comments | :wrench: |
 | [vue/match-component-file-name](./match-component-file-name.md) | require component name property to match its file name |  |
 | [vue/new-line-between-multi-line-property](./new-line-between-multi-line-property.md) | enforce new lines between multi-line properties in Vue components | :wrench: |
-| [vue/next-tick-style](./next-tick-style.md) | enforce `Vue.nextTick` / `this.$nextTick` style |  |
+| [vue/next-tick-style](./next-tick-style.md) | enforce Promise or callback style in `nextTick` |  |
 | [vue/no-bare-strings-in-template](./no-bare-strings-in-template.md) | disallow the use of bare strings in `<template>` |  |
 | [vue/no-boolean-default](./no-boolean-default.md) | disallow boolean defaults | :wrench: |
 | [vue/no-duplicate-attr-inheritance](./no-duplicate-attr-inheritance.md) | enforce `inheritAttrs` to be set to `false` when using `v-bind="$attrs"` |  |
diff --git a/docs/rules/next-tick-style.md b/docs/rules/next-tick-style.md
index efe8528a2..31273845e 100644
--- a/docs/rules/next-tick-style.md
+++ b/docs/rules/next-tick-style.md
@@ -7,7 +7,7 @@ since: v7.5.0
 ---
 # vue/next-tick-style
 
-> enforce `Vue.nextTick` / `this.$nextTick` style
+> enforce Promise or callback style in `nextTick`
 
 - :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
 
diff --git a/lib/rules/next-tick-style.js b/lib/rules/next-tick-style.js
index 2f3a06995..253a4f658 100644
--- a/lib/rules/next-tick-style.js
+++ b/lib/rules/next-tick-style.js
@@ -1,5 +1,5 @@
 /**
- * @fileoverview enforce `Vue.nextTick` / `this.$nextTick` style
+ * @fileoverview enforce Promise or callback style in `nextTick`
  * @author Flo Edelmann
  * @copyright 2020 Flo Edelmann. All rights reserved.
  * See LICENSE file in root directory for full license.
@@ -87,7 +87,7 @@ module.exports = {
   meta: {
     type: 'layout',
     docs: {
-      description: 'enforce `Vue.nextTick` / `this.$nextTick` style',
+      description: 'enforce Promise or callback style in `nextTick`',
       categories: undefined,
       recommended: false,
       url: 'https://eslint.vuejs.org/rules/next-tick-style.html'
diff --git a/tests/lib/rules/next-tick-style.js b/tests/lib/rules/next-tick-style.js
index 3fed63c45..9a152d0e8 100644
--- a/tests/lib/rules/next-tick-style.js
+++ b/tests/lib/rules/next-tick-style.js
@@ -1,5 +1,5 @@
 /**
- * @fileoverview enforce `Vue.nextTick` / `this.$nextTick` style
+ * @fileoverview enforce Promise or callback style in `nextTick`
  * @author Flo Edelmann
  * @copyright 2020 Flo Edelmann. All rights reserved.
  * See LICENSE file in root directory for full license.

From 46dd1a814fe6ef5a0a81b9a8260b3c38b1c93054 Mon Sep 17 00:00:00 2001
From: Flo Edelmann <florian-edelmann@online.de>
Date: Wed, 30 Dec 2020 21:08:35 +0100
Subject: [PATCH 08/17] Use `output: null` instead of copying the unchanged
 code

---
 tests/lib/rules/next-tick-style.js | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

diff --git a/tests/lib/rules/next-tick-style.js b/tests/lib/rules/next-tick-style.js
index 9a152d0e8..9830643cf 100644
--- a/tests/lib/rules/next-tick-style.js
+++ b/tests/lib/rules/next-tick-style.js
@@ -226,18 +226,7 @@ tester.run('next-tick-style', rule, {
           await nt(); callback();
         }
       }</script>`,
-      output: `<script>import { nextTick as nt } from 'vue';
-      export default {
-        async mounted() {
-          this.$nextTick().then(() => callback());
-          Vue.nextTick().then(() => callback());
-          nt().then(() => callback());
-
-          await this.$nextTick(); callback();
-          await Vue.nextTick(); callback();
-          await nt(); callback();
-        }
-      }</script>`,
+      output: null,
       errors: [
         {
           message:

From ed96fecc9db7f51d17903ce43d0f114af4637d76 Mon Sep 17 00:00:00 2001
From: Flo Edelmann <florian-edelmann@online.de>
Date: Sat, 2 Jan 2021 13:10:31 +0100
Subject: [PATCH 09/17] Update documentation with update tool

---
 docs/rules/README.md           |  2 +-
 docs/rules/next-tick-style.md  | 10 +++-------
 lib/configs/no-layout-rules.js |  4 ++--
 3 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/docs/rules/README.md b/docs/rules/README.md
index cbd9fccb2..88b0f3a83 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -294,7 +294,7 @@ For example:
 | [vue/html-comment-indent](./html-comment-indent.md) | enforce consistent indentation in HTML comments | :wrench: |
 | [vue/match-component-file-name](./match-component-file-name.md) | require component name property to match its file name |  |
 | [vue/new-line-between-multi-line-property](./new-line-between-multi-line-property.md) | enforce new lines between multi-line properties in Vue components | :wrench: |
-| [vue/next-tick-style](./next-tick-style.md) | enforce Promise or callback style in `nextTick` |  |
+| [vue/next-tick-style](./next-tick-style.md) | enforce Promise or callback style in `nextTick` | :wrench: |
 | [vue/no-bare-strings-in-template](./no-bare-strings-in-template.md) | disallow the use of bare strings in `<template>` |  |
 | [vue/no-boolean-default](./no-boolean-default.md) | disallow boolean defaults | :wrench: |
 | [vue/no-duplicate-attr-inheritance](./no-duplicate-attr-inheritance.md) | enforce `inheritAttrs` to be set to `false` when using `v-bind="$attrs"` |  |
diff --git a/docs/rules/next-tick-style.md b/docs/rules/next-tick-style.md
index 31273845e..c16a12acf 100644
--- a/docs/rules/next-tick-style.md
+++ b/docs/rules/next-tick-style.md
@@ -2,13 +2,13 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/next-tick-style
-description: enforce `v-for` directive's delimiter style
-since: v7.5.0
+description: enforce Promise or callback style in `nextTick`
 ---
 # vue/next-tick-style
 
 > enforce Promise or callback style in `nextTick`
 
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
 - :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
@@ -55,7 +55,7 @@ Default is set to `promise`.
 
 ### `"callback"`
 
-<eslint-code-block :rules="{'vue/next-tick-style': ['error', 'callback']}">
+<eslint-code-block fix :rules="{'vue/next-tick-style': ['error', 'callback']}">
 
 ```vue
 <script>
@@ -89,10 +89,6 @@ export default {
 - [Global `nextTick` API in Vue 3](https://v3.vuejs.org/api/global-api.html#nexttick)
 - [Instance `$nextTick` API in Vue 3](https://v3.vuejs.org/api/instance-methods.html#nexttick)
 
-## :rocket: Version
-
-This rule was introduced in eslint-plugin-vue v7.5.0
-
 ## :mag: Implementation
 
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/next-tick-style.js)
diff --git a/lib/configs/no-layout-rules.js b/lib/configs/no-layout-rules.js
index 565176d0e..a6f2bf07f 100644
--- a/lib/configs/no-layout-rules.js
+++ b/lib/configs/no-layout-rules.js
@@ -31,6 +31,7 @@ module.exports = {
     'vue/multiline-html-element-content-newline': 'off',
     'vue/mustache-interpolation-spacing': 'off',
     'vue/new-line-between-multi-line-property': 'off',
+    'vue/next-tick-style': 'off',
     'vue/no-extra-parens': 'off',
     'vue/no-multi-spaces': 'off',
     'vue/no-spaces-around-equal-signs-in-attribute': 'off',
@@ -45,7 +46,6 @@ module.exports = {
     'vue/space-infix-ops': 'off',
     'vue/space-unary-ops': 'off',
     'vue/template-curly-spacing': 'off',
-    'vue/v-for-delimiter-style': 'off',
-    'vue/next-tick-style': 'off'
+    'vue/v-for-delimiter-style': 'off'
   }
 }

From 9ddaff910ee9cf4836708e9815a6fc0c1773b0e2 Mon Sep 17 00:00:00 2001
From: Flo Edelmann <florian-edelmann@online.de>
Date: Sat, 2 Jan 2021 13:11:14 +0100
Subject: [PATCH 10/17] Simplify rule fix code

---
 lib/rules/next-tick-style.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/rules/next-tick-style.js b/lib/rules/next-tick-style.js
index 253a4f658..d71ca8b25 100644
--- a/lib/rules/next-tick-style.js
+++ b/lib/rules/next-tick-style.js
@@ -131,8 +131,8 @@ module.exports = {
             node,
             message:
               'Use the Promise returned by `nextTick` instead of passing a callback function.',
-            *fix(fixer) {
-              yield fixer.insertTextAfter(node, '().then')
+            fix(fixer) {
+              return fixer.insertTextAfter(node, '().then')
             }
           })
         }

From 2a895bf320010dc65ed1ed22293fd855f56ea87b Mon Sep 17 00:00:00 2001
From: Flo Edelmann <florian-edelmann@online.de>
Date: Sat, 2 Jan 2021 15:00:50 +0100
Subject: [PATCH 11/17] Drop unused `recommended` property

---
 lib/rules/next-tick-style.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/lib/rules/next-tick-style.js b/lib/rules/next-tick-style.js
index d71ca8b25..0186b0bcb 100644
--- a/lib/rules/next-tick-style.js
+++ b/lib/rules/next-tick-style.js
@@ -89,7 +89,6 @@ module.exports = {
     docs: {
       description: 'enforce Promise or callback style in `nextTick`',
       categories: undefined,
-      recommended: false,
       url: 'https://eslint.vuejs.org/rules/next-tick-style.html'
     },
     fixable: 'code',

From 8c4ccf7d7f03ceef38646db22e42db8bd7ba9db0 Mon Sep 17 00:00:00 2001
From: Flo Edelmann <florian-edelmann@online.de>
Date: Sat, 2 Jan 2021 16:21:18 +0100
Subject: [PATCH 12/17] Fix require path

---
 lib/rules/next-tick-style.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/rules/next-tick-style.js b/lib/rules/next-tick-style.js
index 0186b0bcb..96f919834 100644
--- a/lib/rules/next-tick-style.js
+++ b/lib/rules/next-tick-style.js
@@ -11,7 +11,7 @@
 // ------------------------------------------------------------------------------
 
 const utils = require('../utils')
-const { findVariable } = require('eslint-utils/index.js')
+const { findVariable } = require('eslint-utils')
 
 // ------------------------------------------------------------------------------
 // Helpers

From 30602683478b6034993f5d1f14d6700bc98d4b4a Mon Sep 17 00:00:00 2001
From: Flo Edelmann <florian-edelmann@online.de>
Date: Sat, 2 Jan 2021 17:34:01 +0100
Subject: [PATCH 13/17] Update docs

---
 docs/rules/next-tick-style.md | 28 ++++++++++++++++++----------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/docs/rules/next-tick-style.md b/docs/rules/next-tick-style.md
index c16a12acf..7c9085625 100644
--- a/docs/rules/next-tick-style.md
+++ b/docs/rules/next-tick-style.md
@@ -19,19 +19,23 @@ This rule enforces whether the callback version or Promise version (which was in
 
 ```vue
 <script>
-import { nextTick } from 'vue';
+import { nextTick as nt } from 'vue';
 
 export default {
   async mounted() {
     /* ✓ GOOD */
-    nextTick().then(() => callback());
-    await nextTick(); callback();
+    nt().then(() => callback());
+    await nt(); callback();
+    Vue.nextTick().then(() => callback());
+    await Vue.nextTick(); callback();
     this.$nextTick().then(() => callback());
     await this.$nextTick(); callback();
 
     /* ✗ BAD */
-    nextTick(() => callback());
-    nextTick(callback);
+    nt(() => callback());
+    nt(callback);
+    Vue.$nextTick(() => callback());
+    Vue.$nextTick(callback);
     this.$nextTick(() => callback());
     this.$nextTick(callback);
   }
@@ -59,19 +63,23 @@ Default is set to `promise`.
 
 ```vue
 <script>
-import { nextTick } from 'vue';
+import { nextTick as nt } from 'vue';
 
 export default {
   async mounted() {
     /* ✓ GOOD */
-    nextTick(() => callback());
-    nextTick(callback);
+    nt(() => callback());
+    nt(callback);
+    Vue.nextTick(() => callback());
+    Vue.nextTick(callback);
     this.$nextTick(() => callback());
     this.$nextTick(callback);
 
     /* ✗ BAD */
-    nextTick().then(() => callback());
-    await nextTick(); callback();
+    nt().then(() => callback());
+    await nt(); callback();
+    Vue.nextTick().then(() => callback());
+    await Vue.nextTick(); callback();
     this.$nextTick().then(() => callback());
     await this.$nextTick(); callback();
   }

From 76fa984bf7fad05e093a070727e6ceb34812ea68 Mon Sep 17 00:00:00 2001
From: Flo Edelmann <florian-edelmann@online.de>
Date: Sat, 2 Jan 2021 17:39:23 +0100
Subject: [PATCH 14/17] Fix docs

---
 docs/rules/next-tick-style.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/rules/next-tick-style.md b/docs/rules/next-tick-style.md
index 7c9085625..52188fd06 100644
--- a/docs/rules/next-tick-style.md
+++ b/docs/rules/next-tick-style.md
@@ -34,8 +34,8 @@ export default {
     /* ✗ BAD */
     nt(() => callback());
     nt(callback);
-    Vue.$nextTick(() => callback());
-    Vue.$nextTick(callback);
+    Vue.nextTick(() => callback());
+    Vue.nextTick(callback);
     this.$nextTick(() => callback());
     this.$nextTick(callback);
   }

From 20c0ffc0be1636fddc8ee5e27ad73d04d5cea8f8 Mon Sep 17 00:00:00 2001
From: Flo Edelmann <florian-edelmann@online.de>
Date: Mon, 4 Jan 2021 18:31:13 +0100
Subject: [PATCH 15/17] Prevent false positives for `foo.then(nextTick)`

---
 lib/rules/next-tick-style.js       | 11 ++++++++---
 tests/lib/rules/next-tick-style.js | 26 ++++++++++++++++++++++++++
 2 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/lib/rules/next-tick-style.js b/lib/rules/next-tick-style.js
index 96f919834..07ca4a248 100644
--- a/lib/rules/next-tick-style.js
+++ b/lib/rules/next-tick-style.js
@@ -28,7 +28,8 @@ function getVueNextTickCallExpression(identifier, context) {
     identifier.name === '$nextTick' &&
     identifier.parent.type === 'MemberExpression' &&
     utils.isThis(identifier.parent.object, context) &&
-    identifier.parent.parent.type === 'CallExpression'
+    identifier.parent.parent.type === 'CallExpression' &&
+    identifier.parent.parent.callee === identifier.parent
   ) {
     return identifier.parent.parent
   }
@@ -39,13 +40,17 @@ function getVueNextTickCallExpression(identifier, context) {
     identifier.parent.type === 'MemberExpression' &&
     identifier.parent.object.type === 'Identifier' &&
     identifier.parent.object.name === 'Vue' &&
-    identifier.parent.parent.type === 'CallExpression'
+    identifier.parent.parent.type === 'CallExpression' &&
+    identifier.parent.parent.callee === identifier.parent
   ) {
     return identifier.parent.parent
   }
 
   // Vue 3 Global API: import { nextTick as nt } from 'vue'; nt()
-  if (identifier.parent.type === 'CallExpression') {
+  if (
+    identifier.parent.type === 'CallExpression' &&
+    identifier.parent.callee === identifier
+  ) {
     const variable = findVariable(context.getScope(), identifier)
 
     if (variable != null && variable.defs.length === 1) {
diff --git a/tests/lib/rules/next-tick-style.js b/tests/lib/rules/next-tick-style.js
index 9830643cf..0f5af66ba 100644
--- a/tests/lib/rules/next-tick-style.js
+++ b/tests/lib/rules/next-tick-style.js
@@ -77,6 +77,32 @@ tester.run('next-tick-style', rule, {
           nt(callback);
         }
       }</script>`
+    },
+
+    // https://github.com/vuejs/eslint-plugin-vue/pull/1400#discussion_r550937977
+    {
+      filename: 'test.vue',
+      options: ['promise'],
+      code: `<script>import { nextTick as nt } from 'vue';
+      export default {
+        mounted() {
+          foo.then(this.$nextTick);
+          foo.then(Vue.nextTick);
+          foo.then(nt);
+        }
+      }</script>`
+    },
+    {
+      filename: 'test.vue',
+      options: ['callback'],
+      code: `<script>import { nextTick as nt } from 'vue';
+      export default {
+        mounted() {
+          foo.then(this.$nextTick);
+          foo.then(Vue.nextTick);
+          foo.then(nt);
+        }
+      }</script>`
     }
   ],
   invalid: [

From e60d7578664bcc8f2a059fc1499b106b91cb746a Mon Sep 17 00:00:00 2001
From: Flo Edelmann <florian-edelmann@online.de>
Date: Mon, 4 Jan 2021 18:31:59 +0100
Subject: [PATCH 16/17] Update rule type

---
 lib/configs/no-layout-rules.js | 1 -
 lib/rules/next-tick-style.js   | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/lib/configs/no-layout-rules.js b/lib/configs/no-layout-rules.js
index a6f2bf07f..b7d33e0c1 100644
--- a/lib/configs/no-layout-rules.js
+++ b/lib/configs/no-layout-rules.js
@@ -31,7 +31,6 @@ module.exports = {
     'vue/multiline-html-element-content-newline': 'off',
     'vue/mustache-interpolation-spacing': 'off',
     'vue/new-line-between-multi-line-property': 'off',
-    'vue/next-tick-style': 'off',
     'vue/no-extra-parens': 'off',
     'vue/no-multi-spaces': 'off',
     'vue/no-spaces-around-equal-signs-in-attribute': 'off',
diff --git a/lib/rules/next-tick-style.js b/lib/rules/next-tick-style.js
index 07ca4a248..d015bb5b7 100644
--- a/lib/rules/next-tick-style.js
+++ b/lib/rules/next-tick-style.js
@@ -90,7 +90,7 @@ function isAwaitedPromise(callExpression) {
 
 module.exports = {
   meta: {
-    type: 'layout',
+    type: 'suggestion',
     docs: {
       description: 'enforce Promise or callback style in `nextTick`',
       categories: undefined,

From 7778a273e669d7e994efee2b44c119ab99b2bea8 Mon Sep 17 00:00:00 2001
From: Flo Edelmann <florian-edelmann@online.de>
Date: Mon, 4 Jan 2021 19:05:24 +0100
Subject: [PATCH 17/17] Add `foo.then(nextTick, catchHandler)` test case

---
 tests/lib/rules/next-tick-style.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/tests/lib/rules/next-tick-style.js b/tests/lib/rules/next-tick-style.js
index 0f5af66ba..9f2d0ae5b 100644
--- a/tests/lib/rules/next-tick-style.js
+++ b/tests/lib/rules/next-tick-style.js
@@ -89,6 +89,10 @@ tester.run('next-tick-style', rule, {
           foo.then(this.$nextTick);
           foo.then(Vue.nextTick);
           foo.then(nt);
+
+          foo.then(nt, catchHandler);
+          foo.then(Vue.nextTick, catchHandler);
+          foo.then(this.$nextTick, catchHandler);
         }
       }</script>`
     },
@@ -101,6 +105,10 @@ tester.run('next-tick-style', rule, {
           foo.then(this.$nextTick);
           foo.then(Vue.nextTick);
           foo.then(nt);
+
+          foo.then(nt, catchHandler);
+          foo.then(Vue.nextTick, catchHandler);
+          foo.then(this.$nextTick, catchHandler);
         }
       }</script>`
     }