diff --git a/.markdownlint.yml b/.markdownlint.yml
index cb76e21d5..b300725cc 100644
--- a/.markdownlint.yml
+++ b/.markdownlint.yml
@@ -5,6 +5,8 @@ no-inline-html:
     - badge
     - eslint-code-block
     - sup
+    - rules-table
+    - span
 
 # enforce consistency
 code-block-style:
diff --git a/docs/.vuepress/components/rules-table.vue b/docs/.vuepress/components/rules-table.vue
new file mode 100644
index 000000000..29d31c4c6
--- /dev/null
+++ b/docs/.vuepress/components/rules-table.vue
@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <div v-if="kindMarks.length > 1" class="filter-tool">
+      Highlight:
+      <label v-for="kindMark in kindMarks" :key="kindMark">
+        <input type="checkbox" :value="kindMark" v-model="checkedKindMarks" />
+        <span class="emoji">{{ kindMark }}</span>
+      </label>
+    </div>
+    <div class="table-root" ref="tableRoot">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+const emojis = ['3️⃣', '2️⃣', '⚠️']
+
+export default {
+  data() {
+    return {
+      kindMarks: [],
+      checkedKindMarks: []
+    }
+  },
+  mounted() {
+    this.setup()
+  },
+  watch: {
+    checkedKindMarks: {
+      handler: 'filterTable',
+      deep: true
+    }
+  },
+  methods: {
+    setup() {
+      const kindMarks = new Set()
+      const table = this.getTable()
+      for (const row of table.rows) {
+        row.cells[3].classList.add('emoji')
+        const trimmed = row.cells[3].textContent.trim()
+        if (!trimmed) {
+          continue
+        }
+        const chars =
+          trimmed.match(new RegExp(`${emojis.join('|')}|.`, 'ug')) || []
+        for (const mark of chars) {
+          kindMarks.add(mark)
+        }
+      }
+      this.kindMarks = [...kindMarks]
+    },
+    getTable() {
+      return this.$refs.tableRoot.querySelector('table')
+    },
+    filterTable() {
+      const table = this.getTable()
+      if (this.checkedKindMarks.length === 0) {
+        table.classList.remove('highlighting')
+        return
+      }
+      table.classList.add('highlighting')
+      for (const row of table.rows) {
+        if (row.cells[0].tagName === 'TH') {
+          row.classList.add('highlight')
+          continue
+        }
+        const rowMarks = row.cells[3].textContent
+        const highlight = this.checkedKindMarks.every((mark) =>
+          rowMarks.includes(mark)
+        )
+        row.classList.toggle('highlight', highlight)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.table-root ::v-deep .highlighting tr {
+  opacity: 0.3;
+}
+.table-root ::v-deep .highlighting .highlight {
+  opacity: 1;
+}
+.filter-tool label {
+  display: inline-flex;
+  margin-right: 0.5ex;
+}
+</style>
diff --git a/docs/.vuepress/styles/index.styl b/docs/.vuepress/styles/index.styl
index 48680bbf3..724c68247 100644
--- a/docs/.vuepress/styles/index.styl
+++ b/docs/.vuepress/styles/index.styl
@@ -18,3 +18,9 @@
     }
   }
 }
+
+.theme-container.rule-list .theme-default-content
+  max-width: 1280px;
+
+.emoji
+  font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji", "Noto Color Emoji", "Noto Emoji", sans-serif
diff --git a/docs/rules/README.md b/docs/rules/README.md
index 26ce0e59d..9a54292c9 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -1,5 +1,6 @@
 ---
 sidebarDepth: 0
+pageClass: rule-list
 ---
 
 # Available rules
@@ -12,282 +13,172 @@ sidebarDepth: 0
   :bulb: Indicates that some problems reported by the rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
 :::
 
-## Base Rules (Enabling Correct ESLint Parsing)
-
-Enforce all the rules in this category, as well as all higher priority rules, with:
-
-```json
-{
-  "extends": "plugin:vue/base"
-}
-```
-
-| Rule ID | Description |    |
-|:--------|:------------|:---|
-| [vue/comment-directive](./comment-directive.md) | support comment-directives in `<template>` |  |
-| [vue/jsx-uses-vars](./jsx-uses-vars.md) | prevent variables used in JSX to be marked as unused |  |
-| [vue/script-setup-uses-vars](./script-setup-uses-vars.md) | prevent `<script setup>` variables used in `<template>` to be marked as unused |  |
-
-## Priority A: Essential (Error Prevention) <badge text="for Vue.js 3.x" vertical="middle">for Vue.js 3.x</badge>
-
-Enforce all the rules in this category, as well as all higher priority rules, with:
-
-```json
-{
-  "extends": "plugin:vue/vue3-essential"
-}
-```
-
-| Rule ID | Description |    |
-|:--------|:------------|:---|
-| [vue/multi-word-component-names](./multi-word-component-names.md) | require component names to be always multi-word |  |
-| [vue/no-arrow-functions-in-watch](./no-arrow-functions-in-watch.md) | disallow using arrow functions to define watcher |  |
-| [vue/no-async-in-computed-properties](./no-async-in-computed-properties.md) | disallow asynchronous actions in computed properties |  |
-| [vue/no-computed-properties-in-data](./no-computed-properties-in-data.md) | disallow accessing computed properties in `data`. |  |
-| [vue/no-deprecated-data-object-declaration](./no-deprecated-data-object-declaration.md) | disallow using deprecated object declaration on data (in Vue.js 3.0.0+) | :wrench: |
-| [vue/no-deprecated-destroyed-lifecycle](./no-deprecated-destroyed-lifecycle.md) | disallow using deprecated `destroyed` and `beforeDestroy` lifecycle hooks (in Vue.js 3.0.0+) | :wrench: |
-| [vue/no-deprecated-dollar-listeners-api](./no-deprecated-dollar-listeners-api.md) | disallow using deprecated `$listeners` (in Vue.js 3.0.0+) |  |
-| [vue/no-deprecated-dollar-scopedslots-api](./no-deprecated-dollar-scopedslots-api.md) | disallow using deprecated `$scopedSlots` (in Vue.js 3.0.0+) | :wrench: |
-| [vue/no-deprecated-events-api](./no-deprecated-events-api.md) | disallow using deprecated events api (in Vue.js 3.0.0+) |  |
-| [vue/no-deprecated-filter](./no-deprecated-filter.md) | disallow using deprecated filters syntax (in Vue.js 3.0.0+) |  |
-| [vue/no-deprecated-functional-template](./no-deprecated-functional-template.md) | disallow using deprecated the `functional` template (in Vue.js 3.0.0+) |  |
-| [vue/no-deprecated-html-element-is](./no-deprecated-html-element-is.md) | disallow using deprecated the `is` attribute on HTML elements (in Vue.js 3.0.0+) |  |
-| [vue/no-deprecated-inline-template](./no-deprecated-inline-template.md) | disallow using deprecated `inline-template` attribute (in Vue.js 3.0.0+) |  |
-| [vue/no-deprecated-props-default-this](./no-deprecated-props-default-this.md) | disallow deprecated `this` access in props default function (in Vue.js 3.0.0+) |  |
-| [vue/no-deprecated-router-link-tag-prop](./no-deprecated-router-link-tag-prop.md) | disallow using deprecated `tag` property on `RouterLink` (in Vue.js 3.0.0+) |  |
-| [vue/no-deprecated-scope-attribute](./no-deprecated-scope-attribute.md) | disallow deprecated `scope` attribute (in Vue.js 2.5.0+) | :wrench: |
-| [vue/no-deprecated-slot-attribute](./no-deprecated-slot-attribute.md) | disallow deprecated `slot` attribute (in Vue.js 2.6.0+) | :wrench: |
-| [vue/no-deprecated-slot-scope-attribute](./no-deprecated-slot-scope-attribute.md) | disallow deprecated `slot-scope` attribute (in Vue.js 2.6.0+) | :wrench: |
-| [vue/no-deprecated-v-bind-sync](./no-deprecated-v-bind-sync.md) | disallow use of deprecated `.sync` modifier on `v-bind` directive (in Vue.js 3.0.0+) | :wrench: |
-| [vue/no-deprecated-v-is](./no-deprecated-v-is.md) | disallow deprecated `v-is` directive (in Vue.js 3.1.0+) | :wrench: |
-| [vue/no-deprecated-v-on-native-modifier](./no-deprecated-v-on-native-modifier.md) | disallow using deprecated `.native` modifiers (in Vue.js 3.0.0+) |  |
-| [vue/no-deprecated-v-on-number-modifiers](./no-deprecated-v-on-number-modifiers.md) | disallow using deprecated number (keycode) modifiers (in Vue.js 3.0.0+) | :wrench: |
-| [vue/no-deprecated-vue-config-keycodes](./no-deprecated-vue-config-keycodes.md) | disallow using deprecated `Vue.config.keyCodes` (in Vue.js 3.0.0+) |  |
-| [vue/no-dupe-keys](./no-dupe-keys.md) | disallow duplication of field names |  |
-| [vue/no-dupe-v-else-if](./no-dupe-v-else-if.md) | disallow duplicate conditions in `v-if` / `v-else-if` chains |  |
-| [vue/no-duplicate-attributes](./no-duplicate-attributes.md) | disallow duplication of attributes |  |
-| [vue/no-export-in-script-setup](./no-export-in-script-setup.md) | disallow `export` in `<script setup>` |  |
-| [vue/no-lifecycle-after-await](./no-lifecycle-after-await.md) | disallow asynchronously registered lifecycle hooks |  |
-| [vue/no-mutating-props](./no-mutating-props.md) | disallow mutation of component props |  |
-| [vue/no-parsing-error](./no-parsing-error.md) | disallow parsing errors in `<template>` |  |
-| [vue/no-ref-as-operand](./no-ref-as-operand.md) | disallow use of value wrapped by `ref()` (Composition API) as an operand | :wrench: |
-| [vue/no-reserved-keys](./no-reserved-keys.md) | disallow overwriting reserved keys |  |
-| [vue/no-reserved-props](./no-reserved-props.md) | disallow reserved names in props |  |
-| [vue/no-setup-props-destructure](./no-setup-props-destructure.md) | disallow destructuring of `props` passed to `setup` |  |
-| [vue/no-shared-component-data](./no-shared-component-data.md) | enforce component's data property to be a function | :wrench: |
-| [vue/no-side-effects-in-computed-properties](./no-side-effects-in-computed-properties.md) | disallow side effects in computed properties |  |
-| [vue/no-template-key](./no-template-key.md) | disallow `key` attribute on `<template>` |  |
-| [vue/no-textarea-mustache](./no-textarea-mustache.md) | disallow mustaches in `<textarea>` |  |
-| [vue/no-unused-components](./no-unused-components.md) | disallow registering components that are not used inside templates |  |
-| [vue/no-unused-vars](./no-unused-vars.md) | disallow unused variable definitions of v-for directives or scope attributes | :bulb: |
-| [vue/no-use-v-if-with-v-for](./no-use-v-if-with-v-for.md) | disallow use v-if on the same element as v-for |  |
-| [vue/no-useless-template-attributes](./no-useless-template-attributes.md) | disallow useless attribute on `<template>` |  |
-| [vue/no-v-for-template-key-on-child](./no-v-for-template-key-on-child.md) | disallow key of `<template v-for>` placed on child elements |  |
-| [vue/no-watch-after-await](./no-watch-after-await.md) | disallow asynchronously registered `watch` |  |
-| [vue/require-component-is](./require-component-is.md) | require `v-bind:is` of `<component>` elements |  |
-| [vue/require-prop-type-constructor](./require-prop-type-constructor.md) | require prop type to be a constructor | :wrench: |
-| [vue/require-render-return](./require-render-return.md) | enforce render function to always return value |  |
-| [vue/require-slots-as-functions](./require-slots-as-functions.md) | enforce properties of `$slots` to be used as a function |  |
-| [vue/require-toggle-inside-transition](./require-toggle-inside-transition.md) | require control the display of the content inside `<transition>` |  |
-| [vue/require-v-for-key](./require-v-for-key.md) | require `v-bind:key` with `v-for` directives |  |
-| [vue/require-valid-default-prop](./require-valid-default-prop.md) | enforce props default values to be valid |  |
-| [vue/return-in-computed-property](./return-in-computed-property.md) | enforce that a return statement is present in computed property |  |
-| [vue/return-in-emits-validator](./return-in-emits-validator.md) | enforce that a return statement is present in emits validator |  |
-| [vue/use-v-on-exact](./use-v-on-exact.md) | enforce usage of `exact` modifier on `v-on` |  |
-| [vue/valid-define-emits](./valid-define-emits.md) | enforce valid `defineEmits` compiler macro |  |
-| [vue/valid-define-props](./valid-define-props.md) | enforce valid `defineProps` compiler macro |  |
-| [vue/valid-next-tick](./valid-next-tick.md) | enforce valid `nextTick` function calls | :wrench::bulb: |
-| [vue/valid-template-root](./valid-template-root.md) | enforce valid template root |  |
-| [vue/valid-v-bind](./valid-v-bind.md) | enforce valid `v-bind` directives |  |
-| [vue/valid-v-cloak](./valid-v-cloak.md) | enforce valid `v-cloak` directives |  |
-| [vue/valid-v-else-if](./valid-v-else-if.md) | enforce valid `v-else-if` directives |  |
-| [vue/valid-v-else](./valid-v-else.md) | enforce valid `v-else` directives |  |
-| [vue/valid-v-for](./valid-v-for.md) | enforce valid `v-for` directives |  |
-| [vue/valid-v-html](./valid-v-html.md) | enforce valid `v-html` directives |  |
-| [vue/valid-v-if](./valid-v-if.md) | enforce valid `v-if` directives |  |
-| [vue/valid-v-is](./valid-v-is.md) | enforce valid `v-is` directives |  |
-| [vue/valid-v-memo](./valid-v-memo.md) | enforce valid `v-memo` directives |  |
-| [vue/valid-v-model](./valid-v-model.md) | enforce valid `v-model` directives |  |
-| [vue/valid-v-on](./valid-v-on.md) | enforce valid `v-on` directives |  |
-| [vue/valid-v-once](./valid-v-once.md) | enforce valid `v-once` directives |  |
-| [vue/valid-v-pre](./valid-v-pre.md) | enforce valid `v-pre` directives |  |
-| [vue/valid-v-show](./valid-v-show.md) | enforce valid `v-show` directives |  |
-| [vue/valid-v-slot](./valid-v-slot.md) | enforce valid `v-slot` directives |  |
-| [vue/valid-v-text](./valid-v-text.md) | enforce valid `v-text` directives |  |
-
-## Priority B: Strongly Recommended (Improving Readability) <badge text="for Vue.js 3.x" vertical="middle">for Vue.js 3.x</badge>
-
-Enforce all the rules in this category, as well as all higher priority rules, with:
-
-```json
-{
-  "extends": "plugin:vue/vue3-strongly-recommended"
-}
-```
-
-| Rule ID | Description |    |
-|:--------|:------------|:---|
-| [vue/attribute-hyphenation](./attribute-hyphenation.md) | enforce attribute naming style on custom components in template | :wrench: |
-| [vue/component-definition-name-casing](./component-definition-name-casing.md) | enforce specific casing for component definition name | :wrench: |
-| [vue/first-attribute-linebreak](./first-attribute-linebreak.md) | enforce the location of first attribute | :wrench: |
-| [vue/html-closing-bracket-newline](./html-closing-bracket-newline.md) | require or disallow a line break before tag's closing brackets | :wrench: |
-| [vue/html-closing-bracket-spacing](./html-closing-bracket-spacing.md) | require or disallow a space before tag's closing brackets | :wrench: |
-| [vue/html-end-tags](./html-end-tags.md) | enforce end tag style | :wrench: |
-| [vue/html-indent](./html-indent.md) | enforce consistent indentation in `<template>` | :wrench: |
-| [vue/html-quotes](./html-quotes.md) | enforce quotes style of HTML attributes | :wrench: |
-| [vue/html-self-closing](./html-self-closing.md) | enforce self-closing style | :wrench: |
-| [vue/max-attributes-per-line](./max-attributes-per-line.md) | enforce the maximum number of attributes per line | :wrench: |
-| [vue/multiline-html-element-content-newline](./multiline-html-element-content-newline.md) | require a line break before and after the contents of a multiline element | :wrench: |
-| [vue/mustache-interpolation-spacing](./mustache-interpolation-spacing.md) | enforce unified spacing in mustache interpolations | :wrench: |
-| [vue/no-multi-spaces](./no-multi-spaces.md) | disallow multiple spaces | :wrench: |
-| [vue/no-spaces-around-equal-signs-in-attribute](./no-spaces-around-equal-signs-in-attribute.md) | disallow spaces around equal signs in attribute | :wrench: |
-| [vue/no-template-shadow](./no-template-shadow.md) | disallow variable declarations from shadowing variables declared in the outer scope |  |
-| [vue/one-component-per-file](./one-component-per-file.md) | enforce that each component should be in its own file |  |
-| [vue/prop-name-casing](./prop-name-casing.md) | enforce specific casing for the Prop name in Vue components |  |
-| [vue/require-default-prop](./require-default-prop.md) | require default value for props |  |
-| [vue/require-explicit-emits](./require-explicit-emits.md) | require `emits` option with name triggered by `$emit()` | :bulb: |
-| [vue/require-prop-types](./require-prop-types.md) | require type definitions in props |  |
-| [vue/singleline-html-element-content-newline](./singleline-html-element-content-newline.md) | require a line break before and after the contents of a singleline element | :wrench: |
-| [vue/v-bind-style](./v-bind-style.md) | enforce `v-bind` directive style | :wrench: |
-| [vue/v-on-event-hyphenation](./v-on-event-hyphenation.md) | enforce v-on event naming style on custom components in template | :wrench: |
-| [vue/v-on-style](./v-on-style.md) | enforce `v-on` directive style | :wrench: |
-| [vue/v-slot-style](./v-slot-style.md) | enforce `v-slot` directive style | :wrench: |
-
-## Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead) <badge text="for Vue.js 3.x" vertical="middle">for Vue.js 3.x</badge>
-
-Enforce all the rules in this category, as well as all higher priority rules, with:
-
-```json
-{
-  "extends": "plugin:vue/vue3-recommended"
-}
-```
-
-| Rule ID | Description |    |
-|:--------|:------------|:---|
-| [vue/attributes-order](./attributes-order.md) | enforce order of attributes | :wrench: |
-| [vue/component-tags-order](./component-tags-order.md) | enforce order of component top-level elements | :wrench: |
-| [vue/no-lone-template](./no-lone-template.md) | disallow unnecessary `<template>` |  |
-| [vue/no-multiple-slot-args](./no-multiple-slot-args.md) | disallow to pass multiple arguments to scoped slots |  |
-| [vue/no-v-html](./no-v-html.md) | disallow use of v-html to prevent XSS attack |  |
-| [vue/order-in-components](./order-in-components.md) | enforce order of properties in components | :wrench: |
-| [vue/this-in-template](./this-in-template.md) | disallow usage of `this` in template | :wrench: |
-
-## Priority A: Essential (Error Prevention) <badge text="for Vue.js 2.x" vertical="middle" type="warn">for Vue.js 2.x</badge>
-
-Enforce all the rules in this category, as well as all higher priority rules, with:
-
-```json
-{
-  "extends": "plugin:vue/essential"
-}
-```
+Mark indicating rule type:
 
-| Rule ID | Description |    |
-|:--------|:------------|:---|
-| [vue/multi-word-component-names](./multi-word-component-names.md) | require component names to be always multi-word |  |
-| [vue/no-arrow-functions-in-watch](./no-arrow-functions-in-watch.md) | disallow using arrow functions to define watcher |  |
-| [vue/no-async-in-computed-properties](./no-async-in-computed-properties.md) | disallow asynchronous actions in computed properties |  |
-| [vue/no-computed-properties-in-data](./no-computed-properties-in-data.md) | disallow accessing computed properties in `data`. |  |
-| [vue/no-custom-modifiers-on-v-model](./no-custom-modifiers-on-v-model.md) | disallow custom modifiers on v-model used on the component |  |
-| [vue/no-dupe-keys](./no-dupe-keys.md) | disallow duplication of field names |  |
-| [vue/no-dupe-v-else-if](./no-dupe-v-else-if.md) | disallow duplicate conditions in `v-if` / `v-else-if` chains |  |
-| [vue/no-duplicate-attributes](./no-duplicate-attributes.md) | disallow duplication of attributes |  |
-| [vue/no-multiple-template-root](./no-multiple-template-root.md) | disallow adding multiple root nodes to the template |  |
-| [vue/no-mutating-props](./no-mutating-props.md) | disallow mutation of component props |  |
-| [vue/no-parsing-error](./no-parsing-error.md) | disallow parsing errors in `<template>` |  |
-| [vue/no-reserved-keys](./no-reserved-keys.md) | disallow overwriting reserved keys |  |
-| [vue/no-reserved-props](./no-reserved-props.md) | disallow reserved names in props |  |
-| [vue/no-shared-component-data](./no-shared-component-data.md) | enforce component's data property to be a function | :wrench: |
-| [vue/no-side-effects-in-computed-properties](./no-side-effects-in-computed-properties.md) | disallow side effects in computed properties |  |
-| [vue/no-template-key](./no-template-key.md) | disallow `key` attribute on `<template>` |  |
-| [vue/no-textarea-mustache](./no-textarea-mustache.md) | disallow mustaches in `<textarea>` |  |
-| [vue/no-unused-components](./no-unused-components.md) | disallow registering components that are not used inside templates |  |
-| [vue/no-unused-vars](./no-unused-vars.md) | disallow unused variable definitions of v-for directives or scope attributes | :bulb: |
-| [vue/no-use-v-if-with-v-for](./no-use-v-if-with-v-for.md) | disallow use v-if on the same element as v-for |  |
-| [vue/no-useless-template-attributes](./no-useless-template-attributes.md) | disallow useless attribute on `<template>` |  |
-| [vue/no-v-for-template-key](./no-v-for-template-key.md) | disallow `key` attribute on `<template v-for>` |  |
-| [vue/no-v-model-argument](./no-v-model-argument.md) | disallow adding an argument to `v-model` used in custom component |  |
-| [vue/require-component-is](./require-component-is.md) | require `v-bind:is` of `<component>` elements |  |
-| [vue/require-prop-type-constructor](./require-prop-type-constructor.md) | require prop type to be a constructor | :wrench: |
-| [vue/require-render-return](./require-render-return.md) | enforce render function to always return value |  |
-| [vue/require-v-for-key](./require-v-for-key.md) | require `v-bind:key` with `v-for` directives |  |
-| [vue/require-valid-default-prop](./require-valid-default-prop.md) | enforce props default values to be valid |  |
-| [vue/return-in-computed-property](./return-in-computed-property.md) | enforce that a return statement is present in computed property |  |
-| [vue/use-v-on-exact](./use-v-on-exact.md) | enforce usage of `exact` modifier on `v-on` |  |
-| [vue/valid-next-tick](./valid-next-tick.md) | enforce valid `nextTick` function calls | :wrench::bulb: |
-| [vue/valid-template-root](./valid-template-root.md) | enforce valid template root |  |
-| [vue/valid-v-bind-sync](./valid-v-bind-sync.md) | enforce valid `.sync` modifier on `v-bind` directives |  |
-| [vue/valid-v-bind](./valid-v-bind.md) | enforce valid `v-bind` directives |  |
-| [vue/valid-v-cloak](./valid-v-cloak.md) | enforce valid `v-cloak` directives |  |
-| [vue/valid-v-else-if](./valid-v-else-if.md) | enforce valid `v-else-if` directives |  |
-| [vue/valid-v-else](./valid-v-else.md) | enforce valid `v-else` directives |  |
-| [vue/valid-v-for](./valid-v-for.md) | enforce valid `v-for` directives |  |
-| [vue/valid-v-html](./valid-v-html.md) | enforce valid `v-html` directives |  |
-| [vue/valid-v-if](./valid-v-if.md) | enforce valid `v-if` directives |  |
-| [vue/valid-v-model](./valid-v-model.md) | enforce valid `v-model` directives |  |
-| [vue/valid-v-on](./valid-v-on.md) | enforce valid `v-on` directives |  |
-| [vue/valid-v-once](./valid-v-once.md) | enforce valid `v-once` directives |  |
-| [vue/valid-v-pre](./valid-v-pre.md) | enforce valid `v-pre` directives |  |
-| [vue/valid-v-show](./valid-v-show.md) | enforce valid `v-show` directives |  |
-| [vue/valid-v-slot](./valid-v-slot.md) | enforce valid `v-slot` directives |  |
-| [vue/valid-v-text](./valid-v-text.md) | enforce valid `v-text` directives |  |
-
-## Priority B: Strongly Recommended (Improving Readability) <badge text="for Vue.js 2.x" vertical="middle" type="warn">for Vue.js 2.x</badge>
-
-Enforce all the rules in this category, as well as all higher priority rules, with:
+- <span class="emoji">:warning:</span> Possible Problems: These rules relate to possible logic errors in code.
+- :hammer: Suggestions: These rules suggest alternate ways of doing things.
+- :lipstick: Layout & Formatting: These rules care about how the code looks rather than how it executes.
 
-```json
-{
-  "extends": "plugin:vue/strongly-recommended"
-}
-```
-
-| Rule ID | Description |    |
-|:--------|:------------|:---|
-| [vue/attribute-hyphenation](./attribute-hyphenation.md) | enforce attribute naming style on custom components in template | :wrench: |
-| [vue/component-definition-name-casing](./component-definition-name-casing.md) | enforce specific casing for component definition name | :wrench: |
-| [vue/first-attribute-linebreak](./first-attribute-linebreak.md) | enforce the location of first attribute | :wrench: |
-| [vue/html-closing-bracket-newline](./html-closing-bracket-newline.md) | require or disallow a line break before tag's closing brackets | :wrench: |
-| [vue/html-closing-bracket-spacing](./html-closing-bracket-spacing.md) | require or disallow a space before tag's closing brackets | :wrench: |
-| [vue/html-end-tags](./html-end-tags.md) | enforce end tag style | :wrench: |
-| [vue/html-indent](./html-indent.md) | enforce consistent indentation in `<template>` | :wrench: |
-| [vue/html-quotes](./html-quotes.md) | enforce quotes style of HTML attributes | :wrench: |
-| [vue/html-self-closing](./html-self-closing.md) | enforce self-closing style | :wrench: |
-| [vue/max-attributes-per-line](./max-attributes-per-line.md) | enforce the maximum number of attributes per line | :wrench: |
-| [vue/multiline-html-element-content-newline](./multiline-html-element-content-newline.md) | require a line break before and after the contents of a multiline element | :wrench: |
-| [vue/mustache-interpolation-spacing](./mustache-interpolation-spacing.md) | enforce unified spacing in mustache interpolations | :wrench: |
-| [vue/no-multi-spaces](./no-multi-spaces.md) | disallow multiple spaces | :wrench: |
-| [vue/no-spaces-around-equal-signs-in-attribute](./no-spaces-around-equal-signs-in-attribute.md) | disallow spaces around equal signs in attribute | :wrench: |
-| [vue/no-template-shadow](./no-template-shadow.md) | disallow variable declarations from shadowing variables declared in the outer scope |  |
-| [vue/one-component-per-file](./one-component-per-file.md) | enforce that each component should be in its own file |  |
-| [vue/prop-name-casing](./prop-name-casing.md) | enforce specific casing for the Prop name in Vue components |  |
-| [vue/require-default-prop](./require-default-prop.md) | require default value for props |  |
-| [vue/require-prop-types](./require-prop-types.md) | require type definitions in props |  |
-| [vue/singleline-html-element-content-newline](./singleline-html-element-content-newline.md) | require a line break before and after the contents of a singleline element | :wrench: |
-| [vue/v-bind-style](./v-bind-style.md) | enforce `v-bind` directive style | :wrench: |
-| [vue/v-on-style](./v-on-style.md) | enforce `v-on` directive style | :wrench: |
-| [vue/v-slot-style](./v-slot-style.md) | enforce `v-slot` directive style | :wrench: |
-
-## Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead) <badge text="for Vue.js 2.x" vertical="middle" type="warn">for Vue.js 2.x</badge>
-
-Enforce all the rules in this category, as well as all higher priority rules, with:
-
-```json
-{
-  "extends": "plugin:vue/recommended"
-}
-```
+## Base Rules (Enabling Correct ESLint Parsing)
 
-| Rule ID | Description |    |
-|:--------|:------------|:---|
-| [vue/attributes-order](./attributes-order.md) | enforce order of attributes | :wrench: |
-| [vue/component-tags-order](./component-tags-order.md) | enforce order of component top-level elements | :wrench: |
-| [vue/no-lone-template](./no-lone-template.md) | disallow unnecessary `<template>` |  |
-| [vue/no-multiple-slot-args](./no-multiple-slot-args.md) | disallow to pass multiple arguments to scoped slots |  |
-| [vue/no-v-html](./no-v-html.md) | disallow use of v-html to prevent XSS attack |  |
-| [vue/order-in-components](./order-in-components.md) | enforce order of properties in components | :wrench: |
-| [vue/this-in-template](./this-in-template.md) | disallow usage of `this` in template | :wrench: |
+Rules in this category are enabled for all presets provided by eslint-plugin-vue.
+
+<rules-table>
+
+| Rule ID | Description |    |    |
+|:--------|:------------|:--:|:--:|
+| [vue/comment-directive](./comment-directive.md) | support comment-directives in `<template>` |  | :warning: |
+| [vue/jsx-uses-vars](./jsx-uses-vars.md) | prevent variables used in JSX to be marked as unused |  | :warning: |
+| [vue/script-setup-uses-vars](./script-setup-uses-vars.md) | prevent `<script setup>` variables used in `<template>` to be marked as unused |  | :warning: |
+
+</rules-table>
+
+## Priority A: Essential (Error Prevention)
+
+- :three: Indicates that the rule is for Vue 3 and is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"` presets.
+- :two: Indicates that the rule is for Vue 2 and is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"` presets.
+
+<rules-table>
+
+| Rule ID | Description |    |    |
+|:--------|:------------|:--:|:--:|
+| [vue/multi-word-component-names](./multi-word-component-names.md) | require component names to be always multi-word |  | :three::two::hammer: |
+| [vue/no-arrow-functions-in-watch](./no-arrow-functions-in-watch.md) | disallow using arrow functions to define watcher |  | :three::two::warning: |
+| [vue/no-async-in-computed-properties](./no-async-in-computed-properties.md) | disallow asynchronous actions in computed properties |  | :three::two::warning: |
+| [vue/no-computed-properties-in-data](./no-computed-properties-in-data.md) | disallow accessing computed properties in `data`. |  | :three::two::warning: |
+| [vue/no-custom-modifiers-on-v-model](./no-custom-modifiers-on-v-model.md) | disallow custom modifiers on v-model used on the component |  | :two::warning: |
+| [vue/no-deprecated-data-object-declaration](./no-deprecated-data-object-declaration.md) | disallow using deprecated object declaration on data (in Vue.js 3.0.0+) | :wrench: | :three::warning: |
+| [vue/no-deprecated-destroyed-lifecycle](./no-deprecated-destroyed-lifecycle.md) | disallow using deprecated `destroyed` and `beforeDestroy` lifecycle hooks (in Vue.js 3.0.0+) | :wrench: | :three::warning: |
+| [vue/no-deprecated-dollar-listeners-api](./no-deprecated-dollar-listeners-api.md) | disallow using deprecated `$listeners` (in Vue.js 3.0.0+) |  | :three::warning: |
+| [vue/no-deprecated-dollar-scopedslots-api](./no-deprecated-dollar-scopedslots-api.md) | disallow using deprecated `$scopedSlots` (in Vue.js 3.0.0+) | :wrench: | :three::warning: |
+| [vue/no-deprecated-events-api](./no-deprecated-events-api.md) | disallow using deprecated events api (in Vue.js 3.0.0+) |  | :three::warning: |
+| [vue/no-deprecated-filter](./no-deprecated-filter.md) | disallow using deprecated filters syntax (in Vue.js 3.0.0+) |  | :three::warning: |
+| [vue/no-deprecated-functional-template](./no-deprecated-functional-template.md) | disallow using deprecated the `functional` template (in Vue.js 3.0.0+) |  | :three::warning: |
+| [vue/no-deprecated-html-element-is](./no-deprecated-html-element-is.md) | disallow using deprecated the `is` attribute on HTML elements (in Vue.js 3.0.0+) |  | :three::warning: |
+| [vue/no-deprecated-inline-template](./no-deprecated-inline-template.md) | disallow using deprecated `inline-template` attribute (in Vue.js 3.0.0+) |  | :three::warning: |
+| [vue/no-deprecated-props-default-this](./no-deprecated-props-default-this.md) | disallow deprecated `this` access in props default function (in Vue.js 3.0.0+) |  | :three::warning: |
+| [vue/no-deprecated-router-link-tag-prop](./no-deprecated-router-link-tag-prop.md) | disallow using deprecated `tag` property on `RouterLink` (in Vue.js 3.0.0+) |  | :three::warning: |
+| [vue/no-deprecated-scope-attribute](./no-deprecated-scope-attribute.md) | disallow deprecated `scope` attribute (in Vue.js 2.5.0+) | :wrench: | :three::hammer: |
+| [vue/no-deprecated-slot-attribute](./no-deprecated-slot-attribute.md) | disallow deprecated `slot` attribute (in Vue.js 2.6.0+) | :wrench: | :three::hammer: |
+| [vue/no-deprecated-slot-scope-attribute](./no-deprecated-slot-scope-attribute.md) | disallow deprecated `slot-scope` attribute (in Vue.js 2.6.0+) | :wrench: | :three::hammer: |
+| [vue/no-deprecated-v-bind-sync](./no-deprecated-v-bind-sync.md) | disallow use of deprecated `.sync` modifier on `v-bind` directive (in Vue.js 3.0.0+) | :wrench: | :three::warning: |
+| [vue/no-deprecated-v-is](./no-deprecated-v-is.md) | disallow deprecated `v-is` directive (in Vue.js 3.1.0+) | :wrench: | :three::hammer: |
+| [vue/no-deprecated-v-on-native-modifier](./no-deprecated-v-on-native-modifier.md) | disallow using deprecated `.native` modifiers (in Vue.js 3.0.0+) |  | :three::warning: |
+| [vue/no-deprecated-v-on-number-modifiers](./no-deprecated-v-on-number-modifiers.md) | disallow using deprecated number (keycode) modifiers (in Vue.js 3.0.0+) | :wrench: | :three::warning: |
+| [vue/no-deprecated-vue-config-keycodes](./no-deprecated-vue-config-keycodes.md) | disallow using deprecated `Vue.config.keyCodes` (in Vue.js 3.0.0+) |  | :three::warning: |
+| [vue/no-dupe-keys](./no-dupe-keys.md) | disallow duplication of field names |  | :three::two::warning: |
+| [vue/no-dupe-v-else-if](./no-dupe-v-else-if.md) | disallow duplicate conditions in `v-if` / `v-else-if` chains |  | :three::two::warning: |
+| [vue/no-duplicate-attributes](./no-duplicate-attributes.md) | disallow duplication of attributes |  | :three::two::warning: |
+| [vue/no-export-in-script-setup](./no-export-in-script-setup.md) | disallow `export` in `<script setup>` |  | :three::warning: |
+| [vue/no-lifecycle-after-await](./no-lifecycle-after-await.md) | disallow asynchronously registered lifecycle hooks |  | :three::hammer: |
+| [vue/no-multiple-template-root](./no-multiple-template-root.md) | disallow adding multiple root nodes to the template |  | :two::warning: |
+| [vue/no-mutating-props](./no-mutating-props.md) | disallow mutation of component props |  | :three::two::hammer: |
+| [vue/no-parsing-error](./no-parsing-error.md) | disallow parsing errors in `<template>` |  | :three::two::warning: |
+| [vue/no-ref-as-operand](./no-ref-as-operand.md) | disallow use of value wrapped by `ref()` (Composition API) as an operand | :wrench: | :three::hammer: |
+| [vue/no-reserved-keys](./no-reserved-keys.md) | disallow overwriting reserved keys |  | :three::two::hammer: |
+| [vue/no-reserved-props](./no-reserved-props.md) | disallow reserved names in props |  | :three::two::warning: |
+| [vue/no-setup-props-destructure](./no-setup-props-destructure.md) | disallow destructuring of `props` passed to `setup` |  | :three::hammer: |
+| [vue/no-shared-component-data](./no-shared-component-data.md) | enforce component's data property to be a function | :wrench: | :three::two::warning: |
+| [vue/no-side-effects-in-computed-properties](./no-side-effects-in-computed-properties.md) | disallow side effects in computed properties |  | :three::two::warning: |
+| [vue/no-template-key](./no-template-key.md) | disallow `key` attribute on `<template>` |  | :three::two::warning: |
+| [vue/no-textarea-mustache](./no-textarea-mustache.md) | disallow mustaches in `<textarea>` |  | :three::two::warning: |
+| [vue/no-unused-components](./no-unused-components.md) | disallow registering components that are not used inside templates |  | :three::two::hammer: |
+| [vue/no-unused-vars](./no-unused-vars.md) | disallow unused variable definitions of v-for directives or scope attributes | :bulb: | :three::two::hammer: |
+| [vue/no-use-v-if-with-v-for](./no-use-v-if-with-v-for.md) | disallow use v-if on the same element as v-for |  | :three::two::hammer: |
+| [vue/no-useless-template-attributes](./no-useless-template-attributes.md) | disallow useless attribute on `<template>` |  | :three::two::warning: |
+| [vue/no-v-for-template-key-on-child](./no-v-for-template-key-on-child.md) | disallow key of `<template v-for>` placed on child elements |  | :three::warning: |
+| [vue/no-v-for-template-key](./no-v-for-template-key.md) | disallow `key` attribute on `<template v-for>` |  | :two::warning: |
+| [vue/no-v-model-argument](./no-v-model-argument.md) | disallow adding an argument to `v-model` used in custom component |  | :two::warning: |
+| [vue/no-watch-after-await](./no-watch-after-await.md) | disallow asynchronously registered `watch` |  | :three::hammer: |
+| [vue/require-component-is](./require-component-is.md) | require `v-bind:is` of `<component>` elements |  | :three::two::warning: |
+| [vue/require-prop-type-constructor](./require-prop-type-constructor.md) | require prop type to be a constructor | :wrench: | :three::two::hammer: |
+| [vue/require-render-return](./require-render-return.md) | enforce render function to always return value |  | :three::two::warning: |
+| [vue/require-slots-as-functions](./require-slots-as-functions.md) | enforce properties of `$slots` to be used as a function |  | :three::warning: |
+| [vue/require-toggle-inside-transition](./require-toggle-inside-transition.md) | require control the display of the content inside `<transition>` |  | :three::warning: |
+| [vue/require-v-for-key](./require-v-for-key.md) | require `v-bind:key` with `v-for` directives |  | :three::two::warning: |
+| [vue/require-valid-default-prop](./require-valid-default-prop.md) | enforce props default values to be valid |  | :three::two::hammer: |
+| [vue/return-in-computed-property](./return-in-computed-property.md) | enforce that a return statement is present in computed property |  | :three::two::warning: |
+| [vue/return-in-emits-validator](./return-in-emits-validator.md) | enforce that a return statement is present in emits validator |  | :three::warning: |
+| [vue/use-v-on-exact](./use-v-on-exact.md) | enforce usage of `exact` modifier on `v-on` |  | :three::two::hammer: |
+| [vue/valid-define-emits](./valid-define-emits.md) | enforce valid `defineEmits` compiler macro |  | :three::warning: |
+| [vue/valid-define-props](./valid-define-props.md) | enforce valid `defineProps` compiler macro |  | :three::warning: |
+| [vue/valid-next-tick](./valid-next-tick.md) | enforce valid `nextTick` function calls | :wrench::bulb: | :three::two::warning: |
+| [vue/valid-template-root](./valid-template-root.md) | enforce valid template root |  | :three::two::warning: |
+| [vue/valid-v-bind-sync](./valid-v-bind-sync.md) | enforce valid `.sync` modifier on `v-bind` directives |  | :two::warning: |
+| [vue/valid-v-bind](./valid-v-bind.md) | enforce valid `v-bind` directives |  | :three::two::warning: |
+| [vue/valid-v-cloak](./valid-v-cloak.md) | enforce valid `v-cloak` directives |  | :three::two::warning: |
+| [vue/valid-v-else-if](./valid-v-else-if.md) | enforce valid `v-else-if` directives |  | :three::two::warning: |
+| [vue/valid-v-else](./valid-v-else.md) | enforce valid `v-else` directives |  | :three::two::warning: |
+| [vue/valid-v-for](./valid-v-for.md) | enforce valid `v-for` directives |  | :three::two::warning: |
+| [vue/valid-v-html](./valid-v-html.md) | enforce valid `v-html` directives |  | :three::two::warning: |
+| [vue/valid-v-if](./valid-v-if.md) | enforce valid `v-if` directives |  | :three::two::warning: |
+| [vue/valid-v-is](./valid-v-is.md) | enforce valid `v-is` directives |  | :three::warning: |
+| [vue/valid-v-memo](./valid-v-memo.md) | enforce valid `v-memo` directives |  | :three::warning: |
+| [vue/valid-v-model](./valid-v-model.md) | enforce valid `v-model` directives |  | :three::two::warning: |
+| [vue/valid-v-on](./valid-v-on.md) | enforce valid `v-on` directives |  | :three::two::warning: |
+| [vue/valid-v-once](./valid-v-once.md) | enforce valid `v-once` directives |  | :three::two::warning: |
+| [vue/valid-v-pre](./valid-v-pre.md) | enforce valid `v-pre` directives |  | :three::two::warning: |
+| [vue/valid-v-show](./valid-v-show.md) | enforce valid `v-show` directives |  | :three::two::warning: |
+| [vue/valid-v-slot](./valid-v-slot.md) | enforce valid `v-slot` directives |  | :three::two::warning: |
+| [vue/valid-v-text](./valid-v-text.md) | enforce valid `v-text` directives |  | :three::two::warning: |
+
+</rules-table>
+
+## Priority B: Strongly Recommended (Improving Readability)
+
+- :three: Indicates that the rule is for Vue 3 and is included in `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"` presets.
+- :two: Indicates that the rule is for Vue 2 and is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"` presets.
+
+<rules-table>
+
+| Rule ID | Description |    |    |
+|:--------|:------------|:--:|:--:|
+| [vue/attribute-hyphenation](./attribute-hyphenation.md) | enforce attribute naming style on custom components in template | :wrench: | :three::two::hammer: |
+| [vue/component-definition-name-casing](./component-definition-name-casing.md) | enforce specific casing for component definition name | :wrench: | :three::two::hammer: |
+| [vue/first-attribute-linebreak](./first-attribute-linebreak.md) | enforce the location of first attribute | :wrench: | :three::two::lipstick: |
+| [vue/html-closing-bracket-newline](./html-closing-bracket-newline.md) | require or disallow a line break before tag's closing brackets | :wrench: | :three::two::lipstick: |
+| [vue/html-closing-bracket-spacing](./html-closing-bracket-spacing.md) | require or disallow a space before tag's closing brackets | :wrench: | :three::two::lipstick: |
+| [vue/html-end-tags](./html-end-tags.md) | enforce end tag style | :wrench: | :three::two::hammer: |
+| [vue/html-indent](./html-indent.md) | enforce consistent indentation in `<template>` | :wrench: | :three::two::lipstick: |
+| [vue/html-quotes](./html-quotes.md) | enforce quotes style of HTML attributes | :wrench: | :three::two::lipstick: |
+| [vue/html-self-closing](./html-self-closing.md) | enforce self-closing style | :wrench: | :three::two::lipstick: |
+| [vue/max-attributes-per-line](./max-attributes-per-line.md) | enforce the maximum number of attributes per line | :wrench: | :three::two::lipstick: |
+| [vue/multiline-html-element-content-newline](./multiline-html-element-content-newline.md) | require a line break before and after the contents of a multiline element | :wrench: | :three::two::lipstick: |
+| [vue/mustache-interpolation-spacing](./mustache-interpolation-spacing.md) | enforce unified spacing in mustache interpolations | :wrench: | :three::two::lipstick: |
+| [vue/no-multi-spaces](./no-multi-spaces.md) | disallow multiple spaces | :wrench: | :three::two::lipstick: |
+| [vue/no-spaces-around-equal-signs-in-attribute](./no-spaces-around-equal-signs-in-attribute.md) | disallow spaces around equal signs in attribute | :wrench: | :three::two::lipstick: |
+| [vue/no-template-shadow](./no-template-shadow.md) | disallow variable declarations from shadowing variables declared in the outer scope |  | :three::two::hammer: |
+| [vue/one-component-per-file](./one-component-per-file.md) | enforce that each component should be in its own file |  | :three::two::hammer: |
+| [vue/prop-name-casing](./prop-name-casing.md) | enforce specific casing for the Prop name in Vue components |  | :three::two::hammer: |
+| [vue/require-default-prop](./require-default-prop.md) | require default value for props |  | :three::two::hammer: |
+| [vue/require-explicit-emits](./require-explicit-emits.md) | require `emits` option with name triggered by `$emit()` | :bulb: | :three::hammer: |
+| [vue/require-prop-types](./require-prop-types.md) | require type definitions in props |  | :three::two::hammer: |
+| [vue/singleline-html-element-content-newline](./singleline-html-element-content-newline.md) | require a line break before and after the contents of a singleline element | :wrench: | :three::two::lipstick: |
+| [vue/v-bind-style](./v-bind-style.md) | enforce `v-bind` directive style | :wrench: | :three::two::hammer: |
+| [vue/v-on-event-hyphenation](./v-on-event-hyphenation.md) | enforce v-on event naming style on custom components in template | :wrench: | :three::hammer: |
+| [vue/v-on-style](./v-on-style.md) | enforce `v-on` directive style | :wrench: | :three::two::hammer: |
+| [vue/v-slot-style](./v-slot-style.md) | enforce `v-slot` directive style | :wrench: | :three::two::hammer: |
+
+</rules-table>
+
+## Priority C: Recommended (Potentially Dangerous Patterns)
+
+- :three: Indicates that the rule is for Vue 3 and is included in `"plugin:vue/vue3-recommended"` preset.
+- :two: Indicates that the rule is for Vue 2 and is included in `"plugin:vue/recommended"` preset.
+
+<rules-table>
+
+| Rule ID | Description |    |    |
+|:--------|:------------|:--:|:--:|
+| [vue/attributes-order](./attributes-order.md) | enforce order of attributes | :wrench: | :three::two::hammer: |
+| [vue/component-tags-order](./component-tags-order.md) | enforce order of component top-level elements | :wrench: | :three::two::hammer: |
+| [vue/no-lone-template](./no-lone-template.md) | disallow unnecessary `<template>` |  | :three::two::warning: |
+| [vue/no-multiple-slot-args](./no-multiple-slot-args.md) | disallow to pass multiple arguments to scoped slots |  | :three::two::warning: |
+| [vue/no-v-html](./no-v-html.md) | disallow use of v-html to prevent XSS attack |  | :three::two::hammer: |
+| [vue/order-in-components](./order-in-components.md) | enforce order of properties in components | :wrench: | :three::two::hammer: |
+| [vue/this-in-template](./this-in-template.md) | disallow usage of `this` in template | :wrench: | :three::two::hammer: |
+
+</rules-table>
 
 ## Uncategorized
 
@@ -304,111 +195,119 @@ For example:
 }
 ```
 
-| Rule ID | Description |    |
-|:--------|:------------|:---|
-| [vue/block-lang](./block-lang.md) | disallow use other than available `lang` |  |
-| [vue/block-tag-newline](./block-tag-newline.md) | enforce line breaks after opening and before closing block-level tags | :wrench: |
-| [vue/component-api-style](./component-api-style.md) | enforce component API style |  |
-| [vue/component-name-in-template-casing](./component-name-in-template-casing.md) | enforce specific casing for the component naming style in template | :wrench: |
-| [vue/component-options-name-casing](./component-options-name-casing.md) | enforce the casing of component name in `components` options | :wrench::bulb: |
-| [vue/custom-event-name-casing](./custom-event-name-casing.md) | enforce specific casing for custom event name |  |
-| [vue/define-macros-order](./define-macros-order.md) | enforce order of `defineEmits` and `defineProps` compiler macros | :wrench: |
-| [vue/html-button-has-type](./html-button-has-type.md) | disallow usage of button without an explicit type attribute |  |
-| [vue/html-comment-content-newline](./html-comment-content-newline.md) | enforce unified line brake in HTML comments | :wrench: |
-| [vue/html-comment-content-spacing](./html-comment-content-spacing.md) | enforce unified spacing in HTML comments | :wrench: |
-| [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/match-component-import-name](./match-component-import-name.md) | require the registered component name to match the imported component 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` | :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-child-content](./no-child-content.md) | disallow element's child contents which would be overwritten by a directive like `v-html` or `v-text` | :bulb: |
-| [vue/no-duplicate-attr-inheritance](./no-duplicate-attr-inheritance.md) | enforce `inheritAttrs` to be set to `false` when using `v-bind="$attrs"` |  |
-| [vue/no-empty-component-block](./no-empty-component-block.md) | disallow the `<template>` `<script>` `<style>` block to be empty |  |
-| [vue/no-expose-after-await](./no-expose-after-await.md) | disallow asynchronously registered `expose` |  |
-| [vue/no-invalid-model-keys](./no-invalid-model-keys.md) | require valid keys in model option |  |
-| [vue/no-multiple-objects-in-class](./no-multiple-objects-in-class.md) | disallow to pass multiple objects into array to class |  |
-| [vue/no-potential-component-option-typo](./no-potential-component-option-typo.md) | disallow a potential typo in your component property | :bulb: |
-| [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 | :bulb: |
-| [vue/no-restricted-html-elements](./no-restricted-html-elements.md) | disallow specific HTML elements |  |
-| [vue/no-restricted-props](./no-restricted-props.md) | disallow specific props | :bulb: |
-| [vue/no-restricted-static-attribute](./no-restricted-static-attribute.md) | disallow specific attribute |  |
-| [vue/no-restricted-v-bind](./no-restricted-v-bind.md) | disallow specific argument in `v-bind` |  |
-| [vue/no-static-inline-styles](./no-static-inline-styles.md) | disallow static inline `style` attributes |  |
-| [vue/no-template-target-blank](./no-template-target-blank.md) | disallow target="_blank" attribute without rel="noopener noreferrer" |  |
-| [vue/no-this-in-before-route-enter](./no-this-in-before-route-enter.md) | disallow `this` usage in a `beforeRouteEnter` method |  |
-| [vue/no-undef-components](./no-undef-components.md) | disallow use of undefined components in `<template>` |  |
-| [vue/no-undef-properties](./no-undef-properties.md) | disallow undefined properties |  |
-| [vue/no-unsupported-features](./no-unsupported-features.md) | disallow unsupported Vue.js syntax on the specified version | :wrench: |
-| [vue/no-unused-properties](./no-unused-properties.md) | disallow unused properties |  |
-| [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-v-bind](./no-useless-v-bind.md) | disallow unnecessary `v-bind` directives | :wrench: |
-| [vue/no-v-text-v-html-on-component](./no-v-text-v-html-on-component.md) | disallow v-text / v-html on component |  |
-| [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: |
-| [vue/prefer-import-from-vue](./prefer-import-from-vue.md) | enforce import from 'vue' instead of import from '@vue/*' | :wrench: |
-| [vue/prefer-prop-type-boolean-first](./prefer-prop-type-boolean-first.md) | enforce `Boolean` comes first in component prop types | :bulb: |
-| [vue/prefer-separate-static-class](./prefer-separate-static-class.md) | require static class names in template to be in a separate `class` attribute | :wrench: |
-| [vue/prefer-true-attribute-shorthand](./prefer-true-attribute-shorthand.md) | require shorthand form attribute when `v-bind` value is `true` | :bulb: |
-| [vue/require-direct-export](./require-direct-export.md) | require the component to be directly exported |  |
-| [vue/require-emit-validator](./require-emit-validator.md) | require type definitions in emits | :bulb: |
-| [vue/require-expose](./require-expose.md) | require declare public properties using `expose` | :bulb: |
-| [vue/require-name-property](./require-name-property.md) | require a name property in Vue components |  |
-| [vue/script-indent](./script-indent.md) | enforce consistent indentation in `<script>` | :wrench: |
-| [vue/sort-keys](./sort-keys.md) | enforce sort-keys in a manner that is compatible with order-in-components |  |
-| [vue/static-class-names-order](./static-class-names-order.md) | enforce static class names order | :wrench: |
-| [vue/v-for-delimiter-style](./v-for-delimiter-style.md) | enforce `v-for` directive's delimiter style | :wrench: |
-| [vue/v-on-function-call](./v-on-function-call.md) | enforce or forbid parentheses after method calls without arguments in `v-on` directives | :wrench: |
+<rules-table>
+
+| Rule ID | Description |    |    |
+|:--------|:------------|:--:|:--:|
+| [vue/block-lang](./block-lang.md) | disallow use other than available `lang` |  | :hammer: |
+| [vue/block-tag-newline](./block-tag-newline.md) | enforce line breaks after opening and before closing block-level tags | :wrench: | :lipstick: |
+| [vue/component-api-style](./component-api-style.md) | enforce component API style |  | :hammer: |
+| [vue/component-name-in-template-casing](./component-name-in-template-casing.md) | enforce specific casing for the component naming style in template | :wrench: | :hammer: |
+| [vue/component-options-name-casing](./component-options-name-casing.md) | enforce the casing of component name in `components` options | :wrench::bulb: | :hammer: |
+| [vue/custom-event-name-casing](./custom-event-name-casing.md) | enforce specific casing for custom event name |  | :hammer: |
+| [vue/define-macros-order](./define-macros-order.md) | enforce order of `defineEmits` and `defineProps` compiler macros | :wrench: | :lipstick: |
+| [vue/html-button-has-type](./html-button-has-type.md) | disallow usage of button without an explicit type attribute |  | :hammer: |
+| [vue/html-comment-content-newline](./html-comment-content-newline.md) | enforce unified line brake in HTML comments | :wrench: | :lipstick: |
+| [vue/html-comment-content-spacing](./html-comment-content-spacing.md) | enforce unified spacing in HTML comments | :wrench: | :lipstick: |
+| [vue/html-comment-indent](./html-comment-indent.md) | enforce consistent indentation in HTML comments | :wrench: | :lipstick: |
+| [vue/match-component-file-name](./match-component-file-name.md) | require component name property to match its file name |  | :hammer: |
+| [vue/match-component-import-name](./match-component-import-name.md) | require the registered component name to match the imported component name |  | :warning: |
+| [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: | :lipstick: |
+| [vue/next-tick-style](./next-tick-style.md) | enforce Promise or callback style in `nextTick` | :wrench: | :hammer: |
+| [vue/no-bare-strings-in-template](./no-bare-strings-in-template.md) | disallow the use of bare strings in `<template>` |  | :hammer: |
+| [vue/no-boolean-default](./no-boolean-default.md) | disallow boolean defaults | :wrench: | :hammer: |
+| [vue/no-child-content](./no-child-content.md) | disallow element's child contents which would be overwritten by a directive like `v-html` or `v-text` | :bulb: | :warning: |
+| [vue/no-duplicate-attr-inheritance](./no-duplicate-attr-inheritance.md) | enforce `inheritAttrs` to be set to `false` when using `v-bind="$attrs"` |  | :hammer: |
+| [vue/no-empty-component-block](./no-empty-component-block.md) | disallow the `<template>` `<script>` `<style>` block to be empty |  | :hammer: |
+| [vue/no-expose-after-await](./no-expose-after-await.md) | disallow asynchronously registered `expose` |  | :warning: |
+| [vue/no-invalid-model-keys](./no-invalid-model-keys.md) | require valid keys in model option |  | :warning: |
+| [vue/no-multiple-objects-in-class](./no-multiple-objects-in-class.md) | disallow to pass multiple objects into array to class |  | :hammer: |
+| [vue/no-potential-component-option-typo](./no-potential-component-option-typo.md) | disallow a potential typo in your component property | :bulb: | :hammer: |
+| [vue/no-reserved-component-names](./no-reserved-component-names.md) | disallow the use of reserved names in component definitions |  | :hammer: |
+| [vue/no-restricted-block](./no-restricted-block.md) | disallow specific block |  | :hammer: |
+| [vue/no-restricted-call-after-await](./no-restricted-call-after-await.md) | disallow asynchronously called restricted methods |  | :hammer: |
+| [vue/no-restricted-class](./no-restricted-class.md) | disallow specific classes in Vue components |  | :warning: |
+| [vue/no-restricted-component-options](./no-restricted-component-options.md) | disallow specific component option |  | :hammer: |
+| [vue/no-restricted-custom-event](./no-restricted-custom-event.md) | disallow specific custom event | :bulb: | :hammer: |
+| [vue/no-restricted-html-elements](./no-restricted-html-elements.md) | disallow specific HTML elements |  | :hammer: |
+| [vue/no-restricted-props](./no-restricted-props.md) | disallow specific props | :bulb: | :hammer: |
+| [vue/no-restricted-static-attribute](./no-restricted-static-attribute.md) | disallow specific attribute |  | :hammer: |
+| [vue/no-restricted-v-bind](./no-restricted-v-bind.md) | disallow specific argument in `v-bind` |  | :hammer: |
+| [vue/no-static-inline-styles](./no-static-inline-styles.md) | disallow static inline `style` attributes |  | :hammer: |
+| [vue/no-template-target-blank](./no-template-target-blank.md) | disallow target="_blank" attribute without rel="noopener noreferrer" |  | :warning: |
+| [vue/no-this-in-before-route-enter](./no-this-in-before-route-enter.md) | disallow `this` usage in a `beforeRouteEnter` method |  | :warning: |
+| [vue/no-undef-components](./no-undef-components.md) | disallow use of undefined components in `<template>` |  | :hammer: |
+| [vue/no-undef-properties](./no-undef-properties.md) | disallow undefined properties |  | :hammer: |
+| [vue/no-unsupported-features](./no-unsupported-features.md) | disallow unsupported Vue.js syntax on the specified version | :wrench: | :hammer: |
+| [vue/no-unused-properties](./no-unused-properties.md) | disallow unused properties |  | :hammer: |
+| [vue/no-unused-refs](./no-unused-refs.md) | disallow unused refs |  | :hammer: |
+| [vue/no-use-computed-property-like-method](./no-use-computed-property-like-method.md) | disallow use computed property like method |  | :warning: |
+| [vue/no-useless-mustaches](./no-useless-mustaches.md) | disallow unnecessary mustache interpolations | :wrench: | :hammer: |
+| [vue/no-useless-v-bind](./no-useless-v-bind.md) | disallow unnecessary `v-bind` directives | :wrench: | :hammer: |
+| [vue/no-v-text-v-html-on-component](./no-v-text-v-html-on-component.md) | disallow v-text / v-html on component |  | :warning: |
+| [vue/no-v-text](./no-v-text.md) | disallow use of v-text |  | :hammer: |
+| [vue/padding-line-between-blocks](./padding-line-between-blocks.md) | require or disallow padding lines between blocks | :wrench: | :lipstick: |
+| [vue/prefer-import-from-vue](./prefer-import-from-vue.md) | enforce import from 'vue' instead of import from '@vue/*' | :wrench: | :hammer: |
+| [vue/prefer-prop-type-boolean-first](./prefer-prop-type-boolean-first.md) | enforce `Boolean` comes first in component prop types | :bulb: | :warning: |
+| [vue/prefer-separate-static-class](./prefer-separate-static-class.md) | require static class names in template to be in a separate `class` attribute | :wrench: | :hammer: |
+| [vue/prefer-true-attribute-shorthand](./prefer-true-attribute-shorthand.md) | require shorthand form attribute when `v-bind` value is `true` | :bulb: | :hammer: |
+| [vue/require-direct-export](./require-direct-export.md) | require the component to be directly exported |  | :hammer: |
+| [vue/require-emit-validator](./require-emit-validator.md) | require type definitions in emits | :bulb: | :hammer: |
+| [vue/require-expose](./require-expose.md) | require declare public properties using `expose` | :bulb: | :hammer: |
+| [vue/require-name-property](./require-name-property.md) | require a name property in Vue components |  | :hammer: |
+| [vue/script-indent](./script-indent.md) | enforce consistent indentation in `<script>` | :wrench: | :lipstick: |
+| [vue/sort-keys](./sort-keys.md) | enforce sort-keys in a manner that is compatible with order-in-components |  | :hammer: |
+| [vue/static-class-names-order](./static-class-names-order.md) | enforce static class names order | :wrench: | :hammer: |
+| [vue/v-for-delimiter-style](./v-for-delimiter-style.md) | enforce `v-for` directive's delimiter style | :wrench: | :lipstick: |
+| [vue/v-on-function-call](./v-on-function-call.md) | enforce or forbid parentheses after method calls without arguments in `v-on` directives | :wrench: | :hammer: |
+
+</rules-table>
 
 ### Extension Rules
 
 The following rules extend the rules provided by ESLint itself and apply them to the expressions in the `<template>`.
 
-| Rule ID | Description |    |
-|:--------|:------------|:---|
-| [vue/array-bracket-newline](./array-bracket-newline.md) | enforce linebreaks after opening and before closing array brackets in `<template>` | :wrench: |
-| [vue/array-bracket-spacing](./array-bracket-spacing.md) | enforce consistent spacing inside array brackets in `<template>` | :wrench: |
-| [vue/arrow-spacing](./arrow-spacing.md) | enforce consistent spacing before and after the arrow in arrow functions in `<template>` | :wrench: |
-| [vue/block-spacing](./block-spacing.md) | disallow or enforce spaces inside of blocks after opening block and before closing block in `<template>` | :wrench: |
-| [vue/brace-style](./brace-style.md) | enforce consistent brace style for blocks in `<template>` | :wrench: |
-| [vue/camelcase](./camelcase.md) | enforce camelcase naming convention in `<template>` |  |
-| [vue/comma-dangle](./comma-dangle.md) | require or disallow trailing commas in `<template>` | :wrench: |
-| [vue/comma-spacing](./comma-spacing.md) | enforce consistent spacing before and after commas in `<template>` | :wrench: |
-| [vue/comma-style](./comma-style.md) | enforce consistent comma style in `<template>` | :wrench: |
-| [vue/dot-location](./dot-location.md) | enforce consistent newlines before and after dots in `<template>` | :wrench: |
-| [vue/dot-notation](./dot-notation.md) | enforce dot notation whenever possible in `<template>` | :wrench: |
-| [vue/eqeqeq](./eqeqeq.md) | require the use of `===` and `!==` in `<template>` | :wrench: |
-| [vue/func-call-spacing](./func-call-spacing.md) | require or disallow spacing between function identifiers and their invocations in `<template>` | :wrench: |
-| [vue/key-spacing](./key-spacing.md) | enforce consistent spacing between keys and values in object literal properties in `<template>` | :wrench: |
-| [vue/keyword-spacing](./keyword-spacing.md) | enforce consistent spacing before and after keywords in `<template>` | :wrench: |
-| [vue/max-len](./max-len.md) | enforce a maximum line length in `.vue` files |  |
-| [vue/no-constant-condition](./no-constant-condition.md) | disallow constant expressions in conditions in `<template>` |  |
-| [vue/no-empty-pattern](./no-empty-pattern.md) | disallow empty destructuring patterns in `<template>` |  |
-| [vue/no-extra-parens](./no-extra-parens.md) | disallow unnecessary parentheses in `<template>` | :wrench: |
-| [vue/no-irregular-whitespace](./no-irregular-whitespace.md) | disallow irregular whitespace in `.vue` files |  |
-| [vue/no-loss-of-precision](./no-loss-of-precision.md) | disallow literal numbers that lose precision in `<template>` |  |
-| [vue/no-restricted-syntax](./no-restricted-syntax.md) | disallow specified syntax in `<template>` |  |
-| [vue/no-sparse-arrays](./no-sparse-arrays.md) | disallow sparse arrays in `<template>` |  |
-| [vue/no-useless-concat](./no-useless-concat.md) | disallow unnecessary concatenation of literals or template literals in `<template>` |  |
-| [vue/object-curly-newline](./object-curly-newline.md) | enforce consistent line breaks after opening and before closing braces in `<template>` | :wrench: |
-| [vue/object-curly-spacing](./object-curly-spacing.md) | enforce consistent spacing inside braces in `<template>` | :wrench: |
-| [vue/object-property-newline](./object-property-newline.md) | enforce placing object properties on separate lines in `<template>` | :wrench: |
-| [vue/object-shorthand](./object-shorthand.md) | require or disallow method and property shorthand syntax for object literals in `<template>` | :wrench: |
-| [vue/operator-linebreak](./operator-linebreak.md) | enforce consistent linebreak style for operators in `<template>` | :wrench: |
-| [vue/prefer-template](./prefer-template.md) | require template literals instead of string concatenation in `<template>` | :wrench: |
-| [vue/quote-props](./quote-props.md) | require quotes around object literal property names in `<template>` | :wrench: |
-| [vue/space-in-parens](./space-in-parens.md) | enforce consistent spacing inside parentheses in `<template>` | :wrench: |
-| [vue/space-infix-ops](./space-infix-ops.md) | require spacing around infix operators in `<template>` | :wrench: |
-| [vue/space-unary-ops](./space-unary-ops.md) | enforce consistent spacing before or after unary operators in `<template>` | :wrench: |
-| [vue/template-curly-spacing](./template-curly-spacing.md) | require or disallow spacing around embedded expressions of template strings in `<template>` | :wrench: |
+<rules-table>
+
+| Rule ID | Description |    |    |
+|:--------|:------------|:--:|:--:|
+| [vue/array-bracket-newline](./array-bracket-newline.md) | enforce linebreaks after opening and before closing array brackets in `<template>` | :wrench: | :lipstick: |
+| [vue/array-bracket-spacing](./array-bracket-spacing.md) | enforce consistent spacing inside array brackets in `<template>` | :wrench: | :lipstick: |
+| [vue/arrow-spacing](./arrow-spacing.md) | enforce consistent spacing before and after the arrow in arrow functions in `<template>` | :wrench: | :lipstick: |
+| [vue/block-spacing](./block-spacing.md) | disallow or enforce spaces inside of blocks after opening block and before closing block in `<template>` | :wrench: | :lipstick: |
+| [vue/brace-style](./brace-style.md) | enforce consistent brace style for blocks in `<template>` | :wrench: | :lipstick: |
+| [vue/camelcase](./camelcase.md) | enforce camelcase naming convention in `<template>` |  | :hammer: |
+| [vue/comma-dangle](./comma-dangle.md) | require or disallow trailing commas in `<template>` | :wrench: | :lipstick: |
+| [vue/comma-spacing](./comma-spacing.md) | enforce consistent spacing before and after commas in `<template>` | :wrench: | :lipstick: |
+| [vue/comma-style](./comma-style.md) | enforce consistent comma style in `<template>` | :wrench: | :lipstick: |
+| [vue/dot-location](./dot-location.md) | enforce consistent newlines before and after dots in `<template>` | :wrench: | :lipstick: |
+| [vue/dot-notation](./dot-notation.md) | enforce dot notation whenever possible in `<template>` | :wrench: | :hammer: |
+| [vue/eqeqeq](./eqeqeq.md) | require the use of `===` and `!==` in `<template>` | :wrench: | :hammer: |
+| [vue/func-call-spacing](./func-call-spacing.md) | require or disallow spacing between function identifiers and their invocations in `<template>` | :wrench: | :lipstick: |
+| [vue/key-spacing](./key-spacing.md) | enforce consistent spacing between keys and values in object literal properties in `<template>` | :wrench: | :lipstick: |
+| [vue/keyword-spacing](./keyword-spacing.md) | enforce consistent spacing before and after keywords in `<template>` | :wrench: | :lipstick: |
+| [vue/max-len](./max-len.md) | enforce a maximum line length in `.vue` files |  | :lipstick: |
+| [vue/no-constant-condition](./no-constant-condition.md) | disallow constant expressions in conditions in `<template>` |  | :warning: |
+| [vue/no-empty-pattern](./no-empty-pattern.md) | disallow empty destructuring patterns in `<template>` |  | :warning: |
+| [vue/no-extra-parens](./no-extra-parens.md) | disallow unnecessary parentheses in `<template>` | :wrench: | :lipstick: |
+| [vue/no-irregular-whitespace](./no-irregular-whitespace.md) | disallow irregular whitespace in `.vue` files |  | :warning: |
+| [vue/no-loss-of-precision](./no-loss-of-precision.md) | disallow literal numbers that lose precision in `<template>` |  | :warning: |
+| [vue/no-restricted-syntax](./no-restricted-syntax.md) | disallow specified syntax in `<template>` |  | :hammer: |
+| [vue/no-sparse-arrays](./no-sparse-arrays.md) | disallow sparse arrays in `<template>` |  | :warning: |
+| [vue/no-useless-concat](./no-useless-concat.md) | disallow unnecessary concatenation of literals or template literals in `<template>` |  | :hammer: |
+| [vue/object-curly-newline](./object-curly-newline.md) | enforce consistent line breaks after opening and before closing braces in `<template>` | :wrench: | :lipstick: |
+| [vue/object-curly-spacing](./object-curly-spacing.md) | enforce consistent spacing inside braces in `<template>` | :wrench: | :lipstick: |
+| [vue/object-property-newline](./object-property-newline.md) | enforce placing object properties on separate lines in `<template>` | :wrench: | :lipstick: |
+| [vue/object-shorthand](./object-shorthand.md) | require or disallow method and property shorthand syntax for object literals in `<template>` | :wrench: | :hammer: |
+| [vue/operator-linebreak](./operator-linebreak.md) | enforce consistent linebreak style for operators in `<template>` | :wrench: | :lipstick: |
+| [vue/prefer-template](./prefer-template.md) | require template literals instead of string concatenation in `<template>` | :wrench: | :hammer: |
+| [vue/quote-props](./quote-props.md) | require quotes around object literal property names in `<template>` | :wrench: | :hammer: |
+| [vue/space-in-parens](./space-in-parens.md) | enforce consistent spacing inside parentheses in `<template>` | :wrench: | :lipstick: |
+| [vue/space-infix-ops](./space-infix-ops.md) | require spacing around infix operators in `<template>` | :wrench: | :lipstick: |
+| [vue/space-unary-ops](./space-unary-ops.md) | enforce consistent spacing before or after unary operators in `<template>` | :wrench: | :lipstick: |
+| [vue/template-curly-spacing](./template-curly-spacing.md) | require or disallow spacing around embedded expressions of template strings in `<template>` | :wrench: | :lipstick: |
+
+</rules-table>
 
 ## Deprecated
 
diff --git a/package.json b/package.json
index 2ec6b6532..093aab994 100644
--- a/package.json
+++ b/package.json
@@ -81,7 +81,6 @@
     "eslint-plugin-unicorn": "^40.1.0",
     "eslint-plugin-vue": "file:.",
     "espree": "^9.0.0",
-    "lodash": "^4.17.21",
     "markdownlint-cli": "^0.31.1",
     "mocha": "^7.1.2",
     "nyc": "^15.1.0",
diff --git a/tools/lib/utils.js b/tools/lib/utils.js
new file mode 100644
index 000000000..eb3f53fd7
--- /dev/null
+++ b/tools/lib/utils.js
@@ -0,0 +1,42 @@
+module.exports = { getPresetIds, formatItems }
+
+const presetCategories = {
+  base: null,
+  essential: 'base',
+  'vue3-essential': 'base',
+  'strongly-recommended': 'essential',
+  'vue3-strongly-recommended': 'vue3-essential',
+  recommended: 'strongly-recommended',
+  'vue3-recommended': 'vue3-strongly-recommended'
+  // 'use-with-caution': 'recommended',
+  // 'vue3-use-with-caution': 'vue3-recommended'
+}
+
+function formatItems(items, suffix) {
+  if (items.length === 1) {
+    return `${items[0]}${suffix ? ` ${suffix[0]}` : ''}`
+  }
+  if (items.length === 2) {
+    return `${items.join(' and ')}${suffix ? ` ${suffix[1]}` : ''}`
+  }
+  return `all of ${items.slice(0, -1).join(', ')} and ${[...items].pop()}${
+    suffix ? ` ${suffix[1]}` : ''
+  }`
+}
+
+function getPresetIds(categoryIds) {
+  const subsetCategoryIds = []
+  for (const categoryId of categoryIds) {
+    for (const [subsetCategoryId, supersetCategoryId] of Object.entries(
+      presetCategories
+    )) {
+      if (supersetCategoryId === categoryId) {
+        subsetCategoryIds.push(subsetCategoryId)
+      }
+    }
+  }
+  if (subsetCategoryIds.length === 0) {
+    return categoryIds
+  }
+  return [...new Set([...categoryIds, ...getPresetIds(subsetCategoryIds)])]
+}
diff --git a/tools/update-docs-rules-index.js b/tools/update-docs-rules-index.js
index 606d67179..27ab06979 100644
--- a/tools/update-docs-rules-index.js
+++ b/tools/update-docs-rules-index.js
@@ -7,9 +7,18 @@
 const fs = require('fs')
 const path = require('path')
 const rules = require('./lib/rules')
-const categories = require('./lib/categories')
+const { getPresetIds, formatItems } = require('./lib/utils')
+
+const VUE3_EMOJI = ':three:'
+const VUE2_EMOJI = ':two:'
 
 // -----------------------------------------------------------------------------
+const categorizedRules = rules.filter(
+  (rule) =>
+    rule.meta.docs.categories &&
+    !rule.meta.docs.extensionRule &&
+    !rule.meta.deprecated
+)
 const uncategorizedRules = rules.filter(
   (rule) =>
     !rule.meta.docs.categories &&
@@ -24,16 +33,23 @@ const uncategorizedExtensionRule = rules.filter(
 )
 const deprecatedRules = rules.filter((rule) => rule.meta.deprecated)
 
-function toRuleRow(rule) {
+const TYPE_MARK = {
+  problem: ':warning:',
+  suggestion: ':hammer:',
+  layout: ':lipstick:'
+}
+
+function toRuleRow(rule, kindMarks = []) {
   const mark = [
     rule.meta.fixable ? ':wrench:' : '',
     rule.meta.hasSuggestions ? ':bulb:' : '',
     rule.meta.deprecated ? ':warning:' : ''
   ].join('')
+  const kindMark = [...kindMarks, TYPE_MARK[rule.meta.type]].join('')
   const link = `[${rule.ruleId}](./${rule.name}.md)`
   const description = rule.meta.docs.description || '(no description)'
 
-  return `| ${link} | ${description} | ${mark} |`
+  return `| ${link} | ${description} | ${mark} | ${kindMark} |`
 }
 
 function toDeprecatedRuleRow(rule) {
@@ -46,25 +62,97 @@ function toDeprecatedRuleRow(rule) {
   return `| ${link} | ${replacedBy || '(no replacement)'} |`
 }
 
-// -----------------------------------------------------------------------------
-let rulesTableContent = categories
-  .map(
-    (category) => `
-## ${category.title.vuepress}
-
-Enforce all the rules in this category, as well as all higher priority rules, with:
+const categoryGroups = [
+  {
+    title: 'Base Rules (Enabling Correct ESLint Parsing)',
+    description:
+      'Rules in this category are enabled for all presets provided by eslint-plugin-vue.',
+    categoryIdForVue3: 'base',
+    categoryIdForVue2: 'base',
+    useMark: false
+  },
+  {
+    title: 'Priority A: Essential (Error Prevention)',
+    categoryIdForVue3: 'vue3-essential',
+    categoryIdForVue2: 'essential',
+    useMark: true
+  },
+  {
+    title: 'Priority B: Strongly Recommended (Improving Readability)',
+    categoryIdForVue3: 'vue3-strongly-recommended',
+    categoryIdForVue2: 'strongly-recommended',
+    useMark: true
+  },
+  {
+    title: 'Priority C: Recommended (Potentially Dangerous Patterns)',
+    categoryIdForVue3: 'vue3-recommended',
+    categoryIdForVue2: 'recommended',
+    useMark: true
+  }
+]
 
-\`\`\`json
-{
-  "extends": "plugin:vue/${category.categoryId}"
-}
-\`\`\`
+// -----------------------------------------------------------------------------
+let rulesTableContent = categoryGroups
+  .map((group) => {
+    const rules = categorizedRules.filter(
+      (rule) =>
+        rule.meta.docs.categories.includes(group.categoryIdForVue3) ||
+        rule.meta.docs.categories.includes(group.categoryIdForVue2)
+    )
+    let content = `
+## ${group.title}
+`
 
-| Rule ID | Description |    |
-|:--------|:------------|:---|
-${category.rules.map(toRuleRow).join('\n')}
+    if (group.description) {
+      content += `
+${group.description}
+`
+    }
+    if (group.useMark) {
+      const presetsForVue3 = getPresetIds([group.categoryIdForVue3]).map(
+        (categoryId) => `\`"plugin:vue/${categoryId}"\``
+      )
+      const presetsForVue2 = getPresetIds([group.categoryIdForVue2]).map(
+        (categoryId) => `\`"plugin:vue/${categoryId}"\``
+      )
+      content += `
+- ${VUE3_EMOJI} Indicates that the rule is for Vue 3 and is included in ${formatItems(
+        presetsForVue3,
+        ['preset', 'presets']
+      )}.
+- ${VUE2_EMOJI} Indicates that the rule is for Vue 2 and is included in ${formatItems(
+        presetsForVue2,
+        ['preset', 'presets']
+      )}.
 `
-  )
+    }
+
+    content += `
+<rules-table>
+
+| Rule ID | Description |    |    |
+|:--------|:------------|:--:|:--:|
+${rules
+  .map((rule) => {
+    const mark = group.useMark
+      ? [
+          rule.meta.docs.categories.includes(group.categoryIdForVue3)
+            ? [VUE3_EMOJI]
+            : [],
+          rule.meta.docs.categories.includes(group.categoryIdForVue2)
+            ? [VUE2_EMOJI]
+            : []
+        ].flat()
+      : []
+    return toRuleRow(rule, mark)
+  })
+  .join('\n')}
+
+</rules-table>
+`
+
+    return content
+  })
   .join('')
 
 // -----------------------------------------------------------------------------
@@ -90,9 +178,13 @@ For example:
 }
 if (uncategorizedRules.length > 0) {
   rulesTableContent += `
-| Rule ID | Description |    |
-|:--------|:------------|:---|
-${uncategorizedRules.map(toRuleRow).join('\n')}
+<rules-table>
+
+| Rule ID | Description |    |    |
+|:--------|:------------|:--:|:--:|
+${uncategorizedRules.map((rule) => toRuleRow(rule)).join('\n')}
+
+</rules-table>
 `
 }
 if (uncategorizedExtensionRule.length > 0) {
@@ -101,9 +193,13 @@ if (uncategorizedExtensionRule.length > 0) {
 
 The following rules extend the rules provided by ESLint itself and apply them to the expressions in the \`<template>\`.
 
-| Rule ID | Description |    |
-|:--------|:------------|:---|
-${uncategorizedExtensionRule.map(toRuleRow).join('\n')}
+<rules-table>
+
+| Rule ID | Description |    |    |
+|:--------|:------------|:--:|:--:|
+${uncategorizedExtensionRule.map((rule) => toRuleRow(rule)).join('\n')}
+
+</rules-table>
 `
 }
 
@@ -127,6 +223,7 @@ fs.writeFileSync(
   readmeFilePath,
   `---
 sidebarDepth: 0
+pageClass: rule-list
 ---
 
 # Available rules
@@ -139,5 +236,12 @@ sidebarDepth: 0
   :bulb: Indicates that some problems reported by the rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
 :::
 
-${rulesTableContent}`
+Mark indicating rule type:
+
+- <span class="emoji">:warning:</span> Possible Problems: These rules relate to possible logic errors in code.
+- :hammer: Suggestions: These rules suggest alternate ways of doing things.
+- :lipstick: Layout & Formatting: These rules care about how the code looks rather than how it executes.
+
+${rulesTableContent.trim()}
+`
 )
diff --git a/tools/update-docs.js b/tools/update-docs.js
index 6f2d2255a..c34f3e1a0 100644
--- a/tools/update-docs.js
+++ b/tools/update-docs.js
@@ -20,45 +20,11 @@ For example:
 
 const fs = require('fs')
 const path = require('path')
-const last = require('lodash/last')
 const rules = require('./lib/rules')
+const { getPresetIds, formatItems } = require('./lib/utils')
 
 const ROOT = path.resolve(__dirname, '../docs/rules')
 
-const presetCategories = {
-  base: null,
-  essential: 'base',
-  'vue3-essential': 'base',
-  'strongly-recommended': 'essential',
-  'vue3-strongly-recommended': 'vue3-essential',
-  recommended: 'strongly-recommended',
-  'vue3-recommended': 'vue3-strongly-recommended'
-  // 'use-with-caution': 'recommended',
-  // 'vue3-use-with-caution': 'vue3-recommended'
-}
-
-function formatItems(items) {
-  if (items.length <= 2) {
-    return items.join(' and ')
-  }
-  return `all of ${items.slice(0, -1).join(', ')} and ${last(items)}`
-}
-
-function getPresetIds(categoryIds) {
-  const subsetCategoryIds = []
-  for (const categoryId of categoryIds) {
-    for (const subsetCategoryId in presetCategories) {
-      if (presetCategories[subsetCategoryId] === categoryId) {
-        subsetCategoryIds.push(subsetCategoryId)
-      }
-    }
-  }
-  if (subsetCategoryIds.length === 0) {
-    return categoryIds
-  }
-  return [...new Set([...categoryIds, ...getPresetIds(subsetCategoryIds)])]
-}
-
 function pickSince(content) {
   const fileIntro = /^---\n(.*\n)+---\n*/g.exec(content)
   if (fileIntro) {