From c2c709dfb9ef3f4d482d2cdd84b33d74585f9395 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tao=20Bojl=C3=A9n?=
 <66130243+taobojlen@users.noreply.github.com>
Date: Thu, 30 Sep 2021 00:36:10 +0100
Subject: [PATCH 1/6] Add vue/no-restricted-class rule (#1639)

* Add vue/no-restricted-class rule

* don't match '@class'

* accept options in an array

* handle array syntax

* refactor with @ota-meshi's suggestions

* handle objects converted to strings

* run update script
---
 docs/rules/README.md                   |   1 +
 docs/rules/no-restricted-class.md      |  79 +++++++++++++
 lib/index.js                           |   1 +
 lib/rules/no-restricted-class.js       | 154 +++++++++++++++++++++++++
 tests/lib/rules/no-restricted-class.js | 118 +++++++++++++++++++
 5 files changed, 353 insertions(+)
 create mode 100644 docs/rules/no-restricted-class.md
 create mode 100644 lib/rules/no-restricted-class.js
 create mode 100644 tests/lib/rules/no-restricted-class.js

diff --git a/docs/rules/README.md b/docs/rules/README.md
index 85f6e661b..2f89e3a53 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -310,6 +310,7 @@ For example:
 | [vue/no-reserved-component-names](./no-reserved-component-names.md) | disallow the use of reserved names in component definitions |  |
 | [vue/no-restricted-block](./no-restricted-block.md) | disallow specific block |  |
 | [vue/no-restricted-call-after-await](./no-restricted-call-after-await.md) | disallow asynchronously called restricted methods |  |
+| [vue/no-restricted-class](./no-restricted-class.md) | disallow specific classes in Vue components |  |
 | [vue/no-restricted-component-options](./no-restricted-component-options.md) | disallow specific component option |  |
 | [vue/no-restricted-custom-event](./no-restricted-custom-event.md) | disallow specific custom event |  |
 | [vue/no-restricted-props](./no-restricted-props.md) | disallow specific props |  |
diff --git a/docs/rules/no-restricted-class.md b/docs/rules/no-restricted-class.md
new file mode 100644
index 000000000..c7aebce6b
--- /dev/null
+++ b/docs/rules/no-restricted-class.md
@@ -0,0 +1,79 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-restricted-class
+description: disallow specific classes in Vue components
+---
+# vue/no-restricted-class
+
+> disallow specific classes in Vue components
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
+
+## :book: Rule Details
+
+This rule lets you specify a list of classes that you don't want to allow in your templates.
+
+## :wrench: Options
+
+The simplest way to specify a list of forbidden classes is to pass it directly
+in the rule configuration.
+
+```json
+{
+  "vue/no-restricted-props": ["error", "forbidden", "forbidden-two", "forbidden-three"]
+}
+```
+
+<eslint-code-block :rules="{'vue/no-restricted-class': ['error', 'forbidden']}">
+
+```vue
+<template>
+  <!-- ✗ BAD -->
+  <div class="forbidden" />
+  <div :class="{forbidden: someBoolean}" />
+  <div :class="`forbidden ${someString}`" />
+  <div :class="'forbidden'" />
+  <div :class="'forbidden ' + someString" />
+  <div :class="[someString, 'forbidden']" />
+  <!-- ✗ GOOD -->
+  <div class="allowed-class" />
+</template>
+
+<script>
+export default {
+  props: {
+    someBoolean: Boolean,
+    someString: String,
+  }
+}
+</script>
+```
+
+</eslint-code-block>
+
+::: warning Note
+This rule will only detect classes that are used as strings in your templates. Passing classes via
+variables, like below, will not be detected by this rule.
+
+```vue
+<template>
+  <div :class="classes" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      classes: "forbidden"
+    }
+  }
+}
+</script>
+```
+:::
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-restricted-class.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-restricted-class.js)
diff --git a/lib/index.js b/lib/index.js
index 0015fb579..ef111732d 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -101,6 +101,7 @@ module.exports = {
     'no-reserved-keys': require('./rules/no-reserved-keys'),
     'no-restricted-block': require('./rules/no-restricted-block'),
     'no-restricted-call-after-await': require('./rules/no-restricted-call-after-await'),
+    'no-restricted-class': require('./rules/no-restricted-class'),
     'no-restricted-component-options': require('./rules/no-restricted-component-options'),
     'no-restricted-custom-event': require('./rules/no-restricted-custom-event'),
     'no-restricted-props': require('./rules/no-restricted-props'),
diff --git a/lib/rules/no-restricted-class.js b/lib/rules/no-restricted-class.js
new file mode 100644
index 000000000..b1dcccb07
--- /dev/null
+++ b/lib/rules/no-restricted-class.js
@@ -0,0 +1,154 @@
+/**
+ * @fileoverview Forbid certain classes from being used
+ * @author Tao Bojlen
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+const utils = require('../utils')
+
+// ------------------------------------------------------------------------------
+// Helpers
+// ------------------------------------------------------------------------------
+/**
+ * Report a forbidden class
+ * @param {string} className
+ * @param {*} node
+ * @param {RuleContext} context
+ * @param {Set<string>} forbiddenClasses
+ */
+const reportForbiddenClass = (className, node, context, forbiddenClasses) => {
+  if (forbiddenClasses.has(className)) {
+    const loc = node.value ? node.value.loc : node.loc
+    context.report({
+      node,
+      loc,
+      messageId: 'forbiddenClass',
+      data: {
+        class: className
+      }
+    })
+  }
+}
+
+/**
+ * @param {Expression} node
+ * @param {boolean} [textOnly]
+ * @returns {IterableIterator<{ className:string, reportNode: ESNode }>}
+ */
+function* extractClassNames(node, textOnly) {
+  if (node.type === 'Literal') {
+    yield* `${node.value}`
+      .split(/\s+/)
+      .map((className) => ({ className, reportNode: node }))
+    return
+  }
+  if (node.type === 'TemplateLiteral') {
+    for (const templateElement of node.quasis) {
+      yield* templateElement.value.cooked
+        .split(/\s+/)
+        .map((className) => ({ className, reportNode: templateElement }))
+    }
+    for (const expr of node.expressions) {
+      yield* extractClassNames(expr, true)
+    }
+    return
+  }
+  if (node.type === 'BinaryExpression') {
+    if (node.operator !== '+') {
+      return
+    }
+    yield* extractClassNames(node.left, true)
+    yield* extractClassNames(node.right, true)
+    return
+  }
+  if (textOnly) {
+    return
+  }
+  if (node.type === 'ObjectExpression') {
+    for (const prop of node.properties) {
+      if (prop.type !== 'Property') {
+        continue
+      }
+      const classNames = utils.getStaticPropertyName(prop)
+      if (!classNames) {
+        continue
+      }
+      yield* classNames
+        .split(/\s+/)
+        .map((className) => ({ className, reportNode: prop.key }))
+    }
+    return
+  }
+  if (node.type === 'ArrayExpression') {
+    for (const element of node.elements) {
+      if (element == null) {
+        continue
+      }
+      if (element.type === 'SpreadElement') {
+        continue
+      }
+      yield* extractClassNames(element)
+    }
+    return
+  }
+}
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'disallow specific classes in Vue components',
+      url: 'https://eslint.vuejs.org/rules/no-restricted-class.html',
+      categories: undefined
+    },
+    fixable: null,
+    messages: {
+      forbiddenClass: "'{{class}}' class is not allowed."
+    },
+    schema: {
+      type: 'array',
+      items: {
+        type: 'string'
+      }
+    }
+  },
+
+  /** @param {RuleContext} context */
+  create(context) {
+    const forbiddenClasses = new Set(context.options || [])
+
+    return utils.defineTemplateBodyVisitor(context, {
+      /**
+       * @param {VAttribute & { value: VLiteral } } node
+       */
+      'VAttribute[directive=false][key.name="class"]'(node) {
+        node.value.value
+          .split(/\s+/)
+          .forEach((className) =>
+            reportForbiddenClass(className, node, context, forbiddenClasses)
+          )
+      },
+
+      /** @param {VExpressionContainer} node */
+      "VAttribute[directive=true][key.name.name='bind'][key.argument.name='class'] > VExpressionContainer.value"(
+        node
+      ) {
+        if (!node.expression) {
+          return
+        }
+
+        for (const { className, reportNode } of extractClassNames(
+          /** @type {Expression} */ (node.expression)
+        )) {
+          reportForbiddenClass(className, reportNode, context, forbiddenClasses)
+        }
+      }
+    })
+  }
+}
diff --git a/tests/lib/rules/no-restricted-class.js b/tests/lib/rules/no-restricted-class.js
new file mode 100644
index 000000000..baf39778f
--- /dev/null
+++ b/tests/lib/rules/no-restricted-class.js
@@ -0,0 +1,118 @@
+/**
+ * @author Tao Bojlen
+ */
+
+'use strict'
+
+const rule = require('../../../lib/rules/no-restricted-class')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: { ecmaVersion: 2020, sourceType: 'module' }
+})
+
+ruleTester.run('no-restricted-class', rule, {
+  valid: [
+    { code: `<template><div class="allowed">Content</div></template>` },
+    {
+      code: `<template><div class="allowed"">Content</div></template>`,
+      options: ['forbidden']
+    },
+    {
+      code: `<template><div :class="'allowed' + forbidden">Content</div></template>`,
+      options: ['forbidden']
+    },
+    {
+      code: `<template><div @class="forbidden">Content</div></template>`,
+      options: ['forbidden']
+    },
+    {
+      code: `<template><div :class="'' + {forbidden: true}">Content</div></template>`,
+      options: ['forbidden']
+    }
+  ],
+
+  invalid: [
+    {
+      code: `<template><div class="forbidden allowed" /></template>`,
+      errors: [
+        {
+          message: "'forbidden' class is not allowed.",
+          type: 'VAttribute'
+        }
+      ],
+      options: ['forbidden']
+    },
+    {
+      code: `<template><div :class="'forbidden' + ' ' + 'allowed' + someVar" /></template>`,
+      errors: [
+        {
+          message: "'forbidden' class is not allowed.",
+          type: 'Literal'
+        }
+      ],
+      options: ['forbidden']
+    },
+    {
+      code: `<template><div :class="{'forbidden': someBool, someVar: true}" /></template>`,
+      errors: [
+        {
+          message: "'forbidden' class is not allowed.",
+          type: 'Literal'
+        }
+      ],
+      options: ['forbidden']
+    },
+    {
+      code: `<template><div :class="{forbidden: someBool}" /></template>`,
+      errors: [
+        {
+          message: "'forbidden' class is not allowed.",
+          type: 'Identifier'
+        }
+      ],
+      options: ['forbidden']
+    },
+    {
+      code: '<template><div :class="`forbidden ${someVar}`" /></template>',
+      errors: [
+        {
+          message: "'forbidden' class is not allowed.",
+          type: 'TemplateElement'
+        }
+      ],
+      options: ['forbidden']
+    },
+    {
+      code: `<template><div :class="'forbidden'" /></template>`,
+      errors: [
+        {
+          message: "'forbidden' class is not allowed.",
+          type: 'Literal'
+        }
+      ],
+      options: ['forbidden']
+    },
+    {
+      code: `<template><div :class="['forbidden', 'allowed']" /></template>`,
+      errors: [
+        {
+          message: "'forbidden' class is not allowed.",
+          type: 'Literal'
+        }
+      ],
+      options: ['forbidden']
+    },
+    {
+      code: `<template><div :class="['allowed forbidden', someString]" /></template>`,
+      errors: [
+        {
+          message: "'forbidden' class is not allowed.",
+          type: 'Literal'
+        }
+      ],
+      options: ['forbidden']
+    }
+  ]
+})

From a56c7ece26236bb672c53da0185314859f2d346f Mon Sep 17 00:00:00 2001
From: Yosuke Ota <otameshiyo23@gmail.com>
Date: Sun, 3 Oct 2021 07:04:01 +0900
Subject: [PATCH 2/6] Chore: add generate new rule command (#1645)

---
 docs/developer-guide/README.md |   5 +-
 package.json                   |   1 +
 tools/new-rule.js              | 160 +++++++++++++++++++++++++++++++++
 3 files changed, 164 insertions(+), 2 deletions(-)
 create mode 100644 tools/new-rule.js

diff --git a/docs/developer-guide/README.md b/docs/developer-guide/README.md
index f08ecc3a8..c5bfcc99e 100644
--- a/docs/developer-guide/README.md
+++ b/docs/developer-guide/README.md
@@ -13,8 +13,7 @@ Please include as much detail as possible to help us properly address your issue
 In order to add a new rule or a rule change, you should:
 
 - Create issue on GitHub with description of proposed rule
-- Generate a new rule using the [official yeoman generator](https://github.com/eslint/generator-eslint)
-- Run `npm start`
+- Generate a new rule using the `npm run new -- [rule-name]` command
 - Write test scenarios & implement logic
 - Describe the rule in the generated `docs` file
 - Make sure all tests are passing
@@ -38,10 +37,12 @@ After opening [astexplorer.net], select `Vue` as the syntax and `vue-eslint-pars
 Since single file components in Vue are not plain JavaScript, we can't use the default parser, and we had to introduce additional one: `vue-eslint-parser`, that generates enhanced AST with nodes that represent specific parts of the template syntax, as well as what's inside the `<script>` tag.
 
 To know more about certain nodes in produced ASTs, go here:
+
 - [ESTree docs](https://github.com/estree/estree)
 - [vue-eslint-parser AST docs](https://github.com/vuejs/vue-eslint-parser/blob/master/docs/ast.md)
 
 The `vue-eslint-parser` provides few useful parser services, to help traverse the produced AST and access tokens of the template:
+
 - `context.parserServices.defineTemplateBodyVisitor(visitor, scriptVisitor)`
 - `context.parserServices.getTemplateBodyTokenStore()`
 
diff --git a/package.json b/package.json
index 8e8220581..fc5b22a13 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "description": "Official ESLint plugin for Vue.js",
   "main": "lib/index.js",
   "scripts": {
+    "new": "node tools/new-rule.js",
     "start": "npm run test:base -- --watch --growl",
     "test:base": "mocha \"tests/lib/**/*.js\" --reporter dot",
     "test": "nyc npm run test:base -- \"tests/integrations/*.js\" --timeout 60000",
diff --git a/tools/new-rule.js b/tools/new-rule.js
new file mode 100644
index 000000000..68a8b440c
--- /dev/null
+++ b/tools/new-rule.js
@@ -0,0 +1,160 @@
+const path = require('path')
+const fs = require('fs')
+const cp = require('child_process')
+const logger = console
+
+// main
+;((ruleId) => {
+  if (ruleId == null) {
+    logger.error('Usage: npm run new <RuleID>')
+    process.exitCode = 1
+    return
+  }
+  if (!/^[\w-]+$/u.test(ruleId)) {
+    logger.error("Invalid RuleID '%s'.", ruleId)
+    process.exitCode = 1
+    return
+  }
+
+  const ruleFile = path.resolve(__dirname, `../lib/rules/${ruleId}.js`)
+  const testFile = path.resolve(__dirname, `../tests/lib/rules/${ruleId}.js`)
+  const docFile = path.resolve(__dirname, `../docs/rules/${ruleId}.md`)
+
+  fs.writeFileSync(
+    ruleFile,
+    `/**
+ * @author *****your name*****
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+// ...
+
+// ------------------------------------------------------------------------------
+// Helpers
+// ------------------------------------------------------------------------------
+
+// ...
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: '',
+      categories: undefined,
+      url: ''
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      // ...
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    // ...
+
+    return utils.defineTemplateBodyVisitor(context, {
+      // ...
+    })
+  }
+}
+`
+  )
+  fs.writeFileSync(
+    testFile,
+    `/**
+ * @author *****your name*****
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('eslint').RuleTester
+const rule = require('../../../lib/rules/${ruleId}')
+
+const tester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('${ruleId}', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: \`
+      <template>
+
+      </template>
+      \`
+    },
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: \`
+      <template>
+
+      </template>
+      \`,
+      errors: [
+        {
+          message: '...',
+          line: 'line',
+          column: 'col'
+        },
+      ]
+    }
+  ]
+})
+`
+  )
+  fs.writeFileSync(
+    docFile,
+    `---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/${ruleId}
+description: xxx
+---
+# vue/${ruleId}
+
+> xxx
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
+
+## :book: Rule Details
+
+This rule ....
+
+<eslint-code-block :rules="{'vue/${ruleId}': ['error']}">
+
+\`\`\`vue
+<template>
+
+</template>
+\`\`\`
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+`
+  )
+
+  cp.execSync(`code "${ruleFile}"`)
+  cp.execSync(`code "${testFile}"`)
+  cp.execSync(`code "${docFile}"`)
+})(process.argv[2])

From fbeb887bdc30550bfdab75a36b0e51e2f441ccbd Mon Sep 17 00:00:00 2001
From: Yosuke Ota <otameshiyo23@gmail.com>
Date: Tue, 5 Oct 2021 11:02:27 +0900
Subject: [PATCH 3/6] Add vue/no-useless-template-attributes rule (#1644)

---
 docs/rules/README.md                          |   1 +
 docs/rules/no-useless-template-attributes.md  |  64 +++++++
 lib/index.js                                  |   1 +
 lib/rules/no-useless-template-attributes.js   | 121 ++++++++++++++
 .../rules/no-useless-template-attributes.js   | 156 ++++++++++++++++++
 5 files changed, 343 insertions(+)
 create mode 100644 docs/rules/no-useless-template-attributes.md
 create mode 100644 lib/rules/no-useless-template-attributes.js
 create mode 100644 tests/lib/rules/no-useless-template-attributes.js

diff --git a/docs/rules/README.md b/docs/rules/README.md
index 2f89e3a53..544d24db7 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -325,6 +325,7 @@ For example:
 | [vue/no-unused-refs](./no-unused-refs.md) | disallow unused refs |  |
 | [vue/no-use-computed-property-like-method](./no-use-computed-property-like-method.md) | disallow use computed property like method |  |
 | [vue/no-useless-mustaches](./no-useless-mustaches.md) | disallow unnecessary mustache interpolations | :wrench: |
+| [vue/no-useless-template-attributes](./no-useless-template-attributes.md) | disallow useless attribute on `<template>` |  |
 | [vue/no-useless-v-bind](./no-useless-v-bind.md) | disallow unnecessary `v-bind` directives | :wrench: |
 | [vue/no-v-text](./no-v-text.md) | disallow use of v-text |  |
 | [vue/padding-line-between-blocks](./padding-line-between-blocks.md) | require or disallow padding lines between blocks | :wrench: |
diff --git a/docs/rules/no-useless-template-attributes.md b/docs/rules/no-useless-template-attributes.md
new file mode 100644
index 000000000..ec24eb70f
--- /dev/null
+++ b/docs/rules/no-useless-template-attributes.md
@@ -0,0 +1,64 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-useless-template-attributes
+description: disallow useless attribute on `<template>`
+---
+# vue/no-useless-template-attributes
+
+> disallow useless attribute on `<template>`
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
+
+## :book: Rule Details
+
+This rule to prevent any useless attribute on `<template>` tags.
+
+<eslint-code-block :rules="{'vue/no-useless-template-attributes': ['error']}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <template v-if="foo">...</template>
+  <template v-if="foo">...</template>
+  <template v-else-if="foo">...</template>
+  <template v-else>...</template>
+  <template v-for="i in foo" :key="i">...</template>
+  <template v-slot:foo>...</template>
+  <!-- for Vue<=2.5 -->
+  <template slot="foo">...</template>
+  <template :slot="foo">...</template>
+  <template slot-scope="param">...</template>
+  <!-- for Vue<=2.4 -->
+  <template scope="param">...</template>
+
+  <!-- ✗ BAD -->
+  <template v-if="foo" class="heading">...</template>
+  <template v-for="i in foo" :bar="i">...</template>
+  <template v-slot:foo="foo" ref="input">...</template>
+  <template v-if="foo" @click="click">...</template>
+
+  <!-- Ignore -->
+  <template class="heading">...</template>
+  <template :bar="i">...</template>
+  <template ref="input">...</template>
+  <template @click="click">...</template>
+</template>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## :couple: Related Rules
+
+- [vue/no-lone-template]
+
+[vue/no-lone-template]: ./no-lone-template.md
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-useless-template-attributes.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-useless-template-attributes.js)
diff --git a/lib/index.js b/lib/index.js
index ef111732d..9ddfe4cd7 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -129,6 +129,7 @@ module.exports = {
     'no-use-v-if-with-v-for': require('./rules/no-use-v-if-with-v-for'),
     'no-useless-concat': require('./rules/no-useless-concat'),
     'no-useless-mustaches': require('./rules/no-useless-mustaches'),
+    'no-useless-template-attributes': require('./rules/no-useless-template-attributes'),
     'no-useless-v-bind': require('./rules/no-useless-v-bind'),
     'no-v-for-template-key-on-child': require('./rules/no-v-for-template-key-on-child'),
     'no-v-for-template-key': require('./rules/no-v-for-template-key'),
diff --git a/lib/rules/no-useless-template-attributes.js b/lib/rules/no-useless-template-attributes.js
new file mode 100644
index 000000000..936480833
--- /dev/null
+++ b/lib/rules/no-useless-template-attributes.js
@@ -0,0 +1,121 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const utils = require('../utils')
+
+// ------------------------------------------------------------------------------
+// Helpers
+// ------------------------------------------------------------------------------
+
+// https://github.com/vuejs/vue-next/blob/64e2f4643602c5980361e66674141e61ba60ef70/packages/compiler-core/src/parse.ts#L405
+const SPECIAL_TEMPLATE_DIRECTIVES = new Set([
+  'if',
+  'else',
+  'else-if',
+  'for',
+  'slot'
+])
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'disallow useless attribute on `<template>`',
+      // TODO Switch to `vue3-essential` and `essential` in the major version.
+      // categories: ['vue3-essential', 'essential'],
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/no-useless-template-attributes.html'
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      unexpectedAttr: 'Unexpected useless attribute on `<template>`.',
+      unexpectedDir: 'Unexpected useless directive on `<template>`.'
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    /**
+     * @param {VAttribute | VDirective} attr
+     */
+    function getKeyName(attr) {
+      if (attr.directive) {
+        if (attr.key.name.name !== 'bind') {
+          // no v-bind
+          return null
+        }
+        if (
+          !attr.key.argument ||
+          attr.key.argument.type === 'VExpressionContainer'
+        ) {
+          // unknown
+          return null
+        }
+        return attr.key.argument.name
+      }
+      return attr.key.name
+    }
+
+    /**
+     * @param {VAttribute | VDirective} attr
+     */
+    function isFragmentTemplateAttribute(attr) {
+      if (attr.directive) {
+        const directiveName = attr.key.name.name
+        if (SPECIAL_TEMPLATE_DIRECTIVES.has(directiveName)) {
+          return true
+        }
+        if (directiveName === 'slot-scope') {
+          // `slot-scope` is deprecated in Vue.js 2.6
+          return true
+        }
+        if (directiveName === 'scope') {
+          // `scope` is deprecated in Vue.js 2.5
+          return true
+        }
+      }
+
+      const keyName = getKeyName(attr)
+      if (keyName === 'slot') {
+        // `slot` is deprecated in Vue.js 2.6
+        return true
+      }
+
+      return false
+    }
+
+    return utils.defineTemplateBodyVisitor(context, {
+      /** @param {VStartTag} node */
+      "VElement[name='template'][parent.type='VElement'] > VStartTag"(node) {
+        if (!node.attributes.some(isFragmentTemplateAttribute)) {
+          return
+        }
+
+        for (const attr of node.attributes) {
+          if (isFragmentTemplateAttribute(attr)) {
+            continue
+          }
+          const keyName = getKeyName(attr)
+          if (keyName === 'key') {
+            continue
+          }
+          context.report({
+            node: attr,
+            messageId: attr.directive ? 'unexpectedDir' : 'unexpectedAttr'
+          })
+        }
+      }
+    })
+  }
+}
diff --git a/tests/lib/rules/no-useless-template-attributes.js b/tests/lib/rules/no-useless-template-attributes.js
new file mode 100644
index 000000000..7639b0f33
--- /dev/null
+++ b/tests/lib/rules/no-useless-template-attributes.js
@@ -0,0 +1,156 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('eslint').RuleTester
+const rule = require('../../../lib/rules/no-useless-template-attributes')
+
+const tester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('no-useless-template-attributes', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <template v-if="foo">...</template>
+        <template v-else-if="bar">...</template>
+        <template v-else>...</template>
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <template v-for="e in list">...</template>
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <template v-slot>...</template>
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <CoolButton>
+         <template slot="foo">...</template>
+        </CoolButton>
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <CoolButton>
+         <template slot-scope="foo">...</template>
+        </CoolButton>
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <CoolButton>
+         <template scope="foo">...</template>
+        </CoolButton>
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <!-- ignore -->
+        <template foo="a">...</template>
+        <template :foo="a">...</template>
+        <template v-unknown="a">...</template>
+      </template>
+      `
+    },
+    // not template
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div v-if="foo" class="heading">...</div>
+        <div v-for="i in foo" :bar="i">...</div>
+        <div v-slot:foo="foo" ref="input">...</div>
+        <div v-if="foo" @click="click">...</div>
+      </template>
+      `
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <!-- ✓ GOOD -->
+        <template v-if="foo">...</template>
+        <template v-if="foo">...</template>
+        <template v-else-if="foo">...</template>
+        <template v-else>...</template>
+        <template v-for="i in foo" :key="i">...</template>
+        <template v-slot:foo>...</template>
+        <!-- for Vue<=2.5 -->
+        <template slot="foo">...</template>
+        <template :slot="foo">...</template>
+        <template slot-scope="param">...</template>
+        <!-- for Vue<=2.4 -->
+        <template scope="param">...</template>
+
+        <!-- ✗ BAD -->
+        <template v-if="foo" class="heading">...</template>
+        <template v-for="i in foo" :bar="i">...</template>
+        <template v-slot:foo="foo" ref="input">...</template>
+        <template v-if="foo" @click="click">...</template>
+
+        <!-- Ignore -->
+        <template class="heading">...</template>
+        <template :bar="i">...</template>
+        <template ref="input">...</template>
+        <template @click="click">...</template>
+      </template>
+      `,
+      errors: [
+        {
+          message: 'Unexpected useless attribute on `<template>`.',
+          line: 18,
+          column: 30
+        },
+        {
+          message: 'Unexpected useless directive on `<template>`.',
+          line: 19,
+          column: 36
+        },
+        {
+          message: 'Unexpected useless attribute on `<template>`.',
+          line: 20,
+          column: 36
+        },
+        {
+          message: 'Unexpected useless directive on `<template>`.',
+          line: 21,
+          column: 30
+        }
+      ]
+    }
+  ]
+})

From ae160d93ced1d62af7b6dad2a84e2fa93d47554b Mon Sep 17 00:00:00 2001
From: Yosuke Ota <otameshiyo23@gmail.com>
Date: Tue, 5 Oct 2021 11:07:43 +0900
Subject: [PATCH 4/6] Fix false positives for toRefs in
 `vue/no-unused-properties` rule (#1647)

---
 lib/rules/no-unused-properties.js       | 557 +++------------------
 lib/utils/property-references.js        | 611 ++++++++++++++++++++++++
 tests/lib/rules/no-unused-properties.js | 203 ++++++++
 3 files changed, 879 insertions(+), 492 deletions(-)
 create mode 100644 lib/utils/property-references.js

diff --git a/lib/rules/no-unused-properties.js b/lib/rules/no-unused-properties.js
index 8b6bfa132..722e95c31 100644
--- a/lib/rules/no-unused-properties.js
+++ b/lib/rules/no-unused-properties.js
@@ -11,10 +11,15 @@
 const utils = require('../utils')
 const eslintUtils = require('eslint-utils')
 const { getStyleVariablesContext } = require('../utils/style-variables')
+const {
+  definePropertyReferenceExtractor,
+  mergePropertyReferences
+} = require('../utils/property-references')
 
 /**
  * @typedef {import('../utils').GroupName} GroupName
  * @typedef {import('../utils').VueObjectData} VueObjectData
+ * @typedef {import('../utils/property-references').IPropertyReferences} IPropertyReferences
  */
 
 /**
@@ -36,12 +41,12 @@ const { getStyleVariablesContext } = require('../utils/style-variables')
 
 /**
  * @typedef {object} TemplatePropertiesContainer
- * @property {UsedProperties} usedProperties
+ * @property {IPropertyReferences[]} propertyReferences
  * @property {Set<string>} refNames
  * @typedef {object} VueComponentPropertiesContainer
  * @property {ComponentPropertyData[]} properties
- * @property {UsedProperties} usedProperties
- * @property {UsedProperties} usedPropertiesForProps
+ * @property {IPropertyReferences[]} propertyReferences
+ * @property {IPropertyReferences[]} propertyReferencesForProps
  */
 
 // ------------------------------------------------------------------------------
@@ -118,40 +123,6 @@ function getReferences(references) {
   return references.filter((ref) => ref.variable == null).map((ref) => ref.id)
 }
 
-/**
- * @param {RuleContext} context
- * @param {Identifier} id
- * @returns {FunctionExpression | ArrowFunctionExpression | FunctionDeclaration | null}
- */
-function findFunction(context, id) {
-  const calleeVariable = findVariable(context, id)
-  if (!calleeVariable) {
-    return null
-  }
-  if (calleeVariable.defs.length === 1) {
-    const def = calleeVariable.defs[0]
-    if (def.node.type === 'FunctionDeclaration') {
-      return def.node
-    }
-    if (
-      def.type === 'Variable' &&
-      def.parent.kind === 'const' &&
-      def.node.init
-    ) {
-      if (
-        def.node.init.type === 'FunctionExpression' ||
-        def.node.init.type === 'ArrowFunctionExpression'
-      ) {
-        return def.node.init
-      }
-      if (def.node.init.type === 'Identifier') {
-        return findFunction(context, def.node.init)
-      }
-    }
-  }
-  return null
-}
-
 /**
  * @param {RuleContext} context
  * @param {Identifier} id
@@ -178,312 +149,6 @@ function findExpression(context, id) {
   return id
 }
 
-/**
- * @typedef { (context: RuleContext) => UsedProperties } UsedPropertiesTracker
- * @typedef { { node: CallExpression, index: number } } CallAndParamIndex
- */
-
-/**
- * Collects the used property names.
- */
-class UsedProperties {
-  /**
-   * @param {object} [option]
-   * @param {boolean} [option.unknown]
-   */
-  constructor(option) {
-    /** @type {Record<string, UsedPropertiesTracker[]>} */
-    this.map = Object.create(null)
-    /** @type {CallAndParamIndex[]} */
-    this.calls = []
-    this.unknown = (option && option.unknown) || false
-  }
-
-  /**
-   * @param {string} name
-   */
-  isUsed(name) {
-    if (this.unknown) {
-      // If it is unknown, it is considered used.
-      return true
-    }
-    return Boolean(this.map[name])
-  }
-
-  /**
-   * @param {string} name
-   * @param {UsedPropertiesTracker | null} tracker
-   */
-  addUsed(name, tracker) {
-    const trackers = this.map[name] || (this.map[name] = [])
-    if (tracker) trackers.push(tracker)
-  }
-
-  /**
-   * @param {string} name
-   * @returns {UsedPropertiesTracker}
-   */
-  getPropsTracker(name) {
-    if (this.unknown) {
-      return () => new UsedProperties({ unknown: true })
-    }
-    const trackers = this.map[name] || []
-    return (context) => {
-      const result = new UsedProperties()
-      for (const tracker of trackers) {
-        result.merge(tracker(context))
-      }
-      return result
-    }
-  }
-
-  /**
-   * @param {UsedProperties | null} other
-   */
-  merge(other) {
-    if (!other) {
-      return
-    }
-    this.unknown = this.unknown || other.unknown
-    if (this.unknown) {
-      return
-    }
-    for (const [name, otherTrackers] of Object.entries(other.map)) {
-      const trackers = this.map[name] || (this.map[name] = [])
-      trackers.push(...otherTrackers)
-    }
-    this.calls.push(...other.calls)
-  }
-}
-
-/**
- * Collects the used property names for parameters of the function.
- */
-class ParamsUsedProperties {
-  /**
-   * @param {FunctionDeclaration | FunctionExpression | ArrowFunctionExpression} node
-   * @param {RuleContext} context
-   */
-  constructor(node, context) {
-    this.node = node
-    this.context = context
-    /** @type {UsedProperties[]} */
-    this.params = []
-  }
-
-  /**
-   * @param {number} index
-   * @returns {UsedProperties | null}
-   */
-  getParam(index) {
-    const param = this.params[index]
-    if (param != null) {
-      return param
-    }
-    if (this.node.params[index]) {
-      return (this.params[index] = extractParamOrVerProperties(
-        this.node.params[index],
-        this.context
-      ))
-    }
-    return null
-  }
-}
-/**
- * Extract the used property name from one parameter of the function.
- * @param {Pattern} node
- * @param {RuleContext} context
- * @returns {UsedProperties}
- */
-function extractParamOrVerProperties(node, context) {
-  const result = new UsedProperties()
-
-  while (node.type === 'AssignmentPattern') {
-    node = node.left
-  }
-  if (node.type === 'RestElement' || node.type === 'ArrayPattern') {
-    // cannot check
-    return result
-  }
-  if (node.type === 'ObjectPattern') {
-    result.merge(extractObjectPatternProperties(node))
-    return result
-  }
-  if (node.type !== 'Identifier') {
-    return result
-  }
-  const variable = findVariable(context, node)
-  if (!variable) {
-    return result
-  }
-  for (const reference of variable.references) {
-    const id = reference.identifier
-    result.merge(extractPatternOrThisProperties(id, context, false))
-  }
-
-  return result
-}
-
-/**
- * Extract the used property name from ObjectPattern.
- * @param {ObjectPattern} node
- * @returns {UsedProperties}
- */
-function extractObjectPatternProperties(node) {
-  const result = new UsedProperties()
-  for (const prop of node.properties) {
-    if (prop.type === 'Property') {
-      const name = utils.getStaticPropertyName(prop)
-      if (name) {
-        result.addUsed(name, getObjectPatternPropertyPatternTracker(prop.value))
-      } else {
-        // If cannot trace name, everything is used!
-        result.unknown = true
-        return result
-      }
-    } else {
-      // If use RestElement, everything is used!
-      result.unknown = true
-      return result
-    }
-  }
-  return result
-}
-
-/**
- * Extract the used property name from id.
- * @param {Identifier} node
- * @param {RuleContext} context
- * @returns {UsedProperties}
- */
-function extractIdentifierProperties(node, context) {
-  const result = new UsedProperties()
-  const variable = findVariable(context, node)
-  if (!variable) {
-    return result
-  }
-  for (const reference of variable.references) {
-    const id = reference.identifier
-    result.merge(extractPatternOrThisProperties(id, context, false))
-  }
-  return result
-}
-/**
- * Extract the used property name from pattern or `this`.
- * @param {Identifier | MemberExpression | ChainExpression | ThisExpression} node
- * @param {RuleContext} context
- * @param {boolean} withInTemplate
- * @returns {UsedProperties}
- */
-function extractPatternOrThisProperties(node, context, withInTemplate) {
-  const result = new UsedProperties()
-  const parent = node.parent
-  if (parent.type === 'AssignmentExpression') {
-    if (withInTemplate) {
-      return result
-    }
-    if (parent.right === node && parent.left.type === 'ObjectPattern') {
-      // `({foo} = arg)`
-      result.merge(extractObjectPatternProperties(parent.left))
-    }
-    return result
-  } else if (parent.type === 'VariableDeclarator') {
-    if (withInTemplate) {
-      return result
-    }
-    if (parent.init === node) {
-      if (parent.id.type === 'ObjectPattern') {
-        // `const {foo} = arg`
-        result.merge(extractObjectPatternProperties(parent.id))
-      } else if (parent.id.type === 'Identifier') {
-        // `const foo = arg`
-        result.merge(extractIdentifierProperties(parent.id, context))
-      }
-    }
-    return result
-  } else if (parent.type === 'MemberExpression') {
-    if (parent.object === node) {
-      // `arg.foo`
-      const name = utils.getStaticPropertyName(parent)
-      if (name) {
-        result.addUsed(name, () =>
-          extractPatternOrThisProperties(parent, context, withInTemplate)
-        )
-      } else {
-        result.unknown = true
-      }
-    }
-    return result
-  } else if (parent.type === 'CallExpression') {
-    if (withInTemplate) {
-      return result
-    }
-    const argIndex = parent.arguments.indexOf(node)
-    if (argIndex > -1) {
-      // `foo(arg)`
-      result.calls.push({
-        node: parent,
-        index: argIndex
-      })
-    }
-  } else if (parent.type === 'ChainExpression') {
-    result.merge(
-      extractPatternOrThisProperties(parent, context, withInTemplate)
-    )
-  } else if (
-    parent.type === 'ArrowFunctionExpression' ||
-    parent.type === 'ReturnStatement' ||
-    parent.type === 'VExpressionContainer' ||
-    parent.type === 'Property' ||
-    parent.type === 'ArrayExpression'
-  ) {
-    // Maybe used externally.
-    if (maybeExternalUsed(parent)) {
-      result.unknown = true
-    }
-  }
-  return result
-
-  /**
-   * @param {ASTNode} parentTarget
-   * @returns {boolean}
-   */
-  function maybeExternalUsed(parentTarget) {
-    if (
-      parentTarget.type === 'ReturnStatement' ||
-      parentTarget.type === 'VExpressionContainer'
-    ) {
-      return true
-    }
-    if (parentTarget.type === 'ArrayExpression') {
-      return maybeExternalUsed(parentTarget.parent)
-    }
-    if (parentTarget.type === 'Property') {
-      return maybeExternalUsed(parentTarget.parent.parent)
-    }
-    if (parentTarget.type === 'ArrowFunctionExpression') {
-      return parentTarget.body === node
-    }
-    return false
-  }
-}
-
-/**
- * @param {Pattern} pattern
- * @returns {UsedPropertiesTracker}
- */
-function getObjectPatternPropertyPatternTracker(pattern) {
-  if (pattern.type === 'ObjectPattern') {
-    return () => extractObjectPatternProperties(pattern)
-  }
-  if (pattern.type === 'Identifier') {
-    return (context) => extractIdentifierProperties(pattern, context)
-  } else if (pattern.type === 'AssignmentPattern') {
-    return getObjectPatternPropertyPatternTracker(pattern.left)
-  }
-  return () => new UsedProperties({ unknown: true })
-}
-
 /**
  * Check if the given component property is marked as `@public` in JSDoc comments.
  * @param {ComponentPropertyData} property
@@ -617,29 +282,16 @@ module.exports = {
     const deepData = Boolean(options.deepData)
     const ignorePublicMembers = Boolean(options.ignorePublicMembers)
 
-    /** @type {Map<FunctionDeclaration | FunctionExpression | ArrowFunctionExpression, ParamsUsedProperties>} */
-    const paramsUsedPropertiesMap = new Map()
+    const propertyReferenceExtractor = definePropertyReferenceExtractor(context)
+
     /** @type {TemplatePropertiesContainer} */
     const templatePropertiesContainer = {
-      usedProperties: new UsedProperties(),
+      propertyReferences: [],
       refNames: new Set()
     }
     /** @type {Map<ASTNode, VueComponentPropertiesContainer>} */
     const vueComponentPropertiesContainerMap = new Map()
 
-    /**
-     * @param {FunctionDeclaration | FunctionExpression | ArrowFunctionExpression} node
-     * @returns {ParamsUsedProperties}
-     */
-    function getParamsUsedProperties(node) {
-      let usedProps = paramsUsedPropertiesMap.get(node)
-      if (!usedProps) {
-        usedProps = new ParamsUsedProperties(node, context)
-        paramsUsedPropertiesMap.set(node, usedProps)
-      }
-      return usedProps
-    }
-
     /**
      * @param {ASTNode} node
      * @returns {VueComponentPropertiesContainer}
@@ -649,8 +301,8 @@ module.exports = {
       if (!container) {
         container = {
           properties: [],
-          usedProperties: new UsedProperties(),
-          usedPropertiesForProps: new UsedProperties()
+          propertyReferences: [],
+          propertyReferencesForProps: []
         }
         vueComponentPropertiesContainerMap.set(node, container)
       }
@@ -659,25 +311,18 @@ module.exports = {
     /**
      * @param {string[]} segments
      * @param {Expression} propertyValue
-     * @param {UsedProperties} baseUsedProperties
+     * @param {IPropertyReferences} propertyReferences
      */
     function verifyDataOptionDeepProperties(
       segments,
       propertyValue,
-      baseUsedProperties
+      propertyReferences
     ) {
       let targetExpr = propertyValue
       if (targetExpr.type === 'Identifier') {
         targetExpr = findExpression(context, targetExpr)
       }
       if (targetExpr.type === 'ObjectExpression') {
-        const usedProperties = resolvedUsedProperties(baseUsedProperties, {
-          allowUnknownCall: true
-        })
-        if (usedProperties.unknown) {
-          return
-        }
-
         for (const prop of targetExpr.properties) {
           if (prop.type !== 'Property') {
             continue
@@ -686,7 +331,9 @@ module.exports = {
           if (name == null) {
             continue
           }
-          if (!usedProperties.isUsed(name)) {
+          if (
+            !propertyReferences.hasProperty(name, { unknownCallAsAny: true })
+          ) {
             // report
             context.report({
               node: prop.key,
@@ -702,7 +349,7 @@ module.exports = {
           verifyDataOptionDeepProperties(
             [...segments, name],
             prop.value,
-            usedProperties.getPropsTracker(name)(context)
+            propertyReferences.getNest(name)
           )
         }
       }
@@ -713,20 +360,19 @@ module.exports = {
      */
     function reportUnusedProperties() {
       for (const container of vueComponentPropertiesContainerMap.values()) {
-        const usedProperties = resolvedUsedProperties(container.usedProperties)
-        usedProperties.merge(templatePropertiesContainer.usedProperties)
-        if (usedProperties.unknown) {
-          continue
-        }
+        const propertyReferences = mergePropertyReferences([
+          ...container.propertyReferences,
+          ...templatePropertiesContainer.propertyReferences
+        ])
 
-        const usedPropertiesForProps = resolvedUsedProperties(
-          container.usedPropertiesForProps
+        const propertyReferencesForProps = mergePropertyReferences(
+          container.propertyReferencesForProps
         )
 
         for (const property of container.properties) {
           if (
             property.groupName === 'props' &&
-            usedPropertiesForProps.isUsed(property.name)
+            propertyReferencesForProps.hasProperty(property.name)
           ) {
             // used props
             continue
@@ -744,7 +390,7 @@ module.exports = {
           ) {
             continue
           }
-          if (usedProperties.isUsed(property.name)) {
+          if (propertyReferences.hasProperty(property.name)) {
             // used
             if (
               deepData &&
@@ -755,7 +401,7 @@ module.exports = {
               verifyDataOptionDeepProperties(
                 [property.name],
                 property.property.value,
-                usedProperties.getPropsTracker(property.name)(context)
+                propertyReferences.getNest(property.name)
               )
             }
             continue
@@ -772,65 +418,6 @@ module.exports = {
       }
     }
 
-    /**
-     * @param {UsedProperties | null} usedProps
-     * @param {object} [options]
-     * @param {boolean} [options.allowUnknownCall]
-     * @returns {UsedProperties}
-     */
-    function resolvedUsedProperties(usedProps, options) {
-      const allowUnknownCall = options && options.allowUnknownCall
-      const already = new Map()
-
-      const result = new UsedProperties()
-      for (const up of iterate(usedProps)) {
-        result.merge(up)
-        if (result.unknown) {
-          break
-        }
-      }
-      return result
-
-      /**
-       * @param {UsedProperties | null} usedProps
-       * @returns {IterableIterator<UsedProperties>}
-       */
-      function* iterate(usedProps) {
-        if (!usedProps) {
-          return
-        }
-        yield usedProps
-        for (const call of usedProps.calls) {
-          if (call.node.callee.type !== 'Identifier') {
-            if (allowUnknownCall) {
-              yield new UsedProperties({ unknown: true })
-            }
-            continue
-          }
-          const fnNode = findFunction(context, call.node.callee)
-          if (!fnNode) {
-            if (allowUnknownCall) {
-              yield new UsedProperties({ unknown: true })
-            }
-            continue
-          }
-
-          let alreadyIndexes = already.get(fnNode)
-          if (!alreadyIndexes) {
-            alreadyIndexes = new Set()
-            already.set(fnNode, alreadyIndexes)
-          }
-          if (alreadyIndexes.has(call.index)) {
-            continue
-          }
-          alreadyIndexes.add(call.index)
-          const paramsUsedProps = getParamsUsedProperties(fnNode)
-          const paramUsedProps = paramsUsedProps.getParam(call.index)
-          yield* iterate(paramUsedProps)
-        }
-      }
-    }
-
     /**
      * @param {Expression} node
      * @returns {Property|null}
@@ -899,8 +486,9 @@ module.exports = {
           }
 
           const pattern = target.parent.id
-          const usedProps = extractParamOrVerProperties(pattern, context)
-          container.usedPropertiesForProps.merge(usedProps)
+          const propertyReferences =
+            propertyReferenceExtractor.extractFromPattern(pattern)
+          container.propertyReferencesForProps.push(propertyReferences)
         }
       }),
       utils.defineVueVisitor(context, {
@@ -914,27 +502,9 @@ module.exports = {
             if (watcherOrExpose.groupName === GROUP_WATCHER) {
               const watcher = watcherOrExpose
               // Process `watch: { foo /* <- this */ () {} }`
-              const segments = watcher.name.split('.')
-              container.usedProperties.addUsed(segments[0], (context) => {
-                return buildChainTracker(segments)(context)
-                /**
-                 * @param {string[]} baseSegments
-                 * @returns {UsedPropertiesTracker}
-                 */
-                function buildChainTracker(baseSegments) {
-                  return () => {
-                    const subSegments = baseSegments.slice(1)
-                    const usedProps = new UsedProperties()
-                    if (subSegments.length) {
-                      usedProps.addUsed(
-                        subSegments[0],
-                        buildChainTracker(subSegments)
-                      )
-                    }
-                    return usedProps
-                  }
-                }
-              })
+              container.propertyReferences.push(
+                propertyReferenceExtractor.extractFromPath(watcher.name)
+              )
 
               // Process `watch: { x: 'foo' /* <- this */  }`
               if (watcher.type === 'object') {
@@ -949,7 +519,9 @@ module.exports = {
                     ) {
                       const name = utils.getStringLiteralValue(handlerValueNode)
                       if (name != null) {
-                        container.usedProperties.addUsed(name, null)
+                        container.propertyReferences.push(
+                          propertyReferenceExtractor.extractFromName(name)
+                        )
                       }
                     }
                   }
@@ -957,7 +529,9 @@ module.exports = {
               }
             } else if (watcherOrExpose.groupName === GROUP_EXPOSE) {
               const expose = watcherOrExpose
-              container.usedProperties.addUsed(expose.name, null)
+              container.propertyReferences.push(
+                propertyReferenceExtractor.extractFromName(expose.name)
+              )
             }
           }
           container.properties.push(...utils.iterateProperties(node, groups))
@@ -1008,37 +582,33 @@ module.exports = {
             }
           }
 
-          const paramsUsedProps = getParamsUsedProperties(node)
-          const usedProps = paramsUsedProps.getParam(0)
+          const propertyReferences =
+            propertyReferenceExtractor.extractFromFunctionParam(node, 0)
           const container = getVueComponentPropertiesContainer(vueData.node)
-          container.usedProperties.merge(usedProps)
+          container.propertyReferences.push(propertyReferences)
         },
         onSetupFunctionEnter(node, vueData) {
           const container = getVueComponentPropertiesContainer(vueData.node)
-          const paramsUsedProps = getParamsUsedProperties(node)
-          const paramUsedProps = paramsUsedProps.getParam(0)
-          container.usedPropertiesForProps.merge(paramUsedProps)
+          const propertyReferences =
+            propertyReferenceExtractor.extractFromFunctionParam(node, 0)
+          container.propertyReferencesForProps.push(propertyReferences)
         },
         onRenderFunctionEnter(node, vueData) {
           const container = getVueComponentPropertiesContainer(vueData.node)
 
           // Check for Vue 3.x render
-          const paramsUsedProps = getParamsUsedProperties(node)
-          const ctxUsedProps = paramsUsedProps.getParam(0)
-
-          container.usedPropertiesForProps.merge(ctxUsedProps)
-          if (container.usedPropertiesForProps.unknown) {
-            return
-          }
+          const propertyReferences =
+            propertyReferenceExtractor.extractFromFunctionParam(node, 0)
+          container.propertyReferencesForProps.push(propertyReferences)
 
           if (vueData.functional) {
             // Check for Vue 2.x render & functional
-            const contextUsedProps = resolvedUsedProperties(
-              paramsUsedProps.getParam(1)
+            const propertyReferencesForV2 =
+              propertyReferenceExtractor.extractFromFunctionParam(node, 1)
+
+            container.propertyReferencesForProps.push(
+              propertyReferencesForV2.getNest('props')
             )
-            const tracker = contextUsedProps.getPropsTracker('props')
-            const propUsedProps = tracker(context)
-            container.usedPropertiesForProps.merge(propUsedProps)
           }
         },
         /**
@@ -1050,8 +620,9 @@ module.exports = {
             return
           }
           const container = getVueComponentPropertiesContainer(vueData.node)
-          const usedProps = extractPatternOrThisProperties(node, context, false)
-          container.usedProperties.merge(usedProps)
+          const propertyReferences =
+            propertyReferenceExtractor.extractFromExpression(node, false)
+          container.propertyReferences.push(propertyReferences)
         }
       }),
       {
@@ -1060,9 +631,10 @@ module.exports = {
           const styleVars = getStyleVariablesContext(context)
           if (styleVars) {
             for (const { id } of styleVars.references) {
-              templatePropertiesContainer.usedProperties.addUsed(
-                id.name,
-                (context) => extractPatternOrThisProperties(id, context, true)
+              templatePropertiesContainer.propertyReferences.push(
+                propertyReferenceExtractor.extractFromName(id.name, () =>
+                  propertyReferenceExtractor.extractFromExpression(id, true)
+                )
               )
             }
           }
@@ -1079,9 +651,10 @@ module.exports = {
        */
       VExpressionContainer(node) {
         for (const id of getReferences(node.references)) {
-          templatePropertiesContainer.usedProperties.addUsed(
-            id.name,
-            (context) => extractPatternOrThisProperties(id, context, true)
+          templatePropertiesContainer.propertyReferences.push(
+            propertyReferenceExtractor.extractFromName(id.name, () =>
+              propertyReferenceExtractor.extractFromExpression(id, true)
+            )
           )
         }
       },
diff --git a/lib/utils/property-references.js b/lib/utils/property-references.js
new file mode 100644
index 000000000..2291ea717
--- /dev/null
+++ b/lib/utils/property-references.js
@@ -0,0 +1,611 @@
+/**
+ * @author Yosuke Ota
+ * @copyright 2021 Yosuke Ota. All rights reserved.
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('./index')
+const eslintUtils = require('eslint-utils')
+
+/**
+ * @typedef {'props' | 'data' | 'computed' | 'methods' | 'setup'} Group
+ */
+/**
+ * @typedef {object} IHasPropertyOption
+ * @property {boolean} [unknownCallAsAny]
+ */
+/**
+ * @typedef {object} IPropertyReferences
+ * @property { (name: string, option?: IHasPropertyOption) => boolean } hasProperty
+ * @property { (name: string) => IPropertyReferences } getNest
+ */
+
+// ------------------------------------------------------------------------------
+// Helpers
+// ------------------------------------------------------------------------------
+
+/** @type {IPropertyReferences} */
+const ANY = {
+  hasProperty: () => true,
+  getNest: () => ANY
+}
+
+/** @type {IPropertyReferences} */
+const NEVER = {
+  hasProperty: () => false,
+  getNest: () => NEVER
+}
+
+/**
+ * Find the variable of a given name.
+ * @param {RuleContext} context The rule context
+ * @param {Identifier} node The variable name to find.
+ * @returns {Variable|null} The found variable or null.
+ */
+function findVariable(context, node) {
+  return eslintUtils.findVariable(getScope(context, node), node)
+}
+/**
+ * Gets the scope for the current node
+ * @param {RuleContext} context The rule context
+ * @param {ESNode} currentNode The node to get the scope of
+ * @returns { import('eslint').Scope.Scope } The scope information for this node
+ */
+function getScope(context, currentNode) {
+  // On Program node, get the outermost scope to avoid return Node.js special function scope or ES modules scope.
+  const inner = currentNode.type !== 'Program'
+  const scopeManager = context.getSourceCode().scopeManager
+
+  /** @type {ESNode | null} */
+  let node = currentNode
+  for (; node; node = /** @type {ESNode | null} */ (node.parent)) {
+    const scope = scopeManager.acquire(node, inner)
+
+    if (scope) {
+      if (scope.type === 'function-expression-name') {
+        return scope.childScopes[0]
+      }
+      return scope
+    }
+  }
+
+  return scopeManager.scopes[0]
+}
+
+/**
+ * @param {RuleContext} context
+ * @param {Identifier} id
+ * @returns {FunctionExpression | ArrowFunctionExpression | FunctionDeclaration | null}
+ */
+function findFunction(context, id) {
+  const calleeVariable = findVariable(context, id)
+  if (!calleeVariable) {
+    return null
+  }
+  if (calleeVariable.defs.length === 1) {
+    const def = calleeVariable.defs[0]
+    if (def.node.type === 'FunctionDeclaration') {
+      return def.node
+    }
+    if (
+      def.type === 'Variable' &&
+      def.parent.kind === 'const' &&
+      def.node.init
+    ) {
+      if (
+        def.node.init.type === 'FunctionExpression' ||
+        def.node.init.type === 'ArrowFunctionExpression'
+      ) {
+        return def.node.init
+      }
+      if (def.node.init.type === 'Identifier') {
+        return findFunction(context, def.node.init)
+      }
+    }
+  }
+  return null
+}
+
+// ------------------------------------------------------------------------------
+// Public
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  definePropertyReferenceExtractor,
+  mergePropertyReferences
+}
+
+/**
+ * @param {RuleContext} context The rule context.
+ */
+function definePropertyReferenceExtractor(context) {
+  /** @type {Map<Expression, IPropertyReferences>} */
+  const cacheForExpression = new Map()
+  /** @type {Map<Pattern, IPropertyReferences>} */
+  const cacheForPattern = new Map()
+  /** @type {Map<FunctionExpression | ArrowFunctionExpression | FunctionDeclaration, Map<number, IPropertyReferences>>} */
+  const cacheForFunction = new Map()
+  /** @type {{ toRefNodes: Set<ESNode>, toRefsNodes: Set<ESNode>} | null} */
+  let toRefSet = null
+
+  function getToRefSet() {
+    if (toRefSet) {
+      return toRefSet
+    }
+    const tracker = new eslintUtils.ReferenceTracker(
+      context.getSourceCode().scopeManager.scopes[0]
+    )
+    const toRefNodes = new Set()
+    for (const { node } of tracker.iterateEsmReferences(
+      utils.createCompositionApiTraceMap({
+        [eslintUtils.ReferenceTracker.ESM]: true,
+        toRef: {
+          [eslintUtils.ReferenceTracker.CALL]: true
+        }
+      })
+    )) {
+      toRefNodes.add(node)
+    }
+    const toRefsNodes = new Set()
+    for (const { node } of tracker.iterateEsmReferences(
+      utils.createCompositionApiTraceMap({
+        [eslintUtils.ReferenceTracker.ESM]: true,
+        toRefs: {
+          [eslintUtils.ReferenceTracker.CALL]: true
+        }
+      })
+    )) {
+      toRefsNodes.add(node)
+    }
+
+    return (toRefSet = { toRefNodes, toRefsNodes })
+  }
+
+  /**
+   * Collects the property references for member expr.
+   * @implements IPropertyReferences
+   */
+  class PropertyReferencesForMember {
+    /**
+     *
+     * @param {MemberExpression} node
+     * @param {string} name
+     * @param {boolean} withInTemplate
+     */
+    constructor(node, name, withInTemplate) {
+      this.node = node
+      this.name = name
+      this.withInTemplate = withInTemplate
+    }
+
+    /**
+     * @param {string} name
+     */
+    hasProperty(name) {
+      return name === this.name
+    }
+
+    /**
+     * @param {string} name
+     * @returns {IPropertyReferences}
+     */
+    getNest(name) {
+      return name === this.name
+        ? extractFromExpression(this.node, this.withInTemplate)
+        : NEVER
+    }
+  }
+  /**
+   * Collects the property references for object.
+   * @implements IPropertyReferences
+   */
+  class PropertyReferencesForObject {
+    constructor() {
+      /** @type {Record<string, AssignmentProperty[]>} */
+      this.properties = Object.create(null)
+    }
+
+    /**
+     * @param {string} name
+     */
+    hasProperty(name) {
+      return Boolean(this.properties[name])
+    }
+
+    /**
+     * @param {string} name
+     * @returns {IPropertyReferences}
+     */
+    getNest(name) {
+      const properties = this.properties[name]
+      return properties
+        ? mergePropertyReferences(
+            properties.map((property) => getNestFromPattern(property.value))
+          )
+        : NEVER
+
+      /**
+       * @param {Pattern} pattern
+       * @returns {IPropertyReferences}
+       */
+      function getNestFromPattern(pattern) {
+        if (pattern.type === 'ObjectPattern') {
+          return extractFromObjectPattern(pattern)
+        }
+        if (pattern.type === 'Identifier') {
+          return extractFromIdentifier(pattern)
+        } else if (pattern.type === 'AssignmentPattern') {
+          return getNestFromPattern(pattern.left)
+        }
+        return ANY
+      }
+    }
+  }
+
+  /**
+   * Extract the property references from Expression.
+   * @param {Identifier | MemberExpression | ChainExpression | ThisExpression | CallExpression} node
+   * @param {boolean} withInTemplate
+   * @returns {IPropertyReferences}
+   */
+  function extractFromExpression(node, withInTemplate) {
+    const ref = cacheForExpression.get(node)
+    if (ref) {
+      return ref
+    }
+    cacheForExpression.set(node, ANY)
+    const result = extractWithoutCache()
+    cacheForExpression.set(node, result)
+    return result
+
+    function extractWithoutCache() {
+      const parent = node.parent
+      if (parent.type === 'AssignmentExpression') {
+        if (withInTemplate) {
+          return NEVER
+        }
+        if (parent.right === node) {
+          // `({foo} = arg)`
+          return extractFromPattern(parent.left)
+        }
+        return NEVER
+      } else if (parent.type === 'VariableDeclarator') {
+        if (withInTemplate) {
+          return NEVER
+        }
+        if (parent.init === node) {
+          // `const {foo} = arg`
+          // `const foo = arg`
+          return extractFromPattern(parent.id)
+        }
+        return NEVER
+      } else if (parent.type === 'MemberExpression') {
+        if (parent.object === node) {
+          // `arg.foo`
+          const name = utils.getStaticPropertyName(parent)
+          if (name) {
+            return new PropertyReferencesForMember(parent, name, withInTemplate)
+          } else {
+            return ANY
+          }
+        }
+        return NEVER
+      } else if (parent.type === 'CallExpression') {
+        if (withInTemplate) {
+          return NEVER
+        }
+        const argIndex = parent.arguments.indexOf(node)
+        if (argIndex > -1) {
+          // `foo(arg)`
+          return extractFromCall(parent, argIndex)
+        }
+      } else if (parent.type === 'ChainExpression') {
+        return extractFromExpression(parent, withInTemplate)
+      } else if (
+        parent.type === 'ArrowFunctionExpression' ||
+        parent.type === 'ReturnStatement' ||
+        parent.type === 'VExpressionContainer' ||
+        parent.type === 'Property' ||
+        parent.type === 'ArrayExpression'
+      ) {
+        // Maybe used externally.
+        if (maybeExternalUsed(parent)) {
+          return ANY
+        }
+      }
+      return NEVER
+    }
+
+    /**
+     * @param {ASTNode} parentTarget
+     * @returns {boolean}
+     */
+    function maybeExternalUsed(parentTarget) {
+      if (
+        parentTarget.type === 'ReturnStatement' ||
+        parentTarget.type === 'VExpressionContainer'
+      ) {
+        return true
+      }
+      if (parentTarget.type === 'ArrayExpression') {
+        return maybeExternalUsed(parentTarget.parent)
+      }
+      if (parentTarget.type === 'Property') {
+        return maybeExternalUsed(parentTarget.parent.parent)
+      }
+      if (parentTarget.type === 'ArrowFunctionExpression') {
+        return parentTarget.body === node
+      }
+      return false
+    }
+  }
+
+  /**
+   * Extract the property references from one parameter of the function.
+   * @param {Pattern} node
+   * @returns {IPropertyReferences}
+   */
+  function extractFromPattern(node) {
+    const ref = cacheForPattern.get(node)
+    if (ref) {
+      return ref
+    }
+    cacheForPattern.set(node, ANY)
+    const result = extractWithoutCache()
+    cacheForPattern.set(node, result)
+    return result
+
+    function extractWithoutCache() {
+      while (node.type === 'AssignmentPattern') {
+        node = node.left
+      }
+      if (node.type === 'RestElement' || node.type === 'ArrayPattern') {
+        // cannot check
+        return NEVER
+      }
+      if (node.type === 'ObjectPattern') {
+        return extractFromObjectPattern(node)
+      }
+      if (node.type === 'Identifier') {
+        return extractFromIdentifier(node)
+      }
+      return NEVER
+    }
+  }
+
+  /**
+   * Extract the property references from ObjectPattern.
+   * @param {ObjectPattern} node
+   * @returns {IPropertyReferences}
+   */
+  function extractFromObjectPattern(node) {
+    const refs = new PropertyReferencesForObject()
+    for (const prop of node.properties) {
+      if (prop.type === 'Property') {
+        const name = utils.getStaticPropertyName(prop)
+        if (name) {
+          const list = refs.properties[name] || (refs.properties[name] = [])
+          list.push(prop)
+        } else {
+          // If cannot trace name, everything is used!
+          return ANY
+        }
+      } else {
+        // If use RestElement, everything is used!
+        return ANY
+      }
+    }
+    return refs
+  }
+
+  /**
+   * Extract the property references from id.
+   * @param {Identifier} node
+   * @returns {IPropertyReferences}
+   */
+  function extractFromIdentifier(node) {
+    const variable = findVariable(context, node)
+    if (!variable) {
+      return NEVER
+    }
+    return mergePropertyReferences(
+      variable.references.map((reference) => {
+        const id = reference.identifier
+        return extractFromExpression(id, false)
+      })
+    )
+  }
+
+  /**
+   * Extract the property references from call.
+   * @param {CallExpression} node
+   * @param {number} argIndex
+   * @returns {IPropertyReferences}
+   */
+  function extractFromCall(node, argIndex) {
+    if (node.callee.type !== 'Identifier') {
+      return {
+        hasProperty(_name, options) {
+          return Boolean(options && options.unknownCallAsAny)
+        },
+        getNest: () => ANY
+      }
+    }
+
+    const fnNode = findFunction(context, node.callee)
+    if (!fnNode) {
+      if (argIndex === 0) {
+        if (getToRefSet().toRefNodes.has(node)) {
+          return extractFromToRef(node)
+        } else if (getToRefSet().toRefsNodes.has(node)) {
+          return extractFromToRefs(node)
+        }
+      }
+      return {
+        hasProperty(_name, options) {
+          return Boolean(options && options.unknownCallAsAny)
+        },
+        getNest: () => ANY
+      }
+    }
+
+    return extractFromFunctionParam(fnNode, argIndex)
+  }
+
+  /**
+   * Extract the property references from function param.
+   * @param {FunctionExpression | ArrowFunctionExpression | FunctionDeclaration} node
+   * @param {number} argIndex
+   * @returns {IPropertyReferences}
+   */
+  function extractFromFunctionParam(node, argIndex) {
+    let cacheForIndexes = cacheForFunction.get(node)
+    if (!cacheForIndexes) {
+      cacheForIndexes = new Map()
+      cacheForFunction.set(node, cacheForIndexes)
+    }
+    const ref = cacheForIndexes.get(argIndex)
+    if (ref) {
+      return ref
+    }
+    cacheForIndexes.set(argIndex, NEVER)
+    const arg = node.params[argIndex]
+    if (!arg) {
+      return NEVER
+    }
+    const result = extractFromPattern(arg)
+    cacheForIndexes.set(argIndex, result)
+    return result
+  }
+
+  /**
+   * Extract the property references from path.
+   * @param {string} pathString
+   * @returns {IPropertyReferences}
+   */
+  function extractFromPath(pathString) {
+    return extractFromSegments(pathString.split('.'))
+
+    /**
+     * @param {string[]} segments
+     * @returns {IPropertyReferences}
+     */
+    function extractFromSegments(segments) {
+      if (!segments.length) {
+        return ANY
+      }
+      const segmentName = segments[0]
+      return {
+        hasProperty: (name) => name === segmentName,
+        getNest: (name) =>
+          name === segmentName ? extractFromSegments(segments.slice(1)) : NEVER
+      }
+    }
+  }
+
+  /**
+   * Extract the property references from name.
+   * @param {string} referenceName
+   * @param { () => IPropertyReferences } [getNest]
+   * @returns {IPropertyReferences}
+   */
+  function extractFromName(referenceName, getNest) {
+    return {
+      hasProperty: (name) => name === referenceName,
+      getNest: (name) =>
+        name === referenceName ? (getNest ? getNest() : ANY) : NEVER
+    }
+  }
+
+  /**
+   * Extract the property references from toRef call.
+   * @param {CallExpression} node
+   * @returns {IPropertyReferences}
+   */
+  function extractFromToRef(node) {
+    const nameNode = node.arguments[1]
+    const refName =
+      nameNode &&
+      (nameNode.type === 'Literal' || nameNode.type === 'TemplateLiteral')
+        ? utils.getStringLiteralValue(nameNode)
+        : null
+    if (!refName) {
+      // unknown name
+      return ANY
+    }
+    return extractFromName(refName, () => {
+      return extractFromExpression(node, false).getNest('value')
+    })
+  }
+
+  /**
+   * Extract the property references from toRefs call.
+   * @param {CallExpression} node
+   * @returns {IPropertyReferences}
+   */
+  function extractFromToRefs(node) {
+    const base = extractFromExpression(node, false)
+    return {
+      hasProperty: (name, option) => base.hasProperty(name, option),
+      getNest: (name) => base.getNest(name).getNest('value')
+    }
+  }
+  return {
+    extractFromExpression,
+    extractFromPattern,
+    extractFromFunctionParam,
+    extractFromPath,
+    extractFromName
+  }
+}
+
+/**
+ * @param {IPropertyReferences[]} references
+ * @returns {IPropertyReferences}
+ */
+function mergePropertyReferences(references) {
+  if (references.length === 0) {
+    return NEVER
+  }
+  if (references.length === 1) {
+    return references[0]
+  }
+  return new PropertyReferencesForMerge(references)
+}
+
+/**
+ * Collects the property references for merge.
+ * @implements IPropertyReferences
+ */
+class PropertyReferencesForMerge {
+  /**
+   * @param {IPropertyReferences[]} references
+   */
+  constructor(references) {
+    this.references = references
+  }
+
+  /**
+   * @param {string} name
+   * @param {IHasPropertyOption} [option]
+   */
+  hasProperty(name, option) {
+    return this.references.some((ref) => ref.hasProperty(name, option))
+  }
+
+  /**
+   * @param {string} name
+   * @returns {IPropertyReferences}
+   */
+  getNest(name) {
+    /** @type {IPropertyReferences[]} */
+    const nest = []
+    for (const ref of this.references) {
+      if (ref.hasProperty(name)) {
+        nest.push(ref.getNest(name))
+      }
+    }
+    return mergePropertyReferences(nest)
+  }
+}
diff --git a/tests/lib/rules/no-unused-properties.js b/tests/lib/rules/no-unused-properties.js
index 164e562ab..de535bd25 100644
--- a/tests/lib/rules/no-unused-properties.js
+++ b/tests/lib/rules/no-unused-properties.js
@@ -1594,6 +1594,70 @@ tester.run('no-unused-properties', rule, {
           }
         </style>
         `
+    },
+
+    // toRefs
+    {
+      // https://github.com/vuejs/eslint-plugin-vue/issues/1643
+      filename: 'test.vue',
+      parserOptions: {
+        parser: '@typescript-eslint/parser'
+      },
+      code: `
+      <template>
+        <span v-for="(item, index) of pages" :key="index" @click="changePage(item)">
+          {{ item }}
+        </span>
+      </template>
+
+      <script setup lang="ts">
+      import {
+        computed,
+        defineProps,
+        toRefs,
+        withDefaults,
+        defineEmits,
+        ComputedRef,
+      } from 'vue';
+      import { getPagesOnPagination } from '@/libs/pagination';
+
+      const props = withDefaults(
+        defineProps<{
+          currentPage: number;
+          totalRows: number;
+          rowsPerPage: number;
+        }>(),
+        {
+          currentPage: 1,
+          totalRows: 100,
+          rowsPerPage: 10,
+        }
+      );
+      const { currentPage, totalRows, rowsPerPage } = toRefs(props);
+
+      const totalPages = computed(() =>
+        Math.ceil(totalRows.value / rowsPerPage.value)
+      );
+
+      const pages: ComputedRef<(number | '...')[]> = computed(() =>
+        getPagesOnPagination(currentPage.value, totalPages.value)
+      );
+
+      const emit = defineEmits<{
+        (e: 'changePage', page: number): void;
+      }>();
+
+      function changePage(page: number | '...') {
+        if (page === '...') {
+          return;
+        }
+        emit('changePage', page);
+      }
+      </script>
+
+      <style lang="scss" scoped>
+      //
+      </style>`
     }
   ],
 
@@ -2507,6 +2571,145 @@ tester.run('no-unused-properties', rule, {
         "'f' of computed property found, but never used.",
         "'h' of method found, but never used."
       ]
+    },
+
+    // toRef, toRefs
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        import {toRefs} from 'vue'
+
+        export default {
+          props: ['foo', 'bar'],
+          setup(props) {
+            const {foo} = toRefs(props)
+          },
+        }
+      </script>
+      `,
+      errors: ["'bar' of property found, but never used."]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        import {toRef} from 'vue'
+
+        export default {
+          props: ['foo', 'bar'],
+          setup(props) {
+            const foo = toRef(props, 'foo')
+          },
+        }
+      </script>
+      `,
+      errors: ["'bar' of property found, but never used."]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        import {toRefs} from 'vue'
+
+        export default {
+          data() {
+            return {
+              foo: {
+                bar: {
+                  a: 1
+                },
+                baz: {
+                  b: 1
+                }
+              }
+            }
+          },
+          methods: {
+            m () {
+              const {foo} = toRefs(this)
+              f(foo.value.bar)
+            }
+          }
+        }
+      </script>
+      `,
+      options: deepDataOptions,
+      errors: ["'foo.baz' of data found, but never used."]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        import {toRefs} from 'vue'
+
+        export default {
+          data() {
+            return {
+              foo: {
+                bar: {
+                  a: 1,
+                  b: 1,
+                },
+                baz: {
+                  a: 1
+                }
+              }
+            }
+          },
+          methods: {
+            m () {
+              const {bar, baz} = toRefs(this.foo)
+              f(bar.value.a)
+              f(bar.unknown.b)
+              f(bar.b)
+            }
+          }
+        }
+      </script>
+      `,
+      options: deepDataOptions,
+      errors: [
+        "'foo.bar.b' of data found, but never used.",
+        "'foo.baz.a' of data found, but never used."
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        import {toRef} from 'vue'
+
+        export default {
+          data() {
+            return {
+              foo: {
+                bar: {
+                  a: 1,
+                  b: 1,
+                },
+                baz: {
+                  a: 1
+                }
+              }
+            }
+          },
+          methods: {
+            m () {
+              const bar = toRef(this.foo, 'bar')
+              f(bar.value.a)
+              f(bar.unknown.b)
+              f(bar.b)
+            }
+          }
+        }
+      </script>
+      `,
+      options: deepDataOptions,
+      errors: [
+        "'foo.bar.b' of data found, but never used.",
+        "'foo.baz' of data found, but never used."
+      ]
     }
   ]
 })

From 5788883670fc6273512796d5be8b3f2730b43ac0 Mon Sep 17 00:00:00 2001
From: Yosuke Ota <otameshiyo23@gmail.com>
Date: Tue, 5 Oct 2021 11:15:59 +0900
Subject: [PATCH 5/6] Fix unable to autofix event name with `update:`. (#1648)

---
 lib/rules/v-on-event-hyphenation.js       | 31 ++++-----
 tests/lib/rules/v-on-event-hyphenation.js | 80 +++++++++++++++++++++++
 2 files changed, 96 insertions(+), 15 deletions(-)

diff --git a/lib/rules/v-on-event-hyphenation.js b/lib/rules/v-on-event-hyphenation.js
index 60823e013..7ef07f1d8 100644
--- a/lib/rules/v-on-event-hyphenation.js
+++ b/lib/rules/v-on-event-hyphenation.js
@@ -51,15 +51,16 @@ module.exports = {
     const ignoredAttributes = (optionsPayload && optionsPayload.ignore) || []
     const autofix = Boolean(optionsPayload && optionsPayload.autofix)
 
-    const caseConverter = casing.getExactConverter(
+    const caseConverter = casing.getConverter(
       useHyphenated ? 'kebab-case' : 'camelCase'
     )
 
     /**
      * @param {VDirective} node
+     * @param {VIdentifier} argument
      * @param {string} name
      */
-    function reportIssue(node, name) {
+    function reportIssue(node, argument, name) {
       const text = sourceCode.getText(node.key)
 
       context.report({
@@ -71,13 +72,14 @@ module.exports = {
         data: {
           text
         },
-        fix: autofix
-          ? (fixer) =>
-              fixer.replaceText(
-                node.key,
-                text.replace(name, caseConverter(name))
-              )
-          : null
+        fix:
+          autofix &&
+          // It cannot be converted in snake_case.
+          !name.includes('_')
+            ? (fixer) => {
+                return fixer.replaceText(argument, caseConverter(name))
+              }
+            : null
       })
     }
 
@@ -99,14 +101,13 @@ module.exports = {
     return utils.defineTemplateBodyVisitor(context, {
       "VAttribute[directive=true][key.name.name='on']"(node) {
         if (!utils.isCustomComponent(node.parent.parent)) return
-
-        const name =
-          node.key.argument &&
-          node.key.argument.type === 'VIdentifier' &&
-          node.key.argument.rawName
+        if (!node.key.argument || node.key.argument.type !== 'VIdentifier') {
+          return
+        }
+        const name = node.key.argument.rawName
         if (!name || isIgnoredAttribute(name)) return
 
-        reportIssue(node, name)
+        reportIssue(node, node.key.argument, name)
       }
     })
   }
diff --git a/tests/lib/rules/v-on-event-hyphenation.js b/tests/lib/rules/v-on-event-hyphenation.js
index c77449971..087e5d00a 100644
--- a/tests/lib/rules/v-on-event-hyphenation.js
+++ b/tests/lib/rules/v-on-event-hyphenation.js
@@ -102,6 +102,86 @@ tester.run('v-on-event-hyphenation', rule, {
       </template>
       `,
       errors: ["v-on event 'v-on:custom-event' can't be hyphenated."]
+    },
+    {
+      code: `
+      <template>
+        <VueComponent @update:modelValue="foo"/>
+        <VueComponent @update:model-value="foo"/>
+      </template>
+      `,
+      options: ['always', { autofix: true }],
+      output: `
+      <template>
+        <VueComponent @update:model-value="foo"/>
+        <VueComponent @update:model-value="foo"/>
+      </template>
+      `,
+      errors: ["v-on event '@update:modelValue' must be hyphenated."]
+    },
+    {
+      code: `
+      <template>
+        <VueComponent @update:modelValue="foo"/>
+        <VueComponent @update:model-value="foo"/>
+      </template>
+      `,
+      options: ['never', { autofix: true }],
+      output: `
+      <template>
+        <VueComponent @update:modelValue="foo"/>
+        <VueComponent @update:modelValue="foo"/>
+      </template>
+      `,
+      errors: ["v-on event '@update:model-value' can't be hyphenated."]
+    },
+    {
+      code: `
+      <template>
+        <VueComponent @upDate:modelValue="foo"/>
+        <VueComponent @up-date:modelValue="foo"/>
+        <VueComponent @upDate:model-value="foo"/>
+        <VueComponent @up-date:model-value="foo"/>
+      </template>
+      `,
+      options: ['always', { autofix: true }],
+      output: `
+      <template>
+        <VueComponent @up-date:model-value="foo"/>
+        <VueComponent @up-date:model-value="foo"/>
+        <VueComponent @up-date:model-value="foo"/>
+        <VueComponent @up-date:model-value="foo"/>
+      </template>
+      `,
+      errors: [
+        "v-on event '@upDate:modelValue' must be hyphenated.",
+        "v-on event '@up-date:modelValue' must be hyphenated.",
+        "v-on event '@upDate:model-value' must be hyphenated."
+      ]
+    },
+    {
+      code: `
+      <template>
+        <VueComponent @upDate:modelValue="foo"/>
+        <VueComponent @up-date:modelValue="foo"/>
+        <VueComponent @upDate:model-value="foo"/>
+        <VueComponent @up-date:model-value="foo"/>
+      </template>
+      `,
+      options: ['never', { autofix: true }],
+      output: `
+      <template>
+        <VueComponent @upDate:modelValue="foo"/>
+        <VueComponent @upDate:modelValue="foo"/>
+        <VueComponent @upDate:modelValue="foo"/>
+        <VueComponent @upDate:modelValue="foo"/>
+      </template>
+      `,
+      errors: [
+        "v-on event '@up-date:modelValue' can't be hyphenated.",
+        "v-on event '@upDate:model-value' can't be hyphenated.",
+        "v-on event '@up-date:model-value' can't be hyphenated."
+      ]
     }
   ]
 })

From 1ece73e4470f1de1e3691529e4ceadbeecd6fd01 Mon Sep 17 00:00:00 2001
From: yosuke ota <otameshiyo23@gmail.com>
Date: Tue, 5 Oct 2021 11:24:38 +0900
Subject: [PATCH 6/6] 7.19.0

---
 docs/rules/no-restricted-class.md            | 7 +++++--
 docs/rules/no-useless-template-attributes.md | 7 +++++--
 package.json                                 | 2 +-
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/docs/rules/no-restricted-class.md b/docs/rules/no-restricted-class.md
index c7aebce6b..267bfebaa 100644
--- a/docs/rules/no-restricted-class.md
+++ b/docs/rules/no-restricted-class.md
@@ -3,13 +3,12 @@ pageClass: rule-details
 sidebarDepth: 0
 title: vue/no-restricted-class
 description: disallow specific classes in Vue components
+since: v7.19.0
 ---
 # vue/no-restricted-class
 
 > disallow specific classes in Vue components
 
-- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
-
 ## :book: Rule Details
 
 This rule lets you specify a list of classes that you don't want to allow in your templates.
@@ -73,6 +72,10 @@ export default {
 ```
 :::
 
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.19.0
+
 ## :mag: Implementation
 
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-restricted-class.js)
diff --git a/docs/rules/no-useless-template-attributes.md b/docs/rules/no-useless-template-attributes.md
index ec24eb70f..c6b71027d 100644
--- a/docs/rules/no-useless-template-attributes.md
+++ b/docs/rules/no-useless-template-attributes.md
@@ -3,13 +3,12 @@ pageClass: rule-details
 sidebarDepth: 0
 title: vue/no-useless-template-attributes
 description: disallow useless attribute on `<template>`
+since: v7.19.0
 ---
 # vue/no-useless-template-attributes
 
 > disallow useless attribute on `<template>`
 
-- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
-
 ## :book: Rule Details
 
 This rule to prevent any useless attribute on `<template>` tags.
@@ -58,6 +57,10 @@ Nothing.
 
 [vue/no-lone-template]: ./no-lone-template.md
 
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.19.0
+
 ## :mag: Implementation
 
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-useless-template-attributes.js)
diff --git a/package.json b/package.json
index fc5b22a13..16e6ead6e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-vue",
-  "version": "7.18.0",
+  "version": "7.19.0",
   "description": "Official ESLint plugin for Vue.js",
   "main": "lib/index.js",
   "scripts": {