diff --git a/.changeset/README.md b/.changeset/README.md
new file mode 100644
index 000000000..e5b6d8d6a
--- /dev/null
+++ b/.changeset/README.md
@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)
diff --git a/.changeset/config.json b/.changeset/config.json
new file mode 100644
index 000000000..43b72b358
--- /dev/null
+++ b/.changeset/config.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config/schema.json",
+  "changelog": [
+    "@svitejs/changesets-changelog-github-compact",
+    {
+      "repo": "vuejs/eslint-plugin-vue"
+    }
+  ],
+  "commit": false,
+  "linked": [],
+  "access": "public",
+  "baseBranch": "master",
+  "bumpVersionsWithWorkspaceProtocolOnly": true,
+  "ignore": []
+}
diff --git a/.changeset/gorgeous-colts-bathe.md b/.changeset/gorgeous-colts-bathe.md
new file mode 100644
index 000000000..e5f3a14a8
--- /dev/null
+++ b/.changeset/gorgeous-colts-bathe.md
@@ -0,0 +1,5 @@
+---
+"eslint-plugin-vue": patch
+---
+
+Updates resources
diff --git a/.changeset/rich-zebras-type.md b/.changeset/rich-zebras-type.md
new file mode 100644
index 000000000..62c2438ae
--- /dev/null
+++ b/.changeset/rich-zebras-type.md
@@ -0,0 +1,5 @@
+---
+"eslint-plugin-vue": minor
+---
+
+Changed `vue/no-negated-v-if-condition` suggestion to autofix
diff --git a/.circleci/config.yml b/.circleci/config.yml
deleted file mode 100644
index 0ba3d33dc..000000000
--- a/.circleci/config.yml
+++ /dev/null
@@ -1,119 +0,0 @@
-workflows:
-  version: 2
-  node-multi-build:
-    jobs:
-      - eslint-v6
-      - eslint-v7
-      - ts-eslint-v4
-      - node-v14
-      - node-v16
-      - lint
-
-version: 2
-jobs:
-  node-base: &node-base
-    docker:
-      - image: node
-    steps:
-      - run:
-          name: Versions
-          command: npm version
-      - checkout
-      # - restore_cache:
-      #     keys:
-      #       - v2-npm-lock-{{ .Branch }}-{{ .Environment.CIRCLE_JOB }}-{{ checksum "package.json" }}
-      - run:
-          name: Install dependencies
-          command: npm install --legacy-peer-deps
-      - run:
-          name: Test
-          command: npm test
-      # - save_cache:
-      #     key: v2-npm-lock-{{ .Branch }}-{{ .Environment.CIRCLE_JOB }}-{{ checksum "package.json" }}
-      #     paths:
-      #       - node_modules
-
-  eslint-v6:
-    docker:
-      - image: node:14
-    steps:
-      - run:
-          name: Versions
-          command: npm version
-      - checkout
-      - run:
-          name: Install eslint@6
-          command: |
-            npm install --save-exact eslint@6.8.0
-      - run:
-          name: Install dependencies
-          command: npm install
-      - run:
-          name: Test
-          command: npm test
-  eslint-v7:
-    docker:
-      - image: node:14
-    steps:
-      - run:
-          name: Versions
-          command: npm version
-      - checkout
-      - run:
-          name: Install eslint@7
-          command: |
-            npm install eslint@7
-      - run:
-          name: Install dependencies
-          command: npm install
-      - run:
-          name: Test
-          command: npm test
-  ts-eslint-v4:
-    docker:
-      - image: node:14
-    steps:
-      - run:
-          name: Versions
-          command: npm version
-      - checkout
-      - run:
-          name: Install @typescript-eslint/parser@4 eslint@7
-          command: |
-            npm install @typescript-eslint/parser@^4 eslint@7
-      - run:
-          name: Install dependencies
-          command: npm install
-      - run:
-          name: Test
-          command: npm test
-  node-v14:
-    <<: *node-base
-    docker:
-      - image: node:14
-  node-v16:
-    <<: *node-base
-    docker:
-      - image: node:16
-
-  lint:
-    docker:
-      - image: node:14
-    steps:
-      - run:
-          name: Versions
-          command: npm version
-      - checkout
-      - restore_cache:
-          keys:
-            - v2-npm-lock-{{ .Branch }}-{{ .Environment.CIRCLE_JOB }}-{{ checksum "package.json" }}
-      - run:
-          name: Install dependencies
-          command: npm install
-      - save_cache:
-          key: v2-npm-lock-{{ .Branch }}-{{ .Environment.CIRCLE_JOB }}-{{ checksum "package.json" }}
-          paths:
-            - node_modules
-      - run:
-          name: Lint
-          command: npm run lint
diff --git a/.eslintignore b/.eslintignore
deleted file mode 100644
index 1905aa4a8..000000000
--- a/.eslintignore
+++ /dev/null
@@ -1,8 +0,0 @@
-/.nyc_output
-/coverage
-/node_modules
-/tests/fixtures
-/tests/integrations/eslint-plugin-import
-
-!.vuepress
-/docs/.vuepress/dist
diff --git a/.eslintrc.js b/.eslintrc.js
deleted file mode 100644
index b73aa7c94..000000000
--- a/.eslintrc.js
+++ /dev/null
@@ -1,172 +0,0 @@
-'use strict'
-
-module.exports = {
-  root: true,
-  parserOptions: {
-    ecmaVersion: 'latest'
-  },
-  env: {
-    es6: true,
-    node: true,
-    mocha: true
-  },
-  extends: [
-    'plugin:eslint-plugin/recommended',
-    'prettier',
-    'plugin:node-dependencies/recommended',
-    'plugin:jsonc/recommended-with-jsonc',
-    'plugin:unicorn/recommended'
-  ],
-  plugins: ['eslint-plugin', 'prettier', 'unicorn'],
-  rules: {
-    'accessor-pairs': 2,
-    camelcase: [2, { properties: 'never' }],
-    'constructor-super': 2,
-    eqeqeq: [2, 'allow-null'],
-    'handle-callback-err': [2, '^(err|error)$'],
-    'jsx-quotes': [2, 'prefer-single'],
-    'new-cap': [2, { newIsCap: true, capIsNew: false }],
-    'new-parens': 2,
-    'no-array-constructor': 2,
-    'no-caller': 2,
-    'no-class-assign': 2,
-    'no-cond-assign': 2,
-    'no-const-assign': 2,
-    'no-control-regex': 2,
-    'no-delete-var': 2,
-    'no-dupe-args': 2,
-    'no-dupe-class-members': 2,
-    'no-dupe-keys': 2,
-    'no-duplicate-case': 2,
-    'no-empty-character-class': 2,
-    'no-empty-pattern': 2,
-    'no-eval': 2,
-    'no-ex-assign': 2,
-    'no-extend-native': 2,
-    'no-extra-bind': 2,
-    'no-extra-boolean-cast': 2,
-    'no-extra-parens': [2, 'functions'],
-    'no-fallthrough': 2,
-    'no-floating-decimal': 2,
-    'no-func-assign': 2,
-    'no-implied-eval': 2,
-    'no-inner-declarations': [2, 'functions'],
-    'no-invalid-regexp': 2,
-    'no-irregular-whitespace': 2,
-    'no-iterator': 2,
-    'no-label-var': 2,
-    'no-labels': [2, { allowLoop: false, allowSwitch: false }],
-    'no-lone-blocks': 2,
-    'no-multi-spaces': [2, { ignoreEOLComments: true }],
-    'no-multi-str': 2,
-    'no-native-reassign': 2,
-    'no-negated-in-lhs': 2,
-    'no-new-object': 2,
-    'no-new-require': 2,
-    'no-new-symbol': 2,
-    'no-new-wrappers': 2,
-    'no-obj-calls': 2,
-    'no-octal': 2,
-    'no-octal-escape': 2,
-    'no-path-concat': 2,
-    'no-proto': 2,
-    'no-redeclare': 2,
-    'no-regex-spaces': 2,
-    'no-return-assign': [2, 'except-parens'],
-    'no-self-assign': 2,
-    'no-self-compare': 2,
-    'no-sequences': 2,
-    'no-shadow-restricted-names': 2,
-    'no-sparse-arrays': 2,
-    'no-this-before-super': 2,
-    'no-throw-literal': 2,
-    'no-undef': 2,
-    'no-undef-init': 2,
-    'no-unexpected-multiline': 2,
-    'no-unmodified-loop-condition': 2,
-    'no-unneeded-ternary': [2, { defaultAssignment: false }],
-    'no-unreachable': 2,
-    'no-unsafe-finally': 2,
-    'no-unused-vars': [2, { vars: 'all', args: 'none' }],
-    'no-useless-call': 2,
-    'no-useless-computed-key': 2,
-    'no-useless-constructor': 2,
-    'no-useless-escape': 0,
-    'no-with': 2,
-    'one-var': [2, { initialized: 'never' }],
-    'use-isnan': 2,
-    'valid-typeof': 2,
-    'wrap-iife': [2, 'any'],
-    yoda: [2, 'never'],
-    'prefer-const': 2,
-
-    'prettier/prettier': 'error',
-    'eslint-plugin/report-message-format': ['error', "^[A-Z`'{].*\\.$"],
-    'eslint-plugin/prefer-placeholders': 'error',
-    'eslint-plugin/consistent-output': 'error',
-
-    'no-debugger': 'error',
-    'no-console': 'error',
-    'no-alert': 'error',
-    'no-void': 'error',
-
-    'no-warning-comments': 'warn',
-    'no-var': 'error',
-    'prefer-template': 'error',
-    'object-shorthand': 'error',
-    'prefer-rest-params': 'error',
-    'prefer-arrow-callback': 'error',
-    'prefer-spread': 'error',
-
-    'dot-notation': 'error',
-    'arrow-body-style': 'error',
-
-    'unicorn/consistent-function-scoping': [
-      'error',
-      { checkArrowFunctions: false }
-    ],
-    'unicorn/filename-case': 'off',
-    'unicorn/no-null': 'off',
-    'unicorn/no-array-callback-reference': 'off', // doesn't work well with TypeScript's custom type guards
-    'unicorn/no-useless-undefined': 'off',
-    'unicorn/prefer-optional-catch-binding': 'off', // not supported by current ESLint parser version
-    'unicorn/prefer-module': 'off',
-    'unicorn/prevent-abbreviations': 'off'
-  },
-  overrides: [
-    {
-      files: ['./**/*.vue'],
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions: {
-        ecmaVersion: 'latest',
-        sourceType: 'module'
-      }
-    },
-    {
-      files: ['lib/rules/*.js'],
-      rules: {
-        'eslint-plugin/no-deprecated-context-methods': 'error',
-        'eslint-plugin/no-only-tests': 'error',
-        'eslint-plugin/prefer-object-rule': 'error',
-        'eslint-plugin/require-meta-docs-description': 'error',
-        'eslint-plugin/require-meta-docs-url': [
-          'error',
-          {
-            pattern: `https://eslint.vuejs.org/rules/{{name}}.html`
-          }
-        ],
-        'eslint-plugin/require-meta-has-suggestions': 'error',
-        'eslint-plugin/require-meta-schema': 'error',
-        'eslint-plugin/require-meta-type': 'error',
-        'no-invalid-meta': 'error',
-        'no-invalid-meta-docs-categories': 'error'
-      }
-    },
-    {
-      files: ['*.json'],
-      rules: {
-        'prettier/prettier': 'off'
-      }
-    }
-  ]
-}
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
new file mode 100644
index 000000000..c4d031e9c
--- /dev/null
+++ b/.github/FUNDING.yml
@@ -0,0 +1,3 @@
+github:
+  - ota-meshi
+  - FloEdelmann
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
index f1169f466..08d755127 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -26,6 +26,7 @@ about: Create a report to help us improve
 
 - **ESLint version:** 
 - **eslint-plugin-vue version:** 
+- **Vue version:** 
 - **Node version:** 
 - **Operating System:** 
 
diff --git a/.github/ISSUE_TEMPLATE/change.md b/.github/ISSUE_TEMPLATE/change.md
index a6a4a7dc0..02397f6cd 100644
--- a/.github/ISSUE_TEMPLATE/change.md
+++ b/.github/ISSUE_TEMPLATE/change.md
@@ -13,6 +13,7 @@ about: Request a change that is not a bug fix, rule change, or new rule
 
 - **ESLint version:** 
 - **eslint-plugin-vue version:** 
+- **Vue version:** 
 - **Node version:** 
 
 **The problem you want to solve.**
diff --git a/.github/workflows/CI.yml b/.github/workflows/CI.yml
index dedfe4110..69cac752d 100644
--- a/.github/workflows/CI.yml
+++ b/.github/workflows/CI.yml
@@ -1,42 +1,110 @@
 name: CI
 on:
   push:
-    branches: [master]
+    branches:
+      - 'master'
   pull_request:
-    branches: [master]
+    types:
+      - 'opened'
+      - 'synchronize'
+      - 'reopened'
+
+permissions:
+  contents: read
 
 jobs:
   lint:
     name: Lint
     runs-on: ubuntu-latest
     steps:
-    - name: Checkout
-      uses: actions/checkout@v3
-    - name: Install Node.js
-      uses: actions/setup-node@v3
-      with:
-        node-version: 16
-    - name: Install Packages
-      run: npm install --legacy-peer-deps
-    - name: Lint
-      run: npm run lint
+      - name: Checkout
+        uses: actions/checkout@v5
+      - name: Install Node.js
+        uses: actions/setup-node@v6
+      - name: Install Packages
+        run: npm install --legacy-peer-deps
+      - name: Lint
+        run: npm run lint
 
   test:
     name: Test
     strategy:
       matrix:
-        node: [17, 18]
-        os: [ubuntu-latest]
+        node: [18, 20, 21, 'lts/*']
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5
+      - name: Install Node.js v${{ matrix.node }}
+        uses: actions/setup-node@v6
+        with:
+          node-version: ${{ matrix.node }}
+      - name: Install Packages
+        run: npm install
+      - name: Test
+        run: npm test
+
+  test-with-eslint-v8:
+    name: Test with ESLint v8
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5
+      - name: Install Node.js v18
+        uses: actions/setup-node@v6
+        with:
+          node-version: 18
+      - name: Install Packages
+        run: npm install
+      - name: Install ESLint v8
+        run: npm install --save-dev eslint@8 --force
+      - name: Test
+        run: npm test
 
-    runs-on: ${{ matrix.os }}
+  test-without-eslint-stylistic:
+    name: Test without ESLint Stylistic
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5
+      - name: Install Node.js
+        uses: actions/setup-node@v6
+      - name: Install Packages
+        run: npm install
+      - name: Uninstall @stylistic/eslint-plugin
+        run: npm uninstall @stylistic/eslint-plugin
+      - name: Test
+        run: npm test
+
+  test-with-old-eslint-stylistic:
+    name: Test with old ESLint Stylistic
+    strategy:
+      matrix:
+        stylistic: [2, 3, 4]
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5
+      - name: Install Node.js
+        uses: actions/setup-node@v6
+      - name: Install Packages
+        run: npm install
+      - name: Install @stylistic/eslint-plugin v${{ matrix.stylistic }}
+        run: npm install -D @stylistic/eslint-plugin@${{ matrix.stylistic }} --force
+      - name: Test
+        run: npm test
+
+  test-with-typescript-eslint-v7:
+    name: Test with typescript-eslint v7
+    runs-on: ubuntu-latest
     steps:
-    - name: Checkout
-      uses: actions/checkout@v3
-    - name: Install Node.js v${{ matrix.node }}
-      uses: actions/setup-node@v3
-      with:
-        node-version: ${{ matrix.node }}
-    - name: Install Packages
-      run: npm install --legacy-peer-deps
-    - name: Test
-      run: npm test
+      - name: Checkout
+        uses: actions/checkout@v5
+      - name: Install Node.js
+        uses: actions/setup-node@v6
+      - name: Install Packages
+        run: npm install
+      - name: Install @typescript-eslint/parser v7
+        run: npm install -D @typescript-eslint/parser@7 --force
+      - name: Test
+        run: npm test
diff --git a/.github/workflows/Release.yml b/.github/workflows/Release.yml
new file mode 100644
index 000000000..feb5a19e5
--- /dev/null
+++ b/.github/workflows/Release.yml
@@ -0,0 +1,37 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - master
+
+permissions: {}
+
+jobs:
+  release:
+    # prevents this action from running on forks
+    if: github.repository == 'vuejs/eslint-plugin-vue'
+    permissions:
+      contents: write # to create release (changesets/action)
+      pull-requests: write # to create pull request (changesets/action)
+      id-token: write # OpenID Connect token needed for Trusted Publisher
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v5
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: 24
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Create Release Pull Request or Publish to npm
+        id: changesets
+        uses: changesets/action@v1
+        with:
+          version: npm run changeset:version
+          publish: npm run changeset:publish
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.github/workflows/check-for-resources-update.yml b/.github/workflows/check-for-resources-update.yml
new file mode 100644
index 000000000..362ca48cc
--- /dev/null
+++ b/.github/workflows/check-for-resources-update.yml
@@ -0,0 +1,31 @@
+name: Check for utils resources update
+on:
+  workflow_dispatch: null
+  schedule:
+    - cron: 0 0 * * 0 # At 00:00 on Sunday, see https://crontab.guru/#0_0_*_*_0
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  check-for-resources-update:
+    runs-on: ubuntu-latest
+    if: ${{ github.repository == 'vuejs/eslint-plugin-vue' }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5
+      - name: Install Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: 18
+      - name: Install Packages
+        run: npm install
+      - name: Update
+        run: npm run update-resources
+      - uses: peter-evans/create-pull-request@v7
+        with:
+          commit-message: Updates resources
+          branch: update-resources
+          branch-suffix: timestamp
+          title: Updates resources
diff --git a/.gitignore b/.gitignore
index e1401b951..d6fadf92c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,5 +7,10 @@
 /test.*
 yarn.lock
 yarn-error.log
-docs/.vuepress/dist
+/docs/.vitepress/dist
+/docs/.vitepress/build-system/shim/vue-eslint-parser.mjs
+/docs/.vitepress/build-system/shim/@typescript-eslint/parser.mjs
+/docs/.vitepress/.temp
+/docs/.vitepress/cache
 typings/eslint/lib/rules
+eslint-typegen.d.ts
diff --git a/.markdownlint.yml b/.markdownlint.yml
index b300725cc..6591a3543 100644
--- a/.markdownlint.yml
+++ b/.markdownlint.yml
@@ -1,4 +1,5 @@
 line-length: false
+link-fragments: false
 single-title: false
 no-inline-html:
   allowed_elements:
@@ -14,7 +15,7 @@ code-block-style:
 code-fence-style:
   style: backtick
 emphasis-style:
-  style: asterisk
+  style: underscore
 heading-style:
   style: atx
 hr-style:
diff --git a/.markdownlintignore b/.markdownlintignore
index 3c3629e64..e7becf85b 100644
--- a/.markdownlintignore
+++ b/.markdownlintignore
@@ -1 +1,2 @@
 node_modules
+CHANGELOG.md
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 000000000..d341f1772
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,2 @@
+tests/fixtures/
+.github/ISSUE_TEMPLATE/*.md
diff --git a/.vscode/launch.json b/.vscode/launch.json
index 324a79864..997cf0bca 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -5,11 +5,16 @@
       "type": "node",
       "request": "launch",
       "name": "Start testing",
-      "program": "${workspaceFolder}/node_modules/.bin/mocha",
-      "args": [
-        "${file}",
-        "--watch"
-      ],
+      "program": "${workspaceFolder}/node_modules/.bin/vitest",
+      "args": ["run", "${file}", "--reporter=verbose"],
+      "console": "integratedTerminal"
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Start testing (watch)",
+      "program": "${workspaceFolder}/node_modules/.bin/vitest",
+      "args": ["${file}", "--reporter=verbose"],
       "console": "integratedTerminal"
     }
   ]
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 80e1f88fd..20102543c 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,19 +1,21 @@
 {
-    "editor.tabSize": 2,
-    "eslint.options": {
-        "rulePaths": ["eslint-internal-rules"]
-    },
-    "eslint.validate": [
-        "javascript",
-        "javascriptreact",
-        "vue",
-        "json",
-        "jsonc"
-    ],
-    "typescript.tsdk": "./node_modules/typescript/lib",
-    "vetur.validation.script": false,
-    "[typescript]": {
-        "editor.formatOnSave": true,
-        "editor.defaultFormatter": "esbenp.prettier-vscode"
-    },
+  "editor.tabSize": 2,
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "vue",
+    "json",
+    "jsonc",
+    "markdown"
+  ],
+  "typescript.tsdk": "./node_modules/typescript/lib",
+  "vetur.validation.script": false,
+  "[typescript]": {
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascript]": {
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 000000000..4bbb44fa6
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,87 @@
+# eslint-plugin-vue
+
+## 10.6.2
+
+### Patch Changes
+
+- Fixed false positives in non-intersecting conditions in [`vue/no-duplicate-class-names`](https://eslint.vuejs.org/rules/no-duplicate-class-names.html) and correctly detect duplicates in combining expressions ([#2980](https://github.com/vuejs/eslint-plugin-vue/pull/2980))
+- Fixed false positives for `TSImportType` in [`vue/script-indent`](https://eslint.vuejs.org/rules/script-indent.html) rule ([#2969](https://github.com/vuejs/eslint-plugin-vue/pull/2969))
+- Improved performance and type safety in [`vue/prefer-use-template-ref`](https://eslint.vuejs.org/rules/prefer-use-template-ref.html) ([#2982](https://github.com/vuejs/eslint-plugin-vue/pull/2982))
+
+## 10.6.1
+
+### Patch Changes
+
+- Fixed false positives for comments outside `<template>` in [`vue/no-multiple-template-root`](https://eslint.vuejs.org/rules/no-multiple-template-root.html) rule ([#2964](https://github.com/vuejs/eslint-plugin-vue/pull/2964))
+
+## 10.6.0
+
+### Minor Changes
+
+- Updated [`vue/no-import-compiler-macros`](https://eslint.vuejs.org/rules/no-import-compiler-macros.html) to clarify that macros are not allowed outside `<script setup>` ([#2938](https://github.com/vuejs/eslint-plugin-vue/pull/2938))
+- Added new [`vue/no-duplicate-class-names`](https://eslint.vuejs.org/rules/no-duplicate-class-names.html) rule ([#2934](https://github.com/vuejs/eslint-plugin-vue/pull/2934))
+
+### Patch Changes
+
+- Fixed [`vue/no-v-html`](https://eslint.vuejs.org/rules/no-v-html.html) rule to allow ignoring call expressions ([#2950](https://github.com/vuejs/eslint-plugin-vue/pull/2950))
+- Improved [`vue/define-macros-order`](https://eslint.vuejs.org/rules/define-macros-order.html) error messages to distinguish between macro placement and ordering issues ([#2953](https://github.com/vuejs/eslint-plugin-vue/pull/2953))
+- Updated dependency [postcss-selector-parser](https://github.com/postcss/postcss-selector-parser) to v7.1.0 ([#2947](https://github.com/vuejs/eslint-plugin-vue/pull/2947))
+
+## 10.5.1
+
+### Patch Changes
+
+- Fixed [`vue/no-negated-v-if-condition`](https://eslint.vuejs.org/rules/no-negated-v-if-condition.html) rule to swap entire elements ([#2941](https://github.com/vuejs/eslint-plugin-vue/pull/2941))
+
+## 10.5.0
+
+### Minor Changes
+
+- Added `ignoredObjectNames` option to [`vue/no-async-in-computed-properties`](https://eslint.vuejs.org/rules/no-async-in-computed-properties.html) ([#2927](https://github.com/vuejs/eslint-plugin-vue/pull/2927))
+- Added `ignorePattern` option to [`vue/no-v-html`](https://eslint.vuejs.org/rules/no-v-html.html) ([#2857](https://github.com/vuejs/eslint-plugin-vue/pull/2857))
+- Added `sortLineLength` option to [`vue/attributes-order`](https://eslint.vuejs.org/rules/attributes-order.html) ([#2759](https://github.com/vuejs/eslint-plugin-vue/pull/2759))
+- Changed [`vue/component-name-in-template-casing`](https://eslint.vuejs.org/rules/component-name-in-template-casing.html) `globals` option to support regex patterns ([#2928](https://github.com/vuejs/eslint-plugin-vue/pull/2928))
+- Changed [`vue/valid-define-options`](https://eslint.vuejs.org/rules/valid-define-options.html) to allow local literal constant references ([#2920](https://github.com/vuejs/eslint-plugin-vue/pull/2920))
+- Changed [`vue/no-mutating-props`](https://eslint.vuejs.org/rules/no-mutating-props.html) and [`vue/no-side-effects-in-computed-properties`](https://eslint.vuejs.org/rules/no-side-effects-in-computed-properties.html) rules to detect `Object.assign` mutations ([#2929](https://github.com/vuejs/eslint-plugin-vue/pull/2929))
+- Added [`@stylistic/eslint-plugin`](https://eslint.style/) as optional peer dependency ([#2884](https://github.com/vuejs/eslint-plugin-vue/pull/2884))
+
+### Patch Changes
+
+- Changed [`vue/define-macros-order`](https://eslint.vuejs.org/rules/define-macros-order.html) to ignore enum declarations and `declare` statements ([#2918](https://github.com/vuejs/eslint-plugin-vue/pull/2918))
+
+## 10.4.0
+
+### Minor Changes
+
+- Added `ignoreParents` option to [`vue/no-deprecated-slot-attribute`](https://eslint.vuejs.org/rules/no-deprecated-slot-attribute.html) ([#2784](https://github.com/vuejs/eslint-plugin-vue/pull/2784))
+- Added new [`vue/no-negated-v-if-condition`](https://eslint.vuejs.org/rules/no-negated-v-if-condition.html) rule ([#2794](https://github.com/vuejs/eslint-plugin-vue/pull/2794))
+- Added new [`vue/no-negated-condition`](https://eslint.vuejs.org/rules/no-negated-condition.html) rule ([#2795](https://github.com/vuejs/eslint-plugin-vue/pull/2795))
+
+### Patch Changes
+
+- Resolved TypeScript compatibility issues introduced by [eslint-typegen](https://github.com/antfu/eslint-typegen) ([#2790](https://github.com/vuejs/eslint-plugin-vue/pull/2790))
+- Fixed inconsistent quotes in [`vue/block-lang`](https://eslint.vuejs.org/rules/block-lang.html) error messages ([#2805](https://github.com/vuejs/eslint-plugin-vue/pull/2805))
+
+## 10.3.0
+
+### Minor Changes
+
+- Added [`@typescript-eslint/parser`](https://typescript-eslint.io/packages/parser) as an optional peer dependency ([#2775](https://github.com/vuejs/eslint-plugin-vue/pull/2775))
+- Add TypeScript IntelliSense support via [eslint-typegen](https://github.com/antfu/eslint-typegen) ([#2770](https://github.com/vuejs/eslint-plugin-vue/pull/2770))
+- [`vue/no-deprecated-slot-attribute`](https://eslint.vuejs.org/rules/no-deprecated-slot-attribute.html) `ignore` option now supports regex patterns ([#2773](https://github.com/vuejs/eslint-plugin-vue/pull/2773))
+
+### Patch Changes
+
+- Fixed false negatives when using typescript-eslint v8 in [`vue/script-indent`](https://eslint.vuejs.org/rules/script-indent.html) rule ([#2775](https://github.com/vuejs/eslint-plugin-vue/pull/2775))
+- Update resources ([#2752](https://github.com/vuejs/eslint-plugin-vue/pull/2752))
+- [`vue/no-restricted-html-elements`](https://eslint.vuejs.org/rules/no-restricted-html-elements.html) now also checks SVG and MathML elements ([#2755](https://github.com/vuejs/eslint-plugin-vue/pull/2755))
+
+## 10.2.0
+
+### Minor Changes
+
+- [vue/no-restricted-html-elements](https://eslint.vuejs.org/rules/no-restricted-html-elements.html) now accepts multiple elements in each entry. ([#2750](https://github.com/vuejs/eslint-plugin-vue/pull/2750))
+
+### Patch Changes
+
+- Updates resources ([#2747](https://github.com/vuejs/eslint-plugin-vue/pull/2747))
diff --git a/README.md b/README.md
index cacd80209..01bc6b687 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 [![NPM version](https://img.shields.io/npm/v/eslint-plugin-vue.svg?style=flat)](https://npmjs.org/package/eslint-plugin-vue)
 [![NPM downloads](https://img.shields.io/npm/dm/eslint-plugin-vue.svg?style=flat)](https://npmjs.org/package/eslint-plugin-vue)
-[![CircleCI](https://img.shields.io/circleci/project/github/vuejs/eslint-plugin-vue/master.svg?style=flat)](https://circleci.com/gh/vuejs/eslint-plugin-vue)
+[![CI](https://img.shields.io/github/actions/workflow/status/vuejs/eslint-plugin-vue/CI.yml?style=flat&label=CI)](https://github.com/vuejs/eslint-plugin-vue/actions/workflows/CI.yml)
 [![License](https://img.shields.io/github/license/vuejs/eslint-plugin-vue.svg?style=flat)](https://github.com/vuejs/eslint-plugin-vue/blob/master/LICENSE)
 
 > Official ESLint plugin for Vue.js
@@ -13,7 +13,14 @@ Please refer to the [official website](https://eslint.vuejs.org).
 
 ## :anchor: Versioning Policy
 
-This plugin follows [Semantic Versioning](https://semver.org) and [ESLint's Semantic Versioning Policy](https://github.com/eslint/eslint#semantic-versioning-policy).
+This plugin follows [Semantic Versioning].
+However, please note that we do not follow [ESLint's Semantic Versioning Policy].
+In minor version releases, this plugin may change the sharable configs provided by the plugin or the default behavior of the plugin's rules in order to add features to the plugin. Because we want to add many features to the plugin soon, so that users can easily take advantage of new features in Vue and Nuxt.
+
+According to our policy, any minor update may report more linting errors than the previous release. As such, we recommend using the [tilde (`~`)](https://semver.npmjs.com/#syntax-examples) in `package.json` to guarantee the results of your builds.
+
+[Semantic Versioning]: https://semver.org/
+[ESLint's Semantic Versioning Policy]: https://github.com/eslint/eslint#semantic-versioning-policy
 
 ## :newspaper: Releases
 
@@ -27,13 +34,13 @@ Contributing is welcome! See the [ESLint Vue Plugin Developer Guide](https://esl
 
 Be sure to read the [official ESLint guide](https://eslint.org/docs/developer-guide/working-with-rules) before you start writing a new rule.
 
-To see what an abstract syntax tree (AST) of your code looks like, you may use [AST Explorer](https://astexplorer.net). After opening [AST Explorer](https://astexplorer.net), select `Vue` as the syntax and `vue-eslint-parser` as the parser.
+To see what an abstract syntax tree (AST) of your code looks like, you may use [AST Explorer](https://astexplorer.net). After opening [AST Explorer](https://astexplorer.net), select `Vue` as the syntax and [`vue-eslint-parser`](https://github.com/vuejs/vue-eslint-parser) as the parser.
 
 The default JavaScript parser must be replaced because [Vue.js single file components](https://vuejs.org/guide/scaling-up/sfc.html) are not plain JavaScript, but a custom file format. [`vue-eslint-parser`](https://github.com/vuejs/vue-eslint-parser) is a replacement parser that generates an enhanced AST with nodes that represent specific parts of the template syntax, as well as the contents of the `<script>` tag.
 
 To learn more about certain nodes in a produced AST, see the [ESTree project page](https://github.com/estree/estree) and the [vue-eslint-parser AST documentation](https://github.com/vuejs/vue-eslint-parser/blob/master/docs/ast.md).
 
-`vue-eslint-parser` provides a few useful parser services to help traverse the produced AST and access template tokens:
+[`vue-eslint-parser`](https://github.com/vuejs/vue-eslint-parser) provides a few useful parser services to help traverse the produced AST and access template tokens:
 
 - `context.parserServices.defineTemplateBodyVisitor(visitor, scriptVisitor)`
 - `context.parserServices.getTemplateBodyTokenStore()`
diff --git a/docs/.eslintrc.js b/docs/.eslintrc.js
deleted file mode 100644
index 1ec3b7eae..000000000
--- a/docs/.eslintrc.js
+++ /dev/null
@@ -1,7 +0,0 @@
-'use strict'
-
-module.exports = {
-  parserOptions: {
-    sourceType: 'module'
-  }
-}
diff --git a/docs/.vitepress/build-system/build.mts b/docs/.vitepress/build-system/build.mts
new file mode 100644
index 000000000..39117fe84
--- /dev/null
+++ b/docs/.vitepress/build-system/build.mts
@@ -0,0 +1,92 @@
+/**
+ * Pre-build cjs packages that cannot be bundled well.
+ */
+import esbuild from 'esbuild'
+import path from 'pathe'
+import fs from 'fs'
+import { fileURLToPath } from 'url'
+
+const dirname = path.dirname(fileURLToPath(import.meta.url))
+
+build(
+  path.join(
+    dirname,
+    '../../../node_modules/@typescript-eslint/parser/dist/index.js'
+  ),
+  path.join(dirname, './shim/@typescript-eslint/parser.mjs'),
+  [
+    'util',
+    'node:util',
+    'path',
+    'node:path',
+    'fs',
+    'node:fs',
+    'semver',
+    'fast-glob',
+    'tinyglobby',
+    'debug'
+  ]
+)
+
+build(
+  path.join(dirname, '../../../node_modules/vue-eslint-parser/index.js'),
+  path.join(dirname, './shim/vue-eslint-parser.mjs'),
+  [
+    'path',
+    'debug',
+    'semver',
+    'assert',
+    'module',
+    'events',
+    'esquery',
+    'fs',
+    'eslint'
+  ]
+)
+
+function build(input: string, out: string, injects: string[] = []) {
+  // eslint-disable-next-line no-console -- ignore
+  console.log(`build@ ${input}`)
+  let code = bundle(input, injects)
+  code = transform(code, injects)
+  fs.mkdirSync(path.dirname(out), { recursive: true })
+  fs.writeFileSync(out, code, 'utf8')
+}
+
+function bundle(entryPoint: string, externals: string[]) {
+  const result = esbuild.buildSync({
+    entryPoints: [entryPoint],
+    format: 'esm',
+    bundle: true,
+    external: externals,
+    write: false,
+    inject: [path.join(dirname, './src/process-shim.mjs')]
+  })
+
+  return `${result.outputFiles[0].text}`
+}
+
+function transform(code: string, injects: string[]) {
+  const normalizeInjects = [
+    ...new Set(injects.map((inject) => inject.replace(/^node:/u, '')))
+  ]
+  const newCode = code.replace(/"[a-z]+" = "[a-z]+";/u, '')
+  return `
+${normalizeInjects
+  .map(
+    (inject) =>
+      `import $inject_${inject.replace(/[\-:]/gu, '_')}$ from '${inject}';`
+  )
+  .join('\n')}
+const $_injects_$ = {${injects
+    .map(
+      (inject) =>
+        `"${inject}":$inject_${inject.replace(/^node:/u, '').replace(/[\-:]/gu, '_')}$`
+    )
+    .join(',\n')}};
+function require(module, ...args) {
+  return $_injects_$[module] || {}
+}
+${newCode}
+`
+}
diff --git a/docs/.vitepress/build-system/shim/empty.mjs b/docs/.vitepress/build-system/shim/empty.mjs
new file mode 100644
index 000000000..57d1de9f1
--- /dev/null
+++ b/docs/.vitepress/build-system/shim/empty.mjs
@@ -0,0 +1,2 @@
+export {}
+export default {}
diff --git a/docs/.vitepress/build-system/src/process-shim.mjs b/docs/.vitepress/build-system/src/process-shim.mjs
new file mode 100644
index 000000000..6b75bf56e
--- /dev/null
+++ b/docs/.vitepress/build-system/src/process-shim.mjs
@@ -0,0 +1,10 @@
+/* globals window */
+// @ts-nocheck
+export const process = {
+  env: {},
+  cwd: () => '',
+  stdout: {}
+}
+if (typeof window !== 'undefined') {
+  window.process = process
+}
diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
new file mode 100644
index 000000000..471d58414
--- /dev/null
+++ b/docs/.vitepress/config.mts
@@ -0,0 +1,235 @@
+import type { DefaultTheme } from 'vitepress'
+import { defineConfig } from 'vitepress'
+import path from 'pathe'
+import { fileURLToPath } from 'url'
+import { viteCommonjs, vitePluginRequireResolve } from './vite-plugin.mjs'
+import eslint4b, { requireESLintUseAtYourOwnRisk4b } from 'vite-plugin-eslint4b'
+
+// Pre-build cjs packages that cannot be bundled well.
+import './build-system/build.mjs'
+
+const dirname = path.dirname(fileURLToPath(import.meta.url))
+
+// eslint-disable-next-line unicorn/no-anonymous-default-export
+export default async () => {
+  const rulesPath = '../../tools/lib/rules.js' // Avoid bundle
+  const rules: typeof import('../../tools/lib/rules.js') = await import(
+    rulesPath
+  ).then((mod) => mod.default || mod)
+  const uncategorizedRules = rules.filter(
+    (rule) =>
+      !rule.meta.docs.categories &&
+      !rule.meta.docs.extensionSource &&
+      !rule.meta.deprecated
+  )
+  const uncategorizedExtensionRule = rules.filter(
+    (rule) =>
+      !rule.meta.docs.categories &&
+      rule.meta.docs.extensionSource &&
+      !rule.meta.deprecated
+  )
+  const deprecatedRules = rules.filter((rule) => rule.meta.deprecated)
+
+  const sidebarCategories = [
+    { title: 'Base Rules', categoryIds: ['base'] },
+    {
+      title: 'Priority A: Essential',
+      categoryIds: ['vue3-essential', 'vue2-essential']
+    },
+    {
+      title: 'Priority A: Essential for Vue.js 3.x',
+      categoryIds: ['vue3-essential']
+    },
+    {
+      title: 'Priority A: Essential for Vue.js 2.x',
+      categoryIds: ['vue2-essential']
+    },
+    {
+      title: 'Priority B: Strongly Recommended',
+      categoryIds: ['vue3-strongly-recommended', 'vue2-strongly-recommended']
+    },
+    {
+      title: 'Priority B: Strongly Recommended for Vue.js 3.x',
+      categoryIds: ['vue3-strongly-recommended']
+    },
+    {
+      title: 'Priority B: Strongly Recommended for Vue.js 2.x',
+      categoryIds: ['vue2-strongly-recommended']
+    },
+    {
+      title: 'Priority C: Recommended',
+      categoryIds: ['vue3-recommended', 'vue2-recommended']
+    },
+    {
+      title: 'Priority C: Recommended for Vue.js 3.x',
+      categoryIds: ['vue3-recommended']
+    },
+    {
+      title: 'Priority C: Recommended for Vue.js 2.x',
+      categoryIds: ['vue2-recommended']
+    }
+  ]
+
+  const categorizedRules: DefaultTheme.SidebarItem[] = []
+  for (const { title, categoryIds } of sidebarCategories) {
+    const categoryRules = rules
+      .filter((rule) => rule.meta.docs.categories && !rule.meta.deprecated)
+      .filter((rule) =>
+        categoryIds.every((categoryId) =>
+          rule.meta.docs.categories.includes(categoryId)
+        )
+      )
+    const children: DefaultTheme.SidebarItem[] = categoryRules
+      .filter(({ ruleId }) => {
+        const exists = categorizedRules.some(
+          ({ items }) =>
+            items &&
+            items.some(({ text: alreadyRuleId }) => alreadyRuleId === ruleId)
+        )
+        return !exists
+      })
+      .map(({ ruleId, name }) => ({
+        text: ruleId,
+        link: `/rules/${name}`
+      }))
+
+    if (children.length === 0) {
+      continue
+    }
+    categorizedRules.push({
+      text: title,
+      collapsed: false,
+      items: children
+    })
+  }
+
+  const extraCategories: DefaultTheme.SidebarItem[] = []
+  if (uncategorizedRules.length > 0) {
+    extraCategories.push({
+      text: 'Uncategorized',
+      collapsed: false,
+      items: uncategorizedRules.map(({ ruleId, name }) => ({
+        text: ruleId,
+        link: `/rules/${name}`
+      }))
+    })
+  }
+  if (uncategorizedExtensionRule.length > 0) {
+    extraCategories.push({
+      text: 'Extension Rules',
+      collapsed: false,
+      items: uncategorizedExtensionRule.map(({ ruleId, name }) => ({
+        text: ruleId,
+        link: `/rules/${name}`
+      }))
+    })
+  }
+  if (deprecatedRules.length > 0) {
+    extraCategories.push({
+      text: 'Deprecated',
+      collapsed: false,
+      items: deprecatedRules.map(({ ruleId, name }) => ({
+        text: ruleId,
+        link: `/rules/${name}`
+      }))
+    })
+  }
+  return defineConfig({
+    base: '/',
+    title: 'eslint-plugin-vue',
+    description: 'Official ESLint plugin for Vue.js',
+    head: [['link', { rel: 'icon', href: '/favicon.png' }]],
+
+    vite: {
+      publicDir: path.resolve(dirname, './public'),
+      plugins: [
+        vitePluginRequireResolve(),
+        viteCommonjs(),
+        eslint4b() as any,
+        requireESLintUseAtYourOwnRisk4b()
+      ],
+      resolve: {
+        alias: {
+          'vue-eslint-parser': path.join(
+            dirname,
+            './build-system/shim/vue-eslint-parser.mjs'
+          ),
+          '@typescript-eslint/parser': path.join(
+            dirname,
+            './build-system/shim/@typescript-eslint/parser.mjs'
+          ),
+
+          tslib: path.join(dirname, '../../node_modules/tslib/tslib.es6.js'),
+          globby: path.join(dirname, './build-system/shim/empty.mjs'),
+          'fast-glob': path.join(dirname, './build-system/shim/empty.mjs'),
+          tinyglobby: path.join(dirname, './build-system/shim/empty.mjs'),
+          module: path.join(dirname, './build-system/shim/empty.mjs')
+        }
+      },
+      define: {
+        'require.cache': '{}'
+      }
+    },
+
+    lastUpdated: true,
+    themeConfig: {
+      editLink: {
+        pattern:
+          'https://github.com/vuejs/eslint-plugin-vue/edit/master/docs/:path'
+      },
+      socialLinks: [
+        {
+          icon: 'github',
+          link: 'https://github.com/vuejs/eslint-plugin-vue'
+        }
+      ],
+
+      nav: [
+        { text: 'User Guide', link: '/user-guide/' },
+        { text: 'Developer Guide', link: '/developer-guide/' },
+        { text: 'Rules', link: '/rules/' },
+        {
+          text: 'Demo',
+          link: 'https://ota-meshi.github.io/eslint-plugin-vue-demo/'
+        }
+      ],
+
+      sidebar: {
+        '/rules/': [
+          {
+            text: 'Rules',
+            items: [{ text: 'Available Rules', link: '/rules/' }]
+          },
+
+          // Rules in each category.
+          ...categorizedRules,
+
+          // Rules in no category.
+          ...extraCategories
+        ],
+
+        '/': [
+          {
+            text: 'Guide',
+            items: [
+              { text: 'Introduction', link: '/' },
+              { text: 'User Guide', link: '/user-guide/' },
+              { text: 'Developer Guide', link: '/developer-guide/' },
+              { text: 'Rules', link: '/rules/' }
+            ]
+          }
+        ]
+      },
+
+      outline: {
+        level: 'deep'
+      },
+
+      algolia: {
+        appId: '2L4MGZSULB',
+        apiKey: 'fdf57932b27a6c230d01a890492ab76d',
+        indexName: 'eslint-plugin-vue'
+      }
+    }
+  })
+}
diff --git a/docs/.vuepress/public/favicon.png b/docs/.vitepress/public/favicon.png
similarity index 100%
rename from docs/.vuepress/public/favicon.png
rename to docs/.vitepress/public/favicon.png
diff --git a/docs/.vitepress/public/service-worker.js b/docs/.vitepress/public/service-worker.js
new file mode 100644
index 000000000..e80d3f2d7
--- /dev/null
+++ b/docs/.vitepress/public/service-worker.js
@@ -0,0 +1,14 @@
+// https://github.com/NekR/self-destroying-sw
+/* globals self */
+self.addEventListener('install', (e) => {
+  self.skipWaiting()
+})
+
+self.addEventListener('activate', (e) => {
+  self.registration
+    .unregister()
+    .then(() => self.clients.matchAll())
+    .then((clients) => {
+      for (const client of clients) client.navigate(client.url)
+    })
+})
diff --git a/docs/.vitepress/theme/Layout.vue b/docs/.vitepress/theme/Layout.vue
new file mode 100644
index 000000000..3be00694b
--- /dev/null
+++ b/docs/.vitepress/theme/Layout.vue
@@ -0,0 +1,21 @@
+<script setup>
+import { useData } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+import { computed } from 'vue'
+const BaseLayout = DefaultTheme.Layout
+const { frontmatter } = useData()
+const pageClass = computed(() => frontmatter.value.pageClass || '')
+</script>
+
+<template>
+  <div :class="pageClass">
+    <BaseLayout />
+  </div>
+</template>
+
+<style scoped>
+/* Rule Page */
+.rule-details :deep(.main h1 + blockquote ::first-letter) {
+  text-transform: uppercase;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/eslint-code-block.vue b/docs/.vitepress/theme/components/eslint-code-block.vue
new file mode 100644
index 000000000..12cd1ff8b
--- /dev/null
+++ b/docs/.vitepress/theme/components/eslint-code-block.vue
@@ -0,0 +1,217 @@
+<template>
+  <div class="eslint-code-container">
+    <eslint-editor
+      :linter="linter"
+      :config="config"
+      v-model:code="code"
+      :style="{ height }"
+      class="eslint-code-block"
+      :filename="filename"
+      :language="language"
+      dark
+      :format="format"
+      :fix="fix"
+    />
+  </div>
+</template>
+
+<script>
+import EslintEditor from '@ota-meshi/site-kit-eslint-editor-vue'
+import { markRaw } from 'vue'
+
+export default {
+  name: 'ESLintCodeBlock',
+  components: { EslintEditor },
+
+  props: {
+    fix: {
+      type: Boolean,
+      default: false
+    },
+    rules: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    filename: {
+      type: String,
+      default: 'example.vue'
+    },
+    language: {
+      type: String,
+      default: 'html'
+    },
+    /**
+     * If enabled, `@typescript-eslint/parser` will be used.
+     * This must be enabled when used for `ts` code blocks.
+     */
+    typescript: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  data() {
+    return {
+      code: '',
+      height: '100px',
+      linter: null,
+      format: {
+        insertSpaces: true,
+        tabSize: 2
+      },
+      tsEslintParser: null,
+      baseConfig: {
+        files: ['**'],
+        plugins: {},
+        processor: 'vue/vue',
+        languageOptions: {
+          ecmaVersion: 'latest',
+          sourceType: 'module',
+          parserOptions: {
+            ecmaFeatures: { jsx: true }
+          }
+        }
+      }
+    }
+  },
+
+  computed: {
+    config() {
+      let parser = null // Use default parser (`espree`)
+      if (this.typescript) {
+        // Use `@typescript-eslint/parser`.
+        parser = this.tsEslintParser
+      } else if (this.langTs) {
+        // Use `@typescript-eslint/parser` only when `<script lang="ts">` or `<script lang="typescript">`.
+        parser = {
+          ts: this.tsEslintParser,
+          typescript: this.tsEslintParser
+        }
+      }
+      return {
+        ...this.baseConfig,
+        rules: this.rules,
+        languageOptions: {
+          ...this.baseConfig?.languageOptions,
+          parserOptions: {
+            ...this.baseConfig?.languageOptions?.parserOptions,
+            parser
+          }
+        }
+      }
+    },
+
+    /**
+     * Checks whether code may be using lang="ts" or lang="typescript".
+     * @returns {boolean} If `true`, may be using lang="ts" or lang="typescript".
+     */
+    langTs() {
+      return /lang\s*=\s*(?:"ts"|ts|'ts'|"typescript"|typescript|'typescript')/u.test(
+        this.code
+      )
+    }
+  },
+
+  watch: {
+    typescript(value) {
+      if (value) {
+        this.loadTypescriptESLint()
+      }
+    },
+    langTs(value) {
+      if (value) {
+        this.loadTypescriptESLint()
+      }
+    }
+  },
+
+  methods: {
+    async loadTypescriptESLint() {
+      const tsEslintParser = await import('@typescript-eslint/parser')
+      this.tsEslintParser = tsEslintParser.default || tsEslintParser
+    }
+  },
+
+  async mounted() {
+    this.code = `${computeCodeFromSlot(
+      findCode(this.$slots.default?.())
+    ).trim()}\n`
+    const lines = this.code.split('\n').length
+    this.height = `${Math.max(120, 20 * (1 + lines))}px`
+    // Load linter.
+    const [plugin, { Linter }, vueEslintParser, globals] = await Promise.all([
+      import('../../../..'),
+      import('eslint'),
+      import('vue-eslint-parser'),
+      import('globals')
+    ])
+    if (this.langTs || this.typescript) {
+      await this.loadTypescriptESLint()
+    }
+
+    this.linter = markRaw(new Linter())
+    this.baseConfig.plugins.vue = markRaw(plugin.default || plugin)
+    this.baseConfig.languageOptions.parser = markRaw(
+      vueEslintParser.default || vueEslintParser
+    )
+    this.baseConfig.languageOptions.globals = markRaw({
+      ...globals.browser
+    })
+  }
+}
+
+/**
+ * Find VNode of <code> tag
+ */
+function findCode(n) {
+  const nodes = Array.isArray(n) ? n : [n]
+  for (const node of nodes) {
+    if (!node) {
+      continue
+    }
+    if (node.type === 'code') {
+      return node
+    }
+    const c = findCode(node.children)
+    if (c) {
+      return c
+    }
+  }
+  return null
+}
+
+/**
+ * Extract text
+ */
+function computeCodeFromSlot(n) {
+  if (!n) {
+    return ''
+  }
+  const nodes = Array.isArray(n) ? n : [n]
+  // debugger
+  return nodes
+    .map((node) =>
+      typeof node === 'string' ? node : computeCodeFromSlot(node.children)
+    )
+    .join('')
+}
+</script>
+
+<style>
+.eslint-code-container {
+  border-radius: 6px;
+  padding: 1.25rem 0;
+  margin: 1em 0;
+  background-color: #1e1e1e;
+}
+
+.eslint-code-block {
+  width: 100%;
+}
+
+.eslint-editor-actions {
+  bottom: -0.9rem;
+}
+</style>
diff --git a/docs/.vuepress/components/rules-table.vue b/docs/.vitepress/theme/components/rules-table.vue
similarity index 95%
rename from docs/.vuepress/components/rules-table.vue
rename to docs/.vitepress/theme/components/rules-table.vue
index 29d31c4c6..c517d4591 100644
--- a/docs/.vuepress/components/rules-table.vue
+++ b/docs/.vitepress/theme/components/rules-table.vue
@@ -77,10 +77,10 @@ export default {
 </script>
 
 <style scoped>
-.table-root ::v-deep .highlighting tr {
+.table-root :deep(.highlighting tr) {
   opacity: 0.3;
 }
-.table-root ::v-deep .highlighting .highlight {
+.table-root :deep(.highlighting .highlight) {
   opacity: 1;
 }
 .filter-tool label {
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
new file mode 100644
index 000000000..34f6ee9b0
--- /dev/null
+++ b/docs/.vitepress/theme/index.ts
@@ -0,0 +1,30 @@
+// @ts-expect-error -- Browser
+if (typeof window !== 'undefined' && typeof require === 'undefined') {
+  // @ts-expect-error -- Browser
+  ;(window as any).require = () => {
+    const e = new Error('require is not defined')
+    ;(e as any).code = 'MODULE_NOT_FOUND'
+    throw e
+  }
+}
+// @ts-expect-error -- Cannot change `module` option
+import type { Theme } from 'vitepress'
+// @ts-expect-error -- Cannot change `module` option
+import DefaultTheme from 'vitepress/theme'
+// @ts-expect-error -- ignore
+import Layout from './Layout.vue'
+// @ts-expect-error -- ignore
+import ESLintCodeBlock from './components/eslint-code-block.vue'
+// @ts-expect-error -- ignore
+import RulesTable from './components/rules-table.vue'
+
+const theme: Theme = {
+  ...DefaultTheme,
+  Layout,
+  enhanceApp(ctx) {
+    DefaultTheme.enhanceApp(ctx)
+    ctx.app.component('eslint-code-block', ESLintCodeBlock)
+    ctx.app.component('rules-table', RulesTable)
+  }
+}
+export default theme
diff --git a/docs/.vitepress/vite-plugin.mts b/docs/.vitepress/vite-plugin.mts
new file mode 100644
index 000000000..bd9c9090b
--- /dev/null
+++ b/docs/.vitepress/vite-plugin.mts
@@ -0,0 +1,86 @@
+import type { UserConfig } from 'vitepress'
+import path from 'pathe'
+import { fileURLToPath } from 'url'
+import esbuild from 'esbuild'
+type Plugin = Extract<
+  NonNullable<NonNullable<UserConfig['vite']>['plugins']>[number],
+  { name: string }
+>
+
+const libRoot = path.join(fileURLToPath(import.meta.url), '../../../lib')
+export function vitePluginRequireResolve(): Plugin {
+  return {
+    name: 'vite-plugin-require.resolve',
+    transform(code, id) {
+      if (id.startsWith(libRoot)) {
+        return code.replace(/require\.resolve/gu, '(function(){return 0})')
+      }
+      return undefined
+    }
+  }
+}
+
+export function viteCommonjs(): Plugin {
+  return {
+    name: 'vite-plugin-cjs-to-esm',
+    apply: () => true,
+    async transform(code, id) {
+      if (!id.startsWith(libRoot)) {
+        return undefined
+      }
+      const base = transformRequire(code)
+      try {
+        const transformed = esbuild.transformSync(base, {
+          format: 'esm'
+        })
+        return transformed.code
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error(`Transform error. base code:\n${base}`, error)
+      }
+      return undefined
+    }
+  }
+}
+
+/**
+ * Transform `require()` to `import`
+ */
+function transformRequire(code: string) {
+  if (!code.includes('require')) {
+    return code
+  }
+  const modules = new Map()
+  const replaced = code.replace(
+    /(\/\/[^\n\r]*|\/\*[\s\S]*?\*\/)|\brequire\s*\(\s*(["'].*?["'])\s*\)/gu,
+    (match, comment, moduleString) => {
+      if (comment) {
+        return match
+      }
+
+      let id =
+        // eslint-disable-next-line prefer-template
+        '__' +
+        moduleString.replace(/[^a-zA-Z0-9_$]+/gu, '_') +
+        Math.random().toString(32).slice(2)
+      while (code.includes(id) || modules.has(id)) {
+        id += Math.random().toString(32).slice(2)
+      }
+      modules.set(id, moduleString)
+      return `${id}()`
+    }
+  )
+
+  return (
+    // eslint-disable-next-line prefer-template
+    [...modules]
+      .map(
+        ([id, moduleString]) => `import * as __temp_${id} from ${moduleString};
+const ${id} = () => __temp_${id}.default || __temp_${id};
+`
+      )
+      .join('') +
+    ';\n' +
+    replaced
+  )
+}
diff --git a/docs/.vuepress/components/eslint-code-block.vue b/docs/.vuepress/components/eslint-code-block.vue
deleted file mode 100644
index f71e606a3..000000000
--- a/docs/.vuepress/components/eslint-code-block.vue
+++ /dev/null
@@ -1,156 +0,0 @@
-<template>
-  <div class="eslint-code-container">
-    <eslint-editor
-      :linter="linter"
-      :config="config"
-      :code="code"
-      :style="{ height }"
-      class="eslint-code-block"
-      :filename="filename"
-      :language="language"
-      :preprocess="preprocess"
-      :postprocess="postprocess"
-      dark
-      :format="format"
-      :fix="fix"
-    />
-  </div>
-</template>
-
-<script>
-import EslintEditor from 'vue-eslint-editor'
-import { rules, processors } from '../../../'
-
-export default {
-  name: 'ESLintCodeBlock',
-  components: { EslintEditor },
-
-  props: {
-    fix: {
-      type: Boolean,
-      default: false
-    },
-    rules: {
-      type: Object,
-      default() {
-        return {}
-      }
-    },
-    filename: {
-      type: String,
-      default: 'example.vue'
-    },
-    language: {
-      type: String,
-      default: 'html'
-    }
-  },
-
-  data() {
-    return {
-      linter: null,
-      preprocess: processors['.vue'].preprocess,
-      postprocess: processors['.vue'].postprocess,
-      format: {
-        insertSpaces: true,
-        tabSize: 2
-      }
-    }
-  },
-
-  computed: {
-    config() {
-      return {
-        globals: {
-          console: false,
-          // ES2015 globals
-          ArrayBuffer: false,
-          DataView: false,
-          Float32Array: false,
-          Float64Array: false,
-          Int16Array: false,
-          Int32Array: false,
-          Int8Array: false,
-          Map: false,
-          Promise: false,
-          Proxy: false,
-          Reflect: false,
-          Set: false,
-          Symbol: false,
-          Uint16Array: false,
-          Uint32Array: false,
-          Uint8Array: false,
-          Uint8ClampedArray: false,
-          WeakMap: false,
-          WeakSet: false,
-          // ES2017 globals
-          Atomics: false,
-          SharedArrayBuffer: false
-        },
-        rules: this.rules,
-        parser: 'vue-eslint-parser',
-        parserOptions: {
-          ecmaVersion: 'latest',
-          sourceType: 'module',
-          ecmaFeatures: {
-            jsx: true
-          }
-        }
-      }
-    },
-
-    code() {
-      return `${this.computeCodeFromSlot(this.$slots.default).trim()}\n`
-    },
-
-    height() {
-      const lines = this.code.split('\n').length
-      return `${Math.max(120, 19 * lines)}px`
-    }
-  },
-
-  methods: {
-    computeCodeFromSlot(nodes) {
-      if (!Array.isArray(nodes)) {
-        return ''
-      }
-      return nodes
-        .map((node) => node.text || this.computeCodeFromSlot(node.children))
-        .join('')
-    }
-  },
-
-  async mounted() {
-    // Load linter.
-    const [{ Linter }, { parseForESLint }] = await Promise.all([
-      import('eslint/lib/linter'),
-      import('espree').then(() => import('vue-eslint-parser'))
-    ])
-
-    const linter = (this.linter = new Linter())
-
-    for (const ruleId of Object.keys(rules)) {
-      linter.defineRule(`vue/${ruleId}`, rules[ruleId])
-    }
-
-    linter.defineParser('vue-eslint-parser', { parseForESLint })
-  }
-}
-</script>
-
-<style>
-.eslint-code-container {
-  border-radius: 6px;
-  padding: 1.25rem 0;
-  margin: 1em 0;
-  background-color: #1e1e1e;
-}
-
-.eslint-code-block {
-  width: 100%;
-}
-
-.eslint-editor-actions {
-  bottom: -0.9rem;
-}
-</style>
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
deleted file mode 100644
index 68aec1af9..000000000
--- a/docs/.vuepress/config.js
+++ /dev/null
@@ -1,192 +0,0 @@
-/**
- * @author Toru Nagashima <https://github.com/mysticatea>
- * See LICENSE file in root directory for full license.
- */
-'use strict'
-
-const rules = require('../../tools/lib/rules')
-const path = require('path')
-
-const uncategorizedRules = rules.filter(
-  (rule) =>
-    !rule.meta.docs.categories &&
-    !rule.meta.docs.extensionRule &&
-    !rule.meta.deprecated
-)
-const uncategorizedExtensionRule = rules.filter(
-  (rule) =>
-    !rule.meta.docs.categories &&
-    rule.meta.docs.extensionRule &&
-    !rule.meta.deprecated
-)
-const deprecatedRules = rules.filter((rule) => rule.meta.deprecated)
-
-const sidebarCategories = [
-  { title: 'Base Rules', categoryIds: ['base'] },
-  {
-    title: 'Priority A: Essential',
-    categoryIds: ['vue3-essential', 'essential']
-  },
-  {
-    title: 'Priority A: Essential for Vue.js 3.x',
-    categoryIds: ['vue3-essential']
-  },
-  { title: 'Priority A: Essential for Vue.js 2.x', categoryIds: ['essential'] },
-  {
-    title: 'Priority B: Strongly Recommended',
-    categoryIds: ['vue3-strongly-recommended', 'strongly-recommended']
-  },
-  {
-    title: 'Priority B: Strongly Recommended for Vue.js 3.x',
-    categoryIds: ['vue3-strongly-recommended']
-  },
-  {
-    title: 'Priority B: Strongly Recommended for Vue.js 2.x',
-    categoryIds: ['strongly-recommended']
-  },
-  {
-    title: 'Priority C: Recommended',
-    categoryIds: ['vue3-recommended', 'recommended']
-  },
-  {
-    title: 'Priority C: Recommended for Vue.js 3.x',
-    categoryIds: ['vue3-recommended']
-  },
-  {
-    title: 'Priority C: Recommended for Vue.js 2.x',
-    categoryIds: ['recommended']
-  }
-]
-
-const categorizedRules = []
-for (const { title, categoryIds } of sidebarCategories) {
-  const categoryRules = rules
-    .filter((rule) => rule.meta.docs.categories && !rule.meta.deprecated)
-    .filter((rule) =>
-      categoryIds.every((categoryId) =>
-        rule.meta.docs.categories.includes(categoryId)
-      )
-    )
-  const children = categoryRules
-    .filter(({ ruleId }) => {
-      const exists = categorizedRules.some(({ children }) =>
-        children.some(([, alreadyRuleId]) => alreadyRuleId === ruleId)
-      )
-      return !exists
-    })
-    .map(({ ruleId, name }) => [`/rules/${name}`, ruleId])
-
-  if (children.length === 0) {
-    continue
-  }
-  categorizedRules.push({
-    title,
-    collapsable: false,
-    children
-  })
-}
-
-const extraCategories = []
-if (uncategorizedRules.length > 0) {
-  extraCategories.push({
-    title: 'Uncategorized',
-    collapsable: false,
-    children: uncategorizedRules.map(({ ruleId, name }) => [
-      `/rules/${name}`,
-      ruleId
-    ])
-  })
-}
-if (uncategorizedExtensionRule.length > 0) {
-  extraCategories.push({
-    title: 'Extension Rules',
-    collapsable: false,
-    children: uncategorizedExtensionRule.map(({ ruleId, name }) => [
-      `/rules/${name}`,
-      ruleId
-    ])
-  })
-}
-if (deprecatedRules.length > 0) {
-  extraCategories.push({
-    title: 'Deprecated',
-    collapsable: false,
-    children: deprecatedRules.map(({ ruleId, name }) => [
-      `/rules/${name}`,
-      ruleId
-    ])
-  })
-}
-
-module.exports = {
-  configureWebpack(_config, _isServer) {
-    return {
-      resolve: {
-        alias: {
-          module: require.resolve('./shim/module'),
-          eslint$: require.resolve('./shim/eslint'),
-          esquery: path.resolve(
-            __dirname,
-            '../../node_modules/esquery/dist/esquery.min.js'
-          ),
-          '@eslint/eslintrc/universal': path.resolve(
-            __dirname,
-            '../../node_modules/@eslint/eslintrc/dist/eslintrc-universal.cjs'
-          )
-        }
-      }
-    }
-  },
-
-  base: '/',
-  title: 'eslint-plugin-vue',
-  description: 'Official ESLint plugin for Vue.js',
-  evergreen: true,
-  head: [['link', { rel: 'icon', href: '/favicon.png' }]],
-
-  plugins: {
-    '@vuepress/pwa': {
-      serviceWorker: true,
-      updatePopup: true
-    }
-  },
-
-  themeConfig: {
-    repo: 'vuejs/eslint-plugin-vue',
-    docsRepo: 'vuejs/eslint-plugin-vue',
-    docsDir: 'docs',
-    docsBranch: 'master',
-    editLinks: true,
-    lastUpdated: true,
-
-    nav: [
-      { text: 'User Guide', link: '/user-guide/' },
-      { text: 'Developer Guide', link: '/developer-guide/' },
-      { text: 'Rules', link: '/rules/' },
-      {
-        text: 'Demo',
-        link: 'https://ota-meshi.github.io/eslint-plugin-vue-demo/'
-      }
-    ],
-
-    sidebar: {
-      '/rules/': [
-        '/rules/',
-
-        // Rules in each category.
-        ...categorizedRules,
-
-        // Rules in no category.
-        ...extraCategories
-      ],
-
-      '/': ['/', '/user-guide/', '/developer-guide/', '/rules/']
-    },
-
-    algolia: {
-      appId: '2L4MGZSULB',
-      apiKey: 'fdf57932b27a6c230d01a890492ab76d',
-      indexName: 'eslint-plugin-vue'
-    }
-  }
-}
diff --git a/docs/.vuepress/enhanceApp.js b/docs/.vuepress/enhanceApp.js
deleted file mode 100644
index 03082d606..000000000
--- a/docs/.vuepress/enhanceApp.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/* globals window */
-export default (
-  // eslint-disable-next-line no-empty-pattern
-  {
-    //     Vue, // the version of Vue being used in the VuePress app
-    //     options, // the options for the root Vue instance
-    //     router, // the router instance for the app
-    //     siteData, // site metadata
-  }
-) => {
-  if (typeof window !== 'undefined' && typeof window.process === 'undefined') {
-    window.process = new Proxy(
-      {
-        env: {},
-        cwd: () => undefined
-      },
-      {
-        get(target, name) {
-          // For debug
-          // console.log(name)
-          return target[name]
-        }
-      }
-    )
-  }
-}
diff --git a/docs/.vuepress/shim/eslint.js b/docs/.vuepress/shim/eslint.js
deleted file mode 100644
index 08af6dfcd..000000000
--- a/docs/.vuepress/shim/eslint.js
+++ /dev/null
@@ -1,4 +0,0 @@
-const { Linter } = require('eslint/lib/linter')
-module.exports = {
-  Linter
-}
diff --git a/docs/.vuepress/shim/module.js b/docs/.vuepress/shim/module.js
deleted file mode 100644
index 66ab9785e..000000000
--- a/docs/.vuepress/shim/module.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
-  createRequire: () => () => null
-}
diff --git a/docs/.vuepress/styles/index.styl b/docs/.vuepress/styles/index.styl
deleted file mode 100644
index 724c68247..000000000
--- a/docs/.vuepress/styles/index.styl
+++ /dev/null
@@ -1,26 +0,0 @@
-.theme-container.rule-details .theme-default-content > h1 {
-  font-size: 1.8rem;
-
-  + blockquote {
-    margin-top: -15px;
-    padding: 0;
-    border: 0;
-    font-weight: 500;
-    font-size: 1.4rem;
-    color: currentColor;
-
-    ::first-letter {
-      text-transform: uppercase;
-    }
-
-    p {
-      line-height: 1.2;
-    }
-  }
-}
-
-.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/README.md b/docs/README.md
deleted file mode 100644
index 96f92a921..000000000
--- a/docs/README.md
+++ /dev/null
@@ -1,32 +0,0 @@
----
-sidebarDepth: 0
----
-
-# Introduction
-
-Official ESLint plugin for Vue.js.
-
-This plugin allows us to check the `<template>` and `<script>` of `.vue` files with ESLint, as well as Vue code in `.js` files.
-
-- Finds syntax errors.
-- Finds the wrong use of [Vue.js Directives](https://vuejs.org/api/built-in-directives.html).
-- Finds the violation for [Vue.js Style Guide](https://vuejs.org/style-guide/).
-
-ESLint editor integrations are useful to check your code in real-time.
-
-:::warning Status of Vue.js 3.x supports
-This plugin supports the basic syntax of Vue.js 3.2, `<script setup>`, and CSS variable injection, but the ref sugar, an experimental feature of Vue.js 3.2, is not yet supported.  
-If you have issues with these, please also refer to the [FAQ](./user-guide/README.md#does-not-work-well-with-script-setup). If you can't find a solution, search for the issue and if the issue doesn't exist, open a new issue.
-:::
-
-## :traffic_light: Versioning policy
-
-This plugin is following [Semantic Versioning](https://semver.org/) and [ESLint's Semantic Versioning Policy](https://github.com/eslint/eslint#semantic-versioning-policy).
-
-## :newspaper: Changelog
-
-We are using [GitHub Releases](https://github.com/vuejs/eslint-plugin-vue/releases).
-
-## :lock: License
-
-See the [LICENSE](https://github.com/vuejs/eslint-plugin-vue/blob/master/LICENSE) file for license rights and limitations (MIT).
diff --git a/docs/developer-guide/README.md b/docs/developer-guide/index.md
similarity index 75%
rename from docs/developer-guide/README.md
rename to docs/developer-guide/index.md
index c5bfcc99e..d0cb972d3 100644
--- a/docs/developer-guide/README.md
+++ b/docs/developer-guide/index.md
@@ -8,12 +8,21 @@ If you think you’ve found a bug in ESLint, please [create a new issue](https:/
 
 Please include as much detail as possible to help us properly address your issue. If we need to triage issues and constantly ask people for more detail, that’s time taken away from actually fixing issues. Help us be as efficient as possible by including a lot of detail in your issues.
 
+## :seedling: Project Setup
+
+To develop locally, fork the eslint-plugin-vue repository and clone it in your local machine. Use the [npm](https://www.npmjs.com/) package manager to install and link dependencies and the LTS version of [Node.js](https://nodejs.org/).
+
+To develop and test the `eslint-plugin-vue` package:
+
+1. Run `npm install` in the project's root folder.
+2. Run `npm test` to make sure everything is set up correctly.
+
 ## :sparkles: Proposing a new rule or a rule change
 
 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 `npm run new -- [rule-name]` command
+- Generate a new rule using the `npm run new <rule name> <author name>` command
 - Write test scenarios & implement logic
 - Describe the rule in the generated `docs` file
 - Make sure all tests are passing
@@ -30,18 +39,18 @@ Before you start writing new rule, please read the [official ESLint guide](https
 Next, in order to get an idea how does the AST of the code that you want to check looks like, use the [astexplorer.net].
 The [astexplorer.net] is a great tool to inspect ASTs, also Vue templates are supported.
 
-After opening [astexplorer.net], select `Vue` as the syntax and `vue-eslint-parser` as the parser.
+After opening [astexplorer.net], select `Vue` as the syntax and [`vue-eslint-parser`](https://github.com/vuejs/vue-eslint-parser) as the parser.
 
 [astexplorer.net]: https://astexplorer.net/
 
-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.
+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`](https://github.com/vuejs/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:
+The [`vue-eslint-parser`](https://github.com/vuejs/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()`
@@ -54,7 +63,7 @@ If you'll stuck, remember there are plenty of rules you can learn from already,
 
 ## :white_check_mark: JSDoc type checking with TypeScript
 
-We have type checking enabled via TypeScript and JSDoc.  
+We have type checking enabled via TypeScript and JSDoc.\
 The command to perform type checking is: `npm run tsc`
 
 This is just to help you write the rules, not to do strict type checking. If you find it difficult to resolve type checking warnings, feel free to suppress warnings using the `// @ts-nocheck` and `// @ts-ignore` comment.
diff --git a/docs/index.md b/docs/index.md
new file mode 100644
index 000000000..9f6ce3192
--- /dev/null
+++ b/docs/index.md
@@ -0,0 +1,34 @@
+---
+sidebarDepth: 0
+---
+
+# Introduction
+
+Official ESLint plugin for Vue.js.
+
+This plugin allows us to check the `<template>` and `<script>` of `.vue` files with ESLint, as well as Vue code in `.js` files.
+
+- Finds syntax errors.
+- Finds the wrong use of [Vue.js Directives](https://vuejs.org/api/built-in-directives.html).
+- Finds the violation for [Vue.js Style Guide](https://vuejs.org/style-guide/).
+
+ESLint editor integrations are useful to check your code in real-time.
+
+## :traffic_light: Versioning policy
+
+This plugin follows [Semantic Versioning].
+However, please note that we do not follow [ESLint's Semantic Versioning Policy].
+In minor version releases, this plugin may change the sharable configs provided by the plugin or the default behavior of the plugin's rules in order to add features to the plugin. Because we want to add many features to the plugin soon, so that users can easily take advantage of new features in Vue and Nuxt.
+
+According to our policy, any minor update may report more linting errors than the previous release. As such, we recommend using the [tilde (`~`)](https://semver.npmjs.com/#syntax-examples) in `package.json` to guarantee the results of your builds.
+
+[Semantic Versioning]: https://semver.org/
+[ESLint's Semantic Versioning Policy]: https://github.com/eslint/eslint#semantic-versioning-policy
+
+## :newspaper: Changelog
+
+We are using [GitHub Releases](https://github.com/vuejs/eslint-plugin-vue/releases).
+
+## :lock: License
+
+See the [LICENSE](https://github.com/vuejs/eslint-plugin-vue/blob/master/LICENSE) file for license rights and limitations (MIT).
diff --git a/docs/rules/README.md b/docs/rules/README.md
deleted file mode 100644
index b72928647..000000000
--- a/docs/rules/README.md
+++ /dev/null
@@ -1,331 +0,0 @@
----
-sidebarDepth: 0
-pageClass: rule-list
----
-
-# Available rules
-
-<!-- This file is automatically generated in tools/update-docs-rules-index.js, do not change! -->
-
-::: tip Legend
-  :wrench: Indicates that the rule is fixable, and using `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the reported problems.
-
-  :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).
-:::
-
-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.
-
-## Base Rules (Enabling Correct ESLint Parsing)
-
-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: |
-
-</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-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: | :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::two::warning: |
-| [vue/no-expose-after-await](./no-expose-after-await.md) | disallow asynchronously registered `expose` |  | :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::two::hammer: |
-| [vue/no-reserved-component-names](./no-reserved-component-names.md) | disallow the use of reserved names in component definitions |  | :three::two::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::two::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-computed-property-like-method](./no-use-computed-property-like-method.md) | disallow use computed property like method |  | :three::two::warning: |
-| [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-v-text-v-html-on-component](./no-v-text-v-html-on-component.md) | disallow v-text / v-html on component |  | :three::two::warning: |
-| [vue/no-watch-after-await](./no-watch-after-await.md) | disallow asynchronously registered `watch` |  | :three::hammer: |
-| [vue/prefer-import-from-vue](./prefer-import-from-vue.md) | enforce import from 'vue' instead of import from '@vue/*' | :wrench: | :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::two::warning: |
-| [vue/use-v-on-exact](./use-v-on-exact.md) | enforce usage of `exact` modifier on `v-on` |  | :three::two::hammer: |
-| [vue/valid-attribute-name](./valid-attribute-name.md) | require valid attribute names |  | :three::two::warning: |
-| [vue/valid-define-emits](./valid-define-emits.md) | enforce valid `defineEmits` compiler macro |  | :three::two::warning: |
-| [vue/valid-define-props](./valid-define-props.md) | enforce valid `defineProps` compiler macro |  | :three::two::warning: |
-| [vue/valid-model-definition](./valid-model-definition.md) | require valid keys in model option |  | :two::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
-
-No preset enables the rules in this category.
-Please enable each rule if you want.
-
-For example:
-
-```json
-{
-  "rules": {
-    "vue/block-lang": "error"
-  }
-}
-```
-
-<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 | :bulb: | :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-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-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-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-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](./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-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>`.
-
-<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
-
-- :warning: We're going to remove deprecated rules in the next major release. Please migrate to successor/new rules.
-- :innocent: We don't fix bugs which are in deprecated rules since we don't have enough resources.
-
-| Rule ID | Replaced by |
-|:--------|:------------|
-| [vue/no-invalid-model-keys](./no-invalid-model-keys.md) | [vue/valid-model-definition](./valid-model-definition.md) |
-| [vue/script-setup-uses-vars](./script-setup-uses-vars.md) | (no replacement) |
-
-## Removed
-
-- :no_entry_sign: These rules have been removed in a previous major release, after they have been deprecated for a while.
-
-| Rule ID | Replaced by | Deprecated in version  | Removed in version |
-|:--------|:------------|:-----------------------|:-------------------|
-| [vue/experimental-script-setup-vars](./experimental-script-setup-vars.md) | (no replacement) | [v7.13.0](https://github.com/vuejs/eslint-plugin-vue/releases/tag/v7.13.0) | [v9.0.0](https://github.com/vuejs/eslint-plugin-vue/releases/tag/v9.0.0) |
-| [vue/name-property-casing](./name-property-casing.md) | [vue/component-definition-name-casing](./component-definition-name-casing.md) | [v7.0.0](https://github.com/vuejs/eslint-plugin-vue/releases/tag/v7.0.0) | [v9.0.0](https://github.com/vuejs/eslint-plugin-vue/releases/tag/v9.0.0) |
-| [vue/no-confusing-v-for-v-if](./no-confusing-v-for-v-if.md) | [vue/no-use-v-if-with-v-for](./no-use-v-if-with-v-for.md) | [v5.0.0](https://github.com/vuejs/eslint-plugin-vue/releases/tag/v5.0.0) | [v9.0.0](https://github.com/vuejs/eslint-plugin-vue/releases/tag/v9.0.0) |
-| [vue/no-unregistered-components](./no-unregistered-components.md) | [vue/no-undef-components](./no-undef-components.md) | [v8.4.0](https://github.com/vuejs/eslint-plugin-vue/releases/tag/v8.4.0) | [v9.0.0](https://github.com/vuejs/eslint-plugin-vue/releases/tag/v9.0.0) |
diff --git a/docs/rules/array-bracket-newline.md b/docs/rules/array-bracket-newline.md
index 8f1184c47..1e51479f5 100644
--- a/docs/rules/array-bracket-newline.md
+++ b/docs/rules/array-bracket-newline.md
@@ -2,21 +2,29 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/array-bracket-newline
-description: enforce linebreaks after opening and before closing array brackets in `<template>`
+description: Enforce linebreaks after opening and before closing array brackets in `<template>`
 since: v7.1.0
 ---
+
 # vue/array-bracket-newline
 
-> enforce linebreaks after opening and before closing array brackets in `<template>`
+> Enforce linebreaks after opening and before closing array brackets in `<template>`
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+This rule is the same rule as [@stylistic/array-bracket-newline] rule but it applies to the expressions in `<template>`.
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+This rule extends the rule that [@stylistic/eslint-plugin] has, but if [@stylistic/eslint-plugin] is not installed, this rule extracts and extends the same rule from ESLint core.
+However, if neither is found, the rule cannot be used.
 
-This rule is the same rule as core [array-bracket-newline] rule but it applies to the expressions in `<template>`.
+[@stylistic/eslint-plugin]: https://eslint.style/packages/default
 
 ## :books: Further Reading
 
+- [@stylistic/array-bracket-newline]
 - [array-bracket-newline]
 
+[@stylistic/array-bracket-newline]: https://eslint.style/rules/array-bracket-newline
 [array-bracket-newline]: https://eslint.org/docs/rules/array-bracket-newline
 
 ## :rocket: Version
@@ -28,4 +36,4 @@ This rule was introduced in eslint-plugin-vue v7.1.0
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/array-bracket-newline.js)
 - [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/array-bracket-newline.js)
 
-<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/rules/array-bracket-newline)</sup>
+<sup>Taken with ❤️ [from ESLint Stylistic](https://eslint.style/rules/array-bracket-newline)</sup>
diff --git a/docs/rules/array-bracket-spacing.md b/docs/rules/array-bracket-spacing.md
index 6b5b4003a..fd88a6a36 100644
--- a/docs/rules/array-bracket-spacing.md
+++ b/docs/rules/array-bracket-spacing.md
@@ -2,21 +2,29 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/array-bracket-spacing
-description: enforce consistent spacing inside array brackets in `<template>`
+description: Enforce consistent spacing inside array brackets in `<template>`
 since: v5.2.0
 ---
+
 # vue/array-bracket-spacing
 
-> enforce consistent spacing inside array brackets in `<template>`
+> Enforce consistent spacing inside array brackets in `<template>`
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+This rule is the same rule as [@stylistic/array-bracket-spacing] rule but it applies to the expressions in `<template>`.
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+This rule extends the rule that [@stylistic/eslint-plugin] has, but if [@stylistic/eslint-plugin] is not installed, this rule extracts and extends the same rule from ESLint core.
+However, if neither is found, the rule cannot be used.
 
-This rule is the same rule as core [array-bracket-spacing] rule but it applies to the expressions in `<template>`.
+[@stylistic/eslint-plugin]: https://eslint.style/packages/default
 
 ## :books: Further Reading
 
+- [@stylistic/array-bracket-spacing]
 - [array-bracket-spacing]
 
+[@stylistic/array-bracket-spacing]: https://eslint.style/rules/array-bracket-spacing
 [array-bracket-spacing]: https://eslint.org/docs/rules/array-bracket-spacing
 
 ## :rocket: Version
@@ -28,4 +36,4 @@ This rule was introduced in eslint-plugin-vue v5.2.0
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/array-bracket-spacing.js)
 - [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/array-bracket-spacing.js)
 
-<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/rules/array-bracket-spacing)</sup>
+<sup>Taken with ❤️ [from ESLint Stylistic](https://eslint.style/rules/array-bracket-spacing)</sup>
diff --git a/docs/rules/array-element-newline.md b/docs/rules/array-element-newline.md
new file mode 100644
index 000000000..f7d658143
--- /dev/null
+++ b/docs/rules/array-element-newline.md
@@ -0,0 +1,47 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/array-element-newline
+description: Enforce line breaks after each array element in `<template>`
+since: v9.9.0
+---
+
+# vue/array-element-newline
+
+> Enforce line breaks after each array element in `<template>`
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+This rule is the same rule as [@stylistic/array-element-newline] rule but it applies to the expressions in `<template>`.
+
+This rule extends the rule that [@stylistic/eslint-plugin] has, but if [@stylistic/eslint-plugin] is not installed, this rule extracts and extends the same rule from ESLint core.
+However, if neither is found, the rule cannot be used.
+
+[@stylistic/eslint-plugin]: https://eslint.style/packages/default
+
+## :books: Further Reading
+
+- [@stylistic/array-element-newline]
+- [@stylistic/array-bracket-spacing]
+- [@stylistic/array-bracket-newline]
+- [array-bracket-spacing]
+- [array-bracket-newline]
+- [array-element-newline]
+
+[@stylistic/array-element-newline]: https://eslint.style/rules/array-element-newline
+[@stylistic/array-bracket-spacing]: https://eslint.style/rules/array-bracket-spacing
+[@stylistic/array-bracket-newline]: https://eslint.style/rules/array-bracket-newline
+[array-bracket-spacing]: https://eslint.org/docs/rules/array-bracket-spacing
+[array-bracket-newline]: https://eslint.org/docs/rules/array-bracket-newline
+[array-element-newline]: https://eslint.org/docs/rules/array-element-newline
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.9.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/array-element-newline.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/array-element-newline.js)
+
+<sup>Taken with ❤️ [from ESLint Stylistic](https://eslint.style/rules/array-element-newline)</sup>
diff --git a/docs/rules/arrow-spacing.md b/docs/rules/arrow-spacing.md
index adfeb2243..adffbf1c9 100644
--- a/docs/rules/arrow-spacing.md
+++ b/docs/rules/arrow-spacing.md
@@ -2,21 +2,29 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/arrow-spacing
-description: enforce consistent spacing before and after the arrow in arrow functions in `<template>`
+description: Enforce consistent spacing before and after the arrow in arrow functions in `<template>`
 since: v5.2.0
 ---
+
 # vue/arrow-spacing
 
-> enforce consistent spacing before and after the arrow in arrow functions in `<template>`
+> Enforce consistent spacing before and after the arrow in arrow functions in `<template>`
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+This rule is the same rule as [@stylistic/arrow-spacing] rule but it applies to the expressions in `<template>`.
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+This rule extends the rule that [@stylistic/eslint-plugin] has, but if [@stylistic/eslint-plugin] is not installed, this rule extracts and extends the same rule from ESLint core.
+However, if neither is found, the rule cannot be used.
 
-This rule is the same rule as core [arrow-spacing] rule but it applies to the expressions in `<template>`.
+[@stylistic/eslint-plugin]: https://eslint.style/packages/default
 
 ## :books: Further Reading
 
+- [@stylistic/arrow-spacing]
 - [arrow-spacing]
 
+[@stylistic/arrow-spacing]: https://eslint.style/rules/arrow-spacing
 [arrow-spacing]: https://eslint.org/docs/rules/arrow-spacing
 
 ## :rocket: Version
@@ -28,4 +36,4 @@ This rule was introduced in eslint-plugin-vue v5.2.0
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/arrow-spacing.js)
 - [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/arrow-spacing.js)
 
-<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/rules/arrow-spacing)</sup>
+<sup>Taken with ❤️ [from ESLint Stylistic](https://eslint.style/rules/arrow-spacing)</sup>
diff --git a/docs/rules/attribute-hyphenation.md b/docs/rules/attribute-hyphenation.md
index 2aa8a39e5..0903c8a4e 100644
--- a/docs/rules/attribute-hyphenation.md
+++ b/docs/rules/attribute-hyphenation.md
@@ -5,12 +5,13 @@ title: vue/attribute-hyphenation
 description: enforce attribute naming style on custom components in template
 since: v3.9.0
 ---
+
 # vue/attribute-hyphenation
 
 > enforce attribute naming style on custom components in template
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
@@ -35,7 +36,8 @@ This rule enforces using hyphenated attribute names on custom components in Vue
 ```json
 {
   "vue/attribute-hyphenation": ["error", "always" | "never", {
-    "ignore": []
+    "ignore": [],
+    "ignoreTags": []
   }]
 }
 ```
@@ -43,9 +45,10 @@ This rule enforces using hyphenated attribute names on custom components in Vue
 Default casing is set to `always`. By default the following attributes are ignored: `data-`, `aria-`, `slot-scope`,
 and all the [SVG attributes](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute) with either an upper case letter or an hyphen.
 
-- `"always"` (default) ... Use hyphenated name.
-- `"never"` ... Don't use hyphenated name except the ones that are ignored.
-- `"ignore"` ... Array of ignored names
+- `"always"` (default) ... Use hyphenated attribute name.
+- `"never"` ... Don't use hyphenated attribute name.
+- `"ignore"` ... Array of attribute names that don't need to follow the specified casing.
+- `"ignoreTags"` ... Array of tag names whose attributes don't need to follow the specified casing.
 
 ### `"always"`
 
@@ -108,6 +111,22 @@ Don't use hyphenated name but allow custom attributes
 
 </eslint-code-block>
 
+### `"never", { "ignoreTags": ["/^custom-/"] }`
+
+<eslint-code-block fix :rules="{'vue/attribute-hyphenation': ['error', 'never', { ignoreTags: ['/^custom-/'] }]}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <custom-component my-prop="prop" />
+
+  <!-- ✗ BAD -->
+  <my-component my-prop="prop" />
+</template>
+```
+
+</eslint-code-block>
+
 ## :couple: Related Rules
 
 - [vue/v-on-event-hyphenation](./v-on-event-hyphenation.md)
diff --git a/docs/rules/attributes-order.md b/docs/rules/attributes-order.md
index 5cf2a4be1..7b44ccc5e 100644
--- a/docs/rules/attributes-order.md
+++ b/docs/rules/attributes-order.md
@@ -5,12 +5,13 @@ title: vue/attributes-order
 description: enforce order of attributes
 since: v4.3.0
 ---
+
 # vue/attributes-order
 
 > enforce order of attributes
 
-- :gear: This rule is included in `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
@@ -35,7 +36,13 @@ This rule aims to enforce ordering of component attributes. The default order is
 - `OTHER_DIRECTIVES`
   e.g. 'v-custom-directive'
 - `OTHER_ATTR`
-  e.g. 'custom-prop="foo"', 'v-bind:prop="foo"', ':prop="foo"'
+  alias for `[ATTR_DYNAMIC, ATTR_STATIC, ATTR_SHORTHAND_BOOL]`:
+  - `ATTR_DYNAMIC`
+    e.g. 'v-bind:prop="foo"', ':prop="foo"'
+  - `ATTR_STATIC`
+    e.g. 'prop="foo"', 'custom-prop="foo"'
+  - `ATTR_SHORTHAND_BOOL`
+    e.g. 'boolean-prop'
 - `EVENTS`
   e.g. '@click="functionCall"', 'v-on="event"'
 - `CONTENT`
@@ -136,7 +143,8 @@ Note that `v-bind="object"` syntax is considered to be the same as the next or p
       "EVENTS",
       "CONTENT"
     ],
-    "alphabetical": false
+    "alphabetical": false,
+    "sortLineLength": false
   }]
 }
 ```
@@ -194,6 +202,79 @@ Note that `v-bind="object"` syntax is considered to be the same as the next or p
 
 </eslint-code-block>
 
+### `"sortLineLength": true`
+
+<eslint-code-block fix :rules="{'vue/attributes-order': ['error', {sortLineLength: true}]}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+    <div
+      a="short"
+      abc="value"
+      a-prop="longer"
+      boolean-prop
+      :my-prop="value"
+      very-long-prop="value"
+      @blur="functionCall"
+      @change="functionCall"
+      @input="handleInput">
+    </div>
+
+  <!-- ✗ BAD -->
+    <div
+      very-long-prop="value"
+      a="short"
+      a-prop="longer">
+    </div>
+
+    <div
+      @input="handleInput"
+      @blur="short">
+    </div>
+
+    <div
+      :my-prop="value"
+      :a="short">
+    </div>
+
+</template>
+```
+
+</eslint-code-block>
+
+### `"alphabetical": true` with `"sortLineLength": true`
+
+When `alphabetical` and `sortLineLength` are both set to `true`, attributes within the same group are sorted primarily by their line length, and then alphabetically as a tie-breaker for attributes with the same length. This provides a clean, predictable attribute order that enhances readability.
+
+<eslint-code-block fix :rules="{'vue/attributes-order': ['error', {alphabetical: true, sortLineLength: true}]}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <div
+    a="1"
+    b="2"
+    cc="3"
+    dd="4"
+    @keyup="fn"
+    @submit="fn"
+  ></div>
+
+  <!-- ✗ BAD -->
+  <div
+    b="2"
+    a="1"
+    @submit="fn"
+    @keyup="fn"
+    dd="4"
+    cc="3"
+  ></div>
+</template>
+```
+
+</eslint-code-block>
+
 ### Custom orders
 
 #### `['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'TWO_WAY_BINDING', 'DEFINITION', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT']`
diff --git a/docs/rules/block-lang.md b/docs/rules/block-lang.md
index eb0528873..f7964a315 100644
--- a/docs/rules/block-lang.md
+++ b/docs/rules/block-lang.md
@@ -5,6 +5,7 @@ title: vue/block-lang
 description: disallow use other than available `lang`
 since: v7.15.0
 ---
+
 # vue/block-lang
 
 > disallow use other than available `lang`
@@ -47,14 +48,14 @@ This rule disallows the use of languages other than those available in the your
 
 </eslint-code-block>
 
-Specify the block name for the key of the option object.  
+Specify the block name for the key of the option object.\
 You can use the object as a value and use the following properties:
 
 - `lang` ... Specifies the available value for the `lang` attribute of the block. If multiple languages are available, specify them as an array. If you do not specify it, will disallow any language.
 - `allowNoLang` ... If `true`, allows the `lang` attribute not to be specified (allows the use of the default language of block).
 
 ::: warning Note
-If the default language is specified for `lang` option of `<template>`, `<style>` and `<script>`, it will be enforced to not specify `lang` attribute.  
+If the default language is specified for `lang` option of `<template>`, `<style>` and `<script>`, it will be enforced to not specify `lang` attribute.\
 This is to prevent unintended problems with [Vetur](https://vuejs.github.io/vetur/).
 
 See also [Vetur - Syntax Highlighting](https://vuejs.github.io/vetur/guide/highlighting.html).
diff --git a/docs/rules/block-order.md b/docs/rules/block-order.md
new file mode 100644
index 000000000..88346528b
--- /dev/null
+++ b/docs/rules/block-order.md
@@ -0,0 +1,200 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/block-order
+description: enforce order of component top-level elements
+since: v9.16.0
+---
+
+# vue/block-order
+
+> enforce order of component top-level elements
+
+- :gear: This rule is included in all of `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule warns about the order of the top-level tags, such as `<script>`, `<template>` & `<style>`.
+
+## :wrench: Options
+
+```json
+{
+  "vue/block-order": ["error", {
+    "order": [ [ "script", "template" ], "style" ]
+  }]
+}
+```
+
+- `order` (`(string|string[])[]`) ... The order of top-level element names. default `[ [ "script", "template" ], "style" ]`. May also be CSS selectors, such as `script[setup]` and `i18n:not([locale=en])`.
+
+### `{ "order": [ [ "script", "template" ], "style" ] }` (default)
+
+<eslint-code-block fix :rules="{'vue/block-order': ['error']}">
+
+```vue
+<!-- ✓ GOOD -->
+<script>/* ... */</script>
+<template>...</template>
+<style>/* ... */</style>
+```
+
+</eslint-code-block>
+
+<eslint-code-block fix :rules="{'vue/block-order': ['error']}">
+
+```vue
+<!-- ✓ GOOD -->
+<template>...</template>
+<script>/* ... */</script>
+<style>/* ... */</style>
+```
+
+</eslint-code-block>
+
+<eslint-code-block fix :rules="{'vue/block-order': ['error']}">
+
+```vue
+<!-- ✗ BAD -->
+<style>/* ... */</style>
+<script>/* ... */</script>
+<template>...</template>
+```
+
+</eslint-code-block>
+
+### `{ "order": ["template", "script", "style"] }`
+
+<eslint-code-block fix :rules="{'vue/block-order': ['error', { 'order': ['template', 'script', 'style'] }]}">
+
+```vue
+<!-- ✓ GOOD -->
+<template>...</template>
+<script>/* ... */</script>
+<style>/* ... */</style>
+```
+
+</eslint-code-block>
+
+<eslint-code-block fix :rules="{'vue/block-order': ['error', { 'order': ['template', 'script', 'style'] }]}">
+
+```vue
+<!-- ✗ BAD -->
+<script>/* ... */</script>
+<template>...</template>
+<style>/* ... */</style>
+```
+
+</eslint-code-block>
+
+### `{ "order": ["docs", "template", "script", "style"] }`
+
+<eslint-code-block fix :rules="{'vue/block-order': ['error', { 'order': ['docs', 'template', 'script', 'style'] }]}">
+
+```vue
+<!-- ✓ GOOD -->
+<docs> documentation </docs>
+<template>...</template>
+<script>/* ... */</script>
+<style>/* ... */</style>
+```
+
+</eslint-code-block>
+
+<eslint-code-block fix :rules="{'vue/block-order': ['error', { 'order': ['docs', 'template', 'script', 'style'] }]}">
+
+```vue
+<!-- ✗ BAD -->
+<template>...</template>
+<script>/* ... */</script>
+<docs> documentation </docs>
+<style>/* ... */</style>
+```
+
+</eslint-code-block>
+
+### `{ 'order': ['template', 'script:not([setup])', 'script[setup]'] }`
+
+<eslint-code-block fix :rules="{'vue/block-order': ['error', { 'order': ['template', 'script:not([setup])', 'script[setup]'] }]}">
+
+```vue
+<!-- ✓ GOOD -->
+<template>...</template>
+<script>/* ... */</script>
+<script setup>/* ... */</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block fix :rules="{'vue/block-order': ['error', { 'order': ['template', 'script:not([setup])', 'script[setup]'] }]}">
+
+```vue
+<!-- ✗ BAD -->
+<template>...</template>
+<script setup>/* ... */</script>
+<script>/* ... */</script>
+```
+
+</eslint-code-block>
+
+### `{ 'order': ['template', 'style:not([scoped])', 'style[scoped]'] }`
+
+<eslint-code-block fix :rules="{'vue/block-order': ['error', { 'order': ['template', 'style:not([scoped])', 'style[scoped]'] }]}">
+
+```vue
+<!-- ✓ GOOD -->
+<template>...</template>
+<style>/* ... */</style>
+<style scoped>/* ... */</style>
+```
+
+</eslint-code-block>
+
+<eslint-code-block fix :rules="{'vue/block-order': ['error', { 'order': ['template', 'style:not([scoped])', 'style[scoped]'] }]}">
+
+```vue
+<!-- ✗ BAD -->
+<template>...</template>
+<style scoped>/* ... */</style>
+<style>/* ... */</style>
+```
+
+</eslint-code-block>
+
+### `{ 'order': ['template', 'i18n:not([locale=en])', 'i18n[locale=en]'] }`
+
+<eslint-code-block fix :rules="{'vue/block-order': ['error', { 'order': ['template', 'i18n:not([locale=en])', 'i18n[locale=en]'] }]}">
+
+```vue
+<!-- ✓ GOOD -->
+<template>...</template>
+<i18n locale="ja">/* ... */</i18n>
+<i18n locale="en">/* ... */</i18n>
+```
+
+</eslint-code-block>
+
+<eslint-code-block fix :rules="{'vue/block-order': ['error', { 'order': ['template', 'i18n:not([locale=en])', 'i18n[locale=en]'] }]}">
+
+```vue
+<!-- ✗ BAD -->
+<template>...</template>
+<i18n locale="en">/* ... */</i18n>
+<i18n locale="ja">/* ... */</i18n>
+```
+
+</eslint-code-block>
+
+## :books: Further Reading
+
+- [Style guide - Single-file component top-level element order](https://vuejs.org/style-guide/rules-recommended.html#single-file-component-top-level-element-order)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.16.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/block-order.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/block-order.js)
diff --git a/docs/rules/block-spacing.md b/docs/rules/block-spacing.md
index 58280370c..187237ed8 100644
--- a/docs/rules/block-spacing.md
+++ b/docs/rules/block-spacing.md
@@ -2,21 +2,29 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/block-spacing
-description: disallow or enforce spaces inside of blocks after opening block and before closing block in `<template>`
+description: Disallow or enforce spaces inside of blocks after opening block and before closing block in `<template>`
 since: v5.2.0
 ---
+
 # vue/block-spacing
 
-> disallow or enforce spaces inside of blocks after opening block and before closing block in `<template>`
+> Disallow or enforce spaces inside of blocks after opening block and before closing block in `<template>`
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+This rule is the same rule as [@stylistic/block-spacing] rule but it applies to the expressions in `<template>`.
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+This rule extends the rule that [@stylistic/eslint-plugin] has, but if [@stylistic/eslint-plugin] is not installed, this rule extracts and extends the same rule from ESLint core.
+However, if neither is found, the rule cannot be used.
 
-This rule is the same rule as core [block-spacing] rule but it applies to the expressions in `<template>`.
+[@stylistic/eslint-plugin]: https://eslint.style/packages/default
 
 ## :books: Further Reading
 
+- [@stylistic/block-spacing]
 - [block-spacing]
 
+[@stylistic/block-spacing]: https://eslint.style/rules/block-spacing
 [block-spacing]: https://eslint.org/docs/rules/block-spacing
 
 ## :rocket: Version
@@ -28,4 +36,4 @@ This rule was introduced in eslint-plugin-vue v5.2.0
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/block-spacing.js)
 - [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/block-spacing.js)
 
-<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/rules/block-spacing)</sup>
+<sup>Taken with ❤️ [from ESLint Stylistic](https://eslint.style/rules/block-spacing)</sup>
diff --git a/docs/rules/block-tag-newline.md b/docs/rules/block-tag-newline.md
index 59d43a14b..8e336b284 100644
--- a/docs/rules/block-tag-newline.md
+++ b/docs/rules/block-tag-newline.md
@@ -5,11 +5,12 @@ title: vue/block-tag-newline
 description: enforce line breaks after opening and before closing block-level tags
 since: v7.1.0
 ---
+
 # vue/block-tag-newline
 
 > enforce line breaks after opening and before closing block-level tags
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
diff --git a/docs/rules/brace-style.md b/docs/rules/brace-style.md
index 8f889724a..2667e1829 100644
--- a/docs/rules/brace-style.md
+++ b/docs/rules/brace-style.md
@@ -2,21 +2,29 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/brace-style
-description: enforce consistent brace style for blocks in `<template>`
+description: Enforce consistent brace style for blocks in `<template>`
 since: v5.2.0
 ---
+
 # vue/brace-style
 
-> enforce consistent brace style for blocks in `<template>`
+> Enforce consistent brace style for blocks in `<template>`
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+This rule is the same rule as [@stylistic/brace-style] rule but it applies to the expressions in `<template>`.
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+This rule extends the rule that [@stylistic/eslint-plugin] has, but if [@stylistic/eslint-plugin] is not installed, this rule extracts and extends the same rule from ESLint core.
+However, if neither is found, the rule cannot be used.
 
-This rule is the same rule as core [brace-style] rule but it applies to the expressions in `<template>`.
+[@stylistic/eslint-plugin]: https://eslint.style/packages/default
 
 ## :books: Further Reading
 
+- [@stylistic/brace-style]
 - [brace-style]
 
+[@stylistic/brace-style]: https://eslint.style/rules/brace-style
 [brace-style]: https://eslint.org/docs/rules/brace-style
 
 ## :rocket: Version
@@ -28,4 +36,4 @@ This rule was introduced in eslint-plugin-vue v5.2.0
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/brace-style.js)
 - [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/brace-style.js)
 
-<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/rules/brace-style)</sup>
+<sup>Taken with ❤️ [from ESLint Stylistic](https://eslint.style/rules/brace-style)</sup>
diff --git a/docs/rules/camelcase.md b/docs/rules/camelcase.md
index 5b7888251..6ed97876a 100644
--- a/docs/rules/camelcase.md
+++ b/docs/rules/camelcase.md
@@ -2,12 +2,13 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/camelcase
-description: enforce camelcase naming convention in `<template>`
+description: Enforce camelcase naming convention in `<template>`
 since: v5.2.0
 ---
+
 # vue/camelcase
 
-> enforce camelcase naming convention in `<template>`
+> Enforce camelcase naming convention in `<template>`
 
 This rule is the same rule as core [camelcase] rule but it applies to the expressions in `<template>`.
 
@@ -26,4 +27,4 @@ This rule was introduced in eslint-plugin-vue v5.2.0
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/camelcase.js)
 - [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/camelcase.js)
 
-<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/rules/camelcase)</sup>
+<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/latest/rules/camelcase)</sup>
diff --git a/docs/rules/comma-dangle.md b/docs/rules/comma-dangle.md
index 63d4a2a4e..7fd33c445 100644
--- a/docs/rules/comma-dangle.md
+++ b/docs/rules/comma-dangle.md
@@ -2,21 +2,29 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/comma-dangle
-description: require or disallow trailing commas in `<template>`
+description: Require or disallow trailing commas in `<template>`
 since: v5.2.0
 ---
+
 # vue/comma-dangle
 
-> require or disallow trailing commas in `<template>`
+> Require or disallow trailing commas in `<template>`
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+This rule is the same rule as [@stylistic/comma-dangle] rule but it applies to the expressions in `<template>`.
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+This rule extends the rule that [@stylistic/eslint-plugin] has, but if [@stylistic/eslint-plugin] is not installed, this rule extracts and extends the same rule from ESLint core.
+However, if neither is found, the rule cannot be used.
 
-This rule is the same rule as core [comma-dangle] rule but it applies to the expressions in `<template>`.
+[@stylistic/eslint-plugin]: https://eslint.style/packages/default
 
 ## :books: Further Reading
 
+- [@stylistic/comma-dangle]
 - [comma-dangle]
 
+[@stylistic/comma-dangle]: https://eslint.style/rules/comma-dangle
 [comma-dangle]: https://eslint.org/docs/rules/comma-dangle
 
 ## :rocket: Version
@@ -28,4 +36,4 @@ This rule was introduced in eslint-plugin-vue v5.2.0
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/comma-dangle.js)
 - [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/comma-dangle.js)
 
-<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/rules/comma-dangle)</sup>
+<sup>Taken with ❤️ [from ESLint Stylistic](https://eslint.style/rules/comma-dangle)</sup>
diff --git a/docs/rules/comma-spacing.md b/docs/rules/comma-spacing.md
index c25c0608c..8f31fa50a 100644
--- a/docs/rules/comma-spacing.md
+++ b/docs/rules/comma-spacing.md
@@ -2,21 +2,29 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/comma-spacing
-description: enforce consistent spacing before and after commas in `<template>`
+description: Enforce consistent spacing before and after commas in `<template>`
 since: v7.0.0
 ---
+
 # vue/comma-spacing
 
-> enforce consistent spacing before and after commas in `<template>`
+> Enforce consistent spacing before and after commas in `<template>`
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+This rule is the same rule as [@stylistic/comma-spacing] rule but it applies to the expressions in `<template>`.
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+This rule extends the rule that [@stylistic/eslint-plugin] has, but if [@stylistic/eslint-plugin] is not installed, this rule extracts and extends the same rule from ESLint core.
+However, if neither is found, the rule cannot be used.
 
-This rule is the same rule as core [comma-spacing] rule but it applies to the expressions in `<template>`.
+[@stylistic/eslint-plugin]: https://eslint.style/packages/default
 
 ## :books: Further Reading
 
+- [@stylistic/comma-spacing]
 - [comma-spacing]
 
+[@stylistic/comma-spacing]: https://eslint.style/rules/comma-spacing
 [comma-spacing]: https://eslint.org/docs/rules/comma-spacing
 
 ## :rocket: Version
@@ -28,4 +36,4 @@ This rule was introduced in eslint-plugin-vue v7.0.0
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/comma-spacing.js)
 - [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/comma-spacing.js)
 
-<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/rules/comma-spacing)</sup>
+<sup>Taken with ❤️ [from ESLint Stylistic](https://eslint.style/rules/comma-spacing)</sup>
diff --git a/docs/rules/comma-style.md b/docs/rules/comma-style.md
index 477c12abd..c4c6eea96 100644
--- a/docs/rules/comma-style.md
+++ b/docs/rules/comma-style.md
@@ -2,21 +2,29 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/comma-style
-description: enforce consistent comma style in `<template>`
+description: Enforce consistent comma style in `<template>`
 since: v7.0.0
 ---
+
 # vue/comma-style
 
-> enforce consistent comma style in `<template>`
+> Enforce consistent comma style in `<template>`
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+This rule is the same rule as [@stylistic/comma-style] rule but it applies to the expressions in `<template>`.
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+This rule extends the rule that [@stylistic/eslint-plugin] has, but if [@stylistic/eslint-plugin] is not installed, this rule extracts and extends the same rule from ESLint core.
+However, if neither is found, the rule cannot be used.
 
-This rule is the same rule as core [comma-style] rule but it applies to the expressions in `<template>`.
+[@stylistic/eslint-plugin]: https://eslint.style/packages/default
 
 ## :books: Further Reading
 
+- [@stylistic/comma-style]
 - [comma-style]
 
+[@stylistic/comma-style]: https://eslint.style/rules/comma-style
 [comma-style]: https://eslint.org/docs/rules/comma-style
 
 ## :rocket: Version
@@ -28,4 +36,4 @@ This rule was introduced in eslint-plugin-vue v7.0.0
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/comma-style.js)
 - [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/comma-style.js)
 
-<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/rules/comma-style)</sup>
+<sup>Taken with ❤️ [from ESLint Stylistic](https://eslint.style/rules/comma-style)</sup>
diff --git a/docs/rules/comment-directive.md b/docs/rules/comment-directive.md
index 77c3986c5..499cf9579 100644
--- a/docs/rules/comment-directive.md
+++ b/docs/rules/comment-directive.md
@@ -5,11 +5,12 @@ title: vue/comment-directive
 description: support comment-directives in `<template>`
 since: v4.1.0
 ---
+
 # vue/comment-directive
 
 > support comment-directives in `<template>`
 
-- :gear: This rule is included in all of `"plugin:vue/base"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-essential"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/recommended"` and `"plugin:vue/vue3-recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/base"`, `*.configs["flat/base"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-recommended"`, `*.configs["flat/vue2-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
 
 Sole purpose of this rule is to provide `eslint-disable` functionality in the `<template>` and in the block level.
 It supports usage of the following comments:
@@ -42,7 +43,7 @@ This rule sends all `eslint-disable`-like comments as errors to the post-process
 
 The `eslint-disable`-like comments can be used in the `<template>` and in the block level.
 
-<eslint-code-block :rules="{'vue/comment-directive': ['error'], 'vue/max-attributes-per-line': ['error'], 'vue/component-tags-order': ['error'] }">
+<eslint-code-block :rules="{'vue/comment-directive': ['error'], 'vue/max-attributes-per-line': ['error'], 'vue/block-order': ['error'] }">
 
 ```vue
 <template>
@@ -50,7 +51,7 @@ The `eslint-disable`-like comments can be used in the `<template>` and in the bl
   <div a="1" b="2" c="3" d="4" />
 </template>
 
-<!-- eslint-disable-next-line vue/component-tags-order -->
+<!-- eslint-disable-next-line vue/block-order -->
 <style>
 </style>
 ```
@@ -59,7 +60,7 @@ The `eslint-disable`-like comments can be used in the `<template>` and in the bl
 
 The `eslint-disable` comments has no effect after one block.
 
-<eslint-code-block :rules="{'vue/comment-directive': ['error'], 'vue/max-attributes-per-line': ['error'], 'vue/component-tags-order': ['error'] }">
+<eslint-code-block :rules="{'vue/comment-directive': ['error'], 'vue/max-attributes-per-line': ['error'], 'vue/block-order': ['error'] }">
 
 ```vue
 <style>
diff --git a/docs/rules/component-api-style.md b/docs/rules/component-api-style.md
index faa3f2072..97af50eaf 100644
--- a/docs/rules/component-api-style.md
+++ b/docs/rules/component-api-style.md
@@ -5,6 +5,7 @@ title: vue/component-api-style
 description: enforce component API style
 since: v7.18.0
 ---
+
 # vue/component-api-style
 
 > enforce component API style
@@ -13,7 +14,7 @@ since: v7.18.0
 
 This rule aims to make the API style you use to define Vue components consistent in your project.
 
-For example, if you want to allow only `<script setup>` and Composition API.  
+For example, if you want to allow only `<script setup>` and Composition API.\
 (This is the default for this rule.)
 
 <eslint-code-block :rules="{'vue/component-api-style': ['error']}">
@@ -55,7 +56,7 @@ export default {
 <script>
 export default {
   /* ✗ BAD */
-  data () {
+  data() {
     return {
       msg: 'Hello World!',
       // ...
@@ -92,7 +93,7 @@ export default {
 <script>
 export default {
   /* ✓ GOOD */
-  data () {
+  data() {
     return {
       msg: 'Hello World!',
       // ...
diff --git a/docs/rules/component-definition-name-casing.md b/docs/rules/component-definition-name-casing.md
index 268c69f1a..18c625970 100644
--- a/docs/rules/component-definition-name-casing.md
+++ b/docs/rules/component-definition-name-casing.md
@@ -5,12 +5,13 @@ title: vue/component-definition-name-casing
 description: enforce specific casing for component definition name
 since: v7.0.0
 ---
+
 # vue/component-definition-name-casing
 
 > enforce specific casing for component definition name
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 Define a style for component definition name casing for consistency purposes.
 
@@ -63,14 +64,10 @@ export default {
 
 ```js
 /* ✓ GOOD */
-Vue.component('MyComponent', {
-
-})
+Vue.component('MyComponent', {})
 
 /* ✗ BAD */
-Vue.component('my-component', {
-
-})
+Vue.component('my-component', {})
 ```
 
 </eslint-code-block>
@@ -107,14 +104,10 @@ export default {
 
 ```js
 /* ✓ GOOD */
-Vue.component('my-component', {
-
-})
+Vue.component('my-component', {})
 
 /* ✗ BAD */
-Vue.component('MyComponent', {
-
-})
+Vue.component('MyComponent', {})
 ```
 
 </eslint-code-block>
diff --git a/docs/rules/component-name-in-template-casing.md b/docs/rules/component-name-in-template-casing.md
index e39555bb9..cc5a4256a 100644
--- a/docs/rules/component-name-in-template-casing.md
+++ b/docs/rules/component-name-in-template-casing.md
@@ -5,11 +5,12 @@ title: vue/component-name-in-template-casing
 description: enforce specific casing for the component naming style in template
 since: v5.0.0
 ---
+
 # vue/component-name-in-template-casing
 
 > enforce specific casing for the component naming style in template
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 Define a style for the component name in template casing for consistency purposes.
 
@@ -33,6 +34,7 @@ This rule aims to warn the tag names other than the configured casing in Vue.js
 - `registeredComponentsOnly` ... If `true`, only registered components (in PascalCase) are checked. If `false`, check all.
     default `true`
 - `ignores` (`string[]`) ... The element names to ignore. Sets the element name to allow. For example, custom elements or Vue components with special name. You can set the regexp by writing it like `"/^name/"`.
+- `globals` (`string[]`) ... Globally registered component names to check. For example, `RouterView` and `RouterLink` are globally registered by `vue-router` and can't be detected as registered in a SFC file. You can set the regexp by writing it like `"/^c-/"` to match component names with patterns.
 
 ### `"PascalCase", { registeredComponentsOnly: true }` (default)
 
@@ -42,7 +44,7 @@ This rule aims to warn the tag names other than the configured casing in Vue.js
 <template>
   <!-- ✓ GOOD -->
   <CoolComponent />
-  
+
   <!-- ✗ BAD -->
   <cool-component />
   <coolComponent />
@@ -60,7 +62,7 @@ export default {
   components: {
     CoolComponent,
     'registered-in-kebab-case': VueComponent1,
-    'registeredInCamelCase': VueComponent2
+    registeredInCamelCase: VueComponent2
   }
 }
 </script>
@@ -106,7 +108,7 @@ export default {
   <!-- ✓ GOOD -->
   <CoolComponent />
   <UnregisteredComponent />
-  
+
   <!-- ✗ BAD -->
   <cool-component />
   <unregistered-component />
@@ -129,11 +131,11 @@ export default {
 ```vue
 <template>
   <!-- ✓ GOOD -->
-  <CoolComponent/>
+  <CoolComponent />
   <custom-element></custom-element>
   <custom-button></custom-button>
   <custom-input />
-  
+
   <!-- ✗ BAD -->
   <magic-element></magic-element>
 </template>
@@ -141,6 +143,28 @@ export default {
 
 </eslint-code-block>
 
+### `"PascalCase", { globals: ["RouterView", "/^c-/"] }`
+
+<eslint-code-block fix :rules="{'vue/component-name-in-template-casing': ['error', 'PascalCase', {globals: ['RouterView', '/^c-/']}]}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <RouterView></RouterView>
+  <CButton />
+  <CCard />
+  <CInput />
+
+  <!-- ✗ BAD -->
+  <router-view></router-view>
+  <c-button />
+  <c-card />
+  <c-input />
+</template>
+```
+
+</eslint-code-block>
+
 ## :books: Further Reading
 
 - [Style guide - Component name casing in templates](https://vuejs.org/style-guide/rules-strongly-recommended.html#component-name-casing-in-templates)
diff --git a/docs/rules/component-options-name-casing.md b/docs/rules/component-options-name-casing.md
index d37ee9fce..469865478 100644
--- a/docs/rules/component-options-name-casing.md
+++ b/docs/rules/component-options-name-casing.md
@@ -5,11 +5,12 @@ title: vue/component-options-name-casing
 description: enforce the casing of component name in `components` options
 since: v8.2.0
 ---
+
 # vue/component-options-name-casing
 
 > enforce the casing of component name in `components` options
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 - :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
 
 ## :book: Rule Details
diff --git a/docs/rules/component-tags-order.md b/docs/rules/component-tags-order.md
index 4fc8d245e..a5037cdee 100644
--- a/docs/rules/component-tags-order.md
+++ b/docs/rules/component-tags-order.md
@@ -5,12 +5,12 @@ title: vue/component-tags-order
 description: enforce order of component top-level elements
 since: v6.1.0
 ---
+
 # vue/component-tags-order
 
 > enforce order of component top-level elements
 
-- :gear: This rule is included in `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :no_entry: This rule was **removed** in eslint-plugin-vue v10.0.0 and replaced by [vue/block-order](block-order.md) rule.
 
 ## :book: Rule Details
 
diff --git a/docs/rules/custom-event-name-casing.md b/docs/rules/custom-event-name-casing.md
index 29afde056..a57e0eb80 100644
--- a/docs/rules/custom-event-name-casing.md
+++ b/docs/rules/custom-event-name-casing.md
@@ -5,6 +5,7 @@ title: vue/custom-event-name-casing
 description: enforce specific casing for custom event name
 since: v7.0.0
 ---
+
 # vue/custom-event-name-casing
 
 > enforce specific casing for custom event name
@@ -42,7 +43,7 @@ This rule enforces camelCase by default.
 <script>
 export default {
   methods: {
-    onClick () {
+    onClick() {
       /* ✓ GOOD */
       this.$emit('myEvent')
       this.$emit('update:myProp', myProp)
@@ -89,7 +90,7 @@ export default {
 <script>
 export default {
   methods: {
-    onClick () {
+    onClick() {
       /* ✓ GOOD */
       this.$emit('my-event')
 
@@ -118,7 +119,7 @@ export default {
 <script>
 export default {
   methods: {
-    onClick () {
+    onClick() {
       /* ✓ GOOD */
       this.$emit('myEvent')
 
@@ -148,7 +149,7 @@ export default {
 <script>
 export default {
   methods: {
-    onClick () {
+    onClick() {
       /* ✓ GOOD */
       this.$emit('click:row')
       this.$emit('foo-bar')
diff --git a/docs/rules/define-emits-declaration.md b/docs/rules/define-emits-declaration.md
new file mode 100644
index 000000000..c24f5ec62
--- /dev/null
+++ b/docs/rules/define-emits-declaration.md
@@ -0,0 +1,133 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/define-emits-declaration
+description: enforce declaration style of `defineEmits`
+since: v9.5.0
+---
+
+# vue/define-emits-declaration
+
+> enforce declaration style of `defineEmits`
+
+## :book: Rule Details
+
+This rule enforces `defineEmits` typing style which you should use `type-based`, strict `type-literal`
+(introduced in Vue 3.3), or `runtime` declaration.
+
+This rule only works in setup script and `lang="ts"`.
+
+<eslint-code-block :rules="{'vue/define-emits-declaration': ['error']}">
+
+```vue
+<script setup lang="ts">
+/* ✓ GOOD */
+const emit = defineEmits<{
+  (e: 'change', id: number): void
+  (e: 'update', value: string): void
+}>()
+
+/* ✓ GOOD */
+const emit = defineEmits<{
+  change: [id: number]
+  update: [value: string]
+}>()
+
+/* ✗ BAD */
+const emit = defineEmits({
+  change: (id) => typeof id === 'number',
+  update: (value) => typeof value === 'string'
+})
+
+/* ✗ BAD */
+const emit = defineEmits(['change', 'update'])
+</script>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+```json
+  "vue/define-emits-declaration": ["error", "type-based" | "type-literal" | "runtime"]
+```
+
+- `type-based` (default) enforces type based declaration
+- `type-literal` enforces strict "type literal" type based declaration
+- `runtime` enforces runtime declaration
+
+### `runtime`
+
+<eslint-code-block :rules="{'vue/define-emits-declaration': ['error', 'runtime']}">
+
+```vue
+<script setup lang="ts">
+/* ✗ BAD */
+const emit = defineEmits<{
+  (e: 'change', id: number): void
+  (e: 'update', value: string): void
+}>()
+
+/* ✓ GOOD */
+const emit = defineEmits({
+  change: (id) => typeof id === 'number',
+  update: (value) => typeof value === 'string'
+})
+
+/* ✓ GOOD */
+const emit = defineEmits(['change', 'update'])
+</script>
+```
+
+</eslint-code-block>
+
+### `type-literal`
+
+<eslint-code-block :rules="{'vue/define-emits-declaration': ['error', 'type-literal']}">
+
+```vue
+<script setup lang="ts">
+/* ✗ BAD */
+const emit = defineEmits(['change', 'update'])
+
+/* ✗ BAD */
+const emit = defineEmits({
+  change: (id) => typeof id === 'number',
+  update: (value) => typeof value === 'string'
+})
+
+/* ✗ BAD */
+const emit = defineEmits<{
+  (e: 'change', id: number): void
+  (e: 'update', value: string): void
+}>()
+
+/* ✓ GOOD */
+const emit = defineEmits<{
+  change: [id: number]
+  update: [value: string]
+}>()
+</script>
+```
+
+</eslint-code-block>
+
+## :couple: Related Rules
+
+- [vue/define-props-declaration](./define-props-declaration.md)
+- [vue/valid-define-emits](./valid-define-emits.md)
+
+## :books: Further Reading
+
+- [`defineEmits`](https://vuejs.org/api/sfc-script-setup.html#defineprops-defineemits)
+- [Typescript-only-features of `defineEmits`](https://vuejs.org/api/sfc-script-setup.html#typescript-only-features)
+- [Guide - Typing-component-emits](https://vuejs.org/guide/typescript/composition-api.html#typing-component-emits)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.5.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/define-emits-declaration.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/define-emits-declaration.js)
diff --git a/docs/rules/define-macros-order.md b/docs/rules/define-macros-order.md
index 6fe48b20a..14729f991 100644
--- a/docs/rules/define-macros-order.md
+++ b/docs/rules/define-macros-order.md
@@ -2,30 +2,34 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/define-macros-order
-description: enforce order of `defineEmits` and `defineProps` compiler macros
+description: enforce order of compiler macros (`defineProps`, `defineEmits`, etc.)
 since: v8.7.0
 ---
+
 # vue/define-macros-order
 
-> enforce order of `defineEmits` and `defineProps` compiler macros
+> enforce order of compiler macros (`defineProps`, `defineEmits`, etc.)
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+- :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
 
 ## :book: Rule Details
 
-This rule reports the `defineProps` and `defineEmits` compiler macros when they are not the first statements in `<script setup>` (after any potential import statements or type definitions) or when they are not in the correct order.
+This rule reports compiler macros (like `defineProps` or `defineEmits` but also custom ones) when they are not the first statements in `<script setup>` (after any potential import statements or type definitions) or when they are not in the correct order.
 
 ## :wrench: Options
 
 ```json
 {
   "vue/define-macros-order": ["error", {
-    "order": ["defineProps", "defineEmits"]
+    "order": ["defineProps", "defineEmits"],
+    "defineExposeLast": false
   }]
 }
 ```
 
-- `order` (`string[]`) ... The order of defineEmits and defineProps macros
+- `order` (`string[]`) ... The order in which the macros should appear. The default is `["defineProps", "defineEmits"]`.
+- `defineExposeLast` (`boolean`) ... Force `defineExpose` at the end.
 
 ### `{ "order": ["defineProps", "defineEmits"] }` (default)
 
@@ -66,6 +70,117 @@ defineEmits(/* ... */)
 
 </eslint-code-block>
 
+### `{ "order": ["defineOptions", "defineModel", "defineProps", "defineEmits", "defineSlots"] }`
+
+<eslint-code-block fix :rules="{'vue/define-macros-order': ['error', {order: ['defineOptions', 'defineModel', 'defineProps', 'defineEmits', 'defineSlots']}]}">
+
+```vue
+<!-- ✓ GOOD -->
+<script setup>
+defineOptions({/* ... */})
+const model = defineModel()
+defineProps(/* ... */)
+defineEmits(/* ... */)
+const slots = defineSlots()
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block fix :rules="{'vue/define-macros-order': ['error', {order: ['defineOptions', 'defineModel', 'defineProps', 'defineEmits', 'defineSlots']}]}">
+
+```vue
+<!-- ✗ BAD -->
+<script setup>
+defineEmits(/* ... */)
+const slots = defineSlots()
+defineProps(/* ... */)
+defineOptions({/* ... */})
+const model = defineModel()
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block fix :rules="{'vue/define-macros-order': ['error', {order: ['defineOptions', 'defineModel', 'defineProps', 'defineEmits', 'defineSlots']}]}">
+
+```vue
+<!-- ✗ BAD -->
+<script setup>
+const bar = ref()
+defineOptions({/* ... */})
+const model = defineModel()
+defineProps(/* ... */)
+defineEmits(/* ... */)
+const slots = defineSlots()
+</script>
+```
+
+</eslint-code-block>
+
+### `{ "order": ["definePage", "defineModel", "defineCustom", "defineEmits", "defineSlots"] }`
+
+<eslint-code-block fix :rules="{'vue/define-macros-order': ['error', {order: ['definePage', 'defineModel', 'defineCustom', 'defineEmits', 'defineSlots']}]}">
+
+```vue
+<!-- ✓ GOOD -->
+<script setup>
+definePage()
+const model = defineModel()
+defineCustom()
+defineEmits(/* ... */)
+const slots = defineSlots()
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block fix :rules="{'vue/define-macros-order': ['error', {order: ['definePage', 'defineModel', 'defineCustom', 'defineEmits', 'defineSlots']}]}">
+
+```vue
+<!-- ✗ BAD -->
+<script setup>
+defineEmits(/* ... */)
+const slots = defineSlots()
+defineProps(/* ... */)
+defineCustom({/* ... */})
+const model = defineModel()
+definePage()
+</script>
+```
+
+</eslint-code-block>
+
+### `{ "defineExposeLast": true }`
+
+<eslint-code-block fix :rules="{'vue/define-macros-order': ['error', {defineExposeLast: true}]}">
+
+```vue
+<!-- ✓ GOOD -->
+<script setup>
+defineProps(/* ... */)
+defineEmits(/* ... */)
+const slots = defineSlots()
+defineExpose({/* ... */})
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block fix :rules="{'vue/define-macros-order': ['error', {defineExposeLast: true}]}">
+
+```vue
+<!-- ✗ BAD -->
+<script setup>
+defineProps(/* ... */)
+defineEmits(/* ... */)
+defineExpose({/* ... */})
+const slots = defineSlots()
+</script>
+```
+
+</eslint-code-block>
+
 ## :rocket: Version
 
 This rule was introduced in eslint-plugin-vue v8.7.0
diff --git a/docs/rules/define-props-declaration.md b/docs/rules/define-props-declaration.md
new file mode 100644
index 000000000..40c5ea0b0
--- /dev/null
+++ b/docs/rules/define-props-declaration.md
@@ -0,0 +1,88 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/define-props-declaration
+description: enforce declaration style of `defineProps`
+since: v9.5.0
+---
+
+# vue/define-props-declaration
+
+> enforce declaration style of `defineProps`
+
+## :book: Rule Details
+
+This rule enforces `defineProps` typing style which you should use `type-based` or `runtime` declaration.
+
+This rule only works in setup script and `lang="ts"`.
+
+<eslint-code-block :rules="{'vue/define-props-declaration': ['error']}">
+
+```vue
+<script setup lang="ts">
+/* ✓ GOOD */
+const props = defineProps<{
+  kind: string
+  options: { title: string }
+}>()
+
+/* ✗ BAD */
+const props = defineProps({
+  kind: { type: String },
+  options: { type: Object as PropType<{ title: string }> }
+})
+</script>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+```json
+  "vue/define-props-declaration": ["error", "type-based" | "runtime"]
+```
+
+- `type-based` (default) enforces type-based declaration
+- `runtime` enforces runtime declaration
+
+### `"runtime"`
+
+<eslint-code-block :rules="{'vue/define-props-declaration': ['error', 'runtime']}">
+
+```vue
+<script setup lang="ts">
+/* ✓ GOOD */
+const props = defineProps({
+  kind: { type: String },
+  options: { type: Object as PropType<{ title: string }> }
+})
+
+/* ✗ BAD */
+const props = defineProps<{
+  kind: string
+  options: { title: string }
+}>()
+</script>
+```
+
+</eslint-code-block>
+
+## :couple: Related Rules
+
+- [vue/define-emits-declaration](./define-emits-declaration.md)
+- [vue/valid-define-props](./valid-define-props.md)
+
+## :books: Further Reading
+
+- [`defineProps`](https://vuejs.org/api/sfc-script-setup.html#defineprops-defineemits)
+- [Typescript-only-features of `defineProps`](https://vuejs.org/api/sfc-script-setup.html#typescript-only-features)
+- [Guide - Typing-component-props](https://vuejs.org/guide/typescript/composition-api.html#typing-component-props)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.5.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/define-props-declaration.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/define-props-declaration.js)
diff --git a/docs/rules/define-props-destructuring.md b/docs/rules/define-props-destructuring.md
new file mode 100644
index 000000000..e3c2b2745
--- /dev/null
+++ b/docs/rules/define-props-destructuring.md
@@ -0,0 +1,98 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/define-props-destructuring
+description: enforce consistent style for props destructuring
+since: v10.1.0
+---
+
+# vue/define-props-destructuring
+
+> enforce consistent style for props destructuring
+
+## :book: Rule Details
+
+This rule enforces a consistent style for handling Vue 3 Composition API props, allowing you to choose between requiring destructuring or prohibiting it.
+
+By default, the rule requires you to use destructuring syntax when using `defineProps` instead of storing props in a variable and warns against combining `withDefaults` with destructuring.
+
+<eslint-code-block :rules="{'vue/define-props-destructuring': ['error']}">
+
+```vue
+<script setup>
+  // ✓ GOOD
+  const { foo } = defineProps(['foo'])
+  const { bar = 'default' } = defineProps(['bar'])
+
+  // ✗ BAD
+  const props = defineProps(['foo'])
+  const propsWithDefaults = withDefaults(defineProps(['foo']), { foo: 'default' })
+
+  // ✗ BAD
+  const { baz } = withDefaults(defineProps(['baz']), { baz: 'default' })
+</script>
+```
+
+</eslint-code-block>
+
+The rule applies to both JavaScript and TypeScript props:
+
+<eslint-code-block :rules="{'vue/define-props-destructuring': ['error']}">
+
+```vue
+<script setup lang="ts">
+  // ✓ GOOD
+  const { foo } = defineProps<{ foo?: string }>()
+  const { bar = 'default' } = defineProps<{ bar?: string }>()
+
+  // ✗ BAD
+  const props = defineProps<{ foo?: string }>()
+  const propsWithDefaults = withDefaults(defineProps<{ foo?: string }>(), { foo: 'default' })
+</script>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+```js
+{
+  "vue/define-props-destructuring": ["error", {
+    "destructure": "always" | "never"
+  }]
+}
+```
+
+- `destructure` - Sets the destructuring preference for props
+  - `"always"` (default) - Requires destructuring when using `defineProps` and warns against using `withDefaults` with destructuring
+  - `"never"` - Requires using a variable to store props and prohibits destructuring
+
+### `"destructure": "never"`
+
+<eslint-code-block :rules="{'vue/define-props-destructuring': ['error', { destructure: 'never' }]}">
+
+```vue
+<script setup>
+  // ✓ GOOD
+  const props = defineProps(['foo'])
+  const propsWithDefaults = withDefaults(defineProps(['foo']), { foo: 'default' })
+
+  // ✗ BAD
+  const { foo } = defineProps(['foo'])
+</script>
+```
+
+</eslint-code-block>
+
+## :books: Further Reading
+
+- [Reactive Props Destructure](https://vuejs.org/guide/components/props.html#reactive-props-destructure)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v10.1.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/define-props-destructuring.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/define-props-destructuring.js)
diff --git a/docs/rules/dot-location.md b/docs/rules/dot-location.md
index 4b88f9cf6..101b58776 100644
--- a/docs/rules/dot-location.md
+++ b/docs/rules/dot-location.md
@@ -2,21 +2,29 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/dot-location
-description: enforce consistent newlines before and after dots in `<template>`
+description: Enforce consistent newlines before and after dots in `<template>`
 since: v6.0.0
 ---
+
 # vue/dot-location
 
-> enforce consistent newlines before and after dots in `<template>`
+> Enforce consistent newlines before and after dots in `<template>`
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+This rule is the same rule as [@stylistic/dot-location] rule but it applies to the expressions in `<template>`.
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+This rule extends the rule that [@stylistic/eslint-plugin] has, but if [@stylistic/eslint-plugin] is not installed, this rule extracts and extends the same rule from ESLint core.
+However, if neither is found, the rule cannot be used.
 
-This rule is the same rule as core [dot-location] rule but it applies to the expressions in `<template>`.
+[@stylistic/eslint-plugin]: https://eslint.style/packages/default
 
 ## :books: Further Reading
 
+- [@stylistic/dot-location]
 - [dot-location]
 
+[@stylistic/dot-location]: https://eslint.style/rules/dot-location
 [dot-location]: https://eslint.org/docs/rules/dot-location
 
 ## :rocket: Version
@@ -28,4 +36,4 @@ This rule was introduced in eslint-plugin-vue v6.0.0
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/dot-location.js)
 - [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/dot-location.js)
 
-<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/rules/dot-location)</sup>
+<sup>Taken with ❤️ [from ESLint Stylistic](https://eslint.style/rules/dot-location)</sup>
diff --git a/docs/rules/dot-notation.md b/docs/rules/dot-notation.md
index c2bf87478..101caf5cf 100644
--- a/docs/rules/dot-notation.md
+++ b/docs/rules/dot-notation.md
@@ -2,14 +2,15 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/dot-notation
-description: enforce dot notation whenever possible in `<template>`
+description: Enforce dot notation whenever possible in `<template>`
 since: v7.0.0
 ---
+
 # vue/dot-notation
 
-> enforce dot notation whenever possible in `<template>`
+> Enforce dot notation whenever possible in `<template>`
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 This rule is the same rule as core [dot-notation] rule but it applies to the expressions in `<template>`.
 
@@ -28,4 +29,4 @@ This rule was introduced in eslint-plugin-vue v7.0.0
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/dot-notation.js)
 - [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/dot-notation.js)
 
-<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/rules/dot-notation)</sup>
+<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/latest/rules/dot-notation)</sup>
diff --git a/docs/rules/enforce-style-attribute.md b/docs/rules/enforce-style-attribute.md
new file mode 100644
index 000000000..fcffefbae
--- /dev/null
+++ b/docs/rules/enforce-style-attribute.md
@@ -0,0 +1,89 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/enforce-style-attribute
+description: enforce or forbid the use of the `scoped` and `module` attributes in SFC top level style tags
+since: v9.20.0
+---
+
+# vue/enforce-style-attribute
+
+> enforce or forbid the use of the `scoped` and `module` attributes in SFC top level style tags
+
+## :book: Rule Details
+
+This rule allows you to explicitly allow the use of the `scoped` and `module` attributes on your top level style tags.
+
+### `"scoped"`
+
+<eslint-code-block :rules="{'vue/enforce-style-attribute': ['error', { allow: ['scoped'] }]}">
+
+```vue
+<!-- ✓ GOOD -->
+<style scoped></style>
+<style lang="scss" src="../path/to/style.scss" scoped></style>
+
+<!-- ✗ BAD -->
+<style module></style>
+
+<!-- ✗ BAD -->
+<style></style>
+```
+
+</eslint-code-block>
+
+### `"module"`
+
+<eslint-code-block :rules="{'vue/enforce-style-attribute': ['error', { allow: ['module'] }]}">
+
+```vue
+<!-- ✓ GOOD -->
+<style module></style>
+
+<!-- ✗ BAD -->
+<style scoped></style>
+
+<!-- ✗ BAD -->
+<style></style>
+```
+
+</eslint-code-block>
+
+### `"plain"`
+
+<eslint-code-block :rules="{'vue/enforce-style-attribute': ['error', { allow: ['plain']}]}">
+
+```vue
+<!-- ✓ GOOD -->
+<style></style>
+
+<!-- ✗ BAD -->
+<style scoped></style>
+
+<!-- ✗ BAD -->
+<style module></style>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+```json
+{
+  "vue/enforce-style-attribute": [
+    "error",
+    { "allow": ["scoped", "module", "plain"] }
+  ]
+}
+```
+
+- `"allow"` (`["scoped" | "module" | "plain"]`) Array of attributes to allow on a top level style tag. The option `plain` is used to allow style tags that have neither the `scoped` nor `module` attributes. Default: `["scoped"]`
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.20.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/enforce-style-attribute.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/enforce-style-attribute.js)
diff --git a/docs/rules/eqeqeq.md b/docs/rules/eqeqeq.md
index aa77b3f11..fb0133251 100644
--- a/docs/rules/eqeqeq.md
+++ b/docs/rules/eqeqeq.md
@@ -2,14 +2,16 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/eqeqeq
-description: require the use of `===` and `!==` in `<template>`
+description: Require the use of `===` and `!==` in `<template>`
 since: v5.2.0
 ---
+
 # vue/eqeqeq
 
-> require the use of `===` and `!==` in `<template>`
+> Require the use of `===` and `!==` in `<template>`
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+- :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
 
 This rule is the same rule as core [eqeqeq] rule but it applies to the expressions in `<template>`.
 
@@ -28,4 +30,4 @@ This rule was introduced in eslint-plugin-vue v5.2.0
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/eqeqeq.js)
 - [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/eqeqeq.js)
 
-<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/rules/eqeqeq)</sup>
+<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/latest/rules/eqeqeq)</sup>
diff --git a/docs/rules/experimental-script-setup-vars.md b/docs/rules/experimental-script-setup-vars.md
index 7a77d941d..82e7de884 100644
--- a/docs/rules/experimental-script-setup-vars.md
+++ b/docs/rules/experimental-script-setup-vars.md
@@ -5,11 +5,12 @@ title: vue/experimental-script-setup-vars
 description: prevent variables defined in `<script setup>` to be marked as undefined
 since: v7.0.0
 ---
+
 # vue/experimental-script-setup-vars
 
 > prevent variables defined in `<script setup>` to be marked as undefined
 
-- :no_entry_sign: This rule was **removed** in eslint-plugin-vue v9.0.0.
+- :no_entry: This rule was **removed** in eslint-plugin-vue v9.0.0.
 
 This rule will find variables defined in `<script setup="args">` and mark them as defined variables.
 
diff --git a/docs/rules/first-attribute-linebreak.md b/docs/rules/first-attribute-linebreak.md
index caeb31f1a..6292ef262 100644
--- a/docs/rules/first-attribute-linebreak.md
+++ b/docs/rules/first-attribute-linebreak.md
@@ -5,12 +5,13 @@ title: vue/first-attribute-linebreak
 description: enforce the location of first attribute
 since: v8.0.0
 ---
+
 # vue/first-attribute-linebreak
 
 > enforce the location of first attribute
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
diff --git a/docs/rules/func-call-spacing.md b/docs/rules/func-call-spacing.md
index 0f398e1d0..89365a8c9 100644
--- a/docs/rules/func-call-spacing.md
+++ b/docs/rules/func-call-spacing.md
@@ -2,21 +2,29 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/func-call-spacing
-description: require or disallow spacing between function identifiers and their invocations in `<template>`
+description: Require or disallow spacing between function identifiers and their invocations in `<template>`
 since: v7.0.0
 ---
+
 # vue/func-call-spacing
 
-> require or disallow spacing between function identifiers and their invocations in `<template>`
+> Require or disallow spacing between function identifiers and their invocations in `<template>`
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+This rule is the same rule as [@stylistic/function-call-spacing] rule but it applies to the expressions in `<template>`.
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+This rule extends the rule that [@stylistic/eslint-plugin] has, but if [@stylistic/eslint-plugin] is not installed, this rule extracts and extends the same rule from ESLint core.
+However, if neither is found, the rule cannot be used.
 
-This rule is the same rule as core [func-call-spacing] rule but it applies to the expressions in `<template>`.
+[@stylistic/eslint-plugin]: https://eslint.style/packages/default
 
 ## :books: Further Reading
 
+- [@stylistic/function-call-spacing]
 - [func-call-spacing]
 
+[@stylistic/function-call-spacing]: https://eslint.style/rules/function-call-spacing
 [func-call-spacing]: https://eslint.org/docs/rules/func-call-spacing
 
 ## :rocket: Version
@@ -28,4 +36,4 @@ This rule was introduced in eslint-plugin-vue v7.0.0
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/func-call-spacing.js)
 - [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/func-call-spacing.js)
 
-<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/rules/func-call-spacing)</sup>
+<sup>Taken with ❤️ [from ESLint Stylistic](https://eslint.style/rules/function-call-spacing)</sup>
diff --git a/docs/rules/html-button-has-type.md b/docs/rules/html-button-has-type.md
index 24f997e6a..e507d42b8 100644
--- a/docs/rules/html-button-has-type.md
+++ b/docs/rules/html-button-has-type.md
@@ -5,6 +5,7 @@ title: vue/html-button-has-type
 description: disallow usage of button without an explicit type attribute
 since: v7.6.0
 ---
+
 # vue/html-button-has-type
 
 > disallow usage of button without an explicit type attribute
diff --git a/docs/rules/html-closing-bracket-newline.md b/docs/rules/html-closing-bracket-newline.md
index ac6c505d8..964317590 100644
--- a/docs/rules/html-closing-bracket-newline.md
+++ b/docs/rules/html-closing-bracket-newline.md
@@ -5,12 +5,13 @@ title: vue/html-closing-bracket-newline
 description: require or disallow a line break before tag's closing brackets
 since: v4.1.0
 ---
+
 # vue/html-closing-bracket-newline
 
 > require or disallow a line break before tag's closing brackets
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 People have their own preference about the location of closing brackets.
 This rule enforces a line break (or no line break) before tag's closing brackets.
@@ -58,19 +59,31 @@ This rule aims to warn the right angle brackets which are at the location other
 
 ```json
 {
-  "vue/html-closing-bracket-newline": ["error", {
-    "singleline": "never",
-    "multiline": "always"
-  }]
+  "vue/html-closing-bracket-newline": [
+    "error",
+    {
+      "singleline": "never",
+      "multiline": "always",
+      "selfClosingTag": {
+        "singleline": "never",
+        "multiline": "always"
+      }
+    }
+  ]
 }
 ```
 
-- `singleline` ... the configuration for single-line elements. It's a single-line element if the element does not have attributes or the last attribute is on the same line as the opening bracket.
-  - `"never"` (default) ... disallow line breaks before the closing bracket.
-  - `"always"` ... require one line break before the closing bracket.
-- `multiline` ... the configuration for multiline elements. It's a multiline element if the last attribute is not on the same line of the opening bracket.
-  - `"never"` ... disallow line breaks before the closing bracket.
-  - `"always"` (default) ... require one line break before the closing bracket.
+- `singleline` (`"never"` by default) ... the configuration for single-line elements. It's a single-line element if the element does not have attributes or the last attribute is on the same line as the opening bracket.
+- `multiline` (`"always"` by default) ... the configuration for multiline elements. It's a multiline element if the last attribute is not on the same line of the opening bracket.
+- `selfClosingTag.singleline` ... the configuration for single-line self closing elements.
+- `selfClosingTag.multiline` ... the configuration for multiline self closing elements.
+
+Every option can be set to one of the following values:
+
+- `"always"` ... require one line break before the closing bracket.
+- `"never"` ... disallow line breaks before the closing bracket.
+
+If `selfClosingTag` is not specified, the `singleline` and `multiline` options are inherited for self-closing tags.
 
 Plus, you can use [`vue/html-indent`](./html-indent.md) rule to enforce indent-level of the closing brackets.
 
@@ -95,6 +108,25 @@ Plus, you can use [`vue/html-indent`](./html-indent.md) rule to enforce indent-l
 
 </eslint-code-block>
 
+### `"selfClosingTag": { "multiline": "always" }`
+
+<eslint-code-block fix :rules="{'vue/html-closing-bracket-newline': ['error', { 'selfClosingTag': {'multiline': 'always'} }]}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <MyComponent
+      :foo="foo"
+  />
+
+  <!-- ✗ BAD -->
+  <MyComponent
+      :foo="foo" />
+</template>
+```
+
+</eslint-code-block>
+
 ## :rocket: Version
 
 This rule was introduced in eslint-plugin-vue v4.1.0
diff --git a/docs/rules/html-closing-bracket-spacing.md b/docs/rules/html-closing-bracket-spacing.md
index 6bbbff216..d1927b4e1 100644
--- a/docs/rules/html-closing-bracket-spacing.md
+++ b/docs/rules/html-closing-bracket-spacing.md
@@ -5,12 +5,13 @@ title: vue/html-closing-bracket-spacing
 description: require or disallow a space before tag's closing brackets
 since: v4.1.0
 ---
+
 # vue/html-closing-bracket-spacing
 
 > require or disallow a space before tag's closing brackets
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
diff --git a/docs/rules/html-comment-content-newline.md b/docs/rules/html-comment-content-newline.md
index 807ecb5db..cffd7cdff 100644
--- a/docs/rules/html-comment-content-newline.md
+++ b/docs/rules/html-comment-content-newline.md
@@ -2,14 +2,15 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/html-comment-content-newline
-description: enforce unified line brake in HTML comments
+description: enforce unified line break in HTML comments
 since: v7.0.0
 ---
+
 # vue/html-comment-content-newline
 
-> enforce unified line brake in HTML comments
+> enforce unified line break in HTML comments
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
@@ -56,6 +57,7 @@ This rule will enforce consistency of line break after the `<!--` and before the
 ```
 
 - The first option is either an object with `"singleline"` and `"multiline"` keys.
+
   - `singleline` ... the configuration for single-line comments.
     - `"never"` (default) ... disallow line breaks after the `<!--` and before the `-->`.
     - `"always"` ... require one line break after the `<!--` and before the `-->`.
@@ -66,6 +68,7 @@ This rule will enforce consistency of line break after the `<!--` and before the
   You can also set the same value for both `singleline` and `multiline` by specifies a string.
 
 - This rule can also take a 2nd option, an object with the following key: `"exceptions"`.
+
   - The `"exceptions"` value is an array of string patterns which are considered exceptions to the rule.
 
   ```json
diff --git a/docs/rules/html-comment-content-spacing.md b/docs/rules/html-comment-content-spacing.md
index e5e5b4cf6..5b3948827 100644
--- a/docs/rules/html-comment-content-spacing.md
+++ b/docs/rules/html-comment-content-spacing.md
@@ -5,11 +5,12 @@ title: vue/html-comment-content-spacing
 description: enforce unified spacing in HTML comments
 since: v7.0.0
 ---
+
 # vue/html-comment-content-spacing
 
 > enforce unified spacing in HTML comments
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
@@ -48,12 +49,14 @@ Whitespace after the `<!--` and before the `-->` makes it easier to read text in
 ```
 
 - The first is a string which be either `"always"` or `"never"`. The default is `"always"`.
+
   - `"always"` (default) ... there must be at least one whitespace at after the `<!--` and before the `-->`.
   - `"never"` ... there should be no whitespace at after the `<!--` and before the `-->`.
 
 - This rule can also take a 2nd option, an object with the following key: `"exceptions"`.
+
   - The `"exceptions"` value is an array of string patterns which are considered exceptions to the rule.
-  Please note that exceptions are ignored if the first argument is `"never"`.
+    Please note that exceptions are ignored if the first argument is `"never"`.
 
   ```json
   "vue/html-comment-content-spacing": ["error", "always", { "exceptions": ["*"] }]
diff --git a/docs/rules/html-comment-indent.md b/docs/rules/html-comment-indent.md
index 21c53ab2b..2fa8ed7f1 100644
--- a/docs/rules/html-comment-indent.md
+++ b/docs/rules/html-comment-indent.md
@@ -5,11 +5,12 @@ title: vue/html-comment-indent
 description: enforce consistent indentation in HTML comments
 since: v7.0.0
 ---
+
 # vue/html-comment-indent
 
 > enforce consistent indentation in HTML comments
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
diff --git a/docs/rules/html-end-tags.md b/docs/rules/html-end-tags.md
index ab7069b46..fa6333b06 100644
--- a/docs/rules/html-end-tags.md
+++ b/docs/rules/html-end-tags.md
@@ -5,12 +5,13 @@ title: vue/html-end-tags
 description: enforce end tag style
 since: v3.0.0
 ---
+
 # vue/html-end-tags
 
 > enforce end tag style
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
diff --git a/docs/rules/html-indent.md b/docs/rules/html-indent.md
index 18fddf12d..e3ec60b77 100644
--- a/docs/rules/html-indent.md
+++ b/docs/rules/html-indent.md
@@ -5,12 +5,13 @@ title: vue/html-indent
 description: enforce consistent indentation in `<template>`
 since: v3.14.0
 ---
+
 # vue/html-indent
 
 > enforce consistent indentation in `<template>`
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
@@ -78,7 +79,7 @@ This rule enforces a consistent indentation style in `<template>`. The default s
 - `type` (`number | "tab"`) ... The type of indentation. Default is `2`. If this is a number, it's the number of spaces for one indent. If this is `"tab"`, it uses one tab for one indent.
 - `attribute` (`integer`) ... The multiplier of indentation for attributes. Default is `1`.
 - `baseIndent` (`integer`) ... The multiplier of indentation for top-level statements. Default is `1`.
-- `closeBracket` (`integer | object`) ... The multiplier of indentation for right brackets. Default is `0`.  
+- `closeBracket` (`integer | object`) ... The multiplier of indentation for right brackets. Default is `0`.\
   You can apply all of the following by setting a number value.
   - `closeBracket.startTag` (`integer`) ... The multiplier of indentation for right brackets of start tags (`<div>`). Default is `0`.
   - `closeBracket.endTag` (`integer`) ... The multiplier of indentation for right brackets of end tags (`</div>`). Default is `0`.
diff --git a/docs/rules/html-quotes.md b/docs/rules/html-quotes.md
index daeb13ee1..2bbf38c3d 100644
--- a/docs/rules/html-quotes.md
+++ b/docs/rules/html-quotes.md
@@ -5,12 +5,13 @@ title: vue/html-quotes
 description: enforce quotes style of HTML attributes
 since: v3.0.0
 ---
+
 # vue/html-quotes
 
 > enforce quotes style of HTML attributes
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 You can choose quotes of HTML attributes from:
 
diff --git a/docs/rules/html-self-closing.md b/docs/rules/html-self-closing.md
index 0a57a4218..316f462c8 100644
--- a/docs/rules/html-self-closing.md
+++ b/docs/rules/html-self-closing.md
@@ -5,12 +5,13 @@ title: vue/html-self-closing
 description: enforce self-closing style
 since: v3.11.0
 ---
+
 # vue/html-self-closing
 
 > enforce self-closing style
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
diff --git a/docs/rules/index.md b/docs/rules/index.md
new file mode 100644
index 000000000..5d8deaf00
--- /dev/null
+++ b/docs/rules/index.md
@@ -0,0 +1,653 @@
+---
+sidebarDepth: 0
+pageClass: rule-list
+---
+
+# Available rules
+
+<!-- This file is automatically generated in tools/update-docs-rules-index.js, do not change! -->
+
+::: tip Legend
+  :wrench: Indicates that the rule is fixable, and using `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the reported problems.
+
+  :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).
+:::
+
+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.
+
+## Base Rules (Enabling Correct ESLint Parsing)
+
+Rules in this category are enabled for all presets provided by eslint-plugin-vue.
+
+<rules-table>
+
+| Rule ID | Description |    |    |
+|:--------|:------------|:--:|:--:|
+| [vue/comment-directive] | support comment-directives in `<template>` |  | :warning: |
+| [vue/jsx-uses-vars] | prevent variables used in JSX 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/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]` presets.
+- :two: Indicates that the rule is for Vue 2 and is included in all of `"plugin:vue/vue2-essential"`,`*.configs["flat/vue2-essential"]`, `"plugin:vue/vue2-strongly-recommended"`,`*.configs["flat/vue2-strongly-recommended"]` and `"plugin:vue/vue2-recommended"`,`*.configs["flat/vue2-recommended"]` presets.
+
+<rules-table>
+
+| Rule ID | Description |    |    |
+|:--------|:------------|:--:|:--:|
+| [vue/multi-word-component-names] | require component names to be always multi-word |  | :three::two::hammer: |
+| [vue/no-arrow-functions-in-watch] | disallow using arrow functions to define watcher |  | :three::two::warning: |
+| [vue/no-async-in-computed-properties] | disallow asynchronous actions in computed properties |  | :three::two::warning: |
+| [vue/no-child-content] | disallow element's child contents which would be overwritten by a directive like `v-html` or `v-text` | :bulb: | :three::two::warning: |
+| [vue/no-computed-properties-in-data] | disallow accessing computed properties in `data` |  | :three::two::warning: |
+| [vue/no-custom-modifiers-on-v-model] | disallow custom modifiers on v-model used on the component |  | :two::warning: |
+| [vue/no-deprecated-data-object-declaration] | disallow using deprecated object declaration on data (in Vue.js 3.0.0+) | :wrench: | :three::warning: |
+| [vue/no-deprecated-delete-set] | disallow using deprecated `$delete` and `$set` (in Vue.js 3.0.0+) |  | :three::warning: |
+| [vue/no-deprecated-destroyed-lifecycle] | disallow using deprecated `destroyed` and `beforeDestroy` lifecycle hooks (in Vue.js 3.0.0+) | :wrench: | :three::warning: |
+| [vue/no-deprecated-dollar-listeners-api] | disallow using deprecated `$listeners` (in Vue.js 3.0.0+) |  | :three::warning: |
+| [vue/no-deprecated-dollar-scopedslots-api] | disallow using deprecated `$scopedSlots` (in Vue.js 3.0.0+) | :wrench: | :three::warning: |
+| [vue/no-deprecated-events-api] | disallow using deprecated events api (in Vue.js 3.0.0+) |  | :three::warning: |
+| [vue/no-deprecated-filter] | disallow using deprecated filters syntax (in Vue.js 3.0.0+) |  | :three::warning: |
+| [vue/no-deprecated-functional-template] | disallow using deprecated the `functional` template (in Vue.js 3.0.0+) |  | :three::warning: |
+| [vue/no-deprecated-html-element-is] | disallow using deprecated the `is` attribute on HTML elements (in Vue.js 3.0.0+) |  | :three::warning: |
+| [vue/no-deprecated-inline-template] | disallow using deprecated `inline-template` attribute (in Vue.js 3.0.0+) |  | :three::warning: |
+| [vue/no-deprecated-model-definition] | disallow deprecated `model` definition (in Vue.js 3.0.0+) | :bulb: | :three::warning: |
+| [vue/no-deprecated-props-default-this] | disallow deprecated `this` access in props default function (in Vue.js 3.0.0+) |  | :three::warning: |
+| [vue/no-deprecated-router-link-tag-prop] | disallow using deprecated `tag` property on `RouterLink` (in Vue.js 3.0.0+) |  | :three::warning: |
+| [vue/no-deprecated-scope-attribute] | disallow deprecated `scope` attribute (in Vue.js 2.5.0+) | :wrench: | :three::hammer: |
+| [vue/no-deprecated-slot-attribute] | disallow deprecated `slot` attribute (in Vue.js 2.6.0+) | :wrench: | :three::hammer: |
+| [vue/no-deprecated-slot-scope-attribute] | disallow deprecated `slot-scope` attribute (in Vue.js 2.6.0+) | :wrench: | :three::hammer: |
+| [vue/no-deprecated-v-bind-sync] | disallow use of deprecated `.sync` modifier on `v-bind` directive (in Vue.js 3.0.0+) | :wrench: | :three::warning: |
+| [vue/no-deprecated-v-is] | disallow deprecated `v-is` directive (in Vue.js 3.1.0+) |  | :three::hammer: |
+| [vue/no-deprecated-v-on-native-modifier] | disallow using deprecated `.native` modifiers (in Vue.js 3.0.0+) |  | :three::warning: |
+| [vue/no-deprecated-v-on-number-modifiers] | disallow using deprecated number (keycode) modifiers (in Vue.js 3.0.0+) | :wrench: | :three::warning: |
+| [vue/no-deprecated-vue-config-keycodes] | disallow using deprecated `Vue.config.keyCodes` (in Vue.js 3.0.0+) |  | :three::warning: |
+| [vue/no-dupe-keys] | disallow duplication of field names |  | :three::two::warning: |
+| [vue/no-dupe-v-else-if] | disallow duplicate conditions in `v-if` / `v-else-if` chains |  | :three::two::warning: |
+| [vue/no-duplicate-attributes] | disallow duplication of attributes |  | :three::two::warning: |
+| [vue/no-export-in-script-setup] | disallow `export` in `<script setup>` |  | :three::two::warning: |
+| [vue/no-expose-after-await] | disallow asynchronously registered `expose` |  | :three::warning: |
+| [vue/no-lifecycle-after-await] | disallow asynchronously registered lifecycle hooks |  | :three::hammer: |
+| [vue/no-multiple-template-root] | disallow adding multiple root nodes to the template |  | :two::warning: |
+| [vue/no-mutating-props] | disallow mutation of component props |  | :three::two::hammer: |
+| [vue/no-parsing-error] | disallow parsing errors in `<template>` |  | :three::two::warning: |
+| [vue/no-ref-as-operand] | disallow use of value wrapped by `ref()` (Composition API) as an operand | :wrench: | :three::two::hammer: |
+| [vue/no-reserved-component-names] | disallow the use of reserved names in component definitions |  | :three::two::hammer: |
+| [vue/no-reserved-keys] | disallow overwriting reserved keys |  | :three::two::hammer: |
+| [vue/no-reserved-props] | disallow reserved names in props |  | :three::two::warning: |
+| [vue/no-shared-component-data] | enforce component's data property to be a function | :wrench: | :three::two::warning: |
+| [vue/no-side-effects-in-computed-properties] | disallow side effects in computed properties |  | :three::two::warning: |
+| [vue/no-template-key] | disallow `key` attribute on `<template>` |  | :three::two::warning: |
+| [vue/no-textarea-mustache] | disallow mustaches in `<textarea>` |  | :three::two::warning: |
+| [vue/no-unused-components] | disallow registering components that are not used inside templates |  | :three::two::hammer: |
+| [vue/no-unused-vars] | disallow unused variable definitions of v-for directives or scope attributes | :bulb: | :three::two::hammer: |
+| [vue/no-use-computed-property-like-method] | disallow use computed property like method |  | :three::two::warning: |
+| [vue/no-use-v-if-with-v-for] | disallow using `v-if` on the same element as `v-for` |  | :three::two::hammer: |
+| [vue/no-useless-template-attributes] | disallow useless attribute on `<template>` |  | :three::two::warning: |
+| [vue/no-v-for-template-key-on-child] | disallow key of `<template v-for>` placed on child elements |  | :three::warning: |
+| [vue/no-v-for-template-key] | disallow `key` attribute on `<template v-for>` | :no_entry_sign: | :two::warning: |
+| [vue/no-v-model-argument] | disallow adding an argument to `v-model` used in custom component | :no_entry_sign: | :two::warning: |
+| [vue/no-v-text-v-html-on-component] | disallow v-text / v-html on component |  | :three::two::warning: |
+| [vue/no-watch-after-await] | disallow asynchronously registered `watch` |  | :three::hammer: |
+| [vue/prefer-import-from-vue] | enforce import from 'vue' instead of import from '@vue/*' | :wrench: | :three::hammer: |
+| [vue/require-component-is] | require `v-bind:is` of `<component>` elements |  | :three::two::warning: |
+| [vue/require-prop-type-constructor] | require prop type to be a constructor | :wrench: | :three::two::hammer: |
+| [vue/require-render-return] | enforce render function to always return value |  | :three::two::warning: |
+| [vue/require-slots-as-functions] | enforce properties of `$slots` to be used as a function |  | :three::warning: |
+| [vue/require-toggle-inside-transition] | require control the display of the content inside `<transition>` |  | :three::warning: |
+| [vue/require-v-for-key] | require `v-bind:key` with `v-for` directives |  | :three::two::warning: |
+| [vue/require-valid-default-prop] | enforce props default values to be valid |  | :three::two::hammer: |
+| [vue/return-in-computed-property] | enforce that a return statement is present in computed property |  | :three::two::warning: |
+| [vue/return-in-emits-validator] | enforce that a return statement is present in emits validator |  | :three::two::warning: |
+| [vue/use-v-on-exact] | enforce usage of `exact` modifier on `v-on` |  | :three::two::hammer: |
+| [vue/valid-attribute-name] | require valid attribute names |  | :three::two::warning: |
+| [vue/valid-define-emits] | enforce valid `defineEmits` compiler macro |  | :three::two::warning: |
+| [vue/valid-define-options] | enforce valid `defineOptions` compiler macro |  | :three::warning: |
+| [vue/valid-define-props] | enforce valid `defineProps` compiler macro |  | :three::two::warning: |
+| [vue/valid-model-definition] | require valid keys in model option | :no_entry_sign: | :two::warning: |
+| [vue/valid-next-tick] | enforce valid `nextTick` function calls | :wrench::bulb: | :three::two::warning: |
+| [vue/valid-template-root] | enforce valid template root |  | :three::two::warning: |
+| [vue/valid-v-bind-sync] | enforce valid `.sync` modifier on `v-bind` directives | :no_entry_sign: | :two::warning: |
+| [vue/valid-v-bind] | enforce valid `v-bind` directives |  | :three::two::warning: |
+| [vue/valid-v-cloak] | enforce valid `v-cloak` directives |  | :three::two::warning: |
+| [vue/valid-v-else-if] | enforce valid `v-else-if` directives |  | :three::two::warning: |
+| [vue/valid-v-else] | enforce valid `v-else` directives |  | :three::two::warning: |
+| [vue/valid-v-for] | enforce valid `v-for` directives |  | :three::two::warning: |
+| [vue/valid-v-html] | enforce valid `v-html` directives |  | :three::two::warning: |
+| [vue/valid-v-if] | enforce valid `v-if` directives |  | :three::two::warning: |
+| [vue/valid-v-is] | enforce valid `v-is` directives |  | :three::warning: |
+| [vue/valid-v-memo] | enforce valid `v-memo` directives |  | :three::warning: |
+| [vue/valid-v-model] | enforce valid `v-model` directives |  | :three::two::warning: |
+| [vue/valid-v-on] | enforce valid `v-on` directives |  | :three::two::warning: |
+| [vue/valid-v-once] | enforce valid `v-once` directives |  | :three::two::warning: |
+| [vue/valid-v-pre] | enforce valid `v-pre` directives |  | :three::two::warning: |
+| [vue/valid-v-show] | enforce valid `v-show` directives |  | :three::two::warning: |
+| [vue/valid-v-slot] | enforce valid `v-slot` directives |  | :three::two::warning: |
+| [vue/valid-v-text] | 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 all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]` presets.
+- :two: Indicates that the rule is for Vue 2 and is included in `"plugin:vue/vue2-strongly-recommended"`,`*.configs["flat/vue2-strongly-recommended"]` and `"plugin:vue/vue2-recommended"`,`*.configs["flat/vue2-recommended"]` presets.
+
+<rules-table>
+
+| Rule ID | Description |    |    |
+|:--------|:------------|:--:|:--:|
+| [vue/attribute-hyphenation] | enforce attribute naming style on custom components in template | :wrench: | :three::two::hammer: |
+| [vue/component-definition-name-casing] | enforce specific casing for component definition name | :wrench: | :three::two::hammer: |
+| [vue/first-attribute-linebreak] | enforce the location of first attribute | :wrench: | :three::two::lipstick: |
+| [vue/html-closing-bracket-newline] | require or disallow a line break before tag's closing brackets | :wrench: | :three::two::lipstick: |
+| [vue/html-closing-bracket-spacing] | require or disallow a space before tag's closing brackets | :wrench: | :three::two::lipstick: |
+| [vue/html-end-tags] | enforce end tag style | :wrench: | :three::two::hammer: |
+| [vue/html-indent] | enforce consistent indentation in `<template>` | :wrench: | :three::two::lipstick: |
+| [vue/html-quotes] | enforce quotes style of HTML attributes | :wrench: | :three::two::lipstick: |
+| [vue/html-self-closing] | enforce self-closing style | :wrench: | :three::two::lipstick: |
+| [vue/max-attributes-per-line] | enforce the maximum number of attributes per line | :wrench: | :three::two::lipstick: |
+| [vue/multiline-html-element-content-newline] | require a line break before and after the contents of a multiline element | :wrench: | :three::two::lipstick: |
+| [vue/mustache-interpolation-spacing] | enforce unified spacing in mustache interpolations | :wrench: | :three::two::lipstick: |
+| [vue/no-multi-spaces] | disallow multiple spaces | :wrench: | :three::two::lipstick: |
+| [vue/no-spaces-around-equal-signs-in-attribute] | disallow spaces around equal signs in attribute | :wrench: | :three::two::lipstick: |
+| [vue/no-template-shadow] | disallow variable declarations from shadowing variables declared in the outer scope |  | :three::two::hammer: |
+| [vue/one-component-per-file] | enforce that each component should be in its own file |  | :three::two::hammer: |
+| [vue/prop-name-casing] | enforce specific casing for the Prop name in Vue components |  | :three::two::hammer: |
+| [vue/require-default-prop] | require default value for props |  | :three::two::hammer: |
+| [vue/require-explicit-emits] | require `emits` option with name triggered by `$emit()` | :bulb: | :three::hammer: |
+| [vue/require-prop-types] | require type definitions in props |  | :three::two::hammer: |
+| [vue/singleline-html-element-content-newline] | require a line break before and after the contents of a singleline element | :wrench: | :three::two::lipstick: |
+| [vue/v-bind-style] | enforce `v-bind` directive style | :wrench: | :three::two::hammer: |
+| [vue/v-on-event-hyphenation] | enforce v-on event naming style on custom components in template | :wrench: | :three::hammer: |
+| [vue/v-on-style] | enforce `v-on` directive style | :wrench: | :three::two::hammer: |
+| [vue/v-slot-style] | 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/recommended"` and `*.configs["flat/recommended"]` presets.
+- :two: Indicates that the rule is for Vue 2 and is included in `"plugin:vue/vue2-recommended"`,`*.configs["flat/vue2-recommended"]` preset.
+
+<rules-table>
+
+| Rule ID | Description |    |    |
+|:--------|:------------|:--:|:--:|
+| [vue/attributes-order] | enforce order of attributes | :wrench: | :three::two::hammer: |
+| [vue/block-order] | enforce order of component top-level elements | :wrench: | :three::two::hammer: |
+| [vue/no-lone-template] | disallow unnecessary `<template>` |  | :three::two::warning: |
+| [vue/no-multiple-slot-args] | disallow passing multiple arguments to scoped slots |  | :three::two::warning: |
+| [vue/no-required-prop-with-default] | enforce props with default values to be optional | :wrench::bulb: | :three::two::warning: |
+| [vue/no-v-html] | disallow use of v-html to prevent XSS attack |  | :three::two::hammer: |
+| [vue/order-in-components] | enforce order of properties in components | :wrench::bulb: | :three::two::hammer: |
+| [vue/this-in-template] | disallow usage of `this` in template | :wrench: | :three::two::hammer: |
+
+</rules-table>
+
+## Uncategorized
+
+No preset enables the rules in this category.
+Please enable each rule if you want.
+
+For example:
+
+```json
+{
+  "rules": {
+    "vue/block-lang": "error"
+  }
+}
+```
+
+<rules-table>
+
+| Rule ID | Description |    |    |
+|:--------|:------------|:--:|:--:|
+| [vue/block-lang] | disallow use other than available `lang` |  | :hammer: |
+| [vue/block-tag-newline] | enforce line breaks after opening and before closing block-level tags | :wrench: | :lipstick: |
+| [vue/component-api-style] | enforce component API style |  | :hammer: |
+| [vue/component-name-in-template-casing] | enforce specific casing for the component naming style in template | :wrench: | :hammer: |
+| [vue/component-options-name-casing] | enforce the casing of component name in `components` options | :wrench::bulb: | :hammer: |
+| [vue/custom-event-name-casing] | enforce specific casing for custom event name |  | :hammer: |
+| [vue/define-emits-declaration] | enforce declaration style of `defineEmits` |  | :hammer: |
+| [vue/define-macros-order] | enforce order of compiler macros (`defineProps`, `defineEmits`, etc.) | :wrench::bulb: | :lipstick: |
+| [vue/define-props-declaration] | enforce declaration style of `defineProps` |  | :hammer: |
+| [vue/define-props-destructuring] | enforce consistent style for props destructuring |  | :hammer: |
+| [vue/enforce-style-attribute] | enforce or forbid the use of the `scoped` and `module` attributes in SFC top level style tags |  | :hammer: |
+| [vue/html-button-has-type] | disallow usage of button without an explicit type attribute |  | :hammer: |
+| [vue/html-comment-content-newline] | enforce unified line break in HTML comments | :wrench: | :lipstick: |
+| [vue/html-comment-content-spacing] | enforce unified spacing in HTML comments | :wrench: | :lipstick: |
+| [vue/html-comment-indent] | enforce consistent indentation in HTML comments | :wrench: | :lipstick: |
+| [vue/match-component-file-name] | require component name property to match its file name | :bulb: | :hammer: |
+| [vue/match-component-import-name] | require the registered component name to match the imported component name |  | :warning: |
+| [vue/max-lines-per-block] | enforce maximum number of lines in Vue SFC blocks |  | :warning: |
+| [vue/max-props] | enforce maximum number of props in Vue component |  | :warning: |
+| [vue/max-template-depth] | enforce maximum depth of template |  | :warning: |
+| [vue/new-line-between-multi-line-property] | enforce new lines between multi-line properties in Vue components | :wrench: | :lipstick: |
+| [vue/next-tick-style] | enforce Promise or callback style in `nextTick` | :wrench: | :hammer: |
+| [vue/no-bare-strings-in-template] | disallow the use of bare strings in `<template>` |  | :hammer: |
+| [vue/no-boolean-default] | disallow boolean defaults |  | :hammer: |
+| [vue/no-duplicate-attr-inheritance] | enforce `inheritAttrs` to be set to `false` when using `v-bind="$attrs"` |  | :hammer: |
+| [vue/no-duplicate-class-names] | disallow duplication of class names in class attributes | :wrench: | :hammer: |
+| [vue/no-empty-component-block] | disallow the `<template>` `<script>` `<style>` block to be empty | :wrench: | :hammer: |
+| [vue/no-import-compiler-macros] | disallow importing Vue compiler macros | :wrench: | :warning: |
+| [vue/no-multiple-objects-in-class] | disallow passing multiple objects in an array to class |  | :hammer: |
+| [vue/no-negated-v-if-condition] | disallow negated conditions in v-if/v-else | :wrench: | :hammer: |
+| [vue/no-potential-component-option-typo] | disallow a potential typo in your component property | :bulb: | :hammer: |
+| [vue/no-ref-object-reactivity-loss] | disallow usages of ref objects that can lead to loss of reactivity |  | :warning: |
+| [vue/no-restricted-block] | disallow specific block |  | :hammer: |
+| [vue/no-restricted-call-after-await] | disallow asynchronously called restricted methods |  | :hammer: |
+| [vue/no-restricted-class] | disallow specific classes in Vue components |  | :warning: |
+| [vue/no-restricted-component-names] | disallow specific component names | :bulb: | :hammer: |
+| [vue/no-restricted-component-options] | disallow specific component option |  | :hammer: |
+| [vue/no-restricted-custom-event] | disallow specific custom event | :bulb: | :hammer: |
+| [vue/no-restricted-html-elements] | disallow specific elements |  | :hammer: |
+| [vue/no-restricted-props] | disallow specific props | :bulb: | :hammer: |
+| [vue/no-restricted-static-attribute] | disallow specific attribute |  | :hammer: |
+| [vue/no-restricted-v-bind] | disallow specific argument in `v-bind` |  | :hammer: |
+| [vue/no-restricted-v-on] | disallow specific argument in `v-on` |  | :hammer: |
+| [vue/no-root-v-if] | disallow `v-if` directives on root element |  | :hammer: |
+| [vue/no-setup-props-reactivity-loss] | disallow usages that lose the reactivity of `props` passed to `setup` |  | :hammer: |
+| [vue/no-static-inline-styles] | disallow static inline `style` attributes |  | :hammer: |
+| [vue/no-template-target-blank] | disallow target="_blank" attribute without rel="noopener noreferrer" | :bulb: | :warning: |
+| [vue/no-this-in-before-route-enter] | disallow `this` usage in a `beforeRouteEnter` method |  | :warning: |
+| [vue/no-undef-components] | disallow use of undefined components in `<template>` |  | :hammer: |
+| [vue/no-undef-properties] | disallow undefined properties |  | :hammer: |
+| [vue/no-unsupported-features] | disallow unsupported Vue.js syntax on the specified version | :wrench: | :hammer: |
+| [vue/no-unused-emit-declarations] | disallow unused emit declarations |  | :hammer: |
+| [vue/no-unused-properties] | disallow unused properties |  | :hammer: |
+| [vue/no-unused-refs] | disallow unused refs |  | :hammer: |
+| [vue/no-use-v-else-with-v-for] | disallow using `v-else-if`/`v-else` on the same element as `v-for` |  | :hammer: |
+| [vue/no-useless-mustaches] | disallow unnecessary mustache interpolations | :wrench: | :hammer: |
+| [vue/no-useless-v-bind] | disallow unnecessary `v-bind` directives | :wrench: | :hammer: |
+| [vue/no-v-text] | disallow use of v-text |  | :hammer: |
+| [vue/padding-line-between-blocks] | require or disallow padding lines between blocks | :wrench: | :lipstick: |
+| [vue/padding-line-between-tags] | require or disallow newlines between sibling tags in template | :wrench: | :lipstick: |
+| [vue/padding-lines-in-component-definition] | require or disallow padding lines in component definition | :wrench: | :lipstick: |
+| [vue/prefer-define-options] | enforce use of `defineOptions` instead of default export | :wrench: | :hammer: |
+| [vue/prefer-prop-type-boolean-first] | enforce `Boolean` comes first in component prop types | :bulb: | :warning: |
+| [vue/prefer-separate-static-class] | require static class names in template to be in a separate `class` attribute | :wrench: | :hammer: |
+| [vue/prefer-true-attribute-shorthand] | require shorthand form attribute when `v-bind` value is `true` | :bulb: | :hammer: |
+| [vue/prefer-use-template-ref] | require using `useTemplateRef` instead of `ref`/`shallowRef` for template refs |  | :hammer: |
+| [vue/require-default-export] | require components to be the default export |  | :warning: |
+| [vue/require-direct-export] | require the component to be directly exported |  | :hammer: |
+| [vue/require-emit-validator] | require type definitions in emits | :bulb: | :hammer: |
+| [vue/require-explicit-slots] | require slots to be explicitly defined |  | :warning: |
+| [vue/require-expose] | require declare public properties using `expose` | :bulb: | :hammer: |
+| [vue/require-macro-variable-name] | require a certain macro variable name | :bulb: | :hammer: |
+| [vue/require-name-property] | require a name property in Vue components | :bulb: | :hammer: |
+| [vue/require-prop-comment] | require props to have a comment |  | :hammer: |
+| [vue/require-typed-object-prop] | enforce adding type declarations to object props | :bulb: | :hammer: |
+| [vue/require-typed-ref] | require `ref` and `shallowRef` functions to be strongly typed |  | :hammer: |
+| [vue/restricted-component-names] | enforce using only specific component names |  | :warning: |
+| [vue/script-indent] | enforce consistent indentation in `<script>` | :wrench: | :lipstick: |
+| [vue/slot-name-casing] | enforce specific casing for slot names |  | :hammer: |
+| [vue/sort-keys] | enforce sort-keys in a manner that is compatible with order-in-components |  | :hammer: |
+| [vue/static-class-names-order] | enforce static class names order | :wrench: | :hammer: |
+| [vue/v-for-delimiter-style] | enforce `v-for` directive's delimiter style | :wrench: | :lipstick: |
+| [vue/v-if-else-key] | require key attribute for conditionally rendered repeated components | :wrench: | :warning: |
+| [vue/v-on-handler-style] | enforce writing style for handlers 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>`.
+
+<rules-table>
+
+| Rule ID | Description |    |    |
+|:--------|:------------|:--:|:--:|
+| [vue/array-bracket-newline] | Enforce linebreaks after opening and before closing array brackets in `<template>` | :wrench: | :lipstick: |
+| [vue/array-bracket-spacing] | Enforce consistent spacing inside array brackets in `<template>` | :wrench: | :lipstick: |
+| [vue/array-element-newline] | Enforce line breaks after each array element in `<template>` | :wrench: | :lipstick: |
+| [vue/arrow-spacing] | Enforce consistent spacing before and after the arrow in arrow functions in `<template>` | :wrench: | :lipstick: |
+| [vue/block-spacing] | Disallow or enforce spaces inside of blocks after opening block and before closing block in `<template>` | :wrench: | :lipstick: |
+| [vue/brace-style] | Enforce consistent brace style for blocks in `<template>` | :wrench: | :lipstick: |
+| [vue/camelcase] | Enforce camelcase naming convention in `<template>` |  | :hammer: |
+| [vue/comma-dangle] | Require or disallow trailing commas in `<template>` | :wrench: | :lipstick: |
+| [vue/comma-spacing] | Enforce consistent spacing before and after commas in `<template>` | :wrench: | :lipstick: |
+| [vue/comma-style] | Enforce consistent comma style in `<template>` | :wrench: | :lipstick: |
+| [vue/dot-location] | Enforce consistent newlines before and after dots in `<template>` | :wrench: | :lipstick: |
+| [vue/dot-notation] | Enforce dot notation whenever possible in `<template>` | :wrench: | :hammer: |
+| [vue/eqeqeq] | Require the use of `===` and `!==` in `<template>` | :wrench::bulb: | :hammer: |
+| [vue/func-call-spacing] | Require or disallow spacing between function identifiers and their invocations in `<template>` | :wrench: | :lipstick: |
+| [vue/key-spacing] | Enforce consistent spacing between property names and type annotations in types and interfaces in `<template>` | :wrench: | :lipstick: |
+| [vue/keyword-spacing] | Enforce consistent spacing before and after keywords in `<template>` | :wrench: | :lipstick: |
+| [vue/max-len] | enforce a maximum line length in `.vue` files |  | :lipstick: |
+| [vue/multiline-ternary] | Enforce newlines between operands of ternary expressions in `<template>` | :wrench: | :lipstick: |
+| [vue/no-console] | Disallow the use of `console` in `<template>` | :bulb: | :hammer: |
+| [vue/no-constant-condition] | Disallow constant expressions in conditions in `<template>` |  | :warning: |
+| [vue/no-empty-pattern] | Disallow empty destructuring patterns in `<template>` |  | :warning: |
+| [vue/no-extra-parens] | Disallow unnecessary parentheses in `<template>` | :wrench: | :lipstick: |
+| [vue/no-implicit-coercion] | Disallow shorthand type conversions in `<template>` | :wrench::bulb: | :hammer: |
+| [vue/no-irregular-whitespace] | disallow irregular whitespace in `.vue` files |  | :warning: |
+| [vue/no-loss-of-precision] | Disallow literal numbers that lose precision in `<template>` |  | :warning: |
+| [vue/no-negated-condition] | Disallow negated conditions in `<template>` |  | :hammer: |
+| [vue/no-restricted-syntax] | Disallow specified syntax in `<template>` |  | :hammer: |
+| [vue/no-sparse-arrays] | Disallow sparse arrays in `<template>` |  | :warning: |
+| [vue/no-useless-concat] | Disallow unnecessary concatenation of literals or template literals in `<template>` |  | :hammer: |
+| [vue/object-curly-newline] | Enforce consistent line breaks after opening and before closing braces in `<template>` | :wrench: | :lipstick: |
+| [vue/object-curly-spacing] | Enforce consistent spacing inside braces in `<template>` | :wrench: | :lipstick: |
+| [vue/object-property-newline] | Enforce placing object properties on separate lines in `<template>` | :wrench: | :lipstick: |
+| [vue/object-shorthand] | Require or disallow method and property shorthand syntax for object literals in `<template>` | :wrench: | :hammer: |
+| [vue/operator-linebreak] | Enforce consistent linebreak style for operators in `<template>` | :wrench: | :lipstick: |
+| [vue/prefer-template] | Require template literals instead of string concatenation in `<template>` | :wrench: | :hammer: |
+| [vue/quote-props] | Require quotes around object literal, type literal, interfaces and enums property names in `<template>` | :wrench: | :lipstick: |
+| [vue/space-in-parens] | Enforce consistent spacing inside parentheses in `<template>` | :wrench: | :lipstick: |
+| [vue/space-infix-ops] | Require spacing around infix operators in `<template>` | :wrench: | :lipstick: |
+| [vue/space-unary-ops] | Enforce consistent spacing before or after unary operators in `<template>` | :wrench: | :lipstick: |
+| [vue/template-curly-spacing] | Require or disallow spacing around embedded expressions of template strings in `<template>` | :wrench: | :lipstick: |
+
+</rules-table>
+
+## Deprecated
+
+- :no_entry_sign: We're going to remove deprecated rules in the next major release. Please migrate to successor/new rules.
+- :innocent: We don't fix bugs which are in deprecated rules since we don't have enough resources.
+
+| Rule ID | Replaced by |
+|:--------|:------------|
+| [vue/no-v-for-template-key] | (no replacement) |
+| [vue/no-v-model-argument] | (no replacement) |
+| [vue/valid-model-definition] | (no replacement) |
+| [vue/valid-v-bind-sync] | (no replacement) |
+
+## Removed
+
+- :no_entry: These rules have been removed in a previous major release, after they have been deprecated for a while.
+
+| Rule ID | Replaced by | Deprecated in version  | Removed in version |
+|:--------|:------------|:-----------------------|:-------------------|
+| [vue/component-tags-order] | [vue/block-order] | [v9.16.0] | [v10.0.0] |
+| [vue/experimental-script-setup-vars] | (no replacement) | [v7.13.0] | [v9.0.0] |
+| [vue/name-property-casing] | [vue/component-definition-name-casing] | [v7.0.0] | [v9.0.0] |
+| [vue/no-confusing-v-for-v-if] | [vue/no-use-v-if-with-v-for] | [v5.0.0] | [v9.0.0] |
+| [vue/no-invalid-model-keys] | [vue/valid-model-definition] | [v9.0.0] | [v10.0.0] |
+| [vue/no-ref-object-destructure] | [vue/no-ref-object-reactivity-loss] | [v9.17.0] | [v10.0.0] |
+| [vue/no-setup-props-destructure] | [vue/no-setup-props-reactivity-loss] | [v9.17.0] | [v10.0.0] |
+| [vue/no-unregistered-components] | [vue/no-undef-components] | [v8.4.0] | [v9.0.0] |
+| [vue/script-setup-uses-vars] | (no replacement) | [v9.0.0] | [v10.0.0] |
+| [vue/v-on-function-call] | [vue/v-on-handler-style] | [v9.7.0] | [v10.0.0] |
+
+<!-- link definitions for rules -->
+
+[vue/array-bracket-newline]: ./array-bracket-newline.md
+[vue/array-bracket-spacing]: ./array-bracket-spacing.md
+[vue/array-element-newline]: ./array-element-newline.md
+[vue/arrow-spacing]: ./arrow-spacing.md
+[vue/attribute-hyphenation]: ./attribute-hyphenation.md
+[vue/attributes-order]: ./attributes-order.md
+[vue/block-lang]: ./block-lang.md
+[vue/block-order]: ./block-order.md
+[vue/block-spacing]: ./block-spacing.md
+[vue/block-tag-newline]: ./block-tag-newline.md
+[vue/brace-style]: ./brace-style.md
+[vue/camelcase]: ./camelcase.md
+[vue/comma-dangle]: ./comma-dangle.md
+[vue/comma-spacing]: ./comma-spacing.md
+[vue/comma-style]: ./comma-style.md
+[vue/comment-directive]: ./comment-directive.md
+[vue/component-api-style]: ./component-api-style.md
+[vue/component-definition-name-casing]: ./component-definition-name-casing.md
+[vue/component-name-in-template-casing]: ./component-name-in-template-casing.md
+[vue/component-options-name-casing]: ./component-options-name-casing.md
+[vue/custom-event-name-casing]: ./custom-event-name-casing.md
+[vue/define-emits-declaration]: ./define-emits-declaration.md
+[vue/define-macros-order]: ./define-macros-order.md
+[vue/define-props-declaration]: ./define-props-declaration.md
+[vue/define-props-destructuring]: ./define-props-destructuring.md
+[vue/dot-location]: ./dot-location.md
+[vue/dot-notation]: ./dot-notation.md
+[vue/enforce-style-attribute]: ./enforce-style-attribute.md
+[vue/eqeqeq]: ./eqeqeq.md
+[vue/first-attribute-linebreak]: ./first-attribute-linebreak.md
+[vue/func-call-spacing]: ./func-call-spacing.md
+[vue/html-button-has-type]: ./html-button-has-type.md
+[vue/html-closing-bracket-newline]: ./html-closing-bracket-newline.md
+[vue/html-closing-bracket-spacing]: ./html-closing-bracket-spacing.md
+[vue/html-comment-content-newline]: ./html-comment-content-newline.md
+[vue/html-comment-content-spacing]: ./html-comment-content-spacing.md
+[vue/html-comment-indent]: ./html-comment-indent.md
+[vue/html-end-tags]: ./html-end-tags.md
+[vue/html-indent]: ./html-indent.md
+[vue/html-quotes]: ./html-quotes.md
+[vue/html-self-closing]: ./html-self-closing.md
+[vue/jsx-uses-vars]: ./jsx-uses-vars.md
+[vue/key-spacing]: ./key-spacing.md
+[vue/keyword-spacing]: ./keyword-spacing.md
+[vue/match-component-file-name]: ./match-component-file-name.md
+[vue/match-component-import-name]: ./match-component-import-name.md
+[vue/max-attributes-per-line]: ./max-attributes-per-line.md
+[vue/max-len]: ./max-len.md
+[vue/max-lines-per-block]: ./max-lines-per-block.md
+[vue/max-props]: ./max-props.md
+[vue/max-template-depth]: ./max-template-depth.md
+[vue/multi-word-component-names]: ./multi-word-component-names.md
+[vue/multiline-html-element-content-newline]: ./multiline-html-element-content-newline.md
+[vue/multiline-ternary]: ./multiline-ternary.md
+[vue/mustache-interpolation-spacing]: ./mustache-interpolation-spacing.md
+[vue/new-line-between-multi-line-property]: ./new-line-between-multi-line-property.md
+[vue/next-tick-style]: ./next-tick-style.md
+[vue/no-arrow-functions-in-watch]: ./no-arrow-functions-in-watch.md
+[vue/no-async-in-computed-properties]: ./no-async-in-computed-properties.md
+[vue/no-bare-strings-in-template]: ./no-bare-strings-in-template.md
+[vue/no-boolean-default]: ./no-boolean-default.md
+[vue/no-child-content]: ./no-child-content.md
+[vue/no-computed-properties-in-data]: ./no-computed-properties-in-data.md
+[vue/no-console]: ./no-console.md
+[vue/no-constant-condition]: ./no-constant-condition.md
+[vue/no-custom-modifiers-on-v-model]: ./no-custom-modifiers-on-v-model.md
+[vue/no-deprecated-data-object-declaration]: ./no-deprecated-data-object-declaration.md
+[vue/no-deprecated-delete-set]: ./no-deprecated-delete-set.md
+[vue/no-deprecated-destroyed-lifecycle]: ./no-deprecated-destroyed-lifecycle.md
+[vue/no-deprecated-dollar-listeners-api]: ./no-deprecated-dollar-listeners-api.md
+[vue/no-deprecated-dollar-scopedslots-api]: ./no-deprecated-dollar-scopedslots-api.md
+[vue/no-deprecated-events-api]: ./no-deprecated-events-api.md
+[vue/no-deprecated-filter]: ./no-deprecated-filter.md
+[vue/no-deprecated-functional-template]: ./no-deprecated-functional-template.md
+[vue/no-deprecated-html-element-is]: ./no-deprecated-html-element-is.md
+[vue/no-deprecated-inline-template]: ./no-deprecated-inline-template.md
+[vue/no-deprecated-model-definition]: ./no-deprecated-model-definition.md
+[vue/no-deprecated-props-default-this]: ./no-deprecated-props-default-this.md
+[vue/no-deprecated-router-link-tag-prop]: ./no-deprecated-router-link-tag-prop.md
+[vue/no-deprecated-scope-attribute]: ./no-deprecated-scope-attribute.md
+[vue/no-deprecated-slot-attribute]: ./no-deprecated-slot-attribute.md
+[vue/no-deprecated-slot-scope-attribute]: ./no-deprecated-slot-scope-attribute.md
+[vue/no-deprecated-v-bind-sync]: ./no-deprecated-v-bind-sync.md
+[vue/no-deprecated-v-is]: ./no-deprecated-v-is.md
+[vue/no-deprecated-v-on-native-modifier]: ./no-deprecated-v-on-native-modifier.md
+[vue/no-deprecated-v-on-number-modifiers]: ./no-deprecated-v-on-number-modifiers.md
+[vue/no-deprecated-vue-config-keycodes]: ./no-deprecated-vue-config-keycodes.md
+[vue/no-dupe-keys]: ./no-dupe-keys.md
+[vue/no-dupe-v-else-if]: ./no-dupe-v-else-if.md
+[vue/no-duplicate-attr-inheritance]: ./no-duplicate-attr-inheritance.md
+[vue/no-duplicate-attributes]: ./no-duplicate-attributes.md
+[vue/no-duplicate-class-names]: ./no-duplicate-class-names.md
+[vue/no-empty-component-block]: ./no-empty-component-block.md
+[vue/no-empty-pattern]: ./no-empty-pattern.md
+[vue/no-export-in-script-setup]: ./no-export-in-script-setup.md
+[vue/no-expose-after-await]: ./no-expose-after-await.md
+[vue/no-extra-parens]: ./no-extra-parens.md
+[vue/no-implicit-coercion]: ./no-implicit-coercion.md
+[vue/no-import-compiler-macros]: ./no-import-compiler-macros.md
+[vue/no-irregular-whitespace]: ./no-irregular-whitespace.md
+[vue/no-lifecycle-after-await]: ./no-lifecycle-after-await.md
+[vue/no-lone-template]: ./no-lone-template.md
+[vue/no-loss-of-precision]: ./no-loss-of-precision.md
+[vue/no-multi-spaces]: ./no-multi-spaces.md
+[vue/no-multiple-objects-in-class]: ./no-multiple-objects-in-class.md
+[vue/no-multiple-slot-args]: ./no-multiple-slot-args.md
+[vue/no-multiple-template-root]: ./no-multiple-template-root.md
+[vue/no-mutating-props]: ./no-mutating-props.md
+[vue/no-negated-condition]: ./no-negated-condition.md
+[vue/no-negated-v-if-condition]: ./no-negated-v-if-condition.md
+[vue/no-parsing-error]: ./no-parsing-error.md
+[vue/no-potential-component-option-typo]: ./no-potential-component-option-typo.md
+[vue/no-ref-as-operand]: ./no-ref-as-operand.md
+[vue/no-ref-object-reactivity-loss]: ./no-ref-object-reactivity-loss.md
+[vue/no-required-prop-with-default]: ./no-required-prop-with-default.md
+[vue/no-reserved-component-names]: ./no-reserved-component-names.md
+[vue/no-reserved-keys]: ./no-reserved-keys.md
+[vue/no-reserved-props]: ./no-reserved-props.md
+[vue/no-restricted-block]: ./no-restricted-block.md
+[vue/no-restricted-call-after-await]: ./no-restricted-call-after-await.md
+[vue/no-restricted-class]: ./no-restricted-class.md
+[vue/no-restricted-component-names]: ./no-restricted-component-names.md
+[vue/no-restricted-component-options]: ./no-restricted-component-options.md
+[vue/no-restricted-custom-event]: ./no-restricted-custom-event.md
+[vue/no-restricted-html-elements]: ./no-restricted-html-elements.md
+[vue/no-restricted-props]: ./no-restricted-props.md
+[vue/no-restricted-static-attribute]: ./no-restricted-static-attribute.md
+[vue/no-restricted-syntax]: ./no-restricted-syntax.md
+[vue/no-restricted-v-bind]: ./no-restricted-v-bind.md
+[vue/no-restricted-v-on]: ./no-restricted-v-on.md
+[vue/no-root-v-if]: ./no-root-v-if.md
+[vue/no-setup-props-reactivity-loss]: ./no-setup-props-reactivity-loss.md
+[vue/no-shared-component-data]: ./no-shared-component-data.md
+[vue/no-side-effects-in-computed-properties]: ./no-side-effects-in-computed-properties.md
+[vue/no-spaces-around-equal-signs-in-attribute]: ./no-spaces-around-equal-signs-in-attribute.md
+[vue/no-sparse-arrays]: ./no-sparse-arrays.md
+[vue/no-static-inline-styles]: ./no-static-inline-styles.md
+[vue/no-template-key]: ./no-template-key.md
+[vue/no-template-shadow]: ./no-template-shadow.md
+[vue/no-template-target-blank]: ./no-template-target-blank.md
+[vue/no-textarea-mustache]: ./no-textarea-mustache.md
+[vue/no-this-in-before-route-enter]: ./no-this-in-before-route-enter.md
+[vue/no-undef-components]: ./no-undef-components.md
+[vue/no-undef-properties]: ./no-undef-properties.md
+[vue/no-unsupported-features]: ./no-unsupported-features.md
+[vue/no-unused-components]: ./no-unused-components.md
+[vue/no-unused-emit-declarations]: ./no-unused-emit-declarations.md
+[vue/no-unused-properties]: ./no-unused-properties.md
+[vue/no-unused-refs]: ./no-unused-refs.md
+[vue/no-unused-vars]: ./no-unused-vars.md
+[vue/no-use-computed-property-like-method]: ./no-use-computed-property-like-method.md
+[vue/no-use-v-else-with-v-for]: ./no-use-v-else-with-v-for.md
+[vue/no-use-v-if-with-v-for]: ./no-use-v-if-with-v-for.md
+[vue/no-useless-concat]: ./no-useless-concat.md
+[vue/no-useless-mustaches]: ./no-useless-mustaches.md
+[vue/no-useless-template-attributes]: ./no-useless-template-attributes.md
+[vue/no-useless-v-bind]: ./no-useless-v-bind.md
+[vue/no-v-for-template-key-on-child]: ./no-v-for-template-key-on-child.md
+[vue/no-v-for-template-key]: ./no-v-for-template-key.md
+[vue/no-v-html]: ./no-v-html.md
+[vue/no-v-model-argument]: ./no-v-model-argument.md
+[vue/no-v-text-v-html-on-component]: ./no-v-text-v-html-on-component.md
+[vue/no-v-text]: ./no-v-text.md
+[vue/no-watch-after-await]: ./no-watch-after-await.md
+[vue/object-curly-newline]: ./object-curly-newline.md
+[vue/object-curly-spacing]: ./object-curly-spacing.md
+[vue/object-property-newline]: ./object-property-newline.md
+[vue/object-shorthand]: ./object-shorthand.md
+[vue/one-component-per-file]: ./one-component-per-file.md
+[vue/operator-linebreak]: ./operator-linebreak.md
+[vue/order-in-components]: ./order-in-components.md
+[vue/padding-line-between-blocks]: ./padding-line-between-blocks.md
+[vue/padding-line-between-tags]: ./padding-line-between-tags.md
+[vue/padding-lines-in-component-definition]: ./padding-lines-in-component-definition.md
+[vue/prefer-define-options]: ./prefer-define-options.md
+[vue/prefer-import-from-vue]: ./prefer-import-from-vue.md
+[vue/prefer-prop-type-boolean-first]: ./prefer-prop-type-boolean-first.md
+[vue/prefer-separate-static-class]: ./prefer-separate-static-class.md
+[vue/prefer-template]: ./prefer-template.md
+[vue/prefer-true-attribute-shorthand]: ./prefer-true-attribute-shorthand.md
+[vue/prefer-use-template-ref]: ./prefer-use-template-ref.md
+[vue/prop-name-casing]: ./prop-name-casing.md
+[vue/quote-props]: ./quote-props.md
+[vue/require-component-is]: ./require-component-is.md
+[vue/require-default-export]: ./require-default-export.md
+[vue/require-default-prop]: ./require-default-prop.md
+[vue/require-direct-export]: ./require-direct-export.md
+[vue/require-emit-validator]: ./require-emit-validator.md
+[vue/require-explicit-emits]: ./require-explicit-emits.md
+[vue/require-explicit-slots]: ./require-explicit-slots.md
+[vue/require-expose]: ./require-expose.md
+[vue/require-macro-variable-name]: ./require-macro-variable-name.md
+[vue/require-name-property]: ./require-name-property.md
+[vue/require-prop-comment]: ./require-prop-comment.md
+[vue/require-prop-type-constructor]: ./require-prop-type-constructor.md
+[vue/require-prop-types]: ./require-prop-types.md
+[vue/require-render-return]: ./require-render-return.md
+[vue/require-slots-as-functions]: ./require-slots-as-functions.md
+[vue/require-toggle-inside-transition]: ./require-toggle-inside-transition.md
+[vue/require-typed-object-prop]: ./require-typed-object-prop.md
+[vue/require-typed-ref]: ./require-typed-ref.md
+[vue/require-v-for-key]: ./require-v-for-key.md
+[vue/require-valid-default-prop]: ./require-valid-default-prop.md
+[vue/restricted-component-names]: ./restricted-component-names.md
+[vue/return-in-computed-property]: ./return-in-computed-property.md
+[vue/return-in-emits-validator]: ./return-in-emits-validator.md
+[vue/script-indent]: ./script-indent.md
+[vue/singleline-html-element-content-newline]: ./singleline-html-element-content-newline.md
+[vue/slot-name-casing]: ./slot-name-casing.md
+[vue/sort-keys]: ./sort-keys.md
+[vue/space-in-parens]: ./space-in-parens.md
+[vue/space-infix-ops]: ./space-infix-ops.md
+[vue/space-unary-ops]: ./space-unary-ops.md
+[vue/static-class-names-order]: ./static-class-names-order.md
+[vue/template-curly-spacing]: ./template-curly-spacing.md
+[vue/this-in-template]: ./this-in-template.md
+[vue/use-v-on-exact]: ./use-v-on-exact.md
+[vue/v-bind-style]: ./v-bind-style.md
+[vue/v-for-delimiter-style]: ./v-for-delimiter-style.md
+[vue/v-if-else-key]: ./v-if-else-key.md
+[vue/v-on-event-hyphenation]: ./v-on-event-hyphenation.md
+[vue/v-on-handler-style]: ./v-on-handler-style.md
+[vue/v-on-style]: ./v-on-style.md
+[vue/v-slot-style]: ./v-slot-style.md
+[vue/valid-attribute-name]: ./valid-attribute-name.md
+[vue/valid-define-emits]: ./valid-define-emits.md
+[vue/valid-define-options]: ./valid-define-options.md
+[vue/valid-define-props]: ./valid-define-props.md
+[vue/valid-model-definition]: ./valid-model-definition.md
+[vue/valid-next-tick]: ./valid-next-tick.md
+[vue/valid-template-root]: ./valid-template-root.md
+[vue/valid-v-bind-sync]: ./valid-v-bind-sync.md
+[vue/valid-v-bind]: ./valid-v-bind.md
+[vue/valid-v-cloak]: ./valid-v-cloak.md
+[vue/valid-v-else-if]: ./valid-v-else-if.md
+[vue/valid-v-else]: ./valid-v-else.md
+[vue/valid-v-for]: ./valid-v-for.md
+[vue/valid-v-html]: ./valid-v-html.md
+[vue/valid-v-if]: ./valid-v-if.md
+[vue/valid-v-is]: ./valid-v-is.md
+[vue/valid-v-memo]: ./valid-v-memo.md
+[vue/valid-v-model]: ./valid-v-model.md
+[vue/valid-v-on]: ./valid-v-on.md
+[vue/valid-v-once]: ./valid-v-once.md
+[vue/valid-v-pre]: ./valid-v-pre.md
+[vue/valid-v-show]: ./valid-v-show.md
+[vue/valid-v-slot]: ./valid-v-slot.md
+[vue/valid-v-text]: ./valid-v-text.md
+
+<!-- link definitions for removed rules -->
+
+[vue/component-tags-order]: ./component-tags-order.md
+[vue/experimental-script-setup-vars]: ./experimental-script-setup-vars.md
+[vue/name-property-casing]: ./name-property-casing.md
+[vue/no-confusing-v-for-v-if]: ./no-confusing-v-for-v-if.md
+[vue/no-invalid-model-keys]: ./no-invalid-model-keys.md
+[vue/no-ref-object-destructure]: ./no-ref-object-destructure.md
+[vue/no-setup-props-destructure]: ./no-setup-props-destructure.md
+[vue/no-unregistered-components]: ./no-unregistered-components.md
+[vue/script-setup-uses-vars]: ./script-setup-uses-vars.md
+[vue/v-on-function-call]: ./v-on-function-call.md
+
+<!-- link definitions for releases -->
+
+[v10.0.0]: https://github.com/vuejs/eslint-plugin-vue/releases/tag/v10.0.0
+[v5.0.0]: https://github.com/vuejs/eslint-plugin-vue/releases/tag/v5.0.0
+[v7.0.0]: https://github.com/vuejs/eslint-plugin-vue/releases/tag/v7.0.0
+[v7.13.0]: https://github.com/vuejs/eslint-plugin-vue/releases/tag/v7.13.0
+[v8.4.0]: https://github.com/vuejs/eslint-plugin-vue/releases/tag/v8.4.0
+[v9.0.0]: https://github.com/vuejs/eslint-plugin-vue/releases/tag/v9.0.0
+[v9.16.0]: https://github.com/vuejs/eslint-plugin-vue/releases/tag/v9.16.0
+[v9.17.0]: https://github.com/vuejs/eslint-plugin-vue/releases/tag/v9.17.0
+[v9.7.0]: https://github.com/vuejs/eslint-plugin-vue/releases/tag/v9.7.0
diff --git a/docs/rules/jsx-uses-vars.md b/docs/rules/jsx-uses-vars.md
index 1c854a623..88719a690 100644
--- a/docs/rules/jsx-uses-vars.md
+++ b/docs/rules/jsx-uses-vars.md
@@ -5,11 +5,12 @@ title: vue/jsx-uses-vars
 description: prevent variables used in JSX to be marked as unused
 since: v2.0.0
 ---
+
 # vue/jsx-uses-vars
 
 > prevent variables used in JSX to be marked as unused
 
-- :gear: This rule is included in all of `"plugin:vue/base"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-essential"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/recommended"` and `"plugin:vue/vue3-recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/base"`, `*.configs["flat/base"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-recommended"`, `*.configs["flat/vue2-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
 
 Since 0.17.0 the ESLint `no-unused-vars` rule does not detect variables used in JSX ([see details](https://eslint.org/blog/2015/03/eslint-0.17.0-released#changes-to-jsxreact-handling)).
 This rule will find variables used in JSX and mark them as used.
diff --git a/docs/rules/key-spacing.md b/docs/rules/key-spacing.md
index bac4eb735..640490a48 100644
--- a/docs/rules/key-spacing.md
+++ b/docs/rules/key-spacing.md
@@ -2,21 +2,29 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/key-spacing
-description: enforce consistent spacing between keys and values in object literal properties in `<template>`
+description: Enforce consistent spacing between property names and type annotations in types and interfaces in `<template>`
 since: v5.2.0
 ---
+
 # vue/key-spacing
 
-> enforce consistent spacing between keys and values in object literal properties in `<template>`
+> Enforce consistent spacing between property names and type annotations in types and interfaces in `<template>`
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+This rule is the same rule as [@stylistic/key-spacing] rule but it applies to the expressions in `<template>`.
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+This rule extends the rule that [@stylistic/eslint-plugin] has, but if [@stylistic/eslint-plugin] is not installed, this rule extracts and extends the same rule from ESLint core.
+However, if neither is found, the rule cannot be used.
 
-This rule is the same rule as core [key-spacing] rule but it applies to the expressions in `<template>`.
+[@stylistic/eslint-plugin]: https://eslint.style/packages/default
 
 ## :books: Further Reading
 
+- [@stylistic/key-spacing]
 - [key-spacing]
 
+[@stylistic/key-spacing]: https://eslint.style/rules/key-spacing
 [key-spacing]: https://eslint.org/docs/rules/key-spacing
 
 ## :rocket: Version
@@ -28,4 +36,4 @@ This rule was introduced in eslint-plugin-vue v5.2.0
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/key-spacing.js)
 - [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/key-spacing.js)
 
-<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/rules/key-spacing)</sup>
+<sup>Taken with ❤️ [from ESLint Stylistic](https://eslint.style/rules/key-spacing)</sup>
diff --git a/docs/rules/keyword-spacing.md b/docs/rules/keyword-spacing.md
index 61d2e2731..74938470c 100644
--- a/docs/rules/keyword-spacing.md
+++ b/docs/rules/keyword-spacing.md
@@ -2,21 +2,29 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/keyword-spacing
-description: enforce consistent spacing before and after keywords in `<template>`
+description: Enforce consistent spacing before and after keywords in `<template>`
 since: v6.0.0
 ---
+
 # vue/keyword-spacing
 
-> enforce consistent spacing before and after keywords in `<template>`
+> Enforce consistent spacing before and after keywords in `<template>`
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+This rule is the same rule as [@stylistic/keyword-spacing] rule but it applies to the expressions in `<template>`.
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+This rule extends the rule that [@stylistic/eslint-plugin] has, but if [@stylistic/eslint-plugin] is not installed, this rule extracts and extends the same rule from ESLint core.
+However, if neither is found, the rule cannot be used.
 
-This rule is the same rule as core [keyword-spacing] rule but it applies to the expressions in `<template>`.
+[@stylistic/eslint-plugin]: https://eslint.style/packages/default
 
 ## :books: Further Reading
 
+- [@stylistic/keyword-spacing]
 - [keyword-spacing]
 
+[@stylistic/keyword-spacing]: https://eslint.style/rules/keyword-spacing
 [keyword-spacing]: https://eslint.org/docs/rules/keyword-spacing
 
 ## :rocket: Version
@@ -28,4 +36,4 @@ This rule was introduced in eslint-plugin-vue v6.0.0
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/keyword-spacing.js)
 - [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/keyword-spacing.js)
 
-<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/rules/keyword-spacing)</sup>
+<sup>Taken with ❤️ [from ESLint Stylistic](https://eslint.style/rules/keyword-spacing)</sup>
diff --git a/docs/rules/match-component-file-name.md b/docs/rules/match-component-file-name.md
index ae27d13b6..203e21477 100644
--- a/docs/rules/match-component-file-name.md
+++ b/docs/rules/match-component-file-name.md
@@ -5,6 +5,7 @@ title: vue/match-component-file-name
 description: require component name property to match its file name
 since: v5.2.0
 ---
+
 # vue/match-component-file-name
 
 > require component name property to match its file name
@@ -98,11 +99,11 @@ export default {
 ```vue
 <!-- file name: src/MyComponent.vue -->
 <script>
-  export default {
-    /* The default does not verify to `.vue`. */
-    name: 'MComponent',
-    template: '<div />'
-  }
+export default {
+  /* The default does not verify to `.vue`. */
+  name: 'MComponent',
+  template: '<div />'
+}
 </script>
 ```
 
@@ -130,11 +131,11 @@ export default {
 ```vue
 <!-- file name: src/MyComponent.vue -->
 <script>
-  export default {
-    /* ✓ GOOD */
-    name: 'MyComponent',
-    template: '<div />'
-  }
+export default {
+  /* ✓ GOOD */
+  name: 'MyComponent',
+  template: '<div />'
+}
 </script>
 ```
 
@@ -145,11 +146,11 @@ export default {
 ```vue
 <!-- file name: src/MyComponent.vue -->
 <script>
-  export default {
-    /* ✗ BAD */
-    name: 'MComponent',
-    template: '<div />'
-  }
+export default {
+  /* ✗ BAD */
+  name: 'MComponent',
+  template: '<div />'
+}
 </script>
 ```
 
@@ -160,10 +161,10 @@ export default {
 ```vue
 <!-- file name: src/MyComponent.vue -->
 <script>
-  /* no name property defined */
-  export default {
-    template: '<div />'
-  }
+/* no name property defined */
+export default {
+  template: '<div />'
+}
 </script>
 ```
 
diff --git a/docs/rules/match-component-import-name.md b/docs/rules/match-component-import-name.md
index fd88f9ff2..5ba837f41 100644
--- a/docs/rules/match-component-import-name.md
+++ b/docs/rules/match-component-import-name.md
@@ -5,13 +5,14 @@ title: vue/match-component-import-name
 description: require the registered component name to match the imported component name
 since: v8.7.0
 ---
+
 # vue/match-component-import-name
 
 > require the registered component name to match the imported component name
 
 ## :book: Rule Details
 
-By default, this rule will validate that the imported name matches the name of the components object property identifer. Note that "matches" means that the imported name matches either the PascalCase or kebab-case version of the components object property identifer. If you would like to enforce that it must match only one of PascalCase or kebab-case, use this rule in conjunction with the rule [vue/component-definition-name-casing](./component-definition-name-casing.md).
+By default, this rule will validate that the imported name matches the name of the components object property identifier. Note that "matches" means that the imported name matches either the PascalCase or kebab-case version of the components object property identifier. If you would like to enforce that it must match only one of PascalCase or kebab-case, use this rule in conjunction with the rule [vue/component-definition-name-casing](./component-definition-name-casing.md).
 
 <eslint-code-block :rules="{'vue/match-component-import-name': ['error']}">
 
diff --git a/docs/rules/max-attributes-per-line.md b/docs/rules/max-attributes-per-line.md
index 13b13cd05..141b136e0 100644
--- a/docs/rules/max-attributes-per-line.md
+++ b/docs/rules/max-attributes-per-line.md
@@ -5,12 +5,13 @@ title: vue/max-attributes-per-line
 description: enforce the maximum number of attributes per line
 since: v3.12.0
 ---
+
 # vue/max-attributes-per-line
 
 > enforce the maximum number of attributes per line
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 Limits the maximum number of attributes/properties per line to improve readability.
 
diff --git a/docs/rules/max-len.md b/docs/rules/max-len.md
index deca2e721..0816000ee 100644
--- a/docs/rules/max-len.md
+++ b/docs/rules/max-len.md
@@ -5,6 +5,7 @@ title: vue/max-len
 description: enforce a maximum line length in `.vue` files
 since: v6.1.0
 ---
+
 # vue/max-len
 
 > enforce a maximum line length in `.vue` files
diff --git a/docs/rules/max-lines-per-block.md b/docs/rules/max-lines-per-block.md
new file mode 100644
index 000000000..a65be3bb9
--- /dev/null
+++ b/docs/rules/max-lines-per-block.md
@@ -0,0 +1,63 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/max-lines-per-block
+description: enforce maximum number of lines in Vue SFC blocks
+since: v9.15.0
+---
+
+# vue/max-lines-per-block
+
+> enforce maximum number of lines in Vue SFC blocks
+
+## :book: Rule Details
+
+This rule enforces a maximum number of lines per block, in order to aid in maintainability and reduce complexity.
+
+## :wrench: Options
+
+This rule takes an object, where you can specify the maximum number of lines in each type of SFC block and customize the line counting behavior.
+The following properties can be specified for the object.
+
+- `script` ... Specify the maximum number of lines in `<script>` block. Won't enforce limitation if not specified.
+- `template` ... Specify the maximum number of lines in `<template>` block. Won't enforce limitation if not specified.
+- `style` ... Specify the maximum number of lines in `<style>` block. Won't enforce limitation if not specified.
+- `skipBlankLines` ... Ignore lines made up purely of whitespaces.
+
+### `{ template: 2 }`
+
+<eslint-code-block :rules="{'vue/max-lines-per-block': ['error', { template: 2 }]}">
+
+```vue
+<!-- ✗ BAD -->
+<template>
+  <div>
+    hi
+  </div>
+</template>
+```
+
+</eslint-code-block>
+
+### `{ script: 1, skipBlankLines: true }`
+
+<eslint-code-block :rules="{'vue/max-lines-per-block': ['error', { script: 1, skipBlankLines: true }]}">
+
+```vue
+<!-- ✓ GOOD -->
+<script>
+
+  console.log(1)
+</script>
+```
+
+</eslint-code-block>
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.15.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/max-lines-per-block.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/max-lines-per-block.js)
diff --git a/docs/rules/max-props.md b/docs/rules/max-props.md
new file mode 100644
index 000000000..918c67294
--- /dev/null
+++ b/docs/rules/max-props.md
@@ -0,0 +1,65 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/max-props
+description: enforce maximum number of props in Vue component
+since: v9.28.0
+---
+
+# vue/max-props
+
+> enforce maximum number of props in Vue component
+
+## :book: Rule Details
+
+This rule enforces a maximum number of props in a Vue SFC, in order to aid in maintainability and reduce complexity.
+
+## :wrench: Options
+
+This rule takes an object, where you can specify the maximum number of props allowed in a Vue SFC.
+There is one property that can be specified for the object.
+
+- `maxProps` ... Specify the maximum number of props in the `script` block.
+
+### `{ maxProps: 1 }`
+
+<eslint-code-block :rules="{'vue/max-props': ['error', { maxProps: 1 }]}">
+
+```vue
+<!-- ✗ BAD -->
+<template>
+</template>
+
+<script setup>
+defineProps({ 
+  prop1: String,
+  prop2: String,
+})
+</script>
+```
+
+</eslint-code-block>
+
+### `{ maxProps: 5 }`
+
+<eslint-code-block :rules="{'vue/max-props': ['error', { maxProps: 5 }]}">
+
+```vue
+<!-- ✓ GOOD -->
+<script>
+defineProps({
+  prop1: String
+})
+</script>
+```
+
+</eslint-code-block>
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.28.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/max-props.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/max-props.js)
diff --git a/docs/rules/max-template-depth.md b/docs/rules/max-template-depth.md
new file mode 100644
index 000000000..42ee4da88
--- /dev/null
+++ b/docs/rules/max-template-depth.md
@@ -0,0 +1,70 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/max-template-depth
+description: enforce maximum depth of template
+since: v9.28.0
+---
+
+# vue/max-template-depth
+
+> enforce maximum depth of template
+
+## :book: Rule Details
+
+This rule enforces a maximum depth of the template in a Vue SFC, in order to aid in maintainability and reduce complexity.
+
+## :wrench: Options
+
+This rule takes an object, where you can specify the maximum depth allowed in a Vue SFC template block.
+There is one property that can be specified for the object.
+
+- `maxDepth` ... Specify the maximum template depth `template` block.
+
+### `{ maxDepth: 3 }`
+
+<eslint-code-block :rules="{'vue/max-template-depth': ['error', { maxDepth: 3 }]}">
+
+```vue
+<!-- ✗ BAD -->
+<template>
+  <main-container>
+    <child-component>
+      <div />
+    </child-component>
+    <child-component>
+      <nested-component>
+        <div>
+          <div />
+        </div>
+      </nested-component>
+    </child-component>
+  </main-container>
+</template>
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/max-template-depth': ['error', { maxDepth: 3 }]}">
+
+```vue
+<!-- ✓ GOOD -->
+<template>
+  <main-container>
+    <child-component>
+      <div />
+    </child-component>
+  </main-container>
+</template>
+```
+
+</eslint-code-block>
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.28.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/max-template-depth.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/max-template-depth.js)
diff --git a/docs/rules/multi-word-component-names.md b/docs/rules/multi-word-component-names.md
index 06aa78d96..08539dddb 100644
--- a/docs/rules/multi-word-component-names.md
+++ b/docs/rules/multi-word-component-names.md
@@ -5,18 +5,19 @@ title: vue/multi-word-component-names
 description: require component names to be always multi-word
 since: v7.20.0
 ---
+
 # vue/multi-word-component-names
 
 > require component names to be always multi-word
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 ## :book: Rule Details
 
 This rule require component names to be always multi-word, except for root `App`
 components, and built-in components provided by Vue, such as `<transition>` or
 `<component>`. This prevents conflicts with existing and future HTML elements,
-since all HTML elements are a single word.
+since all HTML elements are single words.
 
 <eslint-code-block filename="src/TodoItem.js" language="javascript" :rules="{'vue/multi-word-component-names': ['error']}">
 
@@ -82,7 +83,7 @@ export default {
 <!-- filename: Todo.vue -->
 <!-- ✗ BAD -->
 <script setup>
-  // ...
+// ...
 </script>
 ```
 
@@ -94,7 +95,7 @@ export default {
 <!-- filename: TodoItem.vue -->
 <!-- ✓ GOOD -->
 <script setup>
-  // ...
+// ...
 </script>
 ```
 
@@ -106,7 +107,7 @@ export default {
 <!-- filename: Todo.vue -->
 <!-- ✓ GOOD -->
 <script setup>
-  // ...
+// ...
 </script>
 <script>
 export default {
@@ -163,12 +164,16 @@ export default {
 <!-- filename: Todo.vue -->
 <!-- ✓ GOOD -->
 <script setup>
-  // ...
+// ...
 </script>
 ```
 
 </eslint-code-block>
 
+## :couple: Related Rules
+
+- [vue/no-reserved-component-names](./no-reserved-component-names.md)
+
 ## :books: Further Reading
 
 - [Style guide - Multi-word component names](https://vuejs.org/style-guide/rules-essential.html#use-multi-word-component-names)
diff --git a/docs/rules/multiline-html-element-content-newline.md b/docs/rules/multiline-html-element-content-newline.md
index 9813113ee..5a5af3dc4 100644
--- a/docs/rules/multiline-html-element-content-newline.md
+++ b/docs/rules/multiline-html-element-content-newline.md
@@ -5,12 +5,13 @@ title: vue/multiline-html-element-content-newline
 description: require a line break before and after the contents of a multiline element
 since: v5.0.0
 ---
+
 # vue/multiline-html-element-content-newline
 
 > require a line break before and after the contents of a multiline element
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
@@ -90,7 +91,7 @@ This rule enforces a line break before and after the contents of a multiline ele
     default `true`
 - `ignores` ... the configuration for element names to ignore line breaks style.
     default `["pre", "textarea", ...INLINE_ELEMENTS]`.
-- `allowEmptyLines` ... if `true`, it allows empty lines around content. If you want to disallow multiple empty lines, use [no-multiple-empty-lines] in combination.  
+- `allowEmptyLines` ... if `true`, it allows empty lines around content. If you want to disallow multiple empty lines, use [no-multiple-empty-lines] in combination.\
     default `false`
 
 ::: info
@@ -142,8 +143,9 @@ This rule enforces a line break before and after the contents of a multiline ele
 
 </eslint-code-block>
 
-## :books: Further Reading
+## :couple: Related Rules
 
+- [vue/singleline-html-element-content-newline](./singleline-html-element-content-newline.md)
 - [no-multiple-empty-lines]
 
 [no-multiple-empty-lines]: https://eslint.org/docs/rules/no-multiple-empty-lines
diff --git a/docs/rules/multiline-ternary.md b/docs/rules/multiline-ternary.md
new file mode 100644
index 000000000..687138e77
--- /dev/null
+++ b/docs/rules/multiline-ternary.md
@@ -0,0 +1,71 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/multiline-ternary
+description: Enforce newlines between operands of ternary expressions in `<template>`
+since: v9.7.0
+---
+
+# vue/multiline-ternary
+
+> Enforce newlines between operands of ternary expressions in `<template>`
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+This rule is the same rule as [@stylistic/multiline-ternary] rule but it applies to the expressions in `<template>` and `<style>`.
+
+This rule extends the rule that [@stylistic/eslint-plugin] has, but if [@stylistic/eslint-plugin] is not installed, this rule extracts and extends the same rule from ESLint core.
+However, if neither is found, the rule cannot be used.
+
+[@stylistic/eslint-plugin]: https://eslint.style/packages/default
+
+## :book: Rule Details
+
+<eslint-code-block fix :rules="{'vue/multiline-ternary': ['error']}">
+
+```vue
+<template>
+  <div>
+    <!-- ✓ GOOD -->
+    <div :class="isEnabled
+      ? 'check'
+      : 'stop'" />
+
+    <!-- ✗ BAD -->
+    <div :class="isEnabled ? 'check' : 'stop'" />
+  </div>
+</template>
+
+<style>
+div {
+  /* ✓ GOOD */
+  color: v-bind('myFlag
+    ? foo
+    : bar');
+
+  /* ✗ BAD */
+  color: v-bind('myFlag ? foo : bar');
+}
+</style>
+```
+
+</eslint-code-block>
+
+## :books: Further Reading
+
+- [@stylistic/multiline-ternary]
+- [multiline-ternary]
+
+[@stylistic/multiline-ternary]: https://eslint.style/rules/multiline-ternary
+[multiline-ternary]: https://eslint.org/docs/rules/multiline-ternary
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.7.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/multiline-ternary.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/multiline-ternary.js)
+
+<sup>Taken with ❤️ [from ESLint Stylistic](https://eslint.style/rules/multiline-ternary)</sup>
diff --git a/docs/rules/mustache-interpolation-spacing.md b/docs/rules/mustache-interpolation-spacing.md
index f331d968b..1e66fc942 100644
--- a/docs/rules/mustache-interpolation-spacing.md
+++ b/docs/rules/mustache-interpolation-spacing.md
@@ -5,12 +5,13 @@ title: vue/mustache-interpolation-spacing
 description: enforce unified spacing in mustache interpolations
 since: v3.13.0
 ---
+
 # vue/mustache-interpolation-spacing
 
 > enforce unified spacing in mustache interpolations
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
diff --git a/docs/rules/name-property-casing.md b/docs/rules/name-property-casing.md
index a69855f7e..e1840987b 100644
--- a/docs/rules/name-property-casing.md
+++ b/docs/rules/name-property-casing.md
@@ -5,11 +5,12 @@ title: vue/name-property-casing
 description: enforce specific casing for the name property in Vue components
 since: v3.8.0
 ---
+
 # vue/name-property-casing
 
 > enforce specific casing for the name property in Vue components
 
-- :no_entry_sign: This rule was **removed** in eslint-plugin-vue v9.0.0 and replaced by [vue/component-definition-name-casing](component-definition-name-casing.md) rule.
+- :no_entry: This rule was **removed** in eslint-plugin-vue v9.0.0 and replaced by [vue/component-definition-name-casing](component-definition-name-casing.md) rule.
 
 ## :book: Rule Details
 
@@ -19,10 +20,10 @@ This rule aims at enforcing the style for the `name` property casing for consist
 
 ```vue
 <script>
-  /* ✓ GOOD */
-  export default {
-    name: 'MyComponent'
-  }
+/* ✓ GOOD */
+export default {
+  name: 'MyComponent'
+}
 </script>
 ```
 
@@ -32,10 +33,10 @@ This rule aims at enforcing the style for the `name` property casing for consist
 
 ```vue
 <script>
-  /* ✗ BAD */
-  export default {
-    name: 'my-component'
-  }
+/* ✗ BAD */
+export default {
+  name: 'my-component'
+}
 </script>
 ```
 
@@ -58,10 +59,10 @@ This rule aims at enforcing the style for the `name` property casing for consist
 
 ```vue
 <script>
-  /* ✓ GOOD */
-  export default {
-    name: 'my-component'
-  }
+/* ✓ GOOD */
+export default {
+  name: 'my-component'
+}
 </script>
 ```
 
@@ -71,10 +72,10 @@ This rule aims at enforcing the style for the `name` property casing for consist
 
 ```vue
 <script>
-  /* ✗ BAD */
-  export default {
-    name: 'MyComponent'
-  }
+/* ✗ BAD */
+export default {
+  name: 'MyComponent'
+}
 </script>
 ```
 
diff --git a/docs/rules/new-line-between-multi-line-property.md b/docs/rules/new-line-between-multi-line-property.md
index c8cee19ee..1191a1567 100644
--- a/docs/rules/new-line-between-multi-line-property.md
+++ b/docs/rules/new-line-between-multi-line-property.md
@@ -5,11 +5,12 @@ title: vue/new-line-between-multi-line-property
 description: enforce new lines between multi-line properties in Vue components
 since: v7.3.0
 ---
+
 # vue/new-line-between-multi-line-property
 
 > enforce new lines between multi-line properties in Vue components
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
diff --git a/docs/rules/next-tick-style.md b/docs/rules/next-tick-style.md
index 077699e82..0e9d7812f 100644
--- a/docs/rules/next-tick-style.md
+++ b/docs/rules/next-tick-style.md
@@ -5,11 +5,12 @@ title: vue/next-tick-style
 description: enforce Promise or callback style in `nextTick`
 since: v7.5.0
 ---
+
 # vue/next-tick-style
 
 > enforce Promise or callback style in `nextTick`
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
diff --git a/docs/rules/no-arrow-functions-in-watch.md b/docs/rules/no-arrow-functions-in-watch.md
index 0d00f1fd5..fb1f55215 100644
--- a/docs/rules/no-arrow-functions-in-watch.md
+++ b/docs/rules/no-arrow-functions-in-watch.md
@@ -5,15 +5,16 @@ title: vue/no-arrow-functions-in-watch
 description: disallow using arrow functions to define watcher
 since: v7.0.0
 ---
+
 # vue/no-arrow-functions-in-watch
 
 > disallow using arrow functions to define watcher
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 ## :book: Rule Details
 
-This rules disallows using arrow functions to defined watcher.The reason is arrow functions bind the parent context, so `this` will not be the Vue instance as you expect.([see here for more details](https://vuejs.org/api/options-state.html#watch))
+This rule disallows using arrow functions when defining a watcher. Arrow functions bind to their parent context, which means they will not have access to the Vue component instance via `this`. [See here for more details](https://vuejs.org/api/options-state.html#watch).
 
 <eslint-code-block :rules="{'vue/no-arrow-functions-in-watch': ['error']}">
 
diff --git a/docs/rules/no-async-in-computed-properties.md b/docs/rules/no-async-in-computed-properties.md
index ac7ac50f2..0053adbbe 100644
--- a/docs/rules/no-async-in-computed-properties.md
+++ b/docs/rules/no-async-in-computed-properties.md
@@ -5,14 +5,15 @@ title: vue/no-async-in-computed-properties
 description: disallow asynchronous actions in computed properties
 since: v3.8.0
 ---
+
 # vue/no-async-in-computed-properties
 
 > disallow asynchronous actions in computed properties
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
-Computed properties and functions should be synchronous. Asynchronous actions inside them may not work as expected and can lead to an unexpected behaviour, that's why you should avoid them.
-If you need async computed properties you might want to consider using additional plugin [vue-async-computed]
+Computed properties and functions should be synchronous. Asynchronous actions inside them may not work as expected and can lead to unexpected behaviour; that's why you should avoid them.
+If you need async computed properties, consider using the [`computedAsync`] composable from VueUse.
 
 ## :book: Rule Details
 
@@ -25,7 +26,7 @@ This rule is aimed at preventing asynchronous methods from being called in compu
 export default {
   computed: {
     /* ✓ GOOD */
-    foo () {
+    foo() {
       var bar = 0
       try {
         bar = bar / this.a
@@ -37,22 +38,22 @@ export default {
     },
 
     /* ✗ BAD */
-    pro () {
+    pro() {
       return Promise.all([new Promise((resolve, reject) => {})])
     },
     foo1: async function () {
       return await someFunc()
     },
-    bar () {
-      return fetch(url).then(response => {})
+    bar() {
+      return fetch(url).then((response) => {})
     },
-    tim () {
-      setTimeout(() => { }, 0)
+    tim() {
+      setTimeout(() => {}, 0)
     },
-    inter () {
-      setInterval(() => { }, 0)
+    inter() {
+      setInterval(() => {}, 0)
     },
-    anim () {
+    anim() {
       requestAnimationFrame(() => {})
     }
   }
@@ -66,7 +67,7 @@ export default {
 
 ```vue
 <script>
-import {computed} from 'vue'
+import { computed } from 'vue'
 export default {
   setup() {
     /* ✓ GOOD */
@@ -82,16 +83,18 @@ export default {
     })
 
     /* ✗ BAD */
-    const pro = computed(() => Promise.all([new Promise((resolve, reject) => {})]))
+    const pro = computed(() =>
+      Promise.all([new Promise((resolve, reject) => {})])
+    )
     const foo1 = computed(async () => await someFunc())
     const bar = computed(() => {
-      return fetch(url).then(response => {})
+      return fetch(url).then((response) => {})
     })
     const tim = computed(() => {
-      setTimeout(() => { }, 0)
+      setTimeout(() => {}, 0)
     })
     const inter = computed(() => {
-      setInterval(() => { }, 0)
+      setInterval(() => {}, 0)
     })
     const anim = computed(() => {
       requestAnimationFrame(() => {})
@@ -105,11 +108,48 @@ export default {
 
 ## :wrench: Options
 
-Nothing.
+```js
+{
+  "vue/no-async-in-computed-properties": ["error", {
+    "ignoredObjectNames": []
+  }]
+}
+```
+
+- `ignoredObjectNames`: An array of object names that should be ignored when used with promise-like methods (`.then()`, `.catch()`, `.finally()`). This is useful for validation libraries like Zod that use these method names for non-promise purposes (e.g. [`z.catch()`](https://zod.dev/api#catch)).
+
+### `"ignoredObjectNames": ["z"]`
+
+<eslint-code-block :rules="{'vue/no-async-in-computed-properties': ['error', {ignoredObjectNames: ['z']}]}">
+
+```vue
+<script setup>
+import { computed } from 'vue'
+import { z } from 'zod'
+
+/* ✓ GOOD */
+const schema1 = computed(() => {
+  return z.string().catch('default')
+})
+
+const schema2 = computed(() => {
+  return z.catch(z.string().min(2), 'fallback')
+})
+
+/* ✗ BAD */
+const fetchData = computed(() => {
+  return myFunc().then(res => res.json())
+})
+</script>
+```
+
+</eslint-code-block>
 
 ## :books: Further Reading
 
-- [vue-async-computed](https://github.com/foxbenjaminfox/vue-async-computed)
+- [`computedAsync`]
+
+[`computedAsync`]: https://vueuse.org/core/computedAsync
 
 ## :rocket: Version
 
diff --git a/docs/rules/no-bare-strings-in-template.md b/docs/rules/no-bare-strings-in-template.md
index adf12bffd..f51da16b8 100644
--- a/docs/rules/no-bare-strings-in-template.md
+++ b/docs/rules/no-bare-strings-in-template.md
@@ -5,14 +5,15 @@ title: vue/no-bare-strings-in-template
 description: disallow the use of bare strings in `<template>`
 since: v7.0.0
 ---
+
 # vue/no-bare-strings-in-template
 
 > disallow the use of bare strings in `<template>`
 
 ## :book: Rule Details
 
-This rule disallows the use of bare strings in `<template>`.  
-In order to be able to internationalize your application, you will need to avoid using plain strings in your templates. Instead, you would need to use a template helper specializing in translation.  
+This rule disallows the use of bare strings in `<template>`.
+In order to be able to internationalize your application, you will need to avoid using plain strings in your templates. Instead, you would need to use a template helper specializing in translation.
 
 This rule was inspired by [no-bare-strings rule in ember-template-lint](https://github.com/ember-template-lint/ember-template-lint/blob/master/docs/rule/no-bare-strings.md).
 
@@ -49,7 +50,7 @@ This rule was inspired by [no-bare-strings rule in ember-template-lint](https://
 </eslint-code-block>
 
 :::tip
-This rule does not check for string literals, in bindings and mustaches interpolation. This is because it looks like a conscious decision.  
+This rule does not check for string literals, in bindings and mustaches interpolation. This is because it looks like a conscious decision.
 If you want to report these string literals, enable the [vue/no-useless-v-bind] and [vue/no-useless-mustaches] rules and fix the useless string literals.
 :::
 
@@ -71,7 +72,7 @@ If you want to report these string literals, enable the [vue/no-useless-v-bind]
 }
 ```
 
-- `allowlist` ... An array of allowed strings.
+- `allowlist` ... An array of allowed strings or regular expression patterns (e.g. `"/\d+/"` to allow numbers).
 - `attributes` ... An object whose keys are tag name or patterns and value is an array of attributes to check for that tag name.
 - `directives` ... An array of directive names to check literal value.
 
diff --git a/docs/rules/no-boolean-default.md b/docs/rules/no-boolean-default.md
index d0782c60e..78fdbc270 100644
--- a/docs/rules/no-boolean-default.md
+++ b/docs/rules/no-boolean-default.md
@@ -5,19 +5,18 @@ title: vue/no-boolean-default
 description: disallow boolean defaults
 since: v7.0.0
 ---
+
 # vue/no-boolean-default
 
 > disallow boolean defaults
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
-
 The rule prevents Boolean props from having a default value.
 
 ## :book: Rule Details
 
 The rule is to enforce the HTML standard of always defaulting boolean attributes to false.
 
-<eslint-code-block fix :rules="{'vue/no-boolean-default': ['error']}">
+<eslint-code-block :rules="{'vue/no-boolean-default': ['error']}">
 
 ```vue
 <script>
diff --git a/docs/rules/no-child-content.md b/docs/rules/no-child-content.md
index 940ea183c..a0a69a9bb 100644
--- a/docs/rules/no-child-content.md
+++ b/docs/rules/no-child-content.md
@@ -5,11 +5,12 @@ title: vue/no-child-content
 description: disallow element's child contents which would be overwritten by a directive like `v-html` or `v-text`
 since: v8.1.0
 ---
+
 # vue/no-child-content
 
 > disallow element's child contents which would be overwritten by a directive like `v-html` or `v-text`
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 - :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
 
 ## :book: Rule Details
diff --git a/docs/rules/no-computed-properties-in-data.md b/docs/rules/no-computed-properties-in-data.md
index 3a548a413..85d3b84ed 100644
--- a/docs/rules/no-computed-properties-in-data.md
+++ b/docs/rules/no-computed-properties-in-data.md
@@ -2,18 +2,19 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/no-computed-properties-in-data
-description: disallow accessing computed properties in `data`.
+description: disallow accessing computed properties in `data`
 since: v7.20.0
 ---
+
 # vue/no-computed-properties-in-data
 
-> disallow accessing computed properties in `data`.
+> disallow accessing computed properties in `data`
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 ## :book: Rule Details
 
-This rule disallow accessing computed properties in `data()`.  
+This rule disallow accessing computed properties in `data()`.\
 The computed property cannot be accessed in `data()` because is before initialization.
 
 <eslint-code-block :rules="{'vue/no-computed-properties-in-data': ['error']}">
@@ -22,13 +23,13 @@ The computed property cannot be accessed in `data()` because is before initializ
 <script>
 export default {
   data() {
-    return  {
+    return {
       /* ✗ BAD */
       bar: this.foo
     }
   },
   computed: {
-    foo () {}
+    foo() {}
   }
 }
 </script>
diff --git a/docs/rules/no-confusing-v-for-v-if.md b/docs/rules/no-confusing-v-for-v-if.md
index c9d72dbb4..f463c883e 100644
--- a/docs/rules/no-confusing-v-for-v-if.md
+++ b/docs/rules/no-confusing-v-for-v-if.md
@@ -5,11 +5,12 @@ title: vue/no-confusing-v-for-v-if
 description: disallow confusing `v-for` and `v-if` on the same element
 since: v3.0.0
 ---
+
 # vue/no-confusing-v-for-v-if
 
 > disallow confusing `v-for` and `v-if` on the same element
 
-- :no_entry_sign: This rule was **removed** in eslint-plugin-vue v9.0.0 and replaced by [vue/no-use-v-if-with-v-for](no-use-v-if-with-v-for.md) rule.
+- :no_entry: This rule was **removed** in eslint-plugin-vue v9.0.0 and replaced by [vue/no-use-v-if-with-v-for](no-use-v-if-with-v-for.md) rule.
 
 ## :book: Rule Details
 
diff --git a/docs/rules/no-console.md b/docs/rules/no-console.md
new file mode 100644
index 000000000..64ef0278e
--- /dev/null
+++ b/docs/rules/no-console.md
@@ -0,0 +1,34 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-console
+description: Disallow the use of `console` in `<template>`
+since: v9.15.0
+---
+
+# vue/no-console
+
+> Disallow the use of `console` in `<template>`
+
+- :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
+
+## :book: Rule Details
+
+This rule is the same rule as core [no-console] rule but it applies to the expressions in `<template>`.
+
+## :books: Further Reading
+
+- [no-console]
+
+[no-console]: https://eslint.org/docs/latest/rules/no-console
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.15.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-console.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-console.js)
+
+<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/latest/rules/no-console)</sup>
diff --git a/docs/rules/no-constant-condition.md b/docs/rules/no-constant-condition.md
index 89ea03268..36520e25b 100644
--- a/docs/rules/no-constant-condition.md
+++ b/docs/rules/no-constant-condition.md
@@ -2,12 +2,13 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/no-constant-condition
-description: disallow constant expressions in conditions in `<template>`
+description: Disallow constant expressions in conditions in `<template>`
 since: v7.5.0
 ---
+
 # vue/no-constant-condition
 
-> disallow constant expressions in conditions in `<template>`
+> Disallow constant expressions in conditions in `<template>`
 
 This rule is the same rule as core [no-constant-condition] rule but it applies to the expressions in `<template>`.
 
@@ -26,4 +27,4 @@ This rule was introduced in eslint-plugin-vue v7.5.0
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-constant-condition.js)
 - [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-constant-condition.js)
 
-<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/rules/no-constant-condition)</sup>
+<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/latest/rules/no-constant-condition)</sup>
diff --git a/docs/rules/no-custom-modifiers-on-v-model.md b/docs/rules/no-custom-modifiers-on-v-model.md
index 673565cad..f657f9cf7 100644
--- a/docs/rules/no-custom-modifiers-on-v-model.md
+++ b/docs/rules/no-custom-modifiers-on-v-model.md
@@ -5,11 +5,12 @@ title: vue/no-custom-modifiers-on-v-model
 description: disallow custom modifiers on v-model used on the component
 since: v7.0.0
 ---
+
 # vue/no-custom-modifiers-on-v-model
 
 > disallow custom modifiers on v-model used on the component
 
-- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 This rule checks whether `v-model` used on the component do not have custom modifiers.
 
@@ -29,11 +30,9 @@ This rule reports `v-model` directives in the following cases:
   <MyComponent v-model.lazy="foo" />
   <MyComponent v-model.number="foo" />
 
-
   <!-- ✗ BAD -->
   <MyComponent v-model.aaa="foo" />
   <MyComponent v-model.aaa.bbb="foo" />
-
 </template>
 ```
 
diff --git a/docs/rules/no-deprecated-data-object-declaration.md b/docs/rules/no-deprecated-data-object-declaration.md
index a5505e9f7..51b252ab5 100644
--- a/docs/rules/no-deprecated-data-object-declaration.md
+++ b/docs/rules/no-deprecated-data-object-declaration.md
@@ -5,17 +5,18 @@ title: vue/no-deprecated-data-object-declaration
 description: disallow using deprecated object declaration on data (in Vue.js 3.0.0+)
 since: v7.0.0
 ---
+
 # vue/no-deprecated-data-object-declaration
 
 > disallow using deprecated object declaration on data (in Vue.js 3.0.0+)
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
 This rule reports use of deprecated object declaration on `data` property (in Vue.js 3.0.0+).
-The different from `vue/no-shared-component-data` is the root instance being also disallowed.
+The different from [`vue/no-shared-component-data`](./no-shared-component-data.md) is the root instance being also disallowed.
 
 See [Migration Guide - Data Option](https://v3-migration.vuejs.org/breaking-changes/data-option.html) for more details.
 
@@ -31,7 +32,7 @@ createApp({
 
 createApp({
   /* ✓ GOOD */
-  data () {
+  data() {
     return {
       foo: null
     }
@@ -62,7 +63,7 @@ export default {
 <script>
 export default {
   /* ✓ GOOD */
-  data () {
+  data() {
     return {
       foo: null
     }
diff --git a/docs/rules/no-deprecated-delete-set.md b/docs/rules/no-deprecated-delete-set.md
new file mode 100644
index 000000000..c96f7a730
--- /dev/null
+++ b/docs/rules/no-deprecated-delete-set.md
@@ -0,0 +1,57 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-deprecated-delete-set
+description: disallow using deprecated `$delete` and `$set` (in Vue.js 3.0.0+)
+since: v9.29.0
+---
+
+# vue/no-deprecated-delete-set
+
+> disallow using deprecated `$delete` and `$set` (in Vue.js 3.0.0+)
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+
+## :book: Rule Details
+
+This rule reports use of deprecated `$delete` and `$set`. (in Vue.js 3.0.0+).
+
+<eslint-code-block :rules="{'vue/no-deprecated-delete-set': ['error']}">
+
+```vue
+<script>
+  import { set, del } from 'vue'
+  export default {
+    mounted () {
+      /* ✗ BAD */
+      this.$set(obj, key, value)
+      this.$delete(obj, key)
+
+      Vue.set(obj, key, value)
+      Vue.delete(obj, key)
+
+      set(obj, key, value)
+      del(obj, key)
+    }
+  }
+</script>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## :books: Further Reading
+
+- [Migration Guide - Removed APIs](https://v3-migration.vuejs.org/breaking-changes/#removed-apis)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.29.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-deprecated-delete-set.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-deprecated-delete-set.js)
diff --git a/docs/rules/no-deprecated-destroyed-lifecycle.md b/docs/rules/no-deprecated-destroyed-lifecycle.md
index c99a7670a..9c681e0ea 100644
--- a/docs/rules/no-deprecated-destroyed-lifecycle.md
+++ b/docs/rules/no-deprecated-destroyed-lifecycle.md
@@ -5,12 +5,13 @@ title: vue/no-deprecated-destroyed-lifecycle
 description: disallow using deprecated `destroyed` and `beforeDestroy` lifecycle hooks (in Vue.js 3.0.0+)
 since: v7.0.0
 ---
+
 # vue/no-deprecated-destroyed-lifecycle
 
 > disallow using deprecated `destroyed` and `beforeDestroy` lifecycle hooks (in Vue.js 3.0.0+)
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
@@ -22,14 +23,14 @@ This rule reports use of deprecated `destroyed` and `beforeDestroy` lifecycle ho
 <script>
 export default {
   /* ✓ GOOD */
-  beforeMount () {},
-  mounted () {},
-  beforeUnmount () {},
-  unmounted () {},
+  beforeMount() {},
+  mounted() {},
+  beforeUnmount() {},
+  unmounted() {},
 
   /* ✗ BAD */
-  beforeDestroy () {},
-  destroyed () {}
+  beforeDestroy() {},
+  destroyed() {}
 }
 </script>
 ```
@@ -40,6 +41,10 @@ export default {
 
 Nothing.
 
+## :books: Further Reading
+
+- [Migration Guide - VNode Lifecycle Events](https://v3-migration.vuejs.org/breaking-changes/vnode-lifecycle-events.html#migration-strategy)
+
 ## :rocket: Version
 
 This rule was introduced in eslint-plugin-vue v7.0.0
diff --git a/docs/rules/no-deprecated-dollar-listeners-api.md b/docs/rules/no-deprecated-dollar-listeners-api.md
index f0f1616cc..91854806b 100644
--- a/docs/rules/no-deprecated-dollar-listeners-api.md
+++ b/docs/rules/no-deprecated-dollar-listeners-api.md
@@ -5,11 +5,12 @@ title: vue/no-deprecated-dollar-listeners-api
 description: disallow using deprecated `$listeners` (in Vue.js 3.0.0+)
 since: v7.0.0
 ---
+
 # vue/no-deprecated-dollar-listeners-api
 
 > disallow using deprecated `$listeners` (in Vue.js 3.0.0+)
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
 
 ## :book: Rule Details
 
@@ -46,6 +47,7 @@ Nothing.
 ## :books: Further Reading
 
 - [Vue RFCs - 0031-attr-fallthrough](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md)
+- [Migration Guide - `$listeners` removed](https://v3-migration.vuejs.org/breaking-changes/listeners-removed.html)
 
 ## :rocket: Version
 
diff --git a/docs/rules/no-deprecated-dollar-scopedslots-api.md b/docs/rules/no-deprecated-dollar-scopedslots-api.md
index b068f8163..45e67d480 100644
--- a/docs/rules/no-deprecated-dollar-scopedslots-api.md
+++ b/docs/rules/no-deprecated-dollar-scopedslots-api.md
@@ -5,12 +5,13 @@ title: vue/no-deprecated-dollar-scopedslots-api
 description: disallow using deprecated `$scopedSlots` (in Vue.js 3.0.0+)
 since: v7.0.0
 ---
+
 # vue/no-deprecated-dollar-scopedslots-api
 
 > disallow using deprecated `$scopedSlots` (in Vue.js 3.0.0+)
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
diff --git a/docs/rules/no-deprecated-events-api.md b/docs/rules/no-deprecated-events-api.md
index 764ddef32..a3539d7cf 100644
--- a/docs/rules/no-deprecated-events-api.md
+++ b/docs/rules/no-deprecated-events-api.md
@@ -5,11 +5,12 @@ title: vue/no-deprecated-events-api
 description: disallow using deprecated events api (in Vue.js 3.0.0+)
 since: v7.0.0
 ---
+
 # vue/no-deprecated-events-api
 
 > disallow using deprecated events api (in Vue.js 3.0.0+)
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
 
 ## :book: Rule Details
 
@@ -23,8 +24,8 @@ See [Migration Guide - Events API](https://v3-migration.vuejs.org/breaking-chang
 <script>
 /* ✗ BAD */
 export default {
-  mounted () {
-    this.$on('start', function(args) {
+  mounted() {
+    this.$on('start', function (args) {
       console.log('start')
     })
     this.$emit('start')
@@ -43,8 +44,8 @@ export default {
 import mitt from 'mitt'
 const emitter = mitt()
 export default {
-  mounted () {
-    emitter.on('start', function(args) {
+  mounted() {
+    emitter.on('start', function (args) {
       console.log('start')
     })
     emitter.emit('start')
diff --git a/docs/rules/no-deprecated-filter.md b/docs/rules/no-deprecated-filter.md
index d35632635..452d9d03c 100644
--- a/docs/rules/no-deprecated-filter.md
+++ b/docs/rules/no-deprecated-filter.md
@@ -5,11 +5,12 @@ title: vue/no-deprecated-filter
 description: disallow using deprecated filters syntax (in Vue.js 3.0.0+)
 since: v7.0.0
 ---
+
 # vue/no-deprecated-filter
 
 > disallow using deprecated filters syntax (in Vue.js 3.0.0+)
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
 
 ## :book: Rule Details
 
diff --git a/docs/rules/no-deprecated-functional-template.md b/docs/rules/no-deprecated-functional-template.md
index f7ef4978a..32656eb79 100644
--- a/docs/rules/no-deprecated-functional-template.md
+++ b/docs/rules/no-deprecated-functional-template.md
@@ -5,11 +5,12 @@ title: vue/no-deprecated-functional-template
 description: disallow using deprecated the `functional` template (in Vue.js 3.0.0+)
 since: v7.0.0
 ---
+
 # vue/no-deprecated-functional-template
 
 > disallow using deprecated the `functional` template (in Vue.js 3.0.0+)
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
 
 ## :book: Rule Details
 
diff --git a/docs/rules/no-deprecated-html-element-is.md b/docs/rules/no-deprecated-html-element-is.md
index 434c82772..844c424ed 100644
--- a/docs/rules/no-deprecated-html-element-is.md
+++ b/docs/rules/no-deprecated-html-element-is.md
@@ -5,11 +5,12 @@ title: vue/no-deprecated-html-element-is
 description: disallow using deprecated the `is` attribute on HTML elements (in Vue.js 3.0.0+)
 since: v7.0.0
 ---
+
 # vue/no-deprecated-html-element-is
 
 > disallow using deprecated the `is` attribute on HTML elements (in Vue.js 3.0.0+)
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
 
 ## :book: Rule Details
 
diff --git a/docs/rules/no-deprecated-inline-template.md b/docs/rules/no-deprecated-inline-template.md
index b2acf0058..5dcbc22b3 100644
--- a/docs/rules/no-deprecated-inline-template.md
+++ b/docs/rules/no-deprecated-inline-template.md
@@ -5,11 +5,12 @@ title: vue/no-deprecated-inline-template
 description: disallow using deprecated `inline-template` attribute (in Vue.js 3.0.0+)
 since: v7.0.0
 ---
+
 # vue/no-deprecated-inline-template
 
 > disallow using deprecated `inline-template` attribute (in Vue.js 3.0.0+)
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
 
 ## :book: Rule Details
 
diff --git a/docs/rules/no-deprecated-model-definition.md b/docs/rules/no-deprecated-model-definition.md
new file mode 100644
index 000000000..084652b91
--- /dev/null
+++ b/docs/rules/no-deprecated-model-definition.md
@@ -0,0 +1,82 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-deprecated-model-definition
+description: disallow deprecated `model` definition (in Vue.js 3.0.0+)
+since: v9.16.0
+---
+
+# vue/no-deprecated-model-definition
+
+> disallow deprecated `model` definition (in Vue.js 3.0.0+)
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+- :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
+
+## :book: Rule Details
+
+This rule reports use of the component `model` option, which has been deprecated in Vue.js 3.0.0+.
+
+See [Migration Guide – `v-model`](https://v3-migration.vuejs.org/breaking-changes/v-model.html) for more details.
+
+<eslint-code-block :rules="{'vue/no-deprecated-model-definition': ['error']}">
+
+```vue
+<script>
+export default defineComponent({
+  model: {
+    prop: 'my-value',
+    event: 'input'
+  }
+})
+</script>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+```json
+{
+  "vue/no-deprecated-model-definition": ["error", {
+    "allowVue3Compat": true
+  }]
+}
+```
+
+### `"allowVue3Compat": true`
+
+Allow `model` definitions with prop/event names that match the Vue.js 3.0.0+ `v-model` syntax, i.e. `modelValue`/`update:modelValue` or `model-value`/`update:model-value`.
+
+<eslint-code-block :rules="{'vue/no-deprecated-model-definition': ['error', { allowVue3Compat: true }]}">
+
+```vue
+<script>
+export default defineComponent({
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  }
+})
+</script>
+```
+
+</eslint-code-block>
+
+## :couple: Related Rules
+
+- [vue/valid-model-definition](./valid-model-definition.md) (for Vue.js 2.x)
+- [vue/no-v-model-argument](./no-v-model-argument.md) (for Vue.js 2.x)
+
+## :books: Further Reading
+
+- [Migration Guide – `v-model`](https://v3-migration.vuejs.org/breaking-changes/v-model.html)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.16.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-deprecated-model-definition.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-deprecated-model-definition.js)
diff --git a/docs/rules/no-deprecated-props-default-this.md b/docs/rules/no-deprecated-props-default-this.md
index da83f0611..af8136fa2 100644
--- a/docs/rules/no-deprecated-props-default-this.md
+++ b/docs/rules/no-deprecated-props-default-this.md
@@ -5,11 +5,12 @@ title: vue/no-deprecated-props-default-this
 description: disallow deprecated `this` access in props default function (in Vue.js 3.0.0+)
 since: v7.0.0
 ---
+
 # vue/no-deprecated-props-default-this
 
 > disallow deprecated `this` access in props default function (in Vue.js 3.0.0+)
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
 
 ## :book: Rule Details
 
@@ -26,7 +27,7 @@ export default {
   props: {
     a: String,
     b: {
-      default () {
+      default() {
         /* ✗ BAD */
         return this.a
       }
@@ -46,7 +47,7 @@ export default {
   props: {
     a: String,
     b: {
-      default (props) {
+      default(props) {
         /* ✓ GOOD */
         return props.a
       }
diff --git a/docs/rules/no-deprecated-router-link-tag-prop.md b/docs/rules/no-deprecated-router-link-tag-prop.md
index b53433b4c..1ec049fd0 100644
--- a/docs/rules/no-deprecated-router-link-tag-prop.md
+++ b/docs/rules/no-deprecated-router-link-tag-prop.md
@@ -5,11 +5,12 @@ title: vue/no-deprecated-router-link-tag-prop
 description: disallow using deprecated `tag` property on `RouterLink` (in Vue.js 3.0.0+)
 since: v7.20.0
 ---
+
 # vue/no-deprecated-router-link-tag-prop
 
 > disallow using deprecated `tag` property on `RouterLink` (in Vue.js 3.0.0+)
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
 
 ## :book: Rule Details
 
diff --git a/docs/rules/no-deprecated-scope-attribute.md b/docs/rules/no-deprecated-scope-attribute.md
index d86f7b065..d19b172a8 100644
--- a/docs/rules/no-deprecated-scope-attribute.md
+++ b/docs/rules/no-deprecated-scope-attribute.md
@@ -5,12 +5,13 @@ title: vue/no-deprecated-scope-attribute
 description: disallow deprecated `scope` attribute (in Vue.js 2.5.0+)
 since: v6.0.0
 ---
+
 # vue/no-deprecated-scope-attribute
 
 > disallow deprecated `scope` attribute (in Vue.js 2.5.0+)
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
diff --git a/docs/rules/no-deprecated-slot-attribute.md b/docs/rules/no-deprecated-slot-attribute.md
index 59e2c068f..6d29161f6 100644
--- a/docs/rules/no-deprecated-slot-attribute.md
+++ b/docs/rules/no-deprecated-slot-attribute.md
@@ -5,12 +5,13 @@ title: vue/no-deprecated-slot-attribute
 description: disallow deprecated `slot` attribute (in Vue.js 2.6.0+)
 since: v6.1.0
 ---
+
 # vue/no-deprecated-slot-attribute
 
 > disallow deprecated `slot` attribute (in Vue.js 2.6.0+)
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
@@ -37,9 +38,86 @@ This rule reports deprecated `slot` attribute in Vue.js v2.6.0+.
 
 </eslint-code-block>
 
+## :wrench: Options
+
+```json
+{
+  "vue/no-deprecated-slot-attribute": ["error", {
+    "ignore": ["my-component"],
+    "ignoreParents": ["my-web-component"],
+  }]
+}
+```
+
+- `"ignore"` (`string[]`) An array of tags or regular expression patterns (e.g. `"/^custom-/"`) that ignore these rules. This option will check both kebab-case and PascalCase versions of the given tag names. Default is empty.
+- `"ignoreParents"` (`string[]`) An array of tags or regular expression patterns (e.g. `"/^custom-/"`) for parents that ignore these rules. This option is especially useful for [Web-Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components). Default is empty.
+
+### `"ignore": ["my-component"]`
+
+<eslint-code-block fix :rules="{'vue/no-deprecated-slot-attribute': ['error', {ignore: ['my-component']}]}">
+
+```vue
+<template>
+  <ListComponent>
+    <!-- ✓ GOOD -->
+    <template v-slot:name>
+      {{ props.title }}
+    </template>
+  </ListComponent>
+
+  <ListComponent>
+    <!-- ✓ GOOD -->
+    <my-component slot="name">
+      {{ props.title }}
+    </my-component>
+  </ListComponent>
+
+  <ListComponent>
+    <!-- ✗ BAD -->
+    <other-component slot="name">
+      {{ props.title }}
+    </other-component>
+  </ListComponent>
+</template>
+```
+
+</eslint-code-block>
+
+### `"ignoreParents": ["my-web-component"]`
+
+<eslint-code-block fix :rules="{'vue/no-deprecated-slot-attribute': ['error', {ignoreParents: ['my-web-component']}]}">
+
+```vue
+<template>
+  <my-web-component>
+    <!-- ✓ GOOD -->
+    <template v-slot:name>
+      {{ props.title }}
+    </template>
+  </my-web-component>
+
+  <my-web-component>
+    <!-- ✓ GOOD -->
+    <my-component slot="name">
+      {{ props.title }}
+    </my-component>
+  </my-web-component>
+
+  <other-component>
+    <!-- ✗ BAD -->
+    <my-component slot="name">
+      {{ props.title }}
+    </my-component>
+  </other-component>
+</template>
+```
+
+</eslint-code-block>
+
 ## :books: Further Reading
 
 - [API - slot](https://v2.vuejs.org/v2/api/#slot-deprecated)
+- [Web - slot](https://developer.mozilla.org/en-US/docs/Web/API/Element/slot)
 
 ## :rocket: Version
 
diff --git a/docs/rules/no-deprecated-slot-scope-attribute.md b/docs/rules/no-deprecated-slot-scope-attribute.md
index 47965a168..86212de0f 100644
--- a/docs/rules/no-deprecated-slot-scope-attribute.md
+++ b/docs/rules/no-deprecated-slot-scope-attribute.md
@@ -5,12 +5,13 @@ title: vue/no-deprecated-slot-scope-attribute
 description: disallow deprecated `slot-scope` attribute (in Vue.js 2.6.0+)
 since: v6.1.0
 ---
+
 # vue/no-deprecated-slot-scope-attribute
 
 > disallow deprecated `slot-scope` attribute (in Vue.js 2.6.0+)
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
diff --git a/docs/rules/no-deprecated-v-bind-sync.md b/docs/rules/no-deprecated-v-bind-sync.md
index 233c7c2dd..77a79f16f 100644
--- a/docs/rules/no-deprecated-v-bind-sync.md
+++ b/docs/rules/no-deprecated-v-bind-sync.md
@@ -5,12 +5,13 @@ title: vue/no-deprecated-v-bind-sync
 description: disallow use of deprecated `.sync` modifier on `v-bind` directive (in Vue.js 3.0.0+)
 since: v7.0.0
 ---
+
 # vue/no-deprecated-v-bind-sync
 
 > disallow use of deprecated `.sync` modifier on `v-bind` directive (in Vue.js 3.0.0+)
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
@@ -23,15 +24,14 @@ See [Migration Guide - `v-model`](https://v3-migration.vuejs.org/breaking-change
 ```vue
 <template>
   <!-- ✓ GOOD -->
-  <MyComponent v-bind:propName="foo"/>
-  <MyComponent :propName="foo"/>
-
+  <MyComponent v-bind:propName="foo" />
+  <MyComponent :propName="foo" />
 
   <!-- ✗ BAD -->
-  <MyComponent v-bind:propName.sync="foo"/>
-  <MyComponent v-bind:[dynamiArg].sync="foo"/>
-  <MyComponent v-bind.sync="foo"/>
-  <MyComponent :propName.sync="foo"/>
+  <MyComponent v-bind:propName.sync="foo" />
+  <MyComponent v-bind:[dynamiArg].sync="foo" />
+  <MyComponent v-bind.sync="foo" />
+  <MyComponent :propName.sync="foo" />
 </template>
 ```
 
diff --git a/docs/rules/no-deprecated-v-is.md b/docs/rules/no-deprecated-v-is.md
index df5c7edeb..9fd1590e4 100644
--- a/docs/rules/no-deprecated-v-is.md
+++ b/docs/rules/no-deprecated-v-is.md
@@ -5,12 +5,12 @@ title: vue/no-deprecated-v-is
 description: disallow deprecated `v-is` directive (in Vue.js 3.1.0+)
 since: v7.11.0
 ---
+
 # vue/no-deprecated-v-is
 
 > disallow deprecated `v-is` directive (in Vue.js 3.1.0+)
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
 
 ## :book: Rule Details
 
@@ -18,14 +18,14 @@ This rule reports deprecated `v-is` directive in Vue.js v3.1.0+.
 
 Use [`is` attribute with `vue:` prefix](https://vuejs.org/api/built-in-special-attributes.html#is) instead.
 
-<eslint-code-block fix :rules="{'vue/no-deprecated-v-is': ['error']}">
+<eslint-code-block :rules="{'vue/no-deprecated-v-is': ['error']}">
 
 ```vue
 <template>
   <!-- ✓ GOOD -->
   <div is="vue:MyComponent" />
   <component is="MyComponent" />
-  
+
   <!-- ✗ BAD -->
   <div v-is="'MyComponent'" />
 </template>
diff --git a/docs/rules/no-deprecated-v-on-native-modifier.md b/docs/rules/no-deprecated-v-on-native-modifier.md
index 394db36bc..8b8312235 100644
--- a/docs/rules/no-deprecated-v-on-native-modifier.md
+++ b/docs/rules/no-deprecated-v-on-native-modifier.md
@@ -5,11 +5,12 @@ title: vue/no-deprecated-v-on-native-modifier
 description: disallow using deprecated `.native` modifiers (in Vue.js 3.0.0+)
 since: v7.0.0
 ---
+
 # vue/no-deprecated-v-on-native-modifier
 
 > disallow using deprecated `.native` modifiers (in Vue.js 3.0.0+)
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
 
 ## :book: Rule Details
 
@@ -44,6 +45,7 @@ Nothing.
 ## :books: Further Reading
 
 - [Vue RFCs - 0031-attr-fallthrough](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md)
+- [Migration Guide - `v-on.native` modifier removed](https://v3-migration.vuejs.org/breaking-changes/v-on-native-modifier-removed.html)
 
 ## :rocket: Version
 
diff --git a/docs/rules/no-deprecated-v-on-number-modifiers.md b/docs/rules/no-deprecated-v-on-number-modifiers.md
index db8476813..54ea7d431 100644
--- a/docs/rules/no-deprecated-v-on-number-modifiers.md
+++ b/docs/rules/no-deprecated-v-on-number-modifiers.md
@@ -5,12 +5,13 @@ title: vue/no-deprecated-v-on-number-modifiers
 description: disallow using deprecated number (keycode) modifiers (in Vue.js 3.0.0+)
 since: v7.0.0
 ---
+
 # vue/no-deprecated-v-on-number-modifiers
 
 > disallow using deprecated number (keycode) modifiers (in Vue.js 3.0.0+)
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
diff --git a/docs/rules/no-deprecated-vue-config-keycodes.md b/docs/rules/no-deprecated-vue-config-keycodes.md
index 271597887..697604b8c 100644
--- a/docs/rules/no-deprecated-vue-config-keycodes.md
+++ b/docs/rules/no-deprecated-vue-config-keycodes.md
@@ -5,11 +5,12 @@ title: vue/no-deprecated-vue-config-keycodes
 description: disallow using deprecated `Vue.config.keyCodes` (in Vue.js 3.0.0+)
 since: v7.0.0
 ---
+
 # vue/no-deprecated-vue-config-keycodes
 
 > disallow using deprecated `Vue.config.keyCodes` (in Vue.js 3.0.0+)
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
 
 ## :book: Rule Details
 
diff --git a/docs/rules/no-dupe-keys.md b/docs/rules/no-dupe-keys.md
index 41f4a962f..3372a8e26 100644
--- a/docs/rules/no-dupe-keys.md
+++ b/docs/rules/no-dupe-keys.md
@@ -5,17 +5,19 @@ title: vue/no-dupe-keys
 description: disallow duplication of field names
 since: v3.9.0
 ---
+
 # vue/no-dupe-keys
 
 > disallow duplication of field names
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
-This rule prevents to use duplicated names.
+This rule prevents using duplicate key names.
 
 ## :book: Rule Details
 
-This rule is aimed at preventing duplicated property names.
+This rule prevents duplicate `props`/`data`/`methods`/etc. key names defined on a component.
+Even if a key name does not conflict in the `<script>` tag itself, it still may lead to a conflict in the `<template>` since Vue allows directly accessing these keys from there.
 
 <eslint-code-block :rules="{'vue/no-dupe-keys': ['error']}">
 
@@ -28,14 +30,14 @@ export default {
   },
   computed: {
     foo: {
-      get () {}
+      get() {}
     }
   },
   data: {
     foo: null
   },
   methods: {
-    foo () {}
+    foo() {}
   }
 }
 </script>
@@ -64,10 +66,10 @@ export default {
 /* ✗ BAD */
 export default {
   computed: {
-    foo () {}
+    foo() {}
   },
   firebase: {
-    foo () {}
+    foo() {}
   }
 }
 </script>
diff --git a/docs/rules/no-dupe-v-else-if.md b/docs/rules/no-dupe-v-else-if.md
index 4fbdffcbc..d5bf83797 100644
--- a/docs/rules/no-dupe-v-else-if.md
+++ b/docs/rules/no-dupe-v-else-if.md
@@ -5,11 +5,12 @@ title: vue/no-dupe-v-else-if
 description: disallow duplicate conditions in `v-if` / `v-else-if` chains
 since: v7.0.0
 ---
+
 # vue/no-dupe-v-else-if
 
 > disallow duplicate conditions in `v-if` / `v-else-if` chains
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 ## :book: Rule Details
 
diff --git a/docs/rules/no-duplicate-attr-inheritance.md b/docs/rules/no-duplicate-attr-inheritance.md
index 908b49b19..e433280ef 100644
--- a/docs/rules/no-duplicate-attr-inheritance.md
+++ b/docs/rules/no-duplicate-attr-inheritance.md
@@ -5,16 +5,17 @@ title: vue/no-duplicate-attr-inheritance
 description: enforce `inheritAttrs` to be set to `false` when using `v-bind="$attrs"`
 since: v7.0.0
 ---
+
 # vue/no-duplicate-attr-inheritance
 
 > enforce `inheritAttrs` to be set to `false` when using `v-bind="$attrs"`
 
 ## :book: Rule Details
 
-This rule aims to prevent duplicated attribute inheritance.  
-This rule to warn to apply `inheritAttrs: false` when it detects `v-bind="$attrs"` being used.
+This rule aims to prevent duplicate attribute inheritance.\
+This rule suggests applying `inheritAttrs: false` when it detects `v-bind="$attrs"` being used.
 
-<eslint-code-block :rules="{'vue/no-duplicate-attr-inheritance': ['error']}">
+<eslint-code-block :rules="{'vue/no-duplicate-attr-inheritance': ['error', { checkMultiRootNodes: false }]}">
 
 ```vue
 <template>
@@ -25,11 +26,12 @@ export default {
   /* ✓ GOOD */
   inheritAttrs: false
 }
+</script>
 ```
 
 </eslint-code-block>
 
-<eslint-code-block :rules="{'vue/no-duplicate-attr-inheritance': ['error']}">
+<eslint-code-block :rules="{'vue/no-duplicate-attr-inheritance': ['error', { checkMultiRootNodes: false }]}">
 
 ```vue
 <template>
@@ -40,17 +42,46 @@ export default {
   /* ✗ BAD */
   // inheritAttrs: true (default)
 }
+</script>
 ```
 
 </eslint-code-block>
 
 ## :wrench: Options
 
-Nothing.
+```json
+{
+  "vue/no-duplicate-attr-inheritance": ["error", {
+    "checkMultiRootNodes": false,
+  }]
+}
+```
+
+- `"checkMultiRootNodes"`: If set to `true`, also suggest applying `inheritAttrs: false` to components with multiple root nodes (where `inheritAttrs: false` is the implicit default, see [attribute inheritance on multiple root nodes](https://vuejs.org/guide/components/attrs.html#attribute-inheritance-on-multiple-root-nodes)), whenever it detects `v-bind="$attrs"` being used. Default is `false`, which will ignore components with multiple root nodes.
+
+### `"checkMultiRootNodes": true`
+
+<eslint-code-block :rules="{'vue/no-duplicate-attr-inheritance': ['error', { checkMultiRootNodes: true }]}">
+
+```vue
+<template>
+  <div v-bind="$attrs" />
+  <div />
+</template>
+<script>
+export default {
+  /* ✗ BAD */
+  // inheritAttrs: true (default)
+}
+</script>
+```
+
+</eslint-code-block>
 
 ## :books: Further Reading
 
-- [API - inheritAttrs](https://v3.vuejs.org/api/options-misc.html#inheritattrs)
+- [API - inheritAttrs](https://vuejs.org/api/options-misc.html#inheritattrs)
+- [Fallthrough Attributes](https://vuejs.org/guide/components/attrs.html#attribute-inheritance-on-multiple-root-nodes)
 
 ## :rocket: Version
 
diff --git a/docs/rules/no-duplicate-attributes.md b/docs/rules/no-duplicate-attributes.md
index 000b67414..9ee2d2be6 100644
--- a/docs/rules/no-duplicate-attributes.md
+++ b/docs/rules/no-duplicate-attributes.md
@@ -5,19 +5,19 @@ title: vue/no-duplicate-attributes
 description: disallow duplication of attributes
 since: v3.0.0
 ---
+
 # vue/no-duplicate-attributes
 
 > disallow duplication of attributes
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
-When duplicate arguments exist, only the last one is valid.
-It's possibly mistakes.
+When there are multiple attributes with the same name on a component, only the last one is used and the rest are ignored, so this is usually a mistake.
 
 ## :book: Rule Details
 
 This rule reports duplicate attributes.
-`v-bind:foo` directives are handled as the attributes `foo`.
+`v-bind:foo` directives are handled as the attribute `foo`.
 
 <eslint-code-block :rules="{'vue/no-duplicate-attributes': ['error']}">
 
@@ -53,8 +53,8 @@ This rule reports duplicate attributes.
 - `allowCoexistClass` (`boolean`) ... Enables [`v-bind:class`] directive can coexist with the plain `class` attribute. Default is `true`.
 - `allowCoexistStyle` (`boolean`) ... Enables [`v-bind:style`] directive can coexist with the plain `style` attribute. Default is `true`.
 
-[`v-bind:class`]: https://v3.vuejs.org/guide/class-and-style.html
-[`v-bind:style`]: https://v3.vuejs.org/guide/class-and-style.html
+[`v-bind:class`]: https://vuejs.org/guide/essentials/class-and-style.html
+[`v-bind:style`]: https://vuejs.org/guide/essentials/class-and-style.html
 
 ### `"allowCoexistClass": false, "allowCoexistStyle": false`
 
diff --git a/docs/rules/no-duplicate-class-names.md b/docs/rules/no-duplicate-class-names.md
new file mode 100644
index 000000000..033ad5169
--- /dev/null
+++ b/docs/rules/no-duplicate-class-names.md
@@ -0,0 +1,61 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-duplicate-class-names
+description: disallow duplication of class names in class attributes
+since: v10.6.0
+---
+
+# vue/no-duplicate-class-names
+
+> disallow duplication of class names in class attributes
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule prevents the same class name from appearing multiple times within the same class attribute or directive.
+
+<eslint-code-block fix :rules="{'vue/no-duplicate-class-names': ['error']}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <div class="foo bar"></div>
+  <div :class="'foo bar'"></div>
+  <div :class="{ 'foo bar': isActive }"></div>
+  <div :class="['foo', 'bar']"></div>
+  <div :class="isActive ? 'foo' : 'bar'"></div>
+  <div class="foo" :class="{ bar: isActive }"></div>
+  
+  <!-- ✗ BAD -->
+  <div class="foo foo"></div>
+  <div class="foo bar foo baz bar"></div>
+  <div :class="'foo foo'"></div>
+  <div :class="`foo foo`"></div>
+  <div :class="{ 'foo foo': isActive }"></div>
+  <div :class="['foo foo']"></div>
+  <div :class="['foo foo', { 'bar bar baz': isActive }]"></div>
+  <div :class="isActive ? 'foo foo' : 'bar'"></div>
+  <div :class="'foo foo ' + 'bar'"></div>
+  <div class="foo" :class="'foo'"></div>
+  <div :class="['foo', 'foo']"></div>
+  <div :class="'foo ' + 'foo'"></div>
+  <div :class="['foo', { 'foo': isActive }]"></div>
+</template>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v10.6.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-duplicate-class-names.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-duplicate-class-names.js)
diff --git a/docs/rules/no-empty-component-block.md b/docs/rules/no-empty-component-block.md
index 7e6104aea..344bd0cba 100644
--- a/docs/rules/no-empty-component-block.md
+++ b/docs/rules/no-empty-component-block.md
@@ -5,10 +5,13 @@ title: vue/no-empty-component-block
 description: disallow the `<template>` `<script>` `<style>` block to be empty
 since: v7.0.0
 ---
+
 # vue/no-empty-component-block
 
 > disallow the `<template>` `<script>` `<style>` block to be empty
 
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
 ## :book: Rule Details
 
 This rule disallows the `<template>` `<script>` `<style>` block to be empty.
@@ -16,7 +19,7 @@ This rule disallows the `<template>` `<script>` `<style>` block to be empty.
 This rule also checks block what has attribute `src`.
 See [Vue Single-File Component (SFC) Spec](https://vue-loader.vuejs.org/spec.html#src-imports).
 
-<eslint-code-block :rules="{'vue/no-empty-component-block': ['error']}">
+<eslint-code-block fix :rules="{'vue/no-empty-component-block': ['error']}">
 
 ```vue
 <!-- ✓ GOOD -->
@@ -25,13 +28,13 @@ See [Vue Single-File Component (SFC) Spec](https://vue-loader.vuejs.org/spec.htm
 </template>
 
 <script>
-  console.log('foo')
+console.log('foo')
 </script>
 
 <style>
-  p {
-    display: inline;
-  }
+p {
+  display: inline;
+}
 </style>
 
 <template src="./template.html"></template>
@@ -43,7 +46,6 @@ See [Vue Single-File Component (SFC) Spec](https://vue-loader.vuejs.org/spec.htm
 <style src="./style.css"></style>
 <style src="./style.css" />
 
-
 <!-- ✗ BAD -->
 <template></template>
 <template />
diff --git a/docs/rules/no-empty-pattern.md b/docs/rules/no-empty-pattern.md
index f6593d977..6434a7bff 100644
--- a/docs/rules/no-empty-pattern.md
+++ b/docs/rules/no-empty-pattern.md
@@ -2,12 +2,13 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/no-empty-pattern
-description: disallow empty destructuring patterns in `<template>`
+description: Disallow empty destructuring patterns in `<template>`
 since: v6.0.0
 ---
+
 # vue/no-empty-pattern
 
-> disallow empty destructuring patterns in `<template>`
+> Disallow empty destructuring patterns in `<template>`
 
 This rule is the same rule as core [no-empty-pattern] rule but it applies to the expressions in `<template>`.
 
@@ -26,4 +27,4 @@ This rule was introduced in eslint-plugin-vue v6.0.0
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-empty-pattern.js)
 - [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-empty-pattern.js)
 
-<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/rules/no-empty-pattern)</sup>
+<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/latest/rules/no-empty-pattern)</sup>
diff --git a/docs/rules/no-export-in-script-setup.md b/docs/rules/no-export-in-script-setup.md
index c16899c80..08166596b 100644
--- a/docs/rules/no-export-in-script-setup.md
+++ b/docs/rules/no-export-in-script-setup.md
@@ -5,11 +5,12 @@ title: vue/no-export-in-script-setup
 description: disallow `export` in `<script setup>`
 since: v7.13.0
 ---
+
 # vue/no-export-in-script-setup
 
 > disallow `export` in `<script setup>`
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 ## :book: Rule Details
 
diff --git a/docs/rules/no-expose-after-await.md b/docs/rules/no-expose-after-await.md
index 7855b833c..bd11f7d44 100644
--- a/docs/rules/no-expose-after-await.md
+++ b/docs/rules/no-expose-after-await.md
@@ -5,16 +5,17 @@ title: vue/no-expose-after-await
 description: disallow asynchronously registered `expose`
 since: v8.1.0
 ---
+
 # vue/no-expose-after-await
 
 > disallow asynchronously registered `expose`
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
 
 ## :book: Rule Details
 
-This rule reports usages of `expose()` and `defineExpose()` after an `await` expression.  
-In the `setup()` function, `expose()` should be registered synchronously.  
+This rule reports usages of `expose()` and `defineExpose()` after an `await` expression.\
+In the `setup()` function, `expose()` should be registered synchronously.\
 In the `<script setup>`, `defineExpose()` should be registered synchronously.
 
 <eslint-code-block :rules="{'vue/no-expose-after-await': ['error']}">
diff --git a/docs/rules/no-extra-parens.md b/docs/rules/no-extra-parens.md
index 09af6d190..5ea9d29fb 100644
--- a/docs/rules/no-extra-parens.md
+++ b/docs/rules/no-extra-parens.md
@@ -2,21 +2,27 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/no-extra-parens
-description: disallow unnecessary parentheses in `<template>`
+description: Disallow unnecessary parentheses in `<template>`
 since: v7.0.0
 ---
+
 # vue/no-extra-parens
 
-> disallow unnecessary parentheses in `<template>`
+> Disallow unnecessary parentheses in `<template>`
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+This rule is the same rule as [@stylistic/no-extra-parens] rule but it applies to the expressions in `<template>`.
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+This rule extends the rule that [@stylistic/eslint-plugin] has, but if [@stylistic/eslint-plugin] is not installed, this rule extracts and extends the same rule from ESLint core.
+However, if neither is found, the rule cannot be used.
 
-This rule is the same rule as core [no-extra-parens] rule but it applies to the expressions in `<template>`.
+[@stylistic/eslint-plugin]: https://eslint.style/packages/default
 
 ## :book: Rule Details
 
-This rule restricts the use of parentheses to only where they are necessary.  
-This rule extends the core [no-extra-parens] rule and applies it to the `<template>`. This rule also checks some Vue.js syntax.
+This rule restricts the use of parentheses to only where they are necessary.\
+This rule extends the [@stylistic/no-extra-parens] rule and applies it to the `<template>`. This rule also checks some Vue.js syntax.
 
 <eslint-code-block fix :rules="{'vue/no-extra-parens': ['error']}">
 
@@ -37,8 +43,10 @@ This rule extends the core [no-extra-parens] rule and applies it to the `<templa
 
 ## :books: Further Reading
 
+- [@stylistic/no-extra-parens]
 - [no-extra-parens]
 
+[@stylistic/no-extra-parens]: https://eslint.style/rules/no-extra-parens
 [no-extra-parens]: https://eslint.org/docs/rules/no-extra-parens
 
 ## :rocket: Version
@@ -50,4 +58,4 @@ This rule was introduced in eslint-plugin-vue v7.0.0
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-extra-parens.js)
 - [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-extra-parens.js)
 
-<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/rules/no-extra-parens)</sup>
+<sup>Taken with ❤️ [from ESLint Stylistic](https://eslint.style/rules/no-extra-parens)</sup>
diff --git a/docs/rules/no-implicit-coercion.md b/docs/rules/no-implicit-coercion.md
new file mode 100644
index 000000000..751e189b9
--- /dev/null
+++ b/docs/rules/no-implicit-coercion.md
@@ -0,0 +1,33 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-implicit-coercion
+description: Disallow shorthand type conversions in `<template>`
+since: v9.33.0
+---
+
+# vue/no-implicit-coercion
+
+> Disallow shorthand type conversions in `<template>`
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+- :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
+
+This rule is the same rule as core [no-implicit-coercion] rule but it applies to the expressions in `<template>`.
+
+## :books: Further Reading
+
+- [no-implicit-coercion]
+
+[no-implicit-coercion]: https://eslint.org/docs/rules/no-implicit-coercion
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.33.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-implicit-coercion.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-implicit-coercion.js)
+
+<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/latest/rules/no-implicit-coercion)</sup>
diff --git a/docs/rules/no-import-compiler-macros.md b/docs/rules/no-import-compiler-macros.md
new file mode 100644
index 000000000..7ceadb336
--- /dev/null
+++ b/docs/rules/no-import-compiler-macros.md
@@ -0,0 +1,58 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-import-compiler-macros
+description: disallow importing Vue compiler macros
+since: v10.0.0
+---
+
+# vue/no-import-compiler-macros
+
+> disallow importing Vue compiler macros
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule disallow importing vue compiler macros.
+
+<eslint-code-block fix :rules="{'vue/no-import-compiler-macros': ['error']}">
+
+```vue
+<script setup>
+/* ✗ BAD */
+import { defineProps, withDefaults } from 'vue'
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block fix :rules="{'vue/no-import-compiler-macros': ['error']}">
+
+```vue
+<script setup>
+/* ✓ GOOD */
+import { ref } from 'vue'
+</script>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## :books: Further Reading
+
+- [defineProps() & defineEmits()]
+
+[defineProps() & defineEmits()]: https://vuejs.org/api/sfc-script-setup.html#defineprops-defineemits
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v10.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-import-compiler-macros.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-import-compiler-macros.js)
diff --git a/docs/rules/no-invalid-model-keys.md b/docs/rules/no-invalid-model-keys.md
index 34f65d88a..e93c79db4 100644
--- a/docs/rules/no-invalid-model-keys.md
+++ b/docs/rules/no-invalid-model-keys.md
@@ -5,11 +5,12 @@ title: vue/no-invalid-model-keys
 description: require valid keys in model option
 since: v7.9.0
 ---
+
 # vue/no-invalid-model-keys
 
 > require valid keys in model option
 
-- :warning: This rule was **deprecated** and replaced by [vue/valid-model-definition](valid-model-definition.md) rule.
+- :no_entry: This rule was **removed** in eslint-plugin-vue v10.0.0 and replaced by [vue/valid-model-definition](valid-model-definition.md) rule.
 
 ## :book: Rule Details
 
diff --git a/docs/rules/no-irregular-whitespace.md b/docs/rules/no-irregular-whitespace.md
index a38de0330..615f2294a 100644
--- a/docs/rules/no-irregular-whitespace.md
+++ b/docs/rules/no-irregular-whitespace.md
@@ -5,6 +5,7 @@ title: vue/no-irregular-whitespace
 description: disallow irregular whitespace in `.vue` files
 since: v6.1.0
 ---
+
 # vue/no-irregular-whitespace
 
 > disallow irregular whitespace in `.vue` files
diff --git a/docs/rules/no-lifecycle-after-await.md b/docs/rules/no-lifecycle-after-await.md
index dbcef6b80..4516e2fd3 100644
--- a/docs/rules/no-lifecycle-after-await.md
+++ b/docs/rules/no-lifecycle-after-await.md
@@ -5,15 +5,16 @@ title: vue/no-lifecycle-after-await
 description: disallow asynchronously registered lifecycle hooks
 since: v7.0.0
 ---
+
 # vue/no-lifecycle-after-await
 
 > disallow asynchronously registered lifecycle hooks
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
 
 ## :book: Rule Details
 
-This rule reports the lifecycle hooks after `await` expression.  
+This rule reports the lifecycle hooks after `await` expression.\
 In `setup()` function, `onXXX` lifecycle hooks should be registered synchronously.
 
 <eslint-code-block :rules="{'vue/no-lifecycle-after-await': ['error']}">
@@ -43,7 +44,7 @@ Nothing.
 
 ## :books: Further Reading
 
-- [Guide - Composition API - Lifecycle Hooks](https://v3.vuejs.org/guide/composition-api-lifecycle-hooks.html)
+- [Guide - Composition API - Lifecycle Hooks](https://vuejs.org/api/composition-api-lifecycle.html)
 - [Vue RFCs - 0013-composition-api](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0013-composition-api.md)
 
 ## :rocket: Version
diff --git a/docs/rules/no-lone-template.md b/docs/rules/no-lone-template.md
index 0c3904e3c..2d05a77c6 100644
--- a/docs/rules/no-lone-template.md
+++ b/docs/rules/no-lone-template.md
@@ -5,16 +5,17 @@ title: vue/no-lone-template
 description: disallow unnecessary `<template>`
 since: v7.0.0
 ---
+
 # vue/no-lone-template
 
 > disallow unnecessary `<template>`
 
-- :gear: This rule is included in `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 ## :book: Rule Details
 
-This rule aims to eliminate unnecessary and potentially confusing `<template>`.  
-In Vue.js 2.x, the `<template>` elements that have no specific directives have no effect.  
+This rule aims to eliminate unnecessary and potentially confusing `<template>`.\
+In Vue.js 2.x, the `<template>` elements that have no specific directives have no effect.\
 In Vue.js 3.x, the `<template>` elements that have no specific directives render the `<template>` elements as is, but in most cases this may not be what you intended.
 
 <eslint-code-block :rules="{'vue/no-lone-template': ['error']}">
@@ -46,7 +47,7 @@ In Vue.js 3.x, the `<template>` elements that have no specific directives render
 }
 ```
 
-- `ignoreAccessible` ... If `true`, ignore accessible `<template>` elements. default `false`.  
+- `ignoreAccessible` ... If `true`, ignore accessible `<template>` elements. default `false`.\
   Note: this option is useless if you are using Vue.js 2.x.
 
 ### `"ignoreAccessible": true`
diff --git a/docs/rules/no-loss-of-precision.md b/docs/rules/no-loss-of-precision.md
index 82e06d010..c9b88ce63 100644
--- a/docs/rules/no-loss-of-precision.md
+++ b/docs/rules/no-loss-of-precision.md
@@ -2,12 +2,13 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/no-loss-of-precision
-description: disallow literal numbers that lose precision in `<template>`
+description: Disallow literal numbers that lose precision in `<template>`
 since: v8.0.0
 ---
+
 # vue/no-loss-of-precision
 
-> disallow literal numbers that lose precision in `<template>`
+> Disallow literal numbers that lose precision in `<template>`
 
 This rule is the same rule as core [no-loss-of-precision] rule but it applies to the expressions in `<template>`.
 
@@ -30,4 +31,4 @@ This rule was introduced in eslint-plugin-vue v8.0.0
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-loss-of-precision.js)
 - [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-loss-of-precision.js)
 
-<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/rules/no-loss-of-precision)</sup>
+<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/latest/rules/no-loss-of-precision)</sup>
diff --git a/docs/rules/no-multi-spaces.md b/docs/rules/no-multi-spaces.md
index 065b799b7..66c6a81d7 100644
--- a/docs/rules/no-multi-spaces.md
+++ b/docs/rules/no-multi-spaces.md
@@ -5,12 +5,13 @@ title: vue/no-multi-spaces
 description: disallow multiple spaces
 since: v3.12.0
 ---
+
 # vue/no-multi-spaces
 
 > disallow multiple spaces
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
diff --git a/docs/rules/no-multiple-objects-in-class.md b/docs/rules/no-multiple-objects-in-class.md
index 9e1508b8b..13f1f591b 100644
--- a/docs/rules/no-multiple-objects-in-class.md
+++ b/docs/rules/no-multiple-objects-in-class.md
@@ -2,16 +2,17 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/no-multiple-objects-in-class
-description: disallow to pass multiple objects into array to class
+description: disallow passing multiple objects in an array to class
 since: v7.0.0
 ---
+
 # vue/no-multiple-objects-in-class
 
-> disallow to pass multiple objects into array to class
+> disallow passing multiple objects in an array to class
 
 ## :book: Rule Details
 
-This rule disallows to pass multiple objects into array to class.  
+This rule disallows to pass multiple objects into array to class.
 
 <eslint-code-block :rules="{'vue/no-multiple-objects-in-class': ['error']}">
 
@@ -19,10 +20,10 @@ This rule disallows to pass multiple objects into array to class.
 <template>
   <div>
     <!-- ✓ GOOD -->
-    <div :class="[{'foo': isFoo, 'bar': isBar}]" />
+    <div :class="[{ foo: isFoo, bar: isBar }]" />
 
     <!-- ✗ BAD -->
-    <div :class="[{'foo': isFoo}, {'bar': isBar}]" />
+    <div :class="[{ foo: isFoo }, { bar: isBar }]" />
   </div>
 </template>
 ```
diff --git a/docs/rules/no-multiple-slot-args.md b/docs/rules/no-multiple-slot-args.md
index c73be9007..17ba69b02 100644
--- a/docs/rules/no-multiple-slot-args.md
+++ b/docs/rules/no-multiple-slot-args.md
@@ -2,18 +2,19 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/no-multiple-slot-args
-description: disallow to pass multiple arguments to scoped slots
+description: disallow passing multiple arguments to scoped slots
 since: v7.0.0
 ---
+
 # vue/no-multiple-slot-args
 
-> disallow to pass multiple arguments to scoped slots
+> disallow passing multiple arguments to scoped slots
 
-- :gear: This rule is included in `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 ## :book: Rule Details
 
-This rule disallows to pass multiple arguments to scoped slots.  
+This rule disallows to pass multiple arguments to scoped slots.\
 In details, it reports call expressions if a call of `this.$scopedSlots` members has 2 or more arguments.
 
 <eslint-code-block :rules="{'vue/no-multiple-slot-args': ['error']}">
diff --git a/docs/rules/no-multiple-template-root.md b/docs/rules/no-multiple-template-root.md
index e5130faab..8a85c9201 100644
--- a/docs/rules/no-multiple-template-root.md
+++ b/docs/rules/no-multiple-template-root.md
@@ -5,11 +5,12 @@ title: vue/no-multiple-template-root
 description: disallow adding multiple root nodes to the template
 since: v7.0.0
 ---
+
 # vue/no-multiple-template-root
 
 > disallow adding multiple root nodes to the template
 
-- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 ## :book: Rule Details
 
@@ -41,7 +42,7 @@ This rule checks whether template contains single root element valid for Vue 2.
 ```vue
 <!-- The root element has `v-for` directives -->
 <template>
-  <div v-for="item in items"/>
+  <div v-for="item in items" />
 </template>
 ```
 
@@ -60,7 +61,32 @@ This rule checks whether template contains single root element valid for Vue 2.
 
 ## :wrench: Options
 
-Nothing.
+```json
+{
+  "vue/no-multiple-template-root": ["error", {
+    "disallowComments": false
+  }]
+}
+```
+
+- "disallowComments" (`boolean`) Enables there should not be any comments in the template root. Default is `false`.
+
+### "disallowComments": true
+
+<eslint-code-block :rules="{'vue/no-multiple-template-root': ['error', {disallowComments: true}]}">
+
+```vue
+/* ✗ BAD */
+<template>
+  <!-- root comment -->
+  <div>
+    vue eslint plugin
+  </div>
+  <!-- root comment -->
+</template>
+```
+
+</eslint-code-block>
 
 ## :rocket: Version
 
diff --git a/docs/rules/no-mutating-props.md b/docs/rules/no-mutating-props.md
index 960ebe900..3ddee4cc2 100644
--- a/docs/rules/no-mutating-props.md
+++ b/docs/rules/no-mutating-props.md
@@ -5,11 +5,12 @@ title: vue/no-mutating-props
 description: disallow mutation of component props
 since: v7.0.0
 ---
+
 # vue/no-mutating-props
 
 > disallow mutation of component props
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 ## :book: Rule Details
 
@@ -22,22 +23,38 @@ This rule reports mutation of component props.
 <template>
   <div>
     <input v-model="value" @click="openModal">
+    <button @click="pushItem">Push Item</button>
+    <button @click="changeId">Change ID</button>
   </div>
 </template>
 <script>
-  export default {
-    props: {
-      value: {
-        type: String,
-        required: true
-      }
+export default {
+  props: {
+    value: {
+      type: String,
+      required: true
+    },
+    list: {
+      type: Array,
+      required: true
+    },
+    user: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    openModal() {
+      this.value = 'test'
     },
-    methods: {
-      openModal() {
-        this.value = 'test'
-      }
+    pushItem() {
+      this.list.push(0)
+    },
+    changeId() {
+      this.user.id = 1
     }
   }
+}
 </script>
 ```
 
@@ -50,22 +67,38 @@ This rule reports mutation of component props.
 <template>
   <div>
     <input :value="value" @input="$emit('input', $event.target.value)" @click="openModal">
+    <button @click="pushItem">Push Item</button>
+    <button @click="changeId">Change ID</button>
   </div>
 </template>
 <script>
-  export default {
-    props: {
-      value: {
-        type: String,
-        required: true
-      }
+export default {
+  props: {
+    value: {
+      type: String,
+      required: true
+    },
+    list: {
+      type: Array,
+      required: true
     },
-    methods: {
-      openModal() {
-        this.$emit('input', 'test')
-      }
+    user: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    openModal() {
+      this.$emit('input', 'test')
+    },
+    pushItem() {
+      this.$emit('push', 0)
+    },
+    changeId() {
+      this.$emit('change-id', 1)
     }
   }
+}
 </script>
 ```
 
@@ -75,12 +108,12 @@ This rule reports mutation of component props.
 
 ```vue
 <script>
-  export default {
-    setup (props) {
-      // ✗ BAD
-      props.value = 'test'
-    }
+export default {
+  setup(props) {
+    // ✗ BAD
+    props.value = 'test'
   }
+}
 </script>
 ```
 
@@ -88,7 +121,45 @@ This rule reports mutation of component props.
 
 ## :wrench: Options
 
-Nothing.
+```json
+{
+  "vue/no-mutating-props": ["error", {
+    "shallowOnly": false
+  }]
+}
+```
+
+- "shallowOnly" (`boolean`) Enables mutating the value of a prop but leaving the reference the same. Default is `false`.
+
+### "shallowOnly": true
+
+<eslint-code-block :rules="{'vue/no-mutating-props': ['error', {shallowOnly: true}]}">
+
+```vue
+<!-- ✓ GOOD -->
+<template>
+  <div>
+    <input v-model="value.id" @click="openModal">
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    value: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    openModal() {
+      this.value.visible = true
+    }
+  }
+}
+</script>
+```
+
+</eslint-code-block>
 
 ## :books: Further Reading
 
diff --git a/docs/rules/no-negated-condition.md b/docs/rules/no-negated-condition.md
new file mode 100644
index 000000000..17ffdba5d
--- /dev/null
+++ b/docs/rules/no-negated-condition.md
@@ -0,0 +1,37 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-negated-condition
+description: Disallow negated conditions in `<template>`
+since: v10.4.0
+---
+
+# vue/no-negated-condition
+
+> Disallow negated conditions in `<template>`
+
+## :book: Rule Details
+
+This rule is the same rule as core [no-negated-condition] rule but it applies to the expressions in `<template>`.
+
+## :couple: Related Rules
+
+- [`vue/no-negated-v-if-condition`](https://eslint.vuejs.org/rules/no-negated-v-if-condition.html)
+- [unicorn/no-negated-condition](https://github.com/sindresorhus/eslint-plugin-unicorn/blob/main/docs/rules/no-negated-condition.md)
+
+## :books: Further Reading
+
+- [no-negated-condition]
+
+[no-negated-condition]: https://eslint.org/docs/rules/no-negated-condition
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v10.4.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-negated-condition.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-negated-condition.js)
+
+<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/latest/rules/no-negated-condition)</sup>
diff --git a/docs/rules/no-negated-v-if-condition.md b/docs/rules/no-negated-v-if-condition.md
new file mode 100644
index 000000000..e9dfbd620
--- /dev/null
+++ b/docs/rules/no-negated-v-if-condition.md
@@ -0,0 +1,68 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-negated-v-if-condition
+description: disallow negated conditions in v-if/v-else
+since: v10.4.0
+---
+
+# vue/no-negated-v-if-condition
+
+> disallow negated conditions in v-if/v-else
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule disallows negated conditions in `v-if` and `v-else-if` directives which have an `v-else` branch.
+
+Negated conditions make the code less readable. When there's an `else` clause, it's better to use a positive condition and switch the branches.
+
+<eslint-code-block fix :rules="{'vue/no-negated-v-if-condition': ['error']}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <div v-if="foo">First</div>
+  <div v-else>Second</div>
+
+  <div v-if="!foo">First</div>
+  <div v-else-if="bar">Second</div>
+
+  <div v-if="!foo">Content</div>
+
+  <div v-if="a !== b">Not equal</div>
+
+  <!-- ✗ BAD -->
+  <div v-if="!foo">First</div>
+  <div v-else>Second</div>
+
+  <div v-if="a !== b">First</div>
+  <div v-else>Second</div>
+
+  <div v-if="foo">First</div>
+  <div v-else-if="!bar">Second</div>
+  <div v-else>Third</div>
+</template>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## :couple: Related Rules
+
+- [no-negated-condition](https://eslint.org/docs/latest/rules/no-negated-condition)
+- [vue/no-negated-condition](https://eslint.vuejs.org/rules/no-negated-condition.html)
+- [unicorn/no-negated-condition](https://github.com/sindresorhus/eslint-plugin-unicorn/blob/main/docs/rules/no-negated-condition.md)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v10.4.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-negated-v-if-condition.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-negated-v-if-condition.js)
diff --git a/docs/rules/no-parsing-error.md b/docs/rules/no-parsing-error.md
index 61832037f..a6fcf2908 100644
--- a/docs/rules/no-parsing-error.md
+++ b/docs/rules/no-parsing-error.md
@@ -5,11 +5,12 @@ title: vue/no-parsing-error
 description: disallow parsing errors in `<template>`
 since: v3.0.0
 ---
+
 # vue/no-parsing-error
 
 > disallow parsing errors in `<template>`
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 This rule reports syntax errors in `<template>`. For example:
 
diff --git a/docs/rules/no-potential-component-option-typo.md b/docs/rules/no-potential-component-option-typo.md
index 871af5de2..17e21c818 100644
--- a/docs/rules/no-potential-component-option-typo.md
+++ b/docs/rules/no-potential-component-option-typo.md
@@ -5,6 +5,7 @@ title: vue/no-potential-component-option-typo
 description: disallow a potential typo in your component property
 since: v7.0.0
 ---
+
 # vue/no-potential-component-option-typo
 
 > disallow a potential typo in your component property
diff --git a/docs/rules/no-ref-as-operand.md b/docs/rules/no-ref-as-operand.md
index df3549dc6..870a784e2 100644
--- a/docs/rules/no-ref-as-operand.md
+++ b/docs/rules/no-ref-as-operand.md
@@ -5,16 +5,17 @@ title: vue/no-ref-as-operand
 description: disallow use of value wrapped by `ref()` (Composition API) as an operand
 since: v7.0.0
 ---
+
 # vue/no-ref-as-operand
 
 > disallow use of value wrapped by `ref()` (Composition API) as an operand
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
-This rule reports cases where a ref is used incorrectly as an operand.  
+This rule reports cases where a ref is used incorrectly as an operand.\
 You must use `.value` to access the `Ref` value.
 
 <eslint-code-block fix :rules="{'vue/no-ref-as-operand': ['error']}">
@@ -24,7 +25,7 @@ You must use `.value` to access the `Ref` value.
 import { ref } from 'vue'
 
 export default {
-  setup () {
+  setup(_props, { emit }) {
     const count = ref(0)
     const ok = ref(true)
 
@@ -33,12 +34,14 @@ export default {
     count.value + 1
     1 + count.value
     var msg = ok.value ? 'yes' : 'no'
+    emit('increment', count.value)
 
     /* ✗ BAD */
     count++
     count + 1
     1 + count
     var msg = ok ? 'yes' : 'no'
+    emit('increment', count)
 
     return {
       count
diff --git a/docs/rules/no-ref-object-destructure.md b/docs/rules/no-ref-object-destructure.md
new file mode 100644
index 000000000..7733768ea
--- /dev/null
+++ b/docs/rules/no-ref-object-destructure.md
@@ -0,0 +1,61 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-ref-object-destructure
+description: disallow usages of ref objects that can lead to loss of reactivity
+since: v9.5.0
+---
+
+# vue/no-ref-object-destructure
+
+> disallow usages of ref objects that can lead to loss of reactivity
+
+- :no_entry: This rule was **removed** in eslint-plugin-vue v10.0.0 and replaced by [vue/no-ref-object-reactivity-loss](no-ref-object-reactivity-loss.md) rule.
+
+## :book: Rule Details
+
+This rule reports the destructuring of ref objects causing the value to lose reactivity.
+
+<eslint-code-block :rules="{'vue/no-ref-object-destructure': ['error']}" language="javascript" filename="example.js" >
+
+```js
+import { ref } from 'vue'
+const count = ref(0)
+const v1 = count.value /* ✗ BAD */
+const { value: v2 } = count /* ✗ BAD */
+const v3 = computed(() => count.value /* ✓ GOOD */)
+const v4 = fn(count.value) /* ✗ BAD */
+const v5 = fn(count) /* ✓ GOOD */
+const v6 = computed(() => fn(count.value) /* ✓ GOOD */)
+```
+
+</eslint-code-block>
+
+This rule also supports Reactivity Transform, but Reactivity Transform is an experimental feature and may have false positives due to future Vue changes.\
+See the [RFC](https://github.com/vuejs/rfcs/pull/420) for more information on Reactivity Transform.
+
+<eslint-code-block :rules="{'vue/no-ref-object-destructure': ['error']}" language="javascript" filename="example.js" >
+
+```js
+const count = $ref(0)
+const v1 = count /* ✗ BAD */
+const v2 = $computed(() => count /* ✓ GOOD */)
+const v3 = fn(count) /* ✗ BAD */
+const v4 = fn($$(count)) /* ✓ GOOD */
+const v5 = $computed(() => fn(count) /* ✓ GOOD */)
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.5.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-ref-object-destructure.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-ref-object-destructure.js)
diff --git a/docs/rules/no-ref-object-reactivity-loss.md b/docs/rules/no-ref-object-reactivity-loss.md
new file mode 100644
index 000000000..3f13174e1
--- /dev/null
+++ b/docs/rules/no-ref-object-reactivity-loss.md
@@ -0,0 +1,59 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-ref-object-reactivity-loss
+description: disallow usages of ref objects that can lead to loss of reactivity
+since: v9.17.0
+---
+
+# vue/no-ref-object-reactivity-loss
+
+> disallow usages of ref objects that can lead to loss of reactivity
+
+## :book: Rule Details
+
+This rule reports the usages of ref objects causing the value to lose reactivity.
+
+<eslint-code-block :rules="{'vue/no-ref-object-reactivity-loss': ['error']}" language="javascript" filename="example.js" >
+
+```js
+import { ref } from 'vue'
+const count = ref(0)
+const v1 = count.value /* ✗ BAD */
+const { value: v2 } = count /* ✗ BAD */
+const v3 = computed(() => count.value /* ✓ GOOD */)
+const v4 = fn(count.value) /* ✗ BAD */
+const v5 = fn(count) /* ✓ GOOD */
+const v6 = computed(() => fn(count.value) /* ✓ GOOD */)
+```
+
+</eslint-code-block>
+
+This rule also supports Reactivity Transform, but Reactivity Transform is an experimental feature and may have false positives due to future Vue changes.\
+See the [RFC](https://github.com/vuejs/rfcs/pull/420) for more information on Reactivity Transform.
+
+<eslint-code-block :rules="{'vue/no-ref-object-reactivity-loss': ['error']}" language="javascript" filename="example.js" >
+
+```js
+const count = $ref(0)
+const v1 = count /* ✗ BAD */
+const v2 = $computed(() => count /* ✓ GOOD */)
+const v3 = fn(count) /* ✗ BAD */
+const v4 = fn($$(count)) /* ✓ GOOD */
+const v5 = $computed(() => fn(count) /* ✓ GOOD */)
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.17.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-ref-object-reactivity-loss.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-ref-object-reactivity-loss.js)
diff --git a/docs/rules/no-required-prop-with-default.md b/docs/rules/no-required-prop-with-default.md
new file mode 100644
index 000000000..8308e4d8c
--- /dev/null
+++ b/docs/rules/no-required-prop-with-default.md
@@ -0,0 +1,102 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-required-prop-with-default
+description: enforce props with default values to be optional
+since: v9.6.0
+---
+
+# vue/no-required-prop-with-default
+
+> enforce props with default values to be optional
+
+- :gear: This rule is included in all of `"plugin:vue/vue2-recommended"`, `*.configs["flat/vue2-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+- :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
+
+## :book: Rule Details
+
+If a prop is declared with a default value, whether it is required or not, we can always skip it in actual use. In that situation, the default value would be applied.
+So, a required prop with a default value is essentially the same as an optional prop.
+This rule enforces all props with default values to be optional.
+
+<eslint-code-block fix :rules="{'vue/no-required-prop-with-default': ['error', { autofix: true }]}">
+
+```vue
+<script setup lang="ts">
+/* ✓ GOOD */
+const props = withDefaults(
+  defineProps<{
+    name?: string | number
+    age?: number
+  }>(),
+  {
+    name: 'Foo',
+  }
+);
+
+/* ✗ BAD */
+const props = withDefaults(
+  defineProps<{
+    name: string | number
+    age?: number
+  }>(),
+  {
+    name: 'Foo',
+  }
+);
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block fix :rules="{'vue/no-required-prop-with-default': ['error', { autofix: true }]}">
+
+```vue
+<script>
+export default {
+  props: {
+    /* ✓ GOOD */
+    foo: {
+      required: false,
+      default: 'Hello'
+    },
+    bar: {
+      required: true
+    },
+    /* ✗ BAD */
+    baz: {
+      required: true,
+      default: 'Hello'
+    },
+  },
+}
+</script>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+```json
+{
+  "vue/no-required-prop-with-default": ["error", {
+    "autofix": false,
+  }]
+}
+```
+
+- `"autofix"` ... If `true`, enable autofix. (Default: `false`)
+
+## :couple: Related Rules
+
+- [vue/require-default-prop](./require-default-prop.md)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.6.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-required-prop-with-default.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-required-prop-with-default.js)
diff --git a/docs/rules/no-reserved-component-names.md b/docs/rules/no-reserved-component-names.md
index 94e761eaa..c99191872 100644
--- a/docs/rules/no-reserved-component-names.md
+++ b/docs/rules/no-reserved-component-names.md
@@ -5,11 +5,12 @@ title: vue/no-reserved-component-names
 description: disallow the use of reserved names in component definitions
 since: v6.1.0
 ---
+
 # vue/no-reserved-component-names
 
 > disallow the use of reserved names in component definitions
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 ## :book: Rule Details
 
@@ -34,13 +35,15 @@ export default {
 {
   "vue/no-reserved-component-names": ["error", {
     "disallowVueBuiltInComponents": false,
-    "disallowVue3BuiltInComponents": false
+    "disallowVue3BuiltInComponents": false,
+    "htmlElementCaseSensitive": false,
   }]
 }
 ```
 
 - `disallowVueBuiltInComponents` (`boolean`) ... If `true`, disallow Vue.js 2.x built-in component names. Default is `false`.
 - `disallowVue3BuiltInComponents` (`boolean`) ... If `true`, disallow Vue.js 3.x built-in component names. Default is `false`.
+- `htmlElementCaseSensitive` (`boolean`) ... If `true`, component names must exactly match the case of an HTML element to be considered conflicting. Default is `false` (i.e. case-insensitve comparison).
 
 ### `"disallowVueBuiltInComponents": true`
 
@@ -72,13 +75,45 @@ export default {
 
 </eslint-code-block>
 
+### `"htmlElementCaseSensitive": true`
+
+<eslint-code-block :rules="{'vue/no-reserved-component-names': ['error', {htmlElementCaseSensitive: true}]}">
+
+```vue
+<script>
+/* ✓ GOOD */
+export default {
+  name: 'Button'
+}
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/no-reserved-component-names': ['error', {htmlElementCaseSensitive: true}]}">
+
+```vue
+<script>
+/* ✗ BAD */
+export default {
+  name: 'button'
+}
+</script>
+```
+
+</eslint-code-block>
+
+## :couple: Related Rules
+
+- [vue/multi-word-component-names](./multi-word-component-names.md)
+
 ## :books: Further Reading
 
 - [List of html elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
 - [List of SVG elements](https://developer.mozilla.org/en-US/docs/Web/SVG/Element)
 - [Kebab case elements](https://stackoverflow.com/questions/22545621/do-custom-elements-require-a-dash-in-their-name/22545622#22545622)
 - [Valid custom element name](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name)
-- [API - Built-In Components](https://v3.vuejs.org/api/built-in-components.html)
+- [API - Built-In Components](https://vuejs.org/api/built-in-components.html)
 - [API (for v2) - Built-In Components](https://v2.vuejs.org/v2/api/index.html#Built-In-Components)
 
 ## :rocket: Version
diff --git a/docs/rules/no-reserved-keys.md b/docs/rules/no-reserved-keys.md
index 36535c5b5..9244ee0b7 100644
--- a/docs/rules/no-reserved-keys.md
+++ b/docs/rules/no-reserved-keys.md
@@ -5,11 +5,12 @@ title: vue/no-reserved-keys
 description: disallow overwriting reserved keys
 since: v3.9.0
 ---
+
 # vue/no-reserved-keys
 
 > disallow overwriting reserved keys
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 ## :book: Rule Details
 
@@ -26,14 +27,14 @@ export default {
   },
   computed: {
     $on: {
-      get () {}
+      get() {}
     }
   },
   data: {
     _foo: null
   },
   methods: {
-    $nextTick () {}
+    $nextTick() {}
   }
 }
 </script>
@@ -64,10 +65,10 @@ export default {
 /* ✗ BAD */
 export default {
   computed: {
-    foo () {}
+    foo() {}
   },
   firebase: {
-    foo2 () {}
+    foo2() {}
   }
 }
 </script>
diff --git a/docs/rules/no-reserved-props.md b/docs/rules/no-reserved-props.md
index 3c9ac1044..982ddb947 100644
--- a/docs/rules/no-reserved-props.md
+++ b/docs/rules/no-reserved-props.md
@@ -5,11 +5,12 @@ title: vue/no-reserved-props
 description: disallow reserved names in props
 since: v8.0.0
 ---
+
 # vue/no-reserved-props
 
 > disallow reserved names in props
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 ## :book: Rule Details
 
diff --git a/docs/rules/no-restricted-block.md b/docs/rules/no-restricted-block.md
index cb6ab788b..0a96a64a4 100644
--- a/docs/rules/no-restricted-block.md
+++ b/docs/rules/no-restricted-block.md
@@ -5,6 +5,7 @@ title: vue/no-restricted-block
 description: disallow specific block
 since: v7.4.0
 ---
+
 # vue/no-restricted-block
 
 > disallow specific block
diff --git a/docs/rules/no-restricted-call-after-await.md b/docs/rules/no-restricted-call-after-await.md
index f880f8f12..0082bb881 100644
--- a/docs/rules/no-restricted-call-after-await.md
+++ b/docs/rules/no-restricted-call-after-await.md
@@ -5,6 +5,7 @@ title: vue/no-restricted-call-after-await
 description: disallow asynchronously called restricted methods
 since: v7.4.0
 ---
+
 # vue/no-restricted-call-after-await
 
 > disallow asynchronously called restricted methods
diff --git a/docs/rules/no-restricted-class.md b/docs/rules/no-restricted-class.md
index 849c71e8c..a69f28d55 100644
--- a/docs/rules/no-restricted-class.md
+++ b/docs/rules/no-restricted-class.md
@@ -5,6 +5,7 @@ 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
@@ -20,7 +21,7 @@ in the rule configuration.
 
 ```json
 {
-  "vue/no-restricted-class": ["error", "forbidden", "forbidden-two", "forbidden-three"]
+  "vue/no-restricted-class": ["error", "forbidden", "forbidden-two", "forbidden-three", "/^for(bidden|gotten)/"]
 }
 ```
 
@@ -30,7 +31,7 @@ in the rule configuration.
 <template>
   <!-- ✗ BAD -->
   <div class="forbidden" />
-  <div :class="{forbidden: someBoolean}" />
+  <div :class="{ forbidden: someBoolean }" />
   <div :class="`forbidden ${someString}`" />
   <div :class="'forbidden'" />
   <div :class="'forbidden ' + someString" />
@@ -64,7 +65,7 @@ variables, like below, will not be detected by this rule.
 export default {
   data() {
     return {
-      classes: "forbidden"
+      classes: 'forbidden'
     }
   }
 }
diff --git a/docs/rules/no-restricted-component-names.md b/docs/rules/no-restricted-component-names.md
new file mode 100644
index 000000000..689c73aa1
--- /dev/null
+++ b/docs/rules/no-restricted-component-names.md
@@ -0,0 +1,98 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-restricted-component-names
+description: disallow specific component names
+since: v9.15.0
+---
+
+# vue/no-restricted-component-names
+
+> disallow specific component names
+
+- :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
+
+## :book: Rule Details
+
+This rule allows you to specify component names that you don't want to use in your application.
+
+<eslint-code-block :rules="{'vue/no-restricted-component-names': ['error', 'Disallow']}">
+
+```vue
+<!-- ✗ BAD -->
+<script>
+export default {
+  name: 'Disallow',
+}
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/no-restricted-component-names': ['error', 'Disallow']}">
+
+```vue
+<!-- ✓ GOOD -->
+<script>
+export default {
+  name: 'Allow',
+}
+</script>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+This rule takes a list of strings, where each string is a component name or pattern to be restricted:
+
+```json
+{
+  "vue/no-restricted-component-names": ["error", "foo", "/^Disallow/"]
+}
+```
+
+Alternatively, you can specify an object with a `name` property and an optional `message` and `suggest` property:
+
+```json
+{
+  "vue/no-restricted-component-names": [
+    "error",
+    {
+      "name": "Disallow",
+      "message": "Please do not use `Disallow` as a component name",
+      "suggest": "allow"
+    },
+    {
+      "name": "/^custom/",
+      "message": "Please do not use component names starting with 'custom'"
+    }
+  ]
+}
+```
+
+<eslint-code-block :rules="{'vue/no-restricted-component-names': ['error', { name: 'Disallow', message: 'Please do not use \'Disallow\' as a component name', suggest: 'allow'}]}">
+
+```vue
+<!-- ✗ BAD -->
+<script>
+export default {
+  name: 'Disallow',
+}
+</script>
+```
+
+</eslint-code-block>
+
+## :couple: Related Rules
+
+- [vue/restricted-component-names](./restricted-component-names.md)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.15.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-restricted-component-names.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-restricted-component-names.js)
diff --git a/docs/rules/no-restricted-component-options.md b/docs/rules/no-restricted-component-options.md
index a11570945..57d736ae3 100644
--- a/docs/rules/no-restricted-component-options.md
+++ b/docs/rules/no-restricted-component-options.md
@@ -5,6 +5,7 @@ title: vue/no-restricted-component-options
 description: disallow specific component option
 since: v7.0.0
 ---
+
 # vue/no-restricted-component-options
 
 > disallow specific component option
diff --git a/docs/rules/no-restricted-custom-event.md b/docs/rules/no-restricted-custom-event.md
index b77feac14..88a3eb424 100644
--- a/docs/rules/no-restricted-custom-event.md
+++ b/docs/rules/no-restricted-custom-event.md
@@ -5,6 +5,7 @@ title: vue/no-restricted-custom-event
 description: disallow specific custom event
 since: v7.3.0
 ---
+
 # vue/no-restricted-custom-event
 
 > disallow specific custom event
diff --git a/docs/rules/no-restricted-html-elements.md b/docs/rules/no-restricted-html-elements.md
index 15a62447f..9adc7a6ab 100644
--- a/docs/rules/no-restricted-html-elements.md
+++ b/docs/rules/no-restricted-html-elements.md
@@ -2,16 +2,17 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/no-restricted-html-elements
-description: disallow specific HTML elements
+description: disallow specific elements
 since: v8.6.0
 ---
+
 # vue/no-restricted-html-elements
 
-> disallow specific HTML elements
+> disallow specific elements
 
 ## :book: Rule Details
 
-This rule allows you to specify HTML elements that you don't want to use in your application.
+This rule allows you to specify HTML, SVG, and MathML elements that you don't want to use in your application.
 
 <eslint-code-block :rules="{'vue/no-restricted-html-elements': ['error', 'marquee', 'button'] }">
 
@@ -32,20 +33,20 @@ This rule allows you to specify HTML elements that you don't want to use in your
 
 ## :wrench: Options
 
-This rule takes a list of strings, where each string is an HTML element name to be restricted:
+This rule takes a list of strings, where each string is an element name to be restricted:
 
 ```json
 {
-  "vue/no-restricted-html-elements": ["error", "button", "marquee"]
+  "vue/no-restricted-html-elements": ["error", "a", "marquee"]
 }
 ```
 
-<eslint-code-block :rules="{'vue/no-restricted-html-elements': ['error', 'button', 'marquee']}">
+<eslint-code-block :rules="{'vue/no-restricted-html-elements': ['error', 'a', 'marquee']}">
 
 ```vue
 <template>
   <!-- ✗ BAD -->
-  <button></button>
+  <a></a>
   <marquee></marquee>
 </template>
 ```
@@ -59,8 +60,8 @@ Alternatively, the rule also accepts objects.
   "vue/no-restricted-html-elements": [
     "error",
     {
-      "element": "button",
-      "message": "Prefer use of our custom <AppButton /> component"
+      "element": ["a", "RouterLink"],
+      "message": "Prefer the use of <NuxtLink> component"
     },
     {
       "element": "marquee",
@@ -72,18 +73,18 @@ Alternatively, the rule also accepts objects.
 
 The following properties can be specified for the object.
 
-- `element` ... Specify the html element.
+- `element` ... Specify the element name or an array of element names.
 - `message` ... Specify an optional custom message.
 
-### `{ "element": "marquee" }, { "element": "button" }`
+### `{ "element": "marquee" }, { "element": "a" }`
 
-<eslint-code-block :rules="{'vue/no-restricted-html-elements': ['error', { element: 'marquee' }, { element: 'button' }]}">
+<eslint-code-block :rules="{'vue/no-restricted-html-elements': ['error', { element: 'marquee' }, { element: 'a' }]}">
 
 ```vue
 <template>
   <!-- ✗ BAD -->
   <marquee></marquee>
-  <button></button>
+  <a></a>
 </template>
 ```
 
diff --git a/docs/rules/no-restricted-props.md b/docs/rules/no-restricted-props.md
index beecaaa8b..454923ae3 100644
--- a/docs/rules/no-restricted-props.md
+++ b/docs/rules/no-restricted-props.md
@@ -5,6 +5,7 @@ title: vue/no-restricted-props
 description: disallow specific props
 since: v7.3.0
 ---
+
 # vue/no-restricted-props
 
 > disallow specific props
diff --git a/docs/rules/no-restricted-static-attribute.md b/docs/rules/no-restricted-static-attribute.md
index 68ed58431..a0534f563 100644
--- a/docs/rules/no-restricted-static-attribute.md
+++ b/docs/rules/no-restricted-static-attribute.md
@@ -5,6 +5,7 @@ title: vue/no-restricted-static-attribute
 description: disallow specific attribute
 since: v7.0.0
 ---
+
 # vue/no-restricted-static-attribute
 
 > disallow specific attribute
@@ -39,10 +40,16 @@ Alternatively, the rule also accepts objects.
 
 ```json
 {
-  "vue/no-restricted-static-attribute": ["error",
+  "vue/no-restricted-static-attribute": [
+    "error",
     {
       "key": "stlye",
       "message": "Using \"stlye\" is not allowed. Use \"style\" instead."
+    },
+    {
+      "key": "style",
+      "element": "/^([A-Z][a-zA-Z_-]*)$/",
+      "message": "Using \"style\" is not allowed in custom component. Use \"class\" instead."
     }
   ]
 }
@@ -90,8 +97,10 @@ The following properties can be specified for the object.
 ## :couple: Related Rules
 
 - [vue/no-restricted-v-bind]
+- [vue/no-restricted-v-on]
 
 [vue/no-restricted-v-bind]: ./no-restricted-v-bind.md
+[vue/no-restricted-v-on]: ./no-restricted-v-on.md
 
 ## :rocket: Version
 
diff --git a/docs/rules/no-restricted-syntax.md b/docs/rules/no-restricted-syntax.md
index dcde6897a..d16cebcf3 100644
--- a/docs/rules/no-restricted-syntax.md
+++ b/docs/rules/no-restricted-syntax.md
@@ -2,12 +2,13 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/no-restricted-syntax
-description: disallow specified syntax in `<template>`
+description: Disallow specified syntax in `<template>`
 since: v5.2.0
 ---
+
 # vue/no-restricted-syntax
 
-> disallow specified syntax in `<template>`
+> Disallow specified syntax in `<template>`
 
 This rule is the same rule as core [no-restricted-syntax] rule but it applies to the expressions in `<template>`.
 
@@ -59,4 +60,4 @@ This rule was introduced in eslint-plugin-vue v5.2.0
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-restricted-syntax.js)
 - [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-restricted-syntax.js)
 
-<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/rules/no-restricted-syntax)</sup>
+<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/latest/rules/no-restricted-syntax)</sup>
diff --git a/docs/rules/no-restricted-v-bind.md b/docs/rules/no-restricted-v-bind.md
index 8b9332f6e..4c1495f4e 100644
--- a/docs/rules/no-restricted-v-bind.md
+++ b/docs/rules/no-restricted-v-bind.md
@@ -5,6 +5,7 @@ title: vue/no-restricted-v-bind
 description: disallow specific argument in `v-bind`
 since: v7.0.0
 ---
+
 # vue/no-restricted-v-bind
 
 > disallow specific argument in `v-bind`
@@ -53,7 +54,8 @@ Alternatively, the rule also accepts objects.
 
 ```json
 {
-  "vue/no-restricted-v-bind": ["error",
+  "vue/no-restricted-v-bind": [
+    "error",
     {
       "argument": "/^v-/",
       "message": "Using `:v-xxx` is not allowed. Instead, remove `:` and use it as directive."
@@ -112,8 +114,10 @@ The following properties can be specified for the object.
 ## :couple: Related Rules
 
 - [vue/no-restricted-static-attribute]
+- [vue/no-restricted-v-on]
 
 [vue/no-restricted-static-attribute]: ./no-restricted-static-attribute.md
+[vue/no-restricted-v-on]: ./no-restricted-v-on.md
 
 ## :rocket: Version
 
diff --git a/docs/rules/no-restricted-v-on.md b/docs/rules/no-restricted-v-on.md
new file mode 100644
index 000000000..be32147a0
--- /dev/null
+++ b/docs/rules/no-restricted-v-on.md
@@ -0,0 +1,115 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-restricted-v-on
+description: disallow specific argument in `v-on`
+since: v9.21.0
+---
+
+# vue/no-restricted-v-on
+
+> disallow specific argument in `v-on`
+
+## :book: Rule Details
+
+This rule allows you to specify `v-on` argument names that you don't want to use in your application.
+
+## :wrench: Options
+
+This rule takes a list of strings, where each string is a argument name or pattern to be restricted:
+
+```json
+{
+  "vue/no-restricted-v-on": ["error", "foo", "/^bar/"]
+}
+```
+
+<eslint-code-block :rules="{'vue/no-restricted-v-on': ['error', 'foo', '/^bar/']}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <div v-on:click="x" />
+  <div @tap="x" />
+
+  <!-- ✗ BAD -->
+  <div v-on:foo="x" />
+  <div @bar-baz="x" />
+</template>
+```
+
+</eslint-code-block>
+
+Alternatively, the rule also accepts objects.
+
+```json
+{
+  "vue/no-restricted-v-on": [
+    "error",
+    {
+      "argument": "foo",
+      "message": "Use \"v-on:x\" instead."
+    },
+    {
+      "argument": "bar",
+      "message": "\"@bar\" is deprecated."
+    }
+  ]
+}
+```
+
+The following properties can be specified for the object.
+
+- `argument` ... Specify the argument name or pattern or `null`. If `null` is specified, it matches `v-on=`.
+- `modifiers` ... Specifies an array of the modifier names. If specified, it will only be reported if the specified modifier is used.
+- `element` ... Specify the element name or pattern. If specified, it will only be reported if used on the specified element.
+- `message` ... Specify an optional custom message.
+
+### `{ "argument": "foo", "modifiers": ["prevent"]  }`
+
+<eslint-code-block :rules="{'vue/no-restricted-v-on': ['error', { argument: 'foo', modifiers: ['prevent'] }]}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <div @foo="x" />
+
+  <!-- ✗ BAD -->
+  <div @foo.prevent="x" />
+</template>
+```
+
+</eslint-code-block>
+
+### `{ "argument": "foo", "element": "MyButton"  }`
+
+<eslint-code-block :rules="{'vue/no-restricted-v-on': ['error', { argument: 'foo', element: 'MyButton' }]}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <CoolButton @foo="x" />
+
+  <!-- ✗ BAD -->
+  <MyButton @foo="x" />
+</template>
+```
+
+</eslint-code-block>
+
+## :couple: Related Rules
+
+- [vue/no-restricted-static-attribute]
+- [vue/no-restricted-v-bind]
+
+[vue/no-restricted-static-attribute]: ./no-restricted-static-attribute.md
+[vue/no-restricted-v-bind]: ./no-restricted-v-bind.md
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.21.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-restricted-v-on.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-restricted-v-on.js)
diff --git a/docs/rules/no-root-v-if.md b/docs/rules/no-root-v-if.md
new file mode 100644
index 000000000..c65ac564a
--- /dev/null
+++ b/docs/rules/no-root-v-if.md
@@ -0,0 +1,40 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-root-v-if
+description: disallow `v-if` directives on root element
+since: v9.12.0
+---
+
+# vue/no-root-v-if
+
+> disallow `v-if` directives on root element
+
+This rule reports template roots with `v-if`. Rendering of the whole component could be made conditional in the parent component (with a `v-if` there) instead.
+
+## :book: Rule Details
+
+This rule reports the template root in the following cases:
+
+<eslint-code-block :rules="{'vue/no-root-v-if': ['error']}">
+
+```vue
+<template>
+  <div v-if="foo"></div>
+</template>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.12.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-root-v-if.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-root-v-if.js)
diff --git a/docs/rules/no-setup-props-destructure.md b/docs/rules/no-setup-props-destructure.md
index d618cf013..66fa784c7 100644
--- a/docs/rules/no-setup-props-destructure.md
+++ b/docs/rules/no-setup-props-destructure.md
@@ -2,14 +2,15 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/no-setup-props-destructure
-description: disallow destructuring of `props` passed to `setup`
+description: disallow usages that lose the reactivity of `props` passed to `setup`
 since: v7.0.0
 ---
+
 # vue/no-setup-props-destructure
 
-> disallow destructuring of `props` passed to `setup`
+> disallow usages that lose the reactivity of `props` passed to `setup`
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :no_entry: This rule was **removed** in eslint-plugin-vue v10.0.0 and replaced by [vue/no-setup-props-reactivity-loss](no-setup-props-reactivity-loss.md) rule.
 
 ## :book: Rule Details
 
@@ -22,7 +23,7 @@ This rule reports the destructuring of `props` passed to `setup` causing the val
 export default {
   /* ✓ GOOD */
   setup(props) {
-    watch(() => {
+    watch(() => props.count, () => {
       console.log(props.count)
     })
 
@@ -45,8 +46,8 @@ Destructuring the `props` passed to `setup` will cause the value to lose reactiv
 export default {
   /* ✗ BAD */
   setup({ count }) {
-    watch(() => {
-      console.log(count) // not going to detect changes
+    watch(() => count, () => { // not going to detect changes
+      console.log(count)
     })
 
     return () => {
@@ -70,7 +71,7 @@ export default {
     /* ✗ BAD */
     const { count } = props
 
-    watch(() => {
+    watch(() => props.count, () => {
       /* ✓ GOOD */
       const { count } = props
       console.log(count)
@@ -94,7 +95,7 @@ Nothing.
 
 ## :books: Further Reading
 
-- [Guide - Composition API - Setup](https://v3.vuejs.org/guide/composition-api-setup.html)
+- [Guide - Composition API - Setup](https://vuejs.org/api/composition-api-setup.html)
 - [Vue RFCs - 0013-composition-api](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0013-composition-api.md)
 
 ## :rocket: Version
diff --git a/docs/rules/no-setup-props-reactivity-loss.md b/docs/rules/no-setup-props-reactivity-loss.md
new file mode 100644
index 000000000..b950ce3f7
--- /dev/null
+++ b/docs/rules/no-setup-props-reactivity-loss.md
@@ -0,0 +1,106 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-setup-props-reactivity-loss
+description: disallow usages that lose the reactivity of `props` passed to `setup`
+since: v9.17.0
+---
+
+# vue/no-setup-props-reactivity-loss
+
+> disallow usages that lose the reactivity of `props` passed to `setup`
+
+## :book: Rule Details
+
+This rule reports the destructuring or member expression of `props` passed to `setup` causing the value to lose reactivity.
+
+<eslint-code-block :rules="{'vue/no-setup-props-reactivity-loss': ['error']}">
+
+```vue
+<script>
+export default {
+  /* ✓ GOOD */
+  setup(props) {
+    watch(() => props.count, () => {
+      console.log(props.count)
+    })
+
+    return () => {
+      return h('div', props.count)
+    }
+  }
+}
+</script>
+```
+
+</eslint-code-block>
+
+Destructuring the `props` passed to `setup` will cause the value to lose reactivity.
+
+<eslint-code-block :rules="{'vue/no-setup-props-reactivity-loss': ['error']}">
+
+```vue
+<script>
+export default {
+  /* ✗ BAD */
+  setup({ count }) {
+    watch(() => count, () => { // not going to detect changes
+      console.log(count)
+    })
+
+    return () => {
+      return h('div', count) // not going to update
+    }
+  }
+}
+</script>
+```
+
+</eslint-code-block>
+
+Also, destructuring in root scope of `setup()` should error, but ok inside nested callbacks or returned render functions:
+
+<eslint-code-block :rules="{'vue/no-setup-props-reactivity-loss': ['error']}">
+
+```vue
+<script>
+export default {
+  setup(props) {
+    /* ✗ BAD */
+    const { count } = props
+
+    watch(() => props.count, () => {
+      /* ✓ GOOD */
+      const { count } = props
+      console.log(count)
+    })
+
+    return () => {
+      /* ✓ GOOD */
+      const { count } = props
+      return h('div', count)
+    }
+  }
+}
+</script>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## :books: Further Reading
+
+- [Guide - Composition API - Setup](https://vuejs.org/api/composition-api-setup.html)
+- [Vue RFCs - 0013-composition-api](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0013-composition-api.md)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.17.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-setup-props-reactivity-loss.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-setup-props-reactivity-loss.js)
diff --git a/docs/rules/no-shared-component-data.md b/docs/rules/no-shared-component-data.md
index ce4f693e0..1a96cf89f 100644
--- a/docs/rules/no-shared-component-data.md
+++ b/docs/rules/no-shared-component-data.md
@@ -5,12 +5,13 @@ title: vue/no-shared-component-data
 description: enforce component's data property to be a function
 since: v3.8.0
 ---
+
 # vue/no-shared-component-data
 
 > enforce component's data property to be a function
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 When using the data property on a component (i.e. anywhere except on `new Vue`), the value must be a function that returns an object.
 
@@ -32,7 +33,7 @@ Vue.component('some-comp', {
 })
 
 export default {
-  data () {
+  data() {
     return {
       foo: 'bar'
     }
diff --git a/docs/rules/no-side-effects-in-computed-properties.md b/docs/rules/no-side-effects-in-computed-properties.md
index b2d0490b7..970299537 100644
--- a/docs/rules/no-side-effects-in-computed-properties.md
+++ b/docs/rules/no-side-effects-in-computed-properties.md
@@ -5,11 +5,12 @@ title: vue/no-side-effects-in-computed-properties
 description: disallow side effects in computed properties
 since: v3.6.0
 ---
+
 # vue/no-side-effects-in-computed-properties
 
 > disallow side effects in computed properties
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 ## :book: Rule Details
 
@@ -24,10 +25,10 @@ It is considered a very bad practice to introduce side effects inside computed p
 /* ✓ GOOD */
 export default {
   computed: {
-    fullName () {
+    fullName() {
       return `${this.firstName} ${this.lastName}`
     },
-    reversedArray () {
+    reversedArray() {
       return this.array.slice(0).reverse() // .slice makes a copy of the array, instead of mutating the orginal
     }
   }
@@ -44,11 +45,11 @@ export default {
 /* ✗ BAD */
 export default {
   computed: {
-    fullName () {
+    fullName() {
       this.firstName = 'lorem' // <- side effect
       return `${this.firstName} ${this.lastName}`
     },
-    reversedArray () {
+    reversedArray() {
       return this.array.reverse() // <- side effect - orginal array is being mutated
     }
   }
@@ -62,7 +63,7 @@ export default {
 
 ```vue
 <script>
-import {computed} from 'vue'
+import { computed } from 'vue'
 /* ✓ GOOD */
 export default {
   setup() {
@@ -83,12 +84,12 @@ export default {
 
 ```vue
 <script>
-import {computed} from 'vue'
+import { computed } from 'vue'
 /* ✗ BAD */
 export default {
   setup() {
     const foo = useFoo()
-    
+
     const fullName = computed(() => {
       foo.firstName = 'lorem' // <- side effect
       return `${foo.firstName} ${foo.lastName}`
@@ -109,7 +110,7 @@ Nothing.
 
 ## :books: Further Reading
 
-- [Guide - Computed Caching vs Methods](https://v3.vuejs.org/guide/computed.html#computed-caching-vs-methods)
+- [Guide - Computed Caching vs Methods](https://vuejs.org/guide/essentials/computed.html#computed-caching-vs-methods)
 
 ## :rocket: Version
 
diff --git a/docs/rules/no-spaces-around-equal-signs-in-attribute.md b/docs/rules/no-spaces-around-equal-signs-in-attribute.md
index bb3a7ff6c..39682f6bc 100644
--- a/docs/rules/no-spaces-around-equal-signs-in-attribute.md
+++ b/docs/rules/no-spaces-around-equal-signs-in-attribute.md
@@ -5,12 +5,13 @@ title: vue/no-spaces-around-equal-signs-in-attribute
 description: disallow spaces around equal signs in attribute
 since: v5.0.0
 ---
+
 # vue/no-spaces-around-equal-signs-in-attribute
 
 > disallow spaces around equal signs in attribute
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
@@ -43,7 +44,7 @@ HTML5 allows spaces around equal signs. But space-less is easier to read, and gr
 
 ## :books: Further Reading
 
-- [HTML5 Style Guide - W3Schools *Spaces and Equal Signs*](https://www.w3schools.com/html/html5_syntax.asp)
+- [HTML5 Style Guide - W3Schools _Spaces and Equal Signs_](https://www.w3schools.com/html/html5_syntax.asp)
 
 ## :rocket: Version
 
diff --git a/docs/rules/no-sparse-arrays.md b/docs/rules/no-sparse-arrays.md
index 861c82ea1..a71ccef7d 100644
--- a/docs/rules/no-sparse-arrays.md
+++ b/docs/rules/no-sparse-arrays.md
@@ -2,12 +2,13 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/no-sparse-arrays
-description: disallow sparse arrays in `<template>`
+description: Disallow sparse arrays in `<template>`
 since: v7.0.0
 ---
+
 # vue/no-sparse-arrays
 
-> disallow sparse arrays in `<template>`
+> Disallow sparse arrays in `<template>`
 
 This rule is the same rule as core [no-sparse-arrays] rule but it applies to the expressions in `<template>`.
 
@@ -26,4 +27,4 @@ This rule was introduced in eslint-plugin-vue v7.0.0
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-sparse-arrays.js)
 - [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-sparse-arrays.js)
 
-<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/rules/no-sparse-arrays)</sup>
+<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/latest/rules/no-sparse-arrays)</sup>
diff --git a/docs/rules/no-static-inline-styles.md b/docs/rules/no-static-inline-styles.md
index 09f7f2188..afb93fbf3 100644
--- a/docs/rules/no-static-inline-styles.md
+++ b/docs/rules/no-static-inline-styles.md
@@ -5,6 +5,7 @@ title: vue/no-static-inline-styles
 description: disallow static inline `style` attributes
 since: v7.0.0
 ---
+
 # vue/no-static-inline-styles
 
 > disallow static inline `style` attributes
@@ -20,12 +21,12 @@ The styles reported in this rule mean that we recommend separating them into `<s
 <template>
   <!-- ✓ GOOD -->
   <div :style="styleObject"></div>
-  <div :style="{ backgroundImage: 'url('+img+')' }"></div>
+  <div :style="{ backgroundImage: 'url(' + img + ')' }"></div>
 
   <!-- ✗ BAD -->
   <div style="color: pink;"></div>
   <div :style="{ color: 'pink' }"></div>
-  <div :style="[ { color: 'pink' }, { 'font-size': '85%' } ]"></div>
+  <div :style="[{ color: 'pink' }, { 'font-size': '85%' }]"></div>
   <div :style="{ backgroundImage, color: 'pink' }"></div>
 </template>
 ```
@@ -52,7 +53,7 @@ The styles reported in this rule mean that we recommend separating them into `<s
 <template>
   <!-- ✓ GOOD -->
   <div :style="{ transform: 'scale(0.5)' }"></div>
-  <div :style="[ { transform: 'scale(0.5)' }, { 'user-select': 'none' } ]"></div>
+  <div :style="[{ transform: 'scale(0.5)' }, { 'user-select': 'none' }]"></div>
 
   <!-- ✗ BAD -->
   <div style="transform: scale(0.5);"></div>
@@ -63,7 +64,7 @@ The styles reported in this rule mean that we recommend separating them into `<s
 
 ## :books: Further Reading
 
-- [Guide - Class and Style Bindings / Binding Inline Styles](https://v3.vuejs.org/guide/class-and-style.html#binding-inline-styles)
+- [Guide - Class and Style Bindings / Binding Inline Styles](https://vuejs.org/guide/essentials/class-and-style.html#binding-inline-styles)
 
 ## :rocket: Version
 
diff --git a/docs/rules/no-template-key.md b/docs/rules/no-template-key.md
index eb1846309..03e43b401 100644
--- a/docs/rules/no-template-key.md
+++ b/docs/rules/no-template-key.md
@@ -5,11 +5,12 @@ title: vue/no-template-key
 description: disallow `key` attribute on `<template>`
 since: v3.4.0
 ---
+
 # vue/no-template-key
 
 > disallow `key` attribute on `<template>`
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 Vue.js disallows `key` attribute on `<template>` elements.
 
@@ -53,7 +54,7 @@ Nothing.
 
 ## :books: Further Reading
 
-- [API - Special Attributes - key](https://v3.vuejs.org/api/special-attributes.html#key)
+- [API - Special Attributes - key](https://vuejs.org/api/built-in-special-attributes.html#key)
 
 ## :rocket: Version
 
diff --git a/docs/rules/no-template-shadow.md b/docs/rules/no-template-shadow.md
index 5bddba45c..7e38084f1 100644
--- a/docs/rules/no-template-shadow.md
+++ b/docs/rules/no-template-shadow.md
@@ -5,11 +5,12 @@ title: vue/no-template-shadow
 description: disallow variable declarations from shadowing variables declared in the outer scope
 since: v5.0.0
 ---
+
 # vue/no-template-shadow
 
 > disallow variable declarations from shadowing variables declared in the outer scope
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 `no-template-shadow` should report variable definitions of v-for directives or scope attributes if they shadow the variables in parent scopes.
 
@@ -36,13 +37,13 @@ This rule aims to eliminate shadowed variable declarations of v-for directives o
 </template>
 
 <script>
-  export default {
-    data () {
-      return {
-        l: false
-      }
+export default {
+  data() {
+    return {
+      l: false
     }
   }
+}
 </script>
 ```
 
@@ -50,7 +51,37 @@ This rule aims to eliminate shadowed variable declarations of v-for directives o
 
 ## :wrench: Options
 
-Nothing.
+This rule takes one optional object option, with the property `"allow"`.
+
+```json
+{
+  "vue/no-template-shadow": ["error", { "allow": [] }]
+}
+```
+
+- `"allow"` (`[string]`) Array of identifier names for which shadowing is allowed.
+
+Examples of correct code for the `{ "allow": ["i"] }` option:
+
+<eslint-code-block :rules="{'vue/no-template-shadow': ['error', { allow: ['i'] }]}">
+
+```vue
+<template>
+  <div v-for="i in 5"></div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      i: 'some value'
+    }
+  }
+}
+</script>
+```
+
+</eslint-code-block>
 
 ## :rocket: Version
 
diff --git a/docs/rules/no-template-target-blank.md b/docs/rules/no-template-target-blank.md
index f53289e3e..d2a8fc006 100644
--- a/docs/rules/no-template-target-blank.md
+++ b/docs/rules/no-template-target-blank.md
@@ -5,9 +5,12 @@ title: vue/no-template-target-blank
 description: disallow target="_blank" attribute without rel="noopener noreferrer"
 since: v7.0.0
 ---
+
 # vue/no-template-target-blank
 
-> disallow target="_blank" attribute without rel="noopener noreferrer"
+> disallow target="\_blank" attribute without rel="noopener noreferrer"
+
+- :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
 
 ## :book: Rule Details
 
diff --git a/docs/rules/no-textarea-mustache.md b/docs/rules/no-textarea-mustache.md
index 3676d4a0b..0db4aff4f 100644
--- a/docs/rules/no-textarea-mustache.md
+++ b/docs/rules/no-textarea-mustache.md
@@ -5,11 +5,12 @@ title: vue/no-textarea-mustache
 description: disallow mustaches in `<textarea>`
 since: v3.0.0
 ---
+
 # vue/no-textarea-mustache
 
 > disallow mustaches in `<textarea>`
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 ## :book: Rule Details
 
@@ -34,7 +35,7 @@ This rule reports mustaches in `<textarea>`.
 
 ::: warning Note
 Interpolation on textareas (`<textarea>{{text}}</textarea>`) won't work. Use `v-model` instead.
-[https://v3.vuejs.org/guide/forms.html#multiline-text](https://v3.vuejs.org/guide/forms.html#multiline-text)
+[https://vuejs.org/guide/essentials/forms.html#multiline-text](https://vuejs.org/guide/essentials/forms.html#multiline-text)
 :::
 
 </div>
@@ -45,7 +46,7 @@ Nothing.
 
 ## :books: Further Reading
 
-- [Guide - Form Input Bindings / Multiline text](https://v3.vuejs.org/guide/forms.html#multiline-text)
+- [Guide - Form Input Bindings / Multiline text](https://vuejs.org/guide/essentials/forms.html#multiline-text)
 
 ## :rocket: Version
 
diff --git a/docs/rules/no-this-in-before-route-enter.md b/docs/rules/no-this-in-before-route-enter.md
index 0771bbb9c..d84531ddb 100644
--- a/docs/rules/no-this-in-before-route-enter.md
+++ b/docs/rules/no-this-in-before-route-enter.md
@@ -5,6 +5,7 @@ title: vue/no-this-in-before-route-enter
 description: disallow `this` usage in a `beforeRouteEnter` method
 since: v7.11.0
 ---
+
 # vue/no-this-in-before-route-enter
 
 > disallow `this` usage in a `beforeRouteEnter` method
@@ -25,7 +26,7 @@ export default {
     if (this.value === 42) {
     }
     this.attribute = this.method();
-  }   
+  }
 }
 </script>
 ```
@@ -40,7 +41,7 @@ export default {
   beforeRouteEnter() {
     /* ✓ GOOD */
     // anything without this
-  }   
+  }
 }
 </script>
 ```
diff --git a/docs/rules/no-undef-components.md b/docs/rules/no-undef-components.md
index 3b58919b1..0e28192e3 100644
--- a/docs/rules/no-undef-components.md
+++ b/docs/rules/no-undef-components.md
@@ -5,6 +5,7 @@ title: vue/no-undef-components
 description: disallow use of undefined components in `<template>`
 since: v8.4.0
 ---
+
 # vue/no-undef-components
 
 > disallow use of undefined components in `<template>`
@@ -83,9 +84,7 @@ export default {
 
 <script>
 export default {
-  components: {
-
-  }
+  components: {}
 }
 </script>
 ```
@@ -135,11 +134,9 @@ export default {
 </template>
 
 <script>
-  export default {
-    components: {
-
-    },
-  }
+export default {
+  components: {}
+}
 </script>
 ```
 
@@ -157,11 +154,9 @@ export default {
 </template>
 
 <script>
-  export default {
-    components: {
-
-    },
-  }
+export default {
+  components: {}
+}
 </script>
 ```
 
diff --git a/docs/rules/no-undef-properties.md b/docs/rules/no-undef-properties.md
index 9b5062a65..9d77323c5 100644
--- a/docs/rules/no-undef-properties.md
+++ b/docs/rules/no-undef-properties.md
@@ -5,17 +5,18 @@ title: vue/no-undef-properties
 description: disallow undefined properties
 since: v7.20.0
 ---
+
 # vue/no-undef-properties
 
 > disallow undefined properties
 
 ## :book: Rule Details
 
-This rule warns of using undefined properties.  
+This rule warns of using undefined properties.\
 This rule can help you locate potential errors resulting from misspellings property names, and implicitly added properties.
 
 ::: warning Note
-This rule cannot detect properties defined in other files or components.  
+This rule cannot detect properties defined in other files or components.\
 Note that there are many false positives if you are using mixins.
 :::
 
@@ -52,23 +53,23 @@ watch(() => prop.undef, () => console.log('Updated!'))
   <div>{{ label }}: {{ cnt }}</div>
 </template>
 <script>
-  export default {
-    props: ['name'],
-    data () {
-      return {
-        count: 0
-      }
-    },
-    methods: {
-      click() {
-        /* ✓ GOOD */
-        this.count++
-
-        /* ✗ BAD */
-        this.cnt++
-      }
+export default {
+  props: ['name'],
+  data() {
+    return {
+      count: 0
+    }
+  },
+  methods: {
+    click() {
+      /* ✓ GOOD */
+      this.count++
+
+      /* ✗ BAD */
+      this.cnt++
     }
   }
+}
 </script>
 ```
 
@@ -96,12 +97,12 @@ watch(() => prop.undef, () => console.log('Updated!'))
   <div>{{ $t('foo') }}</div>
 </template>
 <script>
-  export default {
-    mounted() {
-      /* ✓ GOOD */
-      const hash = this.$route.hash
-    }
+export default {
+  mounted() {
+    /* ✓ GOOD */
+    const hash = this.$route.hash
   }
+}
 </script>
 ```
 
diff --git a/docs/rules/no-unregistered-components.md b/docs/rules/no-unregistered-components.md
index dcbd9bc47..dd8977bc6 100644
--- a/docs/rules/no-unregistered-components.md
+++ b/docs/rules/no-unregistered-components.md
@@ -5,11 +5,12 @@ title: vue/no-unregistered-components
 description: disallow using components that are not registered inside templates
 since: v7.0.0
 ---
+
 # vue/no-unregistered-components
 
 > disallow using components that are not registered inside templates
 
-- :no_entry_sign: This rule was **removed** in eslint-plugin-vue v9.0.0 and replaced by [vue/no-undef-components](no-undef-components.md) rule.
+- :no_entry: This rule was **removed** in eslint-plugin-vue v9.0.0 and replaced by [vue/no-undef-components](no-undef-components.md) rule.
 
 ## :book: Rule Details
 
@@ -37,19 +38,19 @@ are ignored by default.
 </template>
 
 <script>
-  import TheButton from 'components/TheButton.vue'
-  import TheModal from 'components/TheModal.vue'
-  import TheInput from 'components/TheInput.vue'
-  import TheDropdown from 'components/TheDropdown.vue'
-
-  export default {
-    components: {
-      TheButton,
-      TheModal,
-      TheInput,
-      TheDropdown,
-    }
+import TheButton from 'components/TheButton.vue'
+import TheModal from 'components/TheModal.vue'
+import TheInput from 'components/TheInput.vue'
+import TheDropdown from 'components/TheDropdown.vue'
+
+export default {
+  components: {
+    TheButton,
+    TheModal,
+    TheInput,
+    TheDropdown,
   }
+}
 </script>
 ```
 
@@ -67,11 +68,9 @@ are ignored by default.
 </template>
 
 <script>
-  export default {
-    components: {
-
-    }
-  }
+export default {
+  components: {}
+}
 </script>
 ```
 
@@ -103,11 +102,9 @@ are ignored by default.
 </template>
 
 <script>
-  export default {
-    components: {
-
-    },
-  }
+export default {
+  components: {}
+}
 </script>
 ```
 
@@ -125,11 +122,9 @@ are ignored by default.
 </template>
 
 <script>
-  export default {
-    components: {
-
-    },
-  }
+export default {
+  components: {}
+}
 </script>
 ```
 
diff --git a/docs/rules/no-unsupported-features.md b/docs/rules/no-unsupported-features.md
index 799b456cb..d77fdbdaa 100644
--- a/docs/rules/no-unsupported-features.md
+++ b/docs/rules/no-unsupported-features.md
@@ -5,11 +5,12 @@ title: vue/no-unsupported-features
 description: disallow unsupported Vue.js syntax on the specified version
 since: v6.1.0
 ---
+
 # vue/no-unsupported-features
 
 > disallow unsupported Vue.js syntax on the specified version
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
@@ -28,22 +29,29 @@ This rule reports unsupported Vue.js syntax on the specified version.
 
 - `version` ... The `version` option accepts [the valid version range of `node-semver`](https://github.com/npm/node-semver#range-grammar). Set the version of Vue.js you are using. This option is required.
 - `ignores` ... You can use this `ignores` option to ignore the given features.
-The `"ignores"` option accepts an array of the following strings.
+  The `"ignores"` option accepts an array of the following strings.
+  - Vue.js 3.4.0+
+    - `"define-model"` ... `defineModel()` macro.
+    - `"v-bind-same-name-shorthand"` ... `v-bind` same-name shorthand.
+  - Vue.js 3.3.0+
+    - `"define-slots"` ... `defineSlots()` macro.
+    - `"define-options"` ... `defineOptions()` macro.
   - Vue.js 3.2.0+
-    - `"v-memo"` ... [v-memo](https://v3.vuejs.org/api/directives.html#v-memo) directive.
+    - `"v-memo"` ... [v-memo](https://vuejs.org/api/built-in-directives.html#v-memo) directive.
     - `"v-bind-prop-modifier-shorthand"` ... `v-bind` with `.prop` modifier shorthand.
     - `"v-bind-attr-modifier"` ... `.attr` modifier on `v-bind` directive.
   - Vue.js 3.1.0+
-    - `"is-attribute-with-vue-prefix"` ... [`is` attribute with `vue:` prefix](https://v3.vuejs.org/api/special-attributes.html#is)
+    - `"is-attribute-with-vue-prefix"` ... [`is` attribute with `vue:` prefix](https://vuejs.org/api/built-in-special-attributes.html#is)
   - Vue.js 3.0.0+
-    - `"style-css-vars-injection"` ... [SFC CSS variable injection][Vue RFCs - 0043-sfc-style-variables]
-    - `"script-setup"` ... [`<script setup>`][Vue RFCs - 0040-script-setup]
     - `"v-model-argument"` ... [argument on `v-model`][Vue RFCs - 0005-replace-v-bind-sync-with-v-model-argument]
     - `"v-model-custom-modifiers"` ... [custom modifiers on `v-model`][Vue RFCs - 0011-v-model-api-change]
     - `"v-is"` ... [v-is](https://v3.vuejs.org/api/directives.html#v-is) directive.
+  - Vue.js 2.7.0+
+    - `"style-css-vars-injection"` ... [SFC CSS variable injection][Vue RFCs - 0043-sfc-style-variables]
+    - `"script-setup"` ... [`<script setup>`][Vue RFCs - 0040-script-setup]
   - Vue.js 2.6.0+
-    - `"dynamic-directive-arguments"` ... [dynamic directive arguments](https://v3.vuejs.org/guide/template-syntax.html#dynamic-arguments).
-    - `"v-slot"` ... [v-slot](https://v3.vuejs.org/api/directives.html#v-slot) directive.
+    - `"dynamic-directive-arguments"` ... [dynamic directive arguments](https://vuejs.org/guide/essentials/template-syntax.html#dynamic-arguments).
+    - `"v-slot"` ... [v-slot](https://vuejs.org/api/built-in-directives.html#v-slot) directive.
   - Vue.js 2.5.0+
     - `"slot-scope-attribute"` ... [slot-scope](https://v2.vuejs.org/v2/api/#slot-scope-deprecated) attributes.
 
@@ -99,11 +107,13 @@ The `"ignores"` option accepts an array of the following strings.
 
 ## :books: Further Reading
 
-- [API - v-memo](https://v3.vuejs.org/api/directives.html#v-memo)
+- [API - defineOptions()](https://vuejs.org/api/sfc-script-setup.html#defineoptions)
+- [API - defineSlots()](https://vuejs.org/api/sfc-script-setup.html#defineslots)
+- [API - v-memo](https://vuejs.org/api/built-in-directives.html#v-memo)
 - [API - v-is](https://v3.vuejs.org/api/directives.html#v-is)
 - [API - v-is (Old)](https://github.com/vuejs/docs-next/blob/008613756c3d781128d96b64a2d27f7598f8f548/src/api/directives.md#v-is)
-- [Guide - Dynamic Arguments](https://v3.vuejs.org/guide/template-syntax.html#dynamic-arguments)
-- [API - v-slot](https://v3.vuejs.org/api/directives.html#v-slot)
+- [Guide - Dynamic Arguments](https://vuejs.org/guide/essentials/template-syntax.html#dynamic-arguments)
+- [API - v-slot](https://vuejs.org/api/built-in-directives.html#v-slot)
 - [API (for v2) - slot-scope](https://v2.vuejs.org/v2/api/#slot-scope-deprecated)
 - [Vue RFCs - 0001-new-slot-syntax]
 - [Vue RFCs - 0002-slot-syntax-shorthand]
diff --git a/docs/rules/no-unused-components.md b/docs/rules/no-unused-components.md
index 6f70e9291..8bc27abcc 100644
--- a/docs/rules/no-unused-components.md
+++ b/docs/rules/no-unused-components.md
@@ -5,11 +5,12 @@ title: vue/no-unused-components
 description: disallow registering components that are not used inside templates
 since: v7.0.0
 ---
+
 # vue/no-unused-components
 
 > disallow registering components that are not used inside templates
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 ## :book: Rule Details
 
@@ -31,19 +32,19 @@ This rule reports components that haven't been used in the template.
 </template>
 
 <script>
-  import TheButton from 'components/TheButton.vue'
-  import TheModal from 'components/TheModal.vue'
-  import TheInput from 'components/TheInput.vue'
-  import TheDropdown from 'components/TheDropdown.vue'
-
-  export default {
-    components: {
-      TheButton,
-      TheModal,
-      TheInput,
-      TheDropdown,
-    }
+import TheButton from 'components/TheButton.vue'
+import TheModal from 'components/TheModal.vue'
+import TheInput from 'components/TheInput.vue'
+import TheDropdown from 'components/TheDropdown.vue'
+
+export default {
+  components: {
+    TheButton,
+    TheModal,
+    TheInput,
+    TheDropdown,
   }
+}
 </script>
 ```
 
@@ -61,15 +62,15 @@ This rule reports components that haven't been used in the template.
 </template>
 
 <script>
-  import TheButton from 'components/TheButton.vue'
-  import TheModal from 'components/TheModal.vue'
-
-  export default {
-    components: {
-      TheButton, // Unused component
-      'the-modal': TheModal // Unused component
-    }
+import TheButton from 'components/TheButton.vue'
+import TheModal from 'components/TheModal.vue'
+
+export default {
+  components: {
+    TheButton, // Unused component
+    'the-modal': TheModal // Unused component
   }
+}
 </script>
 ```
 
@@ -108,17 +109,17 @@ Components registered under `PascalCase` or `camelCase` names have may be called
 </template>
 
 <script>
-  import TheButton from 'components/TheButton.vue'
-  import TheSelect from 'components/TheSelect.vue'
-  import TheInput from 'components/TheInput.vue'
-
-  export default {
-    components: {
-      TheButton,
-      TheSelect,
-      TheInput,
-    },
-  }
+import TheButton from 'components/TheButton.vue'
+import TheSelect from 'components/TheSelect.vue'
+import TheInput from 'components/TheInput.vue'
+
+export default {
+  components: {
+    TheButton,
+    TheSelect,
+    TheInput,
+  },
+}
 </script>
 ```
 
@@ -136,21 +137,20 @@ Components registered under `PascalCase` or `camelCase` names have may be called
 </template>
 
 <script>
-  import TheButton from 'components/TheButton.vue'
-  import TheSelect from 'components/TheSelect.vue'
-  import TheInput from 'components/TheInput.vue'
-
-  export default {
-    components: {
-      TheButton, // <- not used
-      TheSelect, // <- not used
-      TheInput, // <- not used
-    },
-    computed: {
-      computedComponent() {
-      }
-    }
+import TheButton from 'components/TheButton.vue'
+import TheSelect from 'components/TheSelect.vue'
+import TheInput from 'components/TheInput.vue'
+
+export default {
+  components: {
+    TheButton, // <- not used
+    TheSelect, // <- not used
+    TheInput, // <- not used
+  },
+  computed: {
+    computedComponent() {}
   }
+}
 </script>
 ```
 
diff --git a/docs/rules/no-unused-emit-declarations.md b/docs/rules/no-unused-emit-declarations.md
new file mode 100644
index 000000000..54abc81d1
--- /dev/null
+++ b/docs/rules/no-unused-emit-declarations.md
@@ -0,0 +1,63 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-unused-emit-declarations
+description: disallow unused emit declarations
+since: v9.19.0
+---
+
+# vue/no-unused-emit-declarations
+
+> disallow unused emit declarations
+
+## :book: Rule Details
+
+This rule is aimed at eliminating unused emit declarations.
+
+<eslint-code-block :rules="{'vue/no-unused-emit-declarations': ['error']}">
+
+```vue
+<!-- ✗ BAD -->
+<script>
+export default {
+  emits: ['foo'],
+}
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/no-unused-emit-declarations': ['error']}">
+
+```vue
+<!-- ✓ GOOD -->
+<script>
+export default {
+  emits: ['foo'],
+  methods: {
+    foo() {
+      this.$emit('foo')
+    },
+  },
+}
+</script>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## :couple: Related Rules
+
+- [vue/require-explicit-emits](./require-explicit-emits.md)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.19.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-unused-emit-declarations.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-unused-emit-declarations.js)
diff --git a/docs/rules/no-unused-properties.md b/docs/rules/no-unused-properties.md
index da8fa7d87..e0e14416a 100644
--- a/docs/rules/no-unused-properties.md
+++ b/docs/rules/no-unused-properties.md
@@ -5,6 +5,7 @@ title: vue/no-unused-properties
 description: disallow unused properties
 since: v7.0.0
 ---
+
 # vue/no-unused-properties
 
 > disallow unused properties
@@ -14,7 +15,7 @@ since: v7.0.0
 This rule is aimed at eliminating unused properties.
 
 ::: warning Note
-This rule cannot be checked for use in other components (e.g. `mixins`, Property access via `$refs`) and use in places where the scope cannot be determined.
+This rule cannot check for use of properties by other components (e.g. `mixins`, property access via `$refs`) and use in places where the scope cannot be determined. Some access to properties might be implied, for example accessing data or computed via a variable such as `this[varName]`. In this case, the default is to assume all properties, methods, etc. are 'used'. See the `unreferencedOptions` for a more strict interpretation of 'use' in these cases.
 :::
 
 <eslint-code-block :rules="{'vue/no-unused-properties': ['error']}">
@@ -25,9 +26,9 @@ This rule cannot be checked for use in other components (e.g. `mixins`, Property
   <div>{{ count }}</div>
 </template>
 <script>
-  export default {
-    props: ['count']
-  }
+export default {
+  props: ['count']
+}
 </script>
 ```
 
@@ -41,9 +42,9 @@ This rule cannot be checked for use in other components (e.g. `mixins`, Property
   <div>{{ cnt }}</div>
 </template>
 <script>
-  export default {
-    props: ['count']
-  }
+export default {
+  props: ['count']
+}
 </script>
 ```
 
@@ -56,7 +57,8 @@ This rule cannot be checked for use in other components (e.g. `mixins`, Property
   "vue/no-unused-properties": ["error", {
     "groups": ["props"],
     "deepData": false,
-    "ignorePublicMembers": false
+    "ignorePublicMembers": false,
+    "unreferencedOptions": []
   }]
 }
 ```
@@ -69,6 +71,7 @@ This rule cannot be checked for use in other components (e.g. `mixins`, Property
   - `"setup"`
 - `deepData` (`boolean`) If `true`, the object of the property defined in `data` will be searched deeply. Default is `false`. Include `"data"` in `groups` to use this option.
 - `ignorePublicMembers` (`boolean`) If `true`, members marked with a [JSDoc `/** @public */` tag](https://jsdoc.app/tags-public.html) will be ignored. Default is `false`.
+- `unreferencedOptions` (`string[]`) Array of access methods that should be interpreted as leaving properties unreferenced. Currently, two such methods are available: `unknownMemberAsUnreferenced`, and `returnAsUnreferenced`. See examples below.
 
 ### `"groups": ["props", "data"]`
 
@@ -77,16 +80,16 @@ This rule cannot be checked for use in other components (e.g. `mixins`, Property
 ```vue
 <!-- ✓ GOOD -->
 <script>
-  export default {
-    data() {
-      return {
-        count: null
-      }
-    },
-    created() {
-      this.count = 2
+export default {
+  data() {
+    return {
+      count: null
     }
+  },
+  created() {
+    this.count = 2
   }
+}
 </script>
 ```
 
@@ -97,16 +100,16 @@ This rule cannot be checked for use in other components (e.g. `mixins`, Property
 ```vue
 <!-- ✗ BAD (`count` data not used) -->
 <script>
-  export default {
-    data() {
-      return {
-        count: null
-      }
-    },
-    created() {
-      this.cnt = 2
+export default {
+  data() {
+    return {
+      count: null
     }
+  },
+  created() {
+    this.cnt = 2
   }
+}
 </script>
 ```
 
@@ -148,18 +151,18 @@ This rule cannot be checked for use in other components (e.g. `mixins`, Property
   <p>{{ reversedMessage }}</p>
 </template>
 <script>
-  export default {
-    data() {
-      return {
-        message: 'Hello'
-      }
-    },
-    computed: {
-      reversedMessage() {
-        return this.message.split('').reverse().join('')
-      }
+export default {
+  data() {
+    return {
+      message: 'Hello'
+    }
+  },
+  computed: {
+    reversedMessage() {
+      return this.message.split('').reverse().join('')
     }
   }
+}
 </script>
 ```
 
@@ -173,18 +176,18 @@ This rule cannot be checked for use in other components (e.g. `mixins`, Property
   <p>{{ message }}</p>
 </template>
 <script>
-  export default {
-    data() {
-      return {
-        message: 'Hello'
-      }
-    },
-    computed: {
-      reversedMessage() {
-        return this.message.split('').reverse().join('')
-      }
+export default {
+  data() {
+    return {
+      message: 'Hello'
+    }
+  },
+  computed: {
+    reversedMessage() {
+      return this.message.split('').reverse().join('')
     }
   }
+}
 </script>
 ```
 
@@ -200,19 +203,80 @@ This rule cannot be checked for use in other components (e.g. `mixins`, Property
   <button @click="usedInTemplate()" />
 </template>
 <script>
-  export default {
-    methods: {
-      /* ✓ GOOD */
-      usedInTemplate() {},
-      
-      /* ✓ GOOD */
-      /** @public */
-      publicMethod() {},
-      
-      /* ✗ BAD */
-      unusedMethod() {}
+export default {
+  methods: {
+    /* ✓ GOOD */
+    usedInTemplate() {},
+
+    /* ✓ GOOD */
+    /** @public */
+    publicMethod() {},
+
+    /* ✗ BAD */
+    unusedMethod() {}
+  }
+}
+</script>
+```
+
+</eslint-code-block>
+
+### `{ "groups": ["computed"], "unreferencedOptions": ["unknownMemberAsUnreferenced"] }`
+
+<eslint-code-block :rules="{'vue/no-unused-properties': ['error', {groups: ['computed'], unreferencedOptions: ['unknownMemberAsUnreferenced']}]}">
+
+```vue
+<template></template>
+<script>
+export default {
+  computed: {
+    one() {
+      return 1
+    },
+    two() {
+      return 2
     }
+  },
+  methods: {
+    handler() {
+      /* ✓ GOOD - explicit access to computed */
+      const a = this.one
+      const i = 'two'
+      /* ✗ BAD - unknown access via a variable, two will be reported as unreferenced */
+      return this[i]
+    },
+  }
+}
+</script>
+```
+
+</eslint-code-block>
+
+### `{ "groups": ["computed"], "unreferencedOptions": ["returnAsUnreferenced"] }`
+
+<eslint-code-block :rules="{'vue/no-unused-properties': ['error', {groups: ['computed'], unreferencedOptions: ['returnAsUnreferenced']}]}">
+
+```vue
+<template></template>
+<script>
+export default {
+  computed: {
+    one() {
+      return 1
+    },
+    two() {
+      return 2
+    }
+  },
+  methods: {
+    handler() {
+      /* ✓ GOOD - explicit access to computed */
+      const a = this.one
+      /* ✗ BAD - any property could be accessed by returning `this`, but two will still be reported as unreferenced */
+      return this
+    },
   }
+}
 </script>
 ```
 
diff --git a/docs/rules/no-unused-refs.md b/docs/rules/no-unused-refs.md
index 7abf43e28..06383d93e 100644
--- a/docs/rules/no-unused-refs.md
+++ b/docs/rules/no-unused-refs.md
@@ -5,6 +5,7 @@ title: vue/no-unused-refs
 description: disallow unused refs
 since: v7.9.0
 ---
+
 # vue/no-unused-refs
 
 > disallow unused refs
diff --git a/docs/rules/no-unused-vars.md b/docs/rules/no-unused-vars.md
index be0b1fcc1..eedfc7250 100644
--- a/docs/rules/no-unused-vars.md
+++ b/docs/rules/no-unused-vars.md
@@ -5,11 +5,12 @@ title: vue/no-unused-vars
 description: disallow unused variable definitions of v-for directives or scope attributes
 since: v3.14.0
 ---
+
 # vue/no-unused-vars
 
 > disallow unused variable definitions of v-for directives or scope attributes
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 - :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
 
 ## :book: Rule Details
diff --git a/docs/rules/no-use-computed-property-like-method.md b/docs/rules/no-use-computed-property-like-method.md
index 6e267697c..3dc4dbc54 100644
--- a/docs/rules/no-use-computed-property-like-method.md
+++ b/docs/rules/no-use-computed-property-like-method.md
@@ -5,11 +5,12 @@ title: vue/no-use-computed-property-like-method
 description: disallow use computed property like method
 since: v7.15.0
 ---
+
 # vue/no-use-computed-property-like-method
 
 > disallow use computed property like method
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 ## :book: Rule Details
 
diff --git a/docs/rules/no-use-v-else-with-v-for.md b/docs/rules/no-use-v-else-with-v-for.md
new file mode 100644
index 000000000..203775ad8
--- /dev/null
+++ b/docs/rules/no-use-v-else-with-v-for.md
@@ -0,0 +1,58 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-use-v-else-with-v-for
+description: disallow using `v-else-if`/`v-else` on the same element as `v-for`
+since: v9.16.0
+---
+
+# vue/no-use-v-else-with-v-for
+
+> disallow using `v-else-if`/`v-else` on the same element as `v-for`
+
+## :book: Rule Details
+
+This rule reports elements that have both `v-else-if`/`v-else` and `v-for` directives. That is valid in Vue (`v-else-if`/`v-else` will take precedence), but is confusing to read.
+
+<eslint-code-block :rules="{'vue/no-use-v-else-with-v-for': ['error']}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <div v-if="foo">foo</div>
+  <template v-else-if="bar">
+    <div v-for="x in xs">{{ x }}</div>
+  </template>
+  <template v-else>
+    <div v-for="x in xs">{{ x }}</div>
+  </template>
+
+  <!-- ✗ BAD -->
+  <div v-if="foo">foo</div>
+  <div v-else-if="bar" v-for="x in xs">{{ x }}</div>
+  <div v-else v-for="x in xs">{{ x }}</div>
+</template>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## :mute: When Not To Use It
+
+If you don't find using `v-else-if`/`v-else` together with `v-for` confusing to read, you can safely disable this rule.
+
+## :couple: Related Rules
+
+- [vue/no-use-v-if-with-v-for](./no-use-v-if-with-v-for.md)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.16.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-use-v-else-with-v-for.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-use-v-else-with-v-for.js)
diff --git a/docs/rules/no-use-v-if-with-v-for.md b/docs/rules/no-use-v-if-with-v-for.md
index 62656cd2e..faf1c62b2 100644
--- a/docs/rules/no-use-v-if-with-v-for.md
+++ b/docs/rules/no-use-v-if-with-v-for.md
@@ -2,14 +2,15 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/no-use-v-if-with-v-for
-description: disallow use v-if on the same element as v-for
+description: disallow using `v-if` on the same element as `v-for`
 since: v4.6.0
 ---
+
 # vue/no-use-v-if-with-v-for
 
-> disallow use v-if on the same element as v-for
+> disallow using `v-if` on the same element as `v-for`
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 ## :book: Rule Details
 
@@ -88,11 +89,15 @@ There are two common cases where this can be tempting:
 
 </eslint-code-block>
 
+## :couple: Related Rules
+
+- [vue/no-use-v-else-with-v-for](./no-use-v-else-with-v-for.md)
+
 ## :books: Further Reading
 
 - [Style guide - Avoid v-if with v-for](https://vuejs.org/style-guide/rules-essential.html#avoid-v-if-with-v-for)
-- [Guide - Conditional Rendering / v-if with v-for](https://v3.vuejs.org/guide/conditional.html#v-if-with-v-for)
-- [Guide - List Rendering / v-for with v-if](https://v3.vuejs.org/guide/list.html#v-for-with-v-if)
+- [Guide - Conditional Rendering / v-if with v-for](https://vuejs.org/guide/essentials/conditional.html#v-if-with-v-for)
+- [Guide - List Rendering / v-for with v-if](https://vuejs.org/guide/essentials/list.html#v-for-with-v-if)
 
 ## :rocket: Version
 
diff --git a/docs/rules/no-useless-concat.md b/docs/rules/no-useless-concat.md
index 9229de0a5..bd74f475d 100644
--- a/docs/rules/no-useless-concat.md
+++ b/docs/rules/no-useless-concat.md
@@ -2,12 +2,13 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/no-useless-concat
-description: disallow unnecessary concatenation of literals or template literals in `<template>`
+description: Disallow unnecessary concatenation of literals or template literals in `<template>`
 since: v7.0.0
 ---
+
 # vue/no-useless-concat
 
-> disallow unnecessary concatenation of literals or template literals in `<template>`
+> Disallow unnecessary concatenation of literals or template literals in `<template>`
 
 This rule is the same rule as core [no-useless-concat] rule but it applies to the expressions in `<template>`.
 
@@ -26,4 +27,4 @@ This rule was introduced in eslint-plugin-vue v7.0.0
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-useless-concat.js)
 - [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-useless-concat.js)
 
-<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/rules/no-useless-concat)</sup>
+<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/latest/rules/no-useless-concat)</sup>
diff --git a/docs/rules/no-useless-mustaches.md b/docs/rules/no-useless-mustaches.md
index 205371a86..4bfb714f2 100644
--- a/docs/rules/no-useless-mustaches.md
+++ b/docs/rules/no-useless-mustaches.md
@@ -5,15 +5,16 @@ title: vue/no-useless-mustaches
 description: disallow unnecessary mustache interpolations
 since: v7.0.0
 ---
+
 # vue/no-useless-mustaches
 
 > disallow unnecessary mustache interpolations
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
-This rule reports mustache interpolation with a string literal value.  
+This rule reports mustache interpolation with a string literal value.\
 The mustache interpolation with a string literal value can be changed to a static contents.
 
 <eslint-code-block fix :rules="{'vue/no-useless-mustaches': ['error']}">
diff --git a/docs/rules/no-useless-template-attributes.md b/docs/rules/no-useless-template-attributes.md
index b309897f7..d8eb20a98 100644
--- a/docs/rules/no-useless-template-attributes.md
+++ b/docs/rules/no-useless-template-attributes.md
@@ -5,11 +5,12 @@ 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>`
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 ## :book: Rule Details
 
diff --git a/docs/rules/no-useless-v-bind.md b/docs/rules/no-useless-v-bind.md
index 303f15871..f1bde1726 100644
--- a/docs/rules/no-useless-v-bind.md
+++ b/docs/rules/no-useless-v-bind.md
@@ -5,15 +5,16 @@ title: vue/no-useless-v-bind
 description: disallow unnecessary `v-bind` directives
 since: v7.0.0
 ---
+
 # vue/no-useless-v-bind
 
 > disallow unnecessary `v-bind` directives
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
-This rule reports `v-bind` with a string literal value.  
+This rule reports `v-bind` with a string literal value.\
 The `v-bind` with a string literal value can be changed to a static attribute definition.
 
 <eslint-code-block fix :rules="{'vue/no-useless-v-bind': ['error']}">
@@ -21,12 +22,12 @@ The `v-bind` with a string literal value can be changed to a static attribute de
 ```vue
 <template>
   <!-- ✓ GOOD -->
-  <div foo="bar"/>
-  <div :foo="bar"/>
+  <div foo="bar" />
+  <div :foo="bar" />
 
   <!-- ✗ BAD -->
-  <div v-bind:foo="'bar'"/>
-  <div :foo="'bar'"/>
+  <div v-bind:foo="'bar'" />
+  <div :foo="'bar'" />
 </template>
 ```
 
@@ -53,10 +54,10 @@ The `v-bind` with a string literal value can be changed to a static attribute de
 ```vue
 <template>
   <!-- ✓ GOOD -->
-  <div v-bind:foo="'bar'/* comment */"/>
+  <div v-bind:foo="'bar' /* comment */" />
 
   <!-- ✗ BAD -->
-  <div v-bind:foo="'bar'"/>
+  <div v-bind:foo="'bar'" />
 </template>
 ```
 
@@ -69,7 +70,7 @@ The `v-bind` with a string literal value can be changed to a static attribute de
 ```vue
 <template>
   <!-- ✓ GOOD -->
-  <div v-bind:foo="'bar\nbaz'"/>
+  <div v-bind:foo="'bar\nbaz'" />
 </template>
 ```
 
diff --git a/docs/rules/no-v-for-template-key-on-child.md b/docs/rules/no-v-for-template-key-on-child.md
index 559793cbb..4e6ddd0c3 100644
--- a/docs/rules/no-v-for-template-key-on-child.md
+++ b/docs/rules/no-v-for-template-key-on-child.md
@@ -5,17 +5,18 @@ title: vue/no-v-for-template-key-on-child
 description: disallow key of `<template v-for>` placed on child elements
 since: v7.0.0
 ---
+
 # vue/no-v-for-template-key-on-child
 
 > disallow key of `<template v-for>` placed on child elements
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
 
 ## :book: Rule Details
 
 This rule reports the key of the `<template v-for>` placed on the child elements.
 
-In Vue.js 3.x, with the support for fragments, the `<template v-for>` key can be placed on the `<template>` tag.  
+In Vue.js 3.x, with the support for fragments, the `<template v-for>` key can be placed on the `<template>` tag.
 
 See [Migration Guide - `key` attribute > With `<template v-for>`](https://v3-migration.vuejs.org/breaking-changes/key-attribute.html#with-template-v-for) for more details.
 
diff --git a/docs/rules/no-v-for-template-key.md b/docs/rules/no-v-for-template-key.md
index 01e09734a..5dbe15471 100644
--- a/docs/rules/no-v-for-template-key.md
+++ b/docs/rules/no-v-for-template-key.md
@@ -5,11 +5,13 @@ title: vue/no-v-for-template-key
 description: disallow `key` attribute on `<template v-for>`
 since: v7.0.0
 ---
+
 # vue/no-v-for-template-key
 
 > disallow `key` attribute on `<template v-for>`
 
-- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+- :no_entry_sign: This rule was **deprecated**.
+- :gear: This rule is included in all of `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 ## :book: Rule Details
 
@@ -58,7 +60,7 @@ Nothing.
 
 ## :books: Further Reading
 
-- [API - Special Attributes - key](https://v3.vuejs.org/api/special-attributes.html#key)
+- [API - Special Attributes - key](https://vuejs.org/api/built-in-special-attributes.html#key)
 - [API (for v2) - Special Attributes - key](https://v2.vuejs.org/v2/api/#key)
 
 ## :rocket: Version
diff --git a/docs/rules/no-v-html.md b/docs/rules/no-v-html.md
index cb390eca1..507eaf9b4 100644
--- a/docs/rules/no-v-html.md
+++ b/docs/rules/no-v-html.md
@@ -5,11 +5,12 @@ title: vue/no-v-html
 description: disallow use of v-html to prevent XSS attack
 since: v4.7.0
 ---
+
 # vue/no-v-html
 
 > disallow use of v-html to prevent XSS attack
 
-- :gear: This rule is included in `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 ## :book: Rule Details
 
@@ -31,15 +32,41 @@ This rule reports all uses of `v-html` directive in order to reduce the risk of
 
 ## :wrench: Options
 
-Nothing.
+```json
+{
+    "vue/no-v-html": ["error", {
+        "ignorePattern": "^html"
+    }]
+}
+```
+
+- `ignorePattern` ... disables reporting when the `v-html` directive references a variable matching this pattern. By default, all `v-html` uses are forbidden.
+
+### `{ "ignorePattern": "^html" }`
+
+<eslint-code-block :rules="{'vue/no-v-html': ['error', { 'ignorePattern': '^html' }]}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <h2>{{ userName }}</h2>
+  <span v-html="htmlUserLink" />
+
+  <!-- ✗ BAD -->
+  <span v-html="userName" />
+</template>
+```
+
+</eslint-code-block>
 
 ## :mute: When Not To Use It
 
 If you are certain the content passed to `v-html` is sanitized HTML you can disable this rule.
 
-## :books: Further Reading
+## :couple: Related Rules
 
-- [XSS in Vue.js](https://blog.sqreen.io/xss-in-vue-js/)
+- [vue/no-v-text](./no-v-text.md)
+- [vue/no-v-text-v-html-on-component](./no-v-text-v-html-on-component.md)
 
 ## :rocket: Version
 
diff --git a/docs/rules/no-v-model-argument.md b/docs/rules/no-v-model-argument.md
index d020bbbab..6856c5e6c 100644
--- a/docs/rules/no-v-model-argument.md
+++ b/docs/rules/no-v-model-argument.md
@@ -5,11 +5,13 @@ title: vue/no-v-model-argument
 description: disallow adding an argument to `v-model` used in custom component
 since: v7.0.0
 ---
+
 # vue/no-v-model-argument
 
 > disallow adding an argument to `v-model` used in custom component
 
-- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+- :no_entry_sign: This rule was **deprecated**.
+- :gear: This rule is included in all of `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 This rule checks whether `v-model` used on custom component do not have an argument.
 
@@ -26,7 +28,6 @@ This rule reports `v-model` directives in the following cases:
   <!-- ✓ GOOD -->
   <MyComponent v-model="foo" />
 
-
   <!-- ✗ BAD -->
   <MyComponent v-model:aaa="foo" />
 </template>
diff --git a/docs/rules/no-v-text-v-html-on-component.md b/docs/rules/no-v-text-v-html-on-component.md
index 420eefda6..aa1aceff6 100644
--- a/docs/rules/no-v-text-v-html-on-component.md
+++ b/docs/rules/no-v-text-v-html-on-component.md
@@ -5,11 +5,12 @@ title: vue/no-v-text-v-html-on-component
 description: disallow v-text / v-html on component
 since: v8.4.0
 ---
+
 # vue/no-v-text-v-html-on-component
 
 > disallow v-text / v-html on component
 
-- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/vue3-essential"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/recommended"` and `"plugin:vue/vue3-recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-recommended"`, `*.configs["flat/vue2-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
 
 ## :book: Rule Details
 
@@ -24,11 +25,15 @@ If you use v-text / v-html on a component, it will overwrite the component's con
   <!-- ✓ GOOD -->
   <div v-text="content"></div>
   <div v-html="html"></div>
-  <MyComponent>{{content}}</MyComponent>
+  <svg><g v-text="content" /></svg>
+  <math><mi v-text="content" /></math>
+  <MyComponent>{{ content }}</MyComponent>
 
   <!-- ✗ BAD -->
   <MyComponent v-text="content"></MyComponent>
   <MyComponent v-html="html"></MyComponent>
+  <g v-text="content" />
+  <mi v-text="content" />
 </template>
 ```
 
@@ -36,7 +41,53 @@ If you use v-text / v-html on a component, it will overwrite the component's con
 
 ## :wrench: Options
 
-Nothing.
+```json
+{
+  "vue/no-v-text-v-html-on-component": ["error", {
+    "allow": ["router-link", "nuxt-link"],
+    "ignoreElementNamespaces": false
+  }]
+}
+```
+
+- `allow` (`string[]`) ... Specify a list of custom components for which the rule should not apply.
+- `ignoreElementNamespaces` (`boolean`) ... If `true`, always treat SVG and MathML tag names as HTML elements, even if they are not used inside a SVG/MathML root element. Default is `false`.
+
+### `{ "allow": ["router-link", "nuxt-link"] }`
+
+<eslint-code-block :rules="{'vue/no-v-text-v-html-on-component': ['error', { allow: ['router-link', 'nuxt-link'] }]}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <router-link v-html="content" />
+  <NuxtLink v-html="content" />
+
+  <!-- ✗ BAD -->
+  <MyComponent v-html="content" />
+</template>
+```
+
+</eslint-code-block>
+
+### `{ "ignoreElementNamespaces": true }`
+
+<eslint-code-block :rules="{'vue/no-v-text-v-html-on-component': ['error', { ignoreElementNamespaces: true }]}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <g v-text="content" /> <!-- SVG element not inside of <svg> -->
+  <mi v-text="content" /> <!-- MathML element not inside of <math> -->
+</template>
+```
+
+</eslint-code-block>
+
+## :couple: Related Rules
+
+- [vue/no-v-text](./no-v-text.md)
+- [vue/no-v-html](./no-v-html.md)
 
 ## :rocket: Version
 
diff --git a/docs/rules/no-v-text.md b/docs/rules/no-v-text.md
index 84cece3a4..3fcd6811b 100644
--- a/docs/rules/no-v-text.md
+++ b/docs/rules/no-v-text.md
@@ -5,6 +5,7 @@ title: vue/no-v-text
 description: disallow use of v-text
 since: v7.17.0
 ---
+
 # vue/no-v-text
 
 > disallow use of v-text
@@ -31,6 +32,11 @@ This rule reports all uses of `v-text` directive.
 
 Nothing.
 
+## :couple: Related Rules
+
+- [vue/no-v-html](./no-v-html.md)
+- [vue/no-v-text-v-html-on-component](./no-v-text-v-html-on-component.md)
+
 ## :rocket: Version
 
 This rule was introduced in eslint-plugin-vue v7.17.0
diff --git a/docs/rules/no-watch-after-await.md b/docs/rules/no-watch-after-await.md
index a5c2a5e9f..b0cf5345d 100644
--- a/docs/rules/no-watch-after-await.md
+++ b/docs/rules/no-watch-after-await.md
@@ -5,15 +5,16 @@ title: vue/no-watch-after-await
 description: disallow asynchronously registered `watch`
 since: v7.0.0
 ---
+
 # vue/no-watch-after-await
 
 > disallow asynchronously registered `watch`
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
 
 ## :book: Rule Details
 
-This rule reports the `watch()` after `await` expression.  
+This rule reports the `watch()` after `await` expression.\
 In `setup()` function, `watch()` should be registered synchronously.
 
 <eslint-code-block :rules="{'vue/no-watch-after-await': ['error']}">
diff --git a/docs/rules/object-curly-newline.md b/docs/rules/object-curly-newline.md
index d09c3e28f..1b9d99cfe 100644
--- a/docs/rules/object-curly-newline.md
+++ b/docs/rules/object-curly-newline.md
@@ -2,21 +2,29 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/object-curly-newline
-description: enforce consistent line breaks after opening and before closing braces in `<template>`
+description: Enforce consistent line breaks after opening and before closing braces in `<template>`
 since: v7.0.0
 ---
+
 # vue/object-curly-newline
 
-> enforce consistent line breaks after opening and before closing braces in `<template>`
+> Enforce consistent line breaks after opening and before closing braces in `<template>`
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+This rule is the same rule as [@stylistic/object-curly-newline] rule but it applies to the expressions in `<template>`.
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+This rule extends the rule that [@stylistic/eslint-plugin] has, but if [@stylistic/eslint-plugin] is not installed, this rule extracts and extends the same rule from ESLint core.
+However, if neither is found, the rule cannot be used.
 
-This rule is the same rule as core [object-curly-newline] rule but it applies to the expressions in `<template>`.
+[@stylistic/eslint-plugin]: https://eslint.style/packages/default
 
 ## :books: Further Reading
 
+- [@stylistic/object-curly-newline]
 - [object-curly-newline]
 
+[@stylistic/object-curly-newline]: https://eslint.style/rules/object-curly-newline
 [object-curly-newline]: https://eslint.org/docs/rules/object-curly-newline
 
 ## :rocket: Version
@@ -28,4 +36,4 @@ This rule was introduced in eslint-plugin-vue v7.0.0
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/object-curly-newline.js)
 - [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/object-curly-newline.js)
 
-<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/rules/object-curly-newline)</sup>
+<sup>Taken with ❤️ [from ESLint Stylistic](https://eslint.style/rules/object-curly-newline)</sup>
diff --git a/docs/rules/object-curly-spacing.md b/docs/rules/object-curly-spacing.md
index 12f88793b..c3c744987 100644
--- a/docs/rules/object-curly-spacing.md
+++ b/docs/rules/object-curly-spacing.md
@@ -2,21 +2,29 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/object-curly-spacing
-description: enforce consistent spacing inside braces in `<template>`
+description: Enforce consistent spacing inside braces in `<template>`
 since: v5.2.0
 ---
+
 # vue/object-curly-spacing
 
-> enforce consistent spacing inside braces in `<template>`
+> Enforce consistent spacing inside braces in `<template>`
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+This rule is the same rule as [@stylistic/object-curly-spacing] rule but it applies to the expressions in `<template>`.
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+This rule extends the rule that [@stylistic/eslint-plugin] has, but if [@stylistic/eslint-plugin] is not installed, this rule extracts and extends the same rule from ESLint core.
+However, if neither is found, the rule cannot be used.
 
-This rule is the same rule as core [object-curly-spacing] rule but it applies to the expressions in `<template>`.
+[@stylistic/eslint-plugin]: https://eslint.style/packages/default
 
 ## :books: Further Reading
 
+- [@stylistic/object-curly-spacing]
 - [object-curly-spacing]
 
+[@stylistic/object-curly-spacing]: https://eslint.style/rules/object-curly-spacing
 [object-curly-spacing]: https://eslint.org/docs/rules/object-curly-spacing
 
 ## :rocket: Version
@@ -28,4 +36,4 @@ This rule was introduced in eslint-plugin-vue v5.2.0
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/object-curly-spacing.js)
 - [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/object-curly-spacing.js)
 
-<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/rules/object-curly-spacing)</sup>
+<sup>Taken with ❤️ [from ESLint Stylistic](https://eslint.style/rules/object-curly-spacing)</sup>
diff --git a/docs/rules/object-property-newline.md b/docs/rules/object-property-newline.md
index be43ec66e..8a9cbf6ea 100644
--- a/docs/rules/object-property-newline.md
+++ b/docs/rules/object-property-newline.md
@@ -2,21 +2,29 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/object-property-newline
-description: enforce placing object properties on separate lines in `<template>`
+description: Enforce placing object properties on separate lines in `<template>`
 since: v7.0.0
 ---
+
 # vue/object-property-newline
 
-> enforce placing object properties on separate lines in `<template>`
+> Enforce placing object properties on separate lines in `<template>`
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+This rule is the same rule as [@stylistic/object-property-newline] rule but it applies to the expressions in `<template>`.
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+This rule extends the rule that [@stylistic/eslint-plugin] has, but if [@stylistic/eslint-plugin] is not installed, this rule extracts and extends the same rule from ESLint core.
+However, if neither is found, the rule cannot be used.
 
-This rule is the same rule as core [object-property-newline] rule but it applies to the expressions in `<template>`.
+[@stylistic/eslint-plugin]: https://eslint.style/packages/default
 
 ## :books: Further Reading
 
+- [@stylistic/object-property-newline]
 - [object-property-newline]
 
+[@stylistic/object-property-newline]: https://eslint.style/rules/object-property-newline
 [object-property-newline]: https://eslint.org/docs/rules/object-property-newline
 
 ## :rocket: Version
@@ -28,4 +36,4 @@ This rule was introduced in eslint-plugin-vue v7.0.0
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/object-property-newline.js)
 - [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/object-property-newline.js)
 
-<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/rules/object-property-newline)</sup>
+<sup>Taken with ❤️ [from ESLint Stylistic](https://eslint.style/rules/object-property-newline)</sup>
diff --git a/docs/rules/object-shorthand.md b/docs/rules/object-shorthand.md
index 7c7b4928f..8b4365b19 100644
--- a/docs/rules/object-shorthand.md
+++ b/docs/rules/object-shorthand.md
@@ -2,14 +2,15 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/object-shorthand
-description: require or disallow method and property shorthand syntax for object literals in `<template>`
+description: Require or disallow method and property shorthand syntax for object literals in `<template>`
 since: v8.4.0
 ---
+
 # vue/object-shorthand
 
-> require or disallow method and property shorthand syntax for object literals in `<template>`
+> Require or disallow method and property shorthand syntax for object literals in `<template>`
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 This rule is the same rule as core [object-shorthand] rule but it applies to the expressions in `<template>`.
 
@@ -28,4 +29,4 @@ This rule was introduced in eslint-plugin-vue v8.4.0
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/object-shorthand.js)
 - [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/object-shorthand.js)
 
-<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/rules/object-shorthand)</sup>
+<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/latest/rules/object-shorthand)</sup>
diff --git a/docs/rules/one-component-per-file.md b/docs/rules/one-component-per-file.md
index 5e4fed2c4..8d31a0875 100644
--- a/docs/rules/one-component-per-file.md
+++ b/docs/rules/one-component-per-file.md
@@ -5,11 +5,12 @@ title: vue/one-component-per-file
 description: enforce that each component should be in its own file
 since: v7.0.0
 ---
+
 # vue/one-component-per-file
 
 > enforce that each component should be in its own file
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 ## :book: Rule Details
 
@@ -48,6 +49,10 @@ export default {
 
 Nothing.
 
+## :couple: Related Rules
+
+- [vue/require-default-export](./require-default-export.md)
+
 ## :books: Further Reading
 
 - [Style guide - Component files](https://vuejs.org/style-guide/rules-strongly-recommended.html#component-files)
diff --git a/docs/rules/operator-linebreak.md b/docs/rules/operator-linebreak.md
index 6f7172a78..7d27b1438 100644
--- a/docs/rules/operator-linebreak.md
+++ b/docs/rules/operator-linebreak.md
@@ -2,21 +2,29 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/operator-linebreak
-description: enforce consistent linebreak style for operators in `<template>`
+description: Enforce consistent linebreak style for operators in `<template>`
 since: v7.0.0
 ---
+
 # vue/operator-linebreak
 
-> enforce consistent linebreak style for operators in `<template>`
+> Enforce consistent linebreak style for operators in `<template>`
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+This rule is the same rule as [@stylistic/operator-linebreak] rule but it applies to the expressions in `<template>`.
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+This rule extends the rule that [@stylistic/eslint-plugin] has, but if [@stylistic/eslint-plugin] is not installed, this rule extracts and extends the same rule from ESLint core.
+However, if neither is found, the rule cannot be used.
 
-This rule is the same rule as core [operator-linebreak] rule but it applies to the expressions in `<template>`.
+[@stylistic/eslint-plugin]: https://eslint.style/packages/default
 
 ## :books: Further Reading
 
+- [@stylistic/operator-linebreak]
 - [operator-linebreak]
 
+[@stylistic/operator-linebreak]: https://eslint.style/rules/operator-linebreak
 [operator-linebreak]: https://eslint.org/docs/rules/operator-linebreak
 
 ## :rocket: Version
@@ -28,4 +36,4 @@ This rule was introduced in eslint-plugin-vue v7.0.0
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/operator-linebreak.js)
 - [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/operator-linebreak.js)
 
-<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/rules/operator-linebreak)</sup>
+<sup>Taken with ❤️ [from ESLint Stylistic](https://eslint.style/rules/operator-linebreak)</sup>
diff --git a/docs/rules/order-in-components.md b/docs/rules/order-in-components.md
index f8274810e..29d3eda1c 100644
--- a/docs/rules/order-in-components.md
+++ b/docs/rules/order-in-components.md
@@ -5,12 +5,14 @@ title: vue/order-in-components
 description: enforce order of properties in components
 since: v3.2.0
 ---
+
 # vue/order-in-components
 
 > enforce order of properties in components
 
-- :gear: This rule is included in `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+- :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
 
 ## :book: Rule Details
 
@@ -27,7 +29,7 @@ export default {
   props: {
     propA: Number
   },
-  data () {
+  data() {
     return {
       msg: 'Welcome to Your Vue.js App'
     }
@@ -45,7 +47,7 @@ export default {
 /* ✗ BAD */
 export default {
   name: 'app',
-  data () {
+  data() {
     return {
       msg: 'Welcome to Your Vue.js App'
     }
@@ -86,6 +88,8 @@ export default {
       "model",
       ["props", "propsData"],
       "emits",
+      "slots",
+      "expose",
       "setup",
       "asyncData",
       "data",
@@ -105,7 +109,7 @@ export default {
 
 - `order` (`(string | string[])[]`) ... The order of properties. Elements are the property names or one of the following groups:
 
-  - `LIFECYCLE_HOOKS`: [Vue Lifecycle Events](https://v3.vuejs.org/guide/instance.html#lifecycle-diagram), in the order they are called
+  - `LIFECYCLE_HOOKS`: [Vue Lifecycle Events](https://vuejs.org/guide/essentials/lifecycle.html#lifecycle-diagram), in the order they are called
   - `ROUTER_GUARDS`: [Vue Router Navigation Guards](https://router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards), in the order they are called
 
   If an element is an array of strings, it means any of those can be placed there unordered. Default is above.
diff --git a/docs/rules/padding-line-between-blocks.md b/docs/rules/padding-line-between-blocks.md
index 636308956..645efeac7 100644
--- a/docs/rules/padding-line-between-blocks.md
+++ b/docs/rules/padding-line-between-blocks.md
@@ -5,15 +5,16 @@ title: vue/padding-line-between-blocks
 description: require or disallow padding lines between blocks
 since: v6.2.0
 ---
+
 # vue/padding-line-between-blocks
 
 > require or disallow padding lines between blocks
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
-This rule requires or disallows blank lines between the given 2 blocks. Properly blank lines help developers to understand the code.
+This rule requires or disallows blank lines between blocks. Properly placed blank lines help developers understand the code.
 
 <eslint-code-block fix :rules="{'vue/padding-line-between-blocks': ['error']}">
 
diff --git a/docs/rules/padding-line-between-tags.md b/docs/rules/padding-line-between-tags.md
new file mode 100644
index 000000000..e5b5c4b41
--- /dev/null
+++ b/docs/rules/padding-line-between-tags.md
@@ -0,0 +1,170 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/padding-line-between-tags
+description: require or disallow newlines between sibling tags in template
+since: v9.5.0
+---
+
+# vue/padding-line-between-tags
+
+> require or disallow newlines between sibling tags in template
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule requires or disallows newlines between sibling HTML tags.
+
+<eslint-code-block fix :rules="{'vue/padding-line-between-tags': ['error']}">
+
+```vue
+<template>
+  <div>
+    <!-- ✓ GOOD: -->
+    <div></div>
+
+    <div>
+    </div>
+    
+    <div />
+
+    <div />
+    <!-- ✗ BAD: -->
+    <div></div>
+    <div>
+    </div>
+    <div /><div />
+  </div>
+</template>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+```json
+{
+  "vue/padding-line-between-tags": ["error", [
+    { "blankLine": "always", "prev": "*", "next": "*" }
+  ]]
+}
+```
+
+This rule requires blank lines between each sibling HTML tag by default.
+
+A configuration is an object which has 3 properties; `blankLine`, `prev` and `next`. For example, `{ blankLine: "always", prev: "br", next: "div" }` means “one or more blank lines are required between a `br` tag and a `div` tag.” You can supply any number of configurations. If a tag pair matches multiple configurations, the last matched configuration will be used.
+
+- `blankLine` is one of the following:
+  - `always` requires one or more blank lines.
+  - `never` disallows blank lines.
+  - `consistent` requires or disallows a blank line based on the first sibling element.
+- `prev` any tag name without brackets.
+- `next` any tag name without brackets.
+
+### Disallow blank lines between all tags
+
+`{ blankLine: 'never', prev: '*', next: '*' }`
+
+<eslint-code-block fix :rules="{'vue/padding-line-between-tags': ['error', [
+  { blankLine: 'never', prev: '*', next: '*' }
+]]}">
+
+```vue
+<template>
+  <div>
+    <div></div>
+    <div>
+    </div>
+    <div />
+  </div>
+</template>
+```
+
+</eslint-code-block>
+
+### Require newlines after `<br>`
+
+`{ blankLine: 'always', prev: 'br', next: '*' }`
+
+<eslint-code-block fix :rules="{'vue/padding-line-between-tags': ['error', [
+  { blankLine: 'always', prev: 'br', next: '*' }
+]]}">
+
+```vue
+<template>
+  <div>
+    <ul>
+      <li>
+      </li>
+      <br />
+
+      <li>
+      </li>
+    </ul>
+  </div>
+</template>
+```
+
+</eslint-code-block>
+
+### Require newlines between `<br>` and `<img>`
+
+`{ blankLine: 'always', prev: 'br', next: 'img' }`
+
+<eslint-code-block fix :rules="{'vue/padding-line-between-tags': ['error', [
+  { blankLine: 'always', prev: 'br', next: 'img' }
+]]}">
+
+```vue
+<template>
+  <div>
+    <ul>
+      <li>
+      </li>
+      <br />
+
+      <img />
+      <li>
+      </li>
+    </ul>
+  </div>
+</template>
+```
+
+</eslint-code-block>
+
+### Require consistent newlines
+
+`{ blankLine: 'consistent', prev: '*', next: '*' }`
+
+<eslint-code-block fix :rules="{'vue/padding-line-between-tags': ['error', [
+  { blankLine: 'consistent', prev: '*', next: '*' }
+]]}">
+
+```vue
+<template>
+  <div>
+    <ul>
+      <li />
+      <li />
+      <li />
+    </ul>
+    
+    <div />
+    
+    <div />
+  </div>
+</template>
+```
+
+</eslint-code-block>
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.5.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/padding-line-between-tags.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/padding-line-between-tags.js)
diff --git a/docs/rules/padding-lines-in-component-definition.md b/docs/rules/padding-lines-in-component-definition.md
new file mode 100644
index 000000000..eef694e14
--- /dev/null
+++ b/docs/rules/padding-lines-in-component-definition.md
@@ -0,0 +1,168 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/padding-lines-in-component-definition
+description: require or disallow padding lines in component definition
+since: v9.9.0
+---
+
+# vue/padding-lines-in-component-definition
+
+> require or disallow padding lines in component definition
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule requires or disallows blank lines in the component definition. Properly blank lines help developers improve code readability and code style flexibility.
+
+<eslint-code-block fix :rules="{'vue/padding-lines-in-component-definition': ['error']}">
+
+```vue
+<script>
+/* ✗ BAD */
+export default {
+  props: {
+    modelValue: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      count: 0,
+    };
+  }
+}
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block fix :rules="{'vue/padding-lines-in-component-definition': ['error']}">
+
+```vue
+<script>
+/* ✓ GOOD */
+export default {
+  props: {
+    modelValue: {
+      type: String,
+      default: '',
+    },
+  },
+
+  data() {
+    return {
+      count: 0,
+    };
+  }
+}
+</script>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+```json
+{
+  "vue/padding-lines-in-component-definition": ["error", {
+    "betweenOptions": "always" | "never",
+
+    "withinOption": {
+      "props": {
+        "betweenItems": "always" | "never" | "ignore",
+        "withinEach": "always" | "never" | "ignore",
+      } | "always" | "never" | "ignore", // shortcut to set both
+
+      "data": {
+        "betweenItems": "always" | "never" | "ignore",
+        "withinEach": "always" | "never" | "ignore",
+      } | "always" | "never" | "ignore" // shortcut to set both
+
+      // ... all options
+    } | "always" | "never" | "ignore",
+
+    "groupSingleLineProperties": true | false
+  }]
+}
+```
+
+- `betweenOptions` ... Setting padding lines between options. default `always`
+- `withinOption` ... Setting padding lines within option
+  - `emits` ... Setting padding between lines between `emits` and `defineEmits`. default `always`
+  - `props` ... Setting padding between lines between `props` and `defineProps`. default `always`
+  - ...
+- `groupSingleLineProperties` ... Setting groupings of multiple consecutive single-line properties (e.g. `name`, `inheritAttrs`), default `true`
+
+### Group single-line properties
+
+<eslint-code-block fix :rules="{'vue/padding-lines-in-component-definition': ['error', { betweenOptions: 'always', withinOption: 'always', groupSingleLineProperties: true}]}">
+
+```vue
+<script>
+export default {
+  name: 'GroupSingleLineProperties',
+  inheritAttrs: false,
+
+  props: {
+    modelValue: {
+      type: String,
+      default: '',
+    },
+  },
+
+  data() {
+    return {
+      count: 0,
+    };
+  }
+}
+</script>
+```
+
+</eslint-code-block>
+
+### With custom options
+
+<eslint-code-block fix :rules="{'vue/padding-lines-in-component-definition': ['error', { betweenOptions: 'always', withinOption: { props: { betweenItems: 'always', withinEach: 'never' }, customOption: { betweenItems: 'always', withinEach: 'ignore' } }, groupSingleLineProperties: true}]}">
+
+```vue
+<script>
+export default {
+  props: {
+    modelValue: {
+      type: String,
+      default: '',
+    },
+
+    isActive: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  customOption: {
+    foo: () => {
+      return 'foo'
+    },
+
+    bar: () => {
+      return 'bar'
+    }
+  },
+}
+</script>
+```
+
+</eslint-code-block>
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.9.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/padding-lines-in-component-definition.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/padding-lines-in-component-definition.js)
diff --git a/docs/rules/prefer-define-options.md b/docs/rules/prefer-define-options.md
new file mode 100644
index 000000000..110c1426a
--- /dev/null
+++ b/docs/rules/prefer-define-options.md
@@ -0,0 +1,61 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/prefer-define-options
+description: enforce use of `defineOptions` instead of default export
+since: v9.13.0
+---
+
+# vue/prefer-define-options
+
+> enforce use of `defineOptions` instead of default export
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule aims to enforce use of `defineOptions` instead of default export in `<script setup>`.
+
+The [`defineOptions()`](https://vuejs.org/api/sfc-script-setup.html#defineoptions) macro was officially introduced in Vue 3.3.
+
+<eslint-code-block fix :rules="{'vue/prefer-define-options': ['error']}">
+
+```vue
+<script setup>
+/* ✓ GOOD */
+defineOptions({ name: 'Foo' })
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block fix :rules="{'vue/prefer-define-options': ['error']}">
+
+```vue
+<script>
+/* ✗ BAD */
+export default { name: 'Foo' }
+</script>
+<script setup>
+/* ... */
+</script>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## :books: Further Reading
+
+- [API - defineOptions()](https://vuejs.org/api/sfc-script-setup.html#defineoptions)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.13.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/prefer-define-options.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/prefer-define-options.js)
diff --git a/docs/rules/prefer-import-from-vue.md b/docs/rules/prefer-import-from-vue.md
index f1cab9f08..2da6700f9 100644
--- a/docs/rules/prefer-import-from-vue.md
+++ b/docs/rules/prefer-import-from-vue.md
@@ -5,12 +5,13 @@ title: vue/prefer-import-from-vue
 description: enforce import from 'vue' instead of import from '@vue/*'
 since: v8.5.0
 ---
+
 # vue/prefer-import-from-vue
 
-> enforce import from 'vue' instead of import from '@vue/*'
+> enforce import from 'vue' instead of import from '@vue/\*'
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
diff --git a/docs/rules/prefer-prop-type-boolean-first.md b/docs/rules/prefer-prop-type-boolean-first.md
index 1b652fafd..8282e32ba 100644
--- a/docs/rules/prefer-prop-type-boolean-first.md
+++ b/docs/rules/prefer-prop-type-boolean-first.md
@@ -5,6 +5,7 @@ title: vue/prefer-prop-type-boolean-first
 description: enforce `Boolean` comes first in component prop types
 since: v8.6.0
 ---
+
 # vue/prefer-prop-type-boolean-first
 
 > enforce `Boolean` comes first in component prop types
diff --git a/docs/rules/prefer-separate-static-class.md b/docs/rules/prefer-separate-static-class.md
index 22df25e19..610e3f2b8 100644
--- a/docs/rules/prefer-separate-static-class.md
+++ b/docs/rules/prefer-separate-static-class.md
@@ -5,11 +5,12 @@ title: vue/prefer-separate-static-class
 description: require static class names in template to be in a separate `class` attribute
 since: v8.2.0
 ---
+
 # vue/prefer-separate-static-class
 
 > require static class names in template to be in a separate `class` attribute
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
@@ -21,12 +22,12 @@ This rule reports static class names in dynamic class attributes.
 <template>
   <!-- ✗ BAD -->
   <div :class="'static-class'" />
-  <div :class="{'static-class': true, 'dynamic-class': foo}" />
+  <div :class="{ 'static-class': true, 'dynamic-class': foo }" />
   <div :class="['static-class', dynamicClass]" />
 
   <!-- ✓ GOOD -->
   <div class="static-class" />
-  <div class="static-class" :class="{'dynamic-class': foo}" />
+  <div class="static-class" :class="{ 'dynamic-class': foo }" />
   <div class="static-class" :class="[dynamicClass]" />
 </template>
 ```
diff --git a/docs/rules/prefer-template.md b/docs/rules/prefer-template.md
index aa33a3f32..ae4d3fc29 100644
--- a/docs/rules/prefer-template.md
+++ b/docs/rules/prefer-template.md
@@ -2,14 +2,15 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/prefer-template
-description: require template literals instead of string concatenation in `<template>`
+description: Require template literals instead of string concatenation in `<template>`
 since: v7.0.0
 ---
+
 # vue/prefer-template
 
-> require template literals instead of string concatenation in `<template>`
+> Require template literals instead of string concatenation in `<template>`
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 This rule is the same rule as core [prefer-template] rule but it applies to the expressions in `<template>`.
 
@@ -28,4 +29,4 @@ This rule was introduced in eslint-plugin-vue v7.0.0
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/prefer-template.js)
 - [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/prefer-template.js)
 
-<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/rules/prefer-template)</sup>
+<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/latest/rules/prefer-template)</sup>
diff --git a/docs/rules/prefer-true-attribute-shorthand.md b/docs/rules/prefer-true-attribute-shorthand.md
index c64f9a8c5..700921ce1 100644
--- a/docs/rules/prefer-true-attribute-shorthand.md
+++ b/docs/rules/prefer-true-attribute-shorthand.md
@@ -5,6 +5,7 @@ title: vue/prefer-true-attribute-shorthand
 description: require shorthand form attribute when `v-bind` value is `true`
 since: v8.5.0
 ---
+
 # vue/prefer-true-attribute-shorthand
 
 > require shorthand form attribute when `v-bind` value is `true`
@@ -54,7 +55,7 @@ export default {
 <MyComponent bool bool-or-string string-or-bool />
 ```
 
-```plain
+```txt
 bool: true (boolean)
 boolOrString: true (boolean)
 stringOrBool: "" (string)
@@ -66,7 +67,7 @@ stringOrBool: "" (string)
 <MyComponent :bool="true" :bool-or-string="true" :string-or-bool="true" />
 ```
 
-```plain
+```txt
 bool: true (boolean)
 boolOrString: true (boolean)
 stringOrBool: true (boolean)
@@ -80,12 +81,18 @@ Default options is `"always"`.
 
 ```json
 {
-  "vue/prefer-true-attribute-shorthand": ["error", "always" | "never"]
+  "vue/prefer-true-attribute-shorthand": ["error",
+    "always" | "never",
+    {
+      except: []
+    }
+  ]
 }
 ```
 
 - `"always"` (default) ... requires shorthand form.
 - `"never"` ... requires long form.
+- `except` (`string[]`) ... specifies a list of attribute names that should be treated differently.
 
 ### `"never"`
 
@@ -104,6 +111,26 @@ Default options is `"always"`.
 
 </eslint-code-block>
 
+### `"never", { 'except': ['value', '/^foo-/'] }`
+
+<eslint-code-block :rules="{'vue/prefer-true-attribute-shorthand': ['error', 'never', { 'except': ['value', '/^foo-/'] }]}">
+
+```vue
+<template>
+  <!-- ✗ BAD -->
+  <MyComponent show />
+  <MyComponent :value="true" />
+  <MyComponent :foo-bar="true" />
+
+  <!-- ✓ GOOD -->
+  <MyComponent :show="true" />
+  <MyComponent value />
+  <MyComponent foo-bar />
+</template>
+```
+
+</eslint-code-block>
+
 ## :couple: Related Rules
 
 - [vue/no-boolean-default](./no-boolean-default.md)
diff --git a/docs/rules/prefer-use-template-ref.md b/docs/rules/prefer-use-template-ref.md
new file mode 100644
index 000000000..1b1b40385
--- /dev/null
+++ b/docs/rules/prefer-use-template-ref.md
@@ -0,0 +1,78 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/prefer-use-template-ref
+description: require using `useTemplateRef` instead of `ref`/`shallowRef` for template refs
+since: v9.31.0
+---
+
+# vue/prefer-use-template-ref
+
+> require using `useTemplateRef` instead of `ref`/`shallowRef` for template refs
+
+## :book: Rule Details
+
+Vue 3.5 introduced a new way of obtaining template refs via
+the [`useTemplateRef()`](https://vuejs.org/guide/essentials/template-refs.html#accessing-the-refs) API.
+
+This rule enforces using the new `useTemplateRef` function instead of `ref`/`shallowRef` for template refs.
+
+<eslint-code-block :rules="{'vue/prefer-use-template-ref': ['error']}">
+
+```vue
+<template>
+  <button ref="submitRef">Submit</button>
+  <button ref="cancelRef">Cancel</button>
+  <button ref="closeRef">Close</button>
+</template>
+
+<script setup>
+  import { ref, shallowRef, useTemplateRef } from 'vue';
+
+  /* ✓ GOOD */
+  const submitRef = useTemplateRef('submitRef');
+  const submitButton = useTemplateRef('submitRef');
+  const closeButton = useTemplateRef('closeRef');
+
+  /* ✗ BAD */
+  const closeRef = ref();
+  const cancelRef = shallowRef();
+</script>
+```
+
+</eslint-code-block>
+
+This rule skips `ref` template function refs as these should be used to allow custom implementation of storing `ref`. If you prefer
+`useTemplateRef`, you have to change the value of the template `ref` to a string.
+
+<eslint-code-block :rules="{'vue/prefer-use-template-ref': ['error']}">
+
+```vue
+<template>
+  <button :ref="ref => submitRef = ref">Submit</button>
+  <button :ref="ref => cancelRef = ref">Cancel</button>
+</template>
+
+<script setup>
+  import { ref, shallowRef } from 'vue';
+  
+  /* ✓ GOOD */
+  const submitRef = ref();
+  const cancelRef = shallowRef();
+</script>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.31.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/prefer-use-template-ref.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/prefer-use-template-ref.js)
diff --git a/docs/rules/prop-name-casing.md b/docs/rules/prop-name-casing.md
index 4f32bfa17..32681643c 100644
--- a/docs/rules/prop-name-casing.md
+++ b/docs/rules/prop-name-casing.md
@@ -5,11 +5,12 @@ title: vue/prop-name-casing
 description: enforce specific casing for the Prop name in Vue components
 since: v4.3.0
 ---
+
 # vue/prop-name-casing
 
 > enforce specific casing for the Prop name in Vue components
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 ## :book: Rule Details
 
@@ -38,12 +39,18 @@ export default {
 
 ```json
 {
-  "vue/prop-name-casing": ["error", "camelCase" | "snake_case"]
+  "vue/prop-name-casing": ["error",
+    "camelCase" | "snake_case",
+    {
+      "ignoreProps": []
+    }
+  ]
 }
 ```
 
 - `"camelCase"` (default) ... Enforce property names in `props` to camel case.
 - `"snake_case"` ... Enforce property names in `props` to snake case.
+- `ignoreProps` (`string[]`) ... An array of prop names (or patterns) that don't need to follow the specified casing.
 
 ### `"snake_case"`
 
@@ -66,6 +73,31 @@ export default {
 
 </eslint-code-block>
 
+### `"ignoreProps": ["foo-bar", "/^_[a-z]+/u"]`
+
+<eslint-code-block :rules="{'vue/prop-name-casing': ['error', 'camelCase', {
+ignoreProps: ['foo-bar', '/^_[a-z]+/u'] }]}">
+
+```vue
+<script>
+export default {
+  props: {
+    /* ✓ GOOD */
+    greetingText: String,
+    'foo-bar': String,
+    _uid: String,
+
+    /* ✗ BAD */
+    'greeting-text': String,
+    greeting_text: String,
+    foo_bar: String
+  }
+}
+</script>
+```
+
+</eslint-code-block>
+
 ## :couple: Related Rules
 
 - [vue/attribute-hyphenation](./attribute-hyphenation.md)
diff --git a/docs/rules/quote-props.md b/docs/rules/quote-props.md
index b45b7150a..9e2a91e79 100644
--- a/docs/rules/quote-props.md
+++ b/docs/rules/quote-props.md
@@ -2,21 +2,29 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/quote-props
-description: require quotes around object literal property names in `<template>`
+description: Require quotes around object literal, type literal, interfaces and enums property names in `<template>`
 since: v8.4.0
 ---
+
 # vue/quote-props
 
-> require quotes around object literal property names in `<template>`
+> Require quotes around object literal, type literal, interfaces and enums property names in `<template>`
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+This rule is the same rule as [@stylistic/quote-props] rule but it applies to the expressions in `<template>`.
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+This rule extends the rule that [@stylistic/eslint-plugin] has, but if [@stylistic/eslint-plugin] is not installed, this rule extracts and extends the same rule from ESLint core.
+However, if neither is found, the rule cannot be used.
 
-This rule is the same rule as core [quote-props] rule but it applies to the expressions in `<template>`.
+[@stylistic/eslint-plugin]: https://eslint.style/packages/default
 
 ## :books: Further Reading
 
+- [@stylistic/quote-props]
 - [quote-props]
 
+[@stylistic/quote-props]: https://eslint.style/rules/quote-props
 [quote-props]: https://eslint.org/docs/rules/quote-props
 
 ## :rocket: Version
@@ -28,4 +36,4 @@ This rule was introduced in eslint-plugin-vue v8.4.0
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/quote-props.js)
 - [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/quote-props.js)
 
-<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/rules/quote-props)</sup>
+<sup>Taken with ❤️ [from ESLint Stylistic](https://eslint.style/rules/quote-props)</sup>
diff --git a/docs/rules/require-component-is.md b/docs/rules/require-component-is.md
index 5ced4d87a..40280a975 100644
--- a/docs/rules/require-component-is.md
+++ b/docs/rules/require-component-is.md
@@ -5,11 +5,12 @@ title: vue/require-component-is
 description: require `v-bind:is` of `<component>` elements
 since: v3.0.0
 ---
+
 # vue/require-component-is
 
 > require `v-bind:is` of `<component>` elements
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 ## :book: Rule Details
 
@@ -20,12 +21,12 @@ This rule reports the `<component>` elements which do not have `v-bind:is` attri
 ```vue
 <template>
   <!-- ✓ GOOD -->
-  <component :is="type"/>
-  <component v-bind:is="type"/>
+  <component :is="type" />
+  <component v-bind:is="type" />
 
   <!-- ✗ BAD -->
-  <component/>
-  <component is="type"/>
+  <component />
+  <component is="type" />
 </template>
 ```
 
@@ -41,7 +42,7 @@ Nothing.
 
 ## :books: Further Reading
 
-- [Guide - Components Basics / Dynamic Components](https://v3.vuejs.org/guide/component-basics.html#dynamic-components)
+- [Guide - Components Basics / Dynamic Components](https://vuejs.org/guide/essentials/component-basics.html#dynamic-components)
 
 ## :rocket: Version
 
diff --git a/docs/rules/require-default-export.md b/docs/rules/require-default-export.md
new file mode 100644
index 000000000..9266eee89
--- /dev/null
+++ b/docs/rules/require-default-export.md
@@ -0,0 +1,60 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/require-default-export
+description: require components to be the default export
+since: v9.28.0
+---
+
+# vue/require-default-export
+
+> require components to be the default export
+
+## :book: Rule Details
+
+This rule reports when a Vue component does not have a default export, if the component is not defined as `<script setup>`.
+
+<eslint-code-block :rules="{'vue/require-default-export': ['error']}">
+
+```vue
+<!-- ✗ BAD -->
+<script>
+const foo = 'foo';
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/require-default-export': ['error']}">
+
+```vue
+<!-- ✓ GOOD -->
+<script>
+export default {
+  data() {
+    return {
+      foo: 'foo'
+    };
+  }
+};
+</script>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## :couple: Related Rules
+
+- [vue/one-component-per-file](./one-component-per-file.md)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.28.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/require-default-export.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/require-default-export.js)
diff --git a/docs/rules/require-default-prop.md b/docs/rules/require-default-prop.md
index 44fba0f29..c96edc24e 100644
--- a/docs/rules/require-default-prop.md
+++ b/docs/rules/require-default-prop.md
@@ -5,11 +5,12 @@ title: vue/require-default-prop
 description: require default value for props
 since: v3.13.0
 ---
+
 # vue/require-default-prop
 
 > require default value for props
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 ## :book: Rule Details
 
diff --git a/docs/rules/require-direct-export.md b/docs/rules/require-direct-export.md
index 52661b7c1..4f2e37650 100644
--- a/docs/rules/require-direct-export.md
+++ b/docs/rules/require-direct-export.md
@@ -5,6 +5,7 @@ title: vue/require-direct-export
 description: require the component to be directly exported
 since: v5.2.0
 ---
+
 # vue/require-direct-export
 
 > require the component to be directly exported
@@ -70,7 +71,7 @@ export default ComponentA
 ```vue
 <script>
 /* ✓ GOOD */
-export default props => h('div', props.msg)
+export default (props) => h('div', props.msg)
 </script>
 ```
 
@@ -83,7 +84,7 @@ export default props => h('div', props.msg)
 ```vue
 <script>
 /* ✗ BAD */
-export default props => h('div', props.msg)
+export default (props) => h('div', props.msg)
 </script>
 ```
 
diff --git a/docs/rules/require-emit-validator.md b/docs/rules/require-emit-validator.md
index 97a975185..34b674bf5 100644
--- a/docs/rules/require-emit-validator.md
+++ b/docs/rules/require-emit-validator.md
@@ -5,6 +5,7 @@ title: vue/require-emit-validator
 description: require type definitions in emits
 since: v7.10.0
 ---
+
 # vue/require-emit-validator
 
 > require type definitions in emits
@@ -53,7 +54,7 @@ Nothing.
 
 ## :books: Further Reading
 
-- [API Reference](https://v3.vuejs.org/api/options-data.html#emits)
+- [API Reference](https://vuejs.org/api/options-state.html#emits)
 
 ## :rocket: Version
 
diff --git a/docs/rules/require-explicit-emits.md b/docs/rules/require-explicit-emits.md
index 6d681c551..5c5d3f8a9 100644
--- a/docs/rules/require-explicit-emits.md
+++ b/docs/rules/require-explicit-emits.md
@@ -5,11 +5,12 @@ title: vue/require-explicit-emits
 description: require `emits` option with name triggered by `$emit()`
 since: v7.0.0
 ---
+
 # vue/require-explicit-emits
 
 > require `emits` option with name triggered by `$emit()`
 
-- :gear: This rule is included in `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
 - :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
 
 ## :book: Rule Details
@@ -17,16 +18,16 @@ since: v7.0.0
 This rule reports event triggers not declared with the `emits` option. (The `emits` option is a new in Vue.js 3.0.0+)
 
 Explicit `emits` declaration serves as self-documenting code. This can be useful for other developers to instantly understand what events the component is supposed to emit.
-Also,  with attribute fallthrough changes in Vue.js 3.0.0+, `v-on` listeners on components will fallthrough as native listeners by default. Declare it as a component-only event in `emits` to avoid unnecessary registration of native listeners.
+Also, with attribute fallthrough changes in Vue.js 3.0.0+, `v-on` listeners on components will fallthrough as native listeners by default. Declare it as a component-only event in `emits` to avoid unnecessary registration of native listeners.
 
 <eslint-code-block :rules="{'vue/require-explicit-emits': ['error']}">
 
 ```vue
 <template>
   <!-- ✓ GOOD -->
-  <div @click="$emit('good')"/>
+  <div @click="$emit('good')" />
   <!-- ✗ BAD -->
-  <div @click="$emit('bad')"/>
+  <div @click="$emit('bad')" />
 </template>
 <script>
 export default {
@@ -44,7 +45,7 @@ export default {
 export default {
   emits: ['good'],
   methods: {
-    foo () {
+    foo() {
       // ✓ GOOD
       this.$emit('good')
       // ✗ BAD
@@ -63,7 +64,7 @@ export default {
 <script>
 export default {
   emits: ['good'],
-  setup (props, context) {
+  setup(props, context) {
     // ✓ GOOD
     context.emit('good')
     // ✗ BAD
@@ -96,7 +97,7 @@ export default {
 export default {
   props: ['onGood', 'bad'],
   methods: {
-    foo () {
+    foo() {
       // ✓ GOOD
       this.$emit('good')
       // ✗ BAD
@@ -109,6 +110,11 @@ export default {
 
 </eslint-code-block>
 
+## :couple: Related Rules
+
+- [vue/no-unused-emit-declarations](./no-unused-emit-declarations.md)
+- [vue/require-explicit-slots](./require-explicit-slots.md)
+
 ## :books: Further Reading
 
 - [Guide - Custom Events / Defining Custom Events](https://v3.vuejs.org/guide/component-custom-events.html#defining-custom-events)
diff --git a/docs/rules/require-explicit-slots.md b/docs/rules/require-explicit-slots.md
new file mode 100644
index 000000000..2737e7e6a
--- /dev/null
+++ b/docs/rules/require-explicit-slots.md
@@ -0,0 +1,76 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/require-explicit-slots
+description: require slots to be explicitly defined
+since: v9.21.0
+---
+
+# vue/require-explicit-slots
+
+> require slots to be explicitly defined
+
+## :book: Rule Details
+
+This rule enforces all slots used in the template to be defined once either in the `script setup` block with the [`defineSlots` macro](https://vuejs.org/api/sfc-script-setup.html#defineslots), or with the [`slots` property](https://vuejs.org/api/options-rendering.html#slots) in the Options API.
+
+<eslint-code-block :rules="{'vue/require-explicit-slots': ['error']}">
+
+```vue
+<template>
+  <div>
+    <!-- ✓ GOOD -->
+    <slot />
+    <slot name="foo" />
+    <!-- ✗ BAD -->
+    <slot name="bar" />
+  </div>
+</template>
+<script setup lang="ts">
+defineSlots<{
+  default(props: { msg: string }): any
+  foo(props: { msg: string }): any
+}>()
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/require-explicit-slots': ['error']}">
+
+```vue
+<template>
+  <div>
+    <!-- ✓ GOOD -->
+    <slot />
+    <slot name="foo" />
+    <!-- ✗ BAD -->
+    <slot name="bar" />
+  </div>
+</template>
+<script lang="ts">
+import { SlotsType } from 'vue'
+
+defineComponent({
+  slots: Object as SlotsType<{
+    default: { msg: string }
+    foo: { msg: string }
+  }>
+})
+</script>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.21.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/require-explicit-slots.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/require-explicit-slots.js)
diff --git a/docs/rules/require-expose.md b/docs/rules/require-expose.md
index d6b27c7fc..98762a8c9 100644
--- a/docs/rules/require-expose.md
+++ b/docs/rules/require-expose.md
@@ -5,6 +5,7 @@ title: vue/require-expose
 description: require declare public properties using `expose`
 since: v7.14.0
 ---
+
 # vue/require-expose
 
 > require declare public properties using `expose`
diff --git a/docs/rules/require-macro-variable-name.md b/docs/rules/require-macro-variable-name.md
new file mode 100644
index 000000000..af6db1733
--- /dev/null
+++ b/docs/rules/require-macro-variable-name.md
@@ -0,0 +1,89 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/require-macro-variable-name
+description: require a certain macro variable name
+since: v9.15.0
+---
+
+# vue/require-macro-variable-name
+
+> require a certain macro variable name
+
+- :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
+
+## :book: Rule Details
+
+This rule reports macro variables not corresponding to the specified name.
+
+<eslint-code-block :rules="{'vue/require-macro-variable-name': ['error']}">
+
+```vue
+<!-- ✓ GOOD -->
+<script setup>
+const props = defineProps({ msg: String })
+const emit = defineEmits(['update:msg'])
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/require-macro-variable-name': ['error']}">
+
+```vue
+<!-- ✗ BAD  -->
+<script setup>
+const propsDefined = defineProps({ msg: String })
+const emitsDefined = defineEmits(['update:msg'])
+</script>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+```json
+{
+  "vue/require-macro-variable-name": ["error", {
+    "defineProps": "props",
+    "defineEmits": "emit",
+    "defineSlots": "slots",
+    "useSlots": "slots",
+    "useAttrs": "attrs"
+  }]
+}
+```
+
+- `defineProps` - The name of the macro variable for `defineProps`. default: `props`
+- `defineEmits` - The name of the macro variable for `defineEmits`. default: `emit`
+- `defineSlots` - The name of the macro variable for `defineSlots`. default: `slots`
+- `useSlots` - The name of the macro variable for `useSlots`. default: `slots`
+- `useAttrs` - The name of the macro variable for `useAttrs`. default: `attrs`
+
+### With custom macro variable names
+
+<eslint-code-block :rules="{'vue/require-macro-variable-name': ['error', {
+    'defineProps': 'propsCustom',
+    'defineEmits': 'emitCustom',
+    'defineSlots': 'slotsCustom',
+    'useSlots': 'slotsCustom',
+    'useAttrs': 'attrsCustom'
+  }]}">
+
+```vue
+<script setup>
+const slotsCustom = defineSlots()
+const attrsCustom = useAttrs()
+</script>
+```
+
+</eslint-code-block>
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.15.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/require-macro-variable-name.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/require-macro-variable-name.js)
diff --git a/docs/rules/require-name-property.md b/docs/rules/require-name-property.md
index d741e07c3..6d9974fc4 100644
--- a/docs/rules/require-name-property.md
+++ b/docs/rules/require-name-property.md
@@ -5,10 +5,13 @@ title: vue/require-name-property
 description: require a name property in Vue components
 since: v6.1.0
 ---
+
 # vue/require-name-property
 
 > require a name property in Vue components
 
+- :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
+
 ## :book: Rule Details
 
 This rule requires a `name` property to be set on components.
@@ -31,8 +34,7 @@ export default {
 ```vue
 <script>
 /* ✗ BAD */
-export default {
-}
+export default {}
 </script>
 ```
 
diff --git a/docs/rules/require-prop-comment.md b/docs/rules/require-prop-comment.md
new file mode 100644
index 000000000..25b78c346
--- /dev/null
+++ b/docs/rules/require-prop-comment.md
@@ -0,0 +1,148 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/require-prop-comment
+description: require props to have a comment
+since: v9.8.0
+---
+
+# vue/require-prop-comment
+
+> require props to have a comment
+
+## :book: Rule Details
+
+This rule enforces that every prop has a comment that documents it.
+
+<eslint-code-block :rules="{'vue/require-prop-comment': ['error']}">
+
+```vue
+<script>
+export default defineComponent({
+  props: {
+    // ✓ GOOD
+
+    /** JSDoc comment */
+    a: Number,
+
+    // ✗ BAD
+
+    // line comment
+    b: Number,
+
+    /* block comment */
+    c: Number,
+
+    d: Number,
+  }
+})
+</script>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+```json
+{
+  "vue/require-prop-comment": ["error", {
+    "type": "JSDoc"
+  }]
+}
+```
+
+- `type` ... Type of comment. Default is `"JSDoc"`
+  - `"JSDoc"` ... Only JSDoc comment are allowed.
+  - `"line"` ... Only line comment are allowed.
+  - `"block"` ... Only block comment are allowed.
+  - `"any"` ... All comment types are allowed.
+
+### `"type": "block"`
+
+<eslint-code-block :rules="{'vue/require-prop-comment': ['error', {type: 'block'}]}">
+
+```vue
+<script setup>
+// ✓ GOOD
+const goodProps = defineProps({
+  /* block comment */
+  a: Number,
+})
+
+// ✗ BAD
+const badProps = defineProps({
+  /** JSDoc comment */
+  b: Number,
+
+  // line comment
+  c: Number,
+
+  d: Number,
+})
+</script>
+```
+
+</eslint-code-block>
+
+### `"type": "line"`
+
+<eslint-code-block :rules="{'vue/require-prop-comment': ['error', {type: 'line'}]}">
+
+```vue
+<script setup>
+// ✓ GOOD
+const goodProps = defineProps({
+  // line comment
+  a: Number,
+})
+
+// ✗ BAD
+const badProps = defineProps({
+  /** JSDoc comment */
+  b: Number,
+
+  /* block comment */
+  c: Number,
+
+  d: Number,
+})
+</script>
+```
+
+</eslint-code-block>
+
+### `"type": "any"`
+
+<eslint-code-block :rules="{'vue/require-prop-comment': ['error', {type: 'any'}]}">
+
+```vue
+<script setup>
+// ✓ GOOD
+const goodProps = defineProps({
+  /** JSDoc comment */
+  a: Number,
+
+  /* block comment */
+  b: Number,
+
+  // line comment
+  c: Number,
+})
+
+// ✗ BAD
+const badProps = defineProps({
+  d: Number,
+})
+</script>
+```
+
+</eslint-code-block>
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.8.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/require-prop-comment.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/require-prop-comment.js)
diff --git a/docs/rules/require-prop-type-constructor.md b/docs/rules/require-prop-type-constructor.md
index 97bce84f3..e872fc5d4 100644
--- a/docs/rules/require-prop-type-constructor.md
+++ b/docs/rules/require-prop-type-constructor.md
@@ -5,12 +5,13 @@ title: vue/require-prop-type-constructor
 description: require prop type to be a constructor
 since: v5.0.0
 ---
+
 # vue/require-prop-type-constructor
 
 > require prop type to be a constructor
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
@@ -38,7 +39,7 @@ export default {
     anotherProp: [Number, String],
     myFieldWithBadType: {
       type: Object,
-      default: function() {
+      default: function () {
         return {}
       },
     },
@@ -47,16 +48,16 @@ export default {
       default: 1,
     },
     /* ✗ BAD */
-    myProp: "Number",
-    anotherProp: ["Number", "String"],
+    myProp: 'Number',
+    anotherProp: ['Number', 'String'],
     myFieldWithBadType: {
-      type: "Object",
-      default: function() {
+      type: 'Object',
+      default: function () {
         return {}
       },
     },
     myOtherFieldWithBadType: {
-      type: "Number",
+      type: 'Number',
       default: 1,
     },
   }
@@ -72,7 +73,7 @@ Nothing.
 
 ## :books: Further Reading
 
-- [Guide - Prop Validation](https://v3.vuejs.org/guide/component-props.html#prop-validation)
+- [Guide - Prop Validation](https://vuejs.org/guide/components/props.html#prop-validation)
 
 ## :rocket: Version
 
diff --git a/docs/rules/require-prop-types.md b/docs/rules/require-prop-types.md
index df9a0945a..20e46453f 100644
--- a/docs/rules/require-prop-types.md
+++ b/docs/rules/require-prop-types.md
@@ -5,11 +5,12 @@ title: vue/require-prop-types
 description: require type definitions in props
 since: v3.9.0
 ---
+
 # vue/require-prop-types
 
 > require type definitions in props
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 ## :book: Rule Details
 
diff --git a/docs/rules/require-render-return.md b/docs/rules/require-render-return.md
index 0e5c89434..88cbf1efb 100644
--- a/docs/rules/require-render-return.md
+++ b/docs/rules/require-render-return.md
@@ -5,11 +5,12 @@ title: vue/require-render-return
 description: enforce render function to always return value
 since: v3.10.0
 ---
+
 # vue/require-render-return
 
 > enforce render function to always return value
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 ## :book: Rule Details
 
@@ -21,7 +22,7 @@ This rule aims to enforce render function to always return value
 <script>
 export default {
   /* ✓ GOOD */
-  render (h) {
+  render(h) {
     return h('div', 'hello')
   }
 }
@@ -36,7 +37,7 @@ export default {
 <script>
 export default {
   /* ✗ BAD */
-  render (h) {
+  render(h) {
     if (foo) {
       return h('div', 'hello')
     }
@@ -53,7 +54,7 @@ Nothing.
 
 ## :books: Further Reading
 
-- [Guide - Render Functions](https://v3.vuejs.org/guide/render-function.html)
+- [Guide - Render Functions](https://vuejs.org/guide/extras/render-function.html)
 
 ## :rocket: Version
 
diff --git a/docs/rules/require-slots-as-functions.md b/docs/rules/require-slots-as-functions.md
index 244e14548..05c04e8fb 100644
--- a/docs/rules/require-slots-as-functions.md
+++ b/docs/rules/require-slots-as-functions.md
@@ -5,15 +5,16 @@ title: vue/require-slots-as-functions
 description: enforce properties of `$slots` to be used as a function
 since: v7.0.0
 ---
+
 # vue/require-slots-as-functions
 
 > enforce properties of `$slots` to be used as a function
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
 
 ## :book: Rule Details
 
-This rule enforces the properties of `$slots` to be used as a function.  
+This rule enforces the properties of `$slots` to be used as a function.\
 `this.$slots.default` was an array of VNode in Vue.js 2.x, but changed to a function that returns an array of VNode in Vue.js 3.x.
 
 <eslint-code-block :rules="{'vue/require-slots-as-functions': ['error']}">
@@ -42,7 +43,7 @@ Nothing.
 
 ## :books: Further Reading
 
-- [API - $slots](https://v3.vuejs.org/api/instance-properties.html#slots)
+- [API - $slots](https://vuejs.org/api/component-instance.html#slots)
 - [Vue RFCs - 0006-slots-unification](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0006-slots-unification.md)
 
 ## :rocket: Version
diff --git a/docs/rules/require-toggle-inside-transition.md b/docs/rules/require-toggle-inside-transition.md
index b9880e594..6dd663fd1 100644
--- a/docs/rules/require-toggle-inside-transition.md
+++ b/docs/rules/require-toggle-inside-transition.md
@@ -5,11 +5,12 @@ title: vue/require-toggle-inside-transition
 description: require control the display of the content inside `<transition>`
 since: v7.0.0
 ---
+
 # vue/require-toggle-inside-transition
 
 > require control the display of the content inside `<transition>`
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
 
 ## :book: Rule Details
 
@@ -32,7 +33,34 @@ This rule reports elements inside `<transition>` that do not control the display
 
 ## :wrench: Options
 
-Nothing.
+```json
+{
+  "vue/require-toggle-inside-transition": ["error", {
+    "additionalDirectives": []
+  }]
+}
+```
+
+- `additionalDirectives` (`string[]`) ... Custom directives which will satisfy this rule in addition to `v-show` and `v-if`. Should be added without the `v-` prefix.
+
+### `additionalDirectives: ["dialog"]`
+
+<eslint-code-block :rules="{'vue/require-toggle-inside-transition': ['error', {additionalDirectives: ['dialog']}]}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <transition><div v-if="show" /></transition>
+  <transition><div v-show="show" /></transition>
+  <transition><dialog v-dialog="show" /></transition>
+
+  <!-- ✗ BAD -->
+  <transition><div /></transition>
+  <transition><div v-custom="show" /></transition>
+<template>
+```
+
+</eslint-code-block>
 
 ## :books: Further Reading
 
diff --git a/docs/rules/require-typed-object-prop.md b/docs/rules/require-typed-object-prop.md
new file mode 100644
index 000000000..c867e26c5
--- /dev/null
+++ b/docs/rules/require-typed-object-prop.md
@@ -0,0 +1,55 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/require-typed-object-prop
+description: enforce adding type declarations to object props
+since: v9.16.0
+---
+
+# vue/require-typed-object-prop
+
+> enforce adding type declarations to object props
+
+- :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
+
+## :book: Rule Details
+
+Prevent missing type declarations for non-primitive object props in TypeScript projects.
+
+<eslint-code-block :rules="{'vue/require-typed-object-prop': ['error']}">
+
+```vue
+<script lang="ts">
+export default {
+  props: {
+    // ✗ BAD
+    bad1: Object,
+    bad2: { type: Array },
+
+    // ✓ GOOD
+    good1: Object as PropType<Anything>,
+    good2: { type: Array as PropType<Anything[]> },
+    good3: [String, Boolean], // or any other primitive type
+  }
+}
+</script>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## :mute: When Not To Use It
+
+When you're not using TypeScript in the project.
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.16.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/require-typed-object-prop.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/require-typed-object-prop.js)
diff --git a/docs/rules/require-typed-ref.md b/docs/rules/require-typed-ref.md
new file mode 100644
index 000000000..85b58b213
--- /dev/null
+++ b/docs/rules/require-typed-ref.md
@@ -0,0 +1,51 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/require-typed-ref
+description: require `ref` and `shallowRef` functions to be strongly typed
+since: v9.15.0
+---
+
+# vue/require-typed-ref
+
+> require `ref` and `shallowRef` functions to be strongly typed
+
+## :book: Rule Details
+
+This rule disallows calling `ref()` or `shallowRef()` functions without generic type parameter or an argument when using TypeScript.
+
+With TypeScript it is easy to prevent usage of `any` by using [`noImplicitAny`](https://www.typescriptlang.org/tsconfig#noImplicitAny). Unfortunately this rule is easily bypassed with Vue `ref()` function. Calling `ref()` function without a generic parameter or an initial value leads to ref having `Ref<any>` type.
+
+<eslint-code-block :rules="{'vue/require-typed-ref': ['error']}">
+
+```vue
+<script setup lang="ts">
+import { ref, shallowRef, type Ref } from 'vue'
+
+/* ✗ BAD */
+const count = ref() // Returns Ref<any> that is not type checked
+count.value = '50' // Should be a type error, but it is not
+
+const count = shallowRef()
+
+/* ✓ GOOD */
+const count = ref<number>()
+const count = ref(0)
+const count: Ref<number | undefined> = ref()
+</script>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.15.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/require-typed-ref.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/require-typed-ref.js)
diff --git a/docs/rules/require-v-for-key.md b/docs/rules/require-v-for-key.md
index c8f894ff5..6811b9419 100644
--- a/docs/rules/require-v-for-key.md
+++ b/docs/rules/require-v-for-key.md
@@ -5,11 +5,12 @@ title: vue/require-v-for-key
 description: require `v-bind:key` with `v-for` directives
 since: v3.0.0
 ---
+
 # vue/require-v-for-key
 
 > require `v-bind:key` with `v-for` directives
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 ## :book: Rule Details
 
@@ -20,12 +21,9 @@ This rule reports the elements which have `v-for` and do not have `v-bind:key` w
 ```vue
 <template>
   <!-- ✓ GOOD -->
-  <div
-    v-for="todo in todos"
-    :key="todo.id"
-  />
+  <div v-for="todo in todos" :key="todo.id" />
   <!-- ✗ BAD -->
-  <div v-for="todo in todos"/>
+  <div v-for="todo in todos" />
 </template>
 ```
 
@@ -43,8 +41,10 @@ Nothing.
 ## :couple: Related Rules
 
 - [vue/valid-v-for]
+- [vue/v-if-else-key]
 
 [vue/valid-v-for]: ./valid-v-for.md
+[vue/v-if-else-key]: ./v-if-else-key.md
 
 ## :books: Further Reading
 
diff --git a/docs/rules/require-valid-default-prop.md b/docs/rules/require-valid-default-prop.md
index c53af81e1..bea185798 100644
--- a/docs/rules/require-valid-default-prop.md
+++ b/docs/rules/require-valid-default-prop.md
@@ -5,11 +5,12 @@ title: vue/require-valid-default-prop
 description: enforce props default values to be valid
 since: v3.13.0
 ---
+
 # vue/require-valid-default-prop
 
 > enforce props default values to be valid
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 ## :book: Rule Details
 
@@ -78,7 +79,7 @@ Nothing.
 
 ## :books: Further Reading
 
-- [Guide - Prop Validation](https://v3.vuejs.org/guide/component-props.html#prop-validation)
+- [Guide - Prop Validation](https://vuejs.org/guide/components/props.html#prop-validation)
 
 ## :rocket: Version
 
diff --git a/docs/rules/restricted-component-names.md b/docs/rules/restricted-component-names.md
new file mode 100644
index 000000000..1d707baf3
--- /dev/null
+++ b/docs/rules/restricted-component-names.md
@@ -0,0 +1,69 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/restricted-component-names
+description: enforce using only specific component names
+since: v9.32.0
+---
+
+# vue/restricted-component-names
+
+> enforce using only specific component names
+
+## :book: Rule Details
+
+This rule enforces consistency in component names.
+
+<eslint-code-block :rules="{ 'vue/restricted-component-names': ['error'] }">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <button/>
+  <keep-alive></keep-alive>
+
+  <!-- ✗ BAD -->
+  <custom-component />
+</template>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+```json
+{
+  "vue/restricted-component-names": ["error", { 
+    "allow": []
+  }]
+}
+```
+
+### `"allow: ['/^custom-/']"`
+
+<eslint-code-block :rules="{'vue/restricted-component-names': ['error', { 'allow': ['/^custom-/'] }]}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <custom-component />
+
+  <!-- ✗ BAD -->
+  <my-component />
+</template>
+```
+
+</eslint-code-block>
+
+## :couple: Related Rules
+
+- [vue/no-restricted-component-names](./no-restricted-component-names.md)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.32.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/restricted-component-names.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/restricted-component-names.js)
diff --git a/docs/rules/return-in-computed-property.md b/docs/rules/return-in-computed-property.md
index 01ac63260..5a1906060 100644
--- a/docs/rules/return-in-computed-property.md
+++ b/docs/rules/return-in-computed-property.md
@@ -5,11 +5,12 @@ title: vue/return-in-computed-property
 description: enforce that a return statement is present in computed property
 since: v3.7.0
 ---
+
 # vue/return-in-computed-property
 
 > enforce that a return statement is present in computed property
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 ## :book: Rule Details
 
@@ -22,7 +23,7 @@ This rule enforces that a `return` statement is present in `computed` properties
 export default {
   computed: {
     /* ✓ GOOD */
-    foo () {
+    foo() {
       if (this.bar) {
         return this.baz
       } else {
@@ -33,7 +34,7 @@ export default {
       return false
     },
     /* ✗ BAD */
-    baz () {
+    baz() {
       if (this.baf) {
         return this.baf
       }
@@ -50,7 +51,7 @@ export default {
 
 ```vue
 <script>
-import {computed} from 'vue'
+import { computed } from 'vue'
 export default {
   setup() {
     const foobar = useFoobar()
@@ -102,7 +103,7 @@ This rule has an object option:
 export default {
   computed: {
     /* ✓ GOOD */
-    foo () {
+    foo() {
       if (this.bar) {
         return undefined
       } else {
@@ -113,7 +114,7 @@ export default {
       return
     },
     /* ✗ BAD */
-    baz () {
+    baz() {
       if (this.baf) {
         return this.baf
       }
diff --git a/docs/rules/return-in-emits-validator.md b/docs/rules/return-in-emits-validator.md
index 08b8b340e..ec1558241 100644
--- a/docs/rules/return-in-emits-validator.md
+++ b/docs/rules/return-in-emits-validator.md
@@ -5,11 +5,12 @@ title: vue/return-in-emits-validator
 description: enforce that a return statement is present in emits validator
 since: v7.0.0
 ---
+
 # vue/return-in-emits-validator
 
 > enforce that a return statement is present in emits validator
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 ## :book: Rule Details
 
@@ -22,7 +23,7 @@ This rule enforces that a `return` statement is present in `emits` validators.
 export default {
   emits: {
     /* ✓ GOOD */
-    foo (evt) {
+    foo(evt) {
       if (evt) {
         return true
       } else {
@@ -32,14 +33,14 @@ export default {
     bar: function () {
       return true
     },
-    baz (evt) {
+    baz(evt) {
       if (evt) {
         return true
       }
     },
     /* ✗ BAD */
     qux: function () {},
-    quux (evt) {
+    quux(evt) {
       if (!evt) {
         return false
       }
@@ -57,7 +58,7 @@ Nothing.
 
 ## :books: Further Reading
 
-- [Guide - Custom Events / Validate Emitted Events](https://v3.vuejs.org/guide/component-custom-events.html#validate-emitted-events)
+- [Guide - Custom Events / Validate Emitted Events](https://vuejs.org/guide/components/events.html#events-validation)
 - [Vue RFCs - 0030-emits-option](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0030-emits-option.md)
 
 ## :rocket: Version
diff --git a/docs/rules/script-indent.md b/docs/rules/script-indent.md
index 4cf865046..9922b8c48 100644
--- a/docs/rules/script-indent.md
+++ b/docs/rules/script-indent.md
@@ -5,11 +5,12 @@ title: vue/script-indent
 description: enforce consistent indentation in `<script>`
 since: v4.2.0
 ---
+
 # vue/script-indent
 
 > enforce consistent indentation in `<script>`
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
diff --git a/docs/rules/script-setup-uses-vars.md b/docs/rules/script-setup-uses-vars.md
index f4d68926a..37728a4f1 100644
--- a/docs/rules/script-setup-uses-vars.md
+++ b/docs/rules/script-setup-uses-vars.md
@@ -5,15 +5,16 @@ title: vue/script-setup-uses-vars
 description: prevent `<script setup>` variables used in `<template>` to be marked as unused
 since: v7.13.0
 ---
+
 # vue/script-setup-uses-vars
 
 > prevent `<script setup>` variables used in `<template>` to be marked as unused
 
-- :warning: This rule was **deprecated**.
+- :no_entry: This rule was **removed** in eslint-plugin-vue v10.0.0.
 
 ::: tip
 
-This rule is not needed when using `vue-eslint-parser` v9.0.0 or later.
+This rule is not needed when using [`vue-eslint-parser`](https://github.com/vuejs/vue-eslint-parser) v9.0.0 or later.
 
 :::
 
@@ -30,16 +31,16 @@ Without this rule this code triggers warning:
 
 ```vue
 <script setup>
-  // imported components are also directly usable in template
-  import Foo from './Foo.vue'
-  import { ref } from 'vue'
-
-  // write Composition API code just like in a normal setup()
-  // but no need to manually return everything
-  const count = ref(0)
-  const inc = () => {
-    count.value++
-  }
+// imported components are also directly usable in template
+import Foo from './Foo.vue'
+import { ref } from 'vue'
+
+// write Composition API code just like in a normal setup()
+// but no need to manually return everything
+const count = ref(0)
+const inc = () => {
+  count.value++
+}
 </script>
 
 <template>
@@ -55,7 +56,7 @@ After turning on, `Foo` is being marked as used and `no-unused-vars` rule doesn'
 
 You can disable this rule in any of the following cases:
 
-- You are using `vue-eslint-parser` v9.0.0 or later.
+- You are using [`vue-eslint-parser`](https://github.com/vuejs/vue-eslint-parser) v9.0.0 or later.
 - You are not using `<script setup>`.
 - You do not use the `no-unused-vars` rule.
 
diff --git a/docs/rules/singleline-html-element-content-newline.md b/docs/rules/singleline-html-element-content-newline.md
index 8e6dadf3d..7b2cafc88 100644
--- a/docs/rules/singleline-html-element-content-newline.md
+++ b/docs/rules/singleline-html-element-content-newline.md
@@ -5,12 +5,13 @@ title: vue/singleline-html-element-content-newline
 description: require a line break before and after the contents of a singleline element
 since: v5.0.0
 ---
+
 # vue/singleline-html-element-content-newline
 
 > require a line break before and after the contents of a singleline element
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
@@ -56,7 +57,8 @@ This rule enforces a line break before and after the contents of a singleline el
   "vue/singleline-html-element-content-newline": ["error", {
     "ignoreWhenNoAttributes": true,
     "ignoreWhenEmpty": true,
-    "ignores": ["pre", "textarea", ...INLINE_ELEMENTS]
+    "ignores": ["pre", "textarea", ...INLINE_ELEMENTS],
+    "externalIgnores": []
   }]
 }
 ```
@@ -66,7 +68,9 @@ This rule enforces a line break before and after the contents of a singleline el
 - `ignoreWhenEmpty` ... disables reporting when element has no content.
     default `true`
 - `ignores` ... the configuration for element names to ignore line breaks style.
-    default `["pre", "textarea", ...INLINE_ELEMENTS]`.
+    default `["pre", "textarea", ...INLINE_ELEMENTS]`
+- `externalIgnores` ... the configuration for external element names to ignore line breaks style, it allows avoiding overwrite the default value of ignores.
+    default `[]`
 
 ::: info
   All inline non void elements can be found [here](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/utils/inline-non-void-elements.json).
@@ -106,6 +110,10 @@ This rule enforces a line break before and after the contents of a singleline el
 
 </eslint-code-block>
 
+## :couple: Related Rules
+
+- [vue/multiline-html-element-content-newline](./multiline-html-element-content-newline.md)
+
 ## :rocket: Version
 
 This rule was introduced in eslint-plugin-vue v5.0.0
diff --git a/docs/rules/slot-name-casing.md b/docs/rules/slot-name-casing.md
new file mode 100644
index 000000000..63884fe86
--- /dev/null
+++ b/docs/rules/slot-name-casing.md
@@ -0,0 +1,91 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/slot-name-casing
+description: enforce specific casing for slot names
+since: v9.32.0
+---
+
+# vue/slot-name-casing
+
+> enforce specific casing for slot names
+
+## :book: Rule Details
+
+This rule enforces proper casing of slot names in Vue components.
+
+<eslint-code-block :rules="{'vue/slot-name-casing': ['error']}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <slot name="foo" />
+  <slot name="fooBar" />
+
+  <!-- ✗ BAD -->
+  <slot name="foo-bar" />
+  <slot name="foo_bar" />
+  <slot name="foo:bar" />
+</template>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+```json
+{
+  "vue/slot-name-casing": ["error", "camelCase" | "kebab-case" | "singleword"]
+}
+```
+
+- `"camelCase"` (default) ... Enforce slot name to be in camel case.
+- `"kebab-case"` ... Enforce slot name to be in kebab case.
+- `"singleword"` ... Enforce slot name to be a single word.
+
+### `"kebab-case"`
+
+<eslint-code-block :rules="{'vue/prop-name-casing': ['error', 'kebab-case']}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <slot name="foo" />
+  <slot name="foo-bar" />
+
+  <!-- ✗ BAD -->
+  <slot name="fooBar" />
+  <slot name="foo_bar" />
+  <slot name="foo:bar" />
+</template>
+```
+
+</eslint-code-block>
+
+### `"singleword"`
+
+<eslint-code-block :rules="{'vue/prop-name-casing': ['error', 'singleword']}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <slot name="foo" />
+
+  <!-- ✗ BAD -->
+  <slot name="foo-bar" />
+  <slot name="fooBar" />
+  <slot name="foo_bar" />
+  <slot name="foo:bar" />
+</template>
+```
+
+</eslint-code-block>
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.32.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/slot-name-casing.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/slot-name-casing.js)
diff --git a/docs/rules/sort-keys.md b/docs/rules/sort-keys.md
index 26e4e6839..7227cfd0a 100644
--- a/docs/rules/sort-keys.md
+++ b/docs/rules/sort-keys.md
@@ -5,6 +5,7 @@ title: vue/sort-keys
 description: enforce sort-keys in a manner that is compatible with order-in-components
 since: v6.2.0
 ---
+
 # vue/sort-keys
 
 > enforce sort-keys in a manner that is compatible with order-in-components
diff --git a/docs/rules/space-in-parens.md b/docs/rules/space-in-parens.md
index 62dcc2485..eef3e01b5 100644
--- a/docs/rules/space-in-parens.md
+++ b/docs/rules/space-in-parens.md
@@ -2,21 +2,29 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/space-in-parens
-description: enforce consistent spacing inside parentheses in `<template>`
+description: Enforce consistent spacing inside parentheses in `<template>`
 since: v7.0.0
 ---
+
 # vue/space-in-parens
 
-> enforce consistent spacing inside parentheses in `<template>`
+> Enforce consistent spacing inside parentheses in `<template>`
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+This rule is the same rule as [@stylistic/space-in-parens] rule but it applies to the expressions in `<template>`.
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+This rule extends the rule that [@stylistic/eslint-plugin] has, but if [@stylistic/eslint-plugin] is not installed, this rule extracts and extends the same rule from ESLint core.
+However, if neither is found, the rule cannot be used.
 
-This rule is the same rule as core [space-in-parens] rule but it applies to the expressions in `<template>`.
+[@stylistic/eslint-plugin]: https://eslint.style/packages/default
 
 ## :books: Further Reading
 
+- [@stylistic/space-in-parens]
 - [space-in-parens]
 
+[@stylistic/space-in-parens]: https://eslint.style/rules/space-in-parens
 [space-in-parens]: https://eslint.org/docs/rules/space-in-parens
 
 ## :rocket: Version
@@ -28,4 +36,4 @@ This rule was introduced in eslint-plugin-vue v7.0.0
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/space-in-parens.js)
 - [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/space-in-parens.js)
 
-<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/rules/space-in-parens)</sup>
+<sup>Taken with ❤️ [from ESLint Stylistic](https://eslint.style/rules/space-in-parens)</sup>
diff --git a/docs/rules/space-infix-ops.md b/docs/rules/space-infix-ops.md
index a20eecb42..775726fd8 100644
--- a/docs/rules/space-infix-ops.md
+++ b/docs/rules/space-infix-ops.md
@@ -2,21 +2,29 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/space-infix-ops
-description: require spacing around infix operators in `<template>`
+description: Require spacing around infix operators in `<template>`
 since: v5.2.0
 ---
+
 # vue/space-infix-ops
 
-> require spacing around infix operators in `<template>`
+> Require spacing around infix operators in `<template>`
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+This rule is the same rule as [@stylistic/space-infix-ops] rule but it applies to the expressions in `<template>`.
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+This rule extends the rule that [@stylistic/eslint-plugin] has, but if [@stylistic/eslint-plugin] is not installed, this rule extracts and extends the same rule from ESLint core.
+However, if neither is found, the rule cannot be used.
 
-This rule is the same rule as core [space-infix-ops] rule but it applies to the expressions in `<template>`.
+[@stylistic/eslint-plugin]: https://eslint.style/packages/default
 
 ## :books: Further Reading
 
+- [@stylistic/space-infix-ops]
 - [space-infix-ops]
 
+[@stylistic/space-infix-ops]: https://eslint.style/rules/space-infix-ops
 [space-infix-ops]: https://eslint.org/docs/rules/space-infix-ops
 
 ## :rocket: Version
@@ -28,4 +36,4 @@ This rule was introduced in eslint-plugin-vue v5.2.0
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/space-infix-ops.js)
 - [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/space-infix-ops.js)
 
-<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/rules/space-infix-ops)</sup>
+<sup>Taken with ❤️ [from ESLint Stylistic](https://eslint.style/rules/space-infix-ops)</sup>
diff --git a/docs/rules/space-unary-ops.md b/docs/rules/space-unary-ops.md
index 3019c3eb9..6ecd74e8e 100644
--- a/docs/rules/space-unary-ops.md
+++ b/docs/rules/space-unary-ops.md
@@ -2,21 +2,29 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/space-unary-ops
-description: enforce consistent spacing before or after unary operators in `<template>`
+description: Enforce consistent spacing before or after unary operators in `<template>`
 since: v5.2.0
 ---
+
 # vue/space-unary-ops
 
-> enforce consistent spacing before or after unary operators in `<template>`
+> Enforce consistent spacing before or after unary operators in `<template>`
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+This rule is the same rule as [@stylistic/space-unary-ops] rule but it applies to the expressions in `<template>`.
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+This rule extends the rule that [@stylistic/eslint-plugin] has, but if [@stylistic/eslint-plugin] is not installed, this rule extracts and extends the same rule from ESLint core.
+However, if neither is found, the rule cannot be used.
 
-This rule is the same rule as core [space-unary-ops] rule but it applies to the expressions in `<template>`.
+[@stylistic/eslint-plugin]: https://eslint.style/packages/default
 
 ## :books: Further Reading
 
+- [@stylistic/space-unary-ops]
 - [space-unary-ops]
 
+[@stylistic/space-unary-ops]: https://eslint.style/rules/space-unary-ops
 [space-unary-ops]: https://eslint.org/docs/rules/space-unary-ops
 
 ## :rocket: Version
@@ -28,4 +36,4 @@ This rule was introduced in eslint-plugin-vue v5.2.0
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/space-unary-ops.js)
 - [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/space-unary-ops.js)
 
-<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/rules/space-unary-ops)</sup>
+<sup>Taken with ❤️ [from ESLint Stylistic](https://eslint.style/rules/space-unary-ops)</sup>
diff --git a/docs/rules/static-class-names-order.md b/docs/rules/static-class-names-order.md
index e2f5d83ca..c13f28fdd 100644
--- a/docs/rules/static-class-names-order.md
+++ b/docs/rules/static-class-names-order.md
@@ -5,11 +5,12 @@ title: vue/static-class-names-order
 description: enforce static class names order
 since: v6.1.0
 ---
+
 # vue/static-class-names-order
 
 > enforce static class names order
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
diff --git a/docs/rules/template-curly-spacing.md b/docs/rules/template-curly-spacing.md
index 22fce907a..26a1d3068 100644
--- a/docs/rules/template-curly-spacing.md
+++ b/docs/rules/template-curly-spacing.md
@@ -2,21 +2,29 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/template-curly-spacing
-description: require or disallow spacing around embedded expressions of template strings in `<template>`
+description: Require or disallow spacing around embedded expressions of template strings in `<template>`
 since: v7.0.0
 ---
+
 # vue/template-curly-spacing
 
-> require or disallow spacing around embedded expressions of template strings in `<template>`
+> Require or disallow spacing around embedded expressions of template strings in `<template>`
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+This rule is the same rule as [@stylistic/template-curly-spacing] rule but it applies to the expressions in `<template>`.
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+This rule extends the rule that [@stylistic/eslint-plugin] has, but if [@stylistic/eslint-plugin] is not installed, this rule extracts and extends the same rule from ESLint core.
+However, if neither is found, the rule cannot be used.
 
-This rule is the same rule as core [template-curly-spacing] rule but it applies to the expressions in `<template>`.
+[@stylistic/eslint-plugin]: https://eslint.style/packages/default
 
 ## :books: Further Reading
 
+- [@stylistic/template-curly-spacing]
 - [template-curly-spacing]
 
+[@stylistic/template-curly-spacing]: https://eslint.style/rules/template-curly-spacing
 [template-curly-spacing]: https://eslint.org/docs/rules/template-curly-spacing
 
 ## :rocket: Version
@@ -28,4 +36,4 @@ This rule was introduced in eslint-plugin-vue v7.0.0
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/template-curly-spacing.js)
 - [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/template-curly-spacing.js)
 
-<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/rules/template-curly-spacing)</sup>
+<sup>Taken with ❤️ [from ESLint Stylistic](https://eslint.style/rules/template-curly-spacing)</sup>
diff --git a/docs/rules/this-in-template.md b/docs/rules/this-in-template.md
index 50134fe02..7cd3e1251 100644
--- a/docs/rules/this-in-template.md
+++ b/docs/rules/this-in-template.md
@@ -5,12 +5,13 @@ title: vue/this-in-template
 description: disallow usage of `this` in template
 since: v3.13.0
 ---
+
 # vue/this-in-template
 
 > disallow usage of `this` in template
 
-- :gear: This rule is included in `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
@@ -24,7 +25,7 @@ This rule aims at preventing usage of `this` in Vue templates.
   <a :href="url">
     {{ text }}
   </a>
-  
+
   <!-- ✗ BAD -->
   <a :href="this.url">
     {{ this.text }}
@@ -55,7 +56,7 @@ This rule aims at preventing usage of `this` in Vue templates.
   <a :href="this.url">
     {{ this.text }}
   </a>
-  
+
   <!-- ✗ BAD -->
   <a :href="url">
     {{ text }}
diff --git a/docs/rules/use-v-on-exact.md b/docs/rules/use-v-on-exact.md
index e33e5b005..a13b8df30 100644
--- a/docs/rules/use-v-on-exact.md
+++ b/docs/rules/use-v-on-exact.md
@@ -5,11 +5,12 @@ title: vue/use-v-on-exact
 description: enforce usage of `exact` modifier on `v-on`
 since: v5.0.0
 ---
+
 # vue/use-v-on-exact
 
 > enforce usage of `exact` modifier on `v-on`
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 ## :book: Rule Details
 
@@ -32,11 +33,7 @@ This rule enforce usage of `exact` modifier on `v-on` when there is another `v-o
 
 ## :wrench: Options
 
-```json
-{
-  "vue/use-v-on-exact": ["error"]
-}
-```
+Nothing.
 
 ## :couple: Related Rules
 
@@ -45,7 +42,7 @@ This rule enforce usage of `exact` modifier on `v-on` when there is another `v-o
 
 ## :books: Further Reading
 
-- [Guide - .exact Modifier](https://v3.vuejs.org/guide/events.html#exact-modifier)
+- [Guide - .exact Modifier](https://vuejs.org/guide/essentials/event-handling.html#exact-modifier)
 
 ## :rocket: Version
 
diff --git a/docs/rules/v-bind-style.md b/docs/rules/v-bind-style.md
index 23be4a8cc..cdcd6f7d5 100644
--- a/docs/rules/v-bind-style.md
+++ b/docs/rules/v-bind-style.md
@@ -5,12 +5,13 @@ title: vue/v-bind-style
 description: enforce `v-bind` directive style
 since: v3.0.0
 ---
+
 # vue/v-bind-style
 
 > enforce `v-bind` directive style
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
@@ -21,10 +22,10 @@ This rule enforces `v-bind` directive style which you should use shorthand or lo
 ```vue
 <template>
   <!-- ✓ GOOD -->
-  <div :foo="bar"/>
+  <div :foo="bar" />
 
   <!-- ✗ BAD -->
-  <div v-bind:foo="bar"/>
+  <div v-bind:foo="bar" />
 </template>
 ```
 
@@ -32,16 +33,20 @@ This rule enforces `v-bind` directive style which you should use shorthand or lo
 
 ## :wrench: Options
 
-Default is set to `shorthand`.
-
 ```json
 {
-  "vue/v-bind-style": ["error", "shorthand" | "longform"]
+  "vue/v-bind-style": ["error", "shorthand" | "longform", {
+    "sameNameShorthand": "ignore" | "always" | "never"
+  }]
 }
 ```
 
 - `"shorthand"` (default) ... requires using shorthand.
 - `"longform"` ... requires using long form.
+- `sameNameShorthand` ... enforce the `v-bind` same-name shorthand style (Vue 3.4+).
+  - `"ignore"` (default) ... ignores the same-name shorthand style.
+  - `"always"` ... always enforces same-name shorthand where possible.
+  - `"never"` ... always disallow same-name shorthand where possible.
 
 ### `"longform"`
 
@@ -50,10 +55,42 @@ Default is set to `shorthand`.
 ```vue
 <template>
   <!-- ✓ GOOD -->
-  <div v-bind:foo="bar"/>
+  <div v-bind:foo="bar" />
+
+  <!-- ✗ BAD -->
+  <div :foo="bar" />
+</template>
+```
+
+</eslint-code-block>
+
+### `{ "sameNameShorthand": "always" }`
+
+<eslint-code-block fix :rules="{'vue/v-bind-style': ['error', 'shorthand', { 'sameNameShorthand': 'always' }]}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <div :foo />
+
+  <!-- ✗ BAD -->
+  <div :foo="foo" />
+</template>
+```
+
+</eslint-code-block>
+
+### `{ "sameNameShorthand": "never" }`
+
+<eslint-code-block fix :rules="{'vue/v-bind-style': ['error', 'shorthand', { 'sameNameShorthand': 'never' }]}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <div :foo="foo" />
 
   <!-- ✗ BAD -->
-  <div :foo="bar"/>
+  <div :foo />
 </template>
 ```
 
diff --git a/docs/rules/v-for-delimiter-style.md b/docs/rules/v-for-delimiter-style.md
index 7d9b5c07c..191dc921a 100644
--- a/docs/rules/v-for-delimiter-style.md
+++ b/docs/rules/v-for-delimiter-style.md
@@ -5,11 +5,12 @@ title: vue/v-for-delimiter-style
 description: enforce `v-for` directive's delimiter style
 since: v7.0.0
 ---
+
 # vue/v-for-delimiter-style
 
 > enforce `v-for` directive's delimiter style
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
@@ -60,7 +61,7 @@ Default is set to `in`.
 
 ## :books: Further Reading
 
-- [Guide - List Rendering](https://v3.vuejs.org/guide/list.html)
+- [Guide - List Rendering](https://vuejs.org/guide/essentials/list.html)
 
 ## :rocket: Version
 
diff --git a/docs/rules/v-if-else-key.md b/docs/rules/v-if-else-key.md
new file mode 100644
index 000000000..757e04321
--- /dev/null
+++ b/docs/rules/v-if-else-key.md
@@ -0,0 +1,60 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/v-if-else-key
+description: require key attribute for conditionally rendered repeated components
+since: v9.19.0
+---
+
+# vue/v-if-else-key
+
+> require key attribute for conditionally rendered repeated components
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule checks for components that are both repeated and conditionally rendered within the same scope. If such a component is found, the rule then checks for the presence of a 'key' directive. If the 'key' directive is missing, the rule issues a warning and offers a fix.
+
+This rule is not required in Vue 3, as the key is automatically assigned to the elements.
+
+<eslint-code-block fix :rules="{'vue/v-if-else-key': ['error']}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <my-component v-if="condition1" :key="one" />
+  <my-component v-else-if="condition2" :key="two" />
+  <my-component v-else :key="three" />
+
+  <!-- ✗ BAD -->
+  <my-component v-if="condition1" />
+  <my-component v-else-if="condition2" />
+  <my-component v-else />
+</template>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## :couple: Related Rules
+
+- [vue/require-v-for-key]
+
+[vue/require-v-for-key]: ./require-v-for-key.md
+
+## :books: Further Reading
+
+- [Guide (for v2) - v-if without key](https://v2.vuejs.org/v2/style-guide/#v-if-v-else-if-v-else-without-key-use-with-caution)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.19.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/v-if-else-key.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/v-if-else-key.js)
diff --git a/docs/rules/v-on-event-hyphenation.md b/docs/rules/v-on-event-hyphenation.md
index a462e414e..8c378ef42 100644
--- a/docs/rules/v-on-event-hyphenation.md
+++ b/docs/rules/v-on-event-hyphenation.md
@@ -5,12 +5,13 @@ title: vue/v-on-event-hyphenation
 description: enforce v-on event naming style on custom components in template
 since: v7.4.0
 ---
+
 # vue/v-on-event-hyphenation
 
 > enforce v-on event naming style on custom components in template
 
-- :gear: This rule is included in `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
@@ -21,12 +22,12 @@ This rule enforces using hyphenated v-on event names on custom components in Vue
 ```vue
 <template>
   <!-- ✓ GOOD -->
-  <MyComponent v-on:custom-event="handleEvent"/>
-  <MyComponent @custom-event="handleEvent"/>
+  <MyComponent v-on:custom-event="handleEvent" />
+  <MyComponent @custom-event="handleEvent" />
 
   <!-- ✗ BAD -->
-  <MyComponent v-on:customEvent="handleEvent"/>
-  <MyComponent @customEvent="handleEvent"/>
+  <MyComponent v-on:customEvent="handleEvent" />
+  <MyComponent @customEvent="handleEvent" />
 </template>
 ```
 
@@ -38,14 +39,16 @@ This rule enforces using hyphenated v-on event names on custom components in Vue
 {
   "vue/v-on-event-hyphenation": ["error", "always" | "never", {
     "autofix": false,
-    "ignore": []
+    "ignore": [],
+    "ignoreTags": []
   }]
 }
 ```
 
-- `"always"` (default) ... Use hyphenated name.
-- `"never"` ... Don't use hyphenated name.
-- `"ignore"` ... Array of ignored names
+- `"always"` (default) ... Use hyphenated event name.
+- `"never"` ... Don't use hyphenated event name.
+- `"ignore"` ... Array of event names that don't need to follow the specified casing.
+- `"ignoreTags"` ... Array of tag names whose events don't need to follow the specified casing.
 - `"autofix"` ... If `true`, enable autofix. If you are using Vue 2, we recommend that you do not use it due to its side effects.
 
 ### `"always"`
@@ -57,10 +60,10 @@ It errors on upper case letters.
 ```vue
 <template>
   <!-- ✓ GOOD -->
-  <MyComponent v-on:custom-event="handleEvent"/>
+  <MyComponent v-on:custom-event="handleEvent" />
 
   <!-- ✗ BAD -->
-  <MyComponent v-on:customEvent="handleEvent"/>
+  <MyComponent v-on:customEvent="handleEvent" />
 </template>
 ```
 
@@ -75,10 +78,10 @@ It errors on hyphens.
 ```vue
 <template>
   <!-- ✓ GOOD -->
-  <MyComponent v-on:customEvent="handleEvent"/>
+  <MyComponent v-on:customEvent="handleEvent" />
 
   <!-- ✗ BAD -->
-  <MyComponent v-on:custom-event="handleEvent"/>
+  <MyComponent v-on:custom-event="handleEvent" />
 </template>
 ```
 
@@ -93,11 +96,27 @@ Don't use hyphenated name but allow custom event names
 ```vue
 <template>
   <!-- ✓ GOOD -->
-  <MyComponent v-on:custom-event="handleEvent"/>
-  <MyComponent v-on:myEvent="handleEvent"/>
+  <MyComponent v-on:custom-event="handleEvent" />
+  <MyComponent v-on:myEvent="handleEvent" />
+
+  <!-- ✗ BAD -->
+  <MyComponent v-on:my-event="handleEvent" />
+</template>
+```
+
+</eslint-code-block>
+
+### `"never", { "ignoreTags": ["/^custom-/"] }`
+
+<eslint-code-block fix :rules="{'vue/v-on-event-hyphenation': ['error', 'never', { ignoreTags: ['/^custom-/'], autofix: true }]}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <custom-component v-on:my-event="handleEvent" />
 
   <!-- ✗ BAD -->
-  <MyComponent v-on:my-event="handleEvent"/>
+  <my-component v-on:my-event="handleEvent" />
 </template>
 ```
 
@@ -107,12 +126,13 @@ Don't use hyphenated name but allow custom event names
 
 - [vue/custom-event-name-casing](./custom-event-name-casing.md)
 - [vue/attribute-hyphenation](./attribute-hyphenation.md)
+- [vue/v-on-handler-style](./v-on-handler-style.md)
 
 ## :books: Further Reading
 
 - [Guide - Custom Events]
 
-[Guide - Custom Events]: https://v3.vuejs.org/guide/component-custom-events.html
+[Guide - Custom Events]: https://vuejs.org/guide/components/events.html
 
 ## :rocket: Version
 
diff --git a/docs/rules/v-on-function-call.md b/docs/rules/v-on-function-call.md
index edd48f084..51fe8714a 100644
--- a/docs/rules/v-on-function-call.md
+++ b/docs/rules/v-on-function-call.md
@@ -5,11 +5,12 @@ title: vue/v-on-function-call
 description: enforce or forbid parentheses after method calls without arguments in `v-on` directives
 since: v5.2.0
 ---
+
 # vue/v-on-function-call
 
 > enforce or forbid parentheses after method calls without arguments in `v-on` directives
 
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :no_entry: This rule was **removed** in eslint-plugin-vue v10.0.0 and replaced by [vue/v-on-handler-style](v-on-handler-style.md) rule.
 
 ## :book: Rule Details
 
@@ -20,14 +21,10 @@ This rule aims to enforce to bind methods to `v-on` or call methods on `v-on` wh
 ```vue
 <template>
   <!-- ✓ GOOD -->
-  <button v-on:click="closeModal">
-    Close
-  </button>
+  <button v-on:click="closeModal">Close</button>
 
   <!-- ✗ BAD -->
-  <button v-on:click="closeModal()">
-    Close
-  </button>
+  <button v-on:click="closeModal()">Close</button>
 </template>
 ```
 
@@ -59,14 +56,10 @@ Default is set to `never`.
 ```vue
 <template>
   <!-- ✓ GOOD -->
-  <button v-on:click="closeModal()">
-    Close
-  </button>
+  <button v-on:click="closeModal()">Close</button>
 
   <!-- ✗ BAD -->
-  <button v-on:click="closeModal">
-    Close
-  </button>
+  <button v-on:click="closeModal">Close</button>
 </template>
 ```
 
@@ -79,17 +72,11 @@ Default is set to `never`.
 ```vue
 <template>
   <!-- ✓ GOOD -->
-  <button v-on:click="closeModal">
-    Close
-  </button>
-  <button v-on:click="closeModal(arg)">
-    Close
-  </button>
+  <button v-on:click="closeModal">Close</button>
+  <button v-on:click="closeModal(arg)">Close</button>
 
   <!-- ✗ BAD -->
-  <button v-on:click="closeModal()">
-    Close
-  </button>
+  <button v-on:click="closeModal()">Close</button>
 </template>
 ```
 
@@ -102,17 +89,11 @@ Default is set to `never`.
 ```vue
 <template>
   <!-- ✓ GOOD -->
-  <button v-on:click="closeModal">
-    Close
-  </button>
-  <button v-on:click="closeModal() /* comment */">
-    Close
-  </button>
+  <button v-on:click="closeModal">Close</button>
+  <button v-on:click="closeModal() /* comment */">Close</button>
 
   <!-- ✗ BAD -->
-  <button v-on:click="closeModal()">
-    Close
-  </button>
+  <button v-on:click="closeModal()">Close</button>
 </template>
 ```
 
diff --git a/docs/rules/v-on-handler-style.md b/docs/rules/v-on-handler-style.md
new file mode 100644
index 000000000..065ebd827
--- /dev/null
+++ b/docs/rules/v-on-handler-style.md
@@ -0,0 +1,224 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/v-on-handler-style
+description: enforce writing style for handlers in `v-on` directives
+since: v9.7.0
+---
+
+# vue/v-on-handler-style
+
+> enforce writing style for handlers in `v-on` directives
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule aims to enforce a consistent style in `v-on` event handlers:
+
+```vue
+<!-- Method handler: -->
+<button v-on:click="handler" />
+
+<!-- Inline handler: -->
+<button v-on:click="handler()" />
+
+<!-- Inline function: -->
+<button v-on:click="() => handler()" />
+```
+
+<eslint-code-block fix :rules="{'vue/v-on-handler-style': ['error']}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <button v-on:click="handler" />
+
+  <!-- ✗ BAD -->
+  <button v-on:click="handler()" />
+  <button v-on:click="() => handler()" />
+</template>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+```json
+{
+  "vue/v-on-handler-style": ["error",
+    ["method", "inline-function"], // ["method", "inline-function"] | ["method", "inline"] | "inline-function" | "inline"
+    {
+      "ignoreIncludesComment": false
+    }
+  ]
+}
+```
+
+- First option ... Specifies the name of an allowed style. Default is `["method", "inline-function"]`.
+  - `["method", "inline-function"]` ... Allow handlers by method binding. e.g. `v-on:click="handler"`. Allow inline functions where method handlers cannot be used. e.g. `v-on:click="() => handler(listItem)"`.
+  - `["method", "inline"]` ... Allow handlers by method binding. e.g. `v-on:click="handler"`. Allow inline handlers where method handlers cannot be used. e.g. `v-on:click="handler(listItem)"`.
+  - `"inline-function"` ... Allow inline functions. e.g. `v-on:click="() => handler()"`
+  - `"inline"` ... Allow inline handlers. e.g. `v-on:click="handler()"`
+- Second option
+  - `ignoreIncludesComment` ... If `true`, do not report inline handlers or inline functions containing comments, even if the preferred style is `"method"`. Default is `false`.
+
+### `["method", "inline-function"]` (Default)
+
+<eslint-code-block fix :rules="{'vue/v-on-handler-style': ['error', ['method', 'inline-function']]}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <button v-on:click="handler" />
+  <template v-for="e in list">
+    <button v-on:click="e" />
+    <button v-on:click="() => handler(e)" />
+  </template>
+
+  <!-- ✗ BAD -->
+  <button v-on:click="handler()" />
+  <button v-on:click="count++" />
+  <button v-on:click="() => handler()" />
+  <button v-on:click="() => count++" />
+  <button v-on:click="(a, b) => handler(a, b)" />
+  <template v-for="e in list">
+    <button v-on:click="e()" />
+    <button v-on:click="() => e()" />
+    <button v-on:click="handler(e)" />
+  </template>
+</template>
+```
+
+</eslint-code-block>
+
+### `["method", "inline"]`
+
+<eslint-code-block fix :rules="{'vue/v-on-handler-style': ['error', ['method', 'inline']]}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <button v-on:click="handler" />
+  <template v-for="e in list">
+    <button v-on:click="e" />
+    <button v-on:click="handler(e)" />
+  </template>
+
+  <!-- ✗ BAD -->
+  <button v-on:click="handler()" />
+  <button v-on:click="count++" />
+  <button v-on:click="() => handler()" />
+  <button v-on:click="() => count++" />
+  <button v-on:click="(a, b) => handler(a, b)" />
+  <template v-for="e in list">
+    <button v-on:click="e()" />
+    <button v-on:click="() => e()" />
+    <button v-on:click="() => handler(e)" />
+  </template>
+</template>
+```
+
+</eslint-code-block>
+
+### `"inline-function"`
+
+<eslint-code-block fix :rules="{'vue/v-on-handler-style': ['error', 'inline-function']}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <button v-on:click="() => handler()" />
+  <button v-on:click="() => count++" />
+
+  <!-- ✗ BAD -->
+  <button v-on:click="handler" />
+  <button v-on:click="handler()" />
+  <button v-on:click="handler($event)" />
+  <button v-on:click="count++" />
+</template>
+```
+
+</eslint-code-block>
+
+### `"inline"`
+
+<eslint-code-block fix :rules="{'vue/v-on-handler-style': ['error', 'inline']}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <button v-on:click="handler()" />
+  <button v-on:click="handler($event)" />
+  <button v-on:click="count++" />
+
+  <!-- ✗ BAD -->
+  <button v-on:click="handler" />
+  <button v-on:click="() => handler()" />
+  <button v-on:click="(foo) => handler(foo)" />
+  <button v-on:click="(foo, bar) => handler(foo, bar)" />
+  <button v-on:click="() => count++" />
+</template>
+```
+
+</eslint-code-block>
+
+### `["method", "inline-function"], { "ignoreIncludesComment": true }`
+
+<eslint-code-block fix :rules="{'vue/v-on-handler-style': ['error', ['method', 'inline-function'], {ignoreIncludesComment: true}]}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <button v-on:click="handler" />
+  <button v-on:click="() => handler() /* comment */" />
+
+  <!-- ✗ BAD -->
+  <button v-on:click="handler()" />
+  <button v-on:click="() => handler()" />
+  <button v-on:click="handler() /* comment */" />
+</template>
+```
+
+</eslint-code-block>
+
+### `["method", "inline"], { "ignoreIncludesComment": true }`
+
+<eslint-code-block fix :rules="{'vue/v-on-handler-style': ['error', ['method', 'inline'], {ignoreIncludesComment: true}]}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <button v-on:click="handler" />
+  <button v-on:click="handler() /* comment */" />
+
+  <!-- ✗ BAD -->
+  <button v-on:click="handler()" />
+  <button v-on:click="() => handler()" />
+  <button v-on:click="() => handler() /* comment */" />
+</template>
+```
+
+</eslint-code-block>
+
+## :couple: Related Rules
+
+- [vue/v-on-style](./v-on-style.md)
+- [vue/v-on-event-hyphenation](./v-on-event-hyphenation.md)
+
+## :books: Further Reading
+
+- [Guide - Inline Handlers]
+- [Guide - Method Handlers]
+
+[Guide - Inline Handlers]: https://vuejs.org/guide/essentials/event-handling.html#inline-handlers
+[Guide - Method Handlers]: https://vuejs.org/guide/essentials/event-handling.html#method-handlers
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.7.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/v-on-handler-style.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/v-on-handler-style.js)
diff --git a/docs/rules/v-on-style.md b/docs/rules/v-on-style.md
index 73e36ce33..019251009 100644
--- a/docs/rules/v-on-style.md
+++ b/docs/rules/v-on-style.md
@@ -5,12 +5,13 @@ title: vue/v-on-style
 description: enforce `v-on` directive style
 since: v3.0.0
 ---
+
 # vue/v-on-style
 
 > enforce `v-on` directive style
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
@@ -21,10 +22,10 @@ This rule enforces `v-on` directive style which you should use shorthand or long
 ```vue
 <template>
   <!-- ✓ GOOD -->
-  <div @click="foo"/>
+  <div @click="foo" />
 
   <!-- ✗ BAD -->
-  <div v-on:click="foo"/>
+  <div v-on:click="foo" />
 </template>
 ```
 
@@ -50,15 +51,19 @@ Default is set to `shorthand`.
 ```vue
 <template>
   <!-- ✓ GOOD -->
-  <div v-on:click="foo"/>
+  <div v-on:click="foo" />
 
   <!-- ✗ BAD -->
-  <div @click="foo"/>
+  <div @click="foo" />
 </template>
 ```
 
 </eslint-code-block>
 
+## :couple: Related Rules
+
+- [vue/v-on-handler-style](./v-on-handler-style.md)
+
 ## :books: Further Reading
 
 - [Style guide - Directive shorthands](https://vuejs.org/style-guide/rules-strongly-recommended.html#directive-shorthands)
diff --git a/docs/rules/v-slot-style.md b/docs/rules/v-slot-style.md
index 3f2e03094..fbb931c89 100644
--- a/docs/rules/v-slot-style.md
+++ b/docs/rules/v-slot-style.md
@@ -5,12 +5,13 @@ title: vue/v-slot-style
 description: enforce `v-slot` directive style
 since: v6.0.0
 ---
+
 # vue/v-slot-style
 
 > enforce `v-slot` directive style
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
@@ -22,7 +23,7 @@ This rule enforces `v-slot` directive style which you should use shorthand or lo
 <template>
   <!-- ✓ GOOD -->
   <my-component v-slot="data">
-    {{data}}
+    {{ data }}
   </my-component>
   <my-component>
     <template #default>content</template>
@@ -32,7 +33,7 @@ This rule enforces `v-slot` directive style which you should use shorthand or lo
 
   <!-- ✗ BAD -->
   <my-component #default="data">
-    {{data}}
+    {{ data }}
   </my-component>
   <my-component>
     <template v-slot>content</template>
@@ -68,7 +69,7 @@ Each value means:
 - `"longform"` ... use `v-slot:` directive notation. E.g. `v-slot:default`, `v-slot:named`, ...
 - `"v-slot"` ... use `v-slot` without that argument. This is shorter than `#default` shorthand.
 
-And a string option is supported to be consistent to similar `vue/v-bind-style` and `vue/v-on-style`.
+And a string option is supported to be consistent to similar [`vue/v-bind-style`](./v-bind-style.md) and [`vue/v-on-style`](./v-on-style.md).
 
 - `["error", "longform"]` is same as `["error", { atComponent: "longform", default: "longform", named: "longform" }]`.
 - `["error", "shorthand"]` is same as `["error", { atComponent: "shorthand", default: "shorthand", named: "shorthand" }]`.
@@ -81,7 +82,7 @@ And a string option is supported to be consistent to similar `vue/v-bind-style`
 <template>
   <!-- ✓ GOOD -->
   <my-component v-slot:default="data">
-    {{data}}
+    {{ data }}
   </my-component>
   <my-component>
     <template v-slot:default>content</template>
@@ -91,7 +92,7 @@ And a string option is supported to be consistent to similar `vue/v-bind-style`
 
   <!-- ✗ BAD -->
   <my-component v-slot="data">
-    {{data}}
+    {{ data }}
   </my-component>
   <my-component>
     <template #default>content</template>
diff --git a/docs/rules/valid-attribute-name.md b/docs/rules/valid-attribute-name.md
index 6698a7b9e..599e84d4e 100644
--- a/docs/rules/valid-attribute-name.md
+++ b/docs/rules/valid-attribute-name.md
@@ -5,11 +5,12 @@ title: vue/valid-attribute-name
 description: require valid attribute names
 since: v9.0.0
 ---
+
 # vue/valid-attribute-name
 
 > require valid attribute names
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 ## :book: Rule Details
 
diff --git a/docs/rules/valid-define-emits.md b/docs/rules/valid-define-emits.md
index 5718794ca..062403a63 100644
--- a/docs/rules/valid-define-emits.md
+++ b/docs/rules/valid-define-emits.md
@@ -5,11 +5,12 @@ title: vue/valid-define-emits
 description: enforce valid `defineEmits` compiler macro
 since: v7.13.0
 ---
+
 # vue/valid-define-emits
 
 > enforce valid `defineEmits` compiler macro
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 This rule checks whether `defineEmits` compiler macro is valid.
 
@@ -17,7 +18,7 @@ This rule checks whether `defineEmits` compiler macro is valid.
 
 This rule reports `defineEmits` compiler macros in the following cases:
 
-- `defineEmits` are referencing locally declared variables.
+- `defineEmits` is referencing locally declared variables.
 - `defineEmits` has both a literal type and an argument. e.g. `defineEmits<(e: 'foo')=>void>(['bar'])`
 - `defineEmits` has been called multiple times.
 - Custom events are defined in both `defineEmits` and `export default {}`.
@@ -27,8 +28,8 @@ This rule reports `defineEmits` compiler macros in the following cases:
 
 ```vue
 <script setup>
-  /* ✓ GOOD */
-  defineEmits({ notify: null })
+/* ✓ GOOD */
+defineEmits({ notify: null })
 </script>
 ```
 
@@ -38,29 +39,33 @@ This rule reports `defineEmits` compiler macros in the following cases:
 
 ```vue
 <script setup>
-  /* ✓ GOOD */
-  defineEmits(['notify'])
+/* ✓ GOOD */
+defineEmits(['notify'])
 </script>
 ```
 
 </eslint-code-block>
 
+<eslint-code-block :rules="{'vue/valid-define-emits': ['error']}">
+
 ```vue
 <script setup lang="ts">
-  /* ✓ GOOD */
-  defineEmits<(e: 'notify')=>void>()
+/* ✓ GOOD */
+defineEmits<(e: 'notify') => void>()
 </script>
 ```
 
+</eslint-code-block>
+
 <eslint-code-block :rules="{'vue/valid-define-emits': ['error']}">
 
 ```vue
 <script>
-  const def = { notify: null }
+const def = { notify: null }
 </script>
 <script setup>
-  /* ✓ GOOD */
-  defineEmits(def)
+/* ✓ GOOD */
+defineEmits(def)
 </script>
 ```
 
@@ -70,28 +75,32 @@ This rule reports `defineEmits` compiler macros in the following cases:
 
 ```vue
 <script setup>
-  /* ✗ BAD */
-  const def = { notify: null }
-  defineEmits(def)
+/* ✗ BAD */
+const def = { notify: null }
+defineEmits(def)
 </script>
 ```
 
 </eslint-code-block>
 
+<eslint-code-block :rules="{'vue/valid-define-emits': ['error']}">
+
 ```vue
 <script setup lang="ts">
-  /* ✗ BAD */
-  defineEmits<(e: 'notify')=>void>({ submit: null })
+/* ✗ BAD */
+defineEmits<(e: 'notify') => void>({ submit: null })
 </script>
 ```
 
+</eslint-code-block>
+
 <eslint-code-block :rules="{'vue/valid-define-emits': ['error']}">
 
 ```vue
 <script setup>
-  /* ✗ BAD */
-  defineEmits({ notify: null })
-  defineEmits({ submit: null })
+/* ✗ BAD */
+defineEmits({ notify: null })
+defineEmits({ submit: null })
 </script>
 ```
 
@@ -101,13 +110,13 @@ This rule reports `defineEmits` compiler macros in the following cases:
 
 ```vue
 <script>
-  export default {
-    emits: { notify: null }
-  }
+export default {
+  emits: { notify: null }
+}
 </script>
 <script setup>
-  /* ✗ BAD */
-  defineEmits({ submit: null })
+/* ✗ BAD */
+defineEmits({ submit: null })
 </script>
 ```
 
@@ -117,8 +126,8 @@ This rule reports `defineEmits` compiler macros in the following cases:
 
 ```vue
 <script setup>
-  /* ✗ BAD */
-  defineEmits()
+/* ✗ BAD */
+defineEmits()
 </script>
 ```
 
@@ -128,6 +137,12 @@ This rule reports `defineEmits` compiler macros in the following cases:
 
 Nothing.
 
+## :couple: Related Rules
+
+- [vue/define-emits-declaration](./define-emits-declaration.md)
+- [vue/valid-define-options](./valid-define-options.md)
+- [vue/valid-define-props](./valid-define-props.md)
+
 ## :rocket: Version
 
 This rule was introduced in eslint-plugin-vue v7.13.0
diff --git a/docs/rules/valid-define-options.md b/docs/rules/valid-define-options.md
new file mode 100644
index 000000000..a81d5ad96
--- /dev/null
+++ b/docs/rules/valid-define-options.md
@@ -0,0 +1,125 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/valid-define-options
+description: enforce valid `defineOptions` compiler macro
+since: v9.13.0
+---
+
+# vue/valid-define-options
+
+> enforce valid `defineOptions` compiler macro
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+
+This rule checks whether `defineOptions` compiler macro is valid.
+
+## :book: Rule Details
+
+This rule reports `defineOptions` compiler macros in the following cases:
+
+- `defineOptions` is referencing locally declared variables.
+- `defineOptions` has been called multiple times.
+- Options are not defined in `defineOptions`.
+- `defineOptions` has type arguments.
+- `defineOptions` has `props`, `emits`, `expose` or `slots` options.
+
+<eslint-code-block :rules="{'vue/valid-define-options': ['error']}">
+
+```vue
+<script setup>
+/* ✓ GOOD */
+defineOptions({ name: 'foo' })
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/valid-define-options': ['error']}">
+
+```vue
+<script>
+const def = { name: 'foo' }
+</script>
+<script setup>
+/* ✓ GOOD */
+defineOptions(def)
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/valid-define-options': ['error']}">
+
+```vue
+<script setup>
+/* ✗ BAD */
+const def = { name: 'foo' }
+defineOptions(def)
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/valid-define-options': ['error']}">
+
+```vue
+<script setup>
+/* ✗ BAD */
+defineOptions({ name: 'foo' })
+defineOptions({ inheritAttrs: false })
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/valid-define-options': ['error']}">
+
+```vue
+<script setup>
+/* ✗ BAD */
+defineOptions()
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/valid-define-options': ['error']}">
+
+```vue
+<script setup lang="ts">
+/* ✗ BAD */
+defineOptions<{ name: 'Foo' }>()
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/valid-define-options': ['error']}">
+
+```vue
+<script setup>
+/* ✗ BAD */
+defineOptions({ props: { msg: String } })
+</script>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## :couple: Related Rules
+
+- [vue/valid-define-emits](./valid-define-emits.md)
+- [vue/valid-define-props](./valid-define-props.md)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.13.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-define-options.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-define-options.js)
diff --git a/docs/rules/valid-define-props.md b/docs/rules/valid-define-props.md
index bd7d5f75b..1af111c9a 100644
--- a/docs/rules/valid-define-props.md
+++ b/docs/rules/valid-define-props.md
@@ -5,11 +5,12 @@ title: vue/valid-define-props
 description: enforce valid `defineProps` compiler macro
 since: v7.13.0
 ---
+
 # vue/valid-define-props
 
 > enforce valid `defineProps` compiler macro
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 This rule checks whether `defineProps` compiler macro is valid.
 
@@ -17,7 +18,7 @@ This rule checks whether `defineProps` compiler macro is valid.
 
 This rule reports `defineProps` compiler macros in the following cases:
 
-- `defineProps` are referencing locally declared variables.
+- `defineProps` is referencing locally declared variables.
 - `defineProps` has both a literal type and an argument. e.g. `defineProps<{/*props*/}>({/*props*/})`
 - `defineProps` has been called multiple times.
 - Props are defined in both `defineProps` and `export default {}`.
@@ -27,8 +28,8 @@ This rule reports `defineProps` compiler macros in the following cases:
 
 ```vue
 <script setup>
-  /* ✓ GOOD */
-  defineProps({ msg: String })
+/* ✓ GOOD */
+defineProps({ msg: String })
 </script>
 ```
 
@@ -38,29 +39,33 @@ This rule reports `defineProps` compiler macros in the following cases:
 
 ```vue
 <script setup>
-  /* ✓ GOOD */
-  defineProps(['msg'])
+/* ✓ GOOD */
+defineProps(['msg'])
 </script>
 ```
 
 </eslint-code-block>
 
+<eslint-code-block :rules="{'vue/valid-define-props': ['error']}">
+
 ```vue
 <script setup lang="ts">
-  /* ✓ GOOD */
-  defineProps<{ msg?:string }>()
+/* ✓ GOOD */
+defineProps<{ msg?: string }>()
 </script>
 ```
 
+</eslint-code-block>
+
 <eslint-code-block :rules="{'vue/valid-define-props': ['error']}">
 
 ```vue
 <script>
-  const def = { msg: String }
+const def = { msg: String }
 </script>
 <script setup>
-  /* ✓ GOOD */
-  defineProps(def)
+/* ✓ GOOD */
+defineProps(def)
 </script>
 ```
 
@@ -70,28 +75,32 @@ This rule reports `defineProps` compiler macros in the following cases:
 
 ```vue
 <script setup>
-  /* ✗ BAD */
-  const def = { msg: String }
-  defineProps(def)
+/* ✗ BAD */
+const def = { msg: String }
+defineProps(def)
 </script>
 ```
 
 </eslint-code-block>
 
+<eslint-code-block :rules="{'vue/valid-define-props': ['error']}">
+
 ```vue
 <script setup lang="ts">
-  /* ✗ BAD */
-  defineProps<{ msg?:string }>({ msg: String })
+/* ✗ BAD */
+defineProps<{ msg?: string }>({ msg: String })
 </script>
 ```
 
+</eslint-code-block>
+
 <eslint-code-block :rules="{'vue/valid-define-props': ['error']}">
 
 ```vue
 <script setup>
-  /* ✗ BAD */
-  defineProps({ msg: String })
-  defineProps({ count: Number })
+/* ✗ BAD */
+defineProps({ msg: String })
+defineProps({ count: Number })
 </script>
 ```
 
@@ -101,13 +110,13 @@ This rule reports `defineProps` compiler macros in the following cases:
 
 ```vue
 <script>
-  export default {
-    props: { msg: String }
-  }
+export default {
+  props: { msg: String }
+}
 </script>
 <script setup>
-  /* ✗ BAD */
-  defineProps({ count: Number })
+/* ✗ BAD */
+defineProps({ count: Number })
 </script>
 ```
 
@@ -117,8 +126,8 @@ This rule reports `defineProps` compiler macros in the following cases:
 
 ```vue
 <script setup>
-  /* ✗ BAD */
-  defineProps()
+/* ✗ BAD */
+defineProps()
 </script>
 ```
 
@@ -128,6 +137,12 @@ This rule reports `defineProps` compiler macros in the following cases:
 
 Nothing.
 
+## :couple: Related Rules
+
+- [vue/define-props-declaration](./define-props-declaration.md)
+- [vue/valid-define-emits](./valid-define-emits.md)
+- [vue/valid-define-options](./valid-define-options.md)
+
 ## :rocket: Version
 
 This rule was introduced in eslint-plugin-vue v7.13.0
diff --git a/docs/rules/valid-model-definition.md b/docs/rules/valid-model-definition.md
index 595a67931..201fc1201 100644
--- a/docs/rules/valid-model-definition.md
+++ b/docs/rules/valid-model-definition.md
@@ -5,11 +5,13 @@ title: vue/valid-model-definition
 description: require valid keys in model option
 since: v9.0.0
 ---
+
 # vue/valid-model-definition
 
 > require valid keys in model option
 
-- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+- :no_entry_sign: This rule was **deprecated**.
+- :gear: This rule is included in all of `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 ## :book: Rule Details
 
diff --git a/docs/rules/valid-next-tick.md b/docs/rules/valid-next-tick.md
index e67cc87a4..b2c95980b 100644
--- a/docs/rules/valid-next-tick.md
+++ b/docs/rules/valid-next-tick.md
@@ -5,12 +5,13 @@ title: vue/valid-next-tick
 description: enforce valid `nextTick` function calls
 since: v7.5.0
 ---
+
 # vue/valid-next-tick
 
 > enforce valid `nextTick` function calls
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 - :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
 
 ## :book: Rule Details
@@ -81,8 +82,8 @@ Nothing.
 - [`Vue.nextTick` API in Vue 2](https://v2.vuejs.org/v2/api/#Vue-nextTick)
 - [`vm.$nextTick` API in Vue 2](https://v2.vuejs.org/v2/api/#vm-nextTick)
 - [Global API Treeshaking](https://v3-migration.vuejs.org/breaking-changes/global-api-treeshaking.html)
-- [Global `nextTick` API in Vue 3](https://v3.vuejs.org/api/global-api.html#nexttick)
-- [Instance `$nextTick` API in Vue 3](https://v3.vuejs.org/api/instance-methods.html#nexttick)
+- [Global `nextTick` API in Vue 3](https://vuejs.org/api/general.html#nexttick)
+- [Instance `$nextTick` API in Vue 3](https://vuejs.org/api/component-instance.html#nexttick)
 
 ## :rocket: Version
 
diff --git a/docs/rules/valid-template-root.md b/docs/rules/valid-template-root.md
index 14a56edc0..9dd89a287 100644
--- a/docs/rules/valid-template-root.md
+++ b/docs/rules/valid-template-root.md
@@ -5,11 +5,12 @@ title: vue/valid-template-root
 description: enforce valid template root
 since: v3.11.0
 ---
+
 # vue/valid-template-root
 
 > enforce valid template root
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 This rule checks whether every template root is valid.
 
diff --git a/docs/rules/valid-v-bind-sync.md b/docs/rules/valid-v-bind-sync.md
index 878dc12c2..19129fb3d 100644
--- a/docs/rules/valid-v-bind-sync.md
+++ b/docs/rules/valid-v-bind-sync.md
@@ -5,11 +5,13 @@ title: vue/valid-v-bind-sync
 description: enforce valid `.sync` modifier on `v-bind` directives
 since: v7.0.0
 ---
+
 # vue/valid-v-bind-sync
 
 > enforce valid `.sync` modifier on `v-bind` directives
 
-- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+- :no_entry_sign: This rule was **deprecated**.
+- :gear: This rule is included in all of `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 This rule checks whether every `.sync` modifier on `v-bind` directives is valid.
 
@@ -27,12 +29,12 @@ This rule reports `.sync` modifier on `v-bind` directives in the following cases
 ```vue
 <template>
   <!-- ✓ GOOD -->
-  <MyComponent v-bind:aaa.sync="foo"/>
-  <MyComponent :aaa.sync="foo"/>
+  <MyComponent v-bind:aaa.sync="foo" />
+  <MyComponent :aaa.sync="foo" />
 
   <div v-for="todo in todos">
-    <MyComponent v-bind:aaa.sync="todo.name"/>
-    <MyComponent :aaa.sync="todo.name"/>
+    <MyComponent v-bind:aaa.sync="todo.name" />
+    <MyComponent :aaa.sync="todo.name" />
   </div>
 
   <!-- ✗ BAD -->
@@ -42,8 +44,8 @@ This rule reports `.sync` modifier on `v-bind` directives in the following cases
   <MyComponent :aaa.sync="a?.b.c" />
   <MyComponent :aaa.sync="(a?.b).c" />
 
-  <input v-bind:aaa.sync="foo">
-  <input :aaa.sync="foo">
+  <input v-bind:aaa.sync="foo" />
+  <input :aaa.sync="foo" />
 
   <div v-for="todo in todos">
     <MyComponent v-bind:aaa.sync="todo" />
diff --git a/docs/rules/valid-v-bind.md b/docs/rules/valid-v-bind.md
index 32a07aa60..64badbb6a 100644
--- a/docs/rules/valid-v-bind.md
+++ b/docs/rules/valid-v-bind.md
@@ -5,11 +5,12 @@ title: vue/valid-v-bind
 description: enforce valid `v-bind` directives
 since: v3.11.0
 ---
+
 # vue/valid-v-bind
 
 > enforce valid `v-bind` directives
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 This rule checks whether every `v-bind` directive is valid.
 
@@ -27,15 +28,14 @@ This rule does not report `v-bind` directives which do not have their argument (
 ```vue
 <template>
   <!-- ✓ GOOD -->
-  <div v-bind="foo"/>
-  <div v-bind:aaa="foo"/>
-  <div :aaa="foo"/>
-  <div :aaa.prop="foo"/>
+  <div v-bind="foo" />
+  <div v-bind:aaa="foo" />
+  <div :aaa="foo" />
+  <div :aaa.prop="foo" />
 
   <!-- ✗ BAD -->
-  <div v-bind/>
-  <div :aaa/>
-  <div v-bind:aaa.bbb="foo"/>
+  <div v-bind />
+  <div v-bind:aaa.bbb="foo" />
 </template>
 ```
 
diff --git a/docs/rules/valid-v-cloak.md b/docs/rules/valid-v-cloak.md
index c992edd6e..57c60edcf 100644
--- a/docs/rules/valid-v-cloak.md
+++ b/docs/rules/valid-v-cloak.md
@@ -5,11 +5,12 @@ title: vue/valid-v-cloak
 description: enforce valid `v-cloak` directives
 since: v3.11.0
 ---
+
 # vue/valid-v-cloak
 
 > enforce valid `v-cloak` directives
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 This rule checks whether every `v-cloak` directive is valid.
 
@@ -26,12 +27,12 @@ This rule reports `v-cloak` directives in the following cases:
 ```vue
 <template>
   <!-- ✓ GOOD -->
-  <div v-cloak/>
+  <div v-cloak />
 
   <!-- ✗ BAD -->
-  <div v-cloak:aaa/>
-  <div v-cloak.bbb/>
-  <div v-cloak="ccc"/>
+  <div v-cloak:aaa />
+  <div v-cloak.bbb />
+  <div v-cloak="ccc" />
 </template>
 ```
 
diff --git a/docs/rules/valid-v-else-if.md b/docs/rules/valid-v-else-if.md
index 5b7b9f63c..13959825b 100644
--- a/docs/rules/valid-v-else-if.md
+++ b/docs/rules/valid-v-else-if.md
@@ -5,11 +5,12 @@ title: vue/valid-v-else-if
 description: enforce valid `v-else-if` directives
 since: v3.11.0
 ---
+
 # vue/valid-v-else-if
 
 > enforce valid `v-else-if` directives
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 This rule checks whether every `v-else-if` directive is valid.
 
@@ -28,14 +29,14 @@ This rule reports `v-else-if` directives in the following cases:
 ```vue
 <template>
   <!-- ✓ GOOD -->
-  <div v-if="foo"/>
-  <div v-else-if="bar"/>
+  <div v-if="foo" />
+  <div v-else-if="bar" />
 
   <!-- ✗ BAD -->
-  <div /><div v-else-if="foo"/>
-  <div v-if="x"/><div v-else-if/>
-  <div v-if="x"/><div v-else-if:aaa="foo"/>
-  <div v-if="x"/><div v-else-if.bbb="foo"/>
+  <div /><div v-else-if="foo" />
+  <div v-if="x" /><div v-else-if />
+  <div v-if="x" /><div v-else-if:aaa="foo" />
+  <div v-if="x" /><div v-else-if.bbb="foo" />
 </template>
 ```
 
diff --git a/docs/rules/valid-v-else.md b/docs/rules/valid-v-else.md
index b3424ad28..23df5787b 100644
--- a/docs/rules/valid-v-else.md
+++ b/docs/rules/valid-v-else.md
@@ -5,11 +5,12 @@ title: vue/valid-v-else
 description: enforce valid `v-else` directives
 since: v3.11.0
 ---
+
 # vue/valid-v-else
 
 > enforce valid `v-else` directives
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 This rule checks whether every `v-else` directive is valid.
 
@@ -28,14 +29,14 @@ This rule reports `v-else` directives in the following cases:
 ```vue
 <template>
   <!-- ✓ GOOD -->
-  <div v-if="foo"/>
-  <div v-else/>
+  <div v-if="foo" />
+  <div v-else />
 
   <!-- ✗ BAD -->
-  <div v-else/>
-  <div v-if="x"/><div v-else="foo"/>
-  <div v-if="x"/><div v-else:aaa/>
-  <div v-if="x"/><div v-else.bbb/>
+  <div v-else />
+  <div v-if="x" /><div v-else="foo" />
+  <div v-if="x" /><div v-else:aaa />
+  <div v-if="x" /><div v-else.bbb />
 </template>
 ```
 
diff --git a/docs/rules/valid-v-for.md b/docs/rules/valid-v-for.md
index 843682626..f0e49c5e1 100644
--- a/docs/rules/valid-v-for.md
+++ b/docs/rules/valid-v-for.md
@@ -5,11 +5,12 @@ title: vue/valid-v-for
 description: enforce valid `v-for` directives
 since: v3.11.0
 ---
+
 # vue/valid-v-for
 
 > enforce valid `v-for` directives
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 This rule checks whether every `v-for` directive is valid.
 
diff --git a/docs/rules/valid-v-html.md b/docs/rules/valid-v-html.md
index 8c1932290..75e3c233d 100644
--- a/docs/rules/valid-v-html.md
+++ b/docs/rules/valid-v-html.md
@@ -5,11 +5,12 @@ title: vue/valid-v-html
 description: enforce valid `v-html` directives
 since: v3.11.0
 ---
+
 # vue/valid-v-html
 
 > enforce valid `v-html` directives
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 This rule checks whether every `v-html` directive is valid.
 
@@ -26,12 +27,12 @@ This rule reports `v-html` directives in the following cases:
 ```vue
 <template>
   <!-- ✓ GOOD -->
-  <div v-html="foo"/>
+  <div v-html="foo" />
 
   <!-- ✗ BAD -->
-  <div v-html/>
-  <div v-html:aaa="foo"/>
-  <div v-html.bbb="foo"/>
+  <div v-html />
+  <div v-html:aaa="foo" />
+  <div v-html.bbb="foo" />
 </template>
 ```
 
diff --git a/docs/rules/valid-v-if.md b/docs/rules/valid-v-if.md
index f059aab30..8e45793f8 100644
--- a/docs/rules/valid-v-if.md
+++ b/docs/rules/valid-v-if.md
@@ -5,11 +5,12 @@ title: vue/valid-v-if
 description: enforce valid `v-if` directives
 since: v3.11.0
 ---
+
 # vue/valid-v-if
 
 > enforce valid `v-if` directives
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 This rule checks whether every `v-if` directive is valid.
 
@@ -27,14 +28,14 @@ This rule reports `v-if` directives in the following cases:
 ```vue
 <template>
   <!-- ✓ GOOD -->
-  <div v-if="foo"/>
-  <div v-else-if="bar"/>
-  <div v-else/>
+  <div v-if="foo" />
+  <div v-else-if="bar" />
+  <div v-else />
 
   <!-- ✗ BAD -->
-  <div v-if/>
-  <div v-if:aaa="foo"/>
-  <div v-if.bbb="foo"/>
+  <div v-if />
+  <div v-if:aaa="foo" />
+  <div v-if.bbb="foo" />
   <div
     v-if="foo"
     v-else
diff --git a/docs/rules/valid-v-is.md b/docs/rules/valid-v-is.md
index 33c7fa3d1..294b55f5b 100644
--- a/docs/rules/valid-v-is.md
+++ b/docs/rules/valid-v-is.md
@@ -5,11 +5,12 @@ title: vue/valid-v-is
 description: enforce valid `v-is` directives
 since: v7.0.0
 ---
+
 # vue/valid-v-is
 
 > enforce valid `v-is` directives
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
 
 This rule checks whether every `v-is` directive is valid.
 
@@ -59,7 +60,7 @@ Nothing.
 
 ## :books: Further Reading
 
-- [API - v-is](https://v3.vuejs.org/api/directives.html#v-is)
+- [API - v-is (Recent)](https://github.com/vuejs/docs/blob/8b4f11a4e94d01c7f1c91a60ceaa5b89d6b6de9f/src/api/built-in-directives.md#v-is-)
 - [API - v-is (Old)](https://github.com/vuejs/docs-next/blob/008613756c3d781128d96b64a2d27f7598f8f548/src/api/directives.md#v-is)
 
 ## :rocket: Version
diff --git a/docs/rules/valid-v-memo.md b/docs/rules/valid-v-memo.md
index 620313698..c276eb8b4 100644
--- a/docs/rules/valid-v-memo.md
+++ b/docs/rules/valid-v-memo.md
@@ -5,11 +5,12 @@ title: vue/valid-v-memo
 description: enforce valid `v-memo` directives
 since: v7.16.0
 ---
+
 # vue/valid-v-memo
 
 > enforce valid `v-memo` directives
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
 
 This rule checks whether every `v-memo` directive is valid.
 
@@ -28,13 +29,13 @@ This rule reports `v-memo` directives in the following cases:
 ```vue
 <template>
   <!-- ✓ GOOD -->
-  <div v-memo="[x]"/>
+  <div v-memo="[x]" />
 
   <!-- ✗ BAD -->
-  <div v-memo/>
-  <div v-memo:aaa="[x]"/>
-  <div v-memo.bbb="[x]"/>
-  <div v-memo="{x}"/>
+  <div v-memo />
+  <div v-memo:aaa="[x]" />
+  <div v-memo.bbb="[x]" />
+  <div v-memo="{ x }" />
   <div v-for="i in items">
     <div v-memo="[i]" />
   </div>
@@ -59,7 +60,7 @@ Nothing.
 
 ## :books: Further Reading
 
-- [API - v-memo](https://v3.vuejs.org/api/directives.html#v-memo)
+- [API - v-memo](https://vuejs.org/api/built-in-directives.html#v-memo)
 
 ## :rocket: Version
 
diff --git a/docs/rules/valid-v-model.md b/docs/rules/valid-v-model.md
index 25c9ddb1f..0bc38d1b0 100644
--- a/docs/rules/valid-v-model.md
+++ b/docs/rules/valid-v-model.md
@@ -5,11 +5,12 @@ title: vue/valid-v-model
 description: enforce valid `v-model` directives
 since: v3.11.0
 ---
+
 # vue/valid-v-model
 
 > enforce valid `v-model` directives
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 This rule checks whether every `v-model` directive is valid.
 
@@ -31,27 +32,27 @@ This rule reports `v-model` directives in the following cases:
 ```vue
 <template>
   <!-- ✓ GOOD -->
-  <input v-model="foo">
-  <input v-model.lazy="foo">
-  <textarea v-model="foo"/>
-  <MyComponent v-model="foo"/>
-  <MyComponent v-model:propName="foo"/>
-  <MyComponent v-model.modifier="foo"/>
-  <MyComponent v-model:propName.modifier="foo"/>
+  <input v-model="foo" />
+  <input v-model.lazy="foo" />
+  <textarea v-model="foo" />
+  <MyComponent v-model="foo" />
+  <MyComponent v-model:propName="foo" />
+  <MyComponent v-model.modifier="foo" />
+  <MyComponent v-model:propName.modifier="foo" />
   <div v-for="todo in todos">
-    <input v-model="todo.name">
+    <input v-model="todo.name" />
   </div>
 
   <!-- ✗ BAD -->
-  <input v-model>
-  <input v-model:aaa="foo">
-  <input v-model.bbb="foo">
-  <input v-model="foo + bar">
-  <input v-model="a?.b.c">
-  <input v-model="(a?.b).c">
-  <div v-model="foo"/>
+  <input v-model />
+  <input v-model:aaa="foo" />
+  <input v-model.bbb="foo" />
+  <input v-model="foo + bar" />
+  <input v-model="a?.b.c" />
+  <input v-model="(a?.b).c" />
+  <div v-model="foo" />
   <div v-for="todo in todos">
-    <input v-model="todo">
+    <input v-model="todo" />
   </div>
 </template>
 ```
diff --git a/docs/rules/valid-v-on.md b/docs/rules/valid-v-on.md
index b3a157c2d..acfb630b7 100644
--- a/docs/rules/valid-v-on.md
+++ b/docs/rules/valid-v-on.md
@@ -5,11 +5,12 @@ title: vue/valid-v-on
 description: enforce valid `v-on` directives
 since: v3.11.0
 ---
+
 # vue/valid-v-on
 
 > enforce valid `v-on` directives
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 This rule checks whether every `v-on` directive is valid.
 
@@ -26,18 +27,18 @@ This rule reports `v-on` directives in the following cases:
 ```vue
 <template>
   <!-- ✓ GOOD -->
-  <div v-on="foo"/>
-  <div v-on:click="foo"/>
-  <div @click="foo"/>
-  <div @click.left="foo"/>
-  <div @click.prevent/>
-  <div @click.stop/>
+  <div v-on="foo" />
+  <div v-on:click="foo" />
+  <div @click="foo" />
+  <div @click.left="foo" />
+  <div @click.prevent />
+  <div @click.stop />
 
   <!-- ✗ BAD -->
-  <div v-on/>
-  <div v-on:click/>
-  <div v-on:click.aaa="foo"/>
-  <div @click/>
+  <div v-on />
+  <div v-on:click />
+  <div v-on:click.aaa="foo" />
+  <div @click />
 </template>
 ```
 
@@ -67,8 +68,8 @@ This rule has an object option:
 
 ```vue
 <template>
-  <div @click.foo="foo"/>
-  <div v-on:click.foo="foo"/>
+  <div @click.foo="foo" />
+  <div v-on:click.foo="foo" />
 </template>
 ```
 
diff --git a/docs/rules/valid-v-once.md b/docs/rules/valid-v-once.md
index 4ab4ed8da..daa711b8d 100644
--- a/docs/rules/valid-v-once.md
+++ b/docs/rules/valid-v-once.md
@@ -5,11 +5,12 @@ title: vue/valid-v-once
 description: enforce valid `v-once` directives
 since: v3.11.0
 ---
+
 # vue/valid-v-once
 
 > enforce valid `v-once` directives
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 This rule checks whether every `v-once` directive is valid.
 
@@ -26,12 +27,12 @@ This rule reports `v-once` directives in the following cases:
 ```vue
 <template>
   <!-- ✓ GOOD -->
-  <div v-once/>
+  <div v-once />
 
   <!-- ✗ BAD -->
-  <div v-once:aaa/>
-  <div v-once.bbb/>
-  <div v-once="ccc"/>
+  <div v-once:aaa />
+  <div v-once.bbb />
+  <div v-once="ccc" />
 </template>
 ```
 
diff --git a/docs/rules/valid-v-pre.md b/docs/rules/valid-v-pre.md
index 63095aab7..0464ed3d7 100644
--- a/docs/rules/valid-v-pre.md
+++ b/docs/rules/valid-v-pre.md
@@ -5,11 +5,12 @@ title: vue/valid-v-pre
 description: enforce valid `v-pre` directives
 since: v3.11.0
 ---
+
 # vue/valid-v-pre
 
 > enforce valid `v-pre` directives
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 This rule checks whether every `v-pre` directive is valid.
 
@@ -26,12 +27,12 @@ This rule reports `v-pre` directives in the following cases:
 ```vue
 <template>
   <!-- ✓ GOOD -->
-  <div v-pre/>
+  <div v-pre />
 
   <!-- ✗ BAD -->
-  <div v-pre:aaa/>
-  <div v-pre.bbb/>
-  <div v-pre="ccc"/>
+  <div v-pre:aaa />
+  <div v-pre.bbb />
+  <div v-pre="ccc" />
 </template>
 ```
 
diff --git a/docs/rules/valid-v-show.md b/docs/rules/valid-v-show.md
index 710489946..5be8a50a5 100644
--- a/docs/rules/valid-v-show.md
+++ b/docs/rules/valid-v-show.md
@@ -5,11 +5,12 @@ title: vue/valid-v-show
 description: enforce valid `v-show` directives
 since: v3.11.0
 ---
+
 # vue/valid-v-show
 
 > enforce valid `v-show` directives
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 This rule checks whether every `v-show` directive is valid.
 
@@ -27,12 +28,12 @@ This rule reports `v-show` directives in the following cases:
 ```vue
 <template>
   <!-- ✓ GOOD -->
-  <div v-show="foo"/>
+  <div v-show="foo" />
 
   <!-- ✗ BAD -->
-  <div v-show/>
-  <div v-show:aaa="foo"/>
-  <div v-show.bbb="foo"/>
+  <div v-show />
+  <div v-show:aaa="foo" />
+  <div v-show.bbb="foo" />
   <template v-show="condition" />
 </template>
 ```
diff --git a/docs/rules/valid-v-slot.md b/docs/rules/valid-v-slot.md
index 9c7c6621d..0c0c9e564 100644
--- a/docs/rules/valid-v-slot.md
+++ b/docs/rules/valid-v-slot.md
@@ -5,11 +5,12 @@ title: vue/valid-v-slot
 description: enforce valid `v-slot` directives
 since: v7.0.0
 ---
+
 # vue/valid-v-slot
 
 > enforce valid `v-slot` directives
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 This rule checks whether every `v-slot` directive is valid.
 
@@ -32,7 +33,7 @@ This rule reports `v-slot` directives in the following cases:
 <template>
   <!-- ✓ GOOD -->
   <my-component v-slot="data">
-    {{data}}
+    {{ data }}
   </my-component>
   <my-component>
     <template v-slot:default>
@@ -48,7 +49,7 @@ This rule reports `v-slot` directives in the following cases:
 
   <!-- ✗ BAD -->
   <div v-slot="data">
-    {{data}}
+    {{ data }}
   </div>
   <div>
     <template v-slot:one>
@@ -57,10 +58,10 @@ This rule reports `v-slot` directives in the following cases:
   </div>
 
   <my-component v-slot:one="data">
-    {{data}}
+    {{ data }}
   </my-component>
   <my-component v-slot="data">
-    {{data}}
+    {{ data }}
     <template v-slot:one>
       one
     </template>
@@ -85,7 +86,7 @@ This rule reports `v-slot` directives in the following cases:
   </my-component>
 
   <my-component v-slot.mod="data">
-    {{data}}
+    {{ data }}
   </my-component>
 
   <my-component v-slot>
@@ -127,7 +128,7 @@ This rule does not check syntax errors in directives because it's checked by [vu
   </MyComponent>
 
   <!--  ✗ BAD */ -->
-  <MyComponent v-slot.foo="{data}">
+  <MyComponent v-slot.foo="{ data }">
     {{ data }}
   </MyComponent>
   <MyComponent>
diff --git a/docs/rules/valid-v-text.md b/docs/rules/valid-v-text.md
index c9d2a569e..093939d01 100644
--- a/docs/rules/valid-v-text.md
+++ b/docs/rules/valid-v-text.md
@@ -5,11 +5,12 @@ title: vue/valid-v-text
 description: enforce valid `v-text` directives
 since: v3.11.0
 ---
+
 # vue/valid-v-text
 
 > enforce valid `v-text` directives
 
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
 
 This rule checks whether every `v-text` directive is valid.
 
@@ -26,12 +27,12 @@ This rule reports `v-text` directives in the following cases:
 ```vue
 <template>
   <!-- ✓ GOOD -->
-  <div v-text="foo"/>
+  <div v-text="foo" />
 
   <!-- ✗ BAD -->
-  <div v-text/>
-  <div v-text:aaa="foo"/>
-  <div v-text.bbb="foo"/>
+  <div v-text />
+  <div v-text:aaa="foo" />
+  <div v-text.bbb="foo" />
 </template>
 ```
 
diff --git a/docs/user-guide/README.md b/docs/user-guide/index.md
similarity index 51%
rename from docs/user-guide/README.md
rename to docs/user-guide/index.md
index 8129cad21..84c87c580 100644
--- a/docs/user-guide/README.md
+++ b/docs/user-guide/index.md
@@ -2,12 +2,6 @@
 
 ## :cd: Installation
 
-Via `vue-cli` (**Recommended**):
-
-```bash
-vue add @vue/cli-plugin-eslint
-```
-
 Via [npm](https://www.npmjs.com/):
 
 ```bash
@@ -17,21 +11,153 @@ npm install --save-dev eslint eslint-plugin-vue
 Via [yarn](https://yarnpkg.com/):
 
 ```bash
-yarn add -D eslint eslint-plugin-vue
+yarn add -D eslint eslint-plugin-vue vue-eslint-parser globals
 ```
 
 ::: tip Requirements
 
-- ESLint v6.2.0 and above
-- Node.js v14.17.x, v16.x and above
+- ESLint: `^8.57.0 || ^9.0.0`
+- Node.js: `^18.18.0 || ^20.9.0 || >=21.1.0`
 
 :::
 
 ## :book: Usage
 
-### Configuration
+### Configuration (`eslint.config.js`)
+
+Use `eslint.config.js` file to configure rules. This is the default in ESLint v9, but can be used starting from ESLint v8.57.0. See also: <https://eslint.org/docs/latest/use/configure/configuration-files-new>.
+
+Example **eslint.config.js**:
+
+```js
+import pluginVue from 'eslint-plugin-vue'
+import globals from 'globals'
+
+export default [
+  // add more generic rulesets here, such as:
+  // js.configs.recommended,
+  ...pluginVue.configs['flat/recommended'],
+  // ...pluginVue.configs['flat/vue2-recommended'], // Use this if you are using Vue.js 2.x.
+  {
+    rules: {
+      // override/add rules settings here, such as:
+      // 'vue/no-unused-vars': 'error'
+    },
+    languageOptions: {
+      sourceType: 'module',
+      globals: {
+        ...globals.browser
+      }
+    }
+  }
+]
+```
+
+See [the rule list](../rules/index.md) to get the `configs` & `rules` that this plugin provides.
+
+#### Bundle Configurations (`eslint.config.js`)
+
+This plugin provides some predefined configs.
+You can use the following configs by adding them to `eslint.config.js`.
+(All flat configs in this plugin are provided as arrays, so spread syntax is required when combining them with other configs.)
+
+- `*.configs["flat/base"]` ... Settings and rules to enable correct ESLint parsing.
+- Configurations for using Vue.js 3.x:
+  - `*.configs["flat/essential"]` ... `base`, plus rules to prevent errors or unintended behavior.
+  - `*.configs["flat/strongly-recommended"]` ... Above, plus rules to considerably improve code readability and/or dev experience.
+  - `*.configs["flat/recommended"]` ... Above, plus rules to enforce subjective community defaults to ensure consistency.
+- Configurations for using Vue.js 2.x:
+  - `*.configs["flat/vue2-essential"]` ... `base`, plus rules to prevent errors or unintended behavior.
+  - `*.configs["flat/vue2-strongly-recommended"]` ... Above, plus rules to considerably improve code readability and/or dev experience.
+  - `*.configs["flat/vue2-recommended"]` ... Above, plus rules to enforce subjective community defaults to ensure consistency
+
+:::warning Reporting rules
+By default, all rules from **base** and **essential** categories report ESLint errors. Other rules - because they're not covering potential bugs in the application - report warnings. What does it mean? By default - nothing, but if you want - you can set up a threshold and break the build after a certain amount of warnings, instead of any. More information [here](https://eslint.org/docs/user-guide/command-line-interface#handling-warnings).
+:::
+
+#### Specifying Globals (`eslint.config.js`)
+
+Specify global objects depending on how you use Vue.js. More information on how to set globals can be found [here](https://eslint.org/docs/latest/use/configure/language-options#predefined-global-variables).
+
+If you're writing an app that will only render on the browser, use `globals.browser`.
+
+```js
+// ...
+import globals from 'globals'
+
+export default [
+  // ...
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser
+      }
+    }
+  }
+  // ...
+]
+```
+
+If you're writing an app that is rendered both server-side and on the browser, use `globals.shared-node-browser`.
+
+```js
+// ...
+import globals from 'globals'
+
+export default [
+  // ...
+  {
+    languageOptions: {
+      globals: {
+        ...globals['shared-node-browser']
+      }
+    }
+  }
+  // ...
+]
+```
+
+#### Example configuration with [typescript-eslint](https://typescript-eslint.io/) and [Prettier](https://prettier.io/)
 
-Use `.eslintrc.*` file to configure rules. See also: [https://eslint.org/docs/user-guide/configuring](https://eslint.org/docs/user-guide/configuring).
+```bash
+npm install --save-dev eslint eslint-config-prettier eslint-plugin-vue globals typescript-eslint
+```
+
+```ts
+import eslint from '@eslint/js';
+import eslintConfigPrettier from 'eslint-config-prettier';
+import eslintPluginVue from 'eslint-plugin-vue';
+import globals from 'globals';
+import typescriptEslint from 'typescript-eslint';
+
+export default typescriptEslint.config(
+  { ignores: ['*.d.ts', '**/coverage', '**/dist'] },
+  {
+    extends: [
+      eslint.configs.recommended,
+      ...typescriptEslint.configs.recommended,
+      ...eslintPluginVue.configs['flat/recommended'],
+    ],
+    files: ['**/*.{ts,vue}'],
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      globals: globals.browser,
+      parserOptions: {
+        parser: typescriptEslint.parser,
+      },
+    },
+    rules: {
+      // your rules
+    },
+  },
+  eslintConfigPrettier
+);
+```
+
+### Configuration (`.eslintrc`)
+
+Use `.eslintrc.*` file to configure rules in ESLint < v9. See also: <https://eslint.org/docs/latest/use/configure/>.
 
 Example **.eslintrc.js**:
 
@@ -40,8 +166,8 @@ module.exports = {
   extends: [
     // add more generic rulesets here, such as:
     // 'eslint:recommended',
-    'plugin:vue/vue3-recommended',
-    // 'plugin:vue/recommended' // Use this if you are using Vue.js 2.x.
+    'plugin:vue/recommended',
+    // 'plugin:vue/vue2-recommended' // Use this if you are using Vue.js 2.x.
   ],
   rules: {
     // override/add rules settings here, such as:
@@ -50,41 +176,64 @@ module.exports = {
 }
 ```
 
-See [the rule list](../rules/README.md) to get the `extends` &amp; `rules` that this plugin provides.
+See [the rule list](../rules/index.md) to get the `extends` & `rules` that this plugin provides.
 
-#### Bundle Configurations
+#### Bundle Configurations (`.eslintrc`)
 
 This plugin provides some predefined configs.
 You can use the following configs by adding them to `extends`.
 
 - `"plugin:vue/base"` ... Settings and rules to enable correct ESLint parsing.
-- Configurations for using Vue.js 3.x.
-  - `"plugin:vue/vue3-essential"` ... `base`, plus rules to prevent errors or unintended behavior.
-  - `"plugin:vue/vue3-strongly-recommended"` ... Above, plus rules to considerably improve code readability and/or dev experience.
-  - `"plugin:vue/vue3-recommended"` ... Above, plus rules to enforce subjective community defaults to ensure consistency.
-- Configurations for using Vue.js 2.x.
+- Configurations for using Vue.js 3.x:
   - `"plugin:vue/essential"` ... `base`, plus rules to prevent errors or unintended behavior.
   - `"plugin:vue/strongly-recommended"` ... Above, plus rules to considerably improve code readability and/or dev experience.
-  - `"plugin:vue/recommended"` ... Above, plus rules to enforce subjective community defaults to ensure consistency
+  - `"plugin:vue/recommended"` ... Above, plus rules to enforce subjective community defaults to ensure consistency.
+- Configurations for using Vue.js 2.x:
+  - `"plugin:vue/vue2-essential"` ... `base`, plus rules to prevent errors or unintended behavior.
+  - `"plugin:vue/vue2-strongly-recommended"` ... Above, plus rules to considerably improve code readability and/or dev experience.
+  - `"plugin:vue/vue2-recommended"` ... Above, plus rules to enforce subjective community defaults to ensure consistency.
 
 :::warning Reporting rules
-By default all rules from **base** and **essential** categories report ESLint errors. Other rules - because they're not covering potential bugs in the application - report warnings. What does it mean? By default - nothing, but if you want - you can set up a threshold and break the build after a certain amount of warnings, instead of any. More information [here](https://eslint.org/docs/user-guide/command-line-interface#handling-warnings).
+By default, all rules from **base** and **essential** categories report ESLint errors. Other rules - because they're not covering potential bugs in the application - report warnings. What does it mean? By default - nothing, but if you want - you can set up a threshold and break the build after a certain amount of warnings, instead of any. More information [here](https://eslint.org/docs/user-guide/command-line-interface#handling-warnings).
 :::
 
 :::warning Status of Vue.js 3.x supports
-This plugin supports the basic syntax of Vue.js 3.2, `<script setup>`, and CSS variable injection, but the ref sugar, an experimental feature of Vue.js 3.2, is not yet supported.  
+This plugin supports the basic syntax of Vue.js 3.2, `<script setup>`, and CSS variable injection, but the ref sugar, an experimental feature of Vue.js 3.2, is not yet supported.\
 If you have issues with these, please also refer to the [FAQ](#does-not-work-well-with-script-setup). If you can't find a solution, search for the issue and if the issue doesn't exist, open a new issue.
 :::
 
+#### Specifying Environments (`.eslintrc`)
+
+Specify environments depending on how you use Vue.js. More information on how to set environments can be found [here](https://eslint.org/docs/latest/use/configure/language-options-deprecated#specifying-environments).
+
+If you're writing an app that will only render on the browser, use `env.browser`.
+
+```json
+{
+  "env": {
+    "browser": true
+  }
+}
+```
+
+If you're writing an app that is rendered both server-side and on the browser, use `env.shared-node-browser`.
+
+```json
+{
+  "env": {
+    "shared-node-browser": true
+  }
+}
+```
+
 ### Running ESLint from the command line
 
-If you want to run `eslint` from the command line, make sure you include the `.vue` extension using [the `--ext` option](https://eslint.org/docs/user-guide/configuring#specifying-target-files-to-lint) or a glob pattern, because ESLint targets only `.js` files by default.
+If you want to run `eslint` from the command line, ESLint will automatically check for the `.vue` extension if you use the config provided by the plugin.
 
 Examples:
 
 ```bash
-eslint --ext .js,.vue src
-eslint "src/**/*.{js,vue}"
+eslint src
 ```
 
 ::: tip
@@ -93,7 +242,7 @@ If you installed [@vue/cli-plugin-eslint](https://github.com/vuejs/vue-cli/tree/
 
 ### How to use a custom parser?
 
-If you want to use custom parsers such as [@babel/eslint-parser](https://www.npmjs.com/package/@babel/eslint-parser) or [@typescript-eslint/parser](https://www.npmjs.com/package/@typescript-eslint/parser), you have to use the `parserOptions.parser` option instead of the `parser` option. Because this plugin requires [vue-eslint-parser](https://www.npmjs.com/package/vue-eslint-parser) to parse `.vue` files, this plugin doesn't work if you overwrite the `parser` option.
+If you want to use custom parsers such as [@babel/eslint-parser](https://www.npmjs.com/package/@babel/eslint-parser) or [@typescript-eslint/parser](https://www.npmjs.com/package/@typescript-eslint/parser), you have to use the `parserOptions.parser` option instead of the `parser` option. Because this plugin requires [vue-eslint-parser] to parse `.vue` files, this plugin doesn't work if you overwrite the `parser` option.
 
 ```diff
 - "parser": "@typescript-eslint/parser",
@@ -104,6 +253,48 @@ If you want to use custom parsers such as [@babel/eslint-parser](https://www.npm
   }
 ```
 
+Full example:
+
+::: code-group
+
+```json [.eslintrc]
+{
+  "root": true,
+  "plugins": ["@typescript-eslint"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:vue/recommended"
+  ],
+  "parser": "vue-eslint-parser",
+  "parserOptions": {
+    "parser": "@typescript-eslint/parser"
+  }
+}
+```
+
+```js [eslint.config.js]
+import js from '@eslint/js'
+import eslintPluginVue from 'eslint-plugin-vue'
+import ts from 'typescript-eslint'
+
+export default ts.config(
+  js.configs.recommended,
+  ...ts.configs.recommended,
+  ...eslintPluginVue.configs['flat/recommended'],
+  {
+    files: ['*.vue', '**/*.vue'],
+    languageOptions: {
+      parserOptions: {
+        parser: '@typescript-eslint/parser'
+      }
+    }
+  }
+)
+```
+
+:::
+
 The `parserOptions.parser` option can also specify an object to specify multiple parsers. See [vue-eslint-parser README](https://github.com/vuejs/vue-eslint-parser#readme) for more details.
 
 ### How does ESLint detect components?
@@ -141,6 +332,16 @@ Vue.component('AsyncComponent', (resolve, reject) => {
 })
 ```
 
+You can do this for [Vue class component](https://class-component.vuejs.org/) too:
+
+```ts
+// @vue/component
+@Component({
+  components: { Foo }
+})
+export default class Bar extends Vue {}
+```
+
 ### Disabling rules via `<!-- eslint-disable -->`
 
 You can use `<!-- eslint-disable -->`-like HTML comments in the `<template>` and in the block level of `.vue` files to disable a certain rule temporarily.
@@ -159,8 +360,8 @@ If you want to disallow `eslint-disable` functionality in `<template>`, disable
 
 ### Parser Options
 
-This plugin uses [vue-eslint-parser](https://www.npmjs.com/package/vue-eslint-parser).
-For `parserOptions`, you can use the `vueFeatures` options of `vue-eslint-parser`.
+This plugin uses [vue-eslint-parser].
+For `parserOptions`, you can use the `vueFeatures` options of [vue-eslint-parser].
 
 ```json
 {
@@ -221,7 +422,7 @@ Go into `Settings -> Packages -> linter-eslint`, under the option "List of scope
 ### IntelliJ IDEA / JetBrains WebStorm
 
 In the **Settings/Preferences** dialog (`Cmd+,`/`Ctrl+Alt+S`), choose JavaScript under **Languages and Frameworks** and then choose **ESLint** under **Code Quality Tools**.
-On the **ESLint page** that opens, select the *Enable* checkbox.
+On the **ESLint page** that opens, select the _Enable_ checkbox.
 
 If your ESLint configuration is updated (manually or from your version control), open it in the editor and choose **Apply ESLint Code Style Rules** in the context menu.
 
@@ -231,14 +432,14 @@ read more: [JetBrains - ESLint](https://www.jetbrains.com/help/idea/eslint.html)
 
 ### What is the "Use the latest vue-eslint-parser" error?
 
-Most `eslint-plugin-vue` rules require `vue-eslint-parser` to check `<template>` ASTs.
+Most `eslint-plugin-vue` rules require [vue-eslint-parser] to check `<template>` ASTs.
 
 Make sure you have one of the following settings in your **.eslintrc**:
 
-- `"extends": ["plugin:vue/vue3-recommended"]`
+- `"extends": ["plugin:vue/recommended"]`
 - `"extends": ["plugin:vue/base"]`
 
-If you already use another parser (e.g. `"parser": "@typescript-eslint/parser"`), please move it into `parserOptions`, so it doesn't collide with the `vue-eslint-parser` used by this plugin's configuration:
+If you already use another parser (e.g. `"parser": "@typescript-eslint/parser"`), please move it into `parserOptions`, so it doesn't collide with the [vue-eslint-parser] used by this plugin's configuration:
 
 ```diff
 - "parser": "@typescript-eslint/parser",
@@ -265,7 +466,7 @@ See also: "[How to use a custom parser?](#how-to-use-a-custom-parser)" section.
 
 1. Make sure your tool is set to lint `.vue` files.
 
-    - CLI targets only `.js` files by default. You have to specify additional extensions with the `--ext` option or glob patterns. E.g. `eslint "src/**/*.{js,vue}"` or `eslint src --ext .vue`. If you use `@vue/cli-plugin-eslint` and the `vue-cli-service lint` command - you don't have to worry about it.
+    - Make sure you are using the shareable config provided by `eslint-plugin-vue`.
     - If you are having issues with configuring editor, please read [editor integrations](#editor-integrations)
 
 ### Conflict with [Prettier]
@@ -281,16 +482,16 @@ module.exports = {
     // ...
     // 'eslint:recommended',
     // ...
-    'plugin:vue/vue3-recommended',
+    'plugin:vue/recommended',
     // ...
-    "prettier"
+    'prettier'
     // Make sure "prettier" is the last element in this list.
   ],
   // ...
 }
 ```
 
-If Prettier conflicts with a rule you have set, [turn off that rule][prettier-linters]. For example, if you have `vue/html-indent` configured as `error` in `rules`, but it conflicts with Prettier, remove that line:
+If Prettier conflicts with a rule you have set, [turn off that rule][prettier-linters]. For example, if you have [`vue/html-indent`](./../rules/html-indent.md) configured as `error` in `rules`, but it conflicts with Prettier, remove that line:
 
 ```diff
 module.exports = {
@@ -323,8 +524,8 @@ If you are using JSX, you need to enable JSX in your ESLint configuration.
 
 See also [ESLint - Specifying Parser Options](https://eslint.org/docs/user-guide/configuring#specifying-parser-options).
 
-The same configuration is required when using JSX with TypeScript (TSX) in the `.vue` file.  
-See also [here](https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/parser/README.md#parseroptionsecmafeaturesjsx).  
+The same configuration is required when using JSX with TypeScript (TSX) in the `.vue` file.\
+See also [here](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/parser/README.md#parseroptionsecmafeaturesjsx).\
 Note that you cannot use angle-bracket type assertion style (`var x = <foo>bar;`) when using `jsx: true`.
 
 ### Trouble with Visual Studio Code
@@ -332,7 +533,7 @@ Note that you cannot use angle-bracket type assertion style (`var x = <foo>bar;`
 - Turning off the rule in the ESLint configuration file does not ignore the warning.
 - Using the `<!-- eslint-disable -->` comment does not suppress warnings.
 - Duplicate warnings are displayed.
-- Used `@babel/eslint-parser`, but the template still show `vue/no-parsing-error` warnings.
+- Used `@babel/eslint-parser`, but the template still show [`vue/no-parsing-error`](./../rules/no-parsing-error.md) warnings.
 
 You need to turn off Vetur's template validation by adding `vetur.validation.template: false` to your `.vscode/settings.json`.
 
@@ -352,43 +553,40 @@ You need to use [vue-eslint-parser] v9.0.0 or later.
 
 Previously you had to use the `vue/setup-compiler-macros` environment, this is no longer needed.
 
-#### Parsing error with Top Level `await`
+### Auto Imports Support
 
-##### Using ESLint <= v7.x
+In [Nuxt 3](https://nuxt.com/) or with [`unplugin-auto-import`](https://github.com/unplugin/unplugin-auto-import), Vue APIs can be auto imported. To make rules like [`vue/no-ref-as-operand`](/rules/no-ref-as-operand.html) or [`vue/no-watch-after-await`](/rules/no-watch-after-await.html) work correctly with them, you can specify them in ESLint's [`globals`](https://eslint.org/docs/latest/use/configure/configuration-files-new#configuring-global-variables) options:
 
-The parser `espree` that comes with `ESLint` v7.x doesn't understand the syntax of ES2022, so it can't parse the Top Level `await` either.  
-However, `espree` >= v8 can understand the syntax of ES2022 and parse the Top Level `await`.  
-You install `espree` >= v8 and specify `"espree"` and ES2022 in your configuration, the parser will be able to parse it.
+::: code-group
 
-```js
-module.exports = {
-  parser: 'vue-eslint-parser',
-  parserOptions: {
-    parser: 'espree', // <-
-    ecmaVersion: 2022, // <-
-    sourceType: 'module'
-  },
+```json [.eslintrc]
+{
+  "globals": {
+    "ref": "readonly",
+    "computed": "readonly",
+    "watch": "readonly",
+    "watchEffect": "readonly",
+    // ...more APIs
+  }
 }
 ```
 
-However, note that the AST generated by `espree` v8+ may not work well with some rules of `ESLint` v7.x.
-
-##### Using ESLint >= v8.x
-
-You need to specify `2022` or `"latest"` for `parserOptions.ecmaVersion`.
-
-```js
-module.exports = {
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module'
-  },
-}
+```js [eslint.config.js]
+export default [
+  {
+    languageOptions: {
+      globals: {
+        ref: 'readonly',
+        computed: 'readonly',
+        watch: 'readonly',
+        watchEffect: 'readonly',
+        // ...more APIs
+      }
+    }
+  }
+]
 ```
 
-#### Other Problems
-
-Try searching for existing issues.
-If it does not exist, you should open a new issue and share your repository to reproduce the issue.
+:::
 
 [vue-eslint-parser]: https://github.com/vuejs/vue-eslint-parser
diff --git a/eslint-internal-rules/.eslintrc.json b/eslint-internal-rules/.eslintrc.json
deleted file mode 100644
index 16e3fcf9b..000000000
--- a/eslint-internal-rules/.eslintrc.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "rules": {
-    "no-invalid-meta-docs-categories": "error",
-    "no-invalid-meta": "error"
-  },
-  "overrides": [
-    {
-      "files": ["*.json"],
-      "rules": {
-        "no-invalid-meta": "off"
-      }
-    }
-  ]
-}
diff --git a/eslint-internal-rules/no-invalid-meta-docs-categories.js b/eslint-internal-rules/no-invalid-meta-docs-categories.js
index c95691c36..bfdd8cdd5 100644
--- a/eslint-internal-rules/no-invalid-meta-docs-categories.js
+++ b/eslint-internal-rules/no-invalid-meta-docs-categories.js
@@ -5,10 +5,6 @@
 
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 /**
  * Gets the property of the Object node passed in that has the name specified.
  *
@@ -60,7 +56,7 @@ function checkMetaValidity(context, exportsNode) {
   if (!categories) {
     context.report({
       node: metaDocs,
-      message: 'Rule is missing a meta.docs.categories property.',
+      messageId: 'missingCategories',
       fix(fixer) {
         const category = getPropertyFromObject('category', metaDocs.value)
         if (!category) {
@@ -74,16 +70,16 @@ function checkMetaValidity(context, exportsNode) {
         ) {
           // fixes.push(fixer.insertTextBefore(category.value, '['), fixer.insertTextAfter(category.value, ']'))
 
-          // for vue3 migration
-          if (category.value.value !== 'base') {
+          if (category.value.value === 'base') {
+            fixes.push(fixer.insertTextBefore(category.value, '['))
+          } else {
+            // for vue3 migration
             fixes.push(
               fixer.insertTextBefore(
                 category.value,
                 `['vue3-${category.value.value}', `
               )
             )
-          } else {
-            fixes.push(fixer.insertTextBefore(category.value, '['))
           }
           fixes.push(fixer.insertTextAfter(category.value, ']'))
         }
@@ -102,22 +98,28 @@ function checkMetaValidity(context, exportsNode) {
       categories.value.name === 'undefined'
     )
   ) {
-    context.report(categories.value, 'meta.docs.categories must be an array.')
+    context.report({
+      node: categories.value,
+      messageId: 'categoriesMustBeArray'
+    })
   }
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
+    type: 'problem',
     docs: {
       description: 'enforce correct use of `meta` property in core rules',
       categories: ['Internal']
     },
+    // eslint-disable-next-line eslint-plugin/require-meta-fixable -- fixer is not recognized
     fixable: 'code',
-    schema: []
+    schema: [],
+    messages: {
+      missingCategories: 'Rule is missing a meta.docs.categories property.',
+      // eslint-disable-next-line eslint-plugin/report-message-format
+      categoriesMustBeArray: 'meta.docs.categories must be an array.'
+    }
   },
 
   create(context) {
diff --git a/eslint-internal-rules/no-invalid-meta.js b/eslint-internal-rules/no-invalid-meta.js
index 45057c9bf..941cf2a39 100644
--- a/eslint-internal-rules/no-invalid-meta.js
+++ b/eslint-internal-rules/no-invalid-meta.js
@@ -5,10 +5,6 @@
 
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 /**
  * Gets the property of the Object node passed in that has the name specified.
  *
@@ -27,38 +23,6 @@ function getPropertyFromObject(propertyName, node) {
   return null
 }
 
-/**
- * Extracts the `meta` property from the ObjectExpression that all rules export.
- *
- * @param {ASTNode} exportsNode ObjectExpression node that the rule exports.
- * @returns {ASTNode} The `meta` Property node or null if not found.
- */
-function getMetaPropertyFromExportsNode(exportsNode) {
-  return getPropertyFromObject('meta', exportsNode)
-}
-
-/**
- * Whether this `meta` ObjectExpression has a `docs` property defined or not.
- *
- * @param {ASTNode} metaPropertyNode The `meta` ObjectExpression for this rule.
- * @returns {boolean} `true` if a `docs` property exists.
- */
-function hasMetaDocs(metaPropertyNode) {
-  return Boolean(getPropertyFromObject('docs', metaPropertyNode.value))
-}
-
-/**
- * Whether this `meta` ObjectExpression has a `docs.category` property defined or not.
- *
- * @param {ASTNode} metaPropertyNode The `meta` ObjectExpression for this rule.
- * @returns {boolean} `true` if a `docs.category` property exists.
- */
-function hasMetaDocsCategories(metaPropertyNode) {
-  const metaDocs = getPropertyFromObject('docs', metaPropertyNode.value)
-
-  return metaDocs && getPropertyFromObject('categories', metaDocs.value)
-}
-
 /**
  * Checks the validity of the meta definition of this rule and reports any errors found.
  *
@@ -68,39 +32,62 @@ function hasMetaDocsCategories(metaPropertyNode) {
  * @returns {void}
  */
 function checkMetaValidity(context, exportsNode) {
-  const metaProperty = getMetaPropertyFromExportsNode(exportsNode)
-
+  const metaProperty = getPropertyFromObject('meta', exportsNode)
   if (!metaProperty) {
-    context.report(exportsNode, 'Rule is missing a meta property.')
+    context.report({
+      node: exportsNode,
+      messageId: 'missingMeta'
+    })
     return
   }
 
-  if (!hasMetaDocs(metaProperty)) {
-    context.report(metaProperty, 'Rule is missing a meta.docs property.')
+  const metaDocs = getPropertyFromObject('docs', metaProperty.value)
+  if (!metaDocs) {
+    context.report({
+      node: metaProperty,
+      messageId: 'missingMetaDocs'
+    })
     return
   }
 
-  if (!hasMetaDocsCategories(metaProperty)) {
-    context.report(
-      metaProperty,
-      'Rule is missing a meta.docs.categories property.'
-    )
+  const metaDocsCategories = getPropertyFromObject('categories', metaDocs.value)
+  if (!metaDocsCategories) {
+    context.report({
+      node: metaDocs,
+      messageId: 'missingMetaDocsCategories'
+    })
     return
   }
-}
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
+  const metaDocsRecommended = getPropertyFromObject(
+    'recommended',
+    metaDocs.value
+  )
+  if (metaDocsRecommended) {
+    context.report({
+      node: metaDocsRecommended,
+      messageId: 'invalidMetaDocsRecommended'
+    })
+    return
+  }
+}
 
 module.exports = {
   meta: {
+    type: 'problem',
     docs: {
       description: 'enforce correct use of `meta` property in core rules',
       categories: ['Internal']
     },
-
-    schema: []
+    schema: [],
+    messages: {
+      missingMeta: 'Rule is missing a meta property.',
+      missingMetaDocs: 'Rule is missing a meta.docs property.',
+      missingMetaDocsCategories:
+        'Rule is missing a meta.docs.categories property.',
+      invalidMetaDocsRecommended:
+        'Rule should not have a meta.docs.recommended property.'
+    }
   },
 
   create(context) {
diff --git a/eslint-internal-rules/require-eslint-community.js b/eslint-internal-rules/require-eslint-community.js
new file mode 100644
index 000000000..0c2f372c1
--- /dev/null
+++ b/eslint-internal-rules/require-eslint-community.js
@@ -0,0 +1,40 @@
+'use strict'
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'enforce use of the `@eslint-community/*` package',
+      categories: ['Internal']
+    },
+    fixable: 'code',
+    schema: [],
+    messages: {
+      useCommunityPackageInstead:
+        'Please use `@eslint-community/{{name}}` instead.'
+    }
+  },
+
+  /** @param {import('eslint').Rule.RuleContext} context */
+  create(context) {
+    return {
+      /**
+       * @param {import("../typings/eslint-plugin-vue/util-types/ast").Literal} node
+       */
+      'CallExpression > Literal.arguments[value=/^(?:eslint-utils|regexpp)$/u]'(
+        node
+      ) {
+        context.report({
+          node,
+          messageId: 'useCommunityPackageInstead',
+          data: {
+            name: node.value
+          },
+          fix(fixer) {
+            return fixer.replaceText(node, `'@eslint-community/${node.value}'`)
+          }
+        })
+      }
+    }
+  }
+}
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 000000000..4857aaeb7
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,378 @@
+import { defineConfig } from 'eslint/config'
+import globals from 'globals'
+import eslintConfigFlatGitIgnore from 'eslint-config-flat-gitignore'
+import eslintPluginEslintPlugin from 'eslint-plugin-eslint-plugin/configs/all'
+import eslintPluginJsonc from 'eslint-plugin-jsonc'
+import eslintPluginNodeDependencies from 'eslint-plugin-node-dependencies'
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
+import eslintPluginUnicorn from 'eslint-plugin-unicorn'
+import eslintMarkdown from '@eslint/markdown'
+import eslintPluginMarkdownPreferences from 'eslint-plugin-markdown-preferences'
+import eslintPluginTs from '@typescript-eslint/eslint-plugin'
+import tsEslintParser from '@typescript-eslint/parser'
+import vueEslintParser from 'vue-eslint-parser'
+import noInvalidMeta from './eslint-internal-rules/no-invalid-meta.js'
+import noInvalidMetaDocsCategories from './eslint-internal-rules/no-invalid-meta-docs-categories.js'
+import requireEslintCommunity from './eslint-internal-rules/require-eslint-community.js'
+import rules from './tools/lib/rules.js'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+// @ts-check
+/// <reference path="./eslint-typegen.d.ts" />
+import typegen from 'eslint-typegen'
+
+const dirname = path.dirname(fileURLToPath(import.meta.url))
+const MD_BASE_LINKS = {
+  'vue-eslint-parser': 'https://github.com/vuejs/vue-eslint-parser',
+  '@typescript-eslint/parser': 'https://typescript-eslint.io/packages/parser',
+  'eslint-typegen': 'https://github.com/antfu/eslint-typegen',
+  '@stylistic/eslint-plugin': 'https://eslint.style/'
+}
+const MD_LINKS = {
+  ...Object.fromEntries(
+    rules.map((rule) => [
+      rule.ruleId,
+      `https://eslint.vuejs.org/rules/${rule.name}.html`
+    ])
+  ),
+  ...MD_BASE_LINKS
+}
+// Links to rule docs from files in docs will link to the md file.
+const MD_LINKS_FOR_DOCS = {
+  ...Object.fromEntries(
+    rules.map((rule) => [
+      rule.ruleId,
+      path.resolve(dirname, './docs/rules', `./${rule.name}.md`)
+    ])
+  ),
+  ...MD_BASE_LINKS
+}
+
+export default typegen([
+  eslintConfigFlatGitIgnore(),
+  {
+    ignores: [
+      '.changeset/**/*.md',
+      'tests/fixtures',
+      'tests/integrations/eslint-plugin-import'
+    ]
+  },
+  eslintPluginPrettierRecommended,
+  ...eslintPluginNodeDependencies.configs['flat/recommended'],
+  {
+    plugins: {
+      internal: {
+        rules: {
+          'no-invalid-meta': noInvalidMeta,
+          'no-invalid-meta-docs-categories': noInvalidMetaDocsCategories,
+          'require-eslint-community': requireEslintCommunity
+        }
+      }
+    }
+  },
+  ...defineConfig({
+    files: ['**/*.{js,mjs,ts,mts}'],
+    extends: [
+      eslintPluginEslintPlugin,
+      eslintPluginUnicorn.configs['flat/recommended']
+    ],
+    // turn off some rules from shared configs in all files
+    rules: {
+      'eslint-plugin/require-meta-default-options': 'off', // TODO: enable when all rules have defaultOptions
+      'eslint-plugin/require-meta-docs-recommended': 'off', // use `categories` instead
+      'eslint-plugin/require-meta-schema-description': 'off',
+
+      'unicorn/filename-case': 'off',
+      'unicorn/no-null': 'off',
+      'unicorn/no-array-callback-reference': 'off', // doesn't work well with TypeScript's custom type guards
+      'unicorn/no-useless-undefined': 'off',
+      'unicorn/prefer-global-this': 'off',
+      'unicorn/prefer-module': 'off',
+      'unicorn/prefer-optional-catch-binding': 'off', // not supported by current ESLint parser version
+      'unicorn/prefer-at': 'off', //                 turn off to prevent make breaking changes (ref: #2146)
+      'unicorn/prefer-node-protocol': 'off', //      turn off to prevent make breaking changes (ref: #2146)
+      'unicorn/prefer-string-replace-all': 'off', // turn off to prevent make breaking changes (ref: #2146)
+      'unicorn/prefer-top-level-await': 'off', //    turn off to prevent make breaking changes (ref: #2146)
+      'unicorn/prevent-abbreviations': 'off'
+    }
+  }),
+
+  {
+    name: 'typescript/setup',
+    files: ['**/*.{ts,mts}'],
+    languageOptions: {
+      parser: tsEslintParser,
+      parserOptions: {
+        sourceType: 'module'
+      }
+    },
+    plugins: {
+      '@typescript-eslint': eslintPluginTs
+    }
+  },
+
+  {
+    files: ['**/*.{js,mjs,ts,mts}'],
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'commonjs',
+      globals: {
+        ...globals.es6,
+        ...globals.node,
+        ...globals.vitest
+      }
+    },
+    linterOptions: {
+      reportUnusedDisableDirectives: true
+    },
+    rules: {
+      'accessor-pairs': 2,
+      camelcase: [2, { properties: 'never' }],
+      'constructor-super': 2,
+      eqeqeq: [2, 'allow-null'],
+      'handle-callback-err': [2, '^(err|error)$'],
+      'jsx-quotes': [2, 'prefer-single'],
+      'new-cap': [2, { newIsCap: true, capIsNew: false }],
+      'new-parens': 2,
+      'no-array-constructor': 2,
+      'no-caller': 2,
+      'no-class-assign': 2,
+      'no-cond-assign': 2,
+      'no-const-assign': 2,
+      'no-control-regex': 2,
+      'no-delete-var': 2,
+      'no-dupe-args': 2,
+      'no-dupe-class-members': 2,
+      'no-dupe-keys': 2,
+      'no-duplicate-case': 2,
+      'no-empty-character-class': 2,
+      'no-empty-pattern': 2,
+      'no-eval': 2,
+      'no-ex-assign': 2,
+      'no-extend-native': 2,
+      'no-extra-bind': 2,
+      'no-extra-boolean-cast': 2,
+      'no-extra-parens': [2, 'functions'],
+      'no-fallthrough': 2,
+      'no-floating-decimal': 2,
+      'no-func-assign': 2,
+      'no-implied-eval': 2,
+      'no-inner-declarations': [2, 'functions'],
+      'no-invalid-regexp': 2,
+      'no-irregular-whitespace': 2,
+      'no-iterator': 2,
+      'no-label-var': 2,
+      'no-labels': [2, { allowLoop: false, allowSwitch: false }],
+      'no-lone-blocks': 2,
+      'no-multi-spaces': [2, { ignoreEOLComments: true }],
+      'no-multi-str': 2,
+      'no-native-reassign': 2,
+      'no-negated-in-lhs': 2,
+      'no-new-object': 2,
+      'no-new-require': 2,
+      'no-new-symbol': 2,
+      'no-new-wrappers': 2,
+      'no-obj-calls': 2,
+      'no-octal': 2,
+      'no-octal-escape': 2,
+      'no-path-concat': 2,
+      'no-proto': 2,
+      'no-redeclare': 2,
+      'no-regex-spaces': 2,
+      'no-return-assign': [2, 'except-parens'],
+      'no-self-assign': 2,
+      'no-self-compare': 2,
+      'no-sequences': 2,
+      'no-shadow-restricted-names': 2,
+      'no-sparse-arrays': 2,
+      'no-this-before-super': 2,
+      'no-throw-literal': 2,
+      'no-undef': 2,
+      'no-undef-init': 2,
+      'no-unexpected-multiline': 2,
+      'no-unmodified-loop-condition': 2,
+      'no-unneeded-ternary': [2, { defaultAssignment: false }],
+      'no-unreachable': 2,
+      'no-unsafe-finally': 2,
+      'no-unused-vars': [2, { vars: 'all', args: 'none' }],
+      'no-useless-call': 2,
+      'no-useless-computed-key': 2,
+      'no-useless-constructor': 2,
+      'no-useless-escape': 0,
+      'no-with': 2,
+      'one-var': [2, { initialized: 'never' }],
+      'use-isnan': 2,
+      'valid-typeof': 2,
+      'wrap-iife': [2, 'any'],
+      yoda: [2, 'never'],
+      'prefer-const': 2,
+
+      'prettier/prettier': 'error',
+      'eslint-plugin/require-meta-docs-description': [
+        'error',
+        { pattern: '^(enforce|require|disallow).*[^.]$' }
+      ],
+      'eslint-plugin/require-meta-fixable': [
+        'error',
+        { catchNoFixerButFixableProperty: true }
+      ],
+      'eslint-plugin/report-message-format': ['error', "^[A-Z`'{].*\\.$"],
+
+      'no-debugger': 'error',
+      'no-console': 'error',
+      'no-alert': 'error',
+      'no-void': 'error',
+
+      'no-warning-comments': 'warn',
+      'no-var': 'error',
+      'prefer-template': 'error',
+      'object-shorthand': 'error',
+      'prefer-rest-params': 'error',
+      'prefer-arrow-callback': 'error',
+      'prefer-spread': 'error',
+
+      'dot-notation': 'error',
+      'arrow-body-style': 'error',
+
+      'no-restricted-properties': [
+        'error',
+        {
+          object: 'context',
+          property: 'parserServices',
+          message: 'Use sourceCode.parserServices'
+        },
+        {
+          object: 'context',
+          property: 'getScope',
+          message: 'Use utils.getScope'
+        }
+      ],
+
+      'unicorn/consistent-function-scoping': [
+        'error',
+        { checkArrowFunctions: false }
+      ],
+
+      'internal/require-eslint-community': ['error']
+    }
+  },
+
+  {
+    files: ['**/*.{mjs,ts,mts}'],
+    languageOptions: {
+      sourceType: 'module'
+    }
+  },
+
+  {
+    files: ['**/*.{ts,mts}'],
+    rules: {
+      ...eslintPluginTs.configs.strict.rules,
+      ...eslintPluginTs.configs['flat/eslint-recommended'].rules,
+      'no-redeclare': 'off',
+      '@typescript-eslint/no-redeclare': 'error',
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-empty-object-type': 'off',
+      '@typescript-eslint/no-namespace': 'off',
+      '@typescript-eslint/no-non-null-assertion': 'off',
+      '@typescript-eslint/triple-slash-reference': 'off',
+      '@typescript-eslint/unified-signatures': 'off',
+      '@typescript-eslint/ban-ts-comment': [
+        'error',
+        {
+          minimumDescriptionLength: 3
+        }
+      ]
+    }
+  },
+
+  {
+    files: ['./**/*.vue'],
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      parser: vueEslintParser
+    }
+  },
+  {
+    files: ['lib/rules/*.js'],
+    rules: {
+      'eslint-plugin/require-meta-docs-url': [
+        'error',
+        { pattern: 'https://eslint.vuejs.org/rules/{{name}}.html' }
+      ],
+      'internal/no-invalid-meta': 'error',
+      'internal/no-invalid-meta-docs-categories': 'error'
+    }
+  },
+  {
+    files: ['eslint-internal-rules/*.js'],
+    rules: {
+      'eslint-plugin/require-meta-docs-url': 'off',
+      'internal/no-invalid-meta': 'error',
+      'internal/no-invalid-meta-docs-categories': 'error'
+    }
+  },
+  ...defineConfig({
+    files: ['**/*.json'],
+    extends: [...eslintPluginJsonc.configs['flat/recommended-with-jsonc']],
+    rules: {
+      'prettier/prettier': 'off'
+    }
+  }),
+  ...defineConfig([
+    {
+      files: ['**/*.md'],
+      extends: [
+        eslintMarkdown.configs.recommended,
+        eslintPluginMarkdownPreferences.configs.recommended
+      ],
+      rules: {
+        'prettier/prettier': 'off',
+        'markdown/no-missing-link-fragments': 'off',
+
+        'markdown-preferences/prefer-linked-words': [
+          'error',
+          {
+            words: MD_LINKS,
+            ignores: [
+              {
+                node: { type: 'heading' }
+              },
+              {
+                node: { type: 'footnoteDefinition' }
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      files: ['docs/**/*.md'],
+      rules: {
+        'markdown-preferences/prefer-linked-words': [
+          'error',
+          {
+            words: MD_LINKS_FOR_DOCS,
+            ignores: [
+              {
+                node: { type: 'heading' }
+              },
+              {
+                node: { type: 'footnoteDefinition' }
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      files: ['.github/ISSUE_TEMPLATE/*.md'],
+      rules: {
+        'prettier/prettier': 'off',
+        'markdown/no-missing-label-refs': 'off'
+      }
+    }
+  ])
+])
diff --git a/lib/configs/base.js b/lib/configs/base.js
index 3724461e2..c7189fbca 100644
--- a/lib/configs/base.js
+++ b/lib/configs/base.js
@@ -4,18 +4,19 @@
  * in order to update its content execute "npm run update"
  */
 module.exports = {
-  parser: require.resolve('vue-eslint-parser'),
   parserOptions: {
-    ecmaVersion: 2020,
+    ecmaVersion: 'latest',
     sourceType: 'module'
   },
-  env: {
-    browser: true,
-    es6: true
-  },
   plugins: ['vue'],
   rules: {
     'vue/comment-directive': 'error',
     'vue/jsx-uses-vars': 'error'
-  }
+  },
+  overrides: [
+    {
+      files: '*.vue',
+      parser: require.resolve('vue-eslint-parser')
+    }
+  ]
 }
diff --git a/lib/configs/flat/base.js b/lib/configs/flat/base.js
new file mode 100644
index 000000000..1f4579afa
--- /dev/null
+++ b/lib/configs/flat/base.js
@@ -0,0 +1,36 @@
+/*
+ * IMPORTANT!
+ * This file has been automatically generated,
+ * in order to update its content execute "npm run update"
+ */
+module.exports = [
+  {
+    name: 'vue/base/setup',
+    plugins: {
+      get vue() {
+        return require('../../plugin')
+      }
+    },
+    languageOptions: {
+      sourceType: 'module'
+    }
+  },
+  {
+    name: 'vue/base/setup-for-vue',
+    files: ['*.vue', '**/*.vue'],
+    plugins: {
+      get vue() {
+        return require('../../plugin')
+      }
+    },
+    languageOptions: {
+      parser: require('vue-eslint-parser'),
+      sourceType: 'module'
+    },
+    rules: {
+      'vue/comment-directive': 'error',
+      'vue/jsx-uses-vars': 'error'
+    },
+    processor: 'vue/vue'
+  }
+]
diff --git a/lib/configs/flat/vue2-essential.js b/lib/configs/flat/vue2-essential.js
new file mode 100644
index 000000000..0d0920413
--- /dev/null
+++ b/lib/configs/flat/vue2-essential.js
@@ -0,0 +1,79 @@
+/*
+ * IMPORTANT!
+ * This file has been automatically generated,
+ * in order to update its content execute "npm run update"
+ */
+'use strict'
+const config = require('./base.js')
+
+module.exports = [
+  ...config,
+  {
+    name: 'vue/vue2-essential/rules',
+    rules: {
+      'vue/multi-word-component-names': 'error',
+      'vue/no-arrow-functions-in-watch': 'error',
+      'vue/no-async-in-computed-properties': 'error',
+      'vue/no-child-content': 'error',
+      'vue/no-computed-properties-in-data': 'error',
+      'vue/no-custom-modifiers-on-v-model': 'error',
+      'vue/no-dupe-keys': 'error',
+      'vue/no-dupe-v-else-if': 'error',
+      'vue/no-duplicate-attributes': 'error',
+      'vue/no-export-in-script-setup': 'error',
+      'vue/no-multiple-template-root': 'error',
+      'vue/no-mutating-props': 'error',
+      'vue/no-parsing-error': 'error',
+      'vue/no-ref-as-operand': 'error',
+      'vue/no-reserved-component-names': 'error',
+      'vue/no-reserved-keys': 'error',
+      'vue/no-reserved-props': [
+        'error',
+        {
+          vueVersion: 2
+        }
+      ],
+      'vue/no-shared-component-data': 'error',
+      'vue/no-side-effects-in-computed-properties': 'error',
+      'vue/no-template-key': 'error',
+      'vue/no-textarea-mustache': 'error',
+      'vue/no-unused-components': 'error',
+      'vue/no-unused-vars': 'error',
+      'vue/no-use-computed-property-like-method': 'error',
+      'vue/no-use-v-if-with-v-for': 'error',
+      'vue/no-useless-template-attributes': 'error',
+      'vue/no-v-for-template-key': 'error',
+      'vue/no-v-model-argument': 'error',
+      'vue/no-v-text-v-html-on-component': 'error',
+      'vue/require-component-is': 'error',
+      'vue/require-prop-type-constructor': 'error',
+      'vue/require-render-return': 'error',
+      'vue/require-v-for-key': 'error',
+      'vue/require-valid-default-prop': 'error',
+      'vue/return-in-computed-property': 'error',
+      'vue/return-in-emits-validator': 'error',
+      'vue/use-v-on-exact': 'error',
+      'vue/valid-attribute-name': 'error',
+      'vue/valid-define-emits': 'error',
+      'vue/valid-define-props': 'error',
+      'vue/valid-model-definition': 'error',
+      'vue/valid-next-tick': 'error',
+      'vue/valid-template-root': 'error',
+      'vue/valid-v-bind-sync': 'error',
+      'vue/valid-v-bind': 'error',
+      'vue/valid-v-cloak': 'error',
+      'vue/valid-v-else-if': 'error',
+      'vue/valid-v-else': 'error',
+      'vue/valid-v-for': 'error',
+      'vue/valid-v-html': 'error',
+      'vue/valid-v-if': 'error',
+      'vue/valid-v-model': 'error',
+      'vue/valid-v-on': 'error',
+      'vue/valid-v-once': 'error',
+      'vue/valid-v-pre': 'error',
+      'vue/valid-v-show': 'error',
+      'vue/valid-v-slot': 'error',
+      'vue/valid-v-text': 'error'
+    }
+  }
+]
diff --git a/lib/configs/flat/vue2-recommended.js b/lib/configs/flat/vue2-recommended.js
new file mode 100644
index 000000000..8a972bf3d
--- /dev/null
+++ b/lib/configs/flat/vue2-recommended.js
@@ -0,0 +1,24 @@
+/*
+ * IMPORTANT!
+ * This file has been automatically generated,
+ * in order to update its content execute "npm run update"
+ */
+'use strict'
+const config = require('./vue2-strongly-recommended.js')
+
+module.exports = [
+  ...config,
+  {
+    name: 'vue/vue2-recommended/rules',
+    rules: {
+      'vue/attributes-order': 'warn',
+      'vue/block-order': 'warn',
+      'vue/no-lone-template': 'warn',
+      'vue/no-multiple-slot-args': 'warn',
+      'vue/no-required-prop-with-default': 'warn',
+      'vue/no-v-html': 'warn',
+      'vue/order-in-components': 'warn',
+      'vue/this-in-template': 'warn'
+    }
+  }
+]
diff --git a/lib/configs/flat/vue2-strongly-recommended.js b/lib/configs/flat/vue2-strongly-recommended.js
new file mode 100644
index 000000000..e4913f40c
--- /dev/null
+++ b/lib/configs/flat/vue2-strongly-recommended.js
@@ -0,0 +1,39 @@
+/*
+ * IMPORTANT!
+ * This file has been automatically generated,
+ * in order to update its content execute "npm run update"
+ */
+'use strict'
+const config = require('./vue2-essential.js')
+
+module.exports = [
+  ...config,
+  {
+    name: 'vue/vue2-strongly-recommended/rules',
+    rules: {
+      'vue/attribute-hyphenation': 'warn',
+      'vue/component-definition-name-casing': 'warn',
+      'vue/first-attribute-linebreak': 'warn',
+      'vue/html-closing-bracket-newline': 'warn',
+      'vue/html-closing-bracket-spacing': 'warn',
+      'vue/html-end-tags': 'warn',
+      'vue/html-indent': 'warn',
+      'vue/html-quotes': 'warn',
+      'vue/html-self-closing': 'warn',
+      'vue/max-attributes-per-line': 'warn',
+      'vue/multiline-html-element-content-newline': 'warn',
+      'vue/mustache-interpolation-spacing': 'warn',
+      'vue/no-multi-spaces': 'warn',
+      'vue/no-spaces-around-equal-signs-in-attribute': 'warn',
+      'vue/no-template-shadow': 'warn',
+      'vue/one-component-per-file': 'warn',
+      'vue/prop-name-casing': 'warn',
+      'vue/require-default-prop': 'warn',
+      'vue/require-prop-types': 'warn',
+      'vue/singleline-html-element-content-newline': 'warn',
+      'vue/v-bind-style': 'warn',
+      'vue/v-on-style': 'warn',
+      'vue/v-slot-style': 'warn'
+    }
+  }
+]
diff --git a/lib/configs/flat/vue3-essential.js b/lib/configs/flat/vue3-essential.js
new file mode 100644
index 000000000..ff8b5b4a6
--- /dev/null
+++ b/lib/configs/flat/vue3-essential.js
@@ -0,0 +1,99 @@
+/*
+ * IMPORTANT!
+ * This file has been automatically generated,
+ * in order to update its content execute "npm run update"
+ */
+'use strict'
+const config = require('./base.js')
+
+module.exports = [
+  ...config,
+  {
+    name: 'vue/essential/rules',
+    rules: {
+      'vue/multi-word-component-names': 'error',
+      'vue/no-arrow-functions-in-watch': 'error',
+      'vue/no-async-in-computed-properties': 'error',
+      'vue/no-child-content': 'error',
+      'vue/no-computed-properties-in-data': 'error',
+      'vue/no-deprecated-data-object-declaration': 'error',
+      'vue/no-deprecated-delete-set': 'error',
+      'vue/no-deprecated-destroyed-lifecycle': 'error',
+      'vue/no-deprecated-dollar-listeners-api': 'error',
+      'vue/no-deprecated-dollar-scopedslots-api': 'error',
+      'vue/no-deprecated-events-api': 'error',
+      'vue/no-deprecated-filter': 'error',
+      'vue/no-deprecated-functional-template': 'error',
+      'vue/no-deprecated-html-element-is': 'error',
+      'vue/no-deprecated-inline-template': 'error',
+      'vue/no-deprecated-model-definition': 'error',
+      'vue/no-deprecated-props-default-this': 'error',
+      'vue/no-deprecated-router-link-tag-prop': 'error',
+      'vue/no-deprecated-scope-attribute': 'error',
+      'vue/no-deprecated-slot-attribute': 'error',
+      'vue/no-deprecated-slot-scope-attribute': 'error',
+      'vue/no-deprecated-v-bind-sync': 'error',
+      'vue/no-deprecated-v-is': 'error',
+      'vue/no-deprecated-v-on-native-modifier': 'error',
+      'vue/no-deprecated-v-on-number-modifiers': 'error',
+      'vue/no-deprecated-vue-config-keycodes': 'error',
+      'vue/no-dupe-keys': 'error',
+      'vue/no-dupe-v-else-if': 'error',
+      'vue/no-duplicate-attributes': 'error',
+      'vue/no-export-in-script-setup': 'error',
+      'vue/no-expose-after-await': 'error',
+      'vue/no-lifecycle-after-await': 'error',
+      'vue/no-mutating-props': 'error',
+      'vue/no-parsing-error': 'error',
+      'vue/no-ref-as-operand': 'error',
+      'vue/no-reserved-component-names': 'error',
+      'vue/no-reserved-keys': 'error',
+      'vue/no-reserved-props': 'error',
+      'vue/no-shared-component-data': 'error',
+      'vue/no-side-effects-in-computed-properties': 'error',
+      'vue/no-template-key': 'error',
+      'vue/no-textarea-mustache': 'error',
+      'vue/no-unused-components': 'error',
+      'vue/no-unused-vars': 'error',
+      'vue/no-use-computed-property-like-method': 'error',
+      'vue/no-use-v-if-with-v-for': 'error',
+      'vue/no-useless-template-attributes': 'error',
+      'vue/no-v-for-template-key-on-child': 'error',
+      'vue/no-v-text-v-html-on-component': 'error',
+      'vue/no-watch-after-await': 'error',
+      'vue/prefer-import-from-vue': 'error',
+      'vue/require-component-is': 'error',
+      'vue/require-prop-type-constructor': 'error',
+      'vue/require-render-return': 'error',
+      'vue/require-slots-as-functions': 'error',
+      'vue/require-toggle-inside-transition': 'error',
+      'vue/require-v-for-key': 'error',
+      'vue/require-valid-default-prop': 'error',
+      'vue/return-in-computed-property': 'error',
+      'vue/return-in-emits-validator': 'error',
+      'vue/use-v-on-exact': 'error',
+      'vue/valid-attribute-name': 'error',
+      'vue/valid-define-emits': 'error',
+      'vue/valid-define-options': 'error',
+      'vue/valid-define-props': 'error',
+      'vue/valid-next-tick': 'error',
+      'vue/valid-template-root': 'error',
+      'vue/valid-v-bind': 'error',
+      'vue/valid-v-cloak': 'error',
+      'vue/valid-v-else-if': 'error',
+      'vue/valid-v-else': 'error',
+      'vue/valid-v-for': 'error',
+      'vue/valid-v-html': 'error',
+      'vue/valid-v-if': 'error',
+      'vue/valid-v-is': 'error',
+      'vue/valid-v-memo': 'error',
+      'vue/valid-v-model': 'error',
+      'vue/valid-v-on': 'error',
+      'vue/valid-v-once': 'error',
+      'vue/valid-v-pre': 'error',
+      'vue/valid-v-show': 'error',
+      'vue/valid-v-slot': 'error',
+      'vue/valid-v-text': 'error'
+    }
+  }
+]
diff --git a/lib/configs/flat/vue3-recommended.js b/lib/configs/flat/vue3-recommended.js
new file mode 100644
index 000000000..21be71a8d
--- /dev/null
+++ b/lib/configs/flat/vue3-recommended.js
@@ -0,0 +1,24 @@
+/*
+ * IMPORTANT!
+ * This file has been automatically generated,
+ * in order to update its content execute "npm run update"
+ */
+'use strict'
+const config = require('./vue3-strongly-recommended.js')
+
+module.exports = [
+  ...config,
+  {
+    name: 'vue/recommended/rules',
+    rules: {
+      'vue/attributes-order': 'warn',
+      'vue/block-order': 'warn',
+      'vue/no-lone-template': 'warn',
+      'vue/no-multiple-slot-args': 'warn',
+      'vue/no-required-prop-with-default': 'warn',
+      'vue/no-v-html': 'warn',
+      'vue/order-in-components': 'warn',
+      'vue/this-in-template': 'warn'
+    }
+  }
+]
diff --git a/lib/configs/flat/vue3-strongly-recommended.js b/lib/configs/flat/vue3-strongly-recommended.js
new file mode 100644
index 000000000..fee1d3bb8
--- /dev/null
+++ b/lib/configs/flat/vue3-strongly-recommended.js
@@ -0,0 +1,47 @@
+/*
+ * IMPORTANT!
+ * This file has been automatically generated,
+ * in order to update its content execute "npm run update"
+ */
+'use strict'
+const config = require('./vue3-essential.js')
+
+module.exports = [
+  ...config,
+  {
+    name: 'vue/strongly-recommended/rules',
+    rules: {
+      'vue/attribute-hyphenation': 'warn',
+      'vue/component-definition-name-casing': 'warn',
+      'vue/first-attribute-linebreak': 'warn',
+      'vue/html-closing-bracket-newline': 'warn',
+      'vue/html-closing-bracket-spacing': 'warn',
+      'vue/html-end-tags': 'warn',
+      'vue/html-indent': 'warn',
+      'vue/html-quotes': 'warn',
+      'vue/html-self-closing': 'warn',
+      'vue/max-attributes-per-line': 'warn',
+      'vue/multiline-html-element-content-newline': 'warn',
+      'vue/mustache-interpolation-spacing': 'warn',
+      'vue/no-multi-spaces': 'warn',
+      'vue/no-spaces-around-equal-signs-in-attribute': 'warn',
+      'vue/no-template-shadow': 'warn',
+      'vue/one-component-per-file': 'warn',
+      'vue/prop-name-casing': 'warn',
+      'vue/require-default-prop': 'warn',
+      'vue/require-explicit-emits': 'warn',
+      'vue/require-prop-types': 'warn',
+      'vue/singleline-html-element-content-newline': 'warn',
+      'vue/v-bind-style': 'warn',
+      'vue/v-on-event-hyphenation': [
+        'warn',
+        'always',
+        {
+          autofix: true
+        }
+      ],
+      'vue/v-on-style': 'warn',
+      'vue/v-slot-style': 'warn'
+    }
+  }
+]
diff --git a/lib/configs/index.js b/lib/configs/index.js
new file mode 100644
index 000000000..fbc7a84f5
--- /dev/null
+++ b/lib/configs/index.js
@@ -0,0 +1,28 @@
+const configs = {
+  // eslintrc configs
+  base: require('./base'),
+
+  'vue2-essential': require('./vue2-essential'),
+  'vue2-strongly-recommended': require('./vue2-strongly-recommended'),
+  'vue2-recommended': require('./vue2-recommended'),
+
+  essential: require('./vue3-essential'),
+  'strongly-recommended': require('./vue3-strongly-recommended'),
+  recommended: require('./vue3-recommended'),
+
+  // flat configs
+  'flat/base': require('./flat/base.js'),
+
+  'flat/vue2-essential': require('./flat/vue2-essential.js'),
+  'flat/vue2-strongly-recommended': require('./flat/vue2-strongly-recommended.js'),
+  'flat/vue2-recommended': require('./flat/vue2-recommended.js'),
+
+  'flat/essential': require('./flat/vue3-essential.js'),
+  'flat/strongly-recommended': require('./flat/vue3-strongly-recommended.js'),
+  'flat/recommended': require('./flat/vue3-recommended.js'),
+
+  // config-format-agnostic configs
+  'no-layout-rules': require('./no-layout-rules')
+}
+
+module.exports = configs
diff --git a/lib/configs/no-layout-rules.js b/lib/configs/no-layout-rules.js
index ab03684b5..886f85d53 100644
--- a/lib/configs/no-layout-rules.js
+++ b/lib/configs/no-layout-rules.js
@@ -7,6 +7,7 @@ module.exports = {
   rules: {
     'vue/array-bracket-newline': 'off',
     'vue/array-bracket-spacing': 'off',
+    'vue/array-element-newline': 'off',
     'vue/arrow-spacing': 'off',
     'vue/block-spacing': 'off',
     'vue/block-tag-newline': 'off',
@@ -31,6 +32,7 @@ module.exports = {
     'vue/max-attributes-per-line': 'off',
     'vue/max-len': 'off',
     'vue/multiline-html-element-content-newline': 'off',
+    'vue/multiline-ternary': 'off',
     'vue/mustache-interpolation-spacing': 'off',
     'vue/new-line-between-multi-line-property': 'off',
     'vue/no-extra-parens': 'off',
@@ -41,6 +43,9 @@ module.exports = {
     'vue/object-property-newline': 'off',
     'vue/operator-linebreak': 'off',
     'vue/padding-line-between-blocks': 'off',
+    'vue/padding-line-between-tags': 'off',
+    'vue/padding-lines-in-component-definition': 'off',
+    'vue/quote-props': 'off',
     'vue/script-indent': 'off',
     'vue/singleline-html-element-content-newline': 'off',
     'vue/space-in-parens': 'off',
diff --git a/lib/configs/essential.js b/lib/configs/vue2-essential.js
similarity index 98%
rename from lib/configs/essential.js
rename to lib/configs/vue2-essential.js
index 944a162ea..e2c66ceba 100644
--- a/lib/configs/essential.js
+++ b/lib/configs/vue2-essential.js
@@ -28,7 +28,6 @@ module.exports = {
         vueVersion: 2
       }
     ],
-    'vue/no-setup-props-destructure': 'error',
     'vue/no-shared-component-data': 'error',
     'vue/no-side-effects-in-computed-properties': 'error',
     'vue/no-template-key': 'error',
diff --git a/lib/configs/recommended.js b/lib/configs/vue2-recommended.js
similarity index 73%
rename from lib/configs/recommended.js
rename to lib/configs/vue2-recommended.js
index 3db36d8c0..9892867c1 100644
--- a/lib/configs/recommended.js
+++ b/lib/configs/vue2-recommended.js
@@ -4,12 +4,13 @@
  * in order to update its content execute "npm run update"
  */
 module.exports = {
-  extends: require.resolve('./strongly-recommended'),
+  extends: require.resolve('./vue2-strongly-recommended'),
   rules: {
     'vue/attributes-order': 'warn',
-    'vue/component-tags-order': 'warn',
+    'vue/block-order': 'warn',
     'vue/no-lone-template': 'warn',
     'vue/no-multiple-slot-args': 'warn',
+    'vue/no-required-prop-with-default': 'warn',
     'vue/no-v-html': 'warn',
     'vue/order-in-components': 'warn',
     'vue/this-in-template': 'warn'
diff --git a/lib/configs/strongly-recommended.js b/lib/configs/vue2-strongly-recommended.js
similarity index 95%
rename from lib/configs/strongly-recommended.js
rename to lib/configs/vue2-strongly-recommended.js
index 02daf9a3c..e7b0f3dc7 100644
--- a/lib/configs/strongly-recommended.js
+++ b/lib/configs/vue2-strongly-recommended.js
@@ -4,7 +4,7 @@
  * in order to update its content execute "npm run update"
  */
 module.exports = {
-  extends: require.resolve('./essential'),
+  extends: require.resolve('./vue2-essential'),
   rules: {
     'vue/attribute-hyphenation': 'warn',
     'vue/component-definition-name-casing': 'warn',
diff --git a/lib/configs/vue3-essential.js b/lib/configs/vue3-essential.js
index 5fe530beb..34b3229b1 100644
--- a/lib/configs/vue3-essential.js
+++ b/lib/configs/vue3-essential.js
@@ -12,6 +12,7 @@ module.exports = {
     'vue/no-child-content': 'error',
     'vue/no-computed-properties-in-data': 'error',
     'vue/no-deprecated-data-object-declaration': 'error',
+    'vue/no-deprecated-delete-set': 'error',
     'vue/no-deprecated-destroyed-lifecycle': 'error',
     'vue/no-deprecated-dollar-listeners-api': 'error',
     'vue/no-deprecated-dollar-scopedslots-api': 'error',
@@ -20,6 +21,7 @@ module.exports = {
     'vue/no-deprecated-functional-template': 'error',
     'vue/no-deprecated-html-element-is': 'error',
     'vue/no-deprecated-inline-template': 'error',
+    'vue/no-deprecated-model-definition': 'error',
     'vue/no-deprecated-props-default-this': 'error',
     'vue/no-deprecated-router-link-tag-prop': 'error',
     'vue/no-deprecated-scope-attribute': 'error',
@@ -42,7 +44,6 @@ module.exports = {
     'vue/no-reserved-component-names': 'error',
     'vue/no-reserved-keys': 'error',
     'vue/no-reserved-props': 'error',
-    'vue/no-setup-props-destructure': 'error',
     'vue/no-shared-component-data': 'error',
     'vue/no-side-effects-in-computed-properties': 'error',
     'vue/no-template-key': 'error',
@@ -68,6 +69,7 @@ module.exports = {
     'vue/use-v-on-exact': 'error',
     'vue/valid-attribute-name': 'error',
     'vue/valid-define-emits': 'error',
+    'vue/valid-define-options': 'error',
     'vue/valid-define-props': 'error',
     'vue/valid-next-tick': 'error',
     'vue/valid-template-root': 'error',
diff --git a/lib/configs/vue3-recommended.js b/lib/configs/vue3-recommended.js
index 34b181e29..083f6c65b 100644
--- a/lib/configs/vue3-recommended.js
+++ b/lib/configs/vue3-recommended.js
@@ -7,9 +7,10 @@ module.exports = {
   extends: require.resolve('./vue3-strongly-recommended'),
   rules: {
     'vue/attributes-order': 'warn',
-    'vue/component-tags-order': 'warn',
+    'vue/block-order': 'warn',
     'vue/no-lone-template': 'warn',
     'vue/no-multiple-slot-args': 'warn',
+    'vue/no-required-prop-with-default': 'warn',
     'vue/no-v-html': 'warn',
     'vue/order-in-components': 'warn',
     'vue/this-in-template': 'warn'
diff --git a/lib/configs/vue3-strongly-recommended.js b/lib/configs/vue3-strongly-recommended.js
index 9da67f398..a3f854fc4 100644
--- a/lib/configs/vue3-strongly-recommended.js
+++ b/lib/configs/vue3-strongly-recommended.js
@@ -28,7 +28,13 @@ module.exports = {
     'vue/require-prop-types': 'warn',
     'vue/singleline-html-element-content-newline': 'warn',
     'vue/v-bind-style': 'warn',
-    'vue/v-on-event-hyphenation': 'warn',
+    'vue/v-on-event-hyphenation': [
+      'warn',
+      'always',
+      {
+        autofix: true
+      }
+    ],
     'vue/v-on-style': 'warn',
     'vue/v-slot-style': 'warn'
   }
diff --git a/lib/index.d.ts b/lib/index.d.ts
new file mode 100644
index 000000000..b6d658852
--- /dev/null
+++ b/lib/index.d.ts
@@ -0,0 +1,36 @@
+/// <reference path="./eslint-typegen.d.ts" />
+import type { Linter } from 'eslint'
+
+declare const vue: {
+  meta: any
+  configs: {
+    base: Linter.LegacyConfig
+
+    'vue2-essential': Linter.LegacyConfig
+    'vue2-strongly-recommended': Linter.LegacyConfig
+    'vue2-recommended': Linter.LegacyConfig
+
+    essential: Linter.LegacyConfig
+    'strongly-recommended': Linter.LegacyConfig
+    recommended: Linter.LegacyConfig
+
+    'flat/base': Linter.FlatConfig[]
+
+    'flat/vue2-essential': Linter.FlatConfig[]
+    'flat/vue2-strongly-recommended': Linter.FlatConfig[]
+    'flat/vue2-recommended': Linter.FlatConfig[]
+
+    'flat/essential': Linter.FlatConfig[]
+    'flat/strongly-recommended': Linter.FlatConfig[]
+    'flat/recommended': Linter.FlatConfig[]
+
+    'no-layout-rules': Linter.LegacyConfig
+  }
+  rules: Record<string, any>
+  processors: {
+    '.vue': any
+    vue: any
+  }
+}
+
+export = vue
diff --git a/lib/index.js b/lib/index.js
index c4979a98c..788f5de9e 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -1,248 +1,6 @@
-/*
- * IMPORTANT!
- * This file has been automatically generated,
- * in order to update its content execute "npm run update"
- */
 'use strict'
 
-module.exports = {
-  rules: {
-    'array-bracket-newline': require('./rules/array-bracket-newline'),
-    'array-bracket-spacing': require('./rules/array-bracket-spacing'),
-    'arrow-spacing': require('./rules/arrow-spacing'),
-    'attribute-hyphenation': require('./rules/attribute-hyphenation'),
-    'attributes-order': require('./rules/attributes-order'),
-    'block-lang': require('./rules/block-lang'),
-    'block-spacing': require('./rules/block-spacing'),
-    'block-tag-newline': require('./rules/block-tag-newline'),
-    'brace-style': require('./rules/brace-style'),
-    camelcase: require('./rules/camelcase'),
-    'comma-dangle': require('./rules/comma-dangle'),
-    'comma-spacing': require('./rules/comma-spacing'),
-    'comma-style': require('./rules/comma-style'),
-    'comment-directive': require('./rules/comment-directive'),
-    'component-api-style': require('./rules/component-api-style'),
-    'component-definition-name-casing': require('./rules/component-definition-name-casing'),
-    'component-name-in-template-casing': require('./rules/component-name-in-template-casing'),
-    'component-options-name-casing': require('./rules/component-options-name-casing'),
-    'component-tags-order': require('./rules/component-tags-order'),
-    'custom-event-name-casing': require('./rules/custom-event-name-casing'),
-    'define-macros-order': require('./rules/define-macros-order'),
-    'dot-location': require('./rules/dot-location'),
-    'dot-notation': require('./rules/dot-notation'),
-    eqeqeq: require('./rules/eqeqeq'),
-    'first-attribute-linebreak': require('./rules/first-attribute-linebreak'),
-    'func-call-spacing': require('./rules/func-call-spacing'),
-    'html-button-has-type': require('./rules/html-button-has-type'),
-    'html-closing-bracket-newline': require('./rules/html-closing-bracket-newline'),
-    'html-closing-bracket-spacing': require('./rules/html-closing-bracket-spacing'),
-    'html-comment-content-newline': require('./rules/html-comment-content-newline'),
-    'html-comment-content-spacing': require('./rules/html-comment-content-spacing'),
-    'html-comment-indent': require('./rules/html-comment-indent'),
-    'html-end-tags': require('./rules/html-end-tags'),
-    'html-indent': require('./rules/html-indent'),
-    'html-quotes': require('./rules/html-quotes'),
-    'html-self-closing': require('./rules/html-self-closing'),
-    'jsx-uses-vars': require('./rules/jsx-uses-vars'),
-    'key-spacing': require('./rules/key-spacing'),
-    'keyword-spacing': require('./rules/keyword-spacing'),
-    'match-component-file-name': require('./rules/match-component-file-name'),
-    'match-component-import-name': require('./rules/match-component-import-name'),
-    'max-attributes-per-line': require('./rules/max-attributes-per-line'),
-    'max-len': require('./rules/max-len'),
-    'multi-word-component-names': require('./rules/multi-word-component-names'),
-    'multiline-html-element-content-newline': require('./rules/multiline-html-element-content-newline'),
-    'mustache-interpolation-spacing': require('./rules/mustache-interpolation-spacing'),
-    'new-line-between-multi-line-property': require('./rules/new-line-between-multi-line-property'),
-    'next-tick-style': require('./rules/next-tick-style'),
-    'no-arrow-functions-in-watch': require('./rules/no-arrow-functions-in-watch'),
-    'no-async-in-computed-properties': require('./rules/no-async-in-computed-properties'),
-    'no-bare-strings-in-template': require('./rules/no-bare-strings-in-template'),
-    'no-boolean-default': require('./rules/no-boolean-default'),
-    'no-child-content': require('./rules/no-child-content'),
-    'no-computed-properties-in-data': require('./rules/no-computed-properties-in-data'),
-    'no-constant-condition': require('./rules/no-constant-condition'),
-    'no-custom-modifiers-on-v-model': require('./rules/no-custom-modifiers-on-v-model'),
-    'no-deprecated-data-object-declaration': require('./rules/no-deprecated-data-object-declaration'),
-    'no-deprecated-destroyed-lifecycle': require('./rules/no-deprecated-destroyed-lifecycle'),
-    'no-deprecated-dollar-listeners-api': require('./rules/no-deprecated-dollar-listeners-api'),
-    'no-deprecated-dollar-scopedslots-api': require('./rules/no-deprecated-dollar-scopedslots-api'),
-    'no-deprecated-events-api': require('./rules/no-deprecated-events-api'),
-    'no-deprecated-filter': require('./rules/no-deprecated-filter'),
-    'no-deprecated-functional-template': require('./rules/no-deprecated-functional-template'),
-    'no-deprecated-html-element-is': require('./rules/no-deprecated-html-element-is'),
-    'no-deprecated-inline-template': require('./rules/no-deprecated-inline-template'),
-    'no-deprecated-props-default-this': require('./rules/no-deprecated-props-default-this'),
-    'no-deprecated-router-link-tag-prop': require('./rules/no-deprecated-router-link-tag-prop'),
-    'no-deprecated-scope-attribute': require('./rules/no-deprecated-scope-attribute'),
-    'no-deprecated-slot-attribute': require('./rules/no-deprecated-slot-attribute'),
-    'no-deprecated-slot-scope-attribute': require('./rules/no-deprecated-slot-scope-attribute'),
-    'no-deprecated-v-bind-sync': require('./rules/no-deprecated-v-bind-sync'),
-    'no-deprecated-v-is': require('./rules/no-deprecated-v-is'),
-    'no-deprecated-v-on-native-modifier': require('./rules/no-deprecated-v-on-native-modifier'),
-    'no-deprecated-v-on-number-modifiers': require('./rules/no-deprecated-v-on-number-modifiers'),
-    'no-deprecated-vue-config-keycodes': require('./rules/no-deprecated-vue-config-keycodes'),
-    'no-dupe-keys': require('./rules/no-dupe-keys'),
-    'no-dupe-v-else-if': require('./rules/no-dupe-v-else-if'),
-    'no-duplicate-attr-inheritance': require('./rules/no-duplicate-attr-inheritance'),
-    'no-duplicate-attributes': require('./rules/no-duplicate-attributes'),
-    'no-empty-component-block': require('./rules/no-empty-component-block'),
-    'no-empty-pattern': require('./rules/no-empty-pattern'),
-    'no-export-in-script-setup': require('./rules/no-export-in-script-setup'),
-    'no-expose-after-await': require('./rules/no-expose-after-await'),
-    'no-extra-parens': require('./rules/no-extra-parens'),
-    'no-invalid-model-keys': require('./rules/no-invalid-model-keys'),
-    'no-irregular-whitespace': require('./rules/no-irregular-whitespace'),
-    'no-lifecycle-after-await': require('./rules/no-lifecycle-after-await'),
-    'no-lone-template': require('./rules/no-lone-template'),
-    'no-loss-of-precision': require('./rules/no-loss-of-precision'),
-    'no-multi-spaces': require('./rules/no-multi-spaces'),
-    'no-multiple-objects-in-class': require('./rules/no-multiple-objects-in-class'),
-    'no-multiple-slot-args': require('./rules/no-multiple-slot-args'),
-    'no-multiple-template-root': require('./rules/no-multiple-template-root'),
-    'no-mutating-props': require('./rules/no-mutating-props'),
-    'no-parsing-error': require('./rules/no-parsing-error'),
-    'no-potential-component-option-typo': require('./rules/no-potential-component-option-typo'),
-    'no-ref-as-operand': require('./rules/no-ref-as-operand'),
-    'no-reserved-component-names': require('./rules/no-reserved-component-names'),
-    'no-reserved-keys': require('./rules/no-reserved-keys'),
-    'no-reserved-props': require('./rules/no-reserved-props'),
-    '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-html-elements': require('./rules/no-restricted-html-elements'),
-    'no-restricted-props': require('./rules/no-restricted-props'),
-    'no-restricted-static-attribute': require('./rules/no-restricted-static-attribute'),
-    'no-restricted-syntax': require('./rules/no-restricted-syntax'),
-    'no-restricted-v-bind': require('./rules/no-restricted-v-bind'),
-    'no-setup-props-destructure': require('./rules/no-setup-props-destructure'),
-    'no-shared-component-data': require('./rules/no-shared-component-data'),
-    'no-side-effects-in-computed-properties': require('./rules/no-side-effects-in-computed-properties'),
-    'no-spaces-around-equal-signs-in-attribute': require('./rules/no-spaces-around-equal-signs-in-attribute'),
-    'no-sparse-arrays': require('./rules/no-sparse-arrays'),
-    'no-static-inline-styles': require('./rules/no-static-inline-styles'),
-    'no-template-key': require('./rules/no-template-key'),
-    'no-template-shadow': require('./rules/no-template-shadow'),
-    'no-template-target-blank': require('./rules/no-template-target-blank'),
-    'no-textarea-mustache': require('./rules/no-textarea-mustache'),
-    'no-this-in-before-route-enter': require('./rules/no-this-in-before-route-enter'),
-    'no-undef-components': require('./rules/no-undef-components'),
-    'no-undef-properties': require('./rules/no-undef-properties'),
-    'no-unsupported-features': require('./rules/no-unsupported-features'),
-    'no-unused-components': require('./rules/no-unused-components'),
-    'no-unused-properties': require('./rules/no-unused-properties'),
-    'no-unused-refs': require('./rules/no-unused-refs'),
-    'no-unused-vars': require('./rules/no-unused-vars'),
-    'no-use-computed-property-like-method': require('./rules/no-use-computed-property-like-method'),
-    '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'),
-    'no-v-html': require('./rules/no-v-html'),
-    'no-v-model-argument': require('./rules/no-v-model-argument'),
-    'no-v-text-v-html-on-component': require('./rules/no-v-text-v-html-on-component'),
-    'no-v-text': require('./rules/no-v-text'),
-    'no-watch-after-await': require('./rules/no-watch-after-await'),
-    'object-curly-newline': require('./rules/object-curly-newline'),
-    'object-curly-spacing': require('./rules/object-curly-spacing'),
-    'object-property-newline': require('./rules/object-property-newline'),
-    'object-shorthand': require('./rules/object-shorthand'),
-    'one-component-per-file': require('./rules/one-component-per-file'),
-    'operator-linebreak': require('./rules/operator-linebreak'),
-    'order-in-components': require('./rules/order-in-components'),
-    'padding-line-between-blocks': require('./rules/padding-line-between-blocks'),
-    'prefer-import-from-vue': require('./rules/prefer-import-from-vue'),
-    'prefer-prop-type-boolean-first': require('./rules/prefer-prop-type-boolean-first'),
-    'prefer-separate-static-class': require('./rules/prefer-separate-static-class'),
-    'prefer-template': require('./rules/prefer-template'),
-    'prefer-true-attribute-shorthand': require('./rules/prefer-true-attribute-shorthand'),
-    'prop-name-casing': require('./rules/prop-name-casing'),
-    'quote-props': require('./rules/quote-props'),
-    'require-component-is': require('./rules/require-component-is'),
-    'require-default-prop': require('./rules/require-default-prop'),
-    'require-direct-export': require('./rules/require-direct-export'),
-    'require-emit-validator': require('./rules/require-emit-validator'),
-    'require-explicit-emits': require('./rules/require-explicit-emits'),
-    'require-expose': require('./rules/require-expose'),
-    'require-name-property': require('./rules/require-name-property'),
-    'require-prop-type-constructor': require('./rules/require-prop-type-constructor'),
-    'require-prop-types': require('./rules/require-prop-types'),
-    'require-render-return': require('./rules/require-render-return'),
-    'require-slots-as-functions': require('./rules/require-slots-as-functions'),
-    'require-toggle-inside-transition': require('./rules/require-toggle-inside-transition'),
-    'require-v-for-key': require('./rules/require-v-for-key'),
-    'require-valid-default-prop': require('./rules/require-valid-default-prop'),
-    'return-in-computed-property': require('./rules/return-in-computed-property'),
-    'return-in-emits-validator': require('./rules/return-in-emits-validator'),
-    'script-indent': require('./rules/script-indent'),
-    'script-setup-uses-vars': require('./rules/script-setup-uses-vars'),
-    'singleline-html-element-content-newline': require('./rules/singleline-html-element-content-newline'),
-    'sort-keys': require('./rules/sort-keys'),
-    'space-in-parens': require('./rules/space-in-parens'),
-    'space-infix-ops': require('./rules/space-infix-ops'),
-    'space-unary-ops': require('./rules/space-unary-ops'),
-    'static-class-names-order': require('./rules/static-class-names-order'),
-    'template-curly-spacing': require('./rules/template-curly-spacing'),
-    'this-in-template': require('./rules/this-in-template'),
-    'use-v-on-exact': require('./rules/use-v-on-exact'),
-    'v-bind-style': require('./rules/v-bind-style'),
-    'v-for-delimiter-style': require('./rules/v-for-delimiter-style'),
-    'v-on-event-hyphenation': require('./rules/v-on-event-hyphenation'),
-    'v-on-function-call': require('./rules/v-on-function-call'),
-    'v-on-style': require('./rules/v-on-style'),
-    'v-slot-style': require('./rules/v-slot-style'),
-    'valid-attribute-name': require('./rules/valid-attribute-name'),
-    'valid-define-emits': require('./rules/valid-define-emits'),
-    'valid-define-props': require('./rules/valid-define-props'),
-    'valid-model-definition': require('./rules/valid-model-definition'),
-    'valid-next-tick': require('./rules/valid-next-tick'),
-    'valid-template-root': require('./rules/valid-template-root'),
-    'valid-v-bind-sync': require('./rules/valid-v-bind-sync'),
-    'valid-v-bind': require('./rules/valid-v-bind'),
-    'valid-v-cloak': require('./rules/valid-v-cloak'),
-    'valid-v-else-if': require('./rules/valid-v-else-if'),
-    'valid-v-else': require('./rules/valid-v-else'),
-    'valid-v-for': require('./rules/valid-v-for'),
-    'valid-v-html': require('./rules/valid-v-html'),
-    'valid-v-if': require('./rules/valid-v-if'),
-    'valid-v-is': require('./rules/valid-v-is'),
-    'valid-v-memo': require('./rules/valid-v-memo'),
-    'valid-v-model': require('./rules/valid-v-model'),
-    'valid-v-on': require('./rules/valid-v-on'),
-    'valid-v-once': require('./rules/valid-v-once'),
-    'valid-v-pre': require('./rules/valid-v-pre'),
-    'valid-v-show': require('./rules/valid-v-show'),
-    'valid-v-slot': require('./rules/valid-v-slot'),
-    'valid-v-text': require('./rules/valid-v-text')
-  },
-  configs: {
-    base: require('./configs/base'),
-    essential: require('./configs/essential'),
-    'no-layout-rules': require('./configs/no-layout-rules'),
-    recommended: require('./configs/recommended'),
-    'strongly-recommended': require('./configs/strongly-recommended'),
-    'vue3-essential': require('./configs/vue3-essential'),
-    'vue3-recommended': require('./configs/vue3-recommended'),
-    'vue3-strongly-recommended': require('./configs/vue3-strongly-recommended')
-  },
-  processors: {
-    '.vue': require('./processor')
-  },
-  environments: {
-    // TODO Remove in the next major version
-    /** @deprecated */
-    'setup-compiler-macros': {
-      globals: {
-        defineProps: 'readonly',
-        defineEmits: 'readonly',
-        defineExpose: 'readonly',
-        withDefaults: 'readonly'
-      }
-    }
-  }
-}
+const configs = require('./configs')
+const plugin = require('./plugin')
+
+module.exports = Object.assign(plugin, { configs })
diff --git a/lib/meta.js b/lib/meta.js
new file mode 100644
index 000000000..d70069950
--- /dev/null
+++ b/lib/meta.js
@@ -0,0 +1,3 @@
+'use strict'
+const { name, version } = require('../package.json')
+module.exports = { name, version }
diff --git a/lib/plugin.js b/lib/plugin.js
new file mode 100644
index 000000000..7bedbbdf5
--- /dev/null
+++ b/lib/plugin.js
@@ -0,0 +1,266 @@
+/*
+ * IMPORTANT!
+ * This file has been automatically generated,
+ * in order to update its content execute "npm run update"
+ */
+'use strict'
+
+const plugin = {
+  meta: require('./meta'),
+  rules: {
+    'array-bracket-newline': require('./rules/array-bracket-newline'),
+    'array-bracket-spacing': require('./rules/array-bracket-spacing'),
+    'array-element-newline': require('./rules/array-element-newline'),
+    'arrow-spacing': require('./rules/arrow-spacing'),
+    'attribute-hyphenation': require('./rules/attribute-hyphenation'),
+    'attributes-order': require('./rules/attributes-order'),
+    'block-lang': require('./rules/block-lang'),
+    'block-order': require('./rules/block-order'),
+    'block-spacing': require('./rules/block-spacing'),
+    'block-tag-newline': require('./rules/block-tag-newline'),
+    'brace-style': require('./rules/brace-style'),
+    camelcase: require('./rules/camelcase'),
+    'comma-dangle': require('./rules/comma-dangle'),
+    'comma-spacing': require('./rules/comma-spacing'),
+    'comma-style': require('./rules/comma-style'),
+    'comment-directive': require('./rules/comment-directive'),
+    'component-api-style': require('./rules/component-api-style'),
+    'component-definition-name-casing': require('./rules/component-definition-name-casing'),
+    'component-name-in-template-casing': require('./rules/component-name-in-template-casing'),
+    'component-options-name-casing': require('./rules/component-options-name-casing'),
+    'custom-event-name-casing': require('./rules/custom-event-name-casing'),
+    'define-emits-declaration': require('./rules/define-emits-declaration'),
+    'define-macros-order': require('./rules/define-macros-order'),
+    'define-props-declaration': require('./rules/define-props-declaration'),
+    'define-props-destructuring': require('./rules/define-props-destructuring'),
+    'dot-location': require('./rules/dot-location'),
+    'dot-notation': require('./rules/dot-notation'),
+    'enforce-style-attribute': require('./rules/enforce-style-attribute'),
+    eqeqeq: require('./rules/eqeqeq'),
+    'first-attribute-linebreak': require('./rules/first-attribute-linebreak'),
+    'func-call-spacing': require('./rules/func-call-spacing'),
+    'html-button-has-type': require('./rules/html-button-has-type'),
+    'html-closing-bracket-newline': require('./rules/html-closing-bracket-newline'),
+    'html-closing-bracket-spacing': require('./rules/html-closing-bracket-spacing'),
+    'html-comment-content-newline': require('./rules/html-comment-content-newline'),
+    'html-comment-content-spacing': require('./rules/html-comment-content-spacing'),
+    'html-comment-indent': require('./rules/html-comment-indent'),
+    'html-end-tags': require('./rules/html-end-tags'),
+    'html-indent': require('./rules/html-indent'),
+    'html-quotes': require('./rules/html-quotes'),
+    'html-self-closing': require('./rules/html-self-closing'),
+    'jsx-uses-vars': require('./rules/jsx-uses-vars'),
+    'key-spacing': require('./rules/key-spacing'),
+    'keyword-spacing': require('./rules/keyword-spacing'),
+    'match-component-file-name': require('./rules/match-component-file-name'),
+    'match-component-import-name': require('./rules/match-component-import-name'),
+    'max-attributes-per-line': require('./rules/max-attributes-per-line'),
+    'max-len': require('./rules/max-len'),
+    'max-lines-per-block': require('./rules/max-lines-per-block'),
+    'max-props': require('./rules/max-props'),
+    'max-template-depth': require('./rules/max-template-depth'),
+    'multi-word-component-names': require('./rules/multi-word-component-names'),
+    'multiline-html-element-content-newline': require('./rules/multiline-html-element-content-newline'),
+    'multiline-ternary': require('./rules/multiline-ternary'),
+    'mustache-interpolation-spacing': require('./rules/mustache-interpolation-spacing'),
+    'new-line-between-multi-line-property': require('./rules/new-line-between-multi-line-property'),
+    'next-tick-style': require('./rules/next-tick-style'),
+    'no-arrow-functions-in-watch': require('./rules/no-arrow-functions-in-watch'),
+    'no-async-in-computed-properties': require('./rules/no-async-in-computed-properties'),
+    'no-bare-strings-in-template': require('./rules/no-bare-strings-in-template'),
+    'no-boolean-default': require('./rules/no-boolean-default'),
+    'no-child-content': require('./rules/no-child-content'),
+    'no-computed-properties-in-data': require('./rules/no-computed-properties-in-data'),
+    'no-console': require('./rules/no-console'),
+    'no-constant-condition': require('./rules/no-constant-condition'),
+    'no-custom-modifiers-on-v-model': require('./rules/no-custom-modifiers-on-v-model'),
+    'no-deprecated-data-object-declaration': require('./rules/no-deprecated-data-object-declaration'),
+    'no-deprecated-delete-set': require('./rules/no-deprecated-delete-set'),
+    'no-deprecated-destroyed-lifecycle': require('./rules/no-deprecated-destroyed-lifecycle'),
+    'no-deprecated-dollar-listeners-api': require('./rules/no-deprecated-dollar-listeners-api'),
+    'no-deprecated-dollar-scopedslots-api': require('./rules/no-deprecated-dollar-scopedslots-api'),
+    'no-deprecated-events-api': require('./rules/no-deprecated-events-api'),
+    'no-deprecated-filter': require('./rules/no-deprecated-filter'),
+    'no-deprecated-functional-template': require('./rules/no-deprecated-functional-template'),
+    'no-deprecated-html-element-is': require('./rules/no-deprecated-html-element-is'),
+    'no-deprecated-inline-template': require('./rules/no-deprecated-inline-template'),
+    'no-deprecated-model-definition': require('./rules/no-deprecated-model-definition'),
+    'no-deprecated-props-default-this': require('./rules/no-deprecated-props-default-this'),
+    'no-deprecated-router-link-tag-prop': require('./rules/no-deprecated-router-link-tag-prop'),
+    'no-deprecated-scope-attribute': require('./rules/no-deprecated-scope-attribute'),
+    'no-deprecated-slot-attribute': require('./rules/no-deprecated-slot-attribute'),
+    'no-deprecated-slot-scope-attribute': require('./rules/no-deprecated-slot-scope-attribute'),
+    'no-deprecated-v-bind-sync': require('./rules/no-deprecated-v-bind-sync'),
+    'no-deprecated-v-is': require('./rules/no-deprecated-v-is'),
+    'no-deprecated-v-on-native-modifier': require('./rules/no-deprecated-v-on-native-modifier'),
+    'no-deprecated-v-on-number-modifiers': require('./rules/no-deprecated-v-on-number-modifiers'),
+    'no-deprecated-vue-config-keycodes': require('./rules/no-deprecated-vue-config-keycodes'),
+    'no-dupe-keys': require('./rules/no-dupe-keys'),
+    'no-dupe-v-else-if': require('./rules/no-dupe-v-else-if'),
+    'no-duplicate-attr-inheritance': require('./rules/no-duplicate-attr-inheritance'),
+    'no-duplicate-attributes': require('./rules/no-duplicate-attributes'),
+    'no-duplicate-class-names': require('./rules/no-duplicate-class-names'),
+    'no-empty-component-block': require('./rules/no-empty-component-block'),
+    'no-empty-pattern': require('./rules/no-empty-pattern'),
+    'no-export-in-script-setup': require('./rules/no-export-in-script-setup'),
+    'no-expose-after-await': require('./rules/no-expose-after-await'),
+    'no-extra-parens': require('./rules/no-extra-parens'),
+    'no-implicit-coercion': require('./rules/no-implicit-coercion'),
+    'no-import-compiler-macros': require('./rules/no-import-compiler-macros'),
+    'no-irregular-whitespace': require('./rules/no-irregular-whitespace'),
+    'no-lifecycle-after-await': require('./rules/no-lifecycle-after-await'),
+    'no-lone-template': require('./rules/no-lone-template'),
+    'no-loss-of-precision': require('./rules/no-loss-of-precision'),
+    'no-multi-spaces': require('./rules/no-multi-spaces'),
+    'no-multiple-objects-in-class': require('./rules/no-multiple-objects-in-class'),
+    'no-multiple-slot-args': require('./rules/no-multiple-slot-args'),
+    'no-multiple-template-root': require('./rules/no-multiple-template-root'),
+    'no-mutating-props': require('./rules/no-mutating-props'),
+    'no-negated-condition': require('./rules/no-negated-condition'),
+    'no-negated-v-if-condition': require('./rules/no-negated-v-if-condition'),
+    'no-parsing-error': require('./rules/no-parsing-error'),
+    'no-potential-component-option-typo': require('./rules/no-potential-component-option-typo'),
+    'no-ref-as-operand': require('./rules/no-ref-as-operand'),
+    'no-ref-object-reactivity-loss': require('./rules/no-ref-object-reactivity-loss'),
+    'no-required-prop-with-default': require('./rules/no-required-prop-with-default'),
+    'no-reserved-component-names': require('./rules/no-reserved-component-names'),
+    'no-reserved-keys': require('./rules/no-reserved-keys'),
+    'no-reserved-props': require('./rules/no-reserved-props'),
+    '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-names': require('./rules/no-restricted-component-names'),
+    'no-restricted-component-options': require('./rules/no-restricted-component-options'),
+    'no-restricted-custom-event': require('./rules/no-restricted-custom-event'),
+    'no-restricted-html-elements': require('./rules/no-restricted-html-elements'),
+    'no-restricted-props': require('./rules/no-restricted-props'),
+    'no-restricted-static-attribute': require('./rules/no-restricted-static-attribute'),
+    'no-restricted-syntax': require('./rules/no-restricted-syntax'),
+    'no-restricted-v-bind': require('./rules/no-restricted-v-bind'),
+    'no-restricted-v-on': require('./rules/no-restricted-v-on'),
+    'no-root-v-if': require('./rules/no-root-v-if'),
+    'no-setup-props-reactivity-loss': require('./rules/no-setup-props-reactivity-loss'),
+    'no-shared-component-data': require('./rules/no-shared-component-data'),
+    'no-side-effects-in-computed-properties': require('./rules/no-side-effects-in-computed-properties'),
+    'no-spaces-around-equal-signs-in-attribute': require('./rules/no-spaces-around-equal-signs-in-attribute'),
+    'no-sparse-arrays': require('./rules/no-sparse-arrays'),
+    'no-static-inline-styles': require('./rules/no-static-inline-styles'),
+    'no-template-key': require('./rules/no-template-key'),
+    'no-template-shadow': require('./rules/no-template-shadow'),
+    'no-template-target-blank': require('./rules/no-template-target-blank'),
+    'no-textarea-mustache': require('./rules/no-textarea-mustache'),
+    'no-this-in-before-route-enter': require('./rules/no-this-in-before-route-enter'),
+    'no-undef-components': require('./rules/no-undef-components'),
+    'no-undef-properties': require('./rules/no-undef-properties'),
+    'no-unsupported-features': require('./rules/no-unsupported-features'),
+    'no-unused-components': require('./rules/no-unused-components'),
+    'no-unused-emit-declarations': require('./rules/no-unused-emit-declarations'),
+    'no-unused-properties': require('./rules/no-unused-properties'),
+    'no-unused-refs': require('./rules/no-unused-refs'),
+    'no-unused-vars': require('./rules/no-unused-vars'),
+    'no-use-computed-property-like-method': require('./rules/no-use-computed-property-like-method'),
+    'no-use-v-else-with-v-for': require('./rules/no-use-v-else-with-v-for'),
+    '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'),
+    'no-v-html': require('./rules/no-v-html'),
+    'no-v-model-argument': require('./rules/no-v-model-argument'),
+    'no-v-text-v-html-on-component': require('./rules/no-v-text-v-html-on-component'),
+    'no-v-text': require('./rules/no-v-text'),
+    'no-watch-after-await': require('./rules/no-watch-after-await'),
+    'object-curly-newline': require('./rules/object-curly-newline'),
+    'object-curly-spacing': require('./rules/object-curly-spacing'),
+    'object-property-newline': require('./rules/object-property-newline'),
+    'object-shorthand': require('./rules/object-shorthand'),
+    'one-component-per-file': require('./rules/one-component-per-file'),
+    'operator-linebreak': require('./rules/operator-linebreak'),
+    'order-in-components': require('./rules/order-in-components'),
+    'padding-line-between-blocks': require('./rules/padding-line-between-blocks'),
+    'padding-line-between-tags': require('./rules/padding-line-between-tags'),
+    'padding-lines-in-component-definition': require('./rules/padding-lines-in-component-definition'),
+    'prefer-define-options': require('./rules/prefer-define-options'),
+    'prefer-import-from-vue': require('./rules/prefer-import-from-vue'),
+    'prefer-prop-type-boolean-first': require('./rules/prefer-prop-type-boolean-first'),
+    'prefer-separate-static-class': require('./rules/prefer-separate-static-class'),
+    'prefer-template': require('./rules/prefer-template'),
+    'prefer-true-attribute-shorthand': require('./rules/prefer-true-attribute-shorthand'),
+    'prefer-use-template-ref': require('./rules/prefer-use-template-ref'),
+    'prop-name-casing': require('./rules/prop-name-casing'),
+    'quote-props': require('./rules/quote-props'),
+    'require-component-is': require('./rules/require-component-is'),
+    'require-default-export': require('./rules/require-default-export'),
+    'require-default-prop': require('./rules/require-default-prop'),
+    'require-direct-export': require('./rules/require-direct-export'),
+    'require-emit-validator': require('./rules/require-emit-validator'),
+    'require-explicit-emits': require('./rules/require-explicit-emits'),
+    'require-explicit-slots': require('./rules/require-explicit-slots'),
+    'require-expose': require('./rules/require-expose'),
+    'require-macro-variable-name': require('./rules/require-macro-variable-name'),
+    'require-name-property': require('./rules/require-name-property'),
+    'require-prop-comment': require('./rules/require-prop-comment'),
+    'require-prop-type-constructor': require('./rules/require-prop-type-constructor'),
+    'require-prop-types': require('./rules/require-prop-types'),
+    'require-render-return': require('./rules/require-render-return'),
+    'require-slots-as-functions': require('./rules/require-slots-as-functions'),
+    'require-toggle-inside-transition': require('./rules/require-toggle-inside-transition'),
+    'require-typed-object-prop': require('./rules/require-typed-object-prop'),
+    'require-typed-ref': require('./rules/require-typed-ref'),
+    'require-v-for-key': require('./rules/require-v-for-key'),
+    'require-valid-default-prop': require('./rules/require-valid-default-prop'),
+    'restricted-component-names': require('./rules/restricted-component-names'),
+    'return-in-computed-property': require('./rules/return-in-computed-property'),
+    'return-in-emits-validator': require('./rules/return-in-emits-validator'),
+    'script-indent': require('./rules/script-indent'),
+    'singleline-html-element-content-newline': require('./rules/singleline-html-element-content-newline'),
+    'slot-name-casing': require('./rules/slot-name-casing'),
+    'sort-keys': require('./rules/sort-keys'),
+    'space-in-parens': require('./rules/space-in-parens'),
+    'space-infix-ops': require('./rules/space-infix-ops'),
+    'space-unary-ops': require('./rules/space-unary-ops'),
+    'static-class-names-order': require('./rules/static-class-names-order'),
+    'template-curly-spacing': require('./rules/template-curly-spacing'),
+    'this-in-template': require('./rules/this-in-template'),
+    'use-v-on-exact': require('./rules/use-v-on-exact'),
+    'v-bind-style': require('./rules/v-bind-style'),
+    'v-for-delimiter-style': require('./rules/v-for-delimiter-style'),
+    'v-if-else-key': require('./rules/v-if-else-key'),
+    'v-on-event-hyphenation': require('./rules/v-on-event-hyphenation'),
+    'v-on-handler-style': require('./rules/v-on-handler-style'),
+    'v-on-style': require('./rules/v-on-style'),
+    'v-slot-style': require('./rules/v-slot-style'),
+    'valid-attribute-name': require('./rules/valid-attribute-name'),
+    'valid-define-emits': require('./rules/valid-define-emits'),
+    'valid-define-options': require('./rules/valid-define-options'),
+    'valid-define-props': require('./rules/valid-define-props'),
+    'valid-model-definition': require('./rules/valid-model-definition'),
+    'valid-next-tick': require('./rules/valid-next-tick'),
+    'valid-template-root': require('./rules/valid-template-root'),
+    'valid-v-bind-sync': require('./rules/valid-v-bind-sync'),
+    'valid-v-bind': require('./rules/valid-v-bind'),
+    'valid-v-cloak': require('./rules/valid-v-cloak'),
+    'valid-v-else-if': require('./rules/valid-v-else-if'),
+    'valid-v-else': require('./rules/valid-v-else'),
+    'valid-v-for': require('./rules/valid-v-for'),
+    'valid-v-html': require('./rules/valid-v-html'),
+    'valid-v-if': require('./rules/valid-v-if'),
+    'valid-v-is': require('./rules/valid-v-is'),
+    'valid-v-memo': require('./rules/valid-v-memo'),
+    'valid-v-model': require('./rules/valid-v-model'),
+    'valid-v-on': require('./rules/valid-v-on'),
+    'valid-v-once': require('./rules/valid-v-once'),
+    'valid-v-pre': require('./rules/valid-v-pre'),
+    'valid-v-show': require('./rules/valid-v-show'),
+    'valid-v-slot': require('./rules/valid-v-slot'),
+    'valid-v-text': require('./rules/valid-v-text')
+  },
+  processors: {
+    '.vue': require('./processor'),
+    vue: require('./processor')
+  }
+}
+
+module.exports = plugin
diff --git a/lib/processor.js b/lib/processor.js
index e0c10ef72..b7268fab9 100644
--- a/lib/processor.js
+++ b/lib/processor.js
@@ -46,40 +46,50 @@ module.exports = {
         const directiveType = message.messageId
         const data = message.message.split(' ')
         switch (directiveType) {
-          case 'disableBlock':
+          case 'disableBlock': {
             state.block.disableAllKeys.add(data[1])
             break
-          case 'disableLine':
+          }
+          case 'disableLine': {
             state.line.disableAllKeys.add(data[1])
             break
-          case 'enableBlock':
+          }
+          case 'enableBlock': {
             state.block.disableAllKeys.clear()
             break
-          case 'enableLine':
+          }
+          case 'enableLine': {
             state.line.disableAllKeys.clear()
             break
-          case 'disableBlockRule':
+          }
+          case 'disableBlockRule': {
             addDisableRule(state.block.disableRuleKeys, data[1], data[2])
             break
-          case 'disableLineRule':
+          }
+          case 'disableLineRule': {
             addDisableRule(state.line.disableRuleKeys, data[1], data[2])
             break
-          case 'enableBlockRule':
+          }
+          case 'enableBlockRule': {
             state.block.disableRuleKeys.delete(data[1])
             break
-          case 'enableLineRule':
+          }
+          case 'enableLineRule': {
             state.line.disableRuleKeys.delete(data[1])
             break
-          case 'clear':
+          }
+          case 'clear': {
             state.block.disableAllKeys.clear()
             state.block.disableRuleKeys.clear()
             state.line.disableAllKeys.clear()
             state.line.disableRuleKeys.clear()
             break
-          default:
+          }
+          default: {
             // unused eslint-disable comments report
             unusedDisableDirectiveReports.set(messageToKey(message), message)
             break
+          }
         }
         return false
       } else {
@@ -124,7 +134,9 @@ module.exports = {
     return filteredMessages
   },
 
-  supportsAutofix: true
+  supportsAutofix: true,
+
+  meta: require('./meta')
 }
 
 /**
diff --git a/lib/removed-rules.js b/lib/removed-rules.js
index cf2b5e8fa..bebda0058 100644
--- a/lib/removed-rules.js
+++ b/lib/removed-rules.js
@@ -10,6 +10,12 @@
 
 /** @type {RemovedRule[]} */
 module.exports = [
+  {
+    ruleName: 'component-tags-order',
+    replacedBy: ['block-order'],
+    deprecatedInVersion: 'v9.16.0',
+    removedInVersion: 'v10.0.0'
+  },
   {
     ruleName: 'experimental-script-setup-vars',
     replacedBy: [],
@@ -28,10 +34,40 @@ module.exports = [
     deprecatedInVersion: 'v5.0.0',
     removedInVersion: 'v9.0.0'
   },
+  {
+    ruleName: 'no-invalid-model-keys',
+    replacedBy: ['valid-model-definition'],
+    deprecatedInVersion: 'v9.0.0',
+    removedInVersion: 'v10.0.0'
+  },
+  {
+    ruleName: 'no-ref-object-destructure',
+    replacedBy: ['no-ref-object-reactivity-loss'],
+    deprecatedInVersion: 'v9.17.0',
+    removedInVersion: 'v10.0.0'
+  },
+  {
+    ruleName: 'no-setup-props-destructure',
+    replacedBy: ['no-setup-props-reactivity-loss'],
+    deprecatedInVersion: 'v9.17.0',
+    removedInVersion: 'v10.0.0'
+  },
   {
     ruleName: 'no-unregistered-components',
     replacedBy: ['no-undef-components'],
     deprecatedInVersion: 'v8.4.0',
     removedInVersion: 'v9.0.0'
+  },
+  {
+    ruleName: 'script-setup-uses-vars',
+    replacedBy: [],
+    deprecatedInVersion: 'v9.0.0',
+    removedInVersion: 'v10.0.0'
+  },
+  {
+    ruleName: 'v-on-function-call',
+    replacedBy: ['v-on-handler-style'],
+    deprecatedInVersion: 'v9.7.0',
+    removedInVersion: 'v10.0.0'
   }
 ]
diff --git a/lib/rules/array-bracket-newline.js b/lib/rules/array-bracket-newline.js
index c667fc7e3..d512bdfa9 100644
--- a/lib/rules/array-bracket-newline.js
+++ b/lib/rules/array-bracket-newline.js
@@ -3,9 +3,9 @@
  */
 'use strict'
 
-const { wrapCoreRule } = require('../utils')
+const { wrapStylisticOrCoreRule } = require('../utils')
 
-// eslint-disable-next-line no-invalid-meta, no-invalid-meta-docs-categories
-module.exports = wrapCoreRule('array-bracket-newline', {
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = wrapStylisticOrCoreRule('array-bracket-newline', {
   skipDynamicArguments: true
 })
diff --git a/lib/rules/array-bracket-spacing.js b/lib/rules/array-bracket-spacing.js
index 0541d0585..779eb270f 100644
--- a/lib/rules/array-bracket-spacing.js
+++ b/lib/rules/array-bracket-spacing.js
@@ -3,9 +3,9 @@
  */
 'use strict'
 
-const { wrapCoreRule } = require('../utils')
+const { wrapStylisticOrCoreRule } = require('../utils')
 
-// eslint-disable-next-line no-invalid-meta, no-invalid-meta-docs-categories
-module.exports = wrapCoreRule('array-bracket-spacing', {
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = wrapStylisticOrCoreRule('array-bracket-spacing', {
   skipDynamicArguments: true
 })
diff --git a/lib/rules/array-element-newline.js b/lib/rules/array-element-newline.js
new file mode 100644
index 000000000..b7af8b7e1
--- /dev/null
+++ b/lib/rules/array-element-newline.js
@@ -0,0 +1,11 @@
+/**
+ * @author alshyra
+ */
+'use strict'
+
+const { wrapStylisticOrCoreRule } = require('../utils')
+
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = wrapStylisticOrCoreRule('array-element-newline', {
+  skipDynamicArguments: true
+})
diff --git a/lib/rules/arrow-spacing.js b/lib/rules/arrow-spacing.js
index f31ab3c3d..f6d5bced5 100644
--- a/lib/rules/arrow-spacing.js
+++ b/lib/rules/arrow-spacing.js
@@ -3,7 +3,7 @@
  */
 'use strict'
 
-const { wrapCoreRule } = require('../utils')
+const { wrapStylisticOrCoreRule } = require('../utils')
 
-// eslint-disable-next-line no-invalid-meta, no-invalid-meta-docs-categories
-module.exports = wrapCoreRule('arrow-spacing')
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = wrapStylisticOrCoreRule('arrow-spacing')
diff --git a/lib/rules/attribute-hyphenation.js b/lib/rules/attribute-hyphenation.js
index 1c097763c..4b6084f20 100644
--- a/lib/rules/attribute-hyphenation.js
+++ b/lib/rules/attribute-hyphenation.js
@@ -6,12 +6,9 @@
 
 const utils = require('../utils')
 const casing = require('../utils/casing')
+const { toRegExpGroupMatcher } = require('../utils/regexp')
 const svgAttributes = require('../utils/svg-attributes-weird-case.json')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 /**
  * @param {VDirective | VAttribute} node
  * @returns {string | null}
@@ -22,7 +19,7 @@ function getAttributeName(node) {
   }
 
   if (
-    node.key.name.name === 'bind' &&
+    (node.key.name.name === 'bind' || node.key.name.name === 'model') &&
     node.key.argument &&
     node.key.argument.type === 'VIdentifier'
   ) {
@@ -38,7 +35,7 @@ module.exports = {
     docs: {
       description:
         'enforce attribute naming style on custom components in template',
-      categories: ['vue3-strongly-recommended', 'strongly-recommended'],
+      categories: ['vue3-strongly-recommended', 'vue2-strongly-recommended'],
       url: 'https://eslint.vuejs.org/rules/attribute-hyphenation.html'
     },
     fixable: 'code',
@@ -55,23 +52,34 @@ module.exports = {
               allOf: [
                 { type: 'string' },
                 { not: { type: 'string', pattern: ':exit$' } },
-                { not: { type: 'string', pattern: '^\\s*$' } }
+                { not: { type: 'string', pattern: String.raw`^\s*$` } }
               ]
             },
             uniqueItems: true,
             additionalItems: false
+          },
+          ignoreTags: {
+            type: 'array',
+            items: { type: 'string' },
+            uniqueItems: true,
+            additionalItems: false
           }
         },
         additionalProperties: false
       }
-    ]
+    ],
+    messages: {
+      mustBeHyphenated: "Attribute '{{text}}' must be hyphenated.",
+      cannotBeHyphenated: "Attribute '{{text}}' can't be hyphenated."
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
-    const sourceCode = context.getSourceCode()
+    const sourceCode = context.sourceCode
     const option = context.options[0]
     const optionsPayload = context.options[1]
     const useHyphenated = option !== 'never'
+    const isIgnoredTagName = toRegExpGroupMatcher(optionsPayload?.ignoreTags)
     const ignoredAttributes = ['data-', 'aria-', 'slot-scope', ...svgAttributes]
 
     if (optionsPayload && optionsPayload.ignore) {
@@ -92,14 +100,28 @@ module.exports = {
       context.report({
         node: node.key,
         loc: node.loc,
-        message: useHyphenated
-          ? "Attribute '{{text}}' must be hyphenated."
-          : "Attribute '{{text}}' can't be hyphenated.",
+        messageId: useHyphenated ? 'mustBeHyphenated' : 'cannotBeHyphenated',
         data: {
           text
         },
-        fix: (fixer) =>
-          fixer.replaceText(node.key, text.replace(name, caseConverter(name)))
+        fix: (fixer) => {
+          if (text.includes('_')) {
+            return null
+          }
+
+          if (text.endsWith('.sync')) {
+            return null
+          }
+
+          if (/^[A-Z]/.test(name)) {
+            return null
+          }
+
+          return fixer.replaceText(
+            node.key,
+            text.replace(name, caseConverter(name))
+          )
+        }
       })
     }
 
@@ -116,15 +138,12 @@ module.exports = {
       return useHyphenated ? value.toLowerCase() === value : !/-/.test(value)
     }
 
-    // ----------------------------------------------------------------------
-    // Public
-    // ----------------------------------------------------------------------
-
     return utils.defineTemplateBodyVisitor(context, {
       VAttribute(node) {
+        const element = node.parent.parent
         if (
-          !utils.isCustomComponent(node.parent.parent) &&
-          node.parent.parent.name !== 'slot'
+          (!utils.isCustomComponent(element) && element.name !== 'slot') ||
+          isIgnoredTagName(element.rawName)
         )
           return
 
diff --git a/lib/rules/attributes-order.js b/lib/rules/attributes-order.js
index d88e9c934..94b9cccdb 100644
--- a/lib/rules/attributes-order.js
+++ b/lib/rules/attributes-order.js
@@ -5,10 +5,6 @@
 'use strict'
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 /**
  * @typedef { VDirective & { key: VDirectiveKey & { name: VIdentifier & { name: 'bind' } } } } VBindDirective
  */
@@ -24,6 +20,9 @@ const ATTRS = {
   TWO_WAY_BINDING: 'TWO_WAY_BINDING',
   OTHER_DIRECTIVES: 'OTHER_DIRECTIVES',
   OTHER_ATTR: 'OTHER_ATTR',
+  ATTR_STATIC: 'ATTR_STATIC',
+  ATTR_DYNAMIC: 'ATTR_DYNAMIC',
+  ATTR_SHORTHAND_BOOL: 'ATTR_SHORTHAND_BOOL',
   EVENTS: 'EVENTS',
   CONTENT: 'CONTENT'
 }
@@ -70,6 +69,15 @@ function isVBindObject(node) {
   return isVBind(node) && node.key.argument == null
 }
 
+/**
+ * Check whether the given attribute is a shorthand boolean like `selected`.
+ * @param {VAttribute | VDirective | undefined | null} node
+ * @returns { node is VAttribute }
+ */
+function isVShorthandBoolean(node) {
+  return isVAttribute(node) && !node.value
+}
+
 /**
  * @param {VAttribute | VDirective} attribute
  * @param {SourceCode} sourceCode
@@ -112,30 +120,39 @@ function getAttributeType(attribute) {
     if (!isVBind(attribute)) {
       const name = attribute.key.name.name
       switch (name) {
-        case 'for':
+        case 'for': {
           return ATTRS.LIST_RENDERING
+        }
         case 'if':
         case 'else-if':
         case 'else':
         case 'show':
-        case 'cloak':
+        case 'cloak': {
           return ATTRS.CONDITIONALS
+        }
         case 'pre':
-        case 'once':
+        case 'once': {
           return ATTRS.RENDER_MODIFIERS
-        case 'model':
+        }
+        case 'model': {
           return ATTRS.TWO_WAY_BINDING
-        case 'on':
+        }
+        case 'on': {
           return ATTRS.EVENTS
+        }
         case 'html':
-        case 'text':
+        case 'text': {
           return ATTRS.CONTENT
-        case 'slot':
+        }
+        case 'slot': {
           return ATTRS.SLOT
-        case 'is':
+        }
+        case 'is': {
           return ATTRS.DEFINITION
-        default:
+        }
+        default: {
           return ATTRS.OTHER_DIRECTIVES
+        }
       }
     }
     propName =
@@ -146,18 +163,29 @@ function getAttributeType(attribute) {
     propName = attribute.key.name
   }
   switch (propName) {
-    case 'is':
+    case 'is': {
       return ATTRS.DEFINITION
-    case 'id':
+    }
+    case 'id': {
       return ATTRS.GLOBAL
+    }
     case 'ref':
-    case 'key':
+    case 'key': {
       return ATTRS.UNIQUE
+    }
     case 'slot':
-    case 'slot-scope':
+    case 'slot-scope': {
       return ATTRS.SLOT
-    default:
-      return ATTRS.OTHER_ATTR
+    }
+    default: {
+      if (isVBind(attribute)) {
+        return ATTRS.ATTR_DYNAMIC
+      }
+      if (isVShorthandBoolean(attribute)) {
+        return ATTRS.ATTR_SHORTHAND_BOOL
+      }
+      return ATTRS.ATTR_STATIC
+    }
   }
 }
 
@@ -168,9 +196,9 @@ function getAttributeType(attribute) {
  */
 function getPosition(attribute, attributePosition) {
   const attributeType = getAttributeType(attribute)
-  return attributePosition[attributeType] != null
-    ? attributePosition[attributeType]
-    : null
+  return attributePosition[attributeType] == null
+    ? null
+    : attributePosition[attributeType]
 }
 
 /**
@@ -194,7 +222,12 @@ function isAlphabetical(prevNode, currNode, sourceCode) {
  * @returns {RuleListener} AST event handlers.
  */
 function create(context) {
-  const sourceCode = context.getSourceCode()
+  const sourceCode = context.sourceCode
+  const otherAttrs = [
+    ATTRS.ATTR_DYNAMIC,
+    ATTRS.ATTR_STATIC,
+    ATTRS.ATTR_SHORTHAND_BOOL
+  ]
   let attributeOrder = [
     ATTRS.DEFINITION,
     ATTRS.LIST_RENDERING,
@@ -204,16 +237,43 @@ function create(context) {
     [ATTRS.UNIQUE, ATTRS.SLOT],
     ATTRS.TWO_WAY_BINDING,
     ATTRS.OTHER_DIRECTIVES,
-    ATTRS.OTHER_ATTR,
+    otherAttrs,
     ATTRS.EVENTS,
     ATTRS.CONTENT
   ]
   if (context.options[0] && context.options[0].order) {
-    attributeOrder = context.options[0].order
+    attributeOrder = [...context.options[0].order]
+
+    // check if `OTHER_ATTR` is valid
+    for (const item of attributeOrder.flat()) {
+      if (item === ATTRS.OTHER_ATTR) {
+        for (const attribute of attributeOrder.flat()) {
+          if (otherAttrs.includes(attribute)) {
+            throw new Error(
+              `Value "${ATTRS.OTHER_ATTR}" is not allowed with "${attribute}".`
+            )
+          }
+        }
+      }
+    }
+
+    // expand `OTHER_ATTR` alias
+    for (const [index, item] of attributeOrder.entries()) {
+      if (item === ATTRS.OTHER_ATTR) {
+        attributeOrder[index] = otherAttrs
+      } else if (Array.isArray(item) && item.includes(ATTRS.OTHER_ATTR)) {
+        const attributes = item.filter((i) => i !== ATTRS.OTHER_ATTR)
+        attributes.push(...otherAttrs)
+        attributeOrder[index] = attributes
+      }
+    }
   }
   const alphabetical = Boolean(
     context.options[0] && context.options[0].alphabetical
   )
+  const sortLineLength = Boolean(
+    context.options[0] && context.options[0].sortLineLength
+  )
 
   /** @type { { [key: string]: number } } */
   const attributePosition = {}
@@ -234,9 +294,10 @@ function create(context) {
     const prevNode = sourceCode.getText(previousNode.key)
     context.report({
       node,
-      message: `Attribute "${currentNode}" should go before "${prevNode}".`,
+      messageId: 'expectedOrder',
       data: {
-        currentNode
+        currentNode,
+        prevNode
       },
 
       fix(fixer) {
@@ -289,9 +350,23 @@ function create(context) {
         const { attr, position } = attributeAndPositions[index]
 
         let valid = previousPosition <= position
-        if (valid && alphabetical && previousPosition === position) {
-          valid = isAlphabetical(previousNode, attr, sourceCode)
+        if (valid && previousPosition === position) {
+          let sortedByLength = false
+          if (sortLineLength) {
+            const prevText = sourceCode.getText(previousNode)
+            const currText = sourceCode.getText(attr)
+
+            if (prevText.length !== currText.length) {
+              valid = prevText.length < currText.length
+              sortedByLength = true
+            }
+          }
+
+          if (alphabetical && !sortedByLength) {
+            valid = isAlphabetical(previousNode, attr, sourceCode)
+          }
         }
+
         if (valid) {
           previousNode = attr
           previousPosition = position
@@ -366,7 +441,7 @@ module.exports = {
     type: 'suggestion',
     docs: {
       description: 'enforce order of attributes',
-      categories: ['vue3-recommended', 'recommended'],
+      categories: ['vue3-recommended', 'vue2-recommended'],
       url: 'https://eslint.vuejs.org/rules/attributes-order.html'
     },
     fixable: 'code',
@@ -377,7 +452,7 @@ module.exports = {
           order: {
             type: 'array',
             items: {
-              anyOf: [
+              oneOf: [
                 { enum: Object.values(ATTRS) },
                 {
                   type: 'array',
@@ -392,11 +467,15 @@ module.exports = {
             uniqueItems: true,
             additionalItems: false
           },
-          alphabetical: { type: 'boolean' }
+          alphabetical: { type: 'boolean' },
+          sortLineLength: { type: 'boolean' }
         },
         additionalProperties: false
       }
-    ]
+    ],
+    messages: {
+      expectedOrder: `Attribute "{{currentNode}}" should go before "{{prevNode}}".`
+    }
   },
   create
 }
diff --git a/lib/rules/block-lang.js b/lib/rules/block-lang.js
index c1998eb5f..8fccd29f9 100644
--- a/lib/rules/block-lang.js
+++ b/lib/rules/block-lang.js
@@ -40,12 +40,14 @@ const DEFAULT_LANGUAGES = {
  * @param {NonNullable<BlockOptions['lang']>} lang
  */
 function getAllowsLangPhrase(lang) {
-  const langs = [...lang].map((s) => `"${s}"`)
+  const langs = [...lang].map((s) => `'${s}'`)
   switch (langs.length) {
-    case 1:
+    case 1: {
       return langs[0]
-    default:
+    }
+    default: {
       return `${langs.slice(0, -1).join(', ')}, and ${langs[langs.length - 1]}`
+    }
   }
 }
 
@@ -108,10 +110,6 @@ function normalizeOptions(options) {
   return normalized
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'suggestion',
@@ -130,7 +128,7 @@ module.exports = {
                 type: 'object',
                 properties: {
                   lang: {
-                    anyOf: [
+                    oneOf: [
                       { type: 'string' },
                       {
                         type: 'array',
@@ -159,7 +157,7 @@ module.exports = {
       missing: "The 'lang' attribute of '<{{tag}}>' is missing.",
       unexpected: "Do not specify the 'lang' attribute of '<{{tag}}>'.",
       useOrNot:
-        "Only {{allows}} can be used for the 'lang' attribute of '<{{tag}}>'. Or, not specifying the `lang` attribute is allowed.",
+        "Only {{allows}} can be used for the 'lang' attribute of '<{{tag}}>'. Or, not specifying the 'lang' attribute is allowed.",
       unexpectedDefault:
         "Do not explicitly specify the default language for the 'lang' attribute of '<{{tag}}>'."
     }
diff --git a/lib/rules/component-tags-order.js b/lib/rules/block-order.js
similarity index 86%
rename from lib/rules/component-tags-order.js
rename to lib/rules/block-order.js
index 60640dc39..39bd4c6e3 100644
--- a/lib/rules/component-tags-order.js
+++ b/lib/rules/block-order.js
@@ -4,10 +4,6 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 const { parseSelector } = require('../utils/selector')
 
@@ -15,16 +11,8 @@ const { parseSelector } = require('../utils/selector')
  * @typedef {import('../utils/selector').VElementSelector} VElementSelector
  */
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 const DEFAULT_ORDER = Object.freeze([['script', 'template'], 'style'])
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 /**
  * @param {VElement} element
  * @return {string}
@@ -50,8 +38,8 @@ module.exports = {
     type: 'suggestion',
     docs: {
       description: 'enforce order of component top-level elements',
-      categories: ['vue3-recommended', 'recommended'],
-      url: 'https://eslint.vuejs.org/rules/component-tags-order.html'
+      categories: ['vue3-recommended', 'vue2-recommended'],
+      url: 'https://eslint.vuejs.org/rules/block-order.html'
     },
     fixable: 'code',
     schema: [
@@ -61,7 +49,7 @@ module.exports = {
           order: {
             type: 'array',
             items: {
-              anyOf: [
+              oneOf: [
                 { type: 'string' },
                 { type: 'array', items: { type: 'string' }, uniqueItems: true }
               ]
@@ -118,9 +106,10 @@ module.exports = {
     function getOrderElement(element) {
       return orders.find((o) => o.selector.test(element))
     }
+    const sourceCode = context.sourceCode
     const documentFragment =
-      context.parserServices.getDocumentFragment &&
-      context.parserServices.getDocumentFragment()
+      sourceCode.parserServices.getDocumentFragment &&
+      sourceCode.parserServices.getDocumentFragment()
 
     function getTopLevelHTMLElements() {
       if (documentFragment) {
@@ -140,7 +129,6 @@ module.exports = {
           const order = getOrderElement(element)
           return order ? [{ order, element }] : []
         })
-        const sourceCode = context.getSourceCode()
         for (const [index, elementWithOrders] of elementsWithOrder.entries()) {
           const { order: expected, element } = elementWithOrders
           const firstUnordered = elementsWithOrder
diff --git a/lib/rules/block-spacing.js b/lib/rules/block-spacing.js
index 0634f2b6a..37c526e91 100644
--- a/lib/rules/block-spacing.js
+++ b/lib/rules/block-spacing.js
@@ -3,9 +3,9 @@
  */
 'use strict'
 
-const { wrapCoreRule } = require('../utils')
+const { wrapStylisticOrCoreRule } = require('../utils')
 
-// eslint-disable-next-line no-invalid-meta, no-invalid-meta-docs-categories
-module.exports = wrapCoreRule('block-spacing', {
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = wrapStylisticOrCoreRule('block-spacing', {
   skipDynamicArguments: true
 })
diff --git a/lib/rules/block-tag-newline.js b/lib/rules/block-tag-newline.js
index 8459f5760..1ccf45814 100644
--- a/lib/rules/block-tag-newline.js
+++ b/lib/rules/block-tag-newline.js
@@ -25,17 +25,15 @@ function getLinebreakCount(text) {
  */
 function getPhrase(lineBreaks) {
   switch (lineBreaks) {
-    case 1:
+    case 1: {
       return '1 line break'
-    default:
+    }
+    default: {
       return `${lineBreaks} line breaks`
+    }
   }
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 const ENUM_OPTIONS = { enum: ['always', 'never', 'consistent', 'ignore'] }
 module.exports = {
   meta: {
@@ -76,8 +74,6 @@ module.exports = {
     messages: {
       unexpectedOpeningLinebreak:
         "There should be no line break after '<{{tag}}>'.",
-      unexpectedClosingLinebreak:
-        "There should be no line break before '</{{tag}}>'.",
       expectedOpeningLinebreak:
         "Expected {{expected}} after '<{{tag}}>', but {{actual}} found.",
       expectedClosingLinebreak:
@@ -88,15 +84,14 @@ module.exports = {
   },
   /** @param {RuleContext} context */
   create(context) {
+    const sourceCode = context.sourceCode
     const df =
-      context.parserServices.getDocumentFragment &&
-      context.parserServices.getDocumentFragment()
+      sourceCode.parserServices.getDocumentFragment &&
+      sourceCode.parserServices.getDocumentFragment()
     if (!df) {
       return {}
     }
 
-    const sourceCode = context.getSourceCode()
-
     /**
      * @param {VStartTag} startTag
      * @param {string} beforeText
@@ -328,17 +323,17 @@ module.exports = {
       return (element) => {
         const { name } = element
         const elementsOptions = blocks[name]
-        if (!elementsOptions) {
-          verifyElement(element, options)
-        } else {
+        if (elementsOptions) {
           normalizeOptionValue({
             singleline: elementsOptions.singleline || options.singleline,
             multiline: elementsOptions.multiline || options.multiline,
             maxEmptyLines:
-              elementsOptions.maxEmptyLines != null
-                ? elementsOptions.maxEmptyLines
-                : options.maxEmptyLines
+              elementsOptions.maxEmptyLines == null
+                ? options.maxEmptyLines
+                : elementsOptions.maxEmptyLines
           })(element)
+        } else {
+          verifyElement(element, options)
         }
       }
     }
diff --git a/lib/rules/brace-style.js b/lib/rules/brace-style.js
index 5dad2c29d..507f5e101 100644
--- a/lib/rules/brace-style.js
+++ b/lib/rules/brace-style.js
@@ -3,9 +3,9 @@
  */
 'use strict'
 
-const { wrapCoreRule } = require('../utils')
+const { wrapStylisticOrCoreRule } = require('../utils')
 
-// eslint-disable-next-line no-invalid-meta, no-invalid-meta-docs-categories
-module.exports = wrapCoreRule('brace-style', {
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = wrapStylisticOrCoreRule('brace-style', {
   skipDynamicArguments: true
 })
diff --git a/lib/rules/camelcase.js b/lib/rules/camelcase.js
index 4b0898fe6..8aa43e19b 100644
--- a/lib/rules/camelcase.js
+++ b/lib/rules/camelcase.js
@@ -5,5 +5,5 @@
 
 const { wrapCoreRule } = require('../utils')
 
-// eslint-disable-next-line no-invalid-meta, no-invalid-meta-docs-categories
+// eslint-disable-next-line internal/no-invalid-meta
 module.exports = wrapCoreRule('camelcase')
diff --git a/lib/rules/comma-dangle.js b/lib/rules/comma-dangle.js
index 6fb48b79d..760611cfa 100644
--- a/lib/rules/comma-dangle.js
+++ b/lib/rules/comma-dangle.js
@@ -3,7 +3,7 @@
  */
 'use strict'
 
-const { wrapCoreRule } = require('../utils')
+const { wrapStylisticOrCoreRule } = require('../utils')
 
-// eslint-disable-next-line no-invalid-meta, no-invalid-meta-docs-categories
-module.exports = wrapCoreRule('comma-dangle')
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = wrapStylisticOrCoreRule('comma-dangle')
diff --git a/lib/rules/comma-spacing.js b/lib/rules/comma-spacing.js
index 6bad7e4b7..4be3bc85a 100644
--- a/lib/rules/comma-spacing.js
+++ b/lib/rules/comma-spacing.js
@@ -3,10 +3,10 @@
  */
 'use strict'
 
-const { wrapCoreRule } = require('../utils')
+const { wrapStylisticOrCoreRule } = require('../utils')
 
-// eslint-disable-next-line no-invalid-meta, no-invalid-meta-docs-categories
-module.exports = wrapCoreRule('comma-spacing', {
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = wrapStylisticOrCoreRule('comma-spacing', {
   skipDynamicArguments: true,
   skipDynamicArgumentsReport: true,
   applyDocument: true
diff --git a/lib/rules/comma-style.js b/lib/rules/comma-style.js
index 960e6d6df..815bd23be 100644
--- a/lib/rules/comma-style.js
+++ b/lib/rules/comma-style.js
@@ -3,16 +3,16 @@
  */
 'use strict'
 
-const { wrapCoreRule } = require('../utils')
+const { wrapStylisticOrCoreRule } = require('../utils')
 
-// eslint-disable-next-line no-invalid-meta, no-invalid-meta-docs-categories
-module.exports = wrapCoreRule('comma-style', {
-  create(_context, { coreHandlers }) {
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = wrapStylisticOrCoreRule('comma-style', {
+  create(_context, { baseHandlers }) {
     return {
       VSlotScopeExpression(node) {
-        if (coreHandlers.FunctionExpression) {
+        if (baseHandlers.FunctionExpression) {
           // @ts-expect-error -- Process params of VSlotScopeExpression as FunctionExpression.
-          coreHandlers.FunctionExpression(node)
+          baseHandlers.FunctionExpression(node)
         }
       }
     }
diff --git a/lib/rules/comment-directive.js b/lib/rules/comment-directive.js
index 1f4cdd336..f1ec64e34 100644
--- a/lib/rules/comment-directive.js
+++ b/lib/rules/comment-directive.js
@@ -5,10 +5,6 @@
 
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
 /**
@@ -17,9 +13,6 @@ const utils = require('../utils')
  * @property {number} RuleAndLocation.index
  * @property {string} [RuleAndLocation.key]
  */
-// -----------------------------------------------------------------------------
-// Helpers
-// -----------------------------------------------------------------------------
 
 const COMMENT_DIRECTIVE_B = /^\s*(eslint-(?:en|dis)able)(?:\s+|$)/
 const COMMENT_DIRECTIVE_L = /^\s*(eslint-disable(?:-next)?-line)(?:\s+|$)/
@@ -77,16 +70,16 @@ function parse(pattern, comment) {
  * @returns {void}
  */
 function enable(context, loc, group, rule) {
-  if (!rule) {
+  if (rule) {
     context.report({
       loc,
-      messageId: group === 'block' ? 'enableBlock' : 'enableLine'
+      messageId: group === 'block' ? 'enableBlockRule' : 'enableLineRule',
+      data: { rule }
     })
   } else {
     context.report({
       loc,
-      messageId: group === 'block' ? 'enableBlockRule' : 'enableLineRule',
-      data: { rule }
+      messageId: group === 'block' ? 'enableBlock' : 'enableLine'
     })
   }
 }
@@ -101,17 +94,17 @@ function enable(context, loc, group, rule) {
  * @returns {void}
  */
 function disable(context, loc, group, rule, key) {
-  if (!rule) {
+  if (rule) {
     context.report({
       loc,
-      messageId: group === 'block' ? 'disableBlock' : 'disableLine',
-      data: { key }
+      messageId: group === 'block' ? 'disableBlockRule' : 'disableLineRule',
+      data: { rule, key }
     })
   } else {
     context.report({
       loc,
-      messageId: group === 'block' ? 'disableBlockRule' : 'disableLineRule',
-      data: { rule, key }
+      messageId: group === 'block' ? 'disableBlock' : 'disableLine',
+      data: { key }
     })
   }
 }
@@ -221,7 +214,7 @@ function reportUnused(context, comment, kind) {
  * @returns { { ruleId: string, key: string }[] }
  */
 function reportUnusedRules(context, comment, kind, rules) {
-  const sourceCode = context.getSourceCode()
+  const sourceCode = context.sourceCode
   const commentStart = comment.range[0] + 4 /* <!-- */
 
   return rules.map((rule) => {
@@ -277,10 +270,6 @@ function extractTopLevelDocumentFragmentComments(documentFragment) {
   )
 }
 
-// -----------------------------------------------------------------------------
-// Rule Definition
-// -----------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
@@ -324,9 +313,10 @@ module.exports = {
     const options = context.options[0] || {}
     /** @type {boolean} */
     const reportUnusedDisableDirectives = options.reportUnusedDisableDirectives
+    const sourceCode = context.sourceCode
     const documentFragment =
-      context.parserServices.getDocumentFragment &&
-      context.parserServices.getDocumentFragment()
+      sourceCode.parserServices.getDocumentFragment &&
+      sourceCode.parserServices.getDocumentFragment()
 
     return {
       Program(node) {
diff --git a/lib/rules/component-api-style.js b/lib/rules/component-api-style.js
index 12ad52e2d..550eebfed 100644
--- a/lib/rules/component-api-style.js
+++ b/lib/rules/component-api-style.js
@@ -162,7 +162,7 @@ function buildAllowedPhrase(allowsOpt) {
     phrases.push('Options API')
   }
   return phrases.length > 2
-    ? `${phrases.slice(0, -1).join(',')} or ${phrases.slice(-1)[0]}`
+    ? `${phrases.slice(0, -1).join(', ')} or ${phrases.slice(-1)[0]}`
     : phrases.join(' or ')
 }
 
diff --git a/lib/rules/component-definition-name-casing.js b/lib/rules/component-definition-name-casing.js
index 103e3feb0..840a89e52 100644
--- a/lib/rules/component-definition-name-casing.js
+++ b/lib/rules/component-definition-name-casing.js
@@ -8,10 +8,6 @@ const utils = require('../utils')
 const casing = require('../utils/casing')
 const allowedCaseOptions = ['PascalCase', 'kebab-case']
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 /**
  * @param {Expression | SpreadElement} node
  * @returns {node is (Literal | TemplateLiteral)}
@@ -30,15 +26,18 @@ module.exports = {
     type: 'suggestion',
     docs: {
       description: 'enforce specific casing for component definition name',
-      categories: ['vue3-strongly-recommended', 'strongly-recommended'],
+      categories: ['vue3-strongly-recommended', 'vue2-strongly-recommended'],
       url: 'https://eslint.vuejs.org/rules/component-definition-name-casing.html'
     },
-    fixable: 'code', // or "code" or "whitespace"
+    fixable: 'code',
     schema: [
       {
         enum: allowedCaseOptions
       }
-    ]
+    ],
+    messages: {
+      incorrectCase: 'Property name "{{value}}" is not {{caseType}}.'
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
@@ -47,10 +46,6 @@ module.exports = {
       ? options
       : 'PascalCase'
 
-    // ----------------------------------------------------------------------
-    // Public
-    // ----------------------------------------------------------------------
-
     /**
      * @param {Literal | TemplateLiteral} node
      */
@@ -71,7 +66,7 @@ module.exports = {
       if (!casing.getChecker(caseType)(nodeValue)) {
         context.report({
           node,
-          message: 'Property name "{{value}}" is not {{caseType}}.',
+          messageId: 'incorrectCase',
           data: {
             value: nodeValue,
             caseType
@@ -85,8 +80,7 @@ module.exports = {
       }
     }
 
-    return Object.assign(
-      {},
+    return utils.compositingVisitors(
       utils.executeOnCallVueComponent(context, (node) => {
         if (node.arguments.length === 2) {
           const argument = node.arguments[0]
@@ -102,6 +96,17 @@ module.exports = {
         if (!node) return
         if (!canConvert(node.value)) return
         convertName(node.value)
+      }),
+      utils.defineScriptSetupVisitor(context, {
+        onDefineOptionsEnter(node) {
+          if (node.arguments.length === 0) return
+          const define = node.arguments[0]
+          if (define.type !== 'ObjectExpression') return
+          const nameNode = utils.findProperty(define, 'name')
+          if (!nameNode) return
+          if (!canConvert(nameNode.value)) return
+          convertName(nameNode.value)
+        }
       })
     )
   }
diff --git a/lib/rules/component-name-in-template-casing.js b/lib/rules/component-name-in-template-casing.js
index 017e4cb08..8c3ac842c 100644
--- a/lib/rules/component-name-in-template-casing.js
+++ b/lib/rules/component-name-in-template-casing.js
@@ -4,24 +4,36 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 const casing = require('../utils/casing')
-const { toRegExp } = require('../utils/regexp')
-
-// -----------------------------------------------------------------------------
-// Helpers
-// -----------------------------------------------------------------------------
+const { toRegExpGroupMatcher, isRegExp } = require('../utils/regexp')
 
 const allowedCaseOptions = ['PascalCase', 'kebab-case']
 const defaultCase = 'PascalCase'
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
+/**
+ * Checks whether the given variable is the type-only import object.
+ * @param {Variable} variable
+ * @returns {boolean} `true` if the given variable is the type-only import.
+ */
+function isTypeOnlyImport(variable) {
+  if (variable.defs.length === 0) return false
+
+  return variable.defs.every((def) => {
+    if (def.type !== 'ImportBinding') {
+      return false
+    }
+    if (def.parent.importKind === 'type') {
+      // check for `import type Foo from './xxx'`
+      return true
+    }
+    if (def.node.type === 'ImportSpecifier' && def.node.importKind === 'type') {
+      // check for `import { type Foo } from './xxx'`
+      return true
+    }
+    return false
+  })
+}
 
 module.exports = {
   meta: {
@@ -40,6 +52,11 @@ module.exports = {
       {
         type: 'object',
         properties: {
+          globals: {
+            type: 'array',
+            items: { type: 'string' },
+            uniqueItems: true
+          },
           ignores: {
             type: 'array',
             items: { type: 'string' },
@@ -52,7 +69,10 @@ module.exports = {
         },
         additionalProperties: false
       }
-    ]
+    ],
+    messages: {
+      incorrectCase: 'Component name "{{name}}" is not {{caseType}}.'
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
@@ -61,15 +81,43 @@ module.exports = {
     const caseType = allowedCaseOptions.includes(caseOption)
       ? caseOption
       : defaultCase
-    /** @type {RegExp[]} */
-    const ignores = (options.ignores || []).map(toRegExp)
+    const isIgnored = toRegExpGroupMatcher(options.ignores)
+
+    const globalStrings = []
+    const globalPatterns = []
+    for (const global of options.globals || []) {
+      if (isRegExp(global)) {
+        globalPatterns.push(global)
+      } else {
+        globalStrings.push(global)
+      }
+    }
+
+    const isGlobalPattern = toRegExpGroupMatcher(globalPatterns)
     const registeredComponentsOnly = options.registeredComponentsOnly !== false
+    const sourceCode = context.sourceCode
     const tokens =
-      context.parserServices.getTemplateBodyTokenStore &&
-      context.parserServices.getTemplateBodyTokenStore()
+      sourceCode.parserServices.getTemplateBodyTokenStore &&
+      sourceCode.parserServices.getTemplateBodyTokenStore()
 
-    /** @type { string[] } */
-    const registeredComponents = []
+    /** @type { Set<string> } */
+    const registeredComponents = new Set(globalStrings.map(casing.pascalCase))
+
+    if (utils.isScriptSetup(context)) {
+      // For <script setup>
+      const globalScope = context.sourceCode.scopeManager.globalScope
+      if (globalScope) {
+        // Only check find the import module
+        const moduleScope = globalScope.childScopes.find(
+          (scope) => scope.type === 'module'
+        )
+        for (const variable of (moduleScope && moduleScope.variables) || []) {
+          if (!isTypeOnlyImport(variable)) {
+            registeredComponents.add(variable.name)
+          }
+        }
+      }
+    }
 
     /**
      * Checks whether the given node is the verification target node.
@@ -77,35 +125,32 @@ module.exports = {
      * @returns {boolean} `true` if the given node is the verification target node.
      */
     function isVerifyTarget(node) {
-      if (ignores.some((re) => re.test(node.rawName))) {
+      if (isIgnored(node.rawName)) {
         // ignore
         return false
       }
 
-      if (!registeredComponentsOnly) {
-        // If the user specifies registeredComponentsOnly as false, it checks all component tags.
-        if (
-          (!utils.isHtmlElementNode(node) && !utils.isSvgElementNode(node)) ||
-          utils.isHtmlWellKnownElementName(node.rawName) ||
-          utils.isSvgWellKnownElementName(node.rawName)
-        ) {
-          return false
-        }
-        return true
-      }
-      // We only verify the components registered in the component.
       if (
-        registeredComponents
-          .filter((name) => casing.isPascalCase(name)) // When defining a component with PascalCase, you can use either case
-          .some(
-            (name) =>
-              node.rawName === name || casing.pascalCase(node.rawName) === name
-          )
+        (!utils.isHtmlElementNode(node) &&
+          !utils.isSvgElementNode(node) &&
+          !utils.isMathElementNode(node)) ||
+        utils.isHtmlWellKnownElementName(node.rawName) ||
+        utils.isSvgWellKnownElementName(node.rawName) ||
+        utils.isMathWellKnownElementName(node.rawName) ||
+        utils.isVueBuiltInElementName(node.rawName)
       ) {
+        return false
+      }
+
+      if (!registeredComponentsOnly) {
+        // If the user specifies registeredComponentsOnly as false, it checks all component tags.
         return true
       }
 
-      return false
+      return (
+        registeredComponents.has(casing.pascalCase(node.rawName)) ||
+        isGlobalPattern(node.rawName)
+      )
     }
 
     let hasInvalidEOF = false
@@ -130,7 +175,7 @@ module.exports = {
             context.report({
               node: open,
               loc: open.loc,
-              message: 'Component name "{{name}}" is not {{caseType}}.',
+              messageId: 'incorrectCase',
               data: {
                 name,
                 caseType
@@ -153,9 +198,9 @@ module.exports = {
         },
         ...(registeredComponentsOnly
           ? utils.executeOnVue(context, (obj) => {
-              registeredComponents.push(
-                ...utils.getRegisteredComponents(obj).map((n) => n.name)
-              )
+              for (const n of utils.getRegisteredComponents(obj)) {
+                registeredComponents.add(n.name)
+              }
             })
           : {})
       }
diff --git a/lib/rules/component-options-name-casing.js b/lib/rules/component-options-name-casing.js
index 37fe47ed7..f53100eb7 100644
--- a/lib/rules/component-options-name-casing.js
+++ b/lib/rules/component-options-name-casing.js
@@ -4,17 +4,9 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 const casing = require('../utils/casing')
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 /**
  * @param {import('../../typings/eslint-plugin-vue/util-types/ast').Expression} node
  * @returns {string | null}
@@ -29,10 +21,6 @@ function getOptionsComponentName(node) {
   return null
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'suggestion',
diff --git a/lib/rules/custom-event-name-casing.js b/lib/rules/custom-event-name-casing.js
index 5db15a875..50dbb5292 100644
--- a/lib/rules/custom-event-name-casing.js
+++ b/lib/rules/custom-event-name-casing.js
@@ -4,43 +4,39 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const { findVariable } = require('eslint-utils')
+const { findVariable } = require('@eslint-community/eslint-utils')
 const utils = require('../utils')
 const casing = require('../utils/casing')
-const { toRegExp } = require('../utils/regexp')
+const { toRegExpGroupMatcher } = require('../utils/regexp')
 
 /**
  * @typedef {import('../utils').VueObjectData} VueObjectData
  */
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 const ALLOWED_CASE_OPTIONS = ['kebab-case', 'camelCase']
 const DEFAULT_CASE = 'camelCase'
 
+/**
+ * @typedef {object} NameWithLoc
+ * @property {string} name
+ * @property {SourceLocation} loc
+ */
 /**
  * Get the name param node from the given CallExpression
  * @param {CallExpression} node CallExpression
- * @returns { Literal & { value: string } | null }
+ * @returns { NameWithLoc | null }
  */
 function getNameParamNode(node) {
   const nameLiteralNode = node.arguments[0]
-  if (
-    !nameLiteralNode ||
-    nameLiteralNode.type !== 'Literal' ||
-    typeof nameLiteralNode.value !== 'string'
-  ) {
-    // cannot check
-    return null
+  if (nameLiteralNode && utils.isStringLiteral(nameLiteralNode)) {
+    const name = utils.getStringLiteralValue(nameLiteralNode)
+    if (name != null) {
+      return { name, loc: nameLiteralNode.loc }
+    }
   }
 
-  return /** @type {Literal & { value: string }} */ (nameLiteralNode)
+  // cannot check
+  return null
 }
 /**
  * Get the callee member node from the given CallExpression
@@ -58,22 +54,6 @@ function getCalleeMemberNode(node) {
   return null
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
-const OBJECT_OPTION_SCHEMA = {
-  type: 'object',
-  properties: {
-    ignores: {
-      type: 'array',
-      items: { type: 'string' },
-      uniqueItems: true,
-      additionalItems: false
-    }
-  },
-  additionalProperties: false
-}
 module.exports = {
   meta: {
     type: 'suggestion',
@@ -83,24 +63,23 @@ module.exports = {
       url: 'https://eslint.vuejs.org/rules/custom-event-name-casing.html'
     },
     fixable: null,
-    schema: {
-      anyOf: [
-        {
-          type: 'array',
-          items: [
-            {
-              enum: ALLOWED_CASE_OPTIONS
-            },
-            OBJECT_OPTION_SCHEMA
-          ]
+    schema: [
+      {
+        enum: ALLOWED_CASE_OPTIONS
+      },
+      {
+        type: 'object',
+        properties: {
+          ignores: {
+            type: 'array',
+            items: { type: 'string' },
+            uniqueItems: true,
+            additionalItems: false
+          }
         },
-        // For backward compatibility
-        {
-          type: 'array',
-          items: [OBJECT_OPTION_SCHEMA]
-        }
-      ]
-    },
+        additionalProperties: false
+      }
+    ],
     messages: {
       unexpected: "Custom event name '{{name}}' must be {{caseType}}."
     }
@@ -109,16 +88,11 @@ module.exports = {
   create(context) {
     /** @type {Map<ObjectExpression|Program, {contextReferenceIds:Set<Identifier>,emitReferenceIds:Set<Identifier>}>} */
     const setupContexts = new Map()
-    const options =
-      context.options.length === 1 && typeof context.options[0] !== 'string'
-        ? // For backward compatibility
-          [undefined, context.options[0]]
-        : context.options
-    const caseType = options[0] || DEFAULT_CASE
-    const objectOption = options[1] || {}
+    let emitParamName = ''
+    const caseType = context.options[0] || DEFAULT_CASE
+    const objectOption = context.options[1] || {}
     const caseChecker = casing.getChecker(caseType)
-    /** @type {RegExp[]} */
-    const ignores = (objectOption.ignores || []).map(toRegExp)
+    const isIgnored = toRegExpGroupMatcher(objectOption.ignores)
 
     /**
      * Check whether the given event name is valid.
@@ -130,15 +104,15 @@ module.exports = {
     }
 
     /**
-     * @param { Literal & { value: string } } nameLiteralNode
+     * @param { NameWithLoc } nameWithLoc
      */
-    function verify(nameLiteralNode) {
-      const name = nameLiteralNode.value
-      if (isValidEventName(name) || ignores.some((re) => re.test(name))) {
+    function verify(nameWithLoc) {
+      const name = nameWithLoc.name
+      if (isValidEventName(name) || isIgnored(name)) {
         return
       }
       context.report({
-        node: nameLiteralNode,
+        loc: nameWithLoc.loc,
         messageId: 'unexpected',
         data: {
           name,
@@ -147,7 +121,7 @@ module.exports = {
       })
     }
 
-    const programNode = context.getSourceCode().ast
+    const programNode = context.sourceCode.ast
 
     const callVisitor = {
       /**
@@ -155,8 +129,8 @@ module.exports = {
        * @param {VueObjectData} [info]
        */
       CallExpression(node, info) {
-        const nameLiteralNode = getNameParamNode(node)
-        if (!nameLiteralNode) {
+        const nameWithLoc = getNameParamNode(node)
+        if (!nameWithLoc) {
           // cannot check
           return
         }
@@ -170,7 +144,7 @@ module.exports = {
             emitReferenceIds.has(node.callee)
           ) {
             // verify setup(props,{emit}) {emit()}
-            verify(nameLiteralNode)
+            verify(nameWithLoc)
           } else {
             const emit = getCalleeMemberNode(node)
             if (
@@ -180,7 +154,7 @@ module.exports = {
               contextReferenceIds.has(emit.member.object)
             ) {
               // verify setup(props,context) {context.emit()}
-              verify(nameLiteralNode)
+              verify(nameWithLoc)
             }
           }
         }
@@ -192,13 +166,17 @@ module.exports = {
       {
         CallExpression(node) {
           const callee = node.callee
-          const nameLiteralNode = getNameParamNode(node)
-          if (!nameLiteralNode) {
+          const nameWithLoc = getNameParamNode(node)
+          if (!nameWithLoc) {
             // cannot check
             return
           }
-          if (callee.type === 'Identifier' && callee.name === '$emit') {
-            verify(nameLiteralNode)
+
+          if (
+            callee.type === 'Identifier' &&
+            (callee.name === '$emit' || callee.name === emitParamName)
+          ) {
+            verify(nameWithLoc)
           }
         }
       },
@@ -217,8 +195,13 @@ module.exports = {
             if (emitParam.type !== 'Identifier') {
               return
             }
+            emitParamName = emitParam.name
+
             // const emit = defineEmits()
-            const variable = findVariable(context.getScope(), emitParam)
+            const variable = findVariable(
+              utils.getScope(context, emitParam),
+              emitParam
+            )
             if (!variable) {
               return
             }
@@ -259,7 +242,10 @@ module.exports = {
               }
               const emitParam = emitProperty.value
               // `setup(props, {emit})`
-              const variable = findVariable(context.getScope(), emitParam)
+              const variable = findVariable(
+                utils.getScope(context, emitParam),
+                emitParam
+              )
               if (!variable) {
                 return
               }
@@ -268,7 +254,10 @@ module.exports = {
               }
             } else {
               // `setup(props, context)`
-              const variable = findVariable(context.getScope(), contextParam)
+              const variable = findVariable(
+                utils.getScope(context, contextParam),
+                contextParam
+              )
               if (!variable) {
                 return
               }
diff --git a/lib/rules/define-emits-declaration.js b/lib/rules/define-emits-declaration.js
new file mode 100644
index 000000000..e3de57e4f
--- /dev/null
+++ b/lib/rules/define-emits-declaration.js
@@ -0,0 +1,106 @@
+/**
+ * @author Amorites
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+/**
+ * @typedef {import('@typescript-eslint/types').TSESTree.TypeNode} TypeNode
+ *
+ */
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'enforce declaration style of `defineEmits`',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/define-emits-declaration.html'
+    },
+    fixable: null,
+    schema: [
+      {
+        enum: ['type-based', 'type-literal', 'runtime']
+      }
+    ],
+    messages: {
+      hasArg: 'Use type based declaration instead of runtime declaration.',
+      hasTypeArg: 'Use runtime declaration instead of type based declaration.',
+      hasTypeCallArg:
+        'Use new type literal declaration instead of the old call signature declaration.'
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    const scriptSetup = utils.getScriptSetupElement(context)
+    if (!scriptSetup || !utils.hasAttribute(scriptSetup, 'lang', 'ts')) {
+      return {}
+    }
+
+    const defineType = context.options[0] || 'type-based'
+    return utils.defineScriptSetupVisitor(context, {
+      onDefineEmitsEnter(node) {
+        switch (defineType) {
+          case 'type-based': {
+            if (node.arguments.length > 0) {
+              context.report({
+                node,
+                messageId: 'hasArg'
+              })
+            }
+            break
+          }
+
+          case 'type-literal': {
+            verifyTypeLiteral(node)
+            break
+          }
+
+          case 'runtime': {
+            const typeArguments =
+              'typeArguments' in node ? node.typeArguments : node.typeParameters
+            if (typeArguments && typeArguments.params.length > 0) {
+              context.report({
+                node,
+                messageId: 'hasTypeArg'
+              })
+            }
+            break
+          }
+        }
+      }
+    })
+
+    /** @param {CallExpression} node */
+    function verifyTypeLiteral(node) {
+      if (node.arguments.length > 0) {
+        context.report({
+          node,
+          messageId: 'hasArg'
+        })
+        return
+      }
+
+      const typeArguments = node.typeArguments || node.typeParameters
+      const param = /** @type {TypeNode|undefined} */ (typeArguments?.params[0])
+      if (!param) return
+      if (param.type === 'TSTypeLiteral') {
+        for (const memberNode of param.members) {
+          if (memberNode.type !== 'TSPropertySignature') {
+            context.report({
+              node: memberNode,
+              messageId: 'hasTypeCallArg'
+            })
+          }
+        }
+      } else if (param.type === 'TSFunctionType') {
+        context.report({
+          node: param,
+          messageId: 'hasTypeCallArg'
+        })
+      }
+    }
+  }
+}
diff --git a/lib/rules/define-macros-order.js b/lib/rules/define-macros-order.js
index 007b17027..6346f0724 100644
--- a/lib/rules/define-macros-order.js
+++ b/lib/rules/define-macros-order.js
@@ -4,19 +4,22 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 const MACROS_EMITS = 'defineEmits'
 const MACROS_PROPS = 'defineProps'
-const ORDER = [MACROS_EMITS, MACROS_PROPS]
+const MACROS_OPTIONS = 'defineOptions'
+const MACROS_SLOTS = 'defineSlots'
+const MACROS_MODEL = 'defineModel'
+const MACROS_EXPOSE = 'defineExpose'
+const KNOWN_MACROS = new Set([
+  MACROS_EMITS,
+  MACROS_PROPS,
+  MACROS_OPTIONS,
+  MACROS_SLOTS,
+  MACROS_MODEL,
+  MACROS_EXPOSE
+])
 const DEFAULT_ORDER = [MACROS_PROPS, MACROS_EMITS]
 
 /**
@@ -30,6 +33,13 @@ function inScriptSetup(scriptSetup, node) {
   )
 }
 
+/**
+ * @param {ASTNode} node
+ */
+function isDeclareStatement(node) {
+  return 'declare' in node && node.declare === true
+}
+
 /**
  * @param {ASTNode} node
  */
@@ -50,16 +60,20 @@ function isUseStrictStatement(node) {
 function getTargetStatementPosition(scriptSetup, program) {
   const skipStatements = new Set([
     'ImportDeclaration',
+    'TSEnumDeclaration',
+    'TSModuleDeclaration',
     'TSInterfaceDeclaration',
     'TSTypeAliasDeclaration',
     'DebuggerStatement',
-    'EmptyStatement'
+    'EmptyStatement',
+    'ExportNamedDeclaration'
   ])
 
   for (const [index, item] of program.body.entries()) {
     if (
       inScriptSetup(scriptSetup, item) &&
       !skipStatements.has(item.type) &&
+      !isDeclareStatement(item) &&
       !isUseStrictStatement(item)
     ) {
       return index
@@ -88,10 +102,6 @@ function getDefineMacrosStatement(node) {
   return getDefineMacrosStatement(node.parent)
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 /** @param {RuleContext} context */
 function create(context) {
   const scriptSetup = utils.getScriptSetupElement(context)
@@ -100,115 +110,190 @@ function create(context) {
     return {}
   }
 
-  const sourceCode = context.getSourceCode()
+  const sourceCode = context.sourceCode
   const options = context.options
   /** @type {[string, string]} */
   const order = (options[0] && options[0].order) || DEFAULT_ORDER
-  /** @type {Map<string, ASTNode>} */
+  /** @type {boolean} */
+  const defineExposeLast = (options[0] && options[0].defineExposeLast) || false
+  /** @type {Map<string, ASTNode[]>} */
   const macrosNodes = new Map()
+  /** @type {ASTNode} */
+  let defineExposeNode
+
+  if (order.includes(MACROS_EXPOSE) && defineExposeLast) {
+    throw new Error(
+      "`defineExpose` macro can't be in the `order` array if `defineExposeLast` is true."
+    )
+  }
 
   return utils.compositingVisitors(
     utils.defineScriptSetupVisitor(context, {
       onDefinePropsExit(node) {
-        macrosNodes.set(MACROS_PROPS, getDefineMacrosStatement(node))
+        macrosNodes.set(MACROS_PROPS, [getDefineMacrosStatement(node)])
       },
       onDefineEmitsExit(node) {
-        macrosNodes.set(MACROS_EMITS, getDefineMacrosStatement(node))
+        macrosNodes.set(MACROS_EMITS, [getDefineMacrosStatement(node)])
+      },
+      onDefineOptionsExit(node) {
+        macrosNodes.set(MACROS_OPTIONS, [getDefineMacrosStatement(node)])
+      },
+      onDefineSlotsExit(node) {
+        macrosNodes.set(MACROS_SLOTS, [getDefineMacrosStatement(node)])
+      },
+      onDefineModelExit(node) {
+        const currentModelMacros = macrosNodes.get(MACROS_MODEL) ?? []
+        currentModelMacros.push(getDefineMacrosStatement(node))
+        macrosNodes.set(MACROS_MODEL, currentModelMacros)
+      },
+      onDefineExposeExit(node) {
+        defineExposeNode = getDefineMacrosStatement(node)
+      },
+
+      /** @param {CallExpression} node */
+      'Program > ExpressionStatement > CallExpression, Program > VariableDeclaration > VariableDeclarator > CallExpression'(
+        node
+      ) {
+        if (
+          node.callee &&
+          node.callee.type === 'Identifier' &&
+          order.includes(node.callee.name) &&
+          !KNOWN_MACROS.has(node.callee.name)
+        ) {
+          macrosNodes.set(node.callee.name, [getDefineMacrosStatement(node)])
+        }
       }
     }),
     {
       'Program:exit'(program) {
-        const shouldFirstNode = macrosNodes.get(order[0])
-        const shouldSecondNode = macrosNodes.get(order[1])
+        /**
+         * @typedef {object} OrderedData
+         * @property {string} name
+         * @property {ASTNode} node
+         */
         const firstStatementIndex = getTargetStatementPosition(
           scriptSetup,
           program
         )
-        const firstStatement = program.body[firstStatementIndex]
+        const orderedList = order
+          .flatMap((name) => {
+            const nodes = macrosNodes.get(name) ?? []
+            return nodes.map((node) => ({ name, node }))
+          })
+          .filter(
+            /** @returns {data is OrderedData} */
+            (data) => utils.isDef(data.node)
+          )
+
+        // check last node
+        if (defineExposeLast) {
+          const lastNode = program.body[program.body.length - 1]
+          if (defineExposeNode && lastNode !== defineExposeNode) {
+            reportExposeNotOnBottom(defineExposeNode, lastNode)
+          }
+        }
 
-        // have both defineEmits and defineProps
-        if (shouldFirstNode && shouldSecondNode) {
-          const secondStatement = program.body[firstStatementIndex + 1]
+        for (const [index, should] of orderedList.entries()) {
+          const targetStatement = program.body[firstStatementIndex + index]
 
-          // need move only first
-          if (firstStatement === shouldSecondNode) {
-            reportNotOnTop(order[0], shouldFirstNode, firstStatement)
-            return
-          }
+          if (should.node !== targetStatement) {
+            let moveTargetNodes = orderedList
+              .slice(index)
+              .map(({ node }) => node)
+            const targetStatementIndex =
+              moveTargetNodes.indexOf(targetStatement)
 
-          // need move both defineEmits and defineProps
-          if (firstStatement !== shouldFirstNode) {
-            reportBothNotOnTop(
-              shouldFirstNode,
-              shouldSecondNode,
-              firstStatement
-            )
+            if (targetStatementIndex !== -1) {
+              moveTargetNodes = moveTargetNodes.slice(0, targetStatementIndex)
+            }
+            reportNotOnTop(should.name, moveTargetNodes, targetStatement)
             return
           }
-
-          // need move only second
-          if (secondStatement !== shouldSecondNode) {
-            reportNotOnTop(order[1], shouldSecondNode, shouldFirstNode)
-          }
-
-          return
-        }
-
-        // have only first and need to move it
-        if (shouldFirstNode && firstStatement !== shouldFirstNode) {
-          reportNotOnTop(order[0], shouldFirstNode, firstStatement)
-          return
-        }
-
-        // have only second and need to move it
-        if (shouldSecondNode && firstStatement !== shouldSecondNode) {
-          reportNotOnTop(order[1], shouldSecondNode, firstStatement)
         }
       }
     }
   )
 
   /**
-   * @param {ASTNode} shouldFirstNode
-   * @param {ASTNode} shouldSecondNode
+   * @param {string} macro
+   * @param {ASTNode[]} nodes
    * @param {ASTNode} before
    */
-  function reportBothNotOnTop(shouldFirstNode, shouldSecondNode, before) {
+  function reportNotOnTop(macro, nodes, before) {
+    // Determine if 'before' is a macro from the order list
+    const beforeMacro = order.find((macroName) =>
+      (macrosNodes.get(macroName) ?? []).includes(before)
+    )
+
+    // Decide which message to use
+    const messageId = beforeMacro ? 'macrosUnordered' : 'macrosNotAtTop'
+    const data = beforeMacro ? { macro, before: beforeMacro } : { macro }
+
     context.report({
-      node: shouldFirstNode,
-      loc: shouldFirstNode.loc,
-      messageId: 'macrosNotOnTop',
-      data: {
-        macro: order[0]
-      },
-      fix(fixer) {
-        return [
-          ...moveNodeBefore(fixer, shouldFirstNode, before),
-          ...moveNodeBefore(fixer, shouldSecondNode, before)
-        ]
+      node: nodes[0],
+      loc: nodes[0].loc,
+      messageId,
+      data,
+      *fix(fixer) {
+        for (const node of nodes) {
+          yield* moveNodeBefore(fixer, node, before)
+        }
       }
     })
   }
 
   /**
-   * @param {string} macro
    * @param {ASTNode} node
-   * @param {ASTNode} before
+   * @param {ASTNode} lastNode
    */
-  function reportNotOnTop(macro, node, before) {
+  function reportExposeNotOnBottom(node, lastNode) {
     context.report({
       node,
       loc: node.loc,
-      messageId: 'macrosNotOnTop',
-      data: {
-        macro
-      },
-      fix(fixer) {
-        return moveNodeBefore(fixer, node, before)
-      }
+      messageId: 'defineExposeNotTheLast',
+      suggest: [
+        {
+          messageId: 'putExposeAtTheLast',
+          fix(fixer) {
+            return moveNodeToLast(fixer, node, lastNode)
+          }
+        }
+      ]
     })
   }
 
+  /**
+   * Move all lines of "node" with its comments to after the "target"
+   * @param {RuleFixer} fixer
+   * @param {ASTNode} node
+   * @param {ASTNode} target
+   */
+  function moveNodeToLast(fixer, node, target) {
+    // get comments under tokens(if any)
+    const beforeNodeToken = sourceCode.getTokenBefore(node)
+    const nodeComment = sourceCode.getTokenAfter(beforeNodeToken, {
+      includeComments: true
+    })
+    const nextNodeComment = sourceCode.getTokenAfter(node, {
+      includeComments: true
+    })
+
+    // remove position: node (and comments) to next node (and comments)
+    const cutStart = getLineStartIndex(nodeComment, beforeNodeToken)
+    const cutEnd = getLineStartIndex(nextNodeComment, node)
+
+    // insert text: comment + node
+    const textNode = sourceCode.getText(
+      node,
+      node.range[0] - beforeNodeToken.range[1]
+    )
+
+    return [
+      fixer.insertTextAfter(target, textNode),
+      fixer.removeRange([cutStart, cutEnd])
+    ]
+  }
+
   /**
    * Move all lines of "node" with its comments to before the "target"
    * @param {RuleFixer} fixer
@@ -287,11 +372,12 @@ module.exports = {
     type: 'layout',
     docs: {
       description:
-        'enforce order of `defineEmits` and `defineProps` compiler macros',
+        'enforce order of compiler macros (`defineProps`, `defineEmits`, etc.)',
       categories: undefined,
       url: 'https://eslint.vuejs.org/rules/define-macros-order.html'
     },
     fixable: 'code',
+    hasSuggestions: true,
     schema: [
       {
         type: 'object',
@@ -299,18 +385,27 @@ module.exports = {
           order: {
             type: 'array',
             items: {
-              enum: Object.values(ORDER)
+              type: 'string',
+              minLength: 1
             },
             uniqueItems: true,
             additionalItems: false
+          },
+          defineExposeLast: {
+            type: 'boolean'
           }
         },
         additionalProperties: false
       }
     ],
     messages: {
-      macrosNotOnTop:
-        '{{macro}} should be the first statement in `<script setup>` (after any potential import statements or type definitions).'
+      macrosNotAtTop:
+        '{{macro}} should be placed at the top of `<script setup>` (after any potential import statements or type definitions).',
+      macrosUnordered: '{{macro}} should be above {{before}}.',
+      defineExposeNotTheLast:
+        '`defineExpose` should be the last statement in `<script setup>`.',
+      putExposeAtTheLast:
+        'Put `defineExpose` as the last statement in `<script setup>`.'
     }
   },
   create
diff --git a/lib/rules/define-props-declaration.js b/lib/rules/define-props-declaration.js
new file mode 100644
index 000000000..3862bb228
--- /dev/null
+++ b/lib/rules/define-props-declaration.js
@@ -0,0 +1,64 @@
+/**
+ * @author Amorites
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'enforce declaration style of `defineProps`',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/define-props-declaration.html'
+    },
+    fixable: null,
+    schema: [
+      {
+        enum: ['type-based', 'runtime']
+      }
+    ],
+    messages: {
+      hasArg: 'Use type-based declaration instead of runtime declaration.',
+      hasTypeArg: 'Use runtime declaration instead of type-based declaration.'
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    const scriptSetup = utils.getScriptSetupElement(context)
+    if (!scriptSetup || !utils.hasAttribute(scriptSetup, 'lang', 'ts')) {
+      return {}
+    }
+
+    const defineType = context.options[0] || 'type-based'
+    return utils.defineScriptSetupVisitor(context, {
+      onDefinePropsEnter(node) {
+        switch (defineType) {
+          case 'type-based': {
+            if (node.arguments.length > 0) {
+              context.report({
+                node,
+                messageId: 'hasArg'
+              })
+            }
+            break
+          }
+
+          case 'runtime': {
+            const typeArguments =
+              'typeArguments' in node ? node.typeArguments : node.typeParameters
+            if (typeArguments && typeArguments.params.length > 0) {
+              context.report({
+                node,
+                messageId: 'hasTypeArg'
+              })
+            }
+            break
+          }
+        }
+      }
+    })
+  }
+}
diff --git a/lib/rules/define-props-destructuring.js b/lib/rules/define-props-destructuring.js
new file mode 100644
index 000000000..65ec1dcd7
--- /dev/null
+++ b/lib/rules/define-props-destructuring.js
@@ -0,0 +1,79 @@
+/**
+ * @author Wayne Zhang
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'enforce consistent style for props destructuring',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/define-props-destructuring.html'
+    },
+    fixable: null,
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          destructure: {
+            enum: ['always', 'never']
+          }
+        },
+        additionalProperties: false
+      }
+    ],
+    messages: {
+      preferDestructuring: 'Prefer destructuring from `defineProps` directly.',
+      avoidDestructuring: 'Avoid destructuring from `defineProps`.',
+      avoidWithDefaults: 'Avoid using `withDefaults` with destructuring.'
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    const options = context.options[0] || {}
+    const destructurePreference = options.destructure || 'always'
+
+    return utils.compositingVisitors(
+      utils.defineScriptSetupVisitor(context, {
+        onDefinePropsEnter(node, props) {
+          const hasNoArgs = props.filter((prop) => prop.propName).length === 0
+          if (hasNoArgs) {
+            return
+          }
+
+          const hasDestructure = utils.isUsingPropsDestructure(node)
+          const hasWithDefaults = utils.hasWithDefaults(node)
+
+          if (destructurePreference === 'never') {
+            if (hasDestructure) {
+              context.report({
+                node,
+                messageId: 'avoidDestructuring'
+              })
+            }
+            return
+          }
+
+          if (!hasDestructure) {
+            context.report({
+              node,
+              messageId: 'preferDestructuring'
+            })
+            return
+          }
+
+          if (hasWithDefaults) {
+            context.report({
+              node: node.parent.callee,
+              messageId: 'avoidWithDefaults'
+            })
+          }
+        }
+      })
+    )
+  }
+}
diff --git a/lib/rules/dot-location.js b/lib/rules/dot-location.js
index 08f96127b..fac27af0c 100644
--- a/lib/rules/dot-location.js
+++ b/lib/rules/dot-location.js
@@ -3,7 +3,7 @@
  */
 'use strict'
 
-const { wrapCoreRule } = require('../utils')
+const { wrapStylisticOrCoreRule } = require('../utils')
 
-// eslint-disable-next-line no-invalid-meta, no-invalid-meta-docs-categories
-module.exports = wrapCoreRule('dot-location')
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = wrapStylisticOrCoreRule('dot-location')
diff --git a/lib/rules/dot-notation.js b/lib/rules/dot-notation.js
index bd72bd828..684f34797 100644
--- a/lib/rules/dot-notation.js
+++ b/lib/rules/dot-notation.js
@@ -3,9 +3,9 @@
  */
 'use strict'
 
-const { wrapCoreRule } = require('../utils')
+const { wrapStylisticOrCoreRule } = require('../utils')
 
-// eslint-disable-next-line no-invalid-meta, no-invalid-meta-docs-categories
-module.exports = wrapCoreRule('dot-notation', {
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = wrapStylisticOrCoreRule('dot-notation', {
   applyDocument: true
 })
diff --git a/lib/rules/enforce-style-attribute.js b/lib/rules/enforce-style-attribute.js
new file mode 100644
index 000000000..af689a642
--- /dev/null
+++ b/lib/rules/enforce-style-attribute.js
@@ -0,0 +1,154 @@
+/**
+ * @author Mussin Benarbia
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const { isVElement } = require('../utils')
+
+/**
+ * check whether a tag has the `scoped` attribute
+ * @param {VElement} componentBlock
+ */
+function isScoped(componentBlock) {
+  return componentBlock.startTag.attributes.some(
+    (attribute) => !attribute.directive && attribute.key.name === 'scoped'
+  )
+}
+
+/**
+ * check whether a tag has the `module` attribute
+ * @param {VElement} componentBlock
+ */
+function isModule(componentBlock) {
+  return componentBlock.startTag.attributes.some(
+    (attribute) => !attribute.directive && attribute.key.name === 'module'
+  )
+}
+
+/**
+ * check if a tag doesn't have either the `scoped` nor `module` attribute
+ * @param {VElement} componentBlock
+ */
+function isPlain(componentBlock) {
+  return !isScoped(componentBlock) && !isModule(componentBlock)
+}
+
+/** @param {RuleContext} context */
+function getUserDefinedAllowedAttrs(context) {
+  if (context.options[0] && context.options[0].allow) {
+    return context.options[0].allow
+  }
+  return []
+}
+
+const defaultAllowedAttrs = ['scoped']
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        'enforce or forbid the use of the `scoped` and `module` attributes in SFC top level style tags',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/enforce-style-attribute.html'
+    },
+    fixable: null,
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          allow: {
+            type: 'array',
+            minItems: 1,
+            uniqueItems: true,
+            items: {
+              type: 'string',
+              enum: ['plain', 'scoped', 'module']
+            }
+          }
+        },
+        additionalProperties: false
+      }
+    ],
+    messages: {
+      notAllowedScoped:
+        'The scoped attribute is not allowed. Allowed: {{ allowedAttrsString }}.',
+      notAllowedModule:
+        'The module attribute is not allowed. Allowed: {{ allowedAttrsString }}.',
+      notAllowedPlain:
+        'Plain <style> tags are not allowed. Allowed: {{ allowedAttrsString }}.'
+    }
+  },
+
+  /** @param {RuleContext} context */
+  create(context) {
+    const sourceCode = context.sourceCode
+    if (!sourceCode.parserServices.getDocumentFragment) {
+      return {}
+    }
+    const documentFragment = sourceCode.parserServices.getDocumentFragment()
+    if (!documentFragment) {
+      return {}
+    }
+
+    const topLevelStyleTags = documentFragment.children.filter(
+      /** @returns {element is VElement} */
+      (element) => isVElement(element) && element.rawName === 'style'
+    )
+
+    if (topLevelStyleTags.length === 0) {
+      return {}
+    }
+
+    const userDefinedAllowedAttrs = getUserDefinedAllowedAttrs(context)
+    const allowedAttrs =
+      userDefinedAllowedAttrs.length > 0
+        ? userDefinedAllowedAttrs
+        : defaultAllowedAttrs
+
+    const allowsPlain = allowedAttrs.includes('plain')
+    const allowsScoped = allowedAttrs.includes('scoped')
+    const allowsModule = allowedAttrs.includes('module')
+    const allowedAttrsString = [...allowedAttrs].sort().join(', ')
+
+    return {
+      Program() {
+        for (const styleTag of topLevelStyleTags) {
+          if (!allowsPlain && isPlain(styleTag)) {
+            context.report({
+              node: styleTag,
+              messageId: 'notAllowedPlain',
+              data: {
+                allowedAttrsString
+              }
+            })
+            return
+          }
+
+          if (!allowsScoped && isScoped(styleTag)) {
+            context.report({
+              node: styleTag,
+              messageId: 'notAllowedScoped',
+              data: {
+                allowedAttrsString
+              }
+            })
+            return
+          }
+
+          if (!allowsModule && isModule(styleTag)) {
+            context.report({
+              node: styleTag,
+              messageId: 'notAllowedModule',
+              data: {
+                allowedAttrsString
+              }
+            })
+            return
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/lib/rules/eqeqeq.js b/lib/rules/eqeqeq.js
index d918b4d80..3d53fdf87 100644
--- a/lib/rules/eqeqeq.js
+++ b/lib/rules/eqeqeq.js
@@ -5,7 +5,7 @@
 
 const { wrapCoreRule } = require('../utils')
 
-// eslint-disable-next-line no-invalid-meta, no-invalid-meta-docs-categories
+// eslint-disable-next-line internal/no-invalid-meta
 module.exports = wrapCoreRule('eqeqeq', {
   applyDocument: true
 })
diff --git a/lib/rules/first-attribute-linebreak.js b/lib/rules/first-attribute-linebreak.js
index 25f893fd2..400c681b4 100644
--- a/lib/rules/first-attribute-linebreak.js
+++ b/lib/rules/first-attribute-linebreak.js
@@ -4,9 +4,6 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
 const utils = require('../utils')
 
 module.exports = {
@@ -14,10 +11,10 @@ module.exports = {
     type: 'layout',
     docs: {
       description: 'enforce the location of first attribute',
-      categories: ['vue3-strongly-recommended', 'strongly-recommended'],
+      categories: ['vue3-strongly-recommended', 'vue2-strongly-recommended'],
       url: 'https://eslint.vuejs.org/rules/first-attribute-linebreak.html'
     },
-    fixable: 'whitespace', // or "code" or "whitespace"
+    fixable: 'whitespace',
     schema: [
       {
         type: 'object',
@@ -42,9 +39,10 @@ module.exports = {
     const multiline =
       (context.options[0] && context.options[0].multiline) || 'below'
 
+    const sourceCode = context.sourceCode
     const template =
-      context.parserServices.getTemplateBodyTokenStore &&
-      context.parserServices.getTemplateBodyTokenStore()
+      sourceCode.parserServices.getTemplateBodyTokenStore &&
+      sourceCode.parserServices.getTemplateBodyTokenStore()
 
     /**
      * Report attribute
diff --git a/lib/rules/func-call-spacing.js b/lib/rules/func-call-spacing.js
index 2054376c0..c09f7b088 100644
--- a/lib/rules/func-call-spacing.js
+++ b/lib/rules/func-call-spacing.js
@@ -3,10 +3,17 @@
  */
 'use strict'
 
-const { wrapCoreRule } = require('../utils')
+const { wrapStylisticOrCoreRule } = require('../utils')
 
-// eslint-disable-next-line no-invalid-meta, no-invalid-meta-docs-categories
-module.exports = wrapCoreRule('func-call-spacing', {
-  skipDynamicArguments: true,
-  applyDocument: true
-})
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = wrapStylisticOrCoreRule(
+  {
+    core: 'func-call-spacing',
+    stylistic: 'function-call-spacing',
+    vue: 'func-call-spacing'
+  },
+  {
+    skipDynamicArguments: true,
+    applyDocument: true
+  }
+)
diff --git a/lib/rules/html-button-has-type.js b/lib/rules/html-button-has-type.js
index 4b0d76cbd..b61a008c6 100644
--- a/lib/rules/html-button-has-type.js
+++ b/lib/rules/html-button-has-type.js
@@ -4,16 +4,8 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 /**
  *
  * @param {string} type
@@ -43,18 +35,9 @@ module.exports = {
       {
         type: 'object',
         properties: {
-          button: {
-            default: optionDefaults.button,
-            type: 'boolean'
-          },
-          submit: {
-            default: optionDefaults.submit,
-            type: 'boolean'
-          },
-          reset: {
-            default: optionDefaults.reset,
-            type: 'boolean'
-          }
+          button: { type: 'boolean' },
+          submit: { type: 'boolean' },
+          reset: { type: 'boolean' }
         },
         additionalProperties: false
       }
diff --git a/lib/rules/html-closing-bracket-newline.js b/lib/rules/html-closing-bracket-newline.js
index 9ac1d0f52..e8498e8b0 100644
--- a/lib/rules/html-closing-bracket-newline.js
+++ b/lib/rules/html-closing-bracket-newline.js
@@ -5,33 +5,63 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 /**
  * @param {number} lineBreaks
  */
 function getPhrase(lineBreaks) {
   switch (lineBreaks) {
-    case 0:
+    case 0: {
       return 'no line breaks'
-    case 1:
+    }
+    case 1: {
       return '1 line break'
-    default:
+    }
+    default: {
       return `${lineBreaks} line breaks`
+    }
   }
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
+/**
+ * @typedef LineBreakBehavior
+ * @type {('always'|'never')}
+ */
+
+/**
+ * @typedef LineType
+ * @type {('singleline'|'multiline')}
+ */
+
+/**
+ * @typedef RuleOptions
+ * @type {object}
+ * @property {LineBreakBehavior} singleline - The behavior for single line tags.
+ * @property {LineBreakBehavior} multiline - The behavior for multiline tags.
+ * @property {object} selfClosingTag
+ * @property {LineBreakBehavior} selfClosingTag.singleline - The behavior for single line self closing tags.
+ * @property {LineBreakBehavior} selfClosingTag.multiline - The behavior for multiline self closing tags.
+ */
+
+/**
+ * @param {VStartTag | VEndTag} node - The node representing a start or end tag.
+ * @param {RuleOptions} options - The options for line breaks.
+ * @param {LineType} type - The type of line break.
+ * @returns {number} - The expected line breaks.
+ */
+function getExpectedLineBreaks(node, options, type) {
+  const isSelfClosingTag = node.type === 'VStartTag' && node.selfClosing
+  if (
+    isSelfClosingTag &&
+    options.selfClosingTag &&
+    options.selfClosingTag[type]
+  ) {
+    return options.selfClosingTag[type] === 'always' ? 1 : 0
+  }
+
+  return options[type] === 'always' ? 1 : 0
+}
 
 module.exports = {
   meta: {
@@ -39,7 +69,7 @@ module.exports = {
     docs: {
       description:
         "require or disallow a line break before tag's closing brackets",
-      categories: ['vue3-strongly-recommended', 'strongly-recommended'],
+      categories: ['vue3-strongly-recommended', 'vue2-strongly-recommended'],
       url: 'https://eslint.vuejs.org/rules/html-closing-bracket-newline.html'
     },
     fixable: 'whitespace',
@@ -48,11 +78,24 @@ module.exports = {
         type: 'object',
         properties: {
           singleline: { enum: ['always', 'never'] },
-          multiline: { enum: ['always', 'never'] }
+          multiline: { enum: ['always', 'never'] },
+          selfClosingTag: {
+            type: 'object',
+            properties: {
+              singleline: { enum: ['always', 'never'] },
+              multiline: { enum: ['always', 'never'] }
+            },
+            additionalProperties: false,
+            minProperties: 1
+          }
         },
         additionalProperties: false
       }
-    ]
+    ],
+    messages: {
+      expectedBeforeClosingBracket:
+        'Expected {{expected}} before closing bracket, but {{actual}} found.'
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
@@ -64,9 +107,10 @@ module.exports = {
       },
       context.options[0] || {}
     )
+    const sourceCode = context.sourceCode
     const template =
-      context.parserServices.getTemplateBodyTokenStore &&
-      context.parserServices.getTemplateBodyTokenStore()
+      sourceCode.parserServices.getTemplateBodyTokenStore &&
+      sourceCode.parserServices.getTemplateBodyTokenStore()
 
     return utils.defineDocumentVisitor(context, {
       /** @param {VStartTag | VEndTag} node */
@@ -84,7 +128,9 @@ module.exports = {
           node.loc.start.line === prevToken.loc.end.line
             ? 'singleline'
             : 'multiline'
-        const expectedLineBreaks = options[type] === 'always' ? 1 : 0
+
+        const expectedLineBreaks = getExpectedLineBreaks(node, options, type)
+
         const actualLineBreaks =
           closingBracketToken.loc.start.line - prevToken.loc.end.line
 
@@ -95,8 +141,7 @@ module.exports = {
               start: prevToken.loc.end,
               end: closingBracketToken.loc.start
             },
-            message:
-              'Expected {{expected}} before closing bracket, but {{actual}} found.',
+            messageId: 'expectedBeforeClosingBracket',
             data: {
               expected: getPhrase(expectedLineBreaks),
               actual: getPhrase(actualLineBreaks)
diff --git a/lib/rules/html-closing-bracket-spacing.js b/lib/rules/html-closing-bracket-spacing.js
index e60fba491..4f3a05e3d 100644
--- a/lib/rules/html-closing-bracket-spacing.js
+++ b/lib/rules/html-closing-bracket-spacing.js
@@ -4,16 +4,8 @@
 
 'use strict'
 
-// -----------------------------------------------------------------------------
-// Requirements
-// -----------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// -----------------------------------------------------------------------------
-// Helpers
-// -----------------------------------------------------------------------------
-
 /**
  * @typedef { {startTag?:"always"|"never",endTag?:"always"|"never",selfClosingTag?:"always"|"never"} } Options
  */
@@ -59,18 +51,15 @@ function parseOptions(options, tokens) {
   })
 }
 
-// -----------------------------------------------------------------------------
-// Rule Definition
-// -----------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'layout',
     docs: {
       description: "require or disallow a space before tag's closing brackets",
-      categories: ['vue3-strongly-recommended', 'strongly-recommended'],
+      categories: ['vue3-strongly-recommended', 'vue2-strongly-recommended'],
       url: 'https://eslint.vuejs.org/rules/html-closing-bracket-spacing.html'
     },
+    fixable: 'whitespace',
     schema: [
       {
         type: 'object',
@@ -82,14 +71,17 @@ module.exports = {
         additionalProperties: false
       }
     ],
-    fixable: 'whitespace'
+    messages: {
+      missing: "Expected a space before '{{bracket}}', but not found.",
+      unexpected: "Expected no space before '{{bracket}}', but found."
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
-    const sourceCode = context.getSourceCode()
+    const sourceCode = context.sourceCode
     const tokens =
-      context.parserServices.getTemplateBodyTokenStore &&
-      context.parserServices.getTemplateBodyTokenStore()
+      sourceCode.parserServices.getTemplateBodyTokenStore &&
+      sourceCode.parserServices.getTemplateBodyTokenStore()
     const options = parseOptions(context.options[0], tokens)
 
     return utils.defineDocumentVisitor(context, {
@@ -114,7 +106,7 @@ module.exports = {
           context.report({
             node,
             loc: lastToken.loc,
-            message: "Expected a space before '{{bracket}}', but not found.",
+            messageId: 'missing',
             data: { bracket: sourceCode.getText(lastToken) },
             fix: (fixer) => fixer.insertTextBefore(lastToken, ' ')
           })
@@ -125,7 +117,7 @@ module.exports = {
               start: prevToken.loc.end,
               end: lastToken.loc.end
             },
-            message: "Expected no space before '{{bracket}}', but found.",
+            messageId: 'unexpected',
             data: { bracket: sourceCode.getText(lastToken) },
             fix: (fixer) =>
               fixer.removeRange([prevToken.range[1], lastToken.range[0]])
diff --git a/lib/rules/html-comment-content-newline.js b/lib/rules/html-comment-content-newline.js
index 3985f7d52..ef543b6f4 100644
--- a/lib/rules/html-comment-content-newline.js
+++ b/lib/rules/html-comment-content-newline.js
@@ -4,20 +4,12 @@
  */
 'use strict'
 
-// -----------------------------------------------------------------------------
-// Requirements
-// -----------------------------------------------------------------------------
-
 const htmlComments = require('../utils/html-comments')
 
 /**
  * @typedef { import('../utils/html-comments').ParsedHTMLComment } ParsedHTMLComment
  */
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 /**
  * @param {any} param
  */
@@ -37,23 +29,19 @@ function parseOption(param) {
   )
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'layout',
 
     docs: {
-      description: 'enforce unified line brake in HTML comments',
+      description: 'enforce unified line break in HTML comments',
       categories: undefined,
       url: 'https://eslint.vuejs.org/rules/html-comment-content-newline.html'
     },
     fixable: 'whitespace',
     schema: [
       {
-        anyOf: [
+        oneOf: [
           {
             enum: ['always', 'never']
           },
diff --git a/lib/rules/html-comment-content-spacing.js b/lib/rules/html-comment-content-spacing.js
index b4f31672a..b220bd79c 100644
--- a/lib/rules/html-comment-content-spacing.js
+++ b/lib/rules/html-comment-content-spacing.js
@@ -4,20 +4,12 @@
  */
 'use strict'
 
-// -----------------------------------------------------------------------------
-// Requirements
-// -----------------------------------------------------------------------------
-
 const htmlComments = require('../utils/html-comments')
 
 /**
  * @typedef { import('../utils/html-comments').ParsedHTMLComment } ParsedHTMLComment
  */
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'layout',
diff --git a/lib/rules/html-comment-indent.js b/lib/rules/html-comment-indent.js
index 56c81960f..3c1828b4a 100644
--- a/lib/rules/html-comment-indent.js
+++ b/lib/rules/html-comment-indent.js
@@ -4,16 +4,8 @@
  */
 'use strict'
 
-// -----------------------------------------------------------------------------
-// Requirements
-// -----------------------------------------------------------------------------
-
 const htmlComments = require('../utils/html-comments')
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 /**
  * Normalize options.
  * @param {number|"tab"|undefined} type The type of indentation.
@@ -64,10 +56,6 @@ function toUnit(char) {
   return JSON.stringify(char)
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'layout',
@@ -80,7 +68,7 @@ module.exports = {
     fixable: 'whitespace',
     schema: [
       {
-        anyOf: [{ type: 'integer', minimum: 0 }, { enum: ['tab'] }]
+        oneOf: [{ type: 'integer', minimum: 0 }, { enum: ['tab'] }]
       }
     ],
     messages: {
@@ -99,7 +87,7 @@ module.exports = {
   /** @param {RuleContext} context */
   create(context) {
     const options = parseOptions(context.options[0])
-    const sourceCode = context.getSourceCode()
+    const sourceCode = context.sourceCode
     return htmlComments.defineVisitor(
       context,
       null,
diff --git a/lib/rules/html-end-tags.js b/lib/rules/html-end-tags.js
index 59d2e874f..a0d313cf2 100644
--- a/lib/rules/html-end-tags.js
+++ b/lib/rules/html-end-tags.js
@@ -5,26 +5,21 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'suggestion',
     docs: {
       description: 'enforce end tag style',
-      categories: ['vue3-strongly-recommended', 'strongly-recommended'],
+      categories: ['vue3-strongly-recommended', 'vue2-strongly-recommended'],
       url: 'https://eslint.vuejs.org/rules/html-end-tags.html'
     },
     fixable: 'code',
-    schema: []
+    schema: [],
+    messages: {
+      missingEndTag: "'<{{name}}>' should have end tag."
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
@@ -47,7 +42,7 @@ module.exports = {
             context.report({
               node: node.startTag,
               loc: node.startTag.loc,
-              message: "'<{{name}}>' should have end tag.",
+              messageId: 'missingEndTag',
               data: { name },
               fix: (fixer) => fixer.insertTextAfter(node, `</${name}>`)
             })
diff --git a/lib/rules/html-indent.js b/lib/rules/html-indent.js
index 6e6149ef5..e4b5faae8 100644
--- a/lib/rules/html-indent.js
+++ b/lib/rules/html-indent.js
@@ -5,40 +5,35 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const indentCommon = require('../utils/indent-common')
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   /** @param {RuleContext} context */
   create(context) {
+    const sourceCode = context.sourceCode
     const tokenStore =
-      context.parserServices.getTemplateBodyTokenStore &&
-      context.parserServices.getTemplateBodyTokenStore()
+      sourceCode.parserServices.getTemplateBodyTokenStore &&
+      sourceCode.parserServices.getTemplateBodyTokenStore()
     const visitor = indentCommon.defineVisitor(context, tokenStore, {
       baseIndent: 1
     })
 
     return utils.defineTemplateBodyVisitor(context, visitor)
   },
+  // eslint-disable-next-line eslint-plugin/prefer-message-ids
   meta: {
     type: 'layout',
     docs: {
       description: 'enforce consistent indentation in `<template>`',
-      categories: ['vue3-strongly-recommended', 'strongly-recommended'],
+      categories: ['vue3-strongly-recommended', 'vue2-strongly-recommended'],
       url: 'https://eslint.vuejs.org/rules/html-indent.html'
     },
+    // eslint-disable-next-line eslint-plugin/require-meta-fixable -- fixer is not recognized
     fixable: 'whitespace',
     schema: [
       {
-        anyOf: [{ type: 'integer', minimum: 1 }, { enum: ['tab'] }]
+        oneOf: [{ type: 'integer', minimum: 1 }, { enum: ['tab'] }]
       },
       {
         type: 'object',
@@ -46,7 +41,7 @@ module.exports = {
           attribute: { type: 'integer', minimum: 0 },
           baseIndent: { type: 'integer', minimum: 0 },
           closeBracket: {
-            anyOf: [
+            oneOf: [
               { type: 'integer', minimum: 0 },
               {
                 type: 'object',
@@ -67,7 +62,7 @@ module.exports = {
               allOf: [
                 { type: 'string' },
                 { not: { type: 'string', pattern: ':exit$' } },
-                { not: { type: 'string', pattern: '^\\s*$' } }
+                { not: { type: 'string', pattern: String.raw`^\s*$` } }
               ]
             },
             uniqueItems: true,
diff --git a/lib/rules/html-quotes.js b/lib/rules/html-quotes.js
index a5523cb78..6ba1b3f41 100644
--- a/lib/rules/html-quotes.js
+++ b/lib/rules/html-quotes.js
@@ -5,22 +5,14 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'layout',
     docs: {
       description: 'enforce quotes style of HTML attributes',
-      categories: ['vue3-strongly-recommended', 'strongly-recommended'],
+      categories: ['vue3-strongly-recommended', 'vue2-strongly-recommended'],
       url: 'https://eslint.vuejs.org/rules/html-quotes.html'
     },
     fixable: 'code',
@@ -35,11 +27,14 @@ module.exports = {
         },
         additionalProperties: false
       }
-    ]
+    ],
+    messages: {
+      expected: 'Expected to be enclosed by {{kind}}.'
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
-    const sourceCode = context.getSourceCode()
+    const sourceCode = context.sourceCode
     const double = context.options[0] !== 'single'
     const avoidEscape =
       context.options[1] && context.options[1].avoidEscape === true
@@ -56,6 +51,11 @@ module.exports = {
             return
           }
 
+          if (utils.isVBindSameNameShorthand(node)) {
+            // v-bind same-name shorthand (Vue 3.4+)
+            return
+          }
+
           const text = sourceCode.getText(node.value)
           const firstChar = text[0]
 
@@ -71,7 +71,7 @@ module.exports = {
             context.report({
               node: node.value,
               loc: node.value.loc,
-              message: 'Expected to be enclosed by {{kind}}.',
+              messageId: 'expected',
               data: { kind: quoteName },
               fix(fixer) {
                 const contentText = quoted ? text.slice(1, -1) : text
diff --git a/lib/rules/html-self-closing.js b/lib/rules/html-self-closing.js
index ed4a3dca4..c370fb1f0 100644
--- a/lib/rules/html-self-closing.js
+++ b/lib/rules/html-self-closing.js
@@ -5,16 +5,8 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 /**
  * These strings wil be displayed in error messages.
  */
@@ -71,7 +63,7 @@ function getElementType(node) {
   if (utils.isSvgElementNode(node)) {
     return 'SVG'
   }
-  if (utils.isMathMLElementNode(node)) {
+  if (utils.isMathElementNode(node)) {
     return 'MATH'
   }
   return 'UNKNOWN'
@@ -86,21 +78,17 @@ function getElementType(node) {
  */
 function isEmpty(node, sourceCode) {
   const start = node.startTag.range[1]
-  const end = node.endTag != null ? node.endTag.range[0] : node.range[1]
+  const end = node.endTag == null ? node.range[1] : node.endTag.range[0]
 
   return sourceCode.text.slice(start, end).trim() === ''
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'layout',
     docs: {
       description: 'enforce self-closing style',
-      categories: ['vue3-strongly-recommended', 'strongly-recommended'],
+      categories: ['vue3-strongly-recommended', 'vue2-strongly-recommended'],
       url: 'https://eslint.vuejs.org/rules/html-self-closing.html'
     },
     fixable: 'code',
@@ -131,11 +119,17 @@ module.exports = {
         }
       ],
       maxItems: 1
+    },
+    messages: {
+      requireSelfClosing:
+        'Require self-closing on {{elementType}} (<{{name}}>).',
+      disallowSelfClosing:
+        'Disallow self-closing on {{elementType}} (<{{name}}/>).'
     }
   },
   /** @param {RuleContext} context */
   create(context) {
-    const sourceCode = context.getSourceCode()
+    const sourceCode = context.sourceCode
     const options = parseOptions(context.options[0])
     let hasInvalidEOF = false
 
@@ -143,7 +137,7 @@ module.exports = {
       context,
       {
         VElement(node) {
-          if (hasInvalidEOF) {
+          if (hasInvalidEOF || node.parent.type === 'VDocumentFragment') {
             return
           }
 
@@ -156,16 +150,15 @@ module.exports = {
             isEmpty(node, sourceCode)
           ) {
             context.report({
-              node,
-              loc: node.loc,
-              message: 'Require self-closing on {{elementType}} (<{{name}}>).',
+              node: node.endTag || node,
+              messageId: 'requireSelfClosing',
               data: {
                 elementType: ELEMENT_TYPE_MESSAGES[elementType],
                 name: node.rawName
               },
               fix(fixer) {
                 const tokens =
-                  context.parserServices.getTemplateBodyTokenStore()
+                  sourceCode.parserServices.getTemplateBodyTokenStore()
                 const close = tokens.getLastToken(node.startTag)
                 if (close.type !== 'HTMLTagClose') {
                   return null
@@ -181,16 +174,21 @@ module.exports = {
           if (mode === 'never' && node.startTag.selfClosing) {
             context.report({
               node,
-              loc: node.loc,
-              message:
-                'Disallow self-closing on {{elementType}} (<{{name}}/>).',
+              loc: {
+                start: {
+                  line: node.loc.end.line,
+                  column: node.loc.end.column - 2
+                },
+                end: node.loc.end
+              },
+              messageId: 'disallowSelfClosing',
               data: {
                 elementType: ELEMENT_TYPE_MESSAGES[elementType],
                 name: node.rawName
               },
               fix(fixer) {
                 const tokens =
-                  context.parserServices.getTemplateBodyTokenStore()
+                  sourceCode.parserServices.getTemplateBodyTokenStore()
                 const close = tokens.getLastToken(node.startTag)
                 if (close.type !== 'HTMLSelfClosingTagClose') {
                   return null
diff --git a/lib/rules/jsx-uses-vars.js b/lib/rules/jsx-uses-vars.js
index e1c14d88c..b0b693ed4 100644
--- a/lib/rules/jsx-uses-vars.js
+++ b/lib/rules/jsx-uses-vars.js
@@ -30,11 +30,8 @@ SOFTWARE.
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
+  // eslint-disable-next-line eslint-plugin/prefer-message-ids
   meta: {
     type: 'problem',
     docs: {
@@ -66,7 +63,7 @@ module.exports = {
           return
         }
 
-        context.markVariableAsUsed(name)
+        context.sourceCode.markVariableAsUsed(name, node)
       }
     }
   }
diff --git a/lib/rules/key-spacing.js b/lib/rules/key-spacing.js
index a949c18a0..a70a81420 100644
--- a/lib/rules/key-spacing.js
+++ b/lib/rules/key-spacing.js
@@ -3,9 +3,9 @@
  */
 'use strict'
 
-const { wrapCoreRule } = require('../utils')
+const { wrapStylisticOrCoreRule } = require('../utils')
 
-// eslint-disable-next-line no-invalid-meta, no-invalid-meta-docs-categories
-module.exports = wrapCoreRule('key-spacing', {
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = wrapStylisticOrCoreRule('key-spacing', {
   skipDynamicArguments: true
 })
diff --git a/lib/rules/keyword-spacing.js b/lib/rules/keyword-spacing.js
index af1b28487..9cb4fd3fc 100644
--- a/lib/rules/keyword-spacing.js
+++ b/lib/rules/keyword-spacing.js
@@ -3,9 +3,9 @@
  */
 'use strict'
 
-const { wrapCoreRule } = require('../utils')
+const { wrapStylisticOrCoreRule } = require('../utils')
 
-// eslint-disable-next-line no-invalid-meta, no-invalid-meta-docs-categories
-module.exports = wrapCoreRule('keyword-spacing', {
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = wrapStylisticOrCoreRule('keyword-spacing', {
   skipDynamicArguments: true
 })
diff --git a/lib/rules/match-component-file-name.js b/lib/rules/match-component-file-name.js
index 40d01ba00..ee741ca37 100644
--- a/lib/rules/match-component-file-name.js
+++ b/lib/rules/match-component-file-name.js
@@ -4,18 +4,10 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 const casing = require('../utils/casing')
 const path = require('path')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 /**
  * @param {Expression | SpreadElement} node
  * @returns {node is (Literal | TemplateLiteral)}
@@ -31,8 +23,6 @@ function canVerify(node) {
 
 module.exports = {
   meta: {
-    // eslint-disable-next-line eslint-plugin/require-meta-has-suggestions
-    hasSuggestions: true,
     type: 'suggestion',
     docs: {
       description: 'require component name property to match its file name',
@@ -40,6 +30,7 @@ module.exports = {
       url: 'https://eslint.vuejs.org/rules/match-component-file-name.html'
     },
     fixable: null,
+    hasSuggestions: true,
     schema: [
       {
         type: 'object',
@@ -58,7 +49,11 @@ module.exports = {
         },
         additionalProperties: false
       }
-    ]
+    ],
+    messages: {
+      shouldMatchFileName:
+        'Component name `{{name}}` should match file name `{{filename}}`.'
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
@@ -69,8 +64,8 @@ module.exports = {
       ? extensionsArray
       : ['jsx']
 
-    const extension = path.extname(context.getFilename())
-    const filename = path.basename(context.getFilename(), extension)
+    const extension = path.extname(context.filename)
+    const filename = path.basename(context.filename, extension)
 
     /** @type {Rule.ReportDescriptor[]} */
     const errors = []
@@ -80,10 +75,6 @@ module.exports = {
       return {}
     }
 
-    // ----------------------------------------------------------------------
-    // Private
-    // ----------------------------------------------------------------------
-
     /**
      * @param {string} name
      * @param {string} filename
@@ -114,8 +105,7 @@ module.exports = {
       if (!compareNames(name, filename)) {
         errors.push({
           node,
-          message:
-            'Component name `{{name}}` should match file name `{{filename}}`.',
+          messageId: 'shouldMatchFileName',
           data: { filename, name },
           suggest: [
             {
@@ -131,8 +121,7 @@ module.exports = {
       }
     }
 
-    return Object.assign(
-      {},
+    return utils.compositingVisitors(
       utils.executeOnCallVueComponent(context, (node) => {
         if (node.arguments.length === 2) {
           const argument = node.arguments[0]
@@ -151,6 +140,18 @@ module.exports = {
         if (!canVerify(node.value)) return
         verifyName(node.value)
       }),
+      utils.defineScriptSetupVisitor(context, {
+        onDefineOptionsEnter(node) {
+          componentCount++
+          if (node.arguments.length === 0) return
+          const define = node.arguments[0]
+          if (define.type !== 'ObjectExpression') return
+          const nameNode = utils.findProperty(define, 'name')
+          if (!nameNode) return
+          if (!canVerify(nameNode.value)) return
+          verifyName(nameNode.value)
+        }
+      }),
       {
         'Program:exit'() {
           if (componentCount > 1) return
diff --git a/lib/rules/match-component-import-name.js b/lib/rules/match-component-import-name.js
index 22eb4214a..344661005 100644
--- a/lib/rules/match-component-import-name.js
+++ b/lib/rules/match-component-import-name.js
@@ -18,7 +18,6 @@ function getExpectedNames(identifier) {
 module.exports = {
   meta: {
     type: 'problem',
-    schema: [],
     docs: {
       description:
         'require the registered component name to match the imported component name',
@@ -26,6 +25,7 @@ module.exports = {
       url: 'https://eslint.vuejs.org/rules/match-component-import-name.html'
     },
     fixable: null,
+    schema: [],
     messages: {
       unexpected:
         'Component alias {{importedName}} should be one of: {{expectedName}}.'
diff --git a/lib/rules/max-attributes-per-line.js b/lib/rules/max-attributes-per-line.js
index 7c4b02eea..1391dc442 100644
--- a/lib/rules/max-attributes-per-line.js
+++ b/lib/rules/max-attributes-per-line.js
@@ -4,9 +4,6 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
 const utils = require('../utils')
 
 /**
@@ -68,16 +65,16 @@ module.exports = {
     type: 'layout',
     docs: {
       description: 'enforce the maximum number of attributes per line',
-      categories: ['vue3-strongly-recommended', 'strongly-recommended'],
+      categories: ['vue3-strongly-recommended', 'vue2-strongly-recommended'],
       url: 'https://eslint.vuejs.org/rules/max-attributes-per-line.html'
     },
-    fixable: 'whitespace', // or "code" or "whitespace"
+    fixable: 'whitespace',
     schema: [
       {
         type: 'object',
         properties: {
           singleline: {
-            anyOf: [
+            oneOf: [
               {
                 type: 'number',
                 minimum: 1
@@ -95,7 +92,7 @@ module.exports = {
             ]
           },
           multiline: {
-            anyOf: [
+            oneOf: [
               {
                 type: 'number',
                 minimum: 1
@@ -115,17 +112,20 @@ module.exports = {
         },
         additionalProperties: false
       }
-    ]
+    ],
+    messages: {
+      shouldBeOnNewLine: "'{{name}}' should be on a new line."
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
-    const sourceCode = context.getSourceCode()
+    const sourceCode = context.sourceCode
     const configuration = parseOptions(context.options[0])
     const multilineMaximum = configuration.multiline
     const singlelinemMaximum = configuration.singleline
     const template =
-      context.parserServices.getTemplateBodyTokenStore &&
-      context.parserServices.getTemplateBodyTokenStore()
+      sourceCode.parserServices.getTemplateBodyTokenStore &&
+      sourceCode.parserServices.getTemplateBodyTokenStore()
 
     return utils.defineTemplateBodyVisitor(context, {
       VStartTag(node) {
@@ -150,10 +150,6 @@ module.exports = {
       }
     })
 
-    // ----------------------------------------------------------------------
-    // Helpers
-    // ----------------------------------------------------------------------
-
     /**
      * @param {(VDirective | VAttribute)[]} attributes
      */
@@ -162,7 +158,7 @@ module.exports = {
         context.report({
           node: prop,
           loc: prop.loc,
-          message: "'{{name}}' should be on a new line.",
+          messageId: 'shouldBeOnNewLine',
           data: { name: sourceCode.getText(prop.key) },
           fix(fixer) {
             if (i !== 0) return null
diff --git a/lib/rules/max-len.js b/lib/rules/max-len.js
index 560500a3b..58c5b2c6a 100644
--- a/lib/rules/max-len.js
+++ b/lib/rules/max-len.js
@@ -4,16 +4,8 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Constants
-// ------------------------------------------------------------------------------
-
 const OPTIONS_SCHEMA = {
   type: 'object',
   properties: {
@@ -65,7 +57,7 @@ const OPTIONS_SCHEMA = {
 }
 
 const OPTIONS_OR_INTEGER_SCHEMA = {
-  anyOf: [
+  oneOf: [
     OPTIONS_SCHEMA,
     {
       type: 'integer',
@@ -74,10 +66,6 @@ const OPTIONS_OR_INTEGER_SCHEMA = {
   ]
 }
 
-// --------------------------------------------------------------------------
-// Helpers
-// --------------------------------------------------------------------------
-
 /**
  * Computes the length of a line that may contain tabs. The width of each
  * tab will be the number of spaces to the next tab stop.
@@ -113,10 +101,10 @@ function computeLineLength(line, tabWidth) {
 function isTrailingComment(line, lineNumber, comment) {
   return Boolean(
     comment &&
-      comment.loc.start.line === lineNumber &&
-      lineNumber <= comment.loc.end.line &&
-      (comment.loc.end.line > lineNumber ||
-        comment.loc.end.column === line.length)
+    comment.loc.start.line === lineNumber &&
+    lineNumber <= comment.loc.end.line &&
+    (comment.loc.end.line > lineNumber ||
+      comment.loc.end.column === line.length)
   )
 }
 
@@ -177,10 +165,6 @@ function groupByLineNumber(nodes) {
   return grouped
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'layout',
@@ -189,8 +173,10 @@ module.exports = {
       description: 'enforce a maximum line length in `.vue` files',
       categories: undefined,
       url: 'https://eslint.vuejs.org/rules/max-len.html',
-      extensionRule: true,
-      coreRuleUrl: 'https://eslint.org/docs/rules/max-len'
+      extensionSource: {
+        url: 'https://eslint.org/docs/rules/max-len',
+        name: 'ESLint core'
+      }
     },
 
     schema: [
@@ -219,7 +205,7 @@ module.exports = {
      */
     const URL_REGEXP = /[^:/?#]:\/\/[^?#]/u
 
-    const sourceCode = context.getSourceCode()
+    const sourceCode = context.sourceCode
     /** @type {Token[]} */
     const tokens = []
     /** @type {(HTMLComment | HTMLBogusComment | Comment)[]} */
@@ -267,10 +253,6 @@ module.exports = {
       ignorePattern = new RegExp(ignorePattern, 'u')
     }
 
-    // --------------------------------------------------------------------------
-    // Helpers
-    // --------------------------------------------------------------------------
-
     /**
      * Retrieves an array containing all strings (" or ') in the source code.
      *
@@ -327,8 +309,8 @@ module.exports = {
       const scriptTokens = sourceCode.ast.tokens
       const scriptComments = sourceCode.getAllComments()
 
-      if (context.parserServices.getTemplateBodyTokenStore && templateBody) {
-        const tokenStore = context.parserServices.getTemplateBodyTokenStore()
+      if (sourceCode.parserServices.getTemplateBodyTokenStore && templateBody) {
+        const tokenStore = sourceCode.parserServices.getTemplateBodyTokenStore()
 
         const templateTokens = tokenStore.getTokens(templateBody, {
           includeComments: true
@@ -517,10 +499,6 @@ module.exports = {
       }
     }
 
-    // --------------------------------------------------------------------------
-    // Public API
-    // --------------------------------------------------------------------------
-
     return utils.compositingVisitors(
       utils.defineTemplateBodyVisitor(context, {
         /** @param {VLiteral} node */
diff --git a/lib/rules/max-lines-per-block.js b/lib/rules/max-lines-per-block.js
new file mode 100644
index 000000000..3608126b6
--- /dev/null
+++ b/lib/rules/max-lines-per-block.js
@@ -0,0 +1,110 @@
+/**
+ * @author lsdsjy
+ * @fileoverview Rule for checking the maximum number of lines in Vue SFC blocks.
+ */
+'use strict'
+
+const { SourceCode } = require('eslint')
+const utils = require('../utils')
+
+/**
+ * @param {string} text
+ */
+function isEmptyLine(text) {
+  return !text.trim()
+}
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'enforce maximum number of lines in Vue SFC blocks',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/max-lines-per-block.html'
+    },
+    fixable: null,
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          style: {
+            type: 'integer',
+            minimum: 1
+          },
+          template: {
+            type: 'integer',
+            minimum: 1
+          },
+          script: {
+            type: 'integer',
+            minimum: 1
+          },
+          skipBlankLines: {
+            type: 'boolean',
+            minimum: 0
+          }
+        },
+        additionalProperties: false
+      }
+    ],
+    messages: {
+      tooManyLines:
+        'Block has too many lines ({{lineCount}}). Maximum allowed is {{limit}}.'
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    const option = context.options[0] || {}
+    /**
+     * @type {Record<string, number>}
+     */
+    const limits = {
+      template: option.template,
+      script: option.script,
+      style: option.style
+    }
+
+    const sourceCode = context.sourceCode
+    const documentFragment =
+      sourceCode.parserServices.getDocumentFragment &&
+      sourceCode.parserServices.getDocumentFragment()
+
+    function getTopLevelHTMLElements() {
+      if (documentFragment) {
+        return documentFragment.children.filter(utils.isVElement)
+      }
+      return []
+    }
+
+    return {
+      /** @param {Program} node */
+      Program(node) {
+        if (utils.hasInvalidEOF(node)) {
+          return
+        }
+        for (const block of getTopLevelHTMLElements()) {
+          if (limits[block.name]) {
+            // We suppose the start tag and end tag occupy one single line respectively
+            let lineCount = block.loc.end.line - block.loc.start.line - 1
+
+            if (option.skipBlankLines) {
+              const lines = SourceCode.splitLines(sourceCode.getText(block))
+              lineCount -= lines.filter(isEmptyLine).length
+            }
+
+            if (lineCount > limits[block.name]) {
+              context.report({
+                node: block,
+                messageId: 'tooManyLines',
+                data: {
+                  limit: limits[block.name],
+                  lineCount
+                }
+              })
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/lib/rules/max-props.js b/lib/rules/max-props.js
new file mode 100644
index 000000000..0dc3043bf
--- /dev/null
+++ b/lib/rules/max-props.js
@@ -0,0 +1,81 @@
+/**
+ * @author kevsommer Kevin Sommer
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+const utils = require('../utils')
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'enforce maximum number of props in Vue component',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/max-props.html'
+    },
+    fixable: null,
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          maxProps: {
+            type: 'integer',
+            minimum: 1
+          }
+        },
+        additionalProperties: false,
+        minProperties: 1
+      }
+    ],
+    messages: {
+      tooManyProps:
+        'Component has too many props ({{propCount}}). Maximum allowed is {{limit}}.'
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    /** @type {Record<string, number>} */
+    const option = context.options[0] || {}
+
+    /**
+     * @param {import('../utils').ComponentProp[]} props
+     * @param {CallExpression | Property} node
+     */
+    function checkMaxNumberOfProps(props, node) {
+      const uniqueProps = new Set(props.map((prop) => prop.propName))
+      const propCount = uniqueProps.size
+      if (propCount > option.maxProps && props[0].node) {
+        context.report({
+          node,
+          messageId: 'tooManyProps',
+          data: {
+            propCount,
+            limit: option.maxProps
+          }
+        })
+      }
+    }
+
+    return utils.compositingVisitors(
+      utils.executeOnVue(context, (node) => {
+        const propsNode = node.properties.find(
+          /** @returns {p is Property} */
+          (p) =>
+            p.type === 'Property' && utils.getStaticPropertyName(p) === 'props'
+        )
+
+        if (!propsNode) return
+
+        checkMaxNumberOfProps(
+          utils.getComponentPropsFromOptions(node),
+          propsNode
+        )
+      }),
+      utils.defineScriptSetupVisitor(context, {
+        onDefinePropsEnter(node, props) {
+          checkMaxNumberOfProps(props, node)
+        }
+      })
+    )
+  }
+}
diff --git a/lib/rules/max-template-depth.js b/lib/rules/max-template-depth.js
new file mode 100644
index 000000000..899ec75ce
--- /dev/null
+++ b/lib/rules/max-template-depth.js
@@ -0,0 +1,82 @@
+/**
+ * @author kevsommer Kevin Sommer
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'enforce maximum depth of template',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/max-template-depth.html'
+    },
+    fixable: null,
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          maxDepth: {
+            type: 'integer',
+            minimum: 1
+          }
+        },
+        additionalProperties: false,
+        minProperties: 1
+      }
+    ],
+    messages: {
+      templateTooDeep:
+        'Element is nested too deeply (depth of {{depth}}, maximum allowed is {{limit}}).'
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    const option = context.options[0] || {}
+
+    /**
+     * @param {VElement} element
+     * @param {number} curDepth
+     */
+    function checkMaxDepth(element, curDepth) {
+      if (curDepth > option.maxDepth) {
+        context.report({
+          node: element,
+          messageId: 'templateTooDeep',
+          data: {
+            depth: curDepth,
+            limit: option.maxDepth
+          }
+        })
+      }
+
+      if (!element.children) {
+        return
+      }
+
+      for (const child of element.children) {
+        if (child.type === 'VElement') {
+          checkMaxDepth(child, curDepth + 1)
+        }
+      }
+    }
+
+    return {
+      /** @param {Program} program */
+      Program(program) {
+        const element = program.templateBody
+
+        if (element == null) {
+          return
+        }
+
+        if (element.type !== 'VElement') {
+          return
+        }
+
+        checkMaxDepth(element, 0)
+      }
+    }
+  }
+}
diff --git a/lib/rules/multi-word-component-names.js b/lib/rules/multi-word-component-names.js
index 6f73de294..97fe6b465 100644
--- a/lib/rules/multi-word-component-names.js
+++ b/lib/rules/multi-word-component-names.js
@@ -4,10 +4,6 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const path = require('path')
 const casing = require('../utils/casing')
 const utils = require('../utils')
@@ -16,16 +12,12 @@ const RESERVED_NAMES_IN_VUE3 = new Set(
   require('../utils/vue3-builtin-components')
 )
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'suggestion',
     docs: {
       description: 'require component names to be always multi-word',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/multi-word-component-names.html'
     },
     schema: [
@@ -106,12 +98,23 @@ module.exports = {
         hasName = true
         validateName(node.value)
       }),
+      utils.defineScriptSetupVisitor(context, {
+        onDefineOptionsEnter(node) {
+          if (node.arguments.length === 0) return
+          const define = node.arguments[0]
+          if (define.type !== 'ObjectExpression') return
+          const nameNode = utils.findProperty(define, 'name')
+          if (!nameNode) return
+          hasName = true
+          validateName(nameNode.value)
+        }
+      }),
       {
         /** @param {Program} node */
         'Program:exit'(node) {
           if (hasName) return
           if (!hasVue && node.body.length > 0) return
-          const fileName = context.getFilename()
+          const fileName = context.filename
           const componentName = path.basename(fileName, path.extname(fileName))
           if (
             utils.isVueFile(fileName) &&
diff --git a/lib/rules/multiline-html-element-content-newline.js b/lib/rules/multiline-html-element-content-newline.js
index cfa8d9778..6c8e14da6 100644
--- a/lib/rules/multiline-html-element-content-newline.js
+++ b/lib/rules/multiline-html-element-content-newline.js
@@ -4,18 +4,10 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 const casing = require('../utils/casing')
 const INLINE_ELEMENTS = require('../utils/inline-non-void-elements.json')
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 /**
  * @param {VElement & { endTag: VEndTag }} element
  */
@@ -42,10 +34,12 @@ function parseOptions(options) {
  */
 function getPhrase(lineBreaks) {
   switch (lineBreaks) {
-    case 0:
+    case 0: {
       return 'no'
-    default:
+    }
+    default: {
       return `${lineBreaks}`
+    }
   }
 }
 /**
@@ -61,17 +55,13 @@ function isEmpty(node, sourceCode) {
   return sourceCode.text.slice(start, end).trim() === ''
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'layout',
     docs: {
       description:
         'require a line break before and after the contents of a multiline element',
-      categories: ['vue3-strongly-recommended', 'strongly-recommended'],
+      categories: ['vue3-strongly-recommended', 'vue2-strongly-recommended'],
       url: 'https://eslint.vuejs.org/rules/multiline-html-element-content-newline.html'
     },
     fixable: 'whitespace',
@@ -108,10 +98,10 @@ module.exports = {
     const ignores = options.ignores
     const ignoreWhenEmpty = options.ignoreWhenEmpty
     const allowEmptyLines = options.allowEmptyLines
+    const sourceCode = context.sourceCode
     const template =
-      context.parserServices.getTemplateBodyTokenStore &&
-      context.parserServices.getTemplateBodyTokenStore()
-    const sourceCode = context.getSourceCode()
+      sourceCode.parserServices.getTemplateBodyTokenStore &&
+      sourceCode.parserServices.getTemplateBodyTokenStore()
 
     /** @type {VElement | null} */
     let inIgnoreElement = null
diff --git a/lib/rules/multiline-ternary.js b/lib/rules/multiline-ternary.js
new file mode 100644
index 000000000..84691627e
--- /dev/null
+++ b/lib/rules/multiline-ternary.js
@@ -0,0 +1,13 @@
+/**
+ * @author dev1437
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const { wrapStylisticOrCoreRule } = require('../utils')
+
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = wrapStylisticOrCoreRule('multiline-ternary', {
+  skipDynamicArguments: true,
+  applyDocument: true
+})
diff --git a/lib/rules/mustache-interpolation-spacing.js b/lib/rules/mustache-interpolation-spacing.js
index 8522c8ad9..bc0a5c8b6 100644
--- a/lib/rules/mustache-interpolation-spacing.js
+++ b/lib/rules/mustache-interpolation-spacing.js
@@ -4,22 +4,14 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'layout',
     docs: {
       description: 'enforce unified spacing in mustache interpolations',
-      categories: ['vue3-strongly-recommended', 'strongly-recommended'],
+      categories: ['vue3-strongly-recommended', 'vue2-strongly-recommended'],
       url: 'https://eslint.vuejs.org/rules/mustache-interpolation-spacing.html'
     },
     fixable: 'whitespace',
@@ -27,18 +19,21 @@ module.exports = {
       {
         enum: ['always', 'never']
       }
-    ]
+    ],
+    messages: {
+      expectedSpaceAfter: "Expected 1 space after '{{', but not found.",
+      expectedSpaceBefore: "Expected 1 space before '}}', but not found.",
+      unexpectedSpaceAfter: "Expected no space after '{{', but found.",
+      unexpectedSpaceBefore: "Expected no space before '}}', but found."
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
     const options = context.options[0] || 'always'
+    const sourceCode = context.sourceCode
     const template =
-      context.parserServices.getTemplateBodyTokenStore &&
-      context.parserServices.getTemplateBodyTokenStore()
-
-    // ----------------------------------------------------------------------
-    // Public
-    // ----------------------------------------------------------------------
+      sourceCode.parserServices.getTemplateBodyTokenStore &&
+      sourceCode.parserServices.getTemplateBodyTokenStore()
 
     return utils.defineTemplateBodyVisitor(context, {
       /** @param {VExpressionContainer} node */
@@ -66,14 +61,14 @@ module.exports = {
           if (openBrace.range[1] === firstToken.range[0]) {
             context.report({
               node: openBrace,
-              message: "Expected 1 space after '{{', but not found.",
+              messageId: 'expectedSpaceAfter',
               fix: (fixer) => fixer.insertTextAfter(openBrace, ' ')
             })
           }
           if (closeBrace.range[0] === lastToken.range[1]) {
             context.report({
               node: closeBrace,
-              message: "Expected 1 space before '}}', but not found.",
+              messageId: 'expectedSpaceBefore',
               fix: (fixer) => fixer.insertTextBefore(closeBrace, ' ')
             })
           }
@@ -84,7 +79,7 @@ module.exports = {
                 start: openBrace.loc.start,
                 end: firstToken.loc.start
               },
-              message: "Expected no space after '{{', but found.",
+              messageId: 'unexpectedSpaceAfter',
               fix: (fixer) =>
                 fixer.removeRange([openBrace.range[1], firstToken.range[0]])
             })
@@ -95,7 +90,7 @@ module.exports = {
                 start: lastToken.loc.end,
                 end: closeBrace.loc.end
               },
-              message: "Expected no space before '}}', but found.",
+              messageId: 'unexpectedSpaceBefore',
               fix: (fixer) =>
                 fixer.removeRange([lastToken.range[1], closeBrace.range[0]])
             })
diff --git a/lib/rules/new-line-between-multi-line-property.js b/lib/rules/new-line-between-multi-line-property.js
index 6dbde4586..cf1b9929a 100644
--- a/lib/rules/new-line-between-multi-line-property.js
+++ b/lib/rules/new-line-between-multi-line-property.js
@@ -45,9 +45,6 @@ function hasEmptyLine(sourceCode, pre, cur) {
   return false
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
 module.exports = {
   meta: {
     type: 'layout',
@@ -57,7 +54,7 @@ module.exports = {
       categories: undefined,
       url: 'https://eslint.vuejs.org/rules/new-line-between-multi-line-property.html'
     },
-    fixable: 'whitespace', // or "code" or "whitespace"
+    fixable: 'whitespace',
     schema: [
       {
         type: 'object',
@@ -70,7 +67,11 @@ module.exports = {
         },
         additionalProperties: false
       }
-    ]
+    ],
+    messages: {
+      missingEmptyLine:
+        'Enforce new lines between multi-line properties in Vue components.'
+    }
   },
 
   /** @param {RuleContext} context */
@@ -86,7 +87,7 @@ module.exports = {
 
     /** @type {CallExpression[]} */
     const callStack = []
-    const sourceCode = context.getSourceCode()
+    const sourceCode = context.sourceCode
     return Object.assign(
       utils.defineVueVisitor(context, {
         CallExpression(node) {
@@ -124,8 +125,7 @@ module.exports = {
                 start: pre.loc.end,
                 end: cur.loc.start
               },
-              message:
-                'Enforce new lines between multi-line properties in Vue components.',
+              messageId: 'missingEmptyLine',
               fix(fixer) {
                 /** @type {Token|null} */
                 let preToken = null
diff --git a/lib/rules/next-tick-style.js b/lib/rules/next-tick-style.js
index 992d7b0b5..08cc85a1b 100644
--- a/lib/rules/next-tick-style.js
+++ b/lib/rules/next-tick-style.js
@@ -6,16 +6,8 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
-const { findVariable } = require('eslint-utils')
-
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
+const { findVariable } = require('@eslint-community/eslint-utils')
 
 /**
  * @param {Identifier} identifier
@@ -51,7 +43,10 @@ function getVueNextTickCallExpression(identifier, context) {
     identifier.parent.type === 'CallExpression' &&
     identifier.parent.callee === identifier
   ) {
-    const variable = findVariable(context.getScope(), identifier)
+    const variable = findVariable(
+      utils.getScope(context, identifier),
+      identifier
+    )
 
     if (variable != null && variable.defs.length === 1) {
       const def = variable.defs[0]
@@ -84,10 +79,6 @@ function isAwaitedPromise(callExpression) {
   )
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'suggestion',
@@ -97,7 +88,13 @@ module.exports = {
       url: 'https://eslint.vuejs.org/rules/next-tick-style.html'
     },
     fixable: 'code',
-    schema: [{ enum: ['promise', 'callback'] }]
+    schema: [{ enum: ['promise', 'callback'] }],
+    messages: {
+      usePromise:
+        'Use the Promise returned by `nextTick` instead of passing a callback function.',
+      useCallback:
+        'Pass a callback function to `nextTick` instead of using the returned Promise.'
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
@@ -119,8 +116,7 @@ module.exports = {
           ) {
             context.report({
               node,
-              message:
-                'Pass a callback function to `nextTick` instead of using the returned Promise.'
+              messageId: 'useCallback'
             })
           }
 
@@ -133,8 +129,7 @@ module.exports = {
         ) {
           context.report({
             node,
-            message:
-              'Use the Promise returned by `nextTick` instead of passing a callback function.',
+            messageId: 'usePromise',
             fix(fixer) {
               return fixer.insertTextAfter(node, '().then')
             }
diff --git a/lib/rules/no-arrow-functions-in-watch.js b/lib/rules/no-arrow-functions-in-watch.js
index ca83a16a6..b16b267f5 100644
--- a/lib/rules/no-arrow-functions-in-watch.js
+++ b/lib/rules/no-arrow-functions-in-watch.js
@@ -10,11 +10,15 @@ module.exports = {
     type: 'problem',
     docs: {
       description: 'disallow using arrow functions to define watcher',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/no-arrow-functions-in-watch.html'
     },
     fixable: null,
-    schema: []
+    schema: [],
+    messages: {
+      noArrowFunctionsInWatch:
+        'You should not use an arrow function to define a watcher.'
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
@@ -36,8 +40,7 @@ module.exports = {
           if (handler.type === 'ArrowFunctionExpression') {
             context.report({
               node: handler,
-              message:
-                'You should not use an arrow function to define a watcher.'
+              messageId: 'noArrowFunctionsInWatch'
             })
           }
         }
diff --git a/lib/rules/no-async-in-computed-properties.js b/lib/rules/no-async-in-computed-properties.js
index a762d3f58..0cf8c639c 100644
--- a/lib/rules/no-async-in-computed-properties.js
+++ b/lib/rules/no-async-in-computed-properties.js
@@ -3,7 +3,7 @@
  * @author Armano
  */
 'use strict'
-const { ReferenceTracker } = require('eslint-utils')
+const { ReferenceTracker } = require('@eslint-community/eslint-utils')
 const utils = require('../utils')
 
 /**
@@ -38,22 +38,88 @@ function isTimedFunction(node) {
   )
 }
 
+/**
+ * @param {*} node
+ * @returns {*}
+ */
+function skipWrapper(node) {
+  while (node && node.expression) {
+    node = node.expression
+  }
+  return node
+}
+
+/**
+ * Get the root object name from a member expression chain
+ * @param {MemberExpression} memberExpr
+ * @returns {string|null}
+ */
+function getRootObjectName(memberExpr) {
+  let current = skipWrapper(memberExpr.object)
+
+  while (current) {
+    switch (current.type) {
+      case 'MemberExpression': {
+        current = skipWrapper(current.object)
+        break
+      }
+      case 'CallExpression': {
+        const calleeExpr = skipWrapper(current.callee)
+        if (calleeExpr.type === 'MemberExpression') {
+          current = skipWrapper(calleeExpr.object)
+        } else if (calleeExpr.type === 'Identifier') {
+          return calleeExpr.name
+        } else {
+          return null
+        }
+        break
+      }
+      case 'Identifier': {
+        return current.name
+      }
+      default: {
+        return null
+      }
+    }
+  }
+
+  return null
+}
+
+/**
+ * @param {string} name
+ * @param {*} callee
+ * @returns {boolean}
+ */
+function isPromiseMethod(name, callee) {
+  return (
+    // hello.PROMISE_FUNCTION()
+    PROMISE_FUNCTIONS.has(name) ||
+    // Promise.PROMISE_METHOD()
+    (callee.object.type === 'Identifier' &&
+      callee.object.name === 'Promise' &&
+      PROMISE_METHODS.has(name))
+  )
+}
+
 /**
  * @param {CallExpression} node
+ * @param {Set<string>} ignoredObjectNames
  */
-function isPromise(node) {
+function isPromise(node, ignoredObjectNames) {
   const callee = utils.skipChainExpression(node.callee)
   if (callee.type === 'MemberExpression') {
     const name = utils.getStaticPropertyName(callee)
-    return (
-      name &&
-      // hello.PROMISE_FUNCTION()
-      (PROMISE_FUNCTIONS.has(name) ||
-        // Promise.PROMISE_METHOD()
-        (callee.object.type === 'Identifier' &&
-          callee.object.name === 'Promise' &&
-          PROMISE_METHODS.has(name)))
-    )
+    if (!name || !isPromiseMethod(name, callee)) {
+      return false
+    }
+
+    const rootObjectName = getRootObjectName(callee)
+    if (rootObjectName && ignoredObjectNames.has(rootObjectName)) {
+      return false
+    }
+
+    return true
   }
   return false
 }
@@ -76,23 +142,41 @@ function isNextTick(node, context) {
   return false
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
     docs: {
       description: 'disallow asynchronous actions in computed properties',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/no-async-in-computed-properties.html'
     },
     fixable: null,
-    schema: []
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          ignoredObjectNames: {
+            type: 'array',
+            items: { type: 'string' },
+            uniqueItems: true,
+            additionalItems: false
+          }
+        },
+        additionalProperties: false
+      }
+    ],
+    messages: {
+      unexpectedInFunction:
+        'Unexpected {{expressionName}} in computed function.',
+      unexpectedInProperty:
+        'Unexpected {{expressionName}} in "{{propertyName}}" computed property.'
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
+    const options = context.options[0] || {}
+    const ignoredObjectNames = new Set(options.ignoredObjectNames || [])
+
     /** @type {Map<ObjectExpression, ComponentComputedProperty[]>} */
     const computedPropertiesMap = new Map()
     /** @type {(FunctionExpression | ArrowFunctionExpression)[]} */
@@ -155,8 +239,7 @@ module.exports = {
         ) {
           context.report({
             node,
-            message:
-              'Unexpected {{expressionName}} in "{{propertyName}}" computed property.',
+            messageId: 'unexpectedInProperty',
             data: {
               expressionName: expressionTypes[type],
               propertyName: cp.key || 'unknown'
@@ -174,7 +257,7 @@ module.exports = {
         ) {
           context.report({
             node,
-            message: 'Unexpected {{expressionName}} in computed function.',
+            messageId: 'unexpectedInFunction',
             data: {
               expressionName: expressionTypes[type]
             }
@@ -216,7 +299,7 @@ module.exports = {
         if (!scopeStack) {
           return
         }
-        if (isPromise(node)) {
+        if (isPromise(node, ignoredObjectNames)) {
           verify(
             node,
             scopeStack.body,
@@ -259,16 +342,14 @@ module.exports = {
 
     return utils.compositingVisitors(
       {
-        Program() {
-          const tracker = new ReferenceTracker(context.getScope())
-          const traceMap = utils.createCompositionApiTraceMap({
-            [ReferenceTracker.ESM]: true,
+        /** @param {Program} program */
+        Program(program) {
+          const tracker = new ReferenceTracker(utils.getScope(context, program))
+          for (const { node } of utils.iterateReferencesTraceMap(tracker, {
             computed: {
               [ReferenceTracker.CALL]: true
             }
-          })
-
-          for (const { node } of tracker.iterateEsmReferences(traceMap)) {
+          })) {
             if (node.type !== 'CallExpression') {
               continue
             }
diff --git a/lib/rules/no-bare-strings-in-template.js b/lib/rules/no-bare-strings-in-template.js
index e604b83d8..8e4acc96d 100644
--- a/lib/rules/no-bare-strings-in-template.js
+++ b/lib/rules/no-bare-strings-in-template.js
@@ -4,10 +4,6 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 const regexp = require('../utils/regexp')
 const casing = require('../utils/casing')
@@ -16,10 +12,6 @@ const casing = require('../utils/casing')
  * @typedef { { names: { [tagName in string]: Set<string> }, regexps: { name: RegExp, attrs: Set<string> }[], cache: { [tagName in string]: Set<string> } } } TargetAttrs
  */
 
-// ------------------------------------------------------------------------------
-// Constants
-// ------------------------------------------------------------------------------
-
 // https://dev.w3.org/html5/html-author/charref
 const DEFAULT_ALLOWLIST = [
   '(',
@@ -66,10 +58,6 @@ const DEFAULT_ATTRIBUTES = {
 
 const DEFAULT_DIRECTIVES = ['v-text']
 
-// --------------------------------------------------------------------------
-// Helpers
-// --------------------------------------------------------------------------
-
 /**
  * Parse attributes option
  * @param {any} options
@@ -112,10 +100,6 @@ function getStringValue(value) {
   return null
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'suggestion',
@@ -165,14 +149,33 @@ module.exports = {
      */
     const opts = context.options[0] || {}
     /** @type {string[]} */
-    const allowlist = opts.allowlist || DEFAULT_ALLOWLIST
+    const rawAllowlist = opts.allowlist || DEFAULT_ALLOWLIST
     const attributes = parseTargetAttrs(opts.attributes || DEFAULT_ATTRIBUTES)
     const directives = opts.directives || DEFAULT_DIRECTIVES
 
-    const allowlistRe = new RegExp(
-      allowlist.map((w) => regexp.escape(w)).join('|'),
-      'gu'
-    )
+    /** @type {string[]} */
+    const stringAllowlist = []
+    /** @type {RegExp[]} */
+    const regexAllowlist = []
+
+    for (const item of rawAllowlist) {
+      if (regexp.isRegExp(item)) {
+        regexAllowlist.push(regexp.toRegExp(item))
+      } else {
+        stringAllowlist.push(item)
+      }
+    }
+
+    const allowlistRe =
+      stringAllowlist.length > 0
+        ? new RegExp(
+            stringAllowlist
+              .map((w) => regexp.escape(w))
+              .sort((a, b) => b.length - a.length)
+              .join('|'),
+            'gu'
+          )
+        : null
 
     /** @type {ElementStack | null} */
     let elementStack = null
@@ -181,7 +184,21 @@ module.exports = {
      * @param {string} str
      */
     function getBareString(str) {
-      return str.trim().replace(allowlistRe, '').trim()
+      let result = str.trim()
+
+      if (allowlistRe) {
+        result = result.replace(allowlistRe, '')
+      }
+
+      for (const regex of regexAllowlist) {
+        const flags = regex.flags.includes('g')
+          ? regex.flags
+          : `${regex.flags}g`
+        const globalRegex = new RegExp(regex.source, flags)
+        result = result.replace(globalRegex, '')
+      }
+
+      return result.trim()
     }
 
     /**
diff --git a/lib/rules/no-boolean-default.js b/lib/rules/no-boolean-default.js
index 5f74377e1..2ff6a2d06 100644
--- a/lib/rules/no-boolean-default.js
+++ b/lib/rules/no-boolean-default.js
@@ -8,22 +8,27 @@ const utils = require('../utils')
 
 /**
  * @typedef {import('../utils').ComponentProp} ComponentProp
+ * @typedef {import('../utils').ComponentObjectProp} ComponentObjectProp
  */
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
+/**
+ * @param {Expression|undefined} node
+ */
+function isBooleanIdentifier(node) {
+  return Boolean(node && node.type === 'Identifier' && node.name === 'Boolean')
+}
 
 /**
- * @param {Property | SpreadElement} prop
+ * Detects whether given prop node is a Boolean
+ * @param {ComponentObjectProp} prop
+ * @return {Boolean}
  */
 function isBooleanProp(prop) {
+  const value = utils.skipTSAsExpression(prop.value)
   return (
-    prop.type === 'Property' &&
-    prop.key.type === 'Identifier' &&
-    prop.key.name === 'type' &&
-    prop.value.type === 'Identifier' &&
-    prop.value.name === 'Boolean'
+    isBooleanIdentifier(value) ||
+    (value.type === 'ObjectExpression' &&
+      isBooleanIdentifier(utils.findProperty(value, 'type')?.value))
   )
 }
 
@@ -42,52 +47,57 @@ module.exports = {
       categories: undefined,
       url: 'https://eslint.vuejs.org/rules/no-boolean-default.html'
     },
-    fixable: 'code',
+    fixable: null,
     schema: [
       {
         enum: ['default-false', 'no-default']
       }
-    ]
+    ],
+    messages: {
+      noBooleanDefault:
+        'Boolean prop should not set a default (Vue defaults it to false).',
+      defaultFalse: 'Boolean prop should only be defaulted to false.'
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
     const booleanType = context.options[0] || 'no-default'
     /**
      * @param {ComponentProp} prop
-     * @param { { [key: string]: Expression | undefined } } [withDefaultsExpressions]
+     * @param {(propName: string) => Expression[]} otherDefaultProvider
      */
-    function processProp(prop, withDefaultsExpressions) {
+    function processProp(prop, otherDefaultProvider) {
       if (prop.type === 'object') {
-        if (prop.value.type !== 'ObjectExpression') {
+        if (!isBooleanProp(prop)) {
           return
         }
-        if (!prop.value.properties.some(isBooleanProp)) {
-          return
+        if (prop.value.type === 'ObjectExpression') {
+          const defaultNode = getDefaultNode(prop.value)
+          if (defaultNode) {
+            verifyDefaultExpression(defaultNode.value)
+          }
         }
-        const defaultNode = getDefaultNode(prop.value)
-        if (!defaultNode) {
-          return
+        if (prop.propName != null) {
+          for (const defaultNode of otherDefaultProvider(prop.propName)) {
+            verifyDefaultExpression(defaultNode)
+          }
         }
-        verifyDefaultExpression(defaultNode.value)
       } else if (prop.type === 'type') {
         if (prop.types.length !== 1 || prop.types[0] !== 'Boolean') {
           return
         }
-        const defaultNode =
-          withDefaultsExpressions && withDefaultsExpressions[prop.propName]
-        if (!defaultNode) {
-          return
+        for (const defaultNode of otherDefaultProvider(prop.propName)) {
+          verifyDefaultExpression(defaultNode)
         }
-        verifyDefaultExpression(defaultNode)
       }
     }
     /**
      * @param {ComponentProp[]} props
-     * @param { { [key: string]: Expression | undefined } } [withDefaultsExpressions]
+     * @param {(propName: string) => Expression[]} otherDefaultProvider
      */
-    function processProps(props, withDefaultsExpressions) {
+    function processProps(props, otherDefaultProvider) {
       for (const prop of props) {
-        processProp(prop, withDefaultsExpressions)
+        processProp(prop, otherDefaultProvider)
       }
     }
 
@@ -96,31 +106,41 @@ module.exports = {
      */
     function verifyDefaultExpression(defaultNode) {
       switch (booleanType) {
-        case 'no-default':
+        case 'no-default': {
           context.report({
             node: defaultNode,
-            message:
-              'Boolean prop should not set a default (Vue defaults it to false).'
+            messageId: 'noBooleanDefault'
           })
           break
+        }
 
-        case 'default-false':
+        case 'default-false': {
           if (defaultNode.type !== 'Literal' || defaultNode.value !== false) {
             context.report({
               node: defaultNode,
-              message: 'Boolean prop should only be defaulted to false.'
+              messageId: 'defaultFalse'
             })
           }
           break
+        }
       }
     }
     return utils.compositingVisitors(
       utils.executeOnVueComponent(context, (obj) => {
-        processProps(utils.getComponentPropsFromOptions(obj))
+        processProps(utils.getComponentPropsFromOptions(obj), () => [])
       }),
       utils.defineScriptSetupVisitor(context, {
         onDefinePropsEnter(node, props) {
-          processProps(props, utils.getWithDefaultsPropExpressions(node))
+          const defaultsByWithDefaults =
+            utils.getWithDefaultsPropExpressions(node)
+          const defaultsByAssignmentPatterns =
+            utils.getDefaultPropExpressionsForPropsDestructure(node)
+          processProps(props, (propName) =>
+            [
+              defaultsByWithDefaults[propName],
+              defaultsByAssignmentPatterns[propName]?.expression
+            ].filter(utils.isDef)
+          )
         }
       })
     )
diff --git a/lib/rules/no-child-content.js b/lib/rules/no-child-content.js
index 1eb7fbdfe..cbf4c2854 100644
--- a/lib/rules/no-child-content.js
+++ b/lib/rules/no-child-content.js
@@ -68,21 +68,17 @@ function getLocationRange(nodes) {
   return { start, end }
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
-    hasSuggestions: true,
     type: 'problem',
     docs: {
       description:
         "disallow element's child contents which would be overwritten by a directive like `v-html` or `v-text`",
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/no-child-content.html'
     },
     fixable: null,
+    hasSuggestions: true,
     schema: [
       {
         type: 'object',
@@ -99,7 +95,12 @@ module.exports = {
         },
         required: ['additionalDirectives']
       }
-    ]
+    ],
+    messages: {
+      disallowedChildContent:
+        'Child content is disallowed because it will be overwritten by the v-{{ directiveName }} directive.',
+      removeChildContent: 'Remove child content.'
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
@@ -122,8 +123,8 @@ module.exports = {
         if (elementNode.endTag === null) {
           return
         }
-
-        const tokenStore = context.parserServices.getTemplateBodyTokenStore()
+        const sourceCode = context.sourceCode
+        const tokenStore = sourceCode.parserServices.getTemplateBodyTokenStore()
         const elementComments = tokenStore.getTokensBetween(
           elementNode.startTag,
           elementNode.endTag,
@@ -142,12 +143,11 @@ module.exports = {
           context.report({
             node: elementNode,
             loc: getLocationRange(childNodes),
-            message:
-              'Child content is disallowed because it will be overwritten by the v-{{ directiveName }} directive.',
+            messageId: 'disallowedChildContent',
             data: { directiveName },
             suggest: [
               {
-                desc: 'Remove child content.',
+                messageId: 'removeChildContent',
                 *fix(fixer) {
                   for (const childNode of childNodes) {
                     yield fixer.remove(childNode)
diff --git a/lib/rules/no-computed-properties-in-data.js b/lib/rules/no-computed-properties-in-data.js
index 3e1490db4..472d45f4d 100644
--- a/lib/rules/no-computed-properties-in-data.js
+++ b/lib/rules/no-computed-properties-in-data.js
@@ -4,26 +4,18 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
 /**
  * @typedef {import('../utils').VueObjectData} VueObjectData
  */
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
     docs: {
-      description: 'disallow accessing computed properties in `data`.',
-      categories: ['vue3-essential', 'essential'],
+      description: 'disallow accessing computed properties in `data`',
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/no-computed-properties-in-data.html'
     },
     fixable: null,
diff --git a/lib/rules/no-console.js b/lib/rules/no-console.js
new file mode 100644
index 000000000..caabebc4d
--- /dev/null
+++ b/lib/rules/no-console.js
@@ -0,0 +1,45 @@
+/**
+ * @author ItMaga <https://github.com/ItMaga>
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = utils.wrapCoreRule('no-console', {
+  skipBaseHandlers: true,
+  create(context) {
+    const options = context.options[0] || {}
+    const allowed = options.allow || []
+
+    /**
+     * Copied from the core rule `no-console`.
+     * Checks whether the property name of the given MemberExpression node
+     * is allowed by options or not.
+     * @param {MemberExpression} node The MemberExpression node to check.
+     * @returns {boolean} `true` if the property name of the node is allowed.
+     */
+    function isAllowed(node) {
+      const propertyName = utils.getStaticPropertyName(node)
+
+      return propertyName && allowed.includes(propertyName)
+    }
+
+    return {
+      MemberExpression(node) {
+        if (
+          node.object.type === 'Identifier' &&
+          node.object.name === 'console' &&
+          !isAllowed(node)
+        ) {
+          context.report({
+            node: node.object,
+            loc: node.object.loc,
+            messageId: 'unexpected'
+          })
+        }
+      }
+    }
+  }
+})
diff --git a/lib/rules/no-constant-condition.js b/lib/rules/no-constant-condition.js
index a6b62431b..fc7e83946 100644
--- a/lib/rules/no-constant-condition.js
+++ b/lib/rules/no-constant-condition.js
@@ -7,18 +7,18 @@ const { wrapCoreRule } = require('../utils')
 
 const conditionalDirectiveNames = new Set(['v-show', 'v-if', 'v-else-if'])
 
-// eslint-disable-next-line no-invalid-meta, no-invalid-meta-docs-categories
+// eslint-disable-next-line internal/no-invalid-meta
 module.exports = wrapCoreRule('no-constant-condition', {
-  create(_context, { coreHandlers }) {
+  create(_context, { baseHandlers }) {
     return {
       VDirectiveKey(node) {
         if (
           conditionalDirectiveNames.has(`v-${node.name.name}`) &&
           node.parent.value &&
           node.parent.value.expression &&
-          coreHandlers.IfStatement
+          baseHandlers.IfStatement
         ) {
-          coreHandlers.IfStatement({
+          baseHandlers.IfStatement({
             // @ts-expect-error -- Process expression of VExpressionContainer as IfStatement.
             test: node.parent.value.expression
           })
diff --git a/lib/rules/no-custom-modifiers-on-v-model.js b/lib/rules/no-custom-modifiers-on-v-model.js
index 6670be1da..cef3dfaef 100644
--- a/lib/rules/no-custom-modifiers-on-v-model.js
+++ b/lib/rules/no-custom-modifiers-on-v-model.js
@@ -4,28 +4,16 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 const VALID_MODIFIERS = new Set(['lazy', 'number', 'trim'])
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
     docs: {
       description: 'disallow custom modifiers on v-model used on the component',
-      categories: ['essential'],
+      categories: ['vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/no-custom-modifiers-on-v-model.html'
     },
     fixable: null,
diff --git a/lib/rules/no-deprecated-data-object-declaration.js b/lib/rules/no-deprecated-data-object-declaration.js
index 017e46ec4..b918027b5 100644
--- a/lib/rules/no-deprecated-data-object-declaration.js
+++ b/lib/rules/no-deprecated-data-object-declaration.js
@@ -4,10 +4,6 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
 /** @param {Token} token */
@@ -41,10 +37,6 @@ function getFirstAndLastTokens(node, sourceCode) {
   }
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
@@ -63,7 +55,7 @@ module.exports = {
   },
   /** @param {RuleContext} context */
   create(context) {
-    const sourceCode = context.getSourceCode()
+    const sourceCode = context.sourceCode
 
     return utils.executeOnVue(context, (obj) => {
       const invalidData = utils.findProperty(
diff --git a/lib/rules/no-deprecated-delete-set.js b/lib/rules/no-deprecated-delete-set.js
new file mode 100644
index 000000000..699c928e1
--- /dev/null
+++ b/lib/rules/no-deprecated-delete-set.js
@@ -0,0 +1,132 @@
+/**
+ * @author Wayne Zhang
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+const { ReferenceTracker } = require('@eslint-community/eslint-utils')
+
+/**
+ * @typedef {import('@eslint-community/eslint-utils').TYPES.TraceMap} TraceMap
+ */
+
+/** @type {TraceMap} */
+const deletedImportApisMap = {
+  set: {
+    [ReferenceTracker.CALL]: true
+  },
+  del: {
+    [ReferenceTracker.CALL]: true
+  }
+}
+const deprecatedApis = new Set(['set', 'delete'])
+const deprecatedDollarApis = new Set(['$set', '$delete'])
+
+/**
+ * @param {Expression|Super} node
+ */
+function isVue(node) {
+  return node.type === 'Identifier' && node.name === 'Vue'
+}
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'disallow using deprecated `$delete` and `$set` (in Vue.js 3.0.0+)',
+      categories: ['vue3-essential'],
+      url: 'https://eslint.vuejs.org/rules/no-deprecated-delete-set.html'
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      deprecated: 'The `$delete`, `$set` is deprecated.'
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    /**
+     * @param {Identifier} identifier
+     * @param {RuleContext} context
+     * @returns {CallExpression|undefined}
+     */
+    function getVueDeprecatedCallExpression(identifier, context) {
+      // Instance API: this.$set()
+      if (
+        deprecatedDollarApis.has(identifier.name) &&
+        identifier.parent.type === 'MemberExpression' &&
+        utils.isThis(identifier.parent.object, context) &&
+        identifier.parent.parent.type === 'CallExpression' &&
+        identifier.parent.parent.callee === identifier.parent
+      ) {
+        return identifier.parent.parent
+      }
+
+      // Vue 2 Global API: Vue.set()
+      if (
+        deprecatedApis.has(identifier.name) &&
+        identifier.parent.type === 'MemberExpression' &&
+        isVue(identifier.parent.object) &&
+        identifier.parent.parent.type === 'CallExpression' &&
+        identifier.parent.parent.callee === identifier.parent
+      ) {
+        return identifier.parent.parent
+      }
+
+      return undefined
+    }
+
+    const nodeVisitor = {
+      /** @param {Identifier} node */
+      Identifier(node) {
+        const callExpression = getVueDeprecatedCallExpression(node, context)
+        if (!callExpression) {
+          return
+        }
+
+        context.report({
+          node,
+          messageId: 'deprecated'
+        })
+      }
+    }
+
+    return utils.compositingVisitors(
+      utils.defineVueVisitor(context, nodeVisitor),
+      utils.defineScriptSetupVisitor(context, nodeVisitor),
+      {
+        /** @param {Program} node */
+        Program(node) {
+          const tracker = new ReferenceTracker(utils.getScope(context, node))
+
+          // import { set } from 'vue'; set()
+          const esmTraceMap = {
+            vue: {
+              [ReferenceTracker.ESM]: true,
+              ...deletedImportApisMap
+            }
+          }
+          // const { set } = require('vue'); set()
+          const cjsTraceMap = {
+            vue: {
+              ...deletedImportApisMap
+            }
+          }
+
+          for (const { node } of [
+            ...tracker.iterateEsmReferences(esmTraceMap),
+            ...tracker.iterateCjsReferences(cjsTraceMap)
+          ]) {
+            const refNode = /** @type {CallExpression} */ (node)
+            context.report({
+              node: refNode.callee,
+              messageId: 'deprecated'
+            })
+          }
+        }
+      }
+    )
+  }
+}
diff --git a/lib/rules/no-deprecated-destroyed-lifecycle.js b/lib/rules/no-deprecated-destroyed-lifecycle.js
index 0dc30883f..98986cd2e 100644
--- a/lib/rules/no-deprecated-destroyed-lifecycle.js
+++ b/lib/rules/no-deprecated-destroyed-lifecycle.js
@@ -4,16 +4,8 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 /**
  * @param {RuleFixer} fixer
  * @param {Property} property
diff --git a/lib/rules/no-deprecated-dollar-listeners-api.js b/lib/rules/no-deprecated-dollar-listeners-api.js
index 64c175be8..2db80a116 100644
--- a/lib/rules/no-deprecated-dollar-listeners-api.js
+++ b/lib/rules/no-deprecated-dollar-listeners-api.js
@@ -4,16 +4,8 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
diff --git a/lib/rules/no-deprecated-dollar-scopedslots-api.js b/lib/rules/no-deprecated-dollar-scopedslots-api.js
index eaa9b3328..cca25942c 100644
--- a/lib/rules/no-deprecated-dollar-scopedslots-api.js
+++ b/lib/rules/no-deprecated-dollar-scopedslots-api.js
@@ -4,16 +4,8 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
diff --git a/lib/rules/no-deprecated-events-api.js b/lib/rules/no-deprecated-events-api.js
index f393f59ef..fa602f335 100644
--- a/lib/rules/no-deprecated-events-api.js
+++ b/lib/rules/no-deprecated-events-api.js
@@ -4,16 +4,8 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
diff --git a/lib/rules/no-deprecated-filter.js b/lib/rules/no-deprecated-filter.js
index 87b61a5b3..5e7967385 100644
--- a/lib/rules/no-deprecated-filter.js
+++ b/lib/rules/no-deprecated-filter.js
@@ -4,16 +4,8 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
diff --git a/lib/rules/no-deprecated-functional-template.js b/lib/rules/no-deprecated-functional-template.js
index 7624ddc51..5b3b9dea1 100644
--- a/lib/rules/no-deprecated-functional-template.js
+++ b/lib/rules/no-deprecated-functional-template.js
@@ -4,16 +4,8 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
diff --git a/lib/rules/no-deprecated-html-element-is.js b/lib/rules/no-deprecated-html-element-is.js
index 8382bb5c0..5253ef2b7 100644
--- a/lib/rules/no-deprecated-html-element-is.js
+++ b/lib/rules/no-deprecated-html-element-is.js
@@ -4,16 +4,8 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
@@ -35,7 +27,8 @@ module.exports = {
     function isValidElement(node) {
       return (
         !utils.isHtmlWellKnownElementName(node.rawName) &&
-        !utils.isSvgWellKnownElementName(node.rawName)
+        !utils.isSvgWellKnownElementName(node.rawName) &&
+        !utils.isMathWellKnownElementName(node.rawName)
       )
     }
     return utils.defineTemplateBodyVisitor(context, {
diff --git a/lib/rules/no-deprecated-inline-template.js b/lib/rules/no-deprecated-inline-template.js
index 647121638..36923f2c2 100644
--- a/lib/rules/no-deprecated-inline-template.js
+++ b/lib/rules/no-deprecated-inline-template.js
@@ -4,16 +4,8 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
diff --git a/lib/rules/no-deprecated-model-definition.js b/lib/rules/no-deprecated-model-definition.js
new file mode 100644
index 000000000..6c7e4dd8d
--- /dev/null
+++ b/lib/rules/no-deprecated-model-definition.js
@@ -0,0 +1,133 @@
+/**
+ * @author Flo Edelmann
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+const allowedPropNames = new Set(['modelValue', 'model-value'])
+const allowedEventNames = new Set(['update:modelValue', 'update:model-value'])
+
+/**
+ * @param {ObjectExpression} node
+ * @param {string} key
+ * @returns {Literal | TemplateLiteral | undefined}
+ */
+function findPropertyValue(node, key) {
+  const property = node.properties.find(
+    (property) =>
+      property.type === 'Property' &&
+      property.key.type === 'Identifier' &&
+      property.key.name === key
+  )
+  if (
+    !property ||
+    property.type !== 'Property' ||
+    !utils.isStringLiteral(property.value)
+  ) {
+    return undefined
+  }
+  return property.value
+}
+
+/**
+ * @param {RuleFixer} fixer
+ * @param {Literal | TemplateLiteral} node
+ * @param {string} text
+ */
+function replaceLiteral(fixer, node, text) {
+  return fixer.replaceTextRange([node.range[0] + 1, node.range[1] - 1], text)
+}
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'disallow deprecated `model` definition (in Vue.js 3.0.0+)',
+      categories: ['vue3-essential'],
+      url: 'https://eslint.vuejs.org/rules/no-deprecated-model-definition.html'
+    },
+    fixable: null,
+    hasSuggestions: true,
+    schema: [
+      {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+          allowVue3Compat: {
+            type: 'boolean'
+          }
+        }
+      }
+    ],
+    messages: {
+      deprecatedModel: '`model` definition is deprecated.',
+      vue3Compat:
+        '`model` definition is deprecated. You may use the Vue 3-compatible `modelValue`/`update:modelValue` though.',
+      changeToModelValue: 'Change to `modelValue`/`update:modelValue`.',
+      changeToKebabModelValue: 'Change to `model-value`/`update:model-value`.'
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    const allowVue3Compat = Boolean(context.options[0]?.allowVue3Compat)
+
+    return utils.executeOnVue(context, (obj) => {
+      const modelProperty = utils.findProperty(obj, 'model')
+      if (!modelProperty || modelProperty.value.type !== 'ObjectExpression') {
+        return
+      }
+
+      if (!allowVue3Compat) {
+        context.report({
+          node: modelProperty,
+          messageId: 'deprecatedModel'
+        })
+        return
+      }
+
+      const propName = findPropertyValue(modelProperty.value, 'prop')
+      const eventName = findPropertyValue(modelProperty.value, 'event')
+
+      if (
+        !propName ||
+        !eventName ||
+        !allowedPropNames.has(
+          utils.getStringLiteralValue(propName, true) ?? ''
+        ) ||
+        !allowedEventNames.has(
+          utils.getStringLiteralValue(eventName, true) ?? ''
+        )
+      ) {
+        context.report({
+          node: modelProperty,
+          messageId: 'vue3Compat',
+          suggest:
+            propName && eventName
+              ? [
+                  {
+                    messageId: 'changeToModelValue',
+                    *fix(fixer) {
+                      const newPropName = 'modelValue'
+                      const newEventName = 'update:modelValue'
+                      yield replaceLiteral(fixer, propName, newPropName)
+                      yield replaceLiteral(fixer, eventName, newEventName)
+                    }
+                  },
+                  {
+                    messageId: 'changeToKebabModelValue',
+                    *fix(fixer) {
+                      const newPropName = 'model-value'
+                      const newEventName = 'update:model-value'
+                      yield replaceLiteral(fixer, propName, newPropName)
+                      yield replaceLiteral(fixer, eventName, newEventName)
+                    }
+                  }
+                ]
+              : []
+        })
+      }
+    })
+  }
+}
diff --git a/lib/rules/no-deprecated-props-default-this.js b/lib/rules/no-deprecated-props-default-this.js
index 6e26941ed..5583b12ad 100644
--- a/lib/rules/no-deprecated-props-default-this.js
+++ b/lib/rules/no-deprecated-props-default-this.js
@@ -4,16 +4,8 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 /**
  * @param {Expression|SpreadElement|null} node
  */
diff --git a/lib/rules/no-deprecated-router-link-tag-prop.js b/lib/rules/no-deprecated-router-link-tag-prop.js
index cab2d7ca3..e2853f2af 100644
--- a/lib/rules/no-deprecated-router-link-tag-prop.js
+++ b/lib/rules/no-deprecated-router-link-tag-prop.js
@@ -4,17 +4,9 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 const casing = require('../utils/casing')
 
-// --------------------------------------------------------------------------
-// Helpers
-// --------------------------------------------------------------------------
-
 /** @param {RuleContext} context */
 function getComponentNames(context) {
   let components = ['RouterLink']
@@ -31,10 +23,6 @@ function getComponentNames(context) {
   )
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
@@ -57,7 +45,8 @@ module.exports = {
             uniqueItems: true,
             minItems: 1
           }
-        }
+        },
+        additionalProperties: false
       }
     ],
     messages: {
diff --git a/lib/rules/no-deprecated-scope-attribute.js b/lib/rules/no-deprecated-scope-attribute.js
index dcb5d6270..80bcc02bd 100644
--- a/lib/rules/no-deprecated-scope-attribute.js
+++ b/lib/rules/no-deprecated-scope-attribute.js
@@ -15,6 +15,7 @@ module.exports = {
       categories: ['vue3-essential'],
       url: 'https://eslint.vuejs.org/rules/no-deprecated-scope-attribute.html'
     },
+    // eslint-disable-next-line eslint-plugin/require-meta-fixable -- fixer is not recognized
     fixable: 'code',
     schema: [],
     messages: {
diff --git a/lib/rules/no-deprecated-slot-attribute.js b/lib/rules/no-deprecated-slot-attribute.js
index 6459cdff4..44f3b68c1 100644
--- a/lib/rules/no-deprecated-slot-attribute.js
+++ b/lib/rules/no-deprecated-slot-attribute.js
@@ -15,8 +15,26 @@ module.exports = {
       categories: ['vue3-essential'],
       url: 'https://eslint.vuejs.org/rules/no-deprecated-slot-attribute.html'
     },
+    // eslint-disable-next-line eslint-plugin/require-meta-fixable -- fixer is not recognized
     fixable: 'code',
-    schema: [],
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          ignore: {
+            type: 'array',
+            items: { type: 'string' },
+            uniqueItems: true
+          },
+          ignoreParents: {
+            type: 'array',
+            items: { type: 'string' },
+            uniqueItems: true
+          }
+        },
+        additionalProperties: false
+      }
+    ],
     messages: {
       forbiddenSlotAttribute: '`slot` attributes are deprecated.'
     }
diff --git a/lib/rules/no-deprecated-slot-scope-attribute.js b/lib/rules/no-deprecated-slot-scope-attribute.js
index c3a08b8e0..20a4f00bd 100644
--- a/lib/rules/no-deprecated-slot-scope-attribute.js
+++ b/lib/rules/no-deprecated-slot-scope-attribute.js
@@ -16,6 +16,7 @@ module.exports = {
       categories: ['vue3-essential'],
       url: 'https://eslint.vuejs.org/rules/no-deprecated-slot-scope-attribute.html'
     },
+    // eslint-disable-next-line eslint-plugin/require-meta-fixable -- fixer is not recognized
     fixable: 'code',
     schema: [],
     messages: {
diff --git a/lib/rules/no-deprecated-v-bind-sync.js b/lib/rules/no-deprecated-v-bind-sync.js
index 786ecb927..5e6202e80 100644
--- a/lib/rules/no-deprecated-v-bind-sync.js
+++ b/lib/rules/no-deprecated-v-bind-sync.js
@@ -4,16 +4,8 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
@@ -49,9 +41,7 @@ module.exports = {
                 return null
               }
 
-              const bindArgument = context
-                .getSourceCode()
-                .getText(node.key.argument)
+              const bindArgument = context.sourceCode.getText(node.key.argument)
               return fixer.replaceText(node.key, `v-model:${bindArgument}`)
             }
           })
diff --git a/lib/rules/no-deprecated-v-is.js b/lib/rules/no-deprecated-v-is.js
index 7e8d3278c..c497b0120 100644
--- a/lib/rules/no-deprecated-v-is.js
+++ b/lib/rules/no-deprecated-v-is.js
@@ -15,7 +15,7 @@ module.exports = {
       categories: ['vue3-essential'],
       url: 'https://eslint.vuejs.org/rules/no-deprecated-v-is.html'
     },
-    fixable: 'code',
+    fixable: null,
     schema: [],
     messages: {
       forbiddenVIs: '`v-is` directive is deprecated.'
diff --git a/lib/rules/no-deprecated-v-on-native-modifier.js b/lib/rules/no-deprecated-v-on-native-modifier.js
index a37875d6d..929f8d1d8 100644
--- a/lib/rules/no-deprecated-v-on-native-modifier.js
+++ b/lib/rules/no-deprecated-v-on-native-modifier.js
@@ -4,16 +4,8 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
diff --git a/lib/rules/no-deprecated-v-on-number-modifiers.js b/lib/rules/no-deprecated-v-on-number-modifiers.js
index 08187e476..1fdcdeaac 100644
--- a/lib/rules/no-deprecated-v-on-number-modifiers.js
+++ b/lib/rules/no-deprecated-v-on-number-modifiers.js
@@ -4,17 +4,9 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 const keyCodeToKey = require('../utils/keycode-to-key')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
diff --git a/lib/rules/no-deprecated-vue-config-keycodes.js b/lib/rules/no-deprecated-vue-config-keycodes.js
index c251e9548..68af8430a 100644
--- a/lib/rules/no-deprecated-vue-config-keycodes.js
+++ b/lib/rules/no-deprecated-vue-config-keycodes.js
@@ -6,10 +6,6 @@
 
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
diff --git a/lib/rules/no-dupe-keys.js b/lib/rules/no-dupe-keys.js
index 8d28b8952..ecfa787cf 100644
--- a/lib/rules/no-dupe-keys.js
+++ b/lib/rules/no-dupe-keys.js
@@ -4,27 +4,96 @@
  */
 'use strict'
 
+const { findVariable } = require('@eslint-community/eslint-utils')
 const utils = require('../utils')
 
 /**
  * @typedef {import('../utils').GroupName} GroupName
+ * @typedef {import('eslint').Scope.Variable} Variable
+ * @typedef {import('../utils').ComponentProp} ComponentProp
  */
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
 /** @type {GroupName[]} */
 const GROUP_NAMES = ['props', 'computed', 'data', 'methods', 'setup']
 
+/**
+ * Gets the props pattern node from given `defineProps()` node
+ * @param {CallExpression} node
+ * @returns {Pattern|null}
+ */
+function getPropsPattern(node) {
+  let target = node
+  if (
+    target.parent &&
+    target.parent.type === 'CallExpression' &&
+    target.parent.arguments[0] === target &&
+    target.parent.callee.type === 'Identifier' &&
+    target.parent.callee.name === 'withDefaults'
+  ) {
+    target = target.parent
+  }
+
+  if (
+    !target.parent ||
+    target.parent.type !== 'VariableDeclarator' ||
+    target.parent.init !== target
+  ) {
+    return null
+  }
+  return target.parent.id
+}
+
+/**
+ * Checks whether the initialization of the given variable declarator node contains one of the references.
+ * @param {VariableDeclarator} node
+ * @param {ESNode[]} references
+ */
+function isInsideInitializer(node, references) {
+  const init = node.init
+  if (!init) {
+    return false
+  }
+  return references.some(
+    (id) => init.range[0] <= id.range[0] && id.range[1] <= init.range[1]
+  )
+}
+
+/**
+ * Collects all renamed props from a pattern
+ * @param {Pattern | null} pattern - The destructuring pattern
+ * @returns {Set<string>} - Set of prop names that have been renamed
+ */
+function collectRenamedProps(pattern) {
+  const renamedProps = new Set()
+
+  if (!pattern || pattern.type !== 'ObjectPattern') {
+    return renamedProps
+  }
+
+  for (const prop of pattern.properties) {
+    if (prop.type !== 'Property') continue
+
+    if (
+      prop.key.type === 'Identifier' &&
+      prop.value.type === 'Identifier' &&
+      prop.key.name !== prop.value.name
+    ) {
+      renamedProps.add(prop.key.name)
+    }
+  }
+
+  return renamedProps
+}
+
 module.exports = {
   meta: {
     type: 'problem',
     docs: {
       description: 'disallow duplication of field names',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/no-dupe-keys.html'
     },
-    fixable: null, // or "code" or "whitespace"
+    fixable: null,
     schema: [
       {
         type: 'object',
@@ -35,35 +104,105 @@ module.exports = {
         },
         additionalProperties: false
       }
-    ]
+    ],
+    messages: {
+      duplicateKey:
+        "Duplicate key '{{name}}'. May cause name collision in script or template tag."
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
     const options = context.options[0] || {}
     const groups = new Set([...GROUP_NAMES, ...(options.groups || [])])
 
-    // ----------------------------------------------------------------------
-    // Public
-    // ----------------------------------------------------------------------
-
-    return utils.executeOnVue(context, (obj) => {
-      /** @type {Set<string>} */
-      const usedNames = new Set()
-      const properties = utils.iterateProperties(obj, groups)
-
-      for (const o of properties) {
-        if (usedNames.has(o.name)) {
-          context.report({
-            node: o.node,
-            message: "Duplicated key '{{name}}'.",
-            data: {
-              name: o.name
+    return utils.compositingVisitors(
+      utils.executeOnVue(context, (obj) => {
+        const properties = utils.iterateProperties(obj, groups)
+        /** @type {Set<string>} */
+        const usedNames = new Set()
+        for (const o of properties) {
+          if (usedNames.has(o.name)) {
+            context.report({
+              node: o.node,
+              messageId: 'duplicateKey',
+              data: {
+                name: o.name
+              }
+            })
+          }
+
+          usedNames.add(o.name)
+        }
+      }),
+      utils.defineScriptSetupVisitor(context, {
+        onDefinePropsEnter(node, props) {
+          const propsNode = getPropsPattern(node)
+          const propReferences = [
+            ...(propsNode ? extractReferences(propsNode) : []),
+            node
+          ]
+
+          const renamedProps = collectRenamedProps(propsNode)
+
+          for (const prop of props) {
+            if (!prop.propName) continue
+
+            if (renamedProps.has(prop.propName)) {
+              continue
             }
-          })
+
+            const variable = findVariable(
+              utils.getScope(context, node),
+              prop.propName
+            )
+            if (!variable || variable.defs.length === 0) continue
+
+            if (
+              variable.defs.some((def) => {
+                if (def.type !== 'Variable') return false
+                return isInsideInitializer(def.node, propReferences)
+              })
+            ) {
+              continue
+            }
+
+            context.report({
+              node: variable.defs[0].node,
+              messageId: 'duplicateKey',
+              data: {
+                name: prop.propName
+              }
+            })
+          }
         }
+      })
+    )
 
-        usedNames.add(o.name)
+    /**
+     * Extracts references from the given node.
+     * @param {Pattern} node
+     * @returns {Identifier[]} References
+     */
+    function extractReferences(node) {
+      if (node.type === 'Identifier') {
+        const variable = findVariable(utils.getScope(context, node), node)
+        if (!variable) {
+          return []
+        }
+        return variable.references.map((ref) => ref.identifier)
+      }
+      if (node.type === 'ObjectPattern') {
+        return node.properties.flatMap((prop) =>
+          extractReferences(prop.type === 'Property' ? prop.value : prop)
+        )
+      }
+      if (node.type === 'AssignmentPattern') {
+        return extractReferences(node.left)
+      }
+      if (node.type === 'RestElement') {
+        return extractReferences(node.argument)
       }
-    })
+      return []
+    }
   }
 }
diff --git a/lib/rules/no-dupe-v-else-if.js b/lib/rules/no-dupe-v-else-if.js
index 1500d7d24..bfc3d9fcf 100644
--- a/lib/rules/no-dupe-v-else-if.js
+++ b/lib/rules/no-dupe-v-else-if.js
@@ -4,16 +4,8 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 /**
  * @typedef {NonNullable<VExpressionContainer['expression']>} VExpression
  */
@@ -73,17 +65,13 @@ function buildOrOperands(node) {
   }
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
     docs: {
       description:
         'disallow duplicate conditions in `v-if` / `v-else-if` chains',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/no-dupe-v-else-if.html'
     },
     fixable: null,
@@ -95,9 +83,10 @@ module.exports = {
   },
   /** @param {RuleContext} context */
   create(context) {
+    const sourceCode = context.sourceCode
     const tokenStore =
-      context.parserServices.getTemplateBodyTokenStore &&
-      context.parserServices.getTemplateBodyTokenStore()
+      sourceCode.parserServices.getTemplateBodyTokenStore &&
+      sourceCode.parserServices.getTemplateBodyTokenStore()
     /**
      * Determines whether the two given nodes are considered to be equal. In particular, given that the nodes
      * represent expressions in a boolean context, `||` and `&&` can be considered as commutative operators.
diff --git a/lib/rules/no-duplicate-attr-inheritance.js b/lib/rules/no-duplicate-attr-inheritance.js
index 08426c352..31aef7e44 100644
--- a/lib/rules/no-duplicate-attr-inheritance.js
+++ b/lib/rules/no-duplicate-attr-inheritance.js
@@ -6,9 +6,32 @@
 
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
+/** @param {VElement[]} elements */
+function isConditionalGroup(elements) {
+  if (elements.length < 2) {
+    return false
+  }
+
+  const firstElement = elements[0]
+  const lastElement = elements[elements.length - 1]
+  const inBetweenElements = elements.slice(1, -1)
+
+  return (
+    utils.hasDirective(firstElement, 'if') &&
+    (utils.hasDirective(lastElement, 'else-if') ||
+      utils.hasDirective(lastElement, 'else')) &&
+    inBetweenElements.every((element) => utils.hasDirective(element, 'else-if'))
+  )
+}
+
+/** @param {VElement[]} elements */
+function isMultiRootNodes(elements) {
+  if (elements.length > 1 && !isConditionalGroup(elements)) {
+    return true
+  }
+
+  return false
+}
 
 module.exports = {
   meta: {
@@ -17,25 +40,51 @@ module.exports = {
       description:
         'enforce `inheritAttrs` to be set to `false` when using `v-bind="$attrs"`',
       categories: undefined,
-      recommended: false,
       url: 'https://eslint.vuejs.org/rules/no-duplicate-attr-inheritance.html'
     },
     fixable: null,
     schema: [
-      // fill in your schema
-    ]
+      {
+        type: 'object',
+        properties: {
+          checkMultiRootNodes: {
+            type: 'boolean'
+          }
+        },
+        additionalProperties: false
+      }
+    ],
+    messages: {
+      noDuplicateAttrInheritance: 'Set "inheritAttrs" to false.'
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
-    /** @type {string | number | boolean | RegExp | BigInt | null} */
+    const options = context.options[0] || {}
+    const checkMultiRootNodes = options.checkMultiRootNodes === true
+
+    /** @type {Literal['value']} */
     let inheritsAttrs = true
+    /** @type {VReference[]} */
+    const attrsRefs = []
 
-    return Object.assign(
-      utils.executeOnVue(context, (node) => {
-        const inheritAttrsProp = utils.findProperty(node, 'inheritAttrs')
+    /** @param {ObjectExpression} node */
+    function processOptions(node) {
+      const inheritAttrsProp = utils.findProperty(node, 'inheritAttrs')
 
-        if (inheritAttrsProp && inheritAttrsProp.value.type === 'Literal') {
-          inheritsAttrs = inheritAttrsProp.value.value
+      if (inheritAttrsProp && inheritAttrsProp.value.type === 'Literal') {
+        inheritsAttrs = inheritAttrsProp.value.value
+      }
+    }
+
+    return utils.compositingVisitors(
+      utils.executeOnVue(context, processOptions),
+      utils.defineScriptSetupVisitor(context, {
+        onDefineOptionsEnter(node) {
+          if (node.arguments.length === 0) return
+          const define = node.arguments[0]
+          if (define.type !== 'ObjectExpression') return
+          processOptions(define)
         }
       }),
       utils.defineTemplateBodyVisitor(context, {
@@ -46,7 +95,7 @@ module.exports = {
           if (!inheritsAttrs) {
             return
           }
-          const attrsRef = node.references.find((reference) => {
+          const reference = node.references.find((reference) => {
             if (reference.variable != null) {
               // Not vm reference
               return false
@@ -54,14 +103,32 @@ module.exports = {
             return reference.id.name === '$attrs'
           })
 
-          if (attrsRef) {
-            context.report({
-              node: attrsRef.id,
-              message: 'Set "inheritAttrs" to false.'
-            })
+          if (reference) {
+            attrsRefs.push(reference)
+          }
+        }
+      }),
+      {
+        'Program:exit'(program) {
+          const element = program.templateBody
+          if (element == null) {
+            return
+          }
+
+          const rootElements = element.children.filter(utils.isVElement)
+
+          if (!checkMultiRootNodes && isMultiRootNodes(rootElements)) return
+
+          if (attrsRefs.length > 0) {
+            for (const attrsRef of attrsRefs) {
+              context.report({
+                node: attrsRef.id,
+                messageId: 'noDuplicateAttrInheritance'
+              })
+            }
           }
         }
-      })
+      }
     )
   }
 }
diff --git a/lib/rules/no-duplicate-attributes.js b/lib/rules/no-duplicate-attributes.js
index 4a3309b0c..0c7d3eb55 100644
--- a/lib/rules/no-duplicate-attributes.js
+++ b/lib/rules/no-duplicate-attributes.js
@@ -5,16 +5,8 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 /**
  * Get the name of the given attribute node.
  * @param {VAttribute | VDirective} attribute The attribute node to get.
@@ -35,16 +27,12 @@ function getName(attribute) {
   return null
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
     docs: {
       description: 'disallow duplication of attributes',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/no-duplicate-attributes.html'
     },
     fixable: null,
@@ -62,7 +50,10 @@ module.exports = {
         },
         additionalProperties: false
       }
-    ]
+    ],
+    messages: {
+      duplicateAttribute: "Duplicate attribute '{{name}}'."
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
@@ -104,7 +95,7 @@ module.exports = {
           context.report({
             node,
             loc: node.loc,
-            message: "Duplicate attribute '{{name}}'.",
+            messageId: 'duplicateAttribute',
             data: { name }
           })
         }
diff --git a/lib/rules/no-duplicate-class-names.js b/lib/rules/no-duplicate-class-names.js
new file mode 100644
index 000000000..3a7737a04
--- /dev/null
+++ b/lib/rules/no-duplicate-class-names.js
@@ -0,0 +1,380 @@
+/**
+ * @fileoverview disallow duplication of class names in class attributes
+ * @author Yizack Rangel
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+/**
+ * @param {VDirective} node
+ * @param {Expression} [expression]
+ * @param {boolean} [unconditional=true] whether the expression is unconditional
+ * @param {Expression} [parentExpr] parent expression for context
+ * @return {IterableIterator<{ node: Literal | TemplateElement, unconditional: boolean, parentExpr?: Expression }>}
+ */
+function* extractClassNodes(
+  node,
+  expression,
+  unconditional = true,
+  parentExpr
+) {
+  const nodeExpression = expression ?? node.value?.expression
+  if (!nodeExpression) return
+
+  switch (nodeExpression.type) {
+    case 'Literal': {
+      yield { node: nodeExpression, unconditional, parentExpr }
+      break
+    }
+    case 'ObjectExpression': {
+      for (const prop of nodeExpression.properties) {
+        if (
+          prop.type === 'Property' &&
+          prop.key?.type === 'Literal' &&
+          typeof prop.key.value === 'string'
+        ) {
+          yield {
+            node: prop.key,
+            unconditional: false,
+            parentExpr: nodeExpression
+          }
+        }
+      }
+      break
+    }
+    case 'ArrayExpression': {
+      for (const element of nodeExpression.elements) {
+        if (!element || element.type === 'SpreadElement') continue
+        yield* extractClassNodes(node, element, unconditional, nodeExpression)
+      }
+      break
+    }
+    case 'ConditionalExpression': {
+      yield* extractClassNodes(
+        node,
+        nodeExpression.consequent,
+        false,
+        nodeExpression
+      )
+      yield* extractClassNodes(
+        node,
+        nodeExpression.alternate,
+        false,
+        nodeExpression
+      )
+      break
+    }
+    case 'TemplateLiteral': {
+      for (const quasi of nodeExpression.quasis) {
+        yield { node: quasi, unconditional, parentExpr: nodeExpression }
+      }
+      for (const expr of nodeExpression.expressions) {
+        yield* extractClassNodes(node, expr, unconditional, nodeExpression)
+      }
+      break
+    }
+    case 'BinaryExpression': {
+      if (nodeExpression.operator === '+') {
+        yield* extractClassNodes(
+          node,
+          nodeExpression.left,
+          unconditional,
+          nodeExpression
+        )
+        yield* extractClassNodes(
+          node,
+          nodeExpression.right,
+          unconditional,
+          nodeExpression
+        )
+      }
+      break
+    }
+    case 'LogicalExpression': {
+      yield* extractClassNodes(
+        node,
+        nodeExpression.left,
+        unconditional,
+        nodeExpression
+      )
+      yield* extractClassNodes(
+        node,
+        nodeExpression.right,
+        false,
+        nodeExpression
+      )
+      break
+    }
+  }
+}
+
+/**
+ * @param {string} classList
+ * @returns {string[]}
+ */
+function getClassNames(classList) {
+  return classList.split(/\s+/).filter(Boolean)
+}
+
+/**
+ * @param {string} raw - raw class names string including quotes
+ * @returns {string}
+ */
+function removeDuplicateClassNames(raw) {
+  const quote = raw[0]
+  const inner = raw.slice(1, -1)
+  const tokens = inner.split(/(\s+)/)
+
+  /** @type {string[]} */
+  const kept = []
+  const used = new Set()
+
+  for (let i = 0; i < tokens.length; i++) {
+    const token = tokens[i]
+    if (!token) continue
+
+    const isWhitespace = /^\s+$/.test(token)
+
+    if (isWhitespace) {
+      // add whitespace to the last kept item or as leading whitespace
+      if (kept.length > 0) {
+        kept[kept.length - 1] += token
+      } else {
+        kept.push(token)
+      }
+    } else if (used.has(token)) {
+      // handle duplicate class name
+      const nextToken = tokens[i + 1]
+      const hasNextWhitespace =
+        kept.length > 0 && i + 1 < tokens.length && /^\s+$/.test(nextToken)
+
+      if (hasNextWhitespace) {
+        // update spaces of the last non-whitespace item
+        for (let j = kept.length - 1; j >= 0; j--) {
+          const isNotWhitespace = !/^\s+$/.test(kept[j])
+          if (isNotWhitespace) {
+            const parts = kept[j].split(/(\s+)/)
+            kept[j] = parts[0] + nextToken
+            break
+          }
+        }
+        i++ // skip the whitespace token
+      }
+    } else {
+      kept.push(token)
+      used.add(token)
+    }
+  }
+
+  // remove trailing whitespace from the last item if it's not purely whitespace
+  // unless the original string ended with whitespace
+  const endsWithSpace = /\s$/.test(inner)
+  if (kept.length > 0 && !endsWithSpace) {
+    const lastItem = kept[kept.length - 1]
+    const isLastWhitespace = /^\s+$/.test(lastItem)
+    if (!isLastWhitespace) {
+      const parts = lastItem.split(/(\s+)/)
+      kept[kept.length - 1] = parts[0]
+    }
+  }
+
+  return quote + kept.join('') + quote
+}
+
+/** @param {VLiteral | Literal | TemplateElement | null} node */
+function getRawValue(node) {
+  if (!node?.value) return null
+  return typeof node.value === 'object' && 'raw' in node.value
+    ? node.value.raw
+    : node.value
+}
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      url: 'https://eslint.vuejs.org/rules/no-duplicate-class-names.html',
+      description: 'disallow duplication of class names in class attributes',
+      categories: undefined
+    },
+    fixable: 'code',
+    schema: [],
+    messages: {
+      duplicateClassNames: 'Duplicate class name{{plural}} {{names}}.'
+    }
+  },
+  /** @param {RuleContext} context */
+  create: (context) => {
+    /**
+     * @param {VLiteral | Literal | TemplateElement | null} node
+     */
+    function reportDuplicateClasses(node) {
+      if (!node?.value) return
+
+      const classList = getRawValue(node)
+      if (typeof classList !== 'string') return
+
+      const classNames = getClassNames(classList)
+      if (classNames.length <= 1) return
+
+      const seen = new Set()
+      const duplicates = new Set()
+
+      for (const className of classNames) {
+        if (seen.has(className)) {
+          duplicates.add(className)
+        } else {
+          seen.add(className)
+        }
+      }
+
+      if (duplicates.size === 0) return
+
+      context.report({
+        node,
+        messageId: 'duplicateClassNames',
+        data: {
+          names: [...duplicates].map((name) => `'${name}'`).join(', '),
+          plural: duplicates.size > 1 ? 's' : ''
+        },
+        fix: (fixer) => {
+          const sourceCode = context.sourceCode
+          const raw = sourceCode.text.slice(node.range[0], node.range[1])
+          return fixer.replaceText(node, removeDuplicateClassNames(raw))
+        }
+      })
+
+      return duplicates
+    }
+
+    return utils.defineTemplateBodyVisitor(context, {
+      /** @param {VAttribute} node */
+      "VAttribute[directive=false][key.name='class'][value.type='VLiteral']"(
+        node
+      ) {
+        reportDuplicateClasses(node.value)
+      },
+      /** @param {VDirective} node */
+      "VAttribute[directive=true][key.argument.name='class'][value.type='VExpressionContainer']"(
+        node
+      ) {
+        const parent = node.parent
+        const attrs = parent.attributes || []
+        const staticAttr = attrs.find(
+          (attr) =>
+            attr.key &&
+            attr.key.name === 'class' &&
+            attr.value &&
+            attr.value.type === 'VLiteral'
+        )
+
+        // get static classes
+        /** @type {Set<string> | null} */
+        let staticClasses = null
+        if (
+          staticAttr &&
+          staticAttr.value &&
+          staticAttr.value.type === 'VLiteral'
+        ) {
+          staticClasses = new Set(getClassNames(String(staticAttr.value.value)))
+        }
+
+        /** @type {Set<string>} */
+        const reported = new Set()
+
+        /** @type {Set<string>} */
+        const duplicatesInExpression = new Set()
+
+        /** @type {Map<string, ASTNode>} */
+        const seen = new Map()
+
+        /** @type {Map<string, {node: ASTNode, unconditional: boolean, parentExpr?: Expression}>} */
+        const collected = new Map()
+
+        const classNodes = extractClassNodes(node)
+        for (const {
+          node: reportNode,
+          unconditional,
+          parentExpr
+        } of classNodes) {
+          // report fixable duplicates and collect reported class names
+          const reportedClasses = reportDuplicateClasses(reportNode)
+          if (reportedClasses) {
+            for (const reportedClass of reportedClasses)
+              reported.add(reportedClass)
+          }
+
+          // collect all class names and check for cross nodes duplicates
+          const classList = getRawValue(reportNode)
+          if (typeof classList !== 'string') continue
+          const classNames = getClassNames(classList)
+
+          for (const className of classNames) {
+            // skip if already reported by reportDuplicateClasses
+            if (reported.has(className)) continue
+            const existing = collected.get(className)
+            if (existing) {
+              // only add duplicate if at least one is unconditional, or share the same combining parent
+              const isSameParent =
+                parentExpr &&
+                existing.parentExpr === parentExpr &&
+                (parentExpr.type === 'BinaryExpression' ||
+                  parentExpr.type === 'TemplateLiteral')
+
+              if (existing.unconditional || unconditional || isSameParent) {
+                duplicatesInExpression.add(className)
+              }
+            } else {
+              collected.set(className, {
+                node: reportNode.parent,
+                unconditional,
+                parentExpr
+              })
+            }
+            // track unconditional duplicates separately for reporting
+            if (unconditional) {
+              if (seen.has(className)) {
+                duplicatesInExpression.add(className)
+              } else {
+                seen.set(className, reportNode.parent)
+              }
+            }
+          }
+
+          // report cross attribute duplicates
+          if (staticClasses) {
+            const intersection = classNames.filter((n) => staticClasses.has(n))
+            if (intersection.length > 0 && parent) {
+              context.report({
+                node: parent,
+                messageId: 'duplicateClassNames',
+                data: {
+                  names: intersection.map((name) => `'${name}'`).join(', '),
+                  plural: intersection.length > 1 ? 's' : ''
+                }
+              })
+            }
+          }
+        }
+
+        // report cross node duplicates
+        for (const className of duplicatesInExpression) {
+          const reportNode =
+            seen.get(className) || collected.get(className)?.node
+          if (reportNode) {
+            context.report({
+              node: reportNode,
+              messageId: 'duplicateClassNames',
+              data: {
+                names: `'${className}'`,
+                plural: ''
+              }
+            })
+          }
+        }
+      }
+    })
+  }
+}
diff --git a/lib/rules/no-empty-component-block.js b/lib/rules/no-empty-component-block.js
index fec130d94..c917b594c 100644
--- a/lib/rules/no-empty-component-block.js
+++ b/lib/rules/no-empty-component-block.js
@@ -4,16 +4,8 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const { isVElement } = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 /**
  * check whether has attribute `src`
  * @param {VElement} componentBlock
@@ -53,7 +45,7 @@ module.exports = {
       categories: undefined,
       url: 'https://eslint.vuejs.org/rules/no-empty-component-block.html'
     },
-    fixable: null,
+    fixable: 'code',
     schema: [],
     messages: {
       unexpected: '`<{{ blockName }}>` is empty. Empty block is not allowed.'
@@ -65,10 +57,11 @@ module.exports = {
    * @returns {RuleListener} AST event handlers.
    */
   create(context) {
-    if (!context.parserServices.getDocumentFragment) {
+    const sourceCode = context.sourceCode
+    if (!sourceCode.parserServices.getDocumentFragment) {
       return {}
     }
-    const documentFragment = context.parserServices.getDocumentFragment()
+    const documentFragment = sourceCode.parserServices.getDocumentFragment()
     if (!documentFragment) {
       return {}
     }
@@ -98,6 +91,9 @@ module.exports = {
               messageId: 'unexpected',
               data: {
                 blockName: componentBlock.name
+              },
+              fix(fixer) {
+                return fixer.remove(componentBlock)
               }
             })
           }
diff --git a/lib/rules/no-empty-pattern.js b/lib/rules/no-empty-pattern.js
index 91c7472de..97aef6634 100644
--- a/lib/rules/no-empty-pattern.js
+++ b/lib/rules/no-empty-pattern.js
@@ -5,5 +5,5 @@
 
 const { wrapCoreRule } = require('../utils')
 
-// eslint-disable-next-line no-invalid-meta, no-invalid-meta-docs-categories
+// eslint-disable-next-line internal/no-invalid-meta
 module.exports = wrapCoreRule('no-empty-pattern')
diff --git a/lib/rules/no-export-in-script-setup.js b/lib/rules/no-export-in-script-setup.js
index 0105d52f4..37ff33786 100644
--- a/lib/rules/no-export-in-script-setup.js
+++ b/lib/rules/no-export-in-script-setup.js
@@ -17,7 +17,7 @@ module.exports = {
     type: 'problem',
     docs: {
       description: 'disallow `export` in `<script setup>`',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/no-export-in-script-setup.html'
     },
     fixable: null,
@@ -28,8 +28,11 @@ module.exports = {
   },
   /** @param {RuleContext} context */
   create(context) {
-    /** @param {ExportAllDeclaration | ExportDefaultDeclaration | ExportNamedDeclaration} node */
-    function verify(node) {
+    /**
+     * @param {ExportAllDeclaration | ExportDefaultDeclaration | ExportNamedDeclaration} node
+     * @param {SourceLocation} loc
+     */
+    function verify(node, loc) {
       const tsNode =
         /** @type {TSESTreeExportAllDeclaration | TSESTreeExportDefaultDeclaration | TSESTreeExportNamedDeclaration} */ (
           node
@@ -46,14 +49,24 @@ module.exports = {
       }
       context.report({
         node,
+        loc,
         messageId: 'forbidden'
       })
     }
 
     return utils.defineScriptSetupVisitor(context, {
-      ExportAllDeclaration: verify,
-      ExportDefaultDeclaration: verify,
-      ExportNamedDeclaration: verify
+      ExportAllDeclaration: (node) => verify(node, node.loc),
+      ExportDefaultDeclaration: (node) => verify(node, node.loc),
+      ExportNamedDeclaration: (node) => {
+        // export let foo = 'foo', export class Foo {}, export function foo() {}
+        if (node.declaration) {
+          verify(node, context.sourceCode.getFirstToken(node).loc)
+        }
+        // export { foo }, export { foo } from 'bar'
+        else {
+          verify(node, node.loc)
+        }
+      }
     })
   }
 }
diff --git a/lib/rules/no-expose-after-await.js b/lib/rules/no-expose-after-await.js
index 98d97891f..e5ede6444 100644
--- a/lib/rules/no-expose-after-await.js
+++ b/lib/rules/no-expose-after-await.js
@@ -4,17 +4,9 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const { findVariable } = require('eslint-utils')
+const { findVariable } = require('@eslint-community/eslint-utils')
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 /**
  * Get the callee member node from the given CallExpression
  * @param {CallExpression} node CallExpression
@@ -31,10 +23,6 @@ function getCalleeMemberNode(node) {
   return null
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
@@ -204,7 +192,10 @@ module.exports = {
             // `setup(props, {emit})`
             const variable =
               exposeParam.type === 'Identifier'
-                ? findVariable(context.getScope(), exposeParam)
+                ? findVariable(
+                    utils.getScope(context, exposeParam),
+                    exposeParam
+                  )
                 : null
             if (!variable) {
               return
@@ -217,7 +208,10 @@ module.exports = {
             }
           } else if (contextParam.type === 'Identifier') {
             // `setup(props, context)`
-            const variable = findVariable(context.getScope(), contextParam)
+            const variable = findVariable(
+              utils.getScope(context, contextParam),
+              contextParam
+            )
             if (!variable) {
               return
             }
diff --git a/lib/rules/no-extra-parens.js b/lib/rules/no-extra-parens.js
index b193a0eed..5d39a33bf 100644
--- a/lib/rules/no-extra-parens.js
+++ b/lib/rules/no-extra-parens.js
@@ -3,12 +3,12 @@
  */
 'use strict'
 
-const { isParenthesized } = require('eslint-utils')
-const { wrapCoreRule } = require('../utils')
+const { isParenthesized } = require('@eslint-community/eslint-utils')
+const { wrapStylisticOrCoreRule } = require('../utils')
 const { getStyleVariablesContext } = require('../utils/style-variables')
 
-// eslint-disable-next-line no-invalid-meta, no-invalid-meta-docs-categories
-module.exports = wrapCoreRule('no-extra-parens', {
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = wrapStylisticOrCoreRule('no-extra-parens', {
   skipDynamicArguments: true,
   applyDocument: true,
   create: createForVueSyntax
@@ -84,10 +84,11 @@ function isIIFE(node) {
  * @returns {TemplateListener} AST event handlers.
  */
 function createForVueSyntax(context) {
-  if (!context.parserServices.getTemplateBodyTokenStore) {
+  const sourceCode = context.sourceCode
+  if (!sourceCode.parserServices.getTemplateBodyTokenStore) {
     return {}
   }
-  const tokenStore = context.parserServices.getTemplateBodyTokenStore()
+  const tokenStore = sourceCode.parserServices.getTemplateBodyTokenStore()
 
   /**
    * Checks if the given node turns into a filter when unwraped.
@@ -97,15 +98,15 @@ function createForVueSyntax(context) {
   function isUnwrapChangeToFilter(expression) {
     let parenStack = null
     for (const token of tokenStore.getTokens(expression)) {
-      if (!parenStack) {
-        if (token.value === '|') {
-          return true
-        }
-      } else {
+      if (parenStack) {
         if (parenStack.isUpToken(token)) {
           parenStack = parenStack.upper
           continue
         }
+      } else {
+        if (token.value === '|') {
+          return true
+        }
       }
       if (isLeftParen(token)) {
         parenStack = { isUpToken: isRightParen, upper: parenStack }
@@ -174,7 +175,7 @@ function createForVueSyntax(context) {
    * @private
    */
   function report(node) {
-    const sourceCode = context.getSourceCode()
+    const sourceCode = context.sourceCode
     const leftParenToken = tokenStore.getTokenBefore(node)
     const rightParenToken = tokenStore.getTokenAfter(node)
 
diff --git a/lib/rules/no-implicit-coercion.js b/lib/rules/no-implicit-coercion.js
new file mode 100644
index 000000000..b0cda39b4
--- /dev/null
+++ b/lib/rules/no-implicit-coercion.js
@@ -0,0 +1,12 @@
+/**
+ * @author lozinsky <https://github.com/lozinsky>
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = utils.wrapCoreRule('no-implicit-coercion', {
+  applyDocument: true
+})
diff --git a/lib/rules/no-import-compiler-macros.js b/lib/rules/no-import-compiler-macros.js
new file mode 100644
index 000000000..ca692adf2
--- /dev/null
+++ b/lib/rules/no-import-compiler-macros.js
@@ -0,0 +1,107 @@
+/**
+ * @author Wayne Zhang
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+const COMPILER_MACROS = new Set([
+  'defineProps',
+  'defineEmits',
+  'defineExpose',
+  'withDefaults',
+  'defineModel',
+  'defineOptions',
+  'defineSlots'
+])
+
+const VUE_MODULES = new Set(['@vue/runtime-core', '@vue/runtime-dom', 'vue'])
+
+/**
+ * @param {Token} node
+ */
+function isComma(node) {
+  return node.type === 'Punctuator' && node.value === ','
+}
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'disallow importing Vue compiler macros',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/no-import-compiler-macros.html'
+    },
+    fixable: 'code',
+    schema: [],
+    messages: {
+      noImportCompilerMacros:
+        "'{{name}}' is a compiler macro and doesn't need to be imported.",
+      onlyValidInScriptSetup:
+        "'{{name}}' is a compiler macro and can only be used inside <script setup>."
+    }
+  },
+  /**
+   * @param {RuleContext} context
+   * @returns {RuleListener}
+   */
+  create(context) {
+    const sourceCode = context.sourceCode
+
+    return {
+      ImportDeclaration(node) {
+        if (node.specifiers.length === 0 || !VUE_MODULES.has(node.source.value))
+          return
+
+        for (const specifier of node.specifiers) {
+          if (
+            specifier.type !== 'ImportSpecifier' ||
+            !COMPILER_MACROS.has(specifier.imported.name)
+          ) {
+            continue
+          }
+
+          context.report({
+            node: specifier,
+            messageId: utils.isScriptSetup(context)
+              ? 'noImportCompilerMacros'
+              : 'onlyValidInScriptSetup',
+            data: {
+              name: specifier.imported.name
+            },
+            fix: (fixer) => {
+              const isOnlySpecifier = node.specifiers.length === 1
+              const isLastSpecifier =
+                specifier === node.specifiers[node.specifiers.length - 1]
+
+              if (isOnlySpecifier) {
+                return fixer.remove(node)
+              } else if (isLastSpecifier) {
+                const precedingComma = sourceCode.getTokenBefore(
+                  specifier,
+                  isComma
+                )
+                return fixer.removeRange([
+                  precedingComma ? precedingComma.range[0] : specifier.range[0],
+                  specifier.range[1]
+                ])
+              } else {
+                const subsequentComma = sourceCode.getTokenAfter(
+                  specifier,
+                  isComma
+                )
+                return fixer.removeRange([
+                  specifier.range[0],
+                  subsequentComma
+                    ? subsequentComma.range[1]
+                    : specifier.range[1]
+                ])
+              }
+            }
+          })
+        }
+      }
+    }
+  }
+}
diff --git a/lib/rules/no-invalid-model-keys.js b/lib/rules/no-invalid-model-keys.js
deleted file mode 100644
index 1695e6fa9..000000000
--- a/lib/rules/no-invalid-model-keys.js
+++ /dev/null
@@ -1,22 +0,0 @@
-'use strict'
-
-const baseRule = require('./valid-model-definition')
-
-module.exports = {
-  meta: {
-    ...baseRule.meta,
-    type: baseRule.meta.type,
-    docs: {
-      description: baseRule.meta.docs.description,
-      categories: undefined,
-      url: 'https://eslint.vuejs.org/rules/no-invalid-model-keys.html'
-    },
-    deprecated: true,
-    replacedBy: ['valid-model-definition'],
-    schema: []
-  },
-  /** @param {RuleContext} context */
-  create(context) {
-    return baseRule.create(context)
-  }
-}
diff --git a/lib/rules/no-irregular-whitespace.js b/lib/rules/no-irregular-whitespace.js
index b823dbdc5..0c77ee989 100644
--- a/lib/rules/no-irregular-whitespace.js
+++ b/lib/rules/no-irregular-whitespace.js
@@ -5,26 +5,14 @@
 
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Constants
-// ------------------------------------------------------------------------------
-
 const ALL_IRREGULARS =
   /[\f\v\u0085\uFEFF\u00A0\u1680\u180E\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200A\u200B\u202F\u205F\u3000\u2028\u2029]/u
 const IRREGULAR_WHITESPACE =
   /[\f\v\u0085\uFEFF\u00A0\u1680\u180E\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200A\u200B\u202F\u205F\u3000]+/gmu
 const IRREGULAR_LINE_TERMINATORS = /[\u2028\u2029]/gmu
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
@@ -33,38 +21,22 @@ module.exports = {
       description: 'disallow irregular whitespace in `.vue` files',
       categories: undefined,
       url: 'https://eslint.vuejs.org/rules/no-irregular-whitespace.html',
-      extensionRule: true,
-      coreRuleUrl: 'https://eslint.org/docs/rules/no-irregular-whitespace'
+      extensionSource: {
+        url: 'https://eslint.org/docs/rules/no-irregular-whitespace',
+        name: 'ESLint core'
+      }
     },
 
     schema: [
       {
         type: 'object',
         properties: {
-          skipComments: {
-            type: 'boolean',
-            default: false
-          },
-          skipStrings: {
-            type: 'boolean',
-            default: true
-          },
-          skipTemplates: {
-            type: 'boolean',
-            default: false
-          },
-          skipRegExps: {
-            type: 'boolean',
-            default: false
-          },
-          skipHTMLAttributeValues: {
-            type: 'boolean',
-            default: false
-          },
-          skipHTMLTextContents: {
-            type: 'boolean',
-            default: false
-          }
+          skipComments: { type: 'boolean' },
+          skipStrings: { type: 'boolean' },
+          skipTemplates: { type: 'boolean' },
+          skipRegExps: { type: 'boolean' },
+          skipHTMLAttributeValues: { type: 'boolean' },
+          skipHTMLTextContents: { type: 'boolean' }
         },
         additionalProperties: false
       }
@@ -91,7 +63,7 @@ module.exports = {
     const skipHTMLAttributeValues = !!options.skipHTMLAttributeValues
     const skipHTMLTextContents = !!options.skipHTMLTextContents
 
-    const sourceCode = context.getSourceCode()
+    const sourceCode = context.sourceCode
 
     /**
      * Removes errors that occur inside a string node
diff --git a/lib/rules/no-lifecycle-after-await.js b/lib/rules/no-lifecycle-after-await.js
index bb097910f..c695ae420 100644
--- a/lib/rules/no-lifecycle-after-await.js
+++ b/lib/rules/no-lifecycle-after-await.js
@@ -3,11 +3,11 @@
  * See LICENSE file in root directory for full license.
  */
 'use strict'
-const { ReferenceTracker } = require('eslint-utils')
+const { ReferenceTracker } = require('@eslint-community/eslint-utils')
 const utils = require('../utils')
 
 /**
- * @typedef {import('eslint-utils').TYPES.TraceMap} TraceMap
+ * @typedef {import('@eslint-community/eslint-utils').TYPES.TraceMap} TraceMap
  */
 
 const LIFECYCLE_HOOKS = [
@@ -60,21 +60,21 @@ module.exports = {
 
     return utils.compositingVisitors(
       {
-        Program() {
-          const tracker = new ReferenceTracker(context.getScope())
-          const traceMap = {
-            /** @type {TraceMap} */
-            vue: {
-              [ReferenceTracker.ESM]: true
-            }
-          }
+        /** @param {Program} program */
+        Program(program) {
+          const tracker = new ReferenceTracker(utils.getScope(context, program))
+          /** @type {TraceMap} */
+          const traceMap = {}
           for (const lifecycleHook of LIFECYCLE_HOOKS) {
-            traceMap.vue[lifecycleHook] = {
+            traceMap[lifecycleHook] = {
               [ReferenceTracker.CALL]: true
             }
           }
 
-          for (const { node } of tracker.iterateEsmReferences(traceMap)) {
+          for (const { node } of utils.iterateReferencesTraceMap(
+            tracker,
+            traceMap
+          )) {
             lifecycleHookCallNodes.add(node)
           }
         }
diff --git a/lib/rules/no-lone-template.js b/lib/rules/no-lone-template.js
index 009bbad76..765b24908 100644
--- a/lib/rules/no-lone-template.js
+++ b/lib/rules/no-lone-template.js
@@ -4,16 +4,8 @@
  */
 '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',
@@ -23,10 +15,6 @@ const SPECIAL_TEMPLATE_DIRECTIVES = new Set([
   'slot'
 ])
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 /**
  * @param {VAttribute | VDirective} attr
  */
@@ -53,7 +41,7 @@ module.exports = {
     type: 'problem',
     docs: {
       description: 'disallow unnecessary `<template>`',
-      categories: ['vue3-recommended', 'recommended'],
+      categories: ['vue3-recommended', 'vue2-recommended'],
       url: 'https://eslint.vuejs.org/rules/no-lone-template.html'
     },
     fixable: null,
diff --git a/lib/rules/no-loss-of-precision.js b/lib/rules/no-loss-of-precision.js
index 6e6b85a02..bd2c05cda 100644
--- a/lib/rules/no-loss-of-precision.js
+++ b/lib/rules/no-loss-of-precision.js
@@ -4,13 +4,9 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// eslint-disable-next-line no-invalid-meta, no-invalid-meta-docs-categories
+// eslint-disable-next-line internal/no-invalid-meta
 module.exports = utils.wrapCoreRule('no-loss-of-precision', {
   applyDocument: true
 })
diff --git a/lib/rules/no-multi-spaces.js b/lib/rules/no-multi-spaces.js
index aa8b70a22..b4d17bb8e 100644
--- a/lib/rules/no-multi-spaces.js
+++ b/lib/rules/no-multi-spaces.js
@@ -6,16 +6,12 @@
 
 const path = require('path')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 /**
  * @param {RuleContext} context
  * @param {Token} node
  */
 const isProperty = (context, node) => {
-  const sourceCode = context.getSourceCode()
+  const sourceCode = context.sourceCode
   return node.type === 'Punctuator' && sourceCode.getText(node) === ':'
 }
 
@@ -24,10 +20,10 @@ module.exports = {
     type: 'layout',
     docs: {
       description: 'disallow multiple spaces',
-      categories: ['vue3-strongly-recommended', 'strongly-recommended'],
+      categories: ['vue3-strongly-recommended', 'vue2-strongly-recommended'],
       url: 'https://eslint.vuejs.org/rules/no-multi-spaces.html'
     },
-    fixable: 'whitespace', // or "code" or "whitespace"
+    fixable: 'whitespace',
     schema: [
       {
         type: 'object',
@@ -38,7 +34,12 @@ module.exports = {
         },
         additionalProperties: false
       }
-    ]
+    ],
+    messages: {
+      multipleSpaces: "Multiple spaces found before '{{displayValue}}'.",
+      useLatestParser:
+        'Use the latest vue-eslint-parser. See also https://eslint.vuejs.org/user-guide/#what-is-the-use-the-latest-vue-eslint-parser-error.'
+    }
   },
 
   /**
@@ -51,13 +52,13 @@ module.exports = {
 
     return {
       Program(node) {
-        if (context.parserServices.getTemplateBodyTokenStore == null) {
-          const filename = context.getFilename()
+        const sourceCode = context.sourceCode
+        if (sourceCode.parserServices.getTemplateBodyTokenStore == null) {
+          const filename = context.filename
           if (path.extname(filename) === '.vue') {
             context.report({
               loc: { line: 1, column: 0 },
-              message:
-                'Use the latest vue-eslint-parser. See also https://eslint.vuejs.org/user-guide/#what-is-the-use-the-latest-vue-eslint-parser-error.'
+              messageId: 'useLatestParser'
             })
           }
           return
@@ -65,8 +66,7 @@ module.exports = {
         if (!node.templateBody) {
           return
         }
-        const sourceCode = context.getSourceCode()
-        const tokenStore = context.parserServices.getTemplateBodyTokenStore()
+        const tokenStore = sourceCode.parserServices.getTemplateBodyTokenStore()
         const tokens = tokenStore.getTokens(node.templateBody, {
           includeComments: true
         })
@@ -88,7 +88,7 @@ module.exports = {
                 start: prevToken.loc.end,
                 end: token.loc.start
               },
-              message: "Multiple spaces found before '{{displayValue}}'.",
+              messageId: 'multipleSpaces',
               fix: (fixer) =>
                 fixer.replaceTextRange(
                   [prevToken.range[1], token.range[0]],
diff --git a/lib/rules/no-multiple-objects-in-class.js b/lib/rules/no-multiple-objects-in-class.js
index cf930ebec..918b5f7fc 100644
--- a/lib/rules/no-multiple-objects-in-class.js
+++ b/lib/rules/no-multiple-objects-in-class.js
@@ -4,16 +4,8 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const { defineTemplateBodyVisitor } = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 /**
  * count ObjectExpression element
  * @param {VDirective & {value: VExpressionContainer & {expression: ArrayExpression}}} node
@@ -29,7 +21,7 @@ module.exports = {
   meta: {
     type: 'suggestion',
     docs: {
-      description: 'disallow to pass multiple objects into array to class',
+      description: 'disallow passing multiple objects in an array to class',
       categories: undefined,
       url: 'https://eslint.vuejs.org/rules/no-multiple-objects-in-class.html'
     },
diff --git a/lib/rules/no-multiple-slot-args.js b/lib/rules/no-multiple-slot-args.js
index 4cfe6075c..0de197ce9 100644
--- a/lib/rules/no-multiple-slot-args.js
+++ b/lib/rules/no-multiple-slot-args.js
@@ -4,23 +4,15 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
-const { findVariable } = require('eslint-utils')
-
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
+const { findVariable } = require('@eslint-community/eslint-utils')
 
 module.exports = {
   meta: {
     type: 'problem',
     docs: {
-      description: 'disallow to pass multiple arguments to scoped slots',
-      categories: ['vue3-recommended', 'recommended'],
+      description: 'disallow passing multiple arguments to scoped slots',
+      categories: ['vue3-recommended', 'vue2-recommended'],
       url: 'https://eslint.vuejs.org/rules/no-multiple-slot-args.html'
     },
     fixable: null,
@@ -83,7 +75,7 @@ module.exports = {
      * @param {Identifier} node The node to verify
      */
     function verifyReferences(node) {
-      const variable = findVariable(context.getScope(), node)
+      const variable = findVariable(utils.getScope(context, node), node)
       if (!variable) {
         return
       }
diff --git a/lib/rules/no-multiple-template-root.js b/lib/rules/no-multiple-template-root.js
index 1bbad01ca..63363c16e 100644
--- a/lib/rules/no-multiple-template-root.js
+++ b/lib/rules/no-multiple-template-root.js
@@ -4,33 +4,44 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
     docs: {
       description: 'disallow adding multiple root nodes to the template',
-      categories: ['essential'],
+      categories: ['vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/no-multiple-template-root.html'
     },
     fixable: null,
-    schema: []
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          disallowComments: {
+            type: 'boolean'
+          }
+        },
+        additionalProperties: false
+      }
+    ],
+    messages: {
+      commentRoot: 'The template root disallows comments.',
+      multipleRoot: 'The template root requires exactly one element.',
+      textRoot: 'The template root requires an element rather than texts.',
+      disallowedElement: "The template root disallows '<{{name}}>' elements.",
+      disallowedDirective: "The template root disallows 'v-for' directives."
+    }
   },
   /**
    * @param {RuleContext} context - The rule context.
    * @returns {RuleListener} AST event handlers.
    */
   create(context) {
-    const sourceCode = context.getSourceCode()
+    const options = context.options[0] || {}
+    const disallowComments = options.disallowComments
+    const sourceCode = context.sourceCode
 
     return {
       Program(program) {
@@ -39,6 +50,21 @@ module.exports = {
           return
         }
 
+        const reportComments = element.comments.filter(
+          (comment) =>
+            utils.inRange(element, comment) &&
+            !element.children.some((child) => utils.inRange(child, comment))
+        )
+        if (disallowComments) {
+          for (const comment of reportComments) {
+            context.report({
+              node: comment,
+              loc: comment.loc,
+              messageId: 'commentRoot'
+            })
+          }
+        }
+
         const rootElements = []
         let extraText = null
         let extraElement = null
@@ -65,15 +91,9 @@ module.exports = {
           context.report({
             node: extraText,
             loc: extraText.loc,
-            message: 'The template root requires an element rather than texts.'
-          })
-        } else if (extraElement != null) {
-          context.report({
-            node: extraElement,
-            loc: extraElement.loc,
-            message: 'The template root requires exactly one element.'
+            messageId: 'textRoot'
           })
-        } else {
+        } else if (extraElement == null) {
           for (const element of rootElements) {
             const tag = element.startTag
             const name = element.name
@@ -82,7 +102,7 @@ module.exports = {
               context.report({
                 node: tag,
                 loc: tag.loc,
-                message: "The template root disallows '<{{name}}>' elements.",
+                messageId: 'disallowedElement',
                 data: { name }
               })
             }
@@ -90,10 +110,16 @@ module.exports = {
               context.report({
                 node: tag,
                 loc: tag.loc,
-                message: "The template root disallows 'v-for' directives."
+                messageId: 'disallowedDirective'
               })
             }
           }
+        } else {
+          context.report({
+            node: extraElement,
+            loc: extraElement.loc,
+            messageId: 'multipleRoot'
+          })
         }
       }
     }
diff --git a/lib/rules/no-mutating-props.js b/lib/rules/no-mutating-props.js
index 32c7555af..687ce4bea 100644
--- a/lib/rules/no-mutating-props.js
+++ b/lib/rules/no-mutating-props.js
@@ -4,12 +4,12 @@
  */
 'use strict'
 
-const utils = require('../utils')
-const { findVariable } = require('eslint-utils')
+/**
+ * @typedef {{name?: string, set: Set<string>}} PropsInfo
+ */
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
+const utils = require('../utils')
+const { findVariable } = require('@eslint-community/eslint-utils')
 
 // https://github.com/vuejs/vue-next/blob/7c11c58faf8840ab97b6449c98da0296a60dddd8/packages/shared/src/globalsWhitelist.ts
 const GLOBALS_WHITE_LISTED = new Set([
@@ -88,22 +88,47 @@ function isVmReference(node) {
   return false
 }
 
+/**
+ * @param { object } options
+ * @param { boolean } options.shallowOnly Enables mutating the value of a prop but leaving the reference the same
+ */
+function parseOptions(options) {
+  return Object.assign(
+    {
+      shallowOnly: false
+    },
+    options
+  )
+}
+
 module.exports = {
   meta: {
     type: 'suggestion',
     docs: {
       description: 'disallow mutation of component props',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/no-mutating-props.html'
     },
-    fixable: null, // or "code" or "whitespace"
+    fixable: null,
     schema: [
-      // fill in your schema
-    ]
+      {
+        type: 'object',
+        properties: {
+          shallowOnly: {
+            type: 'boolean'
+          }
+        },
+        additionalProperties: false
+      }
+    ],
+    messages: {
+      unexpectedMutation: 'Unexpected mutation of "{{key}}" prop.'
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
-    /** @type {Map<ObjectExpression|CallExpression, Set<string>>} */
+    const { shallowOnly } = parseOptions(context.options[0])
+    /** @type {Map<ObjectExpression|CallExpression, PropsInfo>} */
     const propsMap = new Map()
     /** @type { { type: 'export' | 'mark' | 'definition', object: ObjectExpression } | { type: 'setup', object: CallExpression } | null } */
     let vueObjectData = null
@@ -115,7 +140,7 @@ module.exports = {
     function report(node, name) {
       context.report({
         node,
-        message: 'Unexpected mutation of "{{key}}" prop.',
+        messageId: 'unexpectedMutation',
         data: {
           key: name
         }
@@ -133,7 +158,7 @@ module.exports = {
       }
       if (node.computed) {
         const expr = node.type === 'Property' ? node.key : node.property
-        const str = context.getSourceCode().getText(expr)
+        const str = context.sourceCode.getText(expr)
         return `[${str}]`
       }
       return '?unknown?'
@@ -142,10 +167,11 @@ module.exports = {
     /**
      * @param {MemberExpression|Identifier} props
      * @param {string} name
+     * @param {boolean} isRootProps
      */
-    function verifyMutating(props, name) {
+    function verifyMutating(props, name, isRootProps = false) {
       const invalid = utils.findMutating(props)
-      if (invalid) {
+      if (invalid && isShallowOnlyInvalid(invalid, isRootProps)) {
         report(invalid.node, name)
       }
     }
@@ -186,7 +212,8 @@ module.exports = {
         case 'ArrayPattern': {
           for (let index = 0; index < param.elements.length; index++) {
             const element = param.elements[index]
-            yield* iteratePatternProperties(element, [...path, `${index}`])
+            if (element)
+              yield* iteratePatternProperties(element, [...path, `${index}`])
           }
           break
         }
@@ -198,7 +225,7 @@ module.exports = {
      * @param {string[]} path
      */
     function verifyPropVariable(prop, path) {
-      const variable = findVariable(context.getScope(), prop)
+      const variable = findVariable(utils.getScope(context, prop), prop)
       if (!variable) {
         return
       }
@@ -214,6 +241,9 @@ module.exports = {
           continue
         }
         let name
+        if (!isShallowOnlyInvalid(invalid, path.length === 0)) {
+          continue
+        }
         if (path.length === 0) {
           if (invalid.pathNodes.length === 0) {
             continue
@@ -232,7 +262,7 @@ module.exports = {
     }
 
     function* extractDefineVariableNames() {
-      const globalScope = context.getSourceCode().scopeManager.globalScope
+      const globalScope = context.sourceCode.scopeManager.globalScope
       if (globalScope) {
         for (const variable of globalScope.variables) {
           if (variable.defs.length > 0) {
@@ -250,26 +280,43 @@ module.exports = {
       }
     }
 
+    /**
+     * Is shallowOnly false or the prop reassigned
+     * @param {Exclude<ReturnType<typeof utils.findMutating>, null>} invalid
+     * @param {boolean} isRootProps
+     * @return {boolean}
+     */
+    function isShallowOnlyInvalid(invalid, isRootProps) {
+      return (
+        !shallowOnly ||
+        (invalid.pathNodes.length === (isRootProps ? 1 : 0) &&
+          ['assignment', 'update'].includes(invalid.kind))
+      )
+    }
+
     return utils.compositingVisitors(
       {},
       utils.defineScriptSetupVisitor(context, {
         onDefinePropsEnter(node, props) {
           const defineVariableNames = new Set(extractDefineVariableNames())
 
-          const propsSet = new Set(
-            props
-              .map((p) => p.propName)
-              .filter(
-                /**
-                 * @returns {propName is string}
-                 */
-                (propName) =>
-                  utils.isDef(propName) &&
-                  !GLOBALS_WHITE_LISTED.has(propName) &&
-                  !defineVariableNames.has(propName)
-              )
-          )
-          propsMap.set(node, propsSet)
+          const propsInfo = {
+            name: '',
+            set: new Set(
+              props
+                .map((p) => p.propName)
+                .filter(
+                  /**
+                   * @returns {propName is string}
+                   */
+                  (propName) =>
+                    utils.isDef(propName) &&
+                    !GLOBALS_WHITE_LISTED.has(propName) &&
+                    !defineVariableNames.has(propName)
+                )
+            )
+          }
+          propsMap.set(node, propsInfo)
           vueObjectData = {
             type: 'setup',
             object: node
@@ -298,22 +345,25 @@ module.exports = {
             target.parent.id,
             []
           )) {
+            if (path.length === 0) {
+              propsInfo.name = prop.name
+            } else {
+              propsInfo.set.add(prop.name)
+            }
             verifyPropVariable(prop, path)
-            propsSet.add(prop.name)
           }
         }
       }),
       utils.defineVueVisitor(context, {
         onVueObjectEnter(node) {
-          propsMap.set(
-            node,
-            new Set(
+          propsMap.set(node, {
+            set: new Set(
               utils
                 .getComponentPropsFromOptions(node)
                 .map((p) => p.propName)
                 .filter(utils.isDef)
             )
-          )
+          })
         },
         onVueObjectExit(node, { type }) {
           if (
@@ -363,7 +413,7 @@ module.exports = {
           const name = utils.getStaticPropertyName(mem)
           if (
             name &&
-            /** @type {Set<string>} */ (propsMap.get(vueNode)).has(name)
+            /** @type {PropsInfo} */ (propsMap.get(vueNode)).set.has(name)
           ) {
             verifyMutating(mem, name)
           }
@@ -382,9 +432,9 @@ module.exports = {
           const name = utils.getStaticPropertyName(mem)
           if (
             name &&
-            /** @type {Set<string>} */ (propsMap.get(vueObjectData.object)).has(
-              name
-            )
+            /** @type {PropsInfo} */ (
+              propsMap.get(vueObjectData.object)
+            ).set.has(name)
           ) {
             verifyMutating(mem, name)
           }
@@ -397,14 +447,18 @@ module.exports = {
           if (!isVmReference(node)) {
             return
           }
-          const name = node.name
-          if (
-            name &&
-            /** @type {Set<string>} */ (propsMap.get(vueObjectData.object)).has(
-              name
-            )
-          ) {
-            verifyMutating(node, name)
+          const propsInfo = /** @type {PropsInfo} */ (
+            propsMap.get(vueObjectData.object)
+          )
+          const isRootProps = !!node.name && propsInfo.name === node.name
+          const parent = node.parent
+          const name =
+            (isRootProps &&
+              parent.type === 'MemberExpression' &&
+              utils.getStaticPropertyName(parent)) ||
+            node.name
+          if (name && (propsInfo.set.has(name) || isRootProps)) {
+            verifyMutating(node, name, isRootProps)
           }
         },
         /** @param {ESNode} node */
@@ -427,28 +481,45 @@ module.exports = {
             return
           }
 
+          const propsInfo = /** @type {PropsInfo} */ (
+            propsMap.get(vueObjectData.object)
+          )
+
           const nodes = utils.getMemberChaining(node)
           const first = nodes[0]
           let name
           if (isVmReference(first)) {
-            name = first.name
+            if (first.name === propsInfo.name) {
+              // props variable
+              if (shallowOnly && nodes.length > 2) {
+                return
+              }
+              name = (nodes[1] && getPropertyNameText(nodes[1])) || first.name
+            } else {
+              if (shallowOnly && nodes.length > 1) {
+                return
+              }
+              name = first.name
+              if (!name || !propsInfo.set.has(name)) {
+                return
+              }
+            }
           } else if (first.type === 'ThisExpression') {
+            if (shallowOnly && nodes.length > 2) {
+              return
+            }
             const mem = nodes[1]
             if (!mem) {
               return
             }
             name = utils.getStaticPropertyName(mem)
+            if (!name || !propsInfo.set.has(name)) {
+              return
+            }
           } else {
             return
           }
-          if (
-            name &&
-            /** @type {Set<string>} */ (propsMap.get(vueObjectData.object)).has(
-              name
-            )
-          ) {
-            report(node, name)
-          }
+          report(node, name)
         }
       })
     )
diff --git a/lib/rules/no-negated-condition.js b/lib/rules/no-negated-condition.js
new file mode 100644
index 000000000..22a9a6fca
--- /dev/null
+++ b/lib/rules/no-negated-condition.js
@@ -0,0 +1,12 @@
+/**
+ * @author Wayne Zhang
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const { wrapCoreRule } = require('../utils')
+
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = wrapCoreRule('no-negated-condition', {
+  applyDocument: true
+})
diff --git a/lib/rules/no-negated-v-if-condition.js b/lib/rules/no-negated-v-if-condition.js
new file mode 100644
index 000000000..72ec21138
--- /dev/null
+++ b/lib/rules/no-negated-v-if-condition.js
@@ -0,0 +1,210 @@
+/**
+ * @author Wayne Zhang
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+/**
+ * @typedef { VDirective & { value: (VExpressionContainer & { expression: Expression | null } ) | null  } } VIfDirective
+ */
+
+/**
+ * @param {Expression} expression
+ * @returns {boolean}
+ */
+function isNegatedExpression(expression) {
+  return (
+    (expression.type === 'UnaryExpression' && expression.operator === '!') ||
+    (expression.type === 'BinaryExpression' &&
+      (expression.operator === '!=' || expression.operator === '!=='))
+  )
+}
+
+/**
+ * @param {VElement} node
+ * @returns {VElement|null}
+ */
+function getNextSibling(node) {
+  if (!node.parent?.children) {
+    return null
+  }
+
+  const siblings = node.parent.children
+  const currentIndex = siblings.indexOf(node)
+
+  for (let i = currentIndex + 1; i < siblings.length; i++) {
+    const sibling = siblings[i]
+    if (sibling.type === 'VElement') {
+      return sibling
+    }
+  }
+
+  return null
+}
+
+/**
+ * @param {VElement} element
+ * @returns {boolean}
+ */
+function isDirectlyFollowedByElse(element) {
+  const nextElement = getNextSibling(element)
+  return nextElement ? utils.hasDirective(nextElement, 'else') : false
+}
+
+/**
+ * @param {VElement} element
+ */
+function getDirective(element) {
+  return /** @type {VIfDirective|undefined} */ (
+    element.startTag.attributes.find(
+      (attr) =>
+        attr.directive &&
+        attr.key.name &&
+        attr.key.name.name &&
+        ['if', 'else-if', 'else'].includes(attr.key.name.name)
+    )
+  )
+}
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'disallow negated conditions in v-if/v-else',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/no-negated-v-if-condition.html'
+    },
+    fixable: 'code',
+    schema: [],
+    messages: {
+      negatedCondition: 'Unexpected negated condition in v-if with v-else.'
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    const sourceCode = context.sourceCode
+
+    const processedPairs = new Set()
+
+    /**
+     * @param {Expression} expression
+     * @returns {string}
+     */
+    function getConvertedCondition(expression) {
+      if (
+        expression.type === 'UnaryExpression' &&
+        expression.operator === '!'
+      ) {
+        return sourceCode.text.slice(
+          expression.range[0] + 1,
+          expression.range[1]
+        )
+      }
+
+      if (expression.type === 'BinaryExpression') {
+        const left = sourceCode.getText(expression.left)
+        const right = sourceCode.getText(expression.right)
+
+        if (expression.operator === '!=') {
+          return `${left} == ${right}`
+        } else if (expression.operator === '!==') {
+          return `${left} === ${right}`
+        }
+      }
+
+      return sourceCode.getText(expression)
+    }
+
+    /**
+     * @param {VIfDirective} node
+     */
+    function checkNegatedCondition(node) {
+      if (!node.value?.expression) {
+        return
+      }
+
+      const expression = node.value.expression
+      const element = node.parent.parent
+
+      if (
+        !isNegatedExpression(expression) ||
+        !isDirectlyFollowedByElse(element)
+      ) {
+        return
+      }
+
+      const elseElement = getNextSibling(element)
+      if (!elseElement) {
+        return
+      }
+
+      const pairKey = `${element.range[0]}-${elseElement.range[0]}`
+      if (processedPairs.has(pairKey)) {
+        return
+      }
+      processedPairs.add(pairKey)
+
+      context.report({
+        node: expression,
+        messageId: 'negatedCondition',
+        fix: (fixer) => swapElements(fixer, element, elseElement, expression)
+      })
+    }
+
+    /**
+     * @param {RuleFixer} fixer
+     * @param {VElement} ifElement
+     * @param {VElement} elseElement
+     * @param {Expression} expression
+     */
+    function* swapElements(fixer, ifElement, elseElement, expression) {
+      const convertedCondition = getConvertedCondition(expression)
+
+      const ifDir = getDirective(ifElement)
+      const elseDir = getDirective(elseElement)
+
+      if (!ifDir || !elseDir) {
+        return
+      }
+
+      const ifDirectiveName = ifDir.key.name.name
+
+      const ifText = sourceCode.text.slice(
+        ifElement.range[0],
+        ifElement.range[1]
+      )
+      const elseText = sourceCode.text.slice(
+        elseElement.range[0],
+        elseElement.range[1]
+      )
+
+      const newIfDirective = `v-${ifDirectiveName}="${convertedCondition}"`
+      const newIfText =
+        elseText.slice(0, elseDir.range[0] - elseElement.range[0]) +
+        newIfDirective +
+        elseText.slice(elseDir.range[1] - elseElement.range[0])
+
+      const newElseDirective = 'v-else'
+      const newElseText =
+        ifText.slice(0, ifDir.range[0] - ifElement.range[0]) +
+        newElseDirective +
+        ifText.slice(ifDir.range[1] - ifElement.range[0])
+
+      yield fixer.replaceTextRange(ifElement.range, newIfText)
+      yield fixer.replaceTextRange(elseElement.range, newElseText)
+    }
+
+    return utils.defineTemplateBodyVisitor(context, {
+      /** @param {VIfDirective} node */
+      "VAttribute[directive=true][key.name.name='if']"(node) {
+        checkNegatedCondition(node)
+      },
+      /** @param {VIfDirective} node */
+      "VAttribute[directive=true][key.name.name='else-if']"(node) {
+        checkNegatedCondition(node)
+      }
+    })
+  }
+}
diff --git a/lib/rules/no-parsing-error.js b/lib/rules/no-parsing-error.js
index e20d1763a..8b7ab8376 100644
--- a/lib/rules/no-parsing-error.js
+++ b/lib/rules/no-parsing-error.js
@@ -5,10 +5,6 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 // https://html.spec.whatwg.org/multipage/parsing.html#parse-errors
 const DEFAULT_OPTIONS = Object.freeze(
   Object.assign(Object.create(null), {
@@ -51,16 +47,12 @@ const DEFAULT_OPTIONS = Object.freeze(
   })
 )
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
     docs: {
       description: 'disallow parsing errors in `<template>`',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/no-parsing-error.html'
     },
     fixable: null,
@@ -75,7 +67,10 @@ module.exports = {
         ),
         additionalProperties: false
       }
-    ]
+    ],
+    messages: {
+      parsingError: 'Parsing error: {{message}}.'
+    }
   },
   /**
    * @param {RuleContext} context - The rule context.
@@ -99,7 +94,7 @@ module.exports = {
           context.report({
             node,
             loc: { line: error.lineNumber, column: error.column },
-            message: 'Parsing error: {{message}}.',
+            messageId: 'parsingError',
             data: {
               message: error.message.endsWith('.')
                 ? error.message.slice(0, -1)
diff --git a/lib/rules/no-potential-component-option-typo.js b/lib/rules/no-potential-component-option-typo.js
index 2ccfed861..4f1b02775 100644
--- a/lib/rules/no-potential-component-option-typo.js
+++ b/lib/rules/no-potential-component-option-typo.js
@@ -6,21 +6,16 @@
 
 const utils = require('../utils')
 const vueComponentOptions = require('../utils/vue-component-options.json')
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
-    hasSuggestions: true,
     type: 'suggestion',
     docs: {
       description: 'disallow a potential typo in your component property',
       categories: undefined,
-      recommended: false,
       url: 'https://eslint.vuejs.org/rules/no-potential-component-option-typo.html'
     },
     fixable: null,
+    hasSuggestions: true,
     schema: [
       {
         type: 'object',
@@ -47,7 +42,10 @@ module.exports = {
         },
         additionalProperties: false
       }
-    ]
+    ],
+    messages: {
+      potentialTypo: `'{{name}}' may be a typo, which is similar to option [{{option}}].`
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
@@ -107,7 +105,7 @@ module.exports = {
         if (potentialTypoList.length > 0) {
           context.report({
             node: id,
-            message: `'{{name}}' may be a typo, which is similar to option [{{option}}].`,
+            messageId: 'potentialTypo',
             data: {
               name,
               option: potentialTypoList.map(({ option }) => option).join(',')
diff --git a/lib/rules/no-ref-as-operand.js b/lib/rules/no-ref-as-operand.js
index 4f536dafe..7c141ad4f 100644
--- a/lib/rules/no-ref-as-operand.js
+++ b/lib/rules/no-ref-as-operand.js
@@ -3,16 +3,69 @@
  * See LICENSE file in root directory for full license.
  */
 'use strict'
-const { ReferenceTracker, findVariable } = require('eslint-utils')
+
+const { findVariable } = require('@eslint-community/eslint-utils')
+const { extractRefObjectReferences } = require('../utils/ref-object-references')
 const utils = require('../utils')
 
+/**
+ * @typedef {import('../utils/ref-object-references').RefObjectReferences} RefObjectReferences
+ * @typedef {import('../utils/ref-object-references').RefObjectReferenceForIdentifier} RefObjectReferenceForIdentifier
+ */
+
+/**
+ * Checks whether the given identifier reference has been initialized with a ref object.
+ * @param {RefObjectReferenceForIdentifier | null} data
+ * @returns {data is RefObjectReferenceForIdentifier}
+ */
+function isRefInit(data) {
+  const init = data && data.variableDeclarator && data.variableDeclarator.init
+  if (!init) {
+    return false
+  }
+  return data.defineChain.includes(/** @type {any} */ (init))
+}
+
+/**
+ * Get the callee member node from the given CallExpression
+ * @param {CallExpression} node CallExpression
+ */
+function getNameParamNode(node) {
+  const nameLiteralNode = node.arguments[0]
+  if (nameLiteralNode && utils.isStringLiteral(nameLiteralNode)) {
+    const name = utils.getStringLiteralValue(nameLiteralNode)
+    if (name != null) {
+      return { name, loc: nameLiteralNode.loc }
+    }
+  }
+
+  // cannot check
+  return null
+}
+
+/**
+ * Get the callee member node from the given CallExpression
+ * @param {CallExpression} node CallExpression
+ */
+function getCalleeMemberNode(node) {
+  const callee = utils.skipChainExpression(node.callee)
+
+  if (callee.type === 'MemberExpression') {
+    const name = utils.getStaticPropertyName(callee)
+    if (name) {
+      return { name, member: callee }
+    }
+  }
+  return null
+}
+
 module.exports = {
   meta: {
     type: 'suggestion',
     docs: {
       description:
         'disallow use of value wrapped by `ref()` (Composition API) as an operand',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/no-ref-as-operand.html'
     },
     fixable: 'code',
@@ -24,21 +77,31 @@ module.exports = {
   },
   /** @param {RuleContext} context */
   create(context) {
+    /** @type {RefObjectReferences} */
+    let refReferences
+    const setupContexts = new Map()
+
     /**
-     * @typedef {object} ReferenceData
-     * @property {VariableDeclarator} variableDeclarator
-     * @property {VariableDeclaration | null} variableDeclaration
-     * @property {string} method
+     * Collect identifier id
+     * @param {Identifier} node
+     * @param {Set<Identifier>} referenceIds
      */
-    /** @type {Map<Identifier, ReferenceData>} */
-    const refReferenceIds = new Map()
+    function collectReferenceIds(node, referenceIds) {
+      const variable = findVariable(utils.getScope(context, node), node)
+      if (!variable) {
+        return
+      }
+      for (const reference of variable.references) {
+        referenceIds.add(reference.identifier)
+      }
+    }
 
     /**
      * @param {Identifier} node
      */
     function reportIfRefWrapped(node) {
-      const data = refReferenceIds.get(node)
-      if (!data) {
+      const data = refReferences.get(node)
+      if (!isRefInit(data)) {
         return
       }
       context.report({
@@ -52,144 +115,213 @@ module.exports = {
         }
       })
     }
-    return {
-      Program() {
-        const tracker = new ReferenceTracker(context.getScope())
-        const traceMap = utils.createCompositionApiTraceMap({
-          [ReferenceTracker.ESM]: true,
-          ref: {
-            [ReferenceTracker.CALL]: true
-          },
-          computed: {
-            [ReferenceTracker.CALL]: true
-          },
-          toRef: {
-            [ReferenceTracker.CALL]: true
-          },
-          customRef: {
-            [ReferenceTracker.CALL]: true
-          },
-          shallowRef: {
-            [ReferenceTracker.CALL]: true
-          }
-        })
 
-        for (const { node, path } of tracker.iterateEsmReferences(traceMap)) {
-          const variableDeclarator = node.parent
-          if (
-            !variableDeclarator ||
-            variableDeclarator.type !== 'VariableDeclarator' ||
-            variableDeclarator.id.type !== 'Identifier'
-          ) {
-            continue
-          }
-          const variable = findVariable(
-            context.getScope(),
-            variableDeclarator.id
-          )
-          if (!variable) {
-            continue
-          }
-          const variableDeclaration =
-            (variableDeclarator.parent &&
-              variableDeclarator.parent.type === 'VariableDeclaration' &&
-              variableDeclarator.parent) ||
-            null
-          for (const reference of variable.references) {
-            if (!reference.isRead()) {
-              continue
-            }
-
-            refReferenceIds.set(reference.identifier, {
-              variableDeclarator,
-              variableDeclaration,
-              method: path[1]
-            })
-          }
-        }
-      },
-      // if (refValue)
-      /** @param {Identifier} node */
-      'IfStatement>Identifier'(node) {
-        reportIfRefWrapped(node)
-      },
-      // switch (refValue)
-      /** @param {Identifier} node */
-      'SwitchStatement>Identifier'(node) {
-        reportIfRefWrapped(node)
-      },
-      // -refValue, +refValue, !refValue, ~refValue, typeof refValue
-      /** @param {Identifier} node */
-      'UnaryExpression>Identifier'(node) {
-        reportIfRefWrapped(node)
-      },
-      // refValue++, refValue--
-      /** @param {Identifier} node */
-      'UpdateExpression>Identifier'(node) {
-        reportIfRefWrapped(node)
-      },
-      // refValue+1, refValue-1
-      /** @param {Identifier} node */
-      'BinaryExpression>Identifier'(node) {
-        reportIfRefWrapped(node)
-      },
-      // refValue+=1, refValue-=1, foo+=refValue, foo-=refValue
-      /** @param {Identifier & {parent: AssignmentExpression}} node */
-      'AssignmentExpression>Identifier'(node) {
-        if (node.parent.operator === '=' && node.parent.left !== node) {
-          return
-        }
+    /**
+     * @param {CallExpression} node
+     */
+    function reportWrappedIdentifiers(node) {
+      const nodes = node.arguments.filter((node) => node.type === 'Identifier')
+      for (const node of nodes) {
         reportIfRefWrapped(node)
-      },
-      // refValue || other, refValue && other. ignore: other || refValue
-      /** @param {Identifier & {parent: LogicalExpression}} node */
-      'LogicalExpression>Identifier'(node) {
-        if (node.parent.left !== node) {
+      }
+    }
+
+    const programNode = context.sourceCode.ast
+
+    const callVisitor = {
+      /**
+       * @param {CallExpression} node
+       * @param {import('../utils').VueObjectData} [info]
+       */
+      CallExpression(node, info) {
+        const nameWithLoc = getNameParamNode(node)
+        if (!nameWithLoc) {
+          // cannot check
           return
         }
-        // Report only constants.
-        const data = refReferenceIds.get(node)
-        if (!data) {
+
+        // verify setup context
+        const setupContext = setupContexts.get(info ? info.node : programNode)
+        if (!setupContext) {
           return
         }
+
+        const { contextReferenceIds, emitReferenceIds } = setupContext
         if (
-          !data.variableDeclaration ||
-          data.variableDeclaration.kind !== 'const'
+          node.callee.type === 'Identifier' &&
+          emitReferenceIds.has(node.callee)
         ) {
-          return
+          // verify setup(props,{emit}) {emit()}
+          reportWrappedIdentifiers(node)
+        } else {
+          const emit = getCalleeMemberNode(node)
+          if (
+            emit &&
+            emit.name === 'emit' &&
+            emit.member.object.type === 'Identifier' &&
+            contextReferenceIds.has(emit.member.object)
+          ) {
+            // verify setup(props,context) {context.emit()}
+            reportWrappedIdentifiers(node)
+          }
         }
-        reportIfRefWrapped(node)
-      },
-      // refValue ? x : y
-      /** @param {Identifier & {parent: ConditionalExpression}} node */
-      'ConditionalExpression>Identifier'(node) {
-        if (node.parent.test !== node) {
-          return
+      }
+    }
+
+    return utils.compositingVisitors(
+      {
+        Program() {
+          refReferences = extractRefObjectReferences(context)
+        },
+        // if (refValue)
+        /** @param {Identifier} node */
+        'IfStatement>Identifier'(node) {
+          reportIfRefWrapped(node)
+        },
+        // switch (refValue)
+        /** @param {Identifier} node */
+        'SwitchStatement>Identifier'(node) {
+          reportIfRefWrapped(node)
+        },
+        // -refValue, +refValue, !refValue, ~refValue, typeof refValue
+        /** @param {Identifier} node */
+        'UnaryExpression>Identifier'(node) {
+          reportIfRefWrapped(node)
+        },
+        // refValue++, refValue--
+        /** @param {Identifier} node */
+        'UpdateExpression>Identifier'(node) {
+          reportIfRefWrapped(node)
+        },
+        // refValue+1, refValue-1
+        /** @param {Identifier} node */
+        'BinaryExpression>Identifier'(node) {
+          reportIfRefWrapped(node)
+        },
+        // refValue+=1, refValue-=1, foo+=refValue, foo-=refValue
+        /** @param {Identifier & {parent: AssignmentExpression}} node */
+        'AssignmentExpression>Identifier'(node) {
+          if (node.parent.operator === '=' && node.parent.left !== node) {
+            return
+          }
+          reportIfRefWrapped(node)
+        },
+        // refValue || other, refValue && other. ignore: other || refValue
+        /** @param {Identifier & {parent: LogicalExpression}} node */
+        'LogicalExpression>Identifier'(node) {
+          if (node.parent.left !== node) {
+            return
+          }
+          // Report only constants.
+          const data = refReferences.get(node)
+          if (
+            !data ||
+            !data.variableDeclaration ||
+            data.variableDeclaration.kind !== 'const'
+          ) {
+            return
+          }
+          reportIfRefWrapped(node)
+        },
+        // refValue ? x : y
+        /** @param {Identifier & {parent: ConditionalExpression}} node */
+        'ConditionalExpression>Identifier'(node) {
+          if (node.parent.test !== node) {
+            return
+          }
+          reportIfRefWrapped(node)
+        },
+        // `${refValue}`
+        /** @param {Identifier} node */
+        ':not(TaggedTemplateExpression)>TemplateLiteral>Identifier'(node) {
+          reportIfRefWrapped(node)
+        },
+        // refValue.x
+        /** @param {Identifier & {parent: MemberExpression}} node */
+        'MemberExpression>Identifier'(node) {
+          if (node.parent.object !== node) {
+            return
+          }
+          const name = utils.getStaticPropertyName(node.parent)
+          if (
+            name === 'value' ||
+            name == null ||
+            // WritableComputedRef
+            name === 'effect'
+          ) {
+            return
+          }
+          reportIfRefWrapped(node)
         }
-        reportIfRefWrapped(node)
-      },
-      // `${refValue}`
-      /** @param {Identifier} node */
-      'TemplateLiteral>Identifier'(node) {
-        reportIfRefWrapped(node)
       },
-      // refValue.x
-      /** @param {Identifier & {parent: MemberExpression}} node */
-      'MemberExpression>Identifier'(node) {
-        if (node.parent.object !== node) {
-          return
-        }
-        const name = utils.getStaticPropertyName(node.parent)
-        if (
-          name === 'value' ||
-          name == null ||
-          // WritableComputedRef
-          name === 'effect'
-        ) {
-          return
+      utils.defineScriptSetupVisitor(context, {
+        onDefineEmitsEnter(node) {
+          if (
+            !node.parent ||
+            node.parent.type !== 'VariableDeclarator' ||
+            node.parent.init !== node
+          ) {
+            return
+          }
+
+          const emitParam = node.parent.id
+          if (emitParam.type !== 'Identifier') {
+            return
+          }
+
+          // const emit = defineEmits()
+          const emitReferenceIds = new Set()
+          collectReferenceIds(emitParam, emitReferenceIds)
+
+          setupContexts.set(programNode, {
+            contextReferenceIds: new Set(),
+            emitReferenceIds
+          })
+        },
+        ...callVisitor
+      }),
+      utils.defineVueVisitor(context, {
+        onSetupFunctionEnter(node, { node: vueNode }) {
+          const contextParam = utils.skipDefaultParamValue(node.params[1])
+          if (!contextParam) {
+            // no arguments
+            return
+          }
+          if (
+            contextParam.type === 'RestElement' ||
+            contextParam.type === 'ArrayPattern'
+          ) {
+            // cannot check
+            return
+          }
+
+          const contextReferenceIds = new Set()
+          const emitReferenceIds = new Set()
+          if (contextParam.type === 'ObjectPattern') {
+            const emitProperty = utils.findAssignmentProperty(
+              contextParam,
+              'emit'
+            )
+            if (!emitProperty || emitProperty.value.type !== 'Identifier') {
+              return
+            }
+
+            // `setup(props, {emit})`
+            collectReferenceIds(emitProperty.value, emitReferenceIds)
+          } else {
+            // `setup(props, context)`
+            collectReferenceIds(contextParam, contextReferenceIds)
+          }
+          setupContexts.set(vueNode, {
+            contextReferenceIds,
+            emitReferenceIds
+          })
+        },
+        ...callVisitor,
+        onVueObjectExit(node) {
+          setupContexts.delete(node)
         }
-        reportIfRefWrapped(node)
-      }
-    }
+      })
+    )
   }
 }
diff --git a/lib/rules/no-ref-object-reactivity-loss.js b/lib/rules/no-ref-object-reactivity-loss.js
new file mode 100644
index 000000000..22f11b5ff
--- /dev/null
+++ b/lib/rules/no-ref-object-reactivity-loss.js
@@ -0,0 +1,171 @@
+/**
+ * @author Yosuke Ota <https://github.com/ota-meshi>
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+const {
+  extractRefObjectReferences,
+  extractReactiveVariableReferences
+} = require('../utils/ref-object-references')
+
+/**
+ * @typedef {import('../utils/ref-object-references').RefObjectReferences} RefObjectReferences
+ * @typedef {import('../utils/ref-object-references').RefObjectReference} RefObjectReference
+ */
+
+/**
+ * Checks whether writing assigns a value to the given pattern.
+ * @param {Pattern | AssignmentProperty | Property} node
+ * @returns {boolean}
+ */
+function isUpdate(node) {
+  const parent = node.parent
+  if (parent.type === 'UpdateExpression' && parent.argument === node) {
+    // e.g. `pattern++`
+    return true
+  }
+  if (parent.type === 'AssignmentExpression' && parent.left === node) {
+    // e.g. `pattern = 42`
+    return true
+  }
+  if (
+    (parent.type === 'Property' && parent.value === node) ||
+    parent.type === 'ArrayPattern' ||
+    (parent.type === 'ObjectPattern' &&
+      parent.properties.includes(/** @type {any} */ (node))) ||
+    (parent.type === 'AssignmentPattern' && parent.left === node) ||
+    parent.type === 'RestElement' ||
+    (parent.type === 'MemberExpression' && parent.object === node)
+  ) {
+    return isUpdate(parent)
+  }
+  return false
+}
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'disallow usages of ref objects that can lead to loss of reactivity',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/no-ref-object-reactivity-loss.html'
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      getValueInSameScope:
+        'Getting a value from the ref object in the same scope will cause the value to lose reactivity.',
+      getReactiveVariableInSameScope:
+        'Getting a reactive variable in the same scope will cause the value to lose reactivity.'
+    }
+  },
+  /**
+   * @param {RuleContext} context
+   * @returns {RuleListener}
+   */
+  create(context) {
+    /**
+     * @typedef {object} ScopeStack
+     * @property {ScopeStack | null} upper
+     * @property {Program | FunctionExpression | FunctionDeclaration | ArrowFunctionExpression} node
+     */
+    /** @type {ScopeStack} */
+    let scopeStack = { upper: null, node: context.sourceCode.ast }
+    /** @type {Map<CallExpression, ScopeStack>} */
+    const scopes = new Map()
+
+    const refObjectReferences = extractRefObjectReferences(context)
+    const reactiveVariableReferences =
+      extractReactiveVariableReferences(context)
+
+    /**
+     * Verify the given ref object value. `refObj = ref(); refObj.value;`
+     * @param {Expression | Super | ObjectPattern} node
+     */
+    function verifyRefObjectValue(node) {
+      const ref = refObjectReferences.get(node)
+      if (!ref) {
+        return
+      }
+      if (scopes.get(ref.define) !== scopeStack) {
+        // Not in the same scope
+        return
+      }
+
+      context.report({
+        node,
+        messageId: 'getValueInSameScope'
+      })
+    }
+
+    /**
+     * Verify the given reactive variable. `refVal = $ref(); refVal;`
+     * @param {Identifier} node
+     */
+    function verifyReactiveVariable(node) {
+      const ref = reactiveVariableReferences.get(node)
+      if (!ref || ref.escape) {
+        return
+      }
+      if (scopes.get(ref.define) !== scopeStack) {
+        // Not in the same scope
+        return
+      }
+
+      context.report({
+        node,
+        messageId: 'getReactiveVariableInSameScope'
+      })
+    }
+
+    return {
+      ':function'(node) {
+        scopeStack = { upper: scopeStack, node }
+      },
+      ':function:exit'() {
+        scopeStack = scopeStack.upper || scopeStack
+      },
+      CallExpression(node) {
+        scopes.set(node, scopeStack)
+      },
+      /**
+       * Check for `refObj.value`.
+       */
+      'MemberExpression:exit'(node) {
+        if (isUpdate(node)) {
+          // e.g. `refObj.value = 42`, `refObj.value++`
+          return
+        }
+        const name = utils.getStaticPropertyName(node)
+        if (name !== 'value') {
+          return
+        }
+        verifyRefObjectValue(node.object)
+      },
+      /**
+       * Check for `{value} = refObj`.
+       */
+      'ObjectPattern:exit'(node) {
+        const prop = utils.findAssignmentProperty(node, 'value')
+        if (!prop) {
+          return
+        }
+        verifyRefObjectValue(node)
+      },
+      /**
+       * Check for reactive variable`.
+       * @param {Identifier} node
+       */
+      'Identifier:exit'(node) {
+        if (isUpdate(node)) {
+          // e.g. `reactiveVariable = 42`, `reactiveVariable++`
+          return
+        }
+        verifyReactiveVariable(node)
+      }
+    }
+  }
+}
diff --git a/lib/rules/no-required-prop-with-default.js b/lib/rules/no-required-prop-with-default.js
new file mode 100644
index 000000000..b6371fc3b
--- /dev/null
+++ b/lib/rules/no-required-prop-with-default.js
@@ -0,0 +1,148 @@
+/**
+ * @author @neferqiqi
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+const utils = require('../utils')
+/**
+ * @typedef {import('../utils').ComponentTypeProp} ComponentTypeProp
+ * @typedef {import('../utils').ComponentArrayProp} ComponentArrayProp
+ * @typedef {import('../utils').ComponentObjectProp} ComponentObjectProp
+ * @typedef {import('../utils').ComponentUnknownProp} ComponentUnknownProp
+ * @typedef {import('../utils').ComponentProp} ComponentProp
+ */
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'enforce props with default values to be optional',
+      categories: ['vue2-recommended', 'vue3-recommended'],
+      url: 'https://eslint.vuejs.org/rules/no-required-prop-with-default.html'
+    },
+    fixable: 'code',
+    hasSuggestions: true,
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          autofix: {
+            type: 'boolean'
+          }
+        },
+        additionalProperties: false
+      }
+    ],
+    messages: {
+      requireOptional: `Prop "{{ key }}" should be optional.`,
+      fixRequiredProp: `Change this prop to be optional.`
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    let canAutoFix = false
+    const option = context.options[0]
+    if (option) {
+      canAutoFix = option.autofix
+    }
+
+    /**
+     * @param {ComponentProp} prop
+     * @param {Set<string>} [defaultProps]
+     **/
+    const handleObjectProp = (prop, defaultProps) => {
+      if (
+        prop.type === 'object' &&
+        prop.propName &&
+        prop.value.type === 'ObjectExpression' &&
+        (utils.findProperty(prop.value, 'default') ||
+          defaultProps?.has(prop.propName))
+      ) {
+        const requiredProperty = utils.findProperty(prop.value, 'required')
+        if (!requiredProperty) return
+        const requiredNode = requiredProperty.value
+        if (
+          requiredNode &&
+          requiredNode.type === 'Literal' &&
+          !!requiredNode.value
+        ) {
+          context.report({
+            node: prop.node,
+            loc: prop.node.loc,
+            data: {
+              key: prop.propName
+            },
+            messageId: 'requireOptional',
+            fix: canAutoFix
+              ? (fixer) => fixer.replaceText(requiredNode, 'false')
+              : null,
+            suggest: canAutoFix
+              ? null
+              : [
+                  {
+                    messageId: 'fixRequiredProp',
+                    fix: (fixer) => fixer.replaceText(requiredNode, 'false')
+                  }
+                ]
+          })
+        }
+      } else if (
+        prop.type === 'type' &&
+        defaultProps?.has(prop.propName) &&
+        prop.required
+      ) {
+        // skip setter & getter case
+        if (
+          prop.node.type === 'TSMethodSignature' &&
+          (prop.node.kind === 'get' || prop.node.kind === 'set')
+        ) {
+          return
+        }
+        // skip computed
+        if (prop.node.computed) {
+          return
+        }
+        context.report({
+          node: prop.node,
+          loc: prop.node.loc,
+          data: {
+            key: prop.propName
+          },
+          messageId: 'requireOptional',
+          fix: canAutoFix
+            ? (fixer) => fixer.insertTextAfter(prop.key, '?')
+            : null,
+          suggest: canAutoFix
+            ? null
+            : [
+                {
+                  messageId: 'fixRequiredProp',
+                  fix: (fixer) => fixer.insertTextAfter(prop.key, '?')
+                }
+              ]
+        })
+      }
+    }
+
+    return utils.compositingVisitors(
+      utils.defineVueVisitor(context, {
+        onVueObjectEnter(node) {
+          utils
+            .getComponentPropsFromOptions(node)
+            .map((prop) => handleObjectProp(prop))
+        }
+      }),
+      utils.defineScriptSetupVisitor(context, {
+        onDefinePropsEnter(node, props) {
+          const defaultProps = new Set([
+            ...Object.keys(utils.getWithDefaultsPropExpressions(node)),
+            ...Object.keys(
+              utils.getDefaultPropExpressionsForPropsDestructure(node)
+            )
+          ])
+          props.map((prop) => handleObjectProp(prop, defaultProps))
+        }
+      })
+    )
+  }
+}
diff --git a/lib/rules/no-reserved-component-names.js b/lib/rules/no-reserved-component-names.js
index 81b035300..56621b424 100644
--- a/lib/rules/no-reserved-component-names.js
+++ b/lib/rules/no-reserved-component-names.js
@@ -34,23 +34,6 @@ function isLowercase(word) {
   return /^[a-z]*$/.test(word)
 }
 
-const RESERVED_NAMES_IN_HTML = new Set([
-  ...htmlElements,
-  ...htmlElements.map(casing.capitalize)
-])
-const RESERVED_NAMES_IN_OTHERS = new Set([
-  ...deprecatedHtmlElements,
-  ...deprecatedHtmlElements.map(casing.capitalize),
-  ...kebabCaseElements,
-  ...kebabCaseElements.map(casing.pascalCase),
-  ...svgElements,
-  ...svgElements.filter(isLowercase).map(casing.capitalize)
-])
-
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 /**
  * @param {Expression | SpreadElement} node
  * @returns {node is (Literal | TemplateLiteral)}
@@ -65,14 +48,14 @@ function canVerify(node) {
 }
 
 /**
- * @param {string} name
- * @returns {string}
+ * @template T
+ * @param {Set<T>} set
+ * @param {Iterable<T>} iterable
  */
-function getMessageId(name) {
-  if (RESERVED_NAMES_IN_HTML.has(name)) return 'reservedInHtml'
-  if (RESERVED_NAMES_IN_VUE.has(name)) return 'reservedInVue'
-  if (RESERVED_NAMES_IN_VUE3.has(name)) return 'reservedInVue3'
-  return 'reserved'
+function addAll(set, iterable) {
+  for (const element of iterable) {
+    set.add(element)
+  }
 }
 
 module.exports = {
@@ -81,7 +64,7 @@ module.exports = {
     docs: {
       description:
         'disallow the use of reserved names in component definitions',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/no-reserved-component-names.html'
     },
     fixable: null,
@@ -94,6 +77,9 @@ module.exports = {
           },
           disallowVue3BuiltInComponents: {
             type: 'boolean'
+          },
+          htmlElementCaseSensitive: {
+            type: 'boolean'
           }
         },
         additionalProperties: false
@@ -113,6 +99,23 @@ module.exports = {
       options.disallowVueBuiltInComponents === true
     const disallowVue3BuiltInComponents =
       options.disallowVue3BuiltInComponents === true
+    const htmlElementCaseSensitive = options.htmlElementCaseSensitive === true
+
+    const RESERVED_NAMES_IN_HTML = new Set(htmlElements)
+    const RESERVED_NAMES_IN_OTHERS = new Set([
+      ...deprecatedHtmlElements,
+      ...kebabCaseElements,
+      ...svgElements
+    ])
+
+    if (!htmlElementCaseSensitive) {
+      addAll(RESERVED_NAMES_IN_HTML, htmlElements.map(casing.capitalize))
+      addAll(RESERVED_NAMES_IN_OTHERS, [
+        ...deprecatedHtmlElements.map(casing.capitalize),
+        ...kebabCaseElements.map(casing.pascalCase),
+        ...svgElements.filter(isLowercase).map(casing.capitalize)
+      ])
+    }
 
     const reservedNames = new Set([
       ...RESERVED_NAMES_IN_HTML,
@@ -121,6 +124,17 @@ module.exports = {
       ...RESERVED_NAMES_IN_OTHERS
     ])
 
+    /**
+     * @param {string} name
+     * @returns {string}
+     */
+    function getMessageId(name) {
+      if (RESERVED_NAMES_IN_HTML.has(name)) return 'reservedInHtml'
+      if (RESERVED_NAMES_IN_VUE.has(name)) return 'reservedInVue'
+      if (RESERVED_NAMES_IN_VUE3.has(name)) return 'reservedInVue3'
+      return 'reserved'
+    }
+
     /**
      * @param {Literal | TemplateLiteral} node
      */
@@ -151,8 +165,7 @@ module.exports = {
       })
     }
 
-    return Object.assign(
-      {},
+    return utils.compositingVisitors(
       utils.executeOnCallVueComponent(context, (node) => {
         if (node.arguments.length === 2) {
           const argument = node.arguments[0]
@@ -175,6 +188,17 @@ module.exports = {
         if (!node) return
         if (!canVerify(node.value)) return
         reportIfInvalid(node.value)
+      }),
+      utils.defineScriptSetupVisitor(context, {
+        onDefineOptionsEnter(node) {
+          if (node.arguments.length === 0) return
+          const define = node.arguments[0]
+          if (define.type !== 'ObjectExpression') return
+          const nameNode = utils.findProperty(define, 'name')
+          if (!nameNode) return
+          if (!canVerify(nameNode.value)) return
+          reportIfInvalid(nameNode.value)
+        }
       })
     )
   }
diff --git a/lib/rules/no-reserved-keys.js b/lib/rules/no-reserved-keys.js
index a8e787734..c13ce1e4c 100644
--- a/lib/rules/no-reserved-keys.js
+++ b/lib/rules/no-reserved-keys.js
@@ -10,10 +10,6 @@ const utils = require('../utils')
  * @typedef {import('../utils').GroupName} GroupName
  */
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 const RESERVED_KEYS = require('../utils/vue-reserved.json')
 /** @type {GroupName[]} */
 const GROUP_NAMES = [
@@ -30,7 +26,7 @@ module.exports = {
     type: 'suggestion',
     docs: {
       description: 'disallow overwriting reserved keys',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/no-reserved-keys.html'
     },
     fixable: null,
@@ -63,10 +59,6 @@ module.exports = {
     ])
     const groups = new Set([...GROUP_NAMES, ...(options.groups || [])])
 
-    // ----------------------------------------------------------------------
-    // Public
-    // ----------------------------------------------------------------------
-
     return utils.compositingVisitors(
       utils.defineScriptSetupVisitor(context, {
         onDefinePropsEnter(_node, props) {
diff --git a/lib/rules/no-reserved-props.js b/lib/rules/no-reserved-props.js
index 44ba54dfd..bafc6ef15 100644
--- a/lib/rules/no-reserved-props.js
+++ b/lib/rules/no-reserved-props.js
@@ -4,10 +4,6 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 const casing = require('../utils/casing')
 
@@ -15,25 +11,17 @@ const casing = require('../utils/casing')
  * @typedef {import('../utils').ComponentProp} ComponentProp
  */
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 const RESERVED = {
   3: ['key', 'ref'],
   2: ['key', 'ref', 'is', 'slot', 'slot-scope', 'slotScope', 'class', 'style']
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
     docs: {
       description: 'disallow reserved names in props',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/no-reserved-props.html',
       defaultOptions: {
         vue2: [{ vueVersion: 2 }]
diff --git a/lib/rules/no-restricted-block.js b/lib/rules/no-restricted-block.js
index 8fc2b51be..5a7f56afc 100644
--- a/lib/rules/no-restricted-block.js
+++ b/lib/rules/no-restricted-block.js
@@ -12,30 +12,16 @@ const regexp = require('../utils/regexp')
  * @property {string} [message]
  */
 
-/**
- * @param {string} str
- * @returns {(str: string) => boolean}
- */
-function buildMatcher(str) {
-  if (regexp.isRegExp(str)) {
-    const re = regexp.toRegExp(str)
-    return (s) => {
-      re.lastIndex = 0
-      return re.test(s)
-    }
-  }
-  return (s) => s === str
-}
 /**
  * @param {any} option
  * @returns {ParsedOption}
  */
 function parseOption(option) {
   if (typeof option === 'string') {
-    const matcher = buildMatcher(option)
+    const matcher = regexp.toRegExp(option, { remove: 'g' })
     return {
       test(block) {
-        return matcher(block.rawName)
+        return matcher.test(block.rawName)
       }
     }
   }
@@ -90,9 +76,10 @@ module.exports = {
     /** @type {ParsedOption[]} */
     const options = context.options.map(parseOption)
 
+    const sourceCode = context.sourceCode
     const documentFragment =
-      context.parserServices.getDocumentFragment &&
-      context.parserServices.getDocumentFragment()
+      sourceCode.parserServices.getDocumentFragment &&
+      sourceCode.parserServices.getDocumentFragment()
 
     function getTopLevelHTMLElements() {
       if (documentFragment) {
diff --git a/lib/rules/no-restricted-call-after-await.js b/lib/rules/no-restricted-call-after-await.js
index f4f3b6d38..c28875fc3 100644
--- a/lib/rules/no-restricted-call-after-await.js
+++ b/lib/rules/no-restricted-call-after-await.js
@@ -5,12 +5,12 @@
 'use strict'
 const fs = require('fs')
 const path = require('path')
-const { ReferenceTracker } = require('eslint-utils')
+const { ReferenceTracker } = require('@eslint-community/eslint-utils')
 const utils = require('../utils')
 
 /**
- * @typedef {import('eslint-utils').TYPES.TraceMap} TraceMap
- * @typedef {import('eslint-utils').TYPES.TraceKind} TraceKind
+ * @typedef {import('@eslint-community/eslint-utils').TYPES.TraceMap} TraceMap
+ * @typedef {import('@eslint-community/eslint-utils').TYPES.TraceKind} TraceKind
  */
 
 /**
@@ -21,7 +21,7 @@ function safeRequireResolve(id) {
     if (fs.statSync(id).isDirectory()) {
       return require.resolve(id)
     }
-  } catch (_error) {
+  } catch {
     // ignore
   }
   return id
@@ -43,7 +43,7 @@ module.exports = {
         properties: {
           module: { type: 'string' },
           path: {
-            anyOf: [
+            oneOf: [
               { type: 'string' },
               {
                 type: 'array',
@@ -96,7 +96,7 @@ module.exports = {
     function getAllLocalImports(ast) {
       if (!allLocalImports) {
         allLocalImports = {}
-        const dir = path.dirname(context.getFilename())
+        const dir = path.dirname(context.filename)
         for (const body of ast.body) {
           if (body.type !== 'ImportDeclaration') {
             continue
@@ -115,13 +115,6 @@ module.exports = {
       return allLocalImports
     }
 
-    function getCwd() {
-      if (context.getCwd) {
-        return context.getCwd()
-      }
-      return path.resolve('')
-    }
-
     /**
      * @param {string} moduleName
      * @param {Program} ast
@@ -131,7 +124,7 @@ module.exports = {
       /** @type {string} */
       let modulePath
       if (moduleName.startsWith('.')) {
-        modulePath = safeRequireResolve(path.join(getCwd(), moduleName))
+        modulePath = safeRequireResolve(path.join(context.cwd, moduleName))
       } else if (path.isAbsolute(moduleName)) {
         modulePath = safeRequireResolve(moduleName)
       } else {
@@ -144,7 +137,7 @@ module.exports = {
       {
         /** @param {Program} node */
         Program(node) {
-          const tracker = new ReferenceTracker(context.getScope())
+          const tracker = new ReferenceTracker(utils.getScope(context, node))
 
           for (const option of context.options) {
             const modules = normalizeModules(option.module, node)
diff --git a/lib/rules/no-restricted-class.js b/lib/rules/no-restricted-class.js
index aa921349f..1a74fd249 100644
--- a/lib/rules/no-restricted-class.js
+++ b/lib/rules/no-restricted-class.js
@@ -4,23 +4,18 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
 const utils = require('../utils')
+const regexp = require('../utils/regexp')
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
 /**
  * Report a forbidden class
  * @param {string} className
  * @param {*} node
  * @param {RuleContext} context
- * @param {Set<string>} forbiddenClasses
+ * @param {(name: string) => boolean} isForbiddenClass
  */
-const reportForbiddenClass = (className, node, context, forbiddenClasses) => {
-  if (forbiddenClasses.has(className)) {
+const reportForbiddenClass = (className, node, context, isForbiddenClass) => {
+  if (isForbiddenClass(className)) {
     const loc = node.value ? node.value.loc : node.loc
     context.report({
       node,
@@ -96,9 +91,6 @@ function* extractClassNames(node, textOnly) {
   }
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
 module.exports = {
   meta: {
     type: 'problem',
@@ -108,28 +100,29 @@ module.exports = {
       categories: undefined
     },
     fixable: null,
-    messages: {
-      forbiddenClass: "'{{class}}' class is not allowed."
-    },
     schema: {
       type: 'array',
       items: {
         type: 'string'
       }
+    },
+    messages: {
+      forbiddenClass: "'{{class}}' class is not allowed."
     }
   },
 
   /** @param {RuleContext} context */
   create(context) {
-    const forbiddenClasses = new Set(context.options || [])
+    const { options = [] } = context
+    const isForbiddenClass = regexp.toRegExpGroupMatcher(options)
 
     return utils.defineTemplateBodyVisitor(context, {
       /**
        * @param {VAttribute & { value: VLiteral } } node
        */
-      'VAttribute[directive=false][key.name="class"]'(node) {
+      'VAttribute[directive=false][key.name="class"][value!=null]'(node) {
         for (const className of node.value.value.split(/\s+/)) {
-          reportForbiddenClass(className, node, context, forbiddenClasses)
+          reportForbiddenClass(className, node, context, isForbiddenClass)
         }
       },
 
@@ -144,7 +137,7 @@ module.exports = {
         for (const { className, reportNode } of extractClassNames(
           /** @type {Expression} */ (node.expression)
         )) {
-          reportForbiddenClass(className, reportNode, context, forbiddenClasses)
+          reportForbiddenClass(className, reportNode, context, isForbiddenClass)
         }
       }
     })
diff --git a/lib/rules/no-restricted-component-names.js b/lib/rules/no-restricted-component-names.js
new file mode 100644
index 000000000..df5ad4a23
--- /dev/null
+++ b/lib/rules/no-restricted-component-names.js
@@ -0,0 +1,157 @@
+/**
+ * @author ItMaga <https://github.com/ItMaga>
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+const casing = require('../utils/casing')
+const { isRegExp, toRegExp } = require('../utils/regexp')
+
+/**
+ * @typedef {object} OptionParsed
+ * @property { (name: string) => boolean } test
+ * @property {string|undefined} [message]
+ * @property {string|undefined} [suggest]
+ */
+
+/**
+ * @param {string} str
+ * @returns {(str: string) => boolean}
+ * @private
+ */
+function buildMatcher(str) {
+  if (isRegExp(str)) {
+    const regex = toRegExp(str, { remove: 'g' })
+    return (s) => regex.test(s)
+  }
+  return (s) => s === casing.pascalCase(str) || s === casing.kebabCase(str)
+}
+
+/**
+ * @param {string|{name: string, message?: string, suggest?: string}} option
+ * @returns {OptionParsed}
+ * @private
+ * */
+function parseOption(option) {
+  if (typeof option === 'string') {
+    const matcher = buildMatcher(option)
+    return { test: matcher }
+  }
+  const parsed = parseOption(option.name)
+  parsed.message = option.message
+  parsed.suggest = option.suggest
+  return parsed
+}
+
+/**
+ * @param {Property | AssignmentProperty} property
+ * @param {string | undefined} suggest
+ * @returns {Rule.SuggestionReportDescriptor[]}
+ * @private
+ * */
+function createSuggest(property, suggest) {
+  if (!suggest) {
+    return []
+  }
+
+  return [
+    {
+      fix(fixer) {
+        return fixer.replaceText(property.value, JSON.stringify(suggest))
+      },
+      messageId: 'suggest',
+      data: { suggest }
+    }
+  ]
+}
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'disallow specific component names',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/no-restricted-component-names.html'
+    },
+    fixable: null,
+    hasSuggestions: true,
+    schema: {
+      type: 'array',
+      items: {
+        oneOf: [
+          { type: 'string' },
+          {
+            type: 'object',
+            properties: {
+              name: { type: 'string' },
+              message: { type: 'string', minLength: 1 },
+              suggest: { type: 'string' }
+            },
+            required: ['name'],
+            additionalProperties: false
+          }
+        ]
+      },
+      uniqueItems: true,
+      minItems: 0
+    },
+    messages: {
+      // eslint-disable-next-line eslint-plugin/report-message-format
+      disallow: '{{message}}',
+      suggest: 'Instead, change to `{{suggest}}`.'
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    /** @type {OptionParsed[]} */
+    const options = context.options.map(parseOption)
+
+    /**
+     * @param {ObjectExpression} node
+     */
+    function verify(node) {
+      const property = utils.findProperty(node, 'name')
+      if (!property) return
+
+      const propertyName = utils.getStaticPropertyName(property)
+      if (propertyName === 'name' && property.value.type === 'Literal') {
+        const componentName = property.value.value?.toString()
+        if (!componentName) {
+          return
+        }
+
+        for (const option of options) {
+          if (option.test(componentName)) {
+            context.report({
+              node: property.value,
+              messageId: 'disallow',
+              data: {
+                message:
+                  option.message ||
+                  `Using component name \`${componentName}\` is not allowed.`
+              },
+              suggest: createSuggest(property, option.suggest)
+            })
+          }
+        }
+      }
+    }
+
+    return utils.compositingVisitors(
+      utils.defineVueVisitor(context, {
+        onVueObjectEnter(node) {
+          verify(node)
+        }
+      }),
+      utils.defineScriptSetupVisitor(context, {
+        onDefineOptionsEnter(node) {
+          const expression = node.arguments[0]
+          if (expression.type === 'ObjectExpression') {
+            verify(expression)
+          }
+        }
+      })
+    )
+  }
+}
diff --git a/lib/rules/no-restricted-component-options.js b/lib/rules/no-restricted-component-options.js
index f50f091d5..227a89382 100644
--- a/lib/rules/no-restricted-component-options.js
+++ b/lib/rules/no-restricted-component-options.js
@@ -23,21 +23,6 @@ const regexp = require('../utils/regexp')
  * @typedef { (node: Property | SpreadElement) => (MatchResult | null) } Tester
  */
 
-/**
- * @param {string} str
- * @returns {Matcher}
- */
-function buildMatcher(str) {
-  if (regexp.isRegExp(str)) {
-    const re = regexp.toRegExp(str)
-    return (s) => {
-      re.lastIndex = 0
-      return re.test(s)
-    }
-  }
-  return (s) => s === str
-}
-
 /**
  * @param {string | string[] | { name: string | string[], message?: string } } option
  * @returns {ParsedOption}
@@ -65,7 +50,8 @@ function parseOption(option) {
     if (name === '*') {
       steps.push({ wildcard: true })
     } else {
-      steps.push({ test: buildMatcher(name) })
+      const matcher = regexp.toRegExp(name, { remove: 'g' })
+      steps.push({ test: (value) => matcher.test(value) })
     }
   }
   const message = option.message
@@ -139,7 +125,7 @@ module.exports = {
             type: 'object',
             properties: {
               name: {
-                anyOf: [
+                oneOf: [
                   { type: 'string' },
                   {
                     type: 'array',
@@ -173,13 +159,25 @@ module.exports = {
     /** @type {ParsedOption[]} */
     const options = context.options.map(parseOption)
 
-    return utils.defineVueVisitor(context, {
-      onVueObjectEnter(node) {
-        for (const option of options) {
-          verify(node, option.test, option.message)
+    return utils.compositingVisitors(
+      utils.defineVueVisitor(context, {
+        onVueObjectEnter(node) {
+          for (const option of options) {
+            verify(node, option.test, option.message)
+          }
         }
-      }
-    })
+      }),
+      utils.defineScriptSetupVisitor(context, {
+        onDefineOptionsEnter(node) {
+          if (node.arguments.length === 0) return
+          const define = node.arguments[0]
+          if (define.type !== 'ObjectExpression') return
+          for (const option of options) {
+            verify(define, option.test, option.message)
+          }
+        }
+      })
+    )
 
     /**
      * @param {ObjectExpression} node
diff --git a/lib/rules/no-restricted-custom-event.js b/lib/rules/no-restricted-custom-event.js
index 22d128cd8..8f9a4bf91 100644
--- a/lib/rules/no-restricted-custom-event.js
+++ b/lib/rules/no-restricted-custom-event.js
@@ -4,18 +4,10 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const { findVariable } = require('eslint-utils')
+const { findVariable } = require('@eslint-community/eslint-utils')
 const utils = require('../utils')
 const regexp = require('../utils/regexp')
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 /**
  * @typedef {object} ParsedOption
  * @property { (name: string) => boolean } test
@@ -23,30 +15,16 @@ const regexp = require('../utils/regexp')
  * @property {string|undefined} [suggest]
  */
 
-/**
- * @param {string} str
- * @returns {(str: string) => boolean}
- */
-function buildMatcher(str) {
-  if (regexp.isRegExp(str)) {
-    const re = regexp.toRegExp(str)
-    return (s) => {
-      re.lastIndex = 0
-      return re.test(s)
-    }
-  }
-  return (s) => s === str
-}
 /**
  * @param {string|{event: string, message?: string, suggest?: string}} option
  * @returns {ParsedOption}
  */
 function parseOption(option) {
   if (typeof option === 'string') {
-    const matcher = buildMatcher(option)
+    const matcher = regexp.toRegExp(option, { remove: 'g' })
     return {
       test(name) {
-        return matcher(name)
+        return matcher.test(name)
       }
     }
   }
@@ -56,23 +34,28 @@ function parseOption(option) {
   return parsed
 }
 
+/**
+ * @typedef {object} NameWithLoc
+ * @property {string} name
+ * @property {SourceLocation} loc
+ * @property {Range} range
+ */
 /**
  * Get the name param node from the given CallExpression
  * @param {CallExpression} node CallExpression
- * @returns { Literal & { value: string } | null }
+ * @returns { NameWithLoc | null }
  */
 function getNameParamNode(node) {
   const nameLiteralNode = node.arguments[0]
-  if (
-    !nameLiteralNode ||
-    nameLiteralNode.type !== 'Literal' ||
-    typeof nameLiteralNode.value !== 'string'
-  ) {
-    // cannot check
-    return null
+  if (nameLiteralNode && utils.isStringLiteral(nameLiteralNode)) {
+    const name = utils.getStringLiteralValue(nameLiteralNode)
+    if (name != null) {
+      return { name, loc: nameLiteralNode.loc, range: nameLiteralNode.range }
+    }
   }
 
-  return /** @type {Literal & { value: string }} */ (nameLiteralNode)
+  // cannot check
+  return null
 }
 /**
  * Get the callee member node from the given CallExpression
@@ -91,7 +74,6 @@ function getCalleeMemberNode(node) {
 }
 module.exports = {
   meta: {
-    hasSuggestions: true,
     type: 'suggestion',
     docs: {
       description: 'disallow specific custom event',
@@ -99,6 +81,7 @@ module.exports = {
       url: 'https://eslint.vuejs.org/rules/no-restricted-custom-event.html'
     },
     fixable: null,
+    hasSuggestions: true,
     schema: {
       type: 'array',
       items: {
@@ -134,32 +117,32 @@ module.exports = {
     const options = context.options.map(parseOption)
 
     /**
-     * @param { Literal & { value: string } } nameLiteralNode
+     * @param { NameWithLoc } nameWithLoc
      */
-    function verify(nameLiteralNode) {
-      const name = nameLiteralNode.value
+    function verify(nameWithLoc) {
+      const name = nameWithLoc.name
 
       for (const option of options) {
         if (option.test(name)) {
           const message =
             option.message || `Using \`${name}\` event is not allowed.`
           context.report({
-            node: nameLiteralNode,
+            loc: nameWithLoc.loc,
             messageId: 'restrictedEvent',
             data: { message },
             suggest: option.suggest
               ? [
                   {
                     fix(fixer) {
-                      const sourceCode = context.getSourceCode()
-                      return fixer.replaceText(
-                        nameLiteralNode,
+                      const sourceCode = context.sourceCode
+                      return fixer.replaceTextRange(
+                        nameWithLoc.range,
                         `${
-                          sourceCode.text[nameLiteralNode.range[0]]
+                          sourceCode.text[nameWithLoc.range[0]]
                         }${JSON.stringify(option.suggest)
                           .slice(1, -1)
-                          .replace(/'/gu, "\\'")}${
-                          sourceCode.text[nameLiteralNode.range[1] - 1]
+                          .replace(/'/gu, String.raw`\'`)}${
+                          sourceCode.text[nameWithLoc.range[1] - 1]
                         }`
                       )
                     },
@@ -179,13 +162,13 @@ module.exports = {
       {
         CallExpression(node) {
           const callee = node.callee
-          const nameLiteralNode = getNameParamNode(node)
-          if (!nameLiteralNode) {
+          const nameWithLoc = getNameParamNode(node)
+          if (!nameWithLoc) {
             // cannot check
             return
           }
           if (callee.type === 'Identifier' && callee.name === '$emit') {
-            verify(nameLiteralNode)
+            verify(nameWithLoc)
           }
         }
       },
@@ -216,7 +199,10 @@ module.exports = {
               }
               const emitParam = emitProperty.value
               // `setup(props, {emit})`
-              const variable = findVariable(context.getScope(), emitParam)
+              const variable = findVariable(
+                utils.getScope(context, emitParam),
+                emitParam
+              )
               if (!variable) {
                 return
               }
@@ -225,7 +211,10 @@ module.exports = {
               }
             } else {
               // `setup(props, context)`
-              const variable = findVariable(context.getScope(), contextParam)
+              const variable = findVariable(
+                utils.getScope(context, contextParam),
+                contextParam
+              )
               if (!variable) {
                 return
               }
@@ -239,8 +228,8 @@ module.exports = {
             })
           },
           CallExpression(node, { node: vueNode }) {
-            const nameLiteralNode = getNameParamNode(node)
-            if (!nameLiteralNode) {
+            const nameWithLoc = getNameParamNode(node)
+            if (!nameWithLoc) {
               // cannot check
               return
             }
@@ -254,7 +243,7 @@ module.exports = {
                 emitReferenceIds.has(node.callee)
               ) {
                 // verify setup(props,{emit}) {emit()}
-                verify(nameLiteralNode)
+                verify(nameWithLoc)
               } else {
                 const emit = getCalleeMemberNode(node)
                 if (
@@ -264,7 +253,7 @@ module.exports = {
                   contextReferenceIds.has(emit.member.object)
                 ) {
                   // verify setup(props,context) {context.emit()}
-                  verify(nameLiteralNode)
+                  verify(nameWithLoc)
                 }
               }
             }
@@ -275,8 +264,8 @@ module.exports = {
         }),
         {
           CallExpression(node) {
-            const nameLiteralNode = getNameParamNode(node)
-            if (!nameLiteralNode) {
+            const nameWithLoc = getNameParamNode(node)
+            if (!nameWithLoc) {
               // cannot check
               return
             }
@@ -284,7 +273,7 @@ module.exports = {
             // verify $emit
             if (emit && emit.name === '$emit') {
               // verify this.$emit()
-              verify(nameLiteralNode)
+              verify(nameWithLoc)
             }
           }
         }
diff --git a/lib/rules/no-restricted-html-elements.js b/lib/rules/no-restricted-html-elements.js
index e2f30ccd0..ab52abde3 100644
--- a/lib/rules/no-restricted-html-elements.js
+++ b/lib/rules/no-restricted-html-elements.js
@@ -10,7 +10,7 @@ module.exports = {
   meta: {
     type: 'suggestion',
     docs: {
-      description: 'disallow specific HTML elements',
+      description: 'disallow specific elements',
       categories: undefined,
       url: 'https://eslint.vuejs.org/rules/no-restricted-html-elements.html'
     },
@@ -23,7 +23,12 @@ module.exports = {
           {
             type: 'object',
             properties: {
-              element: { type: 'string' },
+              element: {
+                oneOf: [
+                  { type: 'string' },
+                  { type: 'array', items: { type: 'string' } }
+                ]
+              },
               message: { type: 'string', minLength: 1 }
             },
             required: ['element'],
@@ -33,6 +38,11 @@ module.exports = {
       },
       uniqueItems: true,
       minItems: 0
+    },
+    messages: {
+      forbiddenElement: 'Unexpected use of forbidden element {{name}}.',
+      // eslint-disable-next-line eslint-plugin/report-message-format
+      customMessage: '{{message}}'
     }
   },
   /**
@@ -45,21 +55,31 @@ module.exports = {
        * @param {VElement} node
        */
       VElement(node) {
-        if (!utils.isHtmlElementNode(node)) {
+        if (
+          !utils.isHtmlElementNode(node) &&
+          !utils.isSvgElementNode(node) &&
+          !utils.isMathElementNode(node)
+        ) {
           return
         }
 
         for (const option of context.options) {
-          const message =
-            option.message ||
-            `Unexpected use of forbidden HTML element ${node.rawName}.`
-          const element = option.element || option
+          const restrictedItem = option.element || option
+          const elementsToRestrict = Array.isArray(restrictedItem)
+            ? restrictedItem
+            : [restrictedItem]
 
-          if (element === node.rawName) {
+          if (elementsToRestrict.includes(node.rawName)) {
             context.report({
-              message,
+              messageId: option.message ? 'customMessage' : 'forbiddenElement',
+              data: {
+                name: node.rawName,
+                message: option.message
+              },
               node: node.startTag
             })
+
+            return
           }
         }
       }
diff --git a/lib/rules/no-restricted-props.js b/lib/rules/no-restricted-props.js
index 564bf0773..e0684393d 100644
--- a/lib/rules/no-restricted-props.js
+++ b/lib/rules/no-restricted-props.js
@@ -18,30 +18,16 @@ const regexp = require('../utils/regexp')
  * @property {string|undefined} [suggest]
  */
 
-/**
- * @param {string} str
- * @returns {(str: string) => boolean}
- */
-function buildMatcher(str) {
-  if (regexp.isRegExp(str)) {
-    const re = regexp.toRegExp(str)
-    return (s) => {
-      re.lastIndex = 0
-      return re.test(s)
-    }
-  }
-  return (s) => s === str
-}
 /**
  * @param {string|{name:string, message?: string, suggest?:string}} option
  * @returns {ParsedOption}
  */
 function parseOption(option) {
   if (typeof option === 'string') {
-    const matcher = buildMatcher(option)
+    const matcher = regexp.toRegExp(option, { remove: 'g' })
     return {
       test(name) {
-        return matcher(name)
+        return matcher.test(name)
       }
     }
   }
@@ -53,7 +39,6 @@ function parseOption(option) {
 
 module.exports = {
   meta: {
-    hasSuggestions: true,
     type: 'suggestion',
     docs: {
       description: 'disallow specific props',
@@ -61,6 +46,7 @@ module.exports = {
       url: 'https://eslint.vuejs.org/rules/no-restricted-props.html'
     },
     fixable: null,
+    hasSuggestions: true,
     schema: {
       type: 'array',
       items: {
@@ -95,9 +81,9 @@ module.exports = {
 
     /**
      * @param {ComponentProp[]} props
-     * @param { { [key: string]: Property | undefined } } [withDefaultsProps]
+     * @param {(fixer: RuleFixer, propName: string, replaceKeyText: string) => Iterable<Fix>} [fixPropInOtherPlaces]
      */
-    function processProps(props, withDefaultsProps) {
+    function processProps(props, fixPropInOtherPlaces) {
       for (const prop of props) {
         if (!prop.propName) {
           continue
@@ -109,14 +95,24 @@ module.exports = {
               option.message ||
               `Using \`${prop.propName}\` props is not allowed.`
             context.report({
-              node: prop.key,
+              node: prop.type === 'infer-type' ? prop.node : prop.key,
               messageId: 'restrictedProp',
               data: { message },
-              suggest: createSuggest(
-                prop.key,
-                option,
-                withDefaultsProps && withDefaultsProps[prop.propName]
-              )
+              suggest:
+                prop.type === 'infer-type'
+                  ? null
+                  : createSuggest(
+                      prop.key,
+                      option,
+                      fixPropInOtherPlaces
+                        ? (fixer, replaceKeyText) =>
+                            fixPropInOtherPlaces(
+                              fixer,
+                              prop.propName,
+                              replaceKeyText
+                            )
+                        : undefined
+                    )
             })
             break
           }
@@ -126,7 +122,33 @@ module.exports = {
     return utils.compositingVisitors(
       utils.defineScriptSetupVisitor(context, {
         onDefinePropsEnter(node, props) {
-          processProps(props, utils.getWithDefaultsProps(node))
+          processProps(props, fixPropInOtherPlaces)
+
+          /**
+           * @param {RuleFixer} fixer
+           * @param {string} propName
+           * @param {string} replaceKeyText
+           */
+          function fixPropInOtherPlaces(fixer, propName, replaceKeyText) {
+            /** @type {(Property|AssignmentProperty)[]} */
+            const propertyNodes = []
+            const withDefault = utils.getWithDefaultsProps(node)[propName]
+            if (withDefault) {
+              propertyNodes.push(withDefault)
+            }
+            const propDestructure = utils.getPropsDestructure(node)[propName]
+            if (propDestructure) {
+              propertyNodes.push(propDestructure)
+            }
+            return propertyNodes.map((propertyNode) =>
+              propertyNode.shorthand
+                ? fixer.insertTextBefore(
+                    propertyNode.value,
+                    `${replaceKeyText}:`
+                  )
+                : fixer.replaceText(propertyNode.key, replaceKeyText)
+            )
+          }
         }
       }),
       utils.defineVueVisitor(context, {
@@ -141,10 +163,10 @@ module.exports = {
 /**
  * @param {Expression} node
  * @param {ParsedOption} option
- * @param {Property} [withDefault]
+ * @param {(fixer: RuleFixer, replaceKeyText: string) => Iterable<Fix>} [fixPropInOtherPlaces]
  * @returns {Rule.SuggestionReportDescriptor[]}
  */
-function createSuggest(node, option, withDefault) {
+function createSuggest(node, option, fixPropInOtherPlaces) {
   if (!option.suggest) {
     return []
   }
@@ -165,14 +187,8 @@ function createSuggest(node, option, withDefault) {
     {
       fix(fixer) {
         const fixes = [fixer.replaceText(node, replaceText)]
-        if (withDefault) {
-          if (withDefault.shorthand) {
-            fixes.push(
-              fixer.insertTextBefore(withDefault.value, `${replaceText}:`)
-            )
-          } else {
-            fixes.push(fixer.replaceText(withDefault.key, replaceText))
-          }
+        if (fixPropInOtherPlaces) {
+          fixes.push(...fixPropInOtherPlaces(fixer, replaceText))
         }
         return fixes.sort((a, b) => a.range[0] - b.range[0])
       },
diff --git a/lib/rules/no-restricted-static-attribute.js b/lib/rules/no-restricted-static-attribute.js
index a71b29e49..d7223044a 100644
--- a/lib/rules/no-restricted-static-attribute.js
+++ b/lib/rules/no-restricted-static-attribute.js
@@ -15,30 +15,16 @@ const regexp = require('../utils/regexp')
  * @property {string} [message]
  */
 
-/**
- * @param {string} str
- * @returns {(str: string) => boolean}
- */
-function buildMatcher(str) {
-  if (regexp.isRegExp(str)) {
-    const re = regexp.toRegExp(str)
-    return (s) => {
-      re.lastIndex = 0
-      return re.test(s)
-    }
-  }
-  return (s) => s === str
-}
 /**
  * @param {any} option
  * @returns {ParsedOption}
  */
 function parseOption(option) {
   if (typeof option === 'string') {
-    const matcher = buildMatcher(option)
+    const matcher = regexp.toRegExp(option, { remove: 'g' })
     return {
       test({ key }) {
-        return matcher(key.rawName)
+        return matcher.test(key.rawName)
       }
     }
   }
@@ -53,25 +39,25 @@ function parseOption(option) {
         return node.value == null || node.value.value === node.key.rawName
       }
     } else {
-      const valueMatcher = buildMatcher(option.value)
+      const valueMatcher = regexp.toRegExp(option.value, { remove: 'g' })
       parsed.test = (node) => {
         if (!keyTest(node)) {
           return false
         }
-        return node.value != null && valueMatcher(node.value.value)
+        return node.value != null && valueMatcher.test(node.value.value)
       }
     }
     parsed.useValue = true
   }
   if (option.element) {
     const argTest = parsed.test
-    const tagMatcher = buildMatcher(option.element)
+    const tagMatcher = regexp.toRegExp(option.element, { remove: 'g' })
     parsed.test = (node) => {
       if (!argTest(node)) {
         return false
       }
       const element = node.parent.parent
-      return tagMatcher(element.rawName)
+      return tagMatcher.test(element.rawName)
     }
     parsed.useElement = true
   }
@@ -115,7 +101,7 @@ module.exports = {
             type: 'object',
             properties: {
               key: { type: 'string' },
-              value: { anyOf: [{ type: 'string' }, { enum: [true] }] },
+              value: { oneOf: [{ type: 'string' }, { enum: [true] }] },
               element: { type: 'string' },
               message: { type: 'string', minLength: 1 }
             },
diff --git a/lib/rules/no-restricted-syntax.js b/lib/rules/no-restricted-syntax.js
index 19feb14ef..da2518980 100644
--- a/lib/rules/no-restricted-syntax.js
+++ b/lib/rules/no-restricted-syntax.js
@@ -5,7 +5,7 @@
 
 const { wrapCoreRule } = require('../utils')
 
-// eslint-disable-next-line no-invalid-meta, no-invalid-meta-docs-categories
+// eslint-disable-next-line internal/no-invalid-meta
 module.exports = wrapCoreRule('no-restricted-syntax', {
   applyDocument: true
 })
diff --git a/lib/rules/no-restricted-v-bind.js b/lib/rules/no-restricted-v-bind.js
index f9bf5462b..cfaf77187 100644
--- a/lib/rules/no-restricted-v-bind.js
+++ b/lib/rules/no-restricted-v-bind.js
@@ -22,33 +22,19 @@ const DEFAULT_OPTIONS = [
   }
 ]
 
-/**
- * @param {string} str
- * @returns {(str: string) => boolean}
- */
-function buildMatcher(str) {
-  if (regexp.isRegExp(str)) {
-    const re = regexp.toRegExp(str)
-    return (s) => {
-      re.lastIndex = 0
-      return re.test(s)
-    }
-  }
-  return (s) => s === str
-}
 /**
  * @param {any} option
  * @returns {ParsedOption}
  */
 function parseOption(option) {
   if (typeof option === 'string') {
-    const matcher = buildMatcher(option)
+    const matcher = regexp.toRegExp(option, { remove: 'g' })
     return {
       test(key) {
         return Boolean(
           key.argument &&
-            key.argument.type === 'VIdentifier' &&
-            matcher(key.argument.rawName)
+          key.argument.type === 'VIdentifier' &&
+          matcher.test(key.argument.rawName)
         )
       },
       modifiers: []
@@ -77,13 +63,13 @@ function parseOption(option) {
   }
   if (option.element) {
     const argTest = parsed.test
-    const tagMatcher = buildMatcher(option.element)
+    const tagMatcher = regexp.toRegExp(option.element, { remove: 'g' })
     parsed.test = (key) => {
       if (!argTest(key)) {
         return false
       }
       const element = key.parent.parent.parent
-      return tagMatcher(element.rawName)
+      return tagMatcher.test(element.rawName)
     }
     parsed.useElement = true
   }
diff --git a/lib/rules/no-restricted-v-on.js b/lib/rules/no-restricted-v-on.js
new file mode 100644
index 000000000..b4859c09c
--- /dev/null
+++ b/lib/rules/no-restricted-v-on.js
@@ -0,0 +1,169 @@
+/**
+ * @author Kamogelo Moalusi <github.com/thesheppard>
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+const regexp = require('../utils/regexp')
+
+/**
+ * @typedef {object} ParsedOption
+ * @property { (key: VDirectiveKey) => boolean } test
+ * @property {string[]} [modifiers]
+ * @property {boolean} [useElement]
+ * @property {string} [message]
+ */
+
+/**
+ * @param {any} option
+ * @returns {ParsedOption}
+ */
+function parseOption(option) {
+  if (typeof option === 'string') {
+    const matcher = regexp.toRegExp(option, { remove: 'g' })
+    return {
+      test(key) {
+        return Boolean(
+          key.argument &&
+          key.argument.type === 'VIdentifier' &&
+          matcher.test(key.argument.rawName)
+        )
+      }
+    }
+  }
+  if (option === null) {
+    return {
+      test(key) {
+        return key.argument === null
+      }
+    }
+  }
+  const parsed = parseOption(option.argument)
+
+  if (option.modifiers) {
+    const argTest = parsed.test
+    parsed.test = (key) => {
+      if (!argTest(key)) {
+        return false
+      }
+      return /** @type {string[]} */ (option.modifiers).every((modName) =>
+        key.modifiers.some((mid) => mid.name === modName)
+      )
+    }
+    parsed.modifiers = option.modifiers
+  }
+  if (option.element) {
+    const argTest = parsed.test
+    const tagMatcher = regexp.toRegExp(option.element, { remove: 'g' })
+    parsed.test = (key) => {
+      if (!argTest(key)) {
+        return false
+      }
+      return tagMatcher.test(key.parent.parent.parent.rawName)
+    }
+    parsed.useElement = true
+  }
+  parsed.message = option.message
+  return parsed
+}
+
+/**
+ * @param {VDirectiveKey} key
+ * @param {ParsedOption} option
+ */
+function defaultMessage(key, option) {
+  const von = key.name.rawName === '@' ? '' : 'v-on'
+  const arg =
+    key.argument != null && key.argument.type === 'VIdentifier'
+      ? `${key.name.rawName === '@' ? '@' : ':'}${key.argument.rawName}`
+      : ''
+  const mod =
+    option.modifiers != null && option.modifiers.length > 0
+      ? `.${option.modifiers.join('.')}`
+      : ''
+  let element = 'element'
+  if (option.useElement) {
+    element = `<${key.parent.parent.parent.rawName}>`
+  }
+  return `Using \`${von + arg + mod}\` is not allowed on this ${element}.`
+}
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'disallow specific argument in `v-on`',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/no-restricted-v-on.html'
+    },
+    fixable: null,
+    schema: {
+      type: 'array',
+      items: {
+        oneOf: [
+          { type: ['string', 'null'] },
+          {
+            type: 'object',
+            properties: {
+              argument: { type: ['string', 'null'] },
+              element: { type: 'string' },
+              message: { type: 'string', minLength: 1 },
+              modifiers: {
+                type: 'array',
+                items: {
+                  type: 'string',
+                  enum: [
+                    'prevent',
+                    'stop',
+                    'capture',
+                    'self',
+                    'once',
+                    'passive'
+                  ]
+                },
+                uniqueItems: true,
+                minItems: 1
+              }
+            },
+            required: ['argument'],
+            additionalProperties: false
+          }
+        ]
+      },
+      uniqueItems: true
+    },
+    messages: {
+      // eslint-disable-next-line eslint-plugin/report-message-format
+      restrictedVOn: '{{message}}'
+    }
+  },
+
+  /** @param {RuleContext} context */
+  create(context) {
+    if (context.options.length === 0) {
+      return {}
+    }
+    /** @type {ParsedOption[]} */
+    const options = context.options.map(parseOption)
+
+    return utils.defineTemplateBodyVisitor(context, {
+      /**
+       * @param {VDirectiveKey} node
+       */
+      "VAttribute[directive=true][key.name.name='on'] > VDirectiveKey"(node) {
+        for (const option of options) {
+          if (option.test(node)) {
+            const message = option.message || defaultMessage(node, option)
+            context.report({
+              node,
+              messageId: 'restrictedVOn',
+              data: { message }
+            })
+            return
+          }
+        }
+      }
+    })
+  }
+}
diff --git a/lib/rules/no-root-v-if.js b/lib/rules/no-root-v-if.js
new file mode 100644
index 000000000..65e262590
--- /dev/null
+++ b/lib/rules/no-root-v-if.js
@@ -0,0 +1,48 @@
+/**
+ * @author Perry Song
+ * @copyright 2023 Perry Song. All rights reserved.
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'disallow `v-if` directives on root element',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/no-root-v-if.html'
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      noRootVIf: '`v-if` should not be used on root element without `v-else`.'
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    return {
+      /** @param {Program} program */
+      Program(program) {
+        const element = program.templateBody
+        if (element == null) {
+          return
+        }
+
+        const rootElements = element.children.filter(utils.isVElement)
+        if (
+          rootElements.length === 1 &&
+          utils.hasDirective(rootElements[0], 'if')
+        ) {
+          context.report({
+            node: element,
+            loc: element.loc,
+            messageId: 'noRootVIf'
+          })
+        }
+      }
+    }
+  }
+}
diff --git a/lib/rules/no-setup-props-destructure.js b/lib/rules/no-setup-props-destructure.js
deleted file mode 100644
index 4c8f6109c..000000000
--- a/lib/rules/no-setup-props-destructure.js
+++ /dev/null
@@ -1,212 +0,0 @@
-/**
- * @author Yosuke Ota
- * See LICENSE file in root directory for full license.
- */
-'use strict'
-const { findVariable } = require('eslint-utils')
-const utils = require('../utils')
-
-module.exports = {
-  meta: {
-    type: 'suggestion',
-    docs: {
-      description: 'disallow destructuring of `props` passed to `setup`',
-      categories: ['vue3-essential', 'essential'],
-      url: 'https://eslint.vuejs.org/rules/no-setup-props-destructure.html'
-    },
-    fixable: null,
-    schema: [],
-    messages: {
-      destructuring:
-        'Destructuring the `props` will cause the value to lose reactivity.',
-      getProperty:
-        'Getting a value from the `props` in root scope of `{{scopeName}}` will cause the value to lose reactivity.'
-    }
-  },
-  /** @param {RuleContext} context */
-  create(context) {
-    /**
-     * @typedef {object} ScopePropsReferences
-     * @property {Set<Identifier>} refs
-     * @property {string} scopeName
-     */
-    /** @type {Map<FunctionDeclaration | FunctionExpression | ArrowFunctionExpression | Program, ScopePropsReferences>} */
-    const setupScopePropsReferenceIds = new Map()
-
-    /**
-     * @param {ESNode} node
-     * @param {string} messageId
-     * @param {string} scopeName
-     */
-    function report(node, messageId, scopeName) {
-      context.report({
-        node,
-        messageId,
-        data: {
-          scopeName
-        }
-      })
-    }
-
-    /**
-     * @param {Pattern} left
-     * @param {Expression | null} right
-     * @param {ScopePropsReferences} propsReferences
-     */
-    function verify(left, right, propsReferences) {
-      if (!right) {
-        return
-      }
-
-      const rightNode = utils.skipChainExpression(right)
-      if (
-        left.type !== 'ArrayPattern' &&
-        left.type !== 'ObjectPattern' &&
-        rightNode.type !== 'MemberExpression'
-      ) {
-        return
-      }
-      /** @type {Expression | Super} */
-      let rightId = rightNode
-      while (rightId.type === 'MemberExpression') {
-        rightId = utils.skipChainExpression(rightId.object)
-      }
-      if (rightId.type === 'Identifier' && propsReferences.refs.has(rightId)) {
-        report(left, 'getProperty', propsReferences.scopeName)
-      }
-    }
-    /**
-     * @typedef {object} ScopeStack
-     * @property {ScopeStack | null} upper
-     * @property {FunctionDeclaration | FunctionExpression | ArrowFunctionExpression | Program} scopeNode
-     */
-    /**
-     * @type {ScopeStack | null}
-     */
-    let scopeStack = null
-
-    /**
-     * @param {Pattern | null} node
-     * @param {FunctionDeclaration | FunctionExpression | ArrowFunctionExpression | Program} scopeNode
-     * @param {string} scopeName
-     */
-    function processPattern(node, scopeNode, scopeName) {
-      if (!node) {
-        // no arguments
-        return
-      }
-      if (
-        node.type === 'RestElement' ||
-        node.type === 'AssignmentPattern' ||
-        node.type === 'MemberExpression'
-      ) {
-        // cannot check
-        return
-      }
-      if (node.type === 'ArrayPattern' || node.type === 'ObjectPattern') {
-        report(node, 'destructuring', scopeName)
-        return
-      }
-
-      const variable = findVariable(context.getScope(), node)
-      if (!variable) {
-        return
-      }
-      const propsReferenceIds = new Set()
-      for (const reference of variable.references) {
-        if (!reference.isRead()) {
-          continue
-        }
-
-        propsReferenceIds.add(reference.identifier)
-      }
-      setupScopePropsReferenceIds.set(scopeNode, {
-        refs: propsReferenceIds,
-        scopeName
-      })
-    }
-    return utils.compositingVisitors(
-      {
-        /**
-         * @param {FunctionExpression | FunctionDeclaration | ArrowFunctionExpression | Program} node
-         */
-        'Program, :function'(node) {
-          scopeStack = {
-            upper: scopeStack,
-            scopeNode: node
-          }
-        },
-        /**
-         * @param {FunctionExpression | FunctionDeclaration | ArrowFunctionExpression | Program} node
-         */
-        'Program, :function:exit'(node) {
-          scopeStack = scopeStack && scopeStack.upper
-
-          setupScopePropsReferenceIds.delete(node)
-        },
-        /**
-         * @param {VariableDeclarator} node
-         */
-        VariableDeclarator(node) {
-          if (!scopeStack) {
-            return
-          }
-          const propsReferenceIds = setupScopePropsReferenceIds.get(
-            scopeStack.scopeNode
-          )
-          if (!propsReferenceIds) {
-            return
-          }
-          verify(node.id, node.init, propsReferenceIds)
-        },
-        /**
-         * @param {AssignmentExpression} node
-         */
-        AssignmentExpression(node) {
-          if (!scopeStack) {
-            return
-          }
-          const propsReferenceIds = setupScopePropsReferenceIds.get(
-            scopeStack.scopeNode
-          )
-          if (!propsReferenceIds) {
-            return
-          }
-          verify(node.left, node.right, propsReferenceIds)
-        }
-      },
-      utils.defineScriptSetupVisitor(context, {
-        onDefinePropsEnter(node) {
-          let target = node
-          if (
-            target.parent &&
-            target.parent.type === 'CallExpression' &&
-            target.parent.arguments[0] === target &&
-            target.parent.callee.type === 'Identifier' &&
-            target.parent.callee.name === 'withDefaults'
-          ) {
-            target = target.parent
-          }
-          if (!target.parent) {
-            return
-          }
-
-          /** @type {Pattern|null} */
-          let id = null
-          if (target.parent.type === 'VariableDeclarator') {
-            id = target.parent.init === target ? target.parent.id : null
-          } else if (target.parent.type === 'AssignmentExpression') {
-            id = target.parent.right === target ? target.parent.left : null
-          }
-          processPattern(id, context.getSourceCode().ast, '<script setup>')
-        }
-      }),
-      utils.defineVueVisitor(context, {
-        onSetupFunctionEnter(node) {
-          const propsParam = utils.skipDefaultParamValue(node.params[0])
-          processPattern(propsParam, node, 'setup()')
-        }
-      })
-    )
-  }
-}
diff --git a/lib/rules/no-setup-props-reactivity-loss.js b/lib/rules/no-setup-props-reactivity-loss.js
new file mode 100644
index 000000000..e6dbfc3ba
--- /dev/null
+++ b/lib/rules/no-setup-props-reactivity-loss.js
@@ -0,0 +1,391 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+const { findVariable } = require('@eslint-community/eslint-utils')
+const utils = require('../utils')
+
+/**
+ * @typedef {'props'|'prop'} PropIdKind
+ *    - `'props'`: A node is a container object that has props.
+ *    - `'prop'`: A node is a variable with one prop.
+ */
+/**
+ * @typedef {object} PropId
+ * @property {Pattern} node
+ * @property {PropIdKind} kind
+ */
+/**
+ * Iterates over Prop identifiers by parsing the given pattern
+ * in the left operand of defineProps().
+ * @param {Pattern} node
+ * @returns {IterableIterator<PropId>}
+ */
+function* iteratePropIds(node) {
+  switch (node.type) {
+    case 'ObjectPattern': {
+      for (const prop of node.properties) {
+        yield prop.type === 'Property'
+          ? {
+              // e.g. `const { prop } = defineProps()`
+              node: unwrapAssignment(prop.value),
+              kind: 'prop'
+            }
+          : {
+              // RestElement
+              // e.g. `const { x, ...prop } = defineProps()`
+              node: unwrapAssignment(prop.argument),
+              kind: 'props'
+            }
+      }
+      break
+    }
+    default: {
+      // e.g. `const props = defineProps()`
+      yield { node: unwrapAssignment(node), kind: 'props' }
+    }
+  }
+}
+
+/**
+ * @template {Pattern} T
+ * @param {T} node
+ * @returns {Pattern}
+ */
+function unwrapAssignment(node) {
+  if (node.type === 'AssignmentPattern') {
+    return node.left
+  }
+  return node
+}
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        'disallow usages that lose the reactivity of `props` passed to `setup`',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/no-setup-props-reactivity-loss.html'
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      destructuring:
+        'Destructuring the `props` will cause the value to lose reactivity.',
+      getProperty:
+        'Getting a value from the `props` in root scope of `{{scopeName}}` will cause the value to lose reactivity.'
+    }
+  },
+  /**
+   * @param {RuleContext} context
+   * @returns {RuleListener}
+   **/
+  create(context) {
+    /**
+     * @typedef {object} ScopePropsReferences
+     * @property {object} refs
+     * @property {Set<Identifier>} refs.props A set of references to container objects with multiple props.
+     * @property {Set<Identifier>} refs.prop A set of references a variable with one property.
+     * @property {string} scopeName
+     */
+    /** @type {Map<FunctionDeclaration | FunctionExpression | ArrowFunctionExpression | Program, ScopePropsReferences>} */
+    const setupScopePropsReferenceIds = new Map()
+    const wrapperExpressionTypes = new Set([
+      'ArrayExpression',
+      'ObjectExpression'
+    ])
+
+    /**
+     * @param {ESNode} node
+     * @param {string} messageId
+     * @param {string} scopeName
+     */
+    function report(node, messageId, scopeName) {
+      context.report({
+        node,
+        messageId,
+        data: {
+          scopeName
+        }
+      })
+    }
+
+    /**
+     * @param {Pattern} left
+     * @param {Expression | null} right
+     * @param {ScopePropsReferences} propsReferences
+     */
+    function verify(left, right, propsReferences) {
+      if (!right) {
+        return
+      }
+
+      const rightNode = utils.skipChainExpression(right)
+
+      if (
+        wrapperExpressionTypes.has(rightNode.type) &&
+        isPropsMemberAccessed(rightNode, propsReferences)
+      ) {
+        // e.g. `const foo = { x: props.x }`
+        report(rightNode, 'getProperty', propsReferences.scopeName)
+        return
+      }
+
+      // Get the expression that provides the value.
+      /** @type {Expression | Super} */
+      let expression = rightNode
+      while (expression.type === 'MemberExpression') {
+        expression = utils.skipChainExpression(expression.object)
+      }
+      /** @type {Expression[]} A list of expression nodes to verify */
+      const expressions = []
+      switch (expression.type) {
+        case 'TemplateLiteral': {
+          expressions.push(...expression.expressions)
+          break
+        }
+        case 'ConditionalExpression': {
+          expressions.push(
+            expression.test,
+            expression.consequent,
+            expression.alternate
+          )
+          break
+        }
+        case 'Identifier': {
+          expressions.push(expression)
+          break
+        }
+      }
+
+      if (
+        (left.type === 'ArrayPattern' || left.type === 'ObjectPattern') &&
+        expressions.some(
+          (expr) =>
+            expr.type === 'Identifier' && propsReferences.refs.props.has(expr)
+        )
+      ) {
+        // e.g. `const {foo} = props`
+        report(left, 'getProperty', propsReferences.scopeName)
+        return
+      }
+
+      const reportNode = expressions.find((expr) =>
+        isPropsMemberAccessed(expr, propsReferences)
+      )
+      if (reportNode) {
+        report(reportNode, 'getProperty', propsReferences.scopeName)
+      }
+    }
+
+    /**
+     * @param {Expression | Super} node
+     * @param {ScopePropsReferences} propsReferences
+     */
+    function isPropsMemberAccessed(node, propsReferences) {
+      for (const props of propsReferences.refs.props) {
+        const isPropsInExpressionRange = utils.inRange(node.range, props)
+        const isPropsMemberExpression =
+          props.parent.type === 'MemberExpression' &&
+          props.parent.object === props
+
+        if (isPropsInExpressionRange && isPropsMemberExpression) {
+          return true
+        }
+      }
+
+      // Checks for actual member access using prop destructuring.
+      for (const prop of propsReferences.refs.prop) {
+        const isPropsInExpressionRange = utils.inRange(node.range, prop)
+        if (isPropsInExpressionRange) {
+          return true
+        }
+      }
+
+      return false
+    }
+
+    /**
+     * @typedef {object} ScopeStack
+     * @property {ScopeStack | null} upper
+     * @property {FunctionDeclaration | FunctionExpression | ArrowFunctionExpression | Program} scopeNode
+     */
+    /**
+     * @type {ScopeStack | null}
+     */
+    let scopeStack = null
+
+    /**
+     * @param {PropId} propId
+     * @param {FunctionDeclaration | FunctionExpression | ArrowFunctionExpression | Program} scopeNode
+     * @param {import('eslint').Scope.Scope} currentScope
+     * @param {string} scopeName
+     */
+    function processPropId({ node, kind }, scopeNode, currentScope, scopeName) {
+      if (
+        node.type === 'RestElement' ||
+        node.type === 'AssignmentPattern' ||
+        node.type === 'MemberExpression'
+      ) {
+        // cannot check
+        return
+      }
+      if (node.type === 'ArrayPattern' || node.type === 'ObjectPattern') {
+        report(node, 'destructuring', scopeName)
+        return
+      }
+
+      const variable = findVariable(currentScope, node)
+      if (!variable) {
+        return
+      }
+
+      let scopePropsReferences = setupScopePropsReferenceIds.get(scopeNode)
+      if (!scopePropsReferences) {
+        scopePropsReferences = {
+          refs: {
+            props: new Set(),
+            prop: new Set()
+          },
+          scopeName
+        }
+        setupScopePropsReferenceIds.set(scopeNode, scopePropsReferences)
+      }
+      const propsReferenceIds = scopePropsReferences.refs[kind]
+      for (const reference of variable.references) {
+        // If reference is in another scope, we can't check it.
+        if (reference.from !== currentScope) {
+          continue
+        }
+
+        if (!reference.isRead()) {
+          continue
+        }
+
+        propsReferenceIds.add(reference.identifier)
+      }
+    }
+
+    return utils.compositingVisitors(
+      {
+        /**
+         * @param {FunctionExpression | FunctionDeclaration | ArrowFunctionExpression | Program} node
+         */
+        'Program, :function'(node) {
+          scopeStack = {
+            upper: scopeStack,
+            scopeNode: node
+          }
+        },
+        /**
+         * @param {FunctionExpression | FunctionDeclaration | ArrowFunctionExpression | Program} node
+         */
+        'Program, :function:exit'(node) {
+          scopeStack = scopeStack && scopeStack.upper
+
+          setupScopePropsReferenceIds.delete(node)
+        },
+        /**
+         * @param {CallExpression} node
+         */
+        CallExpression(node) {
+          if (!scopeStack) {
+            return
+          }
+
+          const propsReferenceIds = setupScopePropsReferenceIds.get(
+            scopeStack.scopeNode
+          )
+
+          if (!propsReferenceIds) {
+            return
+          }
+
+          if (isPropsMemberAccessed(node, propsReferenceIds)) {
+            report(node, 'getProperty', propsReferenceIds.scopeName)
+          }
+        },
+        /**
+         * @param {VariableDeclarator} node
+         */
+        VariableDeclarator(node) {
+          if (!scopeStack) {
+            return
+          }
+          const propsReferenceIds = setupScopePropsReferenceIds.get(
+            scopeStack.scopeNode
+          )
+          if (!propsReferenceIds) {
+            return
+          }
+          verify(node.id, node.init, propsReferenceIds)
+        },
+        /**
+         * @param {AssignmentExpression} node
+         */
+        AssignmentExpression(node) {
+          if (!scopeStack) {
+            return
+          }
+          const propsReferenceIds = setupScopePropsReferenceIds.get(
+            scopeStack.scopeNode
+          )
+          if (!propsReferenceIds) {
+            return
+          }
+          verify(node.left, node.right, propsReferenceIds)
+        }
+      },
+      utils.defineScriptSetupVisitor(context, {
+        onDefinePropsEnter(node) {
+          let target = node
+          if (
+            target.parent &&
+            target.parent.type === 'CallExpression' &&
+            target.parent.arguments[0] === target &&
+            target.parent.callee.type === 'Identifier' &&
+            target.parent.callee.name === 'withDefaults'
+          ) {
+            target = target.parent
+          }
+          if (!target.parent) {
+            return
+          }
+
+          /** @type {Pattern|null} */
+          let id = null
+          if (target.parent.type === 'VariableDeclarator') {
+            id = target.parent.init === target ? target.parent.id : null
+          } else if (target.parent.type === 'AssignmentExpression') {
+            id = target.parent.right === target ? target.parent.left : null
+          }
+          if (!id) return
+          const currentScope = utils.getScope(context, node)
+          for (const propId of iteratePropIds(id)) {
+            processPropId(
+              propId,
+              context.sourceCode.ast,
+              currentScope,
+              '<script setup>'
+            )
+          }
+        }
+      }),
+      utils.defineVueVisitor(context, {
+        onSetupFunctionEnter(node) {
+          const currentScope = utils.getScope(context, node)
+          const propsParam = utils.skipDefaultParamValue(node.params[0])
+          if (!propsParam) return
+          processPropId(
+            { node: propsParam, kind: 'props' },
+            node,
+            currentScope,
+            'setup()'
+          )
+        }
+      })
+    )
+  }
+}
diff --git a/lib/rules/no-shared-component-data.js b/lib/rules/no-shared-component-data.js
index 160f41ef9..77ae77670 100644
--- a/lib/rules/no-shared-component-data.js
+++ b/lib/rules/no-shared-component-data.js
@@ -37,24 +37,24 @@ function getFirstAndLastTokens(node, sourceCode) {
   }
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
     docs: {
       description: "enforce component's data property to be a function",
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/no-shared-component-data.html'
     },
     fixable: 'code',
-    schema: []
+    schema: [],
+    messages: {
+      dataPropertyMustBeFunction:
+        '`data` property in component must be a function.'
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
-    const sourceCode = context.getSourceCode()
+    const sourceCode = context.sourceCode
 
     return utils.executeOnVueComponent(context, (obj) => {
       const invalidData = utils.findProperty(
@@ -68,7 +68,7 @@ module.exports = {
       if (invalidData) {
         context.report({
           node: invalidData,
-          message: '`data` property in component must be a function.',
+          messageId: 'dataPropertyMustBeFunction',
           fix(fixer) {
             const tokens = getFirstAndLastTokens(invalidData.value, sourceCode)
 
diff --git a/lib/rules/no-side-effects-in-computed-properties.js b/lib/rules/no-side-effects-in-computed-properties.js
index 7f7697b50..36b0e8778 100644
--- a/lib/rules/no-side-effects-in-computed-properties.js
+++ b/lib/rules/no-side-effects-in-computed-properties.js
@@ -3,7 +3,10 @@
  * @author Michał Sajnóg
  */
 'use strict'
-const { ReferenceTracker, findVariable } = require('eslint-utils')
+const {
+  ReferenceTracker,
+  findVariable
+} = require('@eslint-community/eslint-utils')
 const utils = require('../utils')
 
 /**
@@ -12,20 +15,22 @@ const utils = require('../utils')
  * @typedef {import('../utils').ComponentComputedProperty} ComponentComputedProperty
  */
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
     docs: {
       description: 'disallow side effects in computed properties',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/no-side-effects-in-computed-properties.html'
     },
     fixable: null,
-    schema: []
+    schema: [],
+    messages: {
+      unexpectedSideEffectInFunction:
+        'Unexpected side effect in computed function.',
+      unexpectedSideEffectInProperty:
+        'Unexpected side effect in "{{key}}" computed property.'
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
@@ -103,7 +108,7 @@ module.exports = {
           if (invalid) {
             context.report({
               node: invalid.node,
-              message: 'Unexpected side effect in "{{key}}" computed property.',
+              messageId: 'unexpectedSideEffectInProperty',
               data: { key: computedProperty.key || 'Unknown' }
             })
           }
@@ -130,7 +135,7 @@ module.exports = {
           return
         }
 
-        const variable = findVariable(context.getScope(), node)
+        const variable = findVariable(utils.getScope(context, node), node)
         if (!variable || variable.defs.length !== 1) {
           return
         }
@@ -164,7 +169,7 @@ module.exports = {
         if (invalid) {
           context.report({
             node: invalid.node,
-            message: 'Unexpected side effect in computed function.'
+            messageId: 'unexpectedSideEffectInFunction'
           })
         }
       }
@@ -175,16 +180,15 @@ module.exports = {
     }
     return utils.compositingVisitors(
       {
-        Program() {
-          const tracker = new ReferenceTracker(context.getScope())
-          const traceMap = utils.createCompositionApiTraceMap({
-            [ReferenceTracker.ESM]: true,
+        /** @param {Program} program */
+        Program(program) {
+          const tracker = new ReferenceTracker(utils.getScope(context, program))
+
+          for (const { node } of utils.iterateReferencesTraceMap(tracker, {
             computed: {
               [ReferenceTracker.CALL]: true
             }
-          })
-
-          for (const { node } of tracker.iterateEsmReferences(traceMap)) {
+          })) {
             if (node.type !== 'CallExpression') {
               continue
             }
diff --git a/lib/rules/no-spaces-around-equal-signs-in-attribute.js b/lib/rules/no-spaces-around-equal-signs-in-attribute.js
index 31c290588..1fb18f67c 100644
--- a/lib/rules/no-spaces-around-equal-signs-in-attribute.js
+++ b/lib/rules/no-spaces-around-equal-signs-in-attribute.js
@@ -4,30 +4,25 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'layout',
     docs: {
       description: 'disallow spaces around equal signs in attribute',
-      categories: ['vue3-strongly-recommended', 'strongly-recommended'],
+      categories: ['vue3-strongly-recommended', 'vue2-strongly-recommended'],
       url: 'https://eslint.vuejs.org/rules/no-spaces-around-equal-signs-in-attribute.html'
     },
     fixable: 'whitespace',
-    schema: []
+    schema: [],
+    messages: {
+      unexpectedSpaces: 'Unexpected spaces found around equal signs.'
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
-    const sourceCode = context.getSourceCode()
+    const sourceCode = context.sourceCode
     return utils.defineTemplateBodyVisitor(context, {
       VAttribute(node) {
         if (!node.value) {
@@ -45,8 +40,7 @@ module.exports = {
               start: node.key.loc.end,
               end: node.value.loc.start
             },
-            message: 'Unexpected spaces found around equal signs.',
-            data: {},
+            messageId: 'unexpectedSpaces',
             fix: (fixer) => fixer.replaceTextRange(range, expect)
           })
         }
diff --git a/lib/rules/no-sparse-arrays.js b/lib/rules/no-sparse-arrays.js
index 48f7390e8..a1cd1cade 100644
--- a/lib/rules/no-sparse-arrays.js
+++ b/lib/rules/no-sparse-arrays.js
@@ -5,5 +5,5 @@
 
 const { wrapCoreRule } = require('../utils')
 
-// eslint-disable-next-line no-invalid-meta, no-invalid-meta-docs-categories
+// eslint-disable-next-line internal/no-invalid-meta
 module.exports = wrapCoreRule('no-sparse-arrays')
diff --git a/lib/rules/no-template-key.js b/lib/rules/no-template-key.js
index c3fc3f2b4..5530a19b0 100644
--- a/lib/rules/no-template-key.js
+++ b/lib/rules/no-template-key.js
@@ -5,22 +5,14 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
     docs: {
       description: 'disallow `key` attribute on `<template>`',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/no-template-key.html'
     },
     fixable: null,
diff --git a/lib/rules/no-template-shadow.js b/lib/rules/no-template-shadow.js
index 227abe715..bae89e82f 100644
--- a/lib/rules/no-template-shadow.js
+++ b/lib/rules/no-template-shadow.js
@@ -4,20 +4,12 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
 /**
  * @typedef {import('../utils').GroupName} GroupName
  */
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 /** @type {GroupName[]} */
 const GROUP_NAMES = [
   'props',
@@ -28,17 +20,46 @@ const GROUP_NAMES = [
   'setup'
 ]
 
+/**
+ * @param {RuleContext} context
+ * @param {string} variableName
+ */
+function isAllowedVarName(context, variableName) {
+  if (context.options[0] && context.options[0].allow) {
+    return context.options[0].allow.includes(variableName)
+  }
+  return false
+}
+
 module.exports = {
   meta: {
     type: 'suggestion',
     docs: {
       description:
         'disallow variable declarations from shadowing variables declared in the outer scope',
-      categories: ['vue3-strongly-recommended', 'strongly-recommended'],
+      categories: ['vue3-strongly-recommended', 'vue2-strongly-recommended'],
       url: 'https://eslint.vuejs.org/rules/no-template-shadow.html'
     },
     fixable: null,
-    schema: []
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          allow: {
+            type: 'array',
+            items: {
+              type: 'string'
+            },
+            uniqueItems: true
+          }
+        },
+        additionalProperties: false
+      }
+    ],
+    messages: {
+      alreadyDeclaredInUpperScope:
+        "Variable '{{name}}' is already declared in the upper scope."
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
@@ -53,16 +74,11 @@ module.exports = {
     /** @type {ScopeStack | null} */
     let scopeStack = null
 
-    // ----------------------------------------------------------------------
-    // Public
-    // ----------------------------------------------------------------------
-
     return utils.compositingVisitors(
       utils.isScriptSetup(context)
         ? {
             Program() {
-              const globalScope =
-                context.getSourceCode().scopeManager.globalScope
+              const globalScope = context.sourceCode.scopeManager.globalScope
               if (!globalScope) {
                 return
               }
@@ -110,6 +126,11 @@ module.exports = {
           for (const variable of node.variables) {
             const varNode = variable.id
             const name = varNode.name
+
+            if (isAllowedVarName(context, name)) {
+              continue
+            }
+
             if (
               scopeStack.nodes.some((node) => node.name === name) ||
               jsVars.has(name)
@@ -117,8 +138,7 @@ module.exports = {
               context.report({
                 node: varNode,
                 loc: varNode.loc,
-                message:
-                  "Variable '{{name}}' is already declared in the upper scope.",
+                messageId: 'alreadyDeclaredInUpperScope',
                 data: {
                   name
                 }
diff --git a/lib/rules/no-template-target-blank.js b/lib/rules/no-template-target-blank.js
index b671091ce..b415bc4b5 100644
--- a/lib/rules/no-template-target-blank.js
+++ b/lib/rules/no-template-target-blank.js
@@ -4,15 +4,8 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
 /** @param {VAttribute} node */
 function isTargetBlank(node) {
   return (
@@ -74,9 +67,31 @@ function hasDynamicLink(node) {
   )
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
+/**
+ * @param {VAttribute} node
+ * @returns {Rule.SuggestionReportDescriptor}
+ */
+function getSuggestion(node) {
+  const relAttributeNode = node.parent.attributes.find(
+    (attribute) => attribute.key.name === 'rel'
+  )
+
+  if (relAttributeNode) {
+    return {
+      desc: 'Change `rel` attribute value to `noopener noreferrer`.',
+      fix(fixer) {
+        return fixer.replaceText(relAttributeNode, 'rel="noopener noreferrer"')
+      }
+    }
+  }
+
+  return {
+    desc: 'Add `rel="noopener noreferrer"`.',
+    fix(fixer) {
+      return fixer.insertTextAfter(node, ' rel="noopener noreferrer"')
+    }
+  }
+}
 
 module.exports = {
   meta: {
@@ -87,6 +102,7 @@ module.exports = {
       categories: undefined,
       url: 'https://eslint.vuejs.org/rules/no-template-target-blank.html'
     },
+    hasSuggestions: true,
     schema: [
       {
         type: 'object',
@@ -100,7 +116,11 @@ module.exports = {
         },
         additionalProperties: false
       }
-    ]
+    ],
+    messages: {
+      missingRel:
+        'Using target="_blank" without rel="noopener noreferrer" is a security risk.'
+    }
   },
 
   /**
@@ -128,8 +148,8 @@ module.exports = {
         if (hasDangerHref) {
           context.report({
             node,
-            message:
-              'Using target="_blank" without rel="noopener noreferrer" is a security risk.'
+            messageId: 'missingRel',
+            suggest: [getSuggestion(node)]
           })
         }
       }
diff --git a/lib/rules/no-textarea-mustache.js b/lib/rules/no-textarea-mustache.js
index abbe01157..b4b5a9f77 100644
--- a/lib/rules/no-textarea-mustache.js
+++ b/lib/rules/no-textarea-mustache.js
@@ -5,32 +5,27 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
     docs: {
       description: 'disallow mustaches in `<textarea>`',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/no-textarea-mustache.html'
     },
     fixable: null,
-    schema: []
+    schema: [],
+    messages: {
+      unexpected: "Unexpected mustache. Use 'v-model' instead."
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
     return utils.defineTemplateBodyVisitor(context, {
       /** @param {VExpressionContainer} node */
-      "VElement[name='textarea'] VExpressionContainer"(node) {
+      "VElement[rawName='textarea'] VExpressionContainer"(node) {
         if (node.parent.type !== 'VElement') {
           return
         }
@@ -38,7 +33,7 @@ module.exports = {
         context.report({
           node,
           loc: node.loc,
-          message: "Unexpected mustache. Use 'v-model' instead."
+          messageId: 'unexpected'
         })
       }
     })
diff --git a/lib/rules/no-this-in-before-route-enter.js b/lib/rules/no-this-in-before-route-enter.js
index 702d19672..f6aa59d16 100644
--- a/lib/rules/no-this-in-before-route-enter.js
+++ b/lib/rules/no-this-in-before-route-enter.js
@@ -4,16 +4,8 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
diff --git a/lib/rules/no-undef-components.js b/lib/rules/no-undef-components.js
index f6e66400c..d4b18238d 100644
--- a/lib/rules/no-undef-components.js
+++ b/lib/rules/no-undef-components.js
@@ -4,17 +4,10 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
+const path = require('path')
 const utils = require('../utils')
 const casing = require('../utils/casing')
 
-// ------------------------------------------------------------------------------
-// Rule helpers
-// ------------------------------------------------------------------------------
-
 /**
  * `casing.camelCase()` converts the beginning to lowercase,
  * but does not convert the case of the beginning character when converting with Vue3.
@@ -25,9 +18,92 @@ function camelize(str) {
   return str.replace(/-(\w)/g, (_, c) => (c ? c.toUpperCase() : ''))
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
+class DefinedInSetupComponents {
+  constructor() {
+    /**
+     * Component names
+     * @type {Set<string>}
+     */
+    this.names = new Set()
+  }
+
+  /**
+   * @param {string[]} names
+   */
+  addName(...names) {
+    for (const name of names) {
+      this.names.add(name)
+    }
+  }
+
+  /**
+   * @see https://github.com/vuejs/core/blob/ae4b0783d78670b6e942ae2a4e3ec6efbbffa158/packages/compiler-core/src/transforms/transformElement.ts#L334
+   * @param {string} rawName
+   */
+  isDefinedComponent(rawName) {
+    if (this.names.has(rawName)) {
+      return true
+    }
+    const camelName = camelize(rawName)
+    if (this.names.has(camelName)) {
+      return true
+    }
+    const pascalName = casing.capitalize(camelName)
+    if (this.names.has(pascalName)) {
+      return true
+    }
+    // Check namespace
+    // https://github.com/vuejs/core/blob/ae4b0783d78670b6e942ae2a4e3ec6efbbffa158/packages/compiler-core/src/transforms/transformElement.ts#L305
+    const dotIndex = rawName.indexOf('.')
+    if (dotIndex > 0 && this.isDefinedComponent(rawName.slice(0, dotIndex))) {
+      return true
+    }
+    return false
+  }
+}
+
+class DefinedInOptionComponents {
+  constructor() {
+    /**
+     * Component names
+     * @type {Set<string>}
+     */
+    this.names = new Set()
+    /**
+     * Component names, transformed to kebab-case
+     * @type {Set<string>}
+     */
+    this.kebabCaseNames = new Set()
+  }
+
+  /**
+   * @param {string[]} names
+   */
+  addName(...names) {
+    for (const name of names) {
+      this.names.add(name)
+      this.kebabCaseNames.add(casing.kebabCase(name))
+    }
+  }
+
+  /**
+   * @param {string} rawName
+   */
+  isDefinedComponent(rawName) {
+    if (this.names.has(rawName)) {
+      return true
+    }
+    const kebabCaseName = casing.kebabCase(rawName)
+    if (
+      this.kebabCaseNames.has(kebabCaseName) &&
+      !casing.isPascalCase(rawName)
+    ) {
+      // Component registered as `foo-bar` cannot be used as `FooBar`
+      return true
+    }
+    return false
+  }
+}
 
 module.exports = {
   meta: {
@@ -50,7 +126,9 @@ module.exports = {
       }
     ],
     messages: {
-      undef: "The '<{{name}}>' component has been used, but not defined."
+      undef: "The '<{{name}}>' component has been used, but not defined.",
+      typeOnly:
+        "The '<{{name}}>' component has been used, but '{{name}}' only refers to a type."
     }
   },
   /** @param {RuleContext} context */
@@ -71,6 +149,7 @@ module.exports = {
       if (
         utils.isHtmlWellKnownElementName(rawName) ||
         utils.isSvgWellKnownElementName(rawName) ||
+        utils.isMathWellKnownElementName(rawName) ||
         utils.isBuiltInComponentName(kebabCaseName)
       ) {
         return false
@@ -99,7 +178,11 @@ module.exports = {
     /** @type {TemplateListener} */
     const templateBodyVisitor = {
       VElement(node) {
-        if (!utils.isHtmlElementNode(node) && !utils.isSvgElementNode(node)) {
+        if (
+          !utils.isHtmlElementNode(node) &&
+          !utils.isSvgElementNode(node) &&
+          !utils.isMathElementNode(node)
+        ) {
           return
         }
         verifyName(node.rawName, node.startTag)
@@ -119,55 +202,82 @@ module.exports = {
 
     if (utils.isScriptSetup(context)) {
       // For <script setup>
+      const definedInSetupComponents = new DefinedInSetupComponents()
+      const definedInOptionComponents = new DefinedInOptionComponents()
+
       /** @type {Set<string>} */
-      const scriptVariableNames = new Set()
-      const globalScope = context.getSourceCode().scopeManager.globalScope
+      const scriptTypeOnlyNames = new Set()
+      const globalScope = context.sourceCode.scopeManager.globalScope
       if (globalScope) {
         for (const variable of globalScope.variables) {
-          scriptVariableNames.add(variable.name)
+          definedInSetupComponents.addName(variable.name)
         }
         const moduleScope = globalScope.childScopes.find(
           (scope) => scope.type === 'module'
         )
         for (const variable of (moduleScope && moduleScope.variables) || []) {
-          scriptVariableNames.add(variable.name)
+          if (
+            // Check for type definitions. e.g. type Foo = {}
+            (variable.isTypeVariable && !variable.isValueVariable) ||
+            // type-only import seems to have isValueVariable set to true. So we need to check the actual Node.
+            (variable.defs.length > 0 &&
+              variable.defs.every((def) => {
+                if (def.type !== 'ImportBinding') {
+                  return false
+                }
+                if (def.parent.importKind === 'type') {
+                  // check for `import type Foo from './xxx'`
+                  return true
+                }
+                if (
+                  def.node.type === 'ImportSpecifier' &&
+                  def.node.importKind === 'type'
+                ) {
+                  // check for `import { type Foo } from './xxx'`
+                  return true
+                }
+                return false
+              }))
+          ) {
+            scriptTypeOnlyNames.add(variable.name)
+          } else {
+            definedInSetupComponents.addName(variable.name)
+          }
         }
       }
-      /**
-       * @see https://github.com/vuejs/core/blob/ae4b0783d78670b6e942ae2a4e3ec6efbbffa158/packages/compiler-core/src/transforms/transformElement.ts#L334
-       * @param {string} name
-       */
-      const existsSetupReference = (name) => {
-        if (scriptVariableNames.has(name)) {
-          return true
-        }
-        const camelName = camelize(name)
-        if (scriptVariableNames.has(camelName)) {
-          return true
-        }
-        const pascalName = casing.capitalize(camelName)
-        if (scriptVariableNames.has(pascalName)) {
-          return true
+
+      // For circular references
+      const fileName = context.filename
+      const selfComponentName = path.basename(fileName, path.extname(fileName))
+      definedInSetupComponents.addName(selfComponentName)
+      scriptVisitor = utils.defineVueVisitor(context, {
+        onVueObjectEnter(node, { type }) {
+          if (type !== 'export') return
+          const nameProperty = utils.findProperty(node, 'name')
+
+          if (nameProperty && utils.isStringLiteral(nameProperty.value)) {
+            const name = utils.getStringLiteralValue(nameProperty.value)
+            if (name) {
+              definedInOptionComponents.addName(name)
+            }
+          }
         }
-        return false
-      }
+      })
+
       verifyName = (rawName, reportNode) => {
         if (!isVerifyTargetComponent(rawName)) {
           return
         }
-        if (existsSetupReference(rawName)) {
+        if (definedInSetupComponents.isDefinedComponent(rawName)) {
           return
         }
-        // Check namespace
-        // https://github.com/vuejs/core/blob/ae4b0783d78670b6e942ae2a4e3ec6efbbffa158/packages/compiler-core/src/transforms/transformElement.ts#L305
-        const dotIndex = rawName.indexOf('.')
-        if (dotIndex > 0 && existsSetupReference(rawName.slice(0, dotIndex))) {
+        if (definedInOptionComponents.isDefinedComponent(rawName)) {
           return
         }
 
         context.report({
           node: reportNode,
-          messageId: 'undef',
+          messageId: scriptTypeOnlyNames.has(rawName) ? 'typeOnly' : 'undef',
           data: {
             name: rawName
           }
@@ -175,26 +285,10 @@ module.exports = {
       }
     } else {
       // For Options API
-
-      /**
-       * All registered components
-       * @type {string[]}
-       */
-      const registeredComponentNames = []
-      /**
-       * All registered components, transformed to kebab-case
-       * @type {string[]}
-       */
-      const registeredComponentKebabCaseNames = []
-
-      /**
-       * All registered components using kebab-case syntax
-       * @type {string[]}
-       */
-      const componentsRegisteredAsKebabCase = []
+      const definedInOptionComponents = new DefinedInOptionComponents()
 
       scriptVisitor = utils.executeOnVue(context, (obj) => {
-        registeredComponentNames.push(
+        definedInOptionComponents.addName(
           ...utils.getRegisteredComponents(obj).map(({ name }) => name)
         )
 
@@ -203,33 +297,16 @@ module.exports = {
         if (nameProperty && utils.isStringLiteral(nameProperty.value)) {
           const name = utils.getStringLiteralValue(nameProperty.value)
           if (name) {
-            registeredComponentNames.push(name)
+            definedInOptionComponents.addName(name)
           }
         }
-
-        registeredComponentKebabCaseNames.push(
-          ...registeredComponentNames.map((name) => casing.kebabCase(name))
-        )
-        componentsRegisteredAsKebabCase.push(
-          ...registeredComponentNames.filter(
-            (name) => name === casing.kebabCase(name)
-          )
-        )
       })
 
       verifyName = (rawName, reportNode) => {
         if (!isVerifyTargetComponent(rawName)) {
           return
         }
-        if (registeredComponentNames.includes(rawName)) {
-          return
-        }
-        const kebabCaseName = casing.kebabCase(rawName)
-        if (
-          registeredComponentKebabCaseNames.includes(kebabCaseName) &&
-          !casing.isPascalCase(rawName)
-        ) {
-          // Component registered as `foo-bar` cannot be used as `FooBar`
+        if (definedInOptionComponents.isDefinedComponent(rawName)) {
           return
         }
 
diff --git a/lib/rules/no-undef-properties.js b/lib/rules/no-undef-properties.js
index 7641d3afb..8de3f14cf 100644
--- a/lib/rules/no-undef-properties.js
+++ b/lib/rules/no-undef-properties.js
@@ -4,13 +4,9 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 const reserved = require('../utils/vue-reserved.json')
-const { toRegExp } = require('../utils/regexp')
+const { toRegExpGroupMatcher } = require('../utils/regexp')
 const { getStyleVariablesContext } = require('../utils/style-variables')
 const {
   definePropertyReferenceExtractor
@@ -27,10 +23,6 @@ const {
  * @property {boolean} [isProps]
  */
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 const GROUP_PROPERTY = 'props'
 const GROUP_ASYNC_DATA = 'asyncData' // Nuxt.js
 const GROUP_DATA = 'data'
@@ -84,10 +76,6 @@ function getPropertyDataFromObjectProperty(property) {
   }
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'suggestion',
@@ -118,11 +106,15 @@ module.exports = {
   /** @param {RuleContext} context */
   create(context) {
     const options = context.options[0] || {}
-    const ignores = /** @type {string[]} */ (options.ignores || ['/^\\$/']).map(
-      toRegExp
-    )
+    const { ignores = [String.raw`/^\$/`] } = options
+    const isIgnored = toRegExpGroupMatcher(ignores)
     const propertyReferenceExtractor = definePropertyReferenceExtractor(context)
-    const programNode = context.getSourceCode().ast
+    const programNode = context.sourceCode.ast
+    /**
+     * Property names identified as defined via a Vuex or Pinia helpers
+     * @type {Set<string>}
+     */
+    const propertiesDefinedByStoreHelpers = new Set()
 
     /**
      * @param {ASTNode} node
@@ -139,6 +131,8 @@ module.exports = {
 
         /** @type { Set<string | ASTNode> } */
         this.reported = new Set()
+
+        this.hasUnknownProperty = false
       }
       /**
        * Report
@@ -147,6 +141,7 @@ module.exports = {
        * @param {boolean} [options.props]
        */
       verifyReferences(references, options) {
+        if (this.hasUnknownProperty) return
         const report = this.report.bind(this)
         verifyUndefProperties(this.defineProperties, references, null)
 
@@ -194,7 +189,8 @@ module.exports = {
       report(node, name, messageId = 'undef') {
         if (
           reserved.includes(name) ||
-          ignores.some((ignore) => ignore.test(name))
+          isIgnored(name) ||
+          propertiesDefinedByStoreHelpers.has(name)
         ) {
           return
         }
@@ -218,6 +214,10 @@ module.exports = {
           }
         })
       }
+
+      markAsHasUnknownProperty() {
+        this.hasUnknownProperty = true
+      }
     }
 
     /** @type {Map<ASTNode, VueComponentContext>} */
@@ -272,7 +272,7 @@ module.exports = {
           }
 
           const ctx = getVueComponentContext(programNode)
-          const globalScope = context.getSourceCode().scopeManager.globalScope
+          const globalScope = context.sourceCode.scopeManager.globalScope
           if (globalScope) {
             for (const variable of globalScope.variables) {
               ctx.defineProperties.set(variable.name, {})
@@ -292,6 +292,10 @@ module.exports = {
           const ctx = getVueComponentContext(programNode)
 
           for (const prop of props) {
+            if (prop.type === 'unknown') {
+              ctx.markAsHasUnknownProperty()
+              return
+            }
             if (!prop.propName) {
               continue
             }
@@ -322,9 +326,61 @@ module.exports = {
           const propertyReferences =
             propertyReferenceExtractor.extractFromPattern(pattern)
           ctx.verifyReferences(propertyReferences)
+        },
+        onDefineModelEnter(_node, model) {
+          const ctx = getVueComponentContext(programNode)
+
+          ctx.defineProperties.set(model.name.modelName, {
+            isProps: true
+          })
         }
       }),
       utils.defineVueVisitor(context, {
+        /**
+         * @param {CallExpression} node
+         */
+        CallExpression(node) {
+          if (node.callee.type !== 'Identifier') return
+          /** @type {'methods'|'computed'|null} */
+          let groupName = null
+          if (/^mapMutations|mapActions$/u.test(node.callee.name)) {
+            groupName = GROUP_METHODS
+          } else if (
+            /^mapState|mapGetters|mapWritableState$/u.test(node.callee.name)
+          ) {
+            groupName = GROUP_COMPUTED_PROPERTY
+          }
+
+          if (!groupName || node.arguments.length === 0) return
+          // On Pinia the store is always the first argument
+          const arg =
+            node.arguments.length === 2 ? node.arguments[1] : node.arguments[0]
+          if (arg.type === 'ObjectExpression') {
+            // e.g.
+            // `mapMutations({ add: 'increment' })`
+            // `mapState({ count: state => state.todosCount })`
+            for (const prop of arg.properties) {
+              const name =
+                prop.type === 'SpreadElement'
+                  ? null
+                  : utils.getStaticPropertyName(prop)
+              if (name) {
+                propertiesDefinedByStoreHelpers.add(name)
+              }
+            }
+          } else if (arg.type === 'ArrayExpression') {
+            // e.g. `mapMutations(['add'])`
+            for (const element of arg.elements) {
+              if (!element || !utils.isStringLiteral(element)) {
+                continue
+              }
+              const name = utils.getStringLiteralValue(element)
+              if (name) {
+                propertiesDefinedByStoreHelpers.add(name)
+              }
+            }
+          }
+        },
         onVueObjectEnter(node) {
           const ctx = getVueComponentContext(node)
 
diff --git a/lib/rules/no-unsupported-features.js b/lib/rules/no-unsupported-features.js
index f7d51dce9..dc50c3ecc 100644
--- a/lib/rules/no-unsupported-features.js
+++ b/lib/rules/no-unsupported-features.js
@@ -20,18 +20,25 @@ const FEATURES = {
   // Vue.js 2.6.0+
   'dynamic-directive-arguments': require('./syntaxes/dynamic-directive-arguments'),
   'v-slot': require('./syntaxes/v-slot'),
+  // Vue.js 2.7.0+
+  'script-setup': require('./syntaxes/script-setup'),
+  'style-css-vars-injection': require('./syntaxes/style-css-vars-injection'),
   // Vue.js 3.0.0+
   'v-model-argument': require('./syntaxes/v-model-argument'),
   'v-model-custom-modifiers': require('./syntaxes/v-model-custom-modifiers'),
   'v-is': require('./syntaxes/v-is'),
-  'script-setup': require('./syntaxes/script-setup'),
-  'style-css-vars-injection': require('./syntaxes/style-css-vars-injection'),
   // Vue.js 3.1.0+
   'is-attribute-with-vue-prefix': require('./syntaxes/is-attribute-with-vue-prefix'),
   // Vue.js 3.2.0+
   'v-memo': require('./syntaxes/v-memo'),
   'v-bind-prop-modifier-shorthand': require('./syntaxes/v-bind-prop-modifier-shorthand'),
-  'v-bind-attr-modifier': require('./syntaxes/v-bind-attr-modifier')
+  'v-bind-attr-modifier': require('./syntaxes/v-bind-attr-modifier'),
+  // Vue.js 3.3.0+
+  'define-options': require('./syntaxes/define-options'),
+  'define-slots': require('./syntaxes/define-slots'),
+  // Vue.js 3.4.0+
+  'define-model': require('./syntaxes/define-model'),
+  'v-bind-same-name-shorthand': require('./syntaxes/v-bind-same-name-shorthand')
 }
 
 const SYNTAX_NAMES = /** @type {(keyof FEATURES)[]} */ (Object.keys(FEATURES))
@@ -50,7 +57,7 @@ function getSemverRange(x) {
   if (!ret) {
     try {
       ret = new semver.Range(s)
-    } catch (_error) {
+    } catch {
       // Ignore parsing error.
     }
     cache.set(s, ret)
@@ -68,6 +75,7 @@ module.exports = {
       categories: undefined,
       url: 'https://eslint.vuejs.org/rules/no-unsupported-features.html'
     },
+    // eslint-disable-next-line eslint-plugin/require-meta-fixable -- fixer is not recognized
     fixable: 'code',
     schema: [
       {
@@ -95,16 +103,17 @@ module.exports = {
       forbiddenDynamicDirectiveArguments:
         'Dynamic arguments are not supported until Vue.js "2.6.0".',
       forbiddenVSlot: '`v-slot` are not supported until Vue.js "2.6.0".',
+      // Vue.js 2.7.0+
+      forbiddenScriptSetup:
+        '`<script setup>` is not supported until Vue.js "2.7.0".',
+      forbiddenStyleCssVarsInjection:
+        'SFC CSS variable injection is not supported until Vue.js ">=3.0.3 || >=2.7.0 <3.0.0".',
       // Vue.js 3.0.0+
       forbiddenVModelArgument:
         'Argument on `v-model` is not supported until Vue.js "3.0.0".',
       forbiddenVModelCustomModifiers:
         'Custom modifiers on `v-model` are not supported until Vue.js "3.0.0".',
       forbiddenVIs: '`v-is` are not supported until Vue.js "3.0.0".',
-      forbiddenScriptSetup:
-        '`<script setup>` are not supported until Vue.js "3.0.0".',
-      forbiddenStyleCssVarsInjection:
-        'SFC CSS variable injection is not supported until Vue.js "3.0.3".',
       // Vue.js 3.1.0+
       forbiddenIsAttributeWithVuePrefix:
         '`is="vue:"` are not supported until Vue.js "3.1.0".',
@@ -113,7 +122,17 @@ module.exports = {
       forbiddenVBindPropModifierShorthand:
         '`.prop` shorthand are not supported until Vue.js "3.2.0".',
       forbiddenVBindAttrModifier:
-        '`.attr` modifiers on `v-bind` are not supported until Vue.js "3.2.0".'
+        '`.attr` modifiers on `v-bind` are not supported until Vue.js "3.2.0".',
+      // Vue.js 3.3.0+
+      forbiddenDefineOptions:
+        '`defineOptions()` macros are not supported until Vue.js "3.3.0".',
+      forbiddenDefineSlots:
+        '`defineSlots()` macros are not supported until Vue.js "3.3.0".',
+      // Vue.js 3.4.0+
+      forbiddenDefineModel:
+        '`defineModel()` macros are not supported until Vue.js "3.4.0".',
+      forbiddenVBindSameNameShorthand:
+        '`v-bind` same-name shorthand is not supported until Vue.js "3.4.0".'
     }
   },
   /** @param {RuleContext} context */
diff --git a/lib/rules/no-unused-components.js b/lib/rules/no-unused-components.js
index f07b9ea54..9ba889ccc 100644
--- a/lib/rules/no-unused-components.js
+++ b/lib/rules/no-unused-components.js
@@ -4,24 +4,16 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 const casing = require('../utils/casing')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'suggestion',
     docs: {
       description:
         'disallow registering components that are not used inside templates',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/no-unused-components.html'
     },
     fixable: null,
@@ -35,15 +27,18 @@ module.exports = {
         },
         additionalProperties: false
       }
-    ]
+    ],
+    messages: {
+      unused: 'The "{{name}}" component has been registered but not used.'
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
     const options = context.options[0] || {}
     const ignoreWhenBindingPresent =
-      options.ignoreWhenBindingPresent !== undefined
-        ? options.ignoreWhenBindingPresent
-        : true
+      options.ignoreWhenBindingPresent === undefined
+        ? true
+        : options.ignoreWhenBindingPresent
     const usedComponents = new Set()
     /** @type { { node: Property, name: string }[] } */
     let registeredComponents = []
@@ -57,9 +52,12 @@ module.exports = {
         /** @param {VElement} node */
         VElement(node) {
           if (
-            (!utils.isHtmlElementNode(node) && !utils.isSvgElementNode(node)) ||
+            (!utils.isHtmlElementNode(node) &&
+              !utils.isSvgElementNode(node) &&
+              !utils.isMathElementNode(node)) ||
             utils.isHtmlWellKnownElementName(node.rawName) ||
-            utils.isSvgWellKnownElementName(node.rawName)
+            utils.isSvgWellKnownElementName(node.rawName) ||
+            utils.isMathWellKnownElementName(node.rawName)
           ) {
             return
           }
@@ -132,8 +130,7 @@ module.exports = {
 
             context.report({
               node,
-              message:
-                'The "{{name}}" component has been registered but not used.',
+              messageId: 'unused',
               data: {
                 name
               }
diff --git a/lib/rules/no-unused-emit-declarations.js b/lib/rules/no-unused-emit-declarations.js
new file mode 100644
index 000000000..8ad20e0a1
--- /dev/null
+++ b/lib/rules/no-unused-emit-declarations.js
@@ -0,0 +1,354 @@
+/**
+ * @author ItMaga
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const { findVariable } = require('@eslint-community/eslint-utils')
+const utils = require('../utils')
+
+/**
+ * @typedef {import('../utils').ComponentEmit} ComponentEmit
+ * @typedef {import('../utils').VueObjectData} VueObjectData
+ */
+
+/**
+ * @typedef {object} SetupContext
+ * @property {Set<Identifier>} contextReferenceIds
+ * @property {Set<Identifier>} emitReferenceIds
+ */
+
+/**
+ * @typedef {object} NameWithLoc
+ * @property {string} name
+ * @property {SourceLocation} loc
+ * @property {Range} range
+ */
+
+/**
+ * Get the name param node from the given CallExpression
+ * @param {CallExpression} node CallExpression
+ * @returns {NameWithLoc | null}
+ */
+function getNameParamNode(node) {
+  const nameLiteralNode = node.arguments[0]
+  if (nameLiteralNode && utils.isStringLiteral(nameLiteralNode)) {
+    const name = utils.getStringLiteralValue(nameLiteralNode)
+    if (name != null) {
+      return { name, loc: nameLiteralNode.loc, range: nameLiteralNode.range }
+    }
+  }
+
+  return null
+}
+
+/**
+ * Check if the given node is a reference of setup context
+ * @param {Expression | Super | SpreadElement} value
+ * @param {SetupContext} setupContext
+ * @returns {boolean}
+ * */
+function hasReferenceId(value, setupContext) {
+  const { contextReferenceIds, emitReferenceIds } = setupContext
+  return (
+    value.type === 'Identifier' &&
+    (emitReferenceIds.has(value) || contextReferenceIds.has(value))
+  )
+}
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'disallow unused emit declarations',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/no-unused-emit-declarations.html'
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      unused: '`{{name}}` is defined as emit but never used.'
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    /** @type {Map<string, ComponentEmit>} */
+    const emitDeclarations = new Map()
+    /** @type {Map<string, Expression>} */
+    const emitCalls = new Map()
+    /** @type {Map<ObjectExpression | Program, SetupContext>} */
+    const setupContexts = new Map()
+    const programNode = context.sourceCode.ast
+    let emitParamName = ''
+
+    /**
+     * @param {CallExpression} node
+     * */
+    function addEmitCall(node) {
+      const nameParamNode = getNameParamNode(node)
+      if (nameParamNode) {
+        emitCalls.set(nameParamNode.name, node)
+      }
+    }
+    function clearEmits() {
+      emitCalls.clear()
+      emitDeclarations.clear()
+    }
+
+    /**
+     * @param {Expression | SpreadElement} expression
+     * @param {SetupContext} setupContext
+     * @returns {boolean}
+     * */
+    function checkExpressionReference(expression, setupContext) {
+      if (expression.type === 'MemberExpression') {
+        const memObject = utils.skipChainExpression(expression.object)
+        if (hasReferenceId(memObject, setupContext)) {
+          clearEmits()
+          return true
+        }
+      }
+      if (hasReferenceId(expression, setupContext)) {
+        clearEmits()
+        return true
+      }
+      return false
+    }
+
+    /**
+     *
+     * @param {Array<Expression | SpreadElement>} args
+     * @param {SetupContext} setupContext
+     * @returns {boolean}
+     */
+    function verifyArgumentsReferences(args, setupContext) {
+      for (const argument of args) {
+        if (argument.type === 'ObjectExpression') {
+          for (const property of argument.properties) {
+            if (
+              property.type === 'Property' &&
+              checkExpressionReference(property.value, setupContext)
+            ) {
+              return true
+            }
+          }
+        }
+
+        if (argument.type === 'ArrayExpression') {
+          for (const element of argument.elements) {
+            if (!element) {
+              continue
+            }
+            if (checkExpressionReference(element, setupContext)) {
+              return true
+            }
+          }
+        }
+
+        if (checkExpressionReference(argument, setupContext)) {
+          return true
+        }
+      }
+      return false
+    }
+
+    /**
+     * @param {Expression | Super} callee
+     * @param {Set<Identifier>} referenceIds
+     * @param {CallExpression} node
+     * */
+    function addEmitCallByReference(callee, referenceIds, node) {
+      if (callee.type === 'Identifier' && referenceIds.has(callee)) {
+        addEmitCall(node)
+      }
+    }
+
+    const callVisitor = {
+      /**
+       * @param {CallExpression} node
+       * @param {VueObjectData} [info]
+       */
+      CallExpression(node, info) {
+        const callee = utils.skipChainExpression(node.callee)
+
+        let emit = null
+        if (callee.type === 'MemberExpression') {
+          const name = utils.getStaticPropertyName(callee)
+          if (name === 'emit' || name === '$emit') {
+            emit = { name, member: callee }
+          }
+        }
+
+        const vueDefineNode = info ? info.node : programNode
+        const setupContext = setupContexts.get(vueDefineNode)
+        if (setupContext) {
+          if (
+            callee.parent.type === 'CallExpression' &&
+            callee.parent.arguments &&
+            verifyArgumentsReferences(callee.parent.arguments, setupContext)
+          ) {
+            // skip if the emit passed as argument
+            return
+          }
+
+          const { contextReferenceIds, emitReferenceIds } = setupContext
+
+          // verify setup(props,{emit}) {emit()}
+          addEmitCallByReference(callee, emitReferenceIds, node)
+          if (emit && emit.name === 'emit') {
+            const memObject = utils.skipChainExpression(emit.member.object)
+            // verify setup(props,context) {context.emit()}
+            addEmitCallByReference(memObject, contextReferenceIds, node)
+          }
+        }
+
+        if (emit && emit.name === '$emit') {
+          const memObject = utils.skipChainExpression(emit.member.object)
+          // verify this.$emit()
+          if (utils.isThis(memObject, context)) {
+            addEmitCall(node)
+          }
+        }
+
+        // verify $emit() and defineEmits variable in template
+        if (
+          callee.type === 'Identifier' &&
+          (callee.name === '$emit' || callee.name === emitParamName)
+        ) {
+          addEmitCall(node)
+        }
+      }
+    }
+
+    return utils.compositingVisitors(
+      utils.defineTemplateBodyVisitor(context, callVisitor),
+      utils.defineVueVisitor(context, {
+        ...callVisitor,
+        onVueObjectEnter(node) {
+          for (const emit of utils.getComponentEmitsFromOptions(node)) {
+            if (emit.emitName) {
+              emitDeclarations.set(emit.emitName, emit)
+            }
+          }
+        },
+        onSetupFunctionEnter(node, { node: vueNode }) {
+          const contextParam = node.params[1]
+          if (
+            !contextParam ||
+            contextParam.type === 'RestElement' ||
+            contextParam.type === 'ArrayPattern'
+          ) {
+            // no arguments or cannot check
+            return
+          }
+
+          /** @type {Set<Identifier>} */
+          const contextReferenceIds = new Set()
+          /** @type {Set<Identifier>} */
+          const emitReferenceIds = new Set()
+          if (contextParam.type === 'ObjectPattern') {
+            const emitProperty = utils.findAssignmentProperty(
+              contextParam,
+              'emit'
+            )
+            if (!emitProperty) {
+              return
+            }
+            const emitParam = emitProperty.value
+            // `setup(props, {emit})`
+            const variable =
+              emitParam.type === 'Identifier'
+                ? findVariable(utils.getScope(context, emitParam), emitParam)
+                : null
+            if (!variable) {
+              return
+            }
+            for (const reference of variable.references) {
+              emitReferenceIds.add(reference.identifier)
+            }
+          } else if (contextParam.type === 'Identifier') {
+            // `setup(props, context)`
+            const variable = findVariable(
+              utils.getScope(context, contextParam),
+              contextParam
+            )
+            for (const reference of variable.references) {
+              contextReferenceIds.add(reference.identifier)
+            }
+          }
+
+          setupContexts.set(vueNode, {
+            contextReferenceIds,
+            emitReferenceIds
+          })
+        }
+      }),
+      utils.defineScriptSetupVisitor(context, {
+        onDefineEmitsEnter(node, emits) {
+          for (const emit of emits) {
+            if (emit.emitName) {
+              emitDeclarations.set(emit.emitName, emit)
+            }
+          }
+
+          if (
+            !node.parent ||
+            node.parent.type !== 'VariableDeclarator' ||
+            node.parent.init !== node
+          ) {
+            return
+          }
+
+          const emitParam = node.parent.id
+          if (emitParam.type !== 'Identifier') {
+            return
+          }
+
+          emitParamName = emitParam.name
+          const variable = findVariable(
+            utils.getScope(context, emitParam),
+            emitParam
+          )
+          if (!variable) {
+            return
+          }
+          /** @type {Set<Identifier>} */
+          const emitReferenceIds = new Set()
+          for (const reference of variable.references) {
+            emitReferenceIds.add(reference.identifier)
+          }
+          setupContexts.set(programNode, {
+            contextReferenceIds: new Set(),
+            emitReferenceIds
+          })
+        },
+        onDefineModelEnter(node, model) {
+          if (
+            node.parent &&
+            node.parent.type === 'VariableDeclarator' &&
+            node.parent.init === node
+          ) {
+            // If the return value of defineModel() is stored in a variable, we can mark the 'update:modelName' event as used if that that variable is used.
+            // If that variable is unused, it will already be reported by `no-unused-var` rule.
+            emitCalls.set(`update:${model.name.modelName}`, node)
+          }
+        },
+        ...callVisitor
+      }),
+      {
+        'Program:exit'() {
+          for (const [name, emit] of emitDeclarations) {
+            if (!emitCalls.has(name) && emit.node) {
+              context.report({
+                node: emit.node,
+                loc: emit.node.loc,
+                messageId: 'unused',
+                data: { name }
+              })
+            }
+          }
+        }
+      }
+    )
+  }
+}
diff --git a/lib/rules/no-unused-properties.js b/lib/rules/no-unused-properties.js
index 1414df359..b1e8f0797 100644
--- a/lib/rules/no-unused-properties.js
+++ b/lib/rules/no-unused-properties.js
@@ -4,12 +4,9 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
-const eslintUtils = require('eslint-utils')
+const eslintUtils = require('@eslint-community/eslint-utils')
+const { isJSDocComment } = require('../utils/comments.js')
 const { getStyleVariablesContext } = require('../utils/style-variables')
 const {
   definePropertyReferenceExtractor,
@@ -33,7 +30,7 @@ const {
  * @typedef {object} ComponentNonObjectPropertyData
  * @property {string} name
  * @property {GroupName} groupName
- * @property {'array' | 'type'} type
+ * @property {'array' | 'type' | 'infer-type' | 'model' } type
  * @property {ASTNode} node
  *
  * @typedef { ComponentNonObjectPropertyData | ComponentObjectPropertyData } ComponentPropertyData
@@ -49,10 +46,6 @@ const {
  * @property {IPropertyReferences[]} propertyReferencesForProps
  */
 
-// ------------------------------------------------------------------------------
-// Constants
-// ------------------------------------------------------------------------------
-
 const GROUP_PROPERTY = 'props'
 const GROUP_DATA = 'data'
 const GROUP_ASYNC_DATA = 'asyncData'
@@ -62,6 +55,9 @@ const GROUP_SETUP = 'setup'
 const GROUP_WATCHER = 'watch'
 const GROUP_EXPOSE = 'expose'
 
+const UNREFERENCED_UNKNOWN_MEMBER = 'unknownMemberAsUnreferenced'
+const UNREFERENCED_RETURN = 'returnAsUnreferenced'
+
 const PROPERTY_LABEL = {
   props: 'property',
   data: 'data',
@@ -77,10 +73,6 @@ const PROPERTY_LABEL = {
   expose: 'expose'
 }
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 /**
  * @param {RuleContext} context
  * @param {Identifier} id
@@ -181,21 +173,13 @@ function findJSDocComment(node, sourceCode) {
     break
   }
 
-  if (
-    tokenBefore &&
-    tokenBefore.type === 'Block' &&
-    tokenBefore.value.charAt(0) === '*'
-  ) {
+  if (tokenBefore && isJSDocComment(tokenBefore)) {
     return tokenBefore
   }
 
   return null
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'suggestion',
@@ -225,7 +209,15 @@ module.exports = {
             uniqueItems: true
           },
           deepData: { type: 'boolean' },
-          ignorePublicMembers: { type: 'boolean' }
+          ignorePublicMembers: { type: 'boolean' },
+          unreferencedOptions: {
+            type: 'array',
+            items: {
+              enum: [UNREFERENCED_UNKNOWN_MEMBER, UNREFERENCED_RETURN]
+            },
+            additionalItems: false,
+            uniqueItems: true
+          }
         },
         additionalProperties: false
       }
@@ -240,8 +232,19 @@ module.exports = {
     const groups = new Set(options.groups || [GROUP_PROPERTY])
     const deepData = Boolean(options.deepData)
     const ignorePublicMembers = Boolean(options.ignorePublicMembers)
+    const unreferencedOptions = new Set(options.unreferencedOptions || [])
+    /** @type {null | Pattern} */
+    let propsReferencePattern = null
 
-    const propertyReferenceExtractor = definePropertyReferenceExtractor(context)
+    const propertyReferenceExtractor = definePropertyReferenceExtractor(
+      context,
+      {
+        unknownMemberAsUnreferenced: unreferencedOptions.has(
+          UNREFERENCED_UNKNOWN_MEMBER
+        ),
+        returnAsUnreferenced: unreferencedOptions.has(UNREFERENCED_RETURN)
+      }
+    )
 
     /** @type {TemplatePropertiesContainer} */
     const templatePropertiesContainer = {
@@ -267,6 +270,7 @@ module.exports = {
       }
       return container
     }
+
     /**
      * @param {string[]} segments
      * @param {Expression} propertyValue
@@ -330,8 +334,9 @@ module.exports = {
 
         for (const property of container.properties) {
           if (
-            property.groupName === 'props' &&
-            propertyReferencesForProps.hasProperty(property.name)
+            (property.groupName === 'props' &&
+              propertyReferencesForProps.hasProperty(property.name)) ||
+            propertyReferences.hasProperty('$props')
           ) {
             // used props
             continue
@@ -345,10 +350,11 @@ module.exports = {
           }
           if (
             ignorePublicMembers &&
-            isPublicMember(property, context.getSourceCode())
+            isPublicMember(property, context.sourceCode)
           ) {
             continue
           }
+
           if (propertyReferences.hasProperty(property.name)) {
             // used
             if (
@@ -366,6 +372,7 @@ module.exports = {
             }
             continue
           }
+
           context.report({
             node: property.node,
             messageId: 'unused',
@@ -403,7 +410,9 @@ module.exports = {
           if (!groups.has('props')) {
             return
           }
-          const container = getVueComponentPropertiesContainer(node)
+          const container = getVueComponentPropertiesContainer(
+            context.sourceCode.ast
+          )
 
           for (const prop of props) {
             if (!prop.propName) {
@@ -422,7 +431,7 @@ module.exports = {
                 type: prop.type,
                 name: prop.propName,
                 groupName: 'props',
-                node: prop.key
+                node: prop.type === 'infer-type' ? prop.node : prop.key
               })
             }
           }
@@ -445,15 +454,107 @@ module.exports = {
             return
           }
 
-          const pattern = target.parent.id
+          propsReferencePattern = target.parent.id
           const propertyReferences =
-            propertyReferenceExtractor.extractFromPattern(pattern)
+            propertyReferenceExtractor.extractFromPattern(propsReferencePattern)
           container.propertyReferencesForProps.push(propertyReferences)
+        },
+        onDefineModelEnter(node, model) {
+          if (!groups.has('props')) {
+            return
+          }
+          const container = getVueComponentPropertiesContainer(
+            context.sourceCode.ast
+          )
+          if (
+            node.parent &&
+            node.parent.type === 'VariableDeclarator' &&
+            node.parent.init === node
+          ) {
+            // If the return value of defineModel() is stored in a variable, we can mark the model prop as used if that that variable is used.
+            // If that variable is unused, it will already be reported by `no-unused-var` rule.
+            container.propertyReferences.push(
+              propertyReferenceExtractor.extractFromName(
+                model.name.modelName,
+                model.name.node || node
+              )
+            )
+            return
+          }
+          container.properties.push({
+            type: 'model',
+            name: model.name.modelName,
+            groupName: 'props',
+            node: model.name.node || node
+          })
         }
       }),
       utils.defineVueVisitor(context, {
-        onVueObjectEnter(node) {
-          const container = getVueComponentPropertiesContainer(node)
+        /**
+         * @param {CallExpression} node
+         * @param {VueObjectData} vueData
+         */
+        CallExpression(node, vueData) {
+          if (node.callee.type !== 'Identifier') return
+          /** @type {'methods'|'computed'|null} */
+          let groupName = null
+          if (/^mapMutations|mapActions$/u.test(node.callee.name)) {
+            groupName = 'methods'
+          } else if (
+            /^mapState|mapGetters|mapWritableState$/u.test(node.callee.name)
+          ) {
+            groupName = 'computed'
+          }
+
+          if (!groupName || node.arguments.length === 0) return
+          // On Pinia the store is always the first argument
+          const arg =
+            node.arguments.length === 2 ? node.arguments[1] : node.arguments[0]
+          if (arg.type === 'ObjectExpression') {
+            // e.g.
+            // `mapMutations({ add: 'increment' })`
+            // `mapState({ count: state => state.todosCount })`
+            const container = getVueComponentPropertiesContainer(vueData.node)
+            for (const prop of arg.properties) {
+              const name =
+                prop.type === 'SpreadElement'
+                  ? null
+                  : utils.getStaticPropertyName(prop)
+              if (name) {
+                container.properties.push({
+                  type: 'array',
+                  name,
+                  groupName,
+                  node: prop
+                })
+              }
+            }
+          } else if (arg.type === 'ArrayExpression') {
+            // e.g. `mapMutations(['add'])`
+            const container = getVueComponentPropertiesContainer(vueData.node)
+            for (const element of arg.elements) {
+              if (
+                !element ||
+                (element.type !== 'Literal' &&
+                  element.type !== 'TemplateLiteral')
+              ) {
+                continue
+              }
+              const name = utils.getStringLiteralValue(element)
+              if (name) {
+                container.properties.push({
+                  type: 'array',
+                  name,
+                  groupName,
+                  node: element
+                })
+              }
+            }
+          }
+        },
+
+        onVueObjectEnter(node, vueNode) {
+          const container = getVueComponentPropertiesContainer(vueNode.node)
 
           for (const watcherOrExpose of utils.iterateProperties(
             node,
@@ -494,8 +595,10 @@ module.exports = {
               )
             }
           }
+
           container.properties.push(...utils.iterateProperties(node, groups))
         },
+
         /** @param { (FunctionExpression | ArrowFunctionExpression) & { parent: Property }} node */
         'ObjectExpression > Property > :function[params.length>0]'(
           node,
@@ -610,9 +713,26 @@ module.exports = {
        * @param {VExpressionContainer} node
        */
       VExpressionContainer(node) {
-        templatePropertiesContainer.propertyReferences.push(
+        const property =
           propertyReferenceExtractor.extractFromVExpressionContainer(node)
-        )
+
+        templatePropertiesContainer.propertyReferences.push(property)
+
+        if (!propsReferencePattern) {
+          return
+        }
+
+        // props.prop in template
+        for (const key of property.allProperties().keys()) {
+          if (
+            propsReferencePattern.type === 'Identifier' &&
+            propsReferencePattern.name === key
+          ) {
+            templatePropertiesContainer.propertyReferences.push(
+              property.getNest(key)
+            )
+          }
+        }
       },
       /**
        * @param {VAttribute} node
diff --git a/lib/rules/no-unused-refs.js b/lib/rules/no-unused-refs.js
index 248f11c59..d685bba2e 100644
--- a/lib/rules/no-unused-refs.js
+++ b/lib/rules/no-unused-refs.js
@@ -4,16 +4,8 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 /**
  * Extract names from references objects.
  * @param {VReference[]} references
@@ -22,10 +14,6 @@ function getReferences(references) {
   return references.filter((ref) => ref.variable == null).map((ref) => ref.id)
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'suggestion',
@@ -140,7 +128,7 @@ module.exports = {
         }
         case 'CallExpression': {
           const argIndex = parent.arguments.indexOf(node)
-          if (argIndex > -1) {
+          if (argIndex !== -1) {
             // `foo($refs)`
             hasUnknown = true
           }
@@ -193,8 +181,7 @@ module.exports = {
         utils.isScriptSetup(context)
           ? {
               Program() {
-                const globalScope =
-                  context.getSourceCode().scopeManager.globalScope
+                const globalScope = context.sourceCode.scopeManager.globalScope
                 if (!globalScope) {
                   return
                 }
@@ -245,6 +232,21 @@ module.exports = {
               refsNode = id.parent
             }
             extractUsedForPattern(refsNode)
+          },
+          CallExpression(callExpression) {
+            const firstArgument = callExpression.arguments[0]
+            if (
+              callExpression.callee.type !== 'Identifier' ||
+              callExpression.callee.name !== 'useTemplateRef' ||
+              !firstArgument ||
+              !utils.isStringLiteral(firstArgument)
+            ) {
+              return
+            }
+            const name = utils.getStringLiteralValue(firstArgument)
+            if (name !== null) {
+              usedRefs.add(name)
+            }
           }
         }
       )
diff --git a/lib/rules/no-unused-vars.js b/lib/rules/no-unused-vars.js
index 430d3bedf..b0226bbaf 100644
--- a/lib/rules/no-unused-vars.js
+++ b/lib/rules/no-unused-vars.js
@@ -10,10 +10,6 @@ const utils = require('../utils')
  * @typedef {VVariable['kind']} VariableKind
  */
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 /**
  * Groups variables by directive kind.
  * @param {VElement} node The element node
@@ -53,21 +49,17 @@ function isDestructuringVar(variable) {
   return false
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
-    hasSuggestions: true,
     type: 'suggestion',
     docs: {
       description:
         'disallow unused variable definitions of v-for directives or scope attributes',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/no-unused-vars.html'
     },
     fixable: null,
+    hasSuggestions: true,
     schema: [
       {
         type: 'object',
@@ -78,7 +70,12 @@ module.exports = {
         },
         additionalProperties: false
       }
-    ]
+    ],
+    messages: {
+      unusedVariable: "'{{name}}' is defined but never used.",
+      replaceWithUnderscore:
+        'Replace `{{name}}` with `_{{name}}` to ignore the unused variable.'
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
@@ -121,7 +118,7 @@ module.exports = {
             context.report({
               node: variable.id,
               loc: variable.id.loc,
-              message: `'{{name}}' is defined but never used.`,
+              messageId: 'unusedVariable',
               data: {
                 name: variable.id.name
               },
@@ -129,7 +126,8 @@ module.exports = {
                 ignorePattern === '^_'
                   ? [
                       {
-                        desc: `Replace the ${variable.id.name} with _${variable.id.name}`,
+                        messageId: 'replaceWithUnderscore',
+                        data: { name: variable.id.name },
                         fix(fixer) {
                           return fixer.replaceText(
                             variable.id,
diff --git a/lib/rules/no-use-computed-property-like-method.js b/lib/rules/no-use-computed-property-like-method.js
index 957f2b6ac..6e89ad263 100644
--- a/lib/rules/no-use-computed-property-like-method.js
+++ b/lib/rules/no-use-computed-property-like-method.js
@@ -4,10 +4,7 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-const eslintUtils = require('eslint-utils')
+const eslintUtils = require('@eslint-community/eslint-utils')
 const utils = require('../utils')
 
 /**
@@ -22,10 +19,6 @@ const utils = require('../utils')
  * @property {CallExpression} node
  */
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 /** @type {Set<GroupName>} */
 const GROUPS = new Set(['data', 'props', 'computed', 'methods'])
 
@@ -75,26 +68,39 @@ function resolvedExpressions(context, node) {
    * @returns {Iterable<Expression>}
    */
   function* extractResolvedExpressions(node) {
-    if (node.type === 'Identifier') {
-      const variable = utils.findVariableByIdentifier(context, node)
-      if (variable) {
-        for (const ref of variable.references) {
-          const id = ref.identifier
-          if (id.parent.type === 'VariableDeclarator') {
-            if (id.parent.id === id && id.parent.init) {
-              yield* resolvedExpressionsInternal(id.parent.init)
+    switch (node.type) {
+      case 'Identifier': {
+        const variable = utils.findVariableByIdentifier(context, node)
+        if (variable) {
+          for (const ref of variable.references) {
+            const id = ref.identifier
+            if (id.parent.type === 'VariableDeclarator') {
+              if (id.parent.id === id && id.parent.init) {
+                yield* resolvedExpressionsInternal(id.parent.init)
+              }
+            } else if (
+              id.parent.type === 'AssignmentExpression' &&
+              id.parent.left === id
+            ) {
+              yield* resolvedExpressionsInternal(id.parent.right)
             }
-          } else if (
-            id.parent.type === 'AssignmentExpression' &&
-            id.parent.left === id
-          ) {
-            yield* resolvedExpressionsInternal(id.parent.right)
           }
         }
+
+        break
+      }
+      case 'ConditionalExpression': {
+        yield* resolvedExpressionsInternal(node.consequent)
+        yield* resolvedExpressionsInternal(node.alternate)
+
+        break
+      }
+      case 'LogicalExpression': {
+        yield* resolvedExpressionsInternal(node.left)
+        yield* resolvedExpressionsInternal(node.right)
+
+        break
       }
-    } else if (node.type === 'ConditionalExpression') {
-      yield* resolvedExpressionsInternal(node.consequent)
-      yield* resolvedExpressionsInternal(node.alternate)
     }
   }
 }
@@ -110,7 +116,7 @@ function resolvedExpressions(context, node) {
  * props: {
  *   propA: String, // => String
  *   propB: {
- *     type: Number // => String
+ *     type: Number // => Number
  *   },
  * }
  */
@@ -196,7 +202,6 @@ function maybeFunction(context, node) {
       expr.type === 'Literal' ||
       expr.type === 'TemplateLiteral' ||
       expr.type === 'BinaryExpression' ||
-      expr.type === 'LogicalExpression' ||
       expr.type === 'UnaryExpression' ||
       expr.type === 'UpdateExpression'
     ) {
@@ -499,7 +504,7 @@ module.exports = {
     type: 'problem',
     docs: {
       description: 'disallow use computed property like method',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/no-use-computed-property-like-method.html'
     },
     fixable: null,
diff --git a/lib/rules/no-use-v-else-with-v-for.js b/lib/rules/no-use-v-else-with-v-for.js
new file mode 100644
index 000000000..dd6dec41c
--- /dev/null
+++ b/lib/rules/no-use-v-else-with-v-for.js
@@ -0,0 +1,44 @@
+'use strict'
+
+const { defineTemplateBodyVisitor, hasDirective } = require('../utils')
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        'disallow using `v-else-if`/`v-else` on the same element as `v-for`',
+      categories: null,
+      url: 'https://eslint.vuejs.org/rules/no-use-v-else-with-v-for.html'
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      unexpectedDirectiveWithVFor:
+        'Unexpected `{{ directiveName }}` and `v-for` on the same element. Move `{{ directiveName }}` to a wrapper element instead.'
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    return defineTemplateBodyVisitor(context, {
+      /** @param {VDirective} node */
+      "VAttribute[directive=true][key.name.name='for']"(node) {
+        const element = node.parent.parent
+
+        if (hasDirective(element, 'else-if')) {
+          context.report({
+            node: element,
+            messageId: 'unexpectedDirectiveWithVFor',
+            data: { directiveName: 'v-else-if' }
+          })
+        } else if (hasDirective(element, 'else')) {
+          context.report({
+            node: element,
+            messageId: 'unexpectedDirectiveWithVFor',
+            data: { directiveName: 'v-else' }
+          })
+        }
+      }
+    })
+  }
+}
diff --git a/lib/rules/no-use-v-if-with-v-for.js b/lib/rules/no-use-v-if-with-v-for.js
index 3d48d100e..b6d04e60d 100644
--- a/lib/rules/no-use-v-if-with-v-for.js
+++ b/lib/rules/no-use-v-if-with-v-for.js
@@ -5,16 +5,8 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 /**
  * Check whether the given `v-if` node is using the variable which is defined by the `v-for` directive.
  * @param {VDirective} vIf The `v-if` attribute node to check.
@@ -42,16 +34,12 @@ function getVForUsingIterationVar(vIf) {
   return null
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'suggestion',
     docs: {
-      description: 'disallow use v-if on the same element as v-for',
-      categories: ['vue3-essential', 'essential'],
+      description: 'disallow using `v-if` on the same element as `v-for`',
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/no-use-v-if-with-v-for.html'
     },
     fixable: null,
@@ -65,7 +53,12 @@ module.exports = {
         },
         additionalProperties: false
       }
-    ]
+    ],
+    messages: {
+      movedToWrapper: "This 'v-if' should be moved to the wrapper element.",
+      shouldUseComputed:
+        "The '{{iteratorName}}' {{kind}} inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'."
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
@@ -92,13 +85,12 @@ module.exports = {
               context.report({
                 node,
                 loc: node.loc,
-                message:
-                  "The '{{iteratorName}}' {{kind}} inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'.",
+                messageId: 'shouldUseComputed',
                 data: {
                   iteratorName:
                     iteratorNode.type === 'Identifier'
                       ? iteratorNode.name
-                      : context.getSourceCode().getText(iteratorNode),
+                      : context.sourceCode.getText(iteratorNode),
                   kind:
                     iteratorNode.type === 'Identifier'
                       ? 'variable'
@@ -110,7 +102,7 @@ module.exports = {
             context.report({
               node,
               loc: node.loc,
-              message: "This 'v-if' should be moved to the wrapper element."
+              messageId: 'movedToWrapper'
             })
           }
         }
diff --git a/lib/rules/no-useless-concat.js b/lib/rules/no-useless-concat.js
index f2c51b908..6ded65142 100644
--- a/lib/rules/no-useless-concat.js
+++ b/lib/rules/no-useless-concat.js
@@ -5,7 +5,7 @@
 
 const { wrapCoreRule } = require('../utils')
 
-// eslint-disable-next-line no-invalid-meta, no-invalid-meta-docs-categories
+// eslint-disable-next-line internal/no-invalid-meta
 module.exports = wrapCoreRule('no-useless-concat', {
   applyDocument: true
 })
diff --git a/lib/rules/no-useless-mustaches.js b/lib/rules/no-useless-mustaches.js
index 51e3853ba..cfb1fe2c0 100644
--- a/lib/rules/no-useless-mustaches.js
+++ b/lib/rules/no-useless-mustaches.js
@@ -31,16 +31,13 @@ function stripQuotesForHTML(text) {
 
 module.exports = {
   meta: {
+    type: 'suggestion',
     docs: {
       description: 'disallow unnecessary mustache interpolations',
       categories: undefined,
       url: 'https://eslint.vuejs.org/rules/no-useless-mustaches.html'
     },
     fixable: 'code',
-    messages: {
-      unexpected:
-        'Unexpected mustache interpolation with a string literal value.'
-    },
     schema: [
       {
         type: 'object',
@@ -55,14 +52,17 @@ module.exports = {
         additionalProperties: false
       }
     ],
-    type: 'suggestion'
+    messages: {
+      unexpected:
+        'Unexpected mustache interpolation with a string literal value.'
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
     const opts = context.options[0] || {}
     const ignoreIncludesComment = opts.ignoreIncludesComment
     const ignoreStringEscape = opts.ignoreStringEscape
-    const sourceCode = context.getSourceCode()
+    const sourceCode = context.sourceCode
 
     /**
      * Report if the value expression is string literals
@@ -92,8 +92,7 @@ module.exports = {
       } else {
         return
       }
-
-      const tokenStore = context.parserServices.getTemplateBodyTokenStore()
+      const tokenStore = sourceCode.parserServices.getTemplateBodyTokenStore()
       const hasComment = tokenStore
         .getTokens(node, { includeComments: true })
         .some((t) => t.type === 'Block' || t.type === 'Line')
@@ -143,8 +142,9 @@ module.exports = {
             // It doesn't autofix because another rule like indent or eol space might remove spaces.
             return null
           }
+          const escaped = text.replace(/</g, '&lt;')
 
-          return fixer.replaceText(node, text.replace(/\\([\S\s])/g, '$1'))
+          return fixer.replaceText(node, escaped.replace(/\\([\S\s])/g, '$1'))
         }
       })
     }
diff --git a/lib/rules/no-useless-template-attributes.js b/lib/rules/no-useless-template-attributes.js
index f86384a22..27c583511 100644
--- a/lib/rules/no-useless-template-attributes.js
+++ b/lib/rules/no-useless-template-attributes.js
@@ -4,16 +4,8 @@
  */
 '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',
@@ -23,9 +15,6 @@ const SPECIAL_TEMPLATE_DIRECTIVES = new Set([
   'slot'
 ])
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
 /**
  * @param {VAttribute | VDirective} attr
  */
@@ -80,7 +69,7 @@ module.exports = {
     type: 'problem',
     docs: {
       description: 'disallow useless attribute on `<template>`',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/no-useless-template-attributes.html'
     },
     fixable: null,
diff --git a/lib/rules/no-useless-v-bind.js b/lib/rules/no-useless-v-bind.js
index 9f9da6e27..bce0e7426 100644
--- a/lib/rules/no-useless-v-bind.js
+++ b/lib/rules/no-useless-v-bind.js
@@ -11,15 +11,13 @@ const SINGLE_QUOTES_RE = /'/gu
 
 module.exports = {
   meta: {
+    type: 'suggestion',
     docs: {
       description: 'disallow unnecessary `v-bind` directives',
       categories: undefined,
       url: 'https://eslint.vuejs.org/rules/no-useless-v-bind.html'
     },
     fixable: 'code',
-    messages: {
-      unexpected: 'Unexpected `v-bind` with a string literal value.'
-    },
     schema: [
       {
         type: 'object',
@@ -34,14 +32,16 @@ module.exports = {
         additionalProperties: false
       }
     ],
-    type: 'suggestion'
+    messages: {
+      unexpected: 'Unexpected `v-bind` with a string literal value.'
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
     const opts = context.options[0] || {}
     const ignoreIncludesComment = opts.ignoreIncludesComment
     const ignoreStringEscape = opts.ignoreStringEscape
-    const sourceCode = context.getSourceCode()
+    const sourceCode = context.sourceCode
 
     /**
      * Report if the value expression is string literals
@@ -76,7 +76,7 @@ module.exports = {
         return
       }
 
-      const tokenStore = context.parserServices.getTemplateBodyTokenStore()
+      const tokenStore = sourceCode.parserServices.getTemplateBodyTokenStore()
       const hasComment = tokenStore
         .getTokens(value, { includeComments: true })
         .some((t) => t.type === 'Block' || t.type === 'Line')
@@ -132,14 +132,16 @@ module.exports = {
           let attrValue
           if (quoteChar === '"') {
             attrValue = strValue.replace(DOUBLE_QUOTES_RE, '&quot;')
+            attrValue = quoteChar + attrValue + quoteChar
           } else if (quoteChar === "'") {
             attrValue = strValue.replace(SINGLE_QUOTES_RE, '&apos;')
+            attrValue = quoteChar + attrValue + quoteChar
           } else {
             attrValue = strValue
               .replace(DOUBLE_QUOTES_RE, '&quot;')
               .replace(SINGLE_QUOTES_RE, '&apos;')
           }
-          yield fixer.replaceText(expression, attrValue)
+          yield fixer.replaceText(value, attrValue)
         }
       })
     }
diff --git a/lib/rules/no-v-for-template-key-on-child.js b/lib/rules/no-v-for-template-key-on-child.js
index 79ee1d97c..e93be7ea8 100644
--- a/lib/rules/no-v-for-template-key-on-child.js
+++ b/lib/rules/no-v-for-template-key-on-child.js
@@ -5,16 +5,8 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 /**
  * Check whether the given attribute is using the variables which are defined by `v-for` directives.
  * @param {VDirective} vFor The attribute node of `v-for` to check.
@@ -35,10 +27,6 @@ function isUsingIterationVar(vFor, vBindKey) {
   )
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
diff --git a/lib/rules/no-v-for-template-key.js b/lib/rules/no-v-for-template-key.js
index 9a0175150..79efada4c 100644
--- a/lib/rules/no-v-for-template-key.js
+++ b/lib/rules/no-v-for-template-key.js
@@ -5,19 +5,16 @@
 
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
     docs: {
       description: 'disallow `key` attribute on `<template v-for>`',
-      categories: ['essential'],
+      categories: ['vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/no-v-for-template-key.html'
     },
     fixable: null,
+    deprecated: true,
     schema: [],
     messages: {
       disallow:
diff --git a/lib/rules/no-v-html.js b/lib/rules/no-v-html.js
index 33a1bfa30..7690ba60b 100644
--- a/lib/rules/no-v-html.js
+++ b/lib/rules/no-v-html.js
@@ -5,30 +5,75 @@
 'use strict'
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'suggestion',
     docs: {
       description: 'disallow use of v-html to prevent XSS attack',
-      categories: ['vue3-recommended', 'recommended'],
+      categories: ['vue3-recommended', 'vue2-recommended'],
       url: 'https://eslint.vuejs.org/rules/no-v-html.html'
     },
     fixable: null,
-    schema: []
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          ignorePattern: {
+            type: 'string'
+          }
+        },
+        additionalProperties: false
+      }
+    ],
+    messages: {
+      unexpected: "'v-html' directive can lead to XSS attack."
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
+    const options = context.options[0]
+    const ignoreRegEx = options?.ignorePattern
+      ? new RegExp(options.ignorePattern, 'u')
+      : undefined
+
+    /**
+     * Check if the expression matches the ignore pattern
+     * @param {VExpressionContainer['expression']} expression
+     * @param {SourceCode} sourceCode
+     * @returns {boolean}
+     */
+    function shouldIgnore(expression, sourceCode) {
+      if (!ignoreRegEx || !expression) {
+        return false
+      }
+
+      // For simple identifiers, use the name property directly (optimized)
+      if (expression.type === 'Identifier') {
+        return ignoreRegEx.test(expression.name)
+      }
+
+      // For other expression types (e.g., CallExpression), get the full text
+      const expressionText = sourceCode.getText(expression)
+      return ignoreRegEx.test(expressionText)
+    }
+
     return utils.defineTemplateBodyVisitor(context, {
       /** @param {VDirective} node */
       "VAttribute[directive=true][key.name.name='html']"(node) {
+        const sourceCode = context.sourceCode
+
+        if (
+          node.value &&
+          node.value.expression &&
+          sourceCode &&
+          shouldIgnore(node.value.expression, sourceCode)
+        ) {
+          return
+        }
         context.report({
           node,
           loc: node.loc,
-          message: "'v-html' directive can lead to XSS attack."
+          messageId: 'unexpected'
         })
       }
     })
diff --git a/lib/rules/no-v-model-argument.js b/lib/rules/no-v-model-argument.js
index 615af912c..7d5b7bc32 100644
--- a/lib/rules/no-v-model-argument.js
+++ b/lib/rules/no-v-model-argument.js
@@ -4,26 +4,19 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
     docs: {
       description:
         'disallow adding an argument to `v-model` used in custom component',
-      categories: ['essential'],
+      categories: ['vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/no-v-model-argument.html'
     },
     fixable: null,
+    deprecated: true,
     schema: [],
     messages: {
       vModelRequireNoArgument: "'v-model' directives require no argument."
diff --git a/lib/rules/no-v-text-v-html-on-component.js b/lib/rules/no-v-text-v-html-on-component.js
index d6af976bd..e3f1f5409 100644
--- a/lib/rules/no-v-text-v-html-on-component.js
+++ b/lib/rules/no-v-text-v-html-on-component.js
@@ -4,26 +4,36 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
-
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
+const casing = require('../utils/casing')
 
 module.exports = {
   meta: {
     type: 'problem',
     docs: {
       description: 'disallow v-text / v-html on component',
-      categories: ['essential', 'vue3-essential'],
+      categories: ['vue2-essential', 'vue3-essential'],
       url: 'https://eslint.vuejs.org/rules/no-v-text-v-html-on-component.html'
     },
     fixable: null,
-    schema: [],
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          allow: {
+            type: 'array',
+            items: {
+              type: 'string'
+            },
+            uniqueItems: true
+          },
+          ignoreElementNamespaces: {
+            type: 'boolean'
+          }
+        },
+        additionalProperties: false
+      }
+    ],
     messages: {
       disallow:
         "Using {{directiveName}} on component may break component's content."
@@ -31,13 +41,36 @@ module.exports = {
   },
   /** @param {RuleContext} context */
   create(context) {
+    const options = context.options[0] || {}
+    /** @type {Set<string>} */
+    const allow = new Set(options.allow)
+    /** @type {boolean} */
+    const ignoreElementNamespaces = options.ignoreElementNamespaces === true
+
+    /**
+     * Check whether the given node is an allowed component or not.
+     * @param {VElement} node The start tag node to check.
+     * @returns {boolean} `true` if the node is an allowed component.
+     */
+    function isAllowedComponent(node) {
+      const componentName = node.rawName
+      return (
+        allow.has(componentName) ||
+        allow.has(casing.pascalCase(componentName)) ||
+        allow.has(casing.kebabCase(componentName))
+      )
+    }
+
     /**
      * Verify for v-text and v-html directive
      * @param {VDirective} node
      */
     function verify(node) {
       const element = node.parent.parent
-      if (utils.isCustomComponent(element)) {
+      if (
+        utils.isCustomComponent(element, ignoreElementNamespaces) &&
+        !isAllowedComponent(element)
+      ) {
         context.report({
           node,
           loc: node.loc,
diff --git a/lib/rules/no-v-text.js b/lib/rules/no-v-text.js
index 272ebe333..e404e153b 100644
--- a/lib/rules/no-v-text.js
+++ b/lib/rules/no-v-text.js
@@ -5,10 +5,6 @@
 'use strict'
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'suggestion',
@@ -18,7 +14,10 @@ module.exports = {
       url: 'https://eslint.vuejs.org/rules/no-v-text.html'
     },
     fixable: null,
-    schema: []
+    schema: [],
+    messages: {
+      unexpected: "Don't use 'v-text'."
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
@@ -28,7 +27,7 @@ module.exports = {
         context.report({
           node,
           loc: node.loc,
-          message: "Don't use 'v-text'."
+          messageId: 'unexpected'
         })
       }
     })
diff --git a/lib/rules/no-watch-after-await.js b/lib/rules/no-watch-after-await.js
index ae88fd51a..7c4e852f2 100644
--- a/lib/rules/no-watch-after-await.js
+++ b/lib/rules/no-watch-after-await.js
@@ -3,7 +3,7 @@
  * See LICENSE file in root directory for full license.
  */
 'use strict'
-const { ReferenceTracker } = require('eslint-utils')
+const { ReferenceTracker } = require('@eslint-community/eslint-utils')
 const utils = require('../utils')
 
 /**
@@ -75,21 +75,18 @@ module.exports = {
 
     return utils.compositingVisitors(
       {
-        Program() {
-          const tracker = new ReferenceTracker(context.getScope())
-          const traceMap = {
-            vue: {
-              [ReferenceTracker.ESM]: true,
-              watch: {
-                [ReferenceTracker.CALL]: true
-              },
-              watchEffect: {
-                [ReferenceTracker.CALL]: true
-              }
-            }
-          }
+        /** @param {Program} program */
+        Program(program) {
+          const tracker = new ReferenceTracker(utils.getScope(context, program))
 
-          for (const { node } of tracker.iterateEsmReferences(traceMap)) {
+          for (const { node } of utils.iterateReferencesTraceMap(tracker, {
+            watch: {
+              [ReferenceTracker.CALL]: true
+            },
+            watchEffect: {
+              [ReferenceTracker.CALL]: true
+            }
+          })) {
             watchCallNodes.add(node)
           }
         }
diff --git a/lib/rules/object-curly-newline.js b/lib/rules/object-curly-newline.js
index 5aa994117..e3b5e38f3 100644
--- a/lib/rules/object-curly-newline.js
+++ b/lib/rules/object-curly-newline.js
@@ -3,9 +3,9 @@
  */
 'use strict'
 
-const { wrapCoreRule } = require('../utils')
+const { wrapStylisticOrCoreRule } = require('../utils')
 
-// eslint-disable-next-line no-invalid-meta, no-invalid-meta-docs-categories
-module.exports = wrapCoreRule('object-curly-newline', {
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = wrapStylisticOrCoreRule('object-curly-newline', {
   skipDynamicArguments: true
 })
diff --git a/lib/rules/object-curly-spacing.js b/lib/rules/object-curly-spacing.js
index b7c669c4f..dc69d315a 100644
--- a/lib/rules/object-curly-spacing.js
+++ b/lib/rules/object-curly-spacing.js
@@ -3,9 +3,9 @@
  */
 'use strict'
 
-const { wrapCoreRule } = require('../utils')
+const { wrapStylisticOrCoreRule } = require('../utils')
 
-// eslint-disable-next-line no-invalid-meta, no-invalid-meta-docs-categories
-module.exports = wrapCoreRule('object-curly-spacing', {
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = wrapStylisticOrCoreRule('object-curly-spacing', {
   skipDynamicArguments: true
 })
diff --git a/lib/rules/object-property-newline.js b/lib/rules/object-property-newline.js
index dacd82441..a23e90813 100644
--- a/lib/rules/object-property-newline.js
+++ b/lib/rules/object-property-newline.js
@@ -3,9 +3,9 @@
  */
 'use strict'
 
-const { wrapCoreRule } = require('../utils')
+const { wrapStylisticOrCoreRule } = require('../utils')
 
-// eslint-disable-next-line no-invalid-meta, no-invalid-meta-docs-categories
-module.exports = wrapCoreRule('object-property-newline', {
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = wrapStylisticOrCoreRule('object-property-newline', {
   skipDynamicArguments: true
 })
diff --git a/lib/rules/object-shorthand.js b/lib/rules/object-shorthand.js
index 79a3c8a32..b8d0a57af 100644
--- a/lib/rules/object-shorthand.js
+++ b/lib/rules/object-shorthand.js
@@ -6,7 +6,7 @@
 
 const { wrapCoreRule } = require('../utils')
 
-// eslint-disable-next-line no-invalid-meta, no-invalid-meta-docs-categories
+// eslint-disable-next-line internal/no-invalid-meta
 module.exports = wrapCoreRule('object-shorthand', {
   skipDynamicArguments: true
 })
diff --git a/lib/rules/one-component-per-file.js b/lib/rules/one-component-per-file.js
index 59deba90e..3cbb25ba6 100644
--- a/lib/rules/one-component-per-file.js
+++ b/lib/rules/one-component-per-file.js
@@ -6,16 +6,12 @@
 const utils = require('../utils')
 const { getVueComponentDefinitionType } = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'suggestion',
     docs: {
       description: 'enforce that each component should be in its own file',
-      categories: ['vue3-strongly-recommended', 'strongly-recommended'],
+      categories: ['vue3-strongly-recommended', 'vue2-strongly-recommended'],
       url: 'https://eslint.vuejs.org/rules/one-component-per-file.html'
     },
     fixable: null,
diff --git a/lib/rules/operator-linebreak.js b/lib/rules/operator-linebreak.js
index ad92aa74f..e00465d2d 100644
--- a/lib/rules/operator-linebreak.js
+++ b/lib/rules/operator-linebreak.js
@@ -3,7 +3,7 @@
  */
 'use strict'
 
-const { wrapCoreRule } = require('../utils')
+const { wrapStylisticOrCoreRule } = require('../utils')
 
-// eslint-disable-next-line no-invalid-meta, no-invalid-meta-docs-categories
-module.exports = wrapCoreRule('operator-linebreak')
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = wrapStylisticOrCoreRule('operator-linebreak')
diff --git a/lib/rules/order-in-components.js b/lib/rules/order-in-components.js
index 1e0b517f8..d287fb11b 100644
--- a/lib/rules/order-in-components.js
+++ b/lib/rules/order-in-components.js
@@ -48,6 +48,8 @@ const defaultOrder = [
   'model',
   ['props', 'propsData'],
   'emits', // for Vue.js 3.x
+  'slots',
+  'expose',
 
   // Note:
   // The `setup` option is included in the "Composition" category,
@@ -171,7 +173,9 @@ function isNotSideEffectsNode(node, visitorKeys) {
         node.type === 'Literal' ||
         // es2015
         node.type === 'ArrowFunctionExpression' ||
-        node.type === 'TemplateElement'
+        node.type === 'TemplateElement' ||
+        // typescript
+        node.type === 'TSAsExpression'
       ) {
         skipNode = node
       } else if (
@@ -207,19 +211,16 @@ function isNotSideEffectsNode(node, visitorKeys) {
   return result
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'suggestion',
     docs: {
       description: 'enforce order of properties in components',
-      categories: ['vue3-recommended', 'recommended'],
+      categories: ['vue3-recommended', 'vue2-recommended'],
       url: 'https://eslint.vuejs.org/rules/order-in-components.html'
     },
     fixable: 'code', // null or "code" or "whitespace"
+    hasSuggestions: true,
     schema: [
       {
         type: 'object',
@@ -230,7 +231,13 @@ module.exports = {
         },
         additionalProperties: false
       }
-    ]
+    ],
+    messages: {
+      order:
+        'The "{{name}}" property should be above the "{{firstUnorderedPropertyName}}" property on line {{line}}.',
+      reorderWithSideEffects:
+        'Manually move "{{name}}" property above "{{firstUnorderedPropertyName}}" property on line {{line}} (might break side effects).'
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
@@ -243,7 +250,7 @@ module.exports = {
         (typeof property === 'string' && groups[property]) || property
     )
     const orderMap = getOrderMap(extendedOrder)
-    const sourceCode = context.getSourceCode()
+    const sourceCode = context.sourceCode
 
     /**
      * @param {string} name
@@ -253,6 +260,31 @@ module.exports = {
       return num == null ? -1 : num
     }
 
+    /**
+     * @param {RuleFixer} fixer
+     * @param {Property} propertyNode
+     * @param {Property} unorderedPropertyNode
+     */
+    function* handleFix(fixer, propertyNode, unorderedPropertyNode) {
+      const afterComma = sourceCode.getTokenAfter(propertyNode)
+      const hasAfterComma = isComma(afterComma)
+
+      const beforeComma = sourceCode.getTokenBefore(propertyNode)
+      const codeStart = beforeComma.range[1] // to include comments
+      const codeEnd = hasAfterComma
+        ? afterComma.range[1]
+        : propertyNode.range[1]
+
+      const removeStart = hasAfterComma ? codeStart : beforeComma.range[0]
+      yield fixer.removeRange([removeStart, codeEnd])
+
+      const propertyCode =
+        sourceCode.text.slice(codeStart, codeEnd) + (hasAfterComma ? '' : ',')
+      const insertTarget = sourceCode.getTokenBefore(unorderedPropertyNode)
+
+      yield fixer.insertTextAfter(insertTarget, propertyCode)
+    }
+
     /**
      * @param {(Property | SpreadElement)[]} propertiesNodes
      */
@@ -285,59 +317,61 @@ module.exports = {
 
         if (firstUnorderedProperty) {
           const line = firstUnorderedProperty.node.loc.start.line
+          const propertyNode = property.node
+          const firstUnorderedPropertyNode = firstUnorderedProperty.node
+          const hasSideEffectsPossibility = propertiesNodes
+            .slice(
+              propertiesNodes.indexOf(firstUnorderedPropertyNode),
+              propertiesNodes.indexOf(propertyNode) + 1
+            )
+            .some(
+              (property) =>
+                !isNotSideEffectsNode(property, sourceCode.visitorKeys)
+            )
+
           context.report({
             node: property.node,
-            message: `The "{{name}}" property should be above the "{{firstUnorderedPropertyName}}" property on line {{line}}.`,
+            messageId: 'order',
             data: {
               name: property.name,
               firstUnorderedPropertyName: firstUnorderedProperty.name,
               line
             },
-            *fix(fixer) {
-              const propertyNode = property.node
-              const firstUnorderedPropertyNode = firstUnorderedProperty.node
-              const hasSideEffectsPossibility = propertiesNodes
-                .slice(
-                  propertiesNodes.indexOf(firstUnorderedPropertyNode),
-                  propertiesNodes.indexOf(propertyNode) + 1
-                )
-                .some(
-                  (property) =>
-                    !isNotSideEffectsNode(property, sourceCode.visitorKeys)
-                )
-              if (hasSideEffectsPossibility) {
-                return
-              }
-              const afterComma = sourceCode.getTokenAfter(propertyNode)
-              const hasAfterComma = isComma(afterComma)
-
-              const beforeComma = sourceCode.getTokenBefore(propertyNode)
-              const codeStart = beforeComma.range[1] // to include comments
-              const codeEnd = hasAfterComma
-                ? afterComma.range[1]
-                : propertyNode.range[1]
-
-              const removeStart = hasAfterComma
-                ? codeStart
-                : beforeComma.range[0]
-              yield fixer.removeRange([removeStart, codeEnd])
-
-              const propertyCode =
-                sourceCode.text.slice(codeStart, codeEnd) +
-                (hasAfterComma ? '' : ',')
-              const insertTarget = sourceCode.getTokenBefore(
-                firstUnorderedPropertyNode
-              )
-
-              yield fixer.insertTextAfter(insertTarget, propertyCode)
-            }
+            fix: hasSideEffectsPossibility
+              ? undefined
+              : (fixer) =>
+                  handleFix(fixer, propertyNode, firstUnorderedPropertyNode),
+            suggest: hasSideEffectsPossibility
+              ? [
+                  {
+                    messageId: 'reorderWithSideEffects',
+                    data: {
+                      name: property.name,
+                      firstUnorderedPropertyName: firstUnorderedProperty.name,
+                      line
+                    },
+                    fix: (fixer) =>
+                      handleFix(fixer, propertyNode, firstUnorderedPropertyNode)
+                  }
+                ]
+              : undefined
           })
         }
       }
     }
 
-    return utils.executeOnVue(context, (obj) => {
-      checkOrder(obj.properties)
-    })
+    return utils.compositingVisitors(
+      utils.executeOnVue(context, (obj) => {
+        checkOrder(obj.properties)
+      }),
+      utils.defineScriptSetupVisitor(context, {
+        onDefineOptionsEnter(node) {
+          if (node.arguments.length === 0) return
+          const define = node.arguments[0]
+          if (define.type !== 'ObjectExpression') return
+          checkOrder(define.properties)
+        }
+      })
+    )
   }
 }
diff --git a/lib/rules/padding-line-between-blocks.js b/lib/rules/padding-line-between-blocks.js
index f5f4d089c..5d576e39d 100644
--- a/lib/rules/padding-line-between-blocks.js
+++ b/lib/rules/padding-line-between-blocks.js
@@ -52,7 +52,7 @@ function verifyForNever(context, prevBlock, nextBlock, betweenTokens) {
       for (const [prevToken, nextToken] of paddingLines) {
         const start = prevToken.range[1]
         const end = nextToken.range[0]
-        const paddingText = context.getSourceCode().text.slice(start, end)
+        const paddingText = context.sourceCode.text.slice(start, end)
         const lastSpaces = splitLines(paddingText).pop()
         yield fixer.replaceTextRange([start, end], `\n${lastSpaces}`)
       }
@@ -111,10 +111,6 @@ const PaddingTypes = {
   always: { verify: verifyForAlways }
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'layout',
@@ -123,6 +119,7 @@ module.exports = {
       categories: undefined,
       url: 'https://eslint.vuejs.org/rules/padding-line-between-blocks.html'
     },
+    // eslint-disable-next-line eslint-plugin/require-meta-fixable -- fixer is not recognized
     fixable: 'whitespace',
     schema: [
       {
@@ -136,10 +133,11 @@ module.exports = {
   },
   /** @param {RuleContext} context */
   create(context) {
-    if (!context.parserServices.getDocumentFragment) {
+    const sourceCode = context.sourceCode
+    if (!sourceCode.parserServices.getDocumentFragment) {
       return {}
     }
-    const df = context.parserServices.getDocumentFragment()
+    const df = sourceCode.parserServices.getDocumentFragment()
     if (!df) {
       return {}
     }
diff --git a/lib/rules/padding-line-between-tags.js b/lib/rules/padding-line-between-tags.js
new file mode 100644
index 000000000..3ebd74c4f
--- /dev/null
+++ b/lib/rules/padding-line-between-tags.js
@@ -0,0 +1,204 @@
+/**
+ * @author dev1437
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+/**
+ * Split the source code into multiple lines based on the line delimiters.
+ * Copied from padding-line-between-blocks
+ * @param {string} text Source code as a string.
+ * @returns {string[]} Array of source code lines.
+ */
+function splitLines(text) {
+  return text.split(/\r\n|[\r\n\u2028\u2029]/gu)
+}
+
+/**
+ * @param {RuleContext} context
+ * @param {VElement} tag
+ * @param {VElement} sibling
+ * @param {number} lineDifference
+ */
+function insertNewLine(context, tag, sibling, lineDifference) {
+  const endTag = tag.endTag || tag.startTag
+
+  if (lineDifference === 1) {
+    context.report({
+      messageId: 'always',
+      loc: sibling.loc,
+      // @ts-ignore
+      fix(fixer) {
+        return fixer.insertTextAfter(tag, '\n')
+      }
+    })
+  } else if (lineDifference === 0) {
+    context.report({
+      messageId: 'always',
+      loc: sibling.loc,
+      // @ts-ignore
+      fix(fixer) {
+        const lastSpaces = /** @type {RegExpExecArray} */ (
+          /^\s*/.exec(context.sourceCode.lines[endTag.loc.start.line - 1])
+        )[0]
+
+        return fixer.insertTextAfter(endTag, `\n\n${lastSpaces}`)
+      }
+    })
+  }
+}
+
+/**
+ * @param {RuleContext} context
+ * @param {VEndTag | VStartTag} endTag
+ * @param {VElement} sibling
+ * @param {number} lineDifference
+ */
+function removeExcessLines(context, endTag, sibling, lineDifference) {
+  if (lineDifference > 1) {
+    let hasOnlyTextBetween = true
+    for (
+      let i = endTag.loc.start.line;
+      i < sibling.loc.start.line - 1 && hasOnlyTextBetween;
+      i++
+    ) {
+      hasOnlyTextBetween = !/^\s*$/.test(context.sourceCode.lines[i])
+    }
+    if (!hasOnlyTextBetween) {
+      context.report({
+        messageId: 'never',
+        loc: sibling.loc,
+        // @ts-ignore
+        fix(fixer) {
+          const start = endTag.range[1]
+          const end = sibling.range[0]
+          const paddingText = context.sourceCode.text.slice(start, end)
+          const textBetween = splitLines(paddingText)
+          let newTextBetween = `\n${textBetween.pop()}`
+          for (let i = textBetween.length - 1; i >= 0; i--) {
+            if (!/^\s*$/.test(textBetween[i])) {
+              newTextBetween = `${i === 0 ? '' : '\n'}${
+                textBetween[i]
+              }${newTextBetween}`
+            }
+          }
+          return fixer.replaceTextRange([start, end], `${newTextBetween}`)
+        }
+      })
+    }
+  }
+}
+
+/**
+ * @param {RuleContext} context
+ */
+function checkNewline(context) {
+  /** @type {Array<{blankLine: "always" | "never" | "consistent", prev: string, next: string}>} */
+  const configureList = context.options[0] || [
+    { blankLine: 'always', prev: '*', next: '*' }
+  ]
+
+  const reverseConfigureList = [...configureList].reverse()
+
+  /**
+   * It has the style of the first `blankLine="consistent"`.
+   * @type {Map<VElement, "always" | "never">}
+   */
+  const firstConsistentBlankLines = new Map()
+
+  /**
+   * @param {VElement} block
+   */
+  return (block) => {
+    if (!block.parent.parent) {
+      return
+    }
+
+    const endTag = block.endTag || block.startTag
+    const lowerSiblings = block.parent.children
+      .filter(
+        (element) =>
+          element.type === 'VElement' && element.range !== block.range
+      )
+      .filter((sibling) => sibling.range[0] - endTag.range[1] >= 0)
+
+    if (lowerSiblings.length === 0) {
+      return
+    }
+
+    const closestSibling = /** @type {VElement} */ (lowerSiblings[0])
+
+    const configure = reverseConfigureList.find(
+      (configure) =>
+        (configure.prev === '*' || block.name === configure.prev) &&
+        (configure.next === '*' || closestSibling.name === configure.next)
+    )
+
+    if (!configure) {
+      return
+    }
+    const lineDifference = closestSibling.loc.start.line - endTag.loc.end.line
+
+    let blankLine = configure.blankLine
+    if (blankLine === 'consistent') {
+      const firstConsistentBlankLine = firstConsistentBlankLines.get(
+        block.parent
+      )
+      if (firstConsistentBlankLine == null) {
+        firstConsistentBlankLines.set(
+          block.parent,
+          lineDifference > 1 ? 'always' : 'never'
+        )
+        return
+      }
+      blankLine = firstConsistentBlankLine
+    }
+
+    if (blankLine === 'always') {
+      insertNewLine(context, block, closestSibling, lineDifference)
+    } else {
+      removeExcessLines(context, endTag, closestSibling, lineDifference)
+    }
+  }
+}
+
+module.exports = {
+  meta: {
+    type: 'layout',
+    docs: {
+      description:
+        'require or disallow newlines between sibling tags in template',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/padding-line-between-tags.html'
+    },
+    // eslint-disable-next-line eslint-plugin/require-meta-fixable -- fixer is not recognized
+    fixable: 'whitespace',
+    schema: [
+      {
+        type: 'array',
+        items: {
+          type: 'object',
+          properties: {
+            blankLine: { enum: ['always', 'never', 'consistent'] },
+            prev: { type: 'string' },
+            next: { type: 'string' }
+          },
+          additionalProperties: false,
+          required: ['blankLine', 'prev', 'next']
+        }
+      }
+    ],
+    messages: {
+      never: 'Unexpected blank line before this tag.',
+      always: 'Expected blank line before this tag.'
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    return utils.defineTemplateBodyVisitor(context, {
+      VElement: checkNewline(context)
+    })
+  }
+}
diff --git a/lib/rules/padding-lines-in-component-definition.js b/lib/rules/padding-lines-in-component-definition.js
new file mode 100644
index 000000000..dcf1b2d7e
--- /dev/null
+++ b/lib/rules/padding-lines-in-component-definition.js
@@ -0,0 +1,375 @@
+/**
+ * @author ItMaga <https://github.com/ItMaga>
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+/**
+ * @typedef {import('../utils').ComponentProp} ComponentProp
+ * @typedef {import('../utils').ComponentEmit} ComponentEmit
+ * @typedef {import('../utils').GroupName} GroupName
+ */
+
+const utils = require('../utils')
+const { isCommentToken } = require('@eslint-community/eslint-utils')
+
+const AvailablePaddingOptions = {
+  Never: 'never',
+  Always: 'always',
+  Ignore: 'ignore'
+}
+const OptionKeys = {
+  BetweenOptions: 'betweenOptions',
+  WithinOption: 'withinOption',
+  BetweenItems: 'betweenItems',
+  WithinEach: 'withinEach',
+  GroupSingleLineProperties: 'groupSingleLineProperties'
+}
+
+/**
+ * @param {Token} node
+ */
+function isComma(node) {
+  return node.type === 'Punctuator' && node.value === ','
+}
+
+/**
+ * @typedef {Exclude<ComponentProp | ComponentEmit, {type:'infer-type'}> & { node: {type: 'Property' | 'SpreadElement'} }} ValidComponentPropOrEmit
+ */
+/**
+ * @template {ComponentProp | ComponentEmit} T
+ * @param {T} propOrEmit
+ * @returns {propOrEmit is ValidComponentPropOrEmit & T}
+ */
+function isValidProperties(propOrEmit) {
+  return Boolean(
+    propOrEmit.type !== 'infer-type' &&
+    propOrEmit.node &&
+    ['Property', 'SpreadElement'].includes(propOrEmit.node.type)
+  )
+}
+
+/**
+ * Split the source code into multiple lines based on the line delimiters.
+ * @param {string} text Source code as a string.
+ * @returns {string[]} Array of source code lines.
+ */
+function splitLines(text) {
+  return text.split(/\r\n|[\r\n\u2028\u2029]/gu)
+}
+
+/**
+ * @param {any} initialOption
+ * @param {string} optionKey
+ * @private
+ * */
+function parseOption(initialOption, optionKey) {
+  return typeof initialOption === 'string'
+    ? initialOption
+    : initialOption[optionKey]
+}
+
+/**
+ * @param {any} initialOption
+ * @param {string} optionKey
+ * @private
+ * */
+function parseBooleanOption(initialOption, optionKey) {
+  if (typeof initialOption === 'string') {
+    if (initialOption === AvailablePaddingOptions.Always) return true
+    if (initialOption === AvailablePaddingOptions.Never) return false
+  }
+  return initialOption[optionKey]
+}
+
+/**
+ * @param {(Property | SpreadElement)} currentProperty
+ * @param {(Property | SpreadElement)} nextProperty
+ * @param {boolean} option
+ * @returns {boolean}
+ * @private
+ * */
+function needGroupSingleLineProperties(currentProperty, nextProperty, option) {
+  const isSingleCurrentProperty =
+    currentProperty.loc.start.line === currentProperty.loc.end.line
+  const isSingleNextProperty =
+    nextProperty.loc.start.line === nextProperty.loc.end.line
+
+  return isSingleCurrentProperty && isSingleNextProperty && option
+}
+
+module.exports = {
+  meta: {
+    type: 'layout',
+    docs: {
+      description: 'require or disallow padding lines in component definition',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/padding-lines-in-component-definition.html'
+    },
+    fixable: 'whitespace',
+    schema: [
+      {
+        oneOf: [
+          {
+            enum: [
+              AvailablePaddingOptions.Always,
+              AvailablePaddingOptions.Never
+            ]
+          },
+          {
+            type: 'object',
+            additionalProperties: false,
+            properties: {
+              [OptionKeys.BetweenOptions]: {
+                enum: Object.values(AvailablePaddingOptions)
+              },
+              [OptionKeys.WithinOption]: {
+                oneOf: [
+                  {
+                    enum: Object.values(AvailablePaddingOptions)
+                  },
+                  {
+                    type: 'object',
+                    patternProperties: {
+                      '^[a-zA-Z]*$': {
+                        oneOf: [
+                          {
+                            enum: Object.values(AvailablePaddingOptions)
+                          },
+                          {
+                            type: 'object',
+                            properties: {
+                              [OptionKeys.BetweenItems]: {
+                                enum: Object.values(AvailablePaddingOptions)
+                              },
+                              [OptionKeys.WithinEach]: {
+                                enum: Object.values(AvailablePaddingOptions)
+                              }
+                            },
+                            additionalProperties: false
+                          }
+                        ]
+                      }
+                    },
+                    minProperties: 1,
+                    additionalProperties: false
+                  }
+                ]
+              },
+              [OptionKeys.GroupSingleLineProperties]: {
+                type: 'boolean'
+              }
+            }
+          }
+        ]
+      }
+    ],
+    messages: {
+      never: 'Unexpected blank line before this definition.',
+      always: 'Expected blank line before this definition.',
+      groupSingleLineProperties:
+        'Unexpected blank line between single line properties.'
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    const options = context.options[0] || AvailablePaddingOptions.Always
+    const sourceCode = context.sourceCode
+
+    /**
+     * @param {(Property | SpreadElement)} currentProperty
+     * @param {(Property | SpreadElement | Token)} nextProperty
+     * @param {RuleFixer} fixer
+     * */
+    function replaceLines(currentProperty, nextProperty, fixer) {
+      const commaToken = sourceCode.getTokenAfter(currentProperty, isComma)
+
+      const start = commaToken ? commaToken.range[1] : currentProperty.range[1]
+      const end = nextProperty.range[0]
+
+      const paddingText = sourceCode.text.slice(start, end)
+      const newText = `\n${splitLines(paddingText).pop()}`
+
+      return fixer.replaceTextRange([start, end], newText)
+    }
+
+    /**
+     * @param {(Property | SpreadElement)} currentProperty
+     * @param {(Property | SpreadElement | Token)} nextProperty
+     * @param {RuleFixer} fixer
+     * @param {number} betweenLinesRange
+     * */
+    function insertLines(
+      currentProperty,
+      nextProperty,
+      fixer,
+      betweenLinesRange
+    ) {
+      const commaToken = sourceCode.getTokenAfter(currentProperty, isComma)
+
+      const lineBeforeNextProperty =
+        sourceCode.lines[nextProperty.loc.start.line - 1]
+      const lastSpaces = /** @type {RegExpExecArray} */ (
+        /^\s*/.exec(lineBeforeNextProperty)
+      )[0]
+
+      const newText = betweenLinesRange === 0 ? `\n\n${lastSpaces}` : '\n'
+      return fixer.insertTextAfter(commaToken || currentProperty, newText)
+    }
+
+    /**
+     * @param {(Property | SpreadElement)[]} properties
+     * @param {any} option
+     * @param {any} nextOption
+     * */
+    function verify(properties, option, nextOption) {
+      const groupSingleLineProperties = parseBooleanOption(
+        options,
+        OptionKeys.GroupSingleLineProperties
+      )
+
+      for (const [i, currentProperty] of properties.entries()) {
+        const nextProperty = properties[i + 1]
+
+        if (nextProperty && option !== AvailablePaddingOptions.Ignore) {
+          const tokenBeforeNext = sourceCode.getTokenBefore(nextProperty, {
+            includeComments: true
+          })
+          const isCommentBefore = isCommentToken(tokenBeforeNext)
+          const reportNode = isCommentBefore ? tokenBeforeNext : nextProperty
+
+          const betweenLinesRange =
+            reportNode.loc.start.line - currentProperty.loc.end.line
+
+          if (
+            needGroupSingleLineProperties(
+              currentProperty,
+              nextProperty,
+              groupSingleLineProperties
+            )
+          ) {
+            if (betweenLinesRange > 1) {
+              context.report({
+                node: reportNode,
+                messageId: 'groupSingleLineProperties',
+                loc: reportNode.loc,
+                fix(fixer) {
+                  return replaceLines(currentProperty, reportNode, fixer)
+                }
+              })
+            }
+            continue
+          }
+
+          if (
+            betweenLinesRange <= 1 &&
+            option === AvailablePaddingOptions.Always
+          ) {
+            context.report({
+              node: reportNode,
+              messageId: 'always',
+              loc: reportNode.loc,
+              fix(fixer) {
+                return insertLines(
+                  currentProperty,
+                  reportNode,
+                  fixer,
+                  betweenLinesRange
+                )
+              }
+            })
+          } else if (
+            betweenLinesRange > 1 &&
+            option === AvailablePaddingOptions.Never
+          ) {
+            context.report({
+              node: reportNode,
+              messageId: 'never',
+              loc: reportNode.loc,
+              fix(fixer) {
+                return replaceLines(currentProperty, reportNode, fixer)
+              }
+            })
+          }
+        }
+
+        if (!nextOption) return
+
+        const name = /** @type {GroupName | null} */ (
+          currentProperty.type === 'Property' &&
+            utils.getStaticPropertyName(currentProperty)
+        )
+        if (!name) continue
+
+        const propertyOption = parseOption(nextOption, name)
+        if (!propertyOption) continue
+
+        const nestedProperties =
+          currentProperty.type === 'Property' &&
+          currentProperty.value.type === 'ObjectExpression' &&
+          currentProperty.value.properties
+        if (!nestedProperties) continue
+
+        verify(
+          nestedProperties,
+          parseOption(propertyOption, OptionKeys.BetweenItems),
+          parseOption(propertyOption, OptionKeys.WithinEach)
+        )
+      }
+    }
+
+    return utils.compositingVisitors(
+      utils.defineVueVisitor(context, {
+        onVueObjectEnter(node) {
+          verify(
+            node.properties,
+            parseOption(options, OptionKeys.BetweenOptions),
+            parseOption(options, OptionKeys.WithinOption)
+          )
+        }
+      }),
+      utils.defineScriptSetupVisitor(context, {
+        onDefinePropsEnter(_, props) {
+          const propNodes = props
+            .filter(isValidProperties)
+            .map((prop) => prop.node)
+
+          const withinOption = parseOption(options, OptionKeys.WithinOption)
+          const propsOption = withinOption && parseOption(withinOption, 'props')
+          if (!propsOption) return
+
+          verify(
+            propNodes,
+            parseOption(propsOption, OptionKeys.BetweenItems),
+            parseOption(propsOption, OptionKeys.WithinEach)
+          )
+        },
+        onDefineEmitsEnter(_, emits) {
+          const emitNodes = emits
+            .filter(isValidProperties)
+            .map((emit) => emit.node)
+
+          const withinOption = parseOption(options, OptionKeys.WithinOption)
+          const emitsOption = withinOption && parseOption(withinOption, 'emits')
+          if (!emitsOption) return
+
+          verify(
+            emitNodes,
+            parseOption(emitsOption, OptionKeys.BetweenItems),
+            parseOption(emitsOption, OptionKeys.WithinEach)
+          )
+        },
+        onDefineOptionsEnter(node) {
+          if (node.arguments.length === 0) return
+          const define = node.arguments[0]
+          if (define.type !== 'ObjectExpression') return
+          verify(
+            define.properties,
+            parseOption(options, OptionKeys.BetweenOptions),
+            parseOption(options, OptionKeys.WithinOption)
+          )
+        }
+      })
+    )
+  }
+}
diff --git a/lib/rules/prefer-define-options.js b/lib/rules/prefer-define-options.js
new file mode 100644
index 000000000..ce824ac59
--- /dev/null
+++ b/lib/rules/prefer-define-options.js
@@ -0,0 +1,130 @@
+/**
+ * @author Yosuke Ota <https://github.com/ota-meshi>
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'enforce use of `defineOptions` instead of default export',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/prefer-define-options.html'
+    },
+    fixable: 'code',
+    schema: [],
+    messages: {
+      preferDefineOptions: 'Use `defineOptions` instead of default export.'
+    }
+  },
+  /**
+   * @param {RuleContext} context
+   * @returns {RuleListener}
+   */
+  create(context) {
+    const scriptSetup = utils.getScriptSetupElement(context)
+    if (!scriptSetup) {
+      return {}
+    }
+
+    /** @type {CallExpression | null} */
+    let defineOptionsNode = null
+    /** @type {ExportDefaultDeclaration | null} */
+    let exportDefaultDeclaration = null
+    /** @type {ImportDeclaration|null} */
+    let lastImportDeclaration = null
+
+    return utils.compositingVisitors(
+      utils.defineScriptSetupVisitor(context, {
+        ImportDeclaration(node) {
+          lastImportDeclaration = node
+        },
+        onDefineOptionsEnter(node) {
+          defineOptionsNode = node
+        }
+      }),
+      {
+        ExportDefaultDeclaration(node) {
+          exportDefaultDeclaration = node
+        },
+        'Program:exit'() {
+          if (!exportDefaultDeclaration) {
+            return
+          }
+          context.report({
+            node: exportDefaultDeclaration,
+            messageId: 'preferDefineOptions',
+            fix: defineOptionsNode
+              ? null
+              : buildFix(exportDefaultDeclaration, scriptSetup)
+          })
+        }
+      }
+    )
+
+    /**
+     * @param {ExportDefaultDeclaration} node
+     * @param {VElement} scriptSetup
+     * @returns {(fixer: RuleFixer) => Fix[]}
+     */
+    function buildFix(node, scriptSetup) {
+      return (fixer) => {
+        const sourceCode = context.sourceCode
+
+        // Calc remove range
+        /** @type {Range} */
+        let removeRange = [...node.range]
+
+        const script = scriptSetup.parent.children
+          .filter(utils.isVElement)
+          .find(
+            (node) =>
+              node.name === 'script' && !utils.hasAttribute(node, 'setup')
+          )
+        if (
+          script &&
+          script.endTag &&
+          sourceCode
+            .getTokensBetween(script.startTag, script.endTag, {
+              includeComments: true
+            })
+            .every(
+              (token) =>
+                removeRange[0] <= token.range[0] &&
+                token.range[1] <= removeRange[1]
+            )
+        ) {
+          removeRange = [...script.range]
+        }
+        const removeStartLoc = sourceCode.getLocFromIndex(removeRange[0])
+        if (
+          sourceCode.lines[removeStartLoc.line - 1]
+            .slice(0, removeStartLoc.column)
+            .trim() === ''
+        ) {
+          removeRange[0] =
+            removeStartLoc.line === 1
+              ? 0
+              : sourceCode.getIndexFromLoc({
+                  line: removeStartLoc.line - 1,
+                  column: sourceCode.lines[removeStartLoc.line - 2].length
+                })
+        }
+
+        /** @type {VStartTag | ImportDeclaration} */
+        const insertAfterTag = lastImportDeclaration || scriptSetup.startTag
+
+        return [
+          fixer.removeRange(removeRange),
+          fixer.insertTextAfter(
+            insertAfterTag,
+            `\ndefineOptions(${sourceCode.getText(node.declaration)})\n`
+          )
+        ]
+      }
+    }
+  }
+}
diff --git a/lib/rules/prefer-import-from-vue.js b/lib/rules/prefer-import-from-vue.js
index 3d5a1ebac..e109d6c24 100644
--- a/lib/rules/prefer-import-from-vue.js
+++ b/lib/rules/prefer-import-from-vue.js
@@ -4,16 +4,8 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const vue3ExportNames = new Set(require('../utils/vue3-export-names.json'))
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 const TARGET_AT_VUE_MODULES = new Set([
   '@vue/runtime-dom',
   '@vue/runtime-core',
@@ -45,10 +37,6 @@ function* extractImportNames(node) {
   }
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'suggestion',
@@ -95,10 +83,7 @@ module.exports = {
     return {
       ImportDeclaration(node) {
         // Skip imports without specifiers in `.d.ts` files
-        if (
-          node.specifiers.length === 0 &&
-          context.getFilename().endsWith('.d.ts')
-        )
+        if (node.specifiers.length === 0 && context.filename.endsWith('.d.ts'))
           return
 
         verifySource(node.source, () => {
diff --git a/lib/rules/prefer-prop-type-boolean-first.js b/lib/rules/prefer-prop-type-boolean-first.js
index 055e16129..30e1f447b 100644
--- a/lib/rules/prefer-prop-type-boolean-first.js
+++ b/lib/rules/prefer-prop-type-boolean-first.js
@@ -4,16 +4,8 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 /**
  * @param {ArrayExpression} node
  * @param {RuleContext} context
@@ -35,7 +27,7 @@ function checkArrayExpression(node, context) {
         {
           messageId: 'moveToFirst',
           fix: (fixer) => {
-            const sourceCode = context.getSourceCode()
+            const sourceCode = context.sourceCode
 
             const elements = [...node.elements]
             elements.splice(booleanTypeIndex, 1)
@@ -52,10 +44,6 @@ function checkArrayExpression(node, context) {
   }
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
@@ -65,7 +53,6 @@ module.exports = {
       url: 'https://eslint.vuejs.org/rules/prefer-prop-type-boolean-first.html'
     },
     fixable: null,
-    // eslint-disable-next-line eslint-plugin/require-meta-has-suggestions -- `context.report` with suggestion is not recognized in `checkArrayExpression`
     hasSuggestions: true,
     schema: [],
     messages: {
@@ -79,6 +66,9 @@ module.exports = {
      * @param {import('../utils').ComponentProp} prop
      */
     function checkProperty(prop) {
+      if (prop.type !== 'object') {
+        return
+      }
       const { value } = prop
       if (!value) {
         return
diff --git a/lib/rules/prefer-separate-static-class.js b/lib/rules/prefer-separate-static-class.js
index 0ebeb2451..ba5c5439a 100644
--- a/lib/rules/prefer-separate-static-class.js
+++ b/lib/rules/prefer-separate-static-class.js
@@ -4,10 +4,6 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const {
   defineTemplateBodyVisitor,
   isStringLiteral,
@@ -91,10 +87,6 @@ function* removeNodeWithComma(fixer, tokenStore, node) {
   yield fixer.remove(node)
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'suggestion',
@@ -177,8 +169,9 @@ module.exports = {
                     return
                   }
 
+                  const sourceCode = context.sourceCode
                   const tokenStore =
-                    context.parserServices.getTemplateBodyTokenStore()
+                    sourceCode.parserServices.getTemplateBodyTokenStore()
 
                   if (elements.length === 1) {
                     yield* removeNodeWithComma(fixer, tokenStore, listNode)
diff --git a/lib/rules/prefer-template.js b/lib/rules/prefer-template.js
index 6fac1a059..c622a4fad 100644
--- a/lib/rules/prefer-template.js
+++ b/lib/rules/prefer-template.js
@@ -5,7 +5,7 @@
 
 const { wrapCoreRule } = require('../utils')
 
-// eslint-disable-next-line no-invalid-meta, no-invalid-meta-docs-categories
+// eslint-disable-next-line internal/no-invalid-meta
 module.exports = wrapCoreRule('prefer-template', {
   applyDocument: true
 })
diff --git a/lib/rules/prefer-true-attribute-shorthand.js b/lib/rules/prefer-true-attribute-shorthand.js
index 00fe95489..3f5446bda 100644
--- a/lib/rules/prefer-true-attribute-shorthand.js
+++ b/lib/rules/prefer-true-attribute-shorthand.js
@@ -4,15 +4,59 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
+const { toRegExpGroupMatcher } = require('../utils/regexp')
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
+/**
+ * @typedef { 'always' | 'never' } PreferOption
+ */
+
+/**
+ * @param {VDirective | VAttribute} node
+ * @returns {string | null}
+ */
+function getAttributeName(node) {
+  if (!node.directive) {
+    return node.key.rawName
+  }
+
+  if (
+    (node.key.name.name === 'bind' || node.key.name.name === 'model') &&
+    node.key.argument &&
+    node.key.argument.type === 'VIdentifier'
+  ) {
+    return node.key.argument.rawName
+  }
+
+  return null
+}
+/**
+ * @param {VAttribute | VDirective} node
+ * @param {boolean} isExcepted
+ * @param {PreferOption} option
+ */
+function shouldConvertToLongForm(node, isExcepted, option) {
+  return (
+    !node.directive &&
+    !node.value &&
+    (option === 'always' ? isExcepted : !isExcepted)
+  )
+}
+
+/**
+ * @param {VAttribute | VDirective} node
+ * @param {boolean} isExcepted
+ * @param {PreferOption} option
+ */
+function shouldConvertToShortForm(node, isExcepted, option) {
+  const isLiteralTrue =
+    node.directive &&
+    node.value?.expression?.type === 'Literal' &&
+    node.value.expression.value === true &&
+    Boolean(node.key.argument)
+
+  return isLiteralTrue && (option === 'always' ? !isExcepted : isExcepted)
+}
 
 module.exports = {
   meta: {
@@ -25,7 +69,20 @@ module.exports = {
     },
     fixable: null,
     hasSuggestions: true,
-    schema: [{ enum: ['always', 'never'] }],
+    schema: [
+      { enum: ['always', 'never'] },
+      {
+        type: 'object',
+        properties: {
+          except: {
+            type: 'array',
+            items: { type: 'string' },
+            uniqueItems: true
+          }
+        },
+        additionalProperties: false
+      }
+    ],
     messages: {
       expectShort:
         "Boolean prop with 'true' value should be written in shorthand form.",
@@ -42,68 +99,80 @@ module.exports = {
   create(context) {
     /** @type {'always' | 'never'} */
     const option = context.options[0] || 'always'
+    const exceptMatcher = toRegExpGroupMatcher(context.options[1]?.except)
+
+    /**
+     * @param {VAttribute | VDirective} node
+     * @param {string} messageId
+     * @param {string} longVuePropText
+     * @param {string} longHtmlAttrText
+     */
+    function reportLongForm(
+      node,
+      messageId,
+      longVuePropText,
+      longHtmlAttrText
+    ) {
+      context.report({
+        node,
+        messageId,
+        suggest: [
+          {
+            messageId: 'rewriteIntoLongVueProp',
+            fix: (fixer) => fixer.replaceText(node, longVuePropText)
+          },
+          {
+            messageId: 'rewriteIntoLongHtmlAttr',
+            fix: (fixer) => fixer.replaceText(node, longHtmlAttrText)
+          }
+        ]
+      })
+    }
+
+    /**
+     * @param {VAttribute | VDirective} node
+     * @param {string} messageId
+     * @param {string} shortFormText
+     */
+    function reportShortForm(node, messageId, shortFormText) {
+      context.report({
+        node,
+        messageId,
+        suggest: [
+          {
+            messageId: 'rewriteIntoShort',
+            fix: (fixer) => fixer.replaceText(node, shortFormText)
+          }
+        ]
+      })
+    }
 
     return utils.defineTemplateBodyVisitor(context, {
       VAttribute(node) {
-        if (!utils.isCustomComponent(node.parent.parent)) {
-          return
-        }
-
-        if (option === 'never' && !node.directive && !node.value) {
-          context.report({
-            node,
-            messageId: 'expectLong',
-            suggest: [
-              {
-                messageId: 'rewriteIntoLongVueProp',
-                fix: (fixer) =>
-                  fixer.replaceText(node, `:${node.key.rawName}="true"`)
-              },
-              {
-                messageId: 'rewriteIntoLongHtmlAttr',
-                fix: (fixer) =>
-                  fixer.replaceText(
-                    node,
-                    `${node.key.rawName}="${node.key.rawName}"`
-                  )
-              }
-            ]
-          })
-          return
-        }
+        if (!utils.isCustomComponent(node.parent.parent)) return
 
-        if (option !== 'always') {
-          return
-        }
+        const name = getAttributeName(node)
+        if (name === null) return
 
-        if (
-          !node.directive ||
-          !node.value ||
-          !node.value.expression ||
-          node.value.expression.type !== 'Literal' ||
-          node.value.expression.value !== true
-        ) {
-          return
-        }
+        const isExcepted = exceptMatcher(name)
 
-        const { argument } = node.key
-        if (!argument) {
-          return
+        if (shouldConvertToLongForm(node, isExcepted, option)) {
+          const key = /** @type {VIdentifier} */ (node.key)
+          reportLongForm(
+            node,
+            'expectLong',
+            `:${key.rawName}="true"`,
+            `${key.rawName}="${key.rawName}"`
+          )
+        } else if (shouldConvertToShortForm(node, isExcepted, option)) {
+          const directiveKey = /** @type {VDirectiveKey} */ (node.key)
+          if (
+            directiveKey.argument &&
+            directiveKey.argument.type === 'VIdentifier'
+          ) {
+            reportShortForm(node, 'expectShort', directiveKey.argument.rawName)
+          }
         }
-
-        context.report({
-          node,
-          messageId: 'expectShort',
-          suggest: [
-            {
-              messageId: 'rewriteIntoShort',
-              fix: (fixer) => {
-                const sourceCode = context.getSourceCode()
-                return fixer.replaceText(node, sourceCode.getText(argument))
-              }
-            }
-          ]
-        })
       }
     })
   }
diff --git a/lib/rules/prefer-use-template-ref.js b/lib/rules/prefer-use-template-ref.js
new file mode 100644
index 000000000..14323b2e2
--- /dev/null
+++ b/lib/rules/prefer-use-template-ref.js
@@ -0,0 +1,107 @@
+/**
+ * @author Thomasan1999
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+/**
+ * @typedef ScriptRef
+ * @type {[string, CallExpression]}
+ */
+
+/**
+ * @param body {(Statement | ModuleDeclaration)[]}
+ * @returns {ScriptRef[]}
+ * */
+function getScriptRefsFromSetupFunction(body) {
+  return body.flatMap((child) => {
+    if (child.type === 'VariableDeclaration') {
+      const declarator = child.declarations[0]
+
+      if (
+        declarator.init?.type === 'CallExpression' &&
+        declarator.init.callee?.type === 'Identifier' &&
+        declarator.id.type === 'Identifier' &&
+        ['ref', 'shallowRef'].includes(declarator.init.callee.name)
+      )
+        return [[declarator.id.name, declarator.init]]
+    }
+
+    return []
+  })
+}
+
+/** @type {import("eslint").Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        'require using `useTemplateRef` instead of `ref`/`shallowRef` for template refs',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/prefer-use-template-ref.html'
+    },
+    schema: [],
+    messages: {
+      preferUseTemplateRef: "Replace '{{name}}' with 'useTemplateRef'."
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    /** @type Set<string> */
+    const templateRefs = new Set()
+
+    /**
+     * @type ScriptRef[] */
+    const scriptRefs = []
+
+    return utils.compositingVisitors(
+      utils.defineTemplateBodyVisitor(context, {
+        'VAttribute[directive=false]'(node) {
+          if (node.key.name === 'ref' && node.value?.value) {
+            templateRefs.add(node.value.value)
+          }
+        }
+      }),
+      utils.defineVueVisitor(context, {
+        onSetupFunctionEnter(node) {
+          if (node.type === 'ArrowFunctionExpression' && node.expression) {
+            return
+          }
+          const newScriptRefs = getScriptRefsFromSetupFunction(node.body.body)
+          scriptRefs.push(...newScriptRefs)
+        }
+      }),
+      utils.defineScriptSetupVisitor(context, {
+        Program(node) {
+          const newScriptRefs = getScriptRefsFromSetupFunction(node.body)
+
+          scriptRefs.push(...newScriptRefs)
+        }
+      }),
+      {
+        'Program:exit'() {
+          const scriptRefsMap = new Map(scriptRefs)
+
+          for (const templateRef of templateRefs) {
+            const scriptRef = scriptRefsMap.get(templateRef)
+
+            if (!scriptRef) {
+              continue
+            }
+
+            context.report({
+              node: scriptRef,
+              messageId: 'preferUseTemplateRef',
+              data: {
+                name: /** @type {Identifier} */ (scriptRef.callee).name
+              }
+            })
+          }
+        }
+      }
+    )
+  }
+}
diff --git a/lib/rules/prop-name-casing.js b/lib/rules/prop-name-casing.js
index 29386d6bc..7121c66c6 100644
--- a/lib/rules/prop-name-casing.js
+++ b/lib/rules/prop-name-casing.js
@@ -6,25 +6,20 @@
 
 const utils = require('../utils')
 const casing = require('../utils/casing')
+const { toRegExpGroupMatcher } = require('../utils/regexp')
 const allowedCaseOptions = ['camelCase', 'snake_case']
 
 /**
  * @typedef {import('../utils').ComponentProp} ComponentProp
  */
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
 /** @param {RuleContext} context */
 function create(context) {
   const options = context.options[0]
+  const isIgnoredProp = toRegExpGroupMatcher(context.options[1]?.ignoreProps)
   const caseType = allowedCaseOptions.includes(options) ? options : 'camelCase'
   const checker = casing.getChecker(caseType)
 
-  // ----------------------------------------------------------------------
-  // Public
-  // ----------------------------------------------------------------------
-
   /**
    * @param {ComponentProp[]} props
    */
@@ -34,10 +29,10 @@ function create(context) {
       if (propName == null) {
         continue
       }
-      if (!checker(propName)) {
+      if (!checker(propName) && !isIgnoredProp(propName)) {
         context.report({
           node: item.node,
-          message: 'Prop "{{name}}" is not in {{caseType}}.',
+          messageId: 'invalidCase',
           data: {
             name: propName,
             caseType
@@ -58,25 +53,35 @@ function create(context) {
   )
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'suggestion',
     docs: {
       description:
         'enforce specific casing for the Prop name in Vue components',
-      categories: ['vue3-strongly-recommended', 'strongly-recommended'],
+      categories: ['vue3-strongly-recommended', 'vue2-strongly-recommended'],
       url: 'https://eslint.vuejs.org/rules/prop-name-casing.html'
     },
     fixable: null, // null or "code" or "whitespace"
     schema: [
       {
         enum: allowedCaseOptions
+      },
+      {
+        type: 'object',
+        properties: {
+          ignoreProps: {
+            type: 'array',
+            items: { type: 'string' },
+            uniqueItems: true
+          }
+        },
+        additionalProperties: false
       }
-    ]
+    ],
+    messages: {
+      invalidCase: 'Prop "{{name}}" is not in {{caseType}}.'
+    }
   },
   create
 }
diff --git a/lib/rules/quote-props.js b/lib/rules/quote-props.js
index aabfc2bf5..705c8737d 100644
--- a/lib/rules/quote-props.js
+++ b/lib/rules/quote-props.js
@@ -4,13 +4,13 @@
  */
 'use strict'
 
-const { wrapCoreRule, flatten } = require('../utils')
+const { wrapStylisticOrCoreRule, flatten } = require('../utils')
 
-// eslint-disable-next-line no-invalid-meta, no-invalid-meta-docs-categories
-module.exports = wrapCoreRule('quote-props', {
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = wrapStylisticOrCoreRule('quote-props', {
   skipDynamicArguments: true,
   preprocess(context, { wrapContextToOverrideProperties, defineVisitor }) {
-    const sourceCode = context.getSourceCode()
+    const sourceCode = context.sourceCode
     /**
      * @type {'"' | "'" | null}
      */
diff --git a/lib/rules/require-component-is.js b/lib/rules/require-component-is.js
index 12fda302b..899ac5e4d 100644
--- a/lib/rules/require-component-is.js
+++ b/lib/rules/require-component-is.js
@@ -5,26 +5,22 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
     docs: {
       description: 'require `v-bind:is` of `<component>` elements',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/require-component-is.html'
     },
     fixable: null,
-    schema: []
+    schema: [],
+    messages: {
+      requireComponentIs:
+        "Expected '<component>' elements to have 'v-bind:is' attribute."
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
@@ -35,8 +31,7 @@ module.exports = {
           context.report({
             node,
             loc: node.loc,
-            message:
-              "Expected '<component>' elements to have 'v-bind:is' attribute."
+            messageId: 'requireComponentIs'
           })
         }
       }
diff --git a/lib/rules/require-default-export.js b/lib/rules/require-default-export.js
new file mode 100644
index 000000000..9e45da46c
--- /dev/null
+++ b/lib/rules/require-default-export.js
@@ -0,0 +1,68 @@
+/**
+ * @author ItMaga
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'require components to be the default export',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/require-default-export.html'
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      missing: 'Missing default export.',
+      mustBeDefaultExport: 'Component must be the default export.'
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    const sourceCode = context.sourceCode
+    const documentFragment = sourceCode.parserServices.getDocumentFragment?.()
+
+    const hasScript =
+      documentFragment &&
+      documentFragment.children.some(
+        (e) => utils.isVElement(e) && e.name === 'script'
+      )
+
+    if (utils.isScriptSetup(context) || !hasScript) {
+      return {}
+    }
+
+    let hasDefaultExport = false
+    let hasDefinedComponent = false
+
+    return utils.compositingVisitors(
+      utils.defineVueVisitor(context, {
+        onVueObjectExit() {
+          hasDefinedComponent = true
+        }
+      }),
+
+      {
+        'Program > ExportDefaultDeclaration'() {
+          hasDefaultExport = true
+        },
+
+        /**
+         * @param {Program} node
+         */
+        'Program:exit'(node) {
+          if (!hasDefaultExport && node.body.length > 0) {
+            context.report({
+              loc: node.tokens[node.tokens.length - 1].loc,
+              messageId: hasDefinedComponent ? 'mustBeDefaultExport' : 'missing'
+            })
+          }
+        }
+      }
+    )
+  }
+}
diff --git a/lib/rules/require-default-prop.js b/lib/rules/require-default-prop.js
index 7aff2ebac..eeb2ae9bb 100644
--- a/lib/rules/require-default-prop.js
+++ b/lib/rules/require-default-prop.js
@@ -7,6 +7,7 @@
 /**
  * @typedef {import('../utils').ComponentProp} ComponentProp
  * @typedef {import('../utils').ComponentObjectProp} ComponentObjectProp
+ * @typedef {import('../utils').ComponentTypeProp} ComponentTypeProp
  * @typedef {ComponentObjectProp & { value: ObjectExpression} } ComponentObjectPropObject
  */
 
@@ -23,10 +24,6 @@ const NATIVE_TYPES = new Set([
   'Symbol'
 ])
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 /**
  * Detects whether given value node is a Boolean type
  * @param {Expression} value
@@ -52,10 +49,10 @@ module.exports = {
     type: 'suggestion',
     docs: {
       description: 'require default value for props',
-      categories: ['vue3-strongly-recommended', 'strongly-recommended'],
+      categories: ['vue3-strongly-recommended', 'vue2-strongly-recommended'],
       url: 'https://eslint.vuejs.org/rules/require-default-prop.html'
     },
-    fixable: null, // or "code" or "whitespace"
+    fixable: null,
     schema: [],
     messages: {
       missingDefault: `Prop '{{propName}}' requires default value to be set.`
@@ -63,10 +60,6 @@ module.exports = {
   },
   /** @param {RuleContext} context */
   create(context) {
-    // ----------------------------------------------------------------------
-    // Helpers
-    // ----------------------------------------------------------------------
-
     /**
      * Checks if the passed prop is required
      * @param {ObjectExpression} propValue - ObjectExpression AST node for a single prop
@@ -145,22 +138,27 @@ module.exports = {
 
     /**
      * @param {ComponentProp[]} props
-     * @param {boolean} [withDefaults]
-     * @param { { [key: string]: Expression | undefined } } [withDefaultsExpressions]
+     * @param {(prop: ComponentObjectProp|ComponentTypeProp)=>boolean} [ignore]
      */
-    function processProps(props, withDefaults, withDefaultsExpressions) {
+    function processProps(props, ignore) {
       for (const prop of props) {
-        if (prop.type === 'object' && !prop.node.shorthand) {
+        if (prop.type === 'object') {
+          if (prop.node.shorthand) {
+            continue
+          }
           if (!isWithoutDefaultValue(prop)) {
             continue
           }
           if (isBooleanProp(prop)) {
             continue
           }
+          if (ignore?.(prop)) {
+            continue
+          }
           const propName =
-            prop.propName != null
-              ? prop.propName
-              : `[${context.getSourceCode().getText(prop.node.key)}]`
+            prop.propName == null
+              ? `[${context.sourceCode.getText(prop.node.key)}]`
+              : prop.propName
 
           context.report({
             node: prop.node,
@@ -169,42 +167,57 @@ module.exports = {
               propName
             }
           })
-        } else if (
-          prop.type === 'type' &&
-          withDefaults &&
-          withDefaultsExpressions
-        ) {
+        } else if (prop.type === 'type') {
           if (prop.required) {
             continue
           }
           if (prop.types.length === 1 && prop.types[0] === 'Boolean') {
             continue
           }
-          if (!withDefaultsExpressions[prop.propName]) {
-            context.report({
-              node: prop.node,
-              messageId: `missingDefault`,
-              data: {
-                propName: prop.propName
-              }
-            })
+          if (ignore?.(prop)) {
+            continue
           }
+          context.report({
+            node: prop.node,
+            messageId: `missingDefault`,
+            data: {
+              propName: prop.propName
+            }
+          })
         }
       }
     }
 
-    // ----------------------------------------------------------------------
-    // Public
-    // ----------------------------------------------------------------------
-
     return utils.compositingVisitors(
       utils.defineScriptSetupVisitor(context, {
         onDefinePropsEnter(node, props) {
-          processProps(
-            props,
-            utils.hasWithDefaults(node),
+          const hasWithDefaults = utils.hasWithDefaults(node)
+          const defaultsByWithDefaults =
             utils.getWithDefaultsPropExpressions(node)
-          )
+          const isUsingPropsDestructure = utils.isUsingPropsDestructure(node)
+          const defaultsByAssignmentPatterns =
+            utils.getDefaultPropExpressionsForPropsDestructure(node)
+
+          processProps(props, (prop) => {
+            if (prop.type === 'type') {
+              if (!hasWithDefaults && !isUsingPropsDestructure) {
+                // If don't use withDefaults() and props destructure, exclude it from the report.
+                return true
+              }
+              if (defaultsByWithDefaults[prop.propName]) {
+                return true
+              }
+            }
+            if (!isUsingPropsDestructure) {
+              return false
+            }
+            if (prop.propName == null) {
+              // If using Props Destructure but the property name cannot be determined,
+              // it will be ignored.
+              return true
+            }
+            return Boolean(defaultsByAssignmentPatterns[prop.propName])
+          })
         }
       }),
       utils.executeOnVue(context, (obj) => {
diff --git a/lib/rules/require-direct-export.js b/lib/rules/require-direct-export.js
index 05d80c38f..1c059c164 100644
--- a/lib/rules/require-direct-export.js
+++ b/lib/rules/require-direct-export.js
@@ -6,10 +6,6 @@
 
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'suggestion',
@@ -18,7 +14,7 @@ module.exports = {
       categories: undefined,
       url: 'https://eslint.vuejs.org/rules/require-direct-export.html'
     },
-    fixable: null, // or "code" or "whitespace"
+    fixable: null,
     schema: [
       {
         type: 'object',
@@ -27,11 +23,15 @@ module.exports = {
         },
         additionalProperties: false
       }
-    ]
+    ],
+    messages: {
+      expectedDirectExport:
+        'Expected the component literal to be directly exported.'
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
-    const filePath = context.getFilename()
+    const filePath = context.filename
     if (!utils.isVueFile(filePath)) return {}
 
     const disallowFunctional = (context.options[0] || {})
@@ -100,7 +100,7 @@ module.exports = {
 
         context.report({
           node: node.parent,
-          message: `Expected the component literal to be directly exported.`
+          messageId: 'expectedDirectExport'
         })
       },
       ...(disallowFunctional
@@ -137,7 +137,7 @@ module.exports = {
               if (!maybeVue3Functional.hasReturnArgument) {
                 context.report({
                   node,
-                  message: `Expected the component literal to be directly exported.`
+                  messageId: 'expectedDirectExport'
                 })
               }
             }
diff --git a/lib/rules/require-emit-validator.js b/lib/rules/require-emit-validator.js
index 9ab8e6bdf..6e403feef 100644
--- a/lib/rules/require-emit-validator.js
+++ b/lib/rules/require-emit-validator.js
@@ -10,13 +10,8 @@ const utils = require('../utils')
  * @typedef {import('../utils').ComponentEmit} ComponentEmit
  */
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
-    hasSuggestions: true,
     type: 'suggestion',
     docs: {
       description: 'require type definitions in emits',
@@ -24,42 +19,44 @@ module.exports = {
       url: 'https://eslint.vuejs.org/rules/require-emit-validator.html'
     },
     fixable: null,
+    hasSuggestions: true,
+    schema: [],
     messages: {
       missing: 'Emit "{{name}}" should define at least its validator function.',
       skipped:
         'Emit "{{name}}" should not skip validation, or you may define a validator function with no parameters.',
       emptyValidation: 'Replace with a validator function with no parameters.'
-    },
-    schema: []
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
-    // ----------------------------------------------------------------------
-    // Helpers
-    // ----------------------------------------------------------------------
-
     /**
      * @param {ComponentEmit} emit
      */
     function checker(emit) {
-      if (emit.type !== 'object' && emit.type !== 'array') {
-        return
-      }
-      const { value, node, emitName } = emit
-      const hasType =
-        !!value &&
-        (value.type === 'ArrowFunctionExpression' ||
+      /** @type {Expression|null} */
+      let value = null
+      let hasType = false
+      if (emit.type === 'object') {
+        value = emit.value
+        hasType =
+          value.type === 'ArrowFunctionExpression' ||
           value.type === 'FunctionExpression' ||
           // validator may from outer scope
-          value.type === 'Identifier')
+          value.type === 'Identifier'
+      } else if (emit.type !== 'array') {
+        return
+      }
 
       if (!hasType) {
+        const { node, emitName } = emit
         const name =
           emitName ||
           (node.type === 'Identifier' && node.name) ||
           'Unknown emit'
 
         if (value && value.type === 'Literal' && value.value === null) {
+          const valueNode = value
           context.report({
             node,
             messageId: 'skipped',
@@ -67,7 +64,7 @@ module.exports = {
             suggest: [
               {
                 messageId: 'emptyValidation',
-                fix: (fixer) => fixer.replaceText(value, '() => true')
+                fix: (fixer) => fixer.replaceText(valueNode, '() => true')
               }
             ]
           })
@@ -83,10 +80,6 @@ module.exports = {
       }
     }
 
-    // ----------------------------------------------------------------------
-    // Public
-    // ----------------------------------------------------------------------
-
     return utils.compositingVisitors(
       utils.executeOnVue(context, (obj) => {
         for (const emit of utils.getComponentEmitsFromOptions(obj)) {
diff --git a/lib/rules/require-explicit-emits.js b/lib/rules/require-explicit-emits.js
index 1a69c982a..73242f5d0 100644
--- a/lib/rules/require-explicit-emits.js
+++ b/lib/rules/require-explicit-emits.js
@@ -10,23 +10,15 @@
  * @typedef {import('../utils').VueObjectData} VueObjectData
  */
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const {
   findVariable,
   isOpeningBraceToken,
   isClosingBraceToken,
   isOpeningBracketToken
-} = require('eslint-utils')
+} = require('@eslint-community/eslint-utils')
 const utils = require('../utils')
 const { capitalize } = require('../utils/casing')
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 const FIX_EMITS_AFTER_OPTIONS = new Set([
   'setup',
   'data',
@@ -54,13 +46,33 @@ const FIX_EMITS_AFTER_OPTIONS = new Set([
   'renderTriggered',
   'errorCaptured'
 ])
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
+
+/**
+ * @typedef {object} NameWithLoc
+ * @property {string} name
+ * @property {SourceLocation} loc
+ * @property {Range} range
+ */
+/**
+ * Get the name param node from the given CallExpression
+ * @param {CallExpression} node CallExpression
+ * @returns { NameWithLoc | null }
+ */
+function getNameParamNode(node) {
+  const nameLiteralNode = node.arguments[0]
+  if (nameLiteralNode && utils.isStringLiteral(nameLiteralNode)) {
+    const name = utils.getStringLiteralValue(nameLiteralNode)
+    if (name != null) {
+      return { name, loc: nameLiteralNode.loc, range: nameLiteralNode.range }
+    }
+  }
+
+  // cannot check
+  return null
+}
 
 module.exports = {
   meta: {
-    hasSuggestions: true,
     type: 'suggestion',
     docs: {
       description: 'require `emits` option with name triggered by `$emit()`',
@@ -68,6 +80,7 @@ module.exports = {
       url: 'https://eslint.vuejs.org/rules/require-explicit-emits.html'
     },
     fixable: null,
+    hasSuggestions: true,
     schema: [
       {
         type: 'object',
@@ -99,6 +112,7 @@ module.exports = {
     const vueEmitsDeclarations = new Map()
     /** @type {Map<ObjectExpression | Program, ComponentProp[]>} */
     const vuePropsDeclarations = new Map()
+    let emitParamName = ''
 
     /**
      * @typedef {object} VueTemplateDefineData
@@ -114,11 +128,11 @@ module.exports = {
     /**
      * @param {ComponentEmit[]} emits
      * @param {ComponentProp[]} props
-     * @param {Literal} nameLiteralNode
+     * @param {NameWithLoc} nameWithLoc
      * @param {ObjectExpression | Program} vueDefineNode
      */
-    function verifyEmit(emits, props, nameLiteralNode, vueDefineNode) {
-      const name = `${nameLiteralNode.value}`
+    function verifyEmit(emits, props, nameWithLoc, vueDefineNode) {
+      const name = nameWithLoc.name
       if (emits.some((e) => e.emitName === name || e.emitName == null)) {
         return
       }
@@ -129,7 +143,7 @@ module.exports = {
         }
       }
       context.report({
-        node: nameLiteralNode,
+        loc: nameWithLoc.loc,
         messageId: 'missing',
         data: {
           name,
@@ -138,11 +152,11 @@ module.exports = {
               ? '`emits` option'
               : '`defineEmits`'
         },
-        suggest: buildSuggest(vueDefineNode, emits, nameLiteralNode, context)
+        suggest: buildSuggest(vueDefineNode, emits, nameWithLoc, context)
       })
     }
 
-    const programNode = context.getSourceCode().ast
+    const programNode = context.sourceCode.ast
     if (utils.isScriptSetup(context)) {
       // init
       vueTemplateDefineData = {
@@ -155,13 +169,13 @@ module.exports = {
 
     const callVisitor = {
       /**
-       * @param {CallExpression & { arguments: [Literal, ...Expression] }} node
+       * @param {CallExpression} node
        * @param {VueObjectData} [info]
        */
-      'CallExpression[arguments.0.type=Literal]'(node, info) {
+      CallExpression(node, info) {
         const callee = utils.skipChainExpression(node.callee)
-        const nameLiteralNode = node.arguments[0]
-        if (!nameLiteralNode || typeof nameLiteralNode.value !== 'string') {
+        const nameWithLoc = getNameParamNode(node)
+        if (!nameWithLoc) {
           // cannot check
           return
         }
@@ -188,7 +202,7 @@ module.exports = {
             verifyEmit(
               emitsDeclarations,
               vuePropsDeclarations.get(vueDefineNode) || [],
-              nameLiteralNode,
+              nameWithLoc,
               vueDefineNode
             )
           } else if (emit && emit.name === 'emit') {
@@ -201,7 +215,7 @@ module.exports = {
               verifyEmit(
                 emitsDeclarations,
                 vuePropsDeclarations.get(vueDefineNode) || [],
-                nameLiteralNode,
+                nameWithLoc,
                 vueDefineNode
               )
             }
@@ -216,7 +230,7 @@ module.exports = {
             verifyEmit(
               emitsDeclarations,
               vuePropsDeclarations.get(vueDefineNode) || [],
-              nameLiteralNode,
+              nameWithLoc,
               vueDefineNode
             )
           }
@@ -227,22 +241,27 @@ module.exports = {
     return utils.defineTemplateBodyVisitor(
       context,
       {
-        /** @param { CallExpression & { argument: [Literal, ...Expression] } } node */
-        'CallExpression[arguments.0.type=Literal]'(node) {
+        /** @param { CallExpression } node */
+        CallExpression(node) {
           const callee = utils.skipChainExpression(node.callee)
-          const nameLiteralNode = /** @type {Literal} */ (node.arguments[0])
-          if (!nameLiteralNode || typeof nameLiteralNode.value !== 'string') {
+          const nameWithLoc = getNameParamNode(node)
+          if (!nameWithLoc) {
             // cannot check
             return
           }
           if (!vueTemplateDefineData) {
             return
           }
-          if (callee.type === 'Identifier' && callee.name === '$emit') {
+
+          // e.g. $emit() / emit() in template
+          if (
+            callee.type === 'Identifier' &&
+            (callee.name === '$emit' || callee.name === emitParamName)
+          ) {
             verifyEmit(
               vueTemplateDefineData.emits,
               vueTemplateDefineData.props,
-              nameLiteralNode,
+              nameWithLoc,
               vueTemplateDefineData.define
             )
           }
@@ -270,10 +289,15 @@ module.exports = {
             }
 
             const emitParam = node.parent.id
-            const variable =
-              emitParam.type === 'Identifier'
-                ? findVariable(context.getScope(), emitParam)
-                : null
+            if (emitParam.type !== 'Identifier') {
+              return
+            }
+
+            emitParamName = emitParam.name
+            const variable = findVariable(
+              utils.getScope(context, emitParam),
+              emitParam
+            )
             if (!variable) {
               return
             }
@@ -348,7 +372,7 @@ module.exports = {
               // `setup(props, {emit})`
               const variable =
                 emitParam.type === 'Identifier'
-                  ? findVariable(context.getScope(), emitParam)
+                  ? findVariable(utils.getScope(context, emitParam), emitParam)
                   : null
               if (!variable) {
                 return
@@ -362,7 +386,10 @@ module.exports = {
               }
             } else if (contextParam.type === 'Identifier') {
               // `setup(props, context)`
-              const variable = findVariable(context.getScope(), contextParam)
+              const variable = findVariable(
+                utils.getScope(context, contextParam),
+                contextParam
+              )
               if (!variable) {
                 return
               }
@@ -409,32 +436,35 @@ module.exports = {
 /**
  * @param {ObjectExpression|Program} define
  * @param {ComponentEmit[]} emits
- * @param {Literal} nameNode
+ * @param {NameWithLoc} nameWithLoc
  * @param {RuleContext} context
  * @returns {Rule.SuggestionReportDescriptor[]}
  */
-function buildSuggest(define, emits, nameNode, context) {
+function buildSuggest(define, emits, nameWithLoc, context) {
   const emitsKind =
     define.type === 'ObjectExpression' ? '`emits` option' : '`defineEmits`'
-  const certainEmits = emits.filter((e) => e.key)
+  const certainEmits = emits.filter(
+    /** @returns {e is ComponentEmit & {type:'array'|'object'}} */
+    (e) => e.type === 'array' || e.type === 'object'
+  )
   if (certainEmits.length > 0) {
     const last = certainEmits[certainEmits.length - 1]
     return [
       {
         messageId: 'addOneOption',
         data: {
-          name: `${nameNode.value}`,
+          name: nameWithLoc.name,
           emitsKind
         },
         fix(fixer) {
           if (last.type === 'array') {
             // Array
-            return fixer.insertTextAfter(last.node, `, '${nameNode.value}'`)
+            return fixer.insertTextAfter(last.node, `, '${nameWithLoc.name}'`)
           } else if (last.type === 'object') {
             // Object
             return fixer.insertTextAfter(
               last.node,
-              `, '${nameNode.value}': null`
+              `, '${nameWithLoc.name}': null`
             )
           } else {
             // type
@@ -459,7 +489,7 @@ function buildSuggest(define, emits, nameNode, context) {
     (p) => utils.getStaticPropertyName(p) === 'emits'
   )
   if (emitsOption) {
-    const sourceCode = context.getSourceCode()
+    const sourceCode = context.sourceCode
     const emitsOptionValue = emitsOption.value
     if (emitsOptionValue.type === 'ArrayExpression') {
       const leftBracket = /** @type {Token} */ (
@@ -468,11 +498,11 @@ function buildSuggest(define, emits, nameNode, context) {
       return [
         {
           messageId: 'addOneOption',
-          data: { name: `${nameNode.value}`, emitsKind },
+          data: { name: `${nameWithLoc.name}`, emitsKind },
           fix(fixer) {
             return fixer.insertTextAfter(
               leftBracket,
-              `'${nameNode.value}'${
+              `'${nameWithLoc.name}'${
                 emitsOptionValue.elements.length > 0 ? ',' : ''
               }`
             )
@@ -486,11 +516,11 @@ function buildSuggest(define, emits, nameNode, context) {
       return [
         {
           messageId: 'addOneOption',
-          data: { name: `${nameNode.value}`, emitsKind },
+          data: { name: `${nameWithLoc.name}`, emitsKind },
           fix(fixer) {
             return fixer.insertTextAfter(
               leftBrace,
-              `'${nameNode.value}': null${
+              `'${nameWithLoc.name}': null${
                 emitsOptionValue.properties.length > 0 ? ',' : ''
               }`
             )
@@ -501,19 +531,19 @@ function buildSuggest(define, emits, nameNode, context) {
     return []
   }
 
-  const sourceCode = context.getSourceCode()
+  const sourceCode = context.sourceCode
   const afterOptionNode = propertyNodes.find((p) =>
     FIX_EMITS_AFTER_OPTIONS.has(utils.getStaticPropertyName(p) || '')
   )
   return [
     {
       messageId: 'addArrayEmitsOption',
-      data: { name: `${nameNode.value}`, emitsKind },
+      data: { name: `${nameWithLoc.name}`, emitsKind },
       fix(fixer) {
         if (afterOptionNode) {
           return fixer.insertTextAfter(
             sourceCode.getTokenBefore(afterOptionNode),
-            `\nemits: ['${nameNode.value}'],`
+            `\nemits: ['${nameWithLoc.name}'],`
           )
         } else if (object.properties.length > 0) {
           const before =
@@ -521,7 +551,7 @@ function buildSuggest(define, emits, nameNode, context) {
             object.properties[object.properties.length - 1]
           return fixer.insertTextAfter(
             before,
-            `,\nemits: ['${nameNode.value}']`
+            `,\nemits: ['${nameWithLoc.name}']`
           )
         } else {
           const objectLeftBrace = /** @type {Token} */ (
@@ -532,7 +562,7 @@ function buildSuggest(define, emits, nameNode, context) {
           )
           return fixer.insertTextAfter(
             objectLeftBrace,
-            `\nemits: ['${nameNode.value}']${
+            `\nemits: ['${nameWithLoc.name}']${
               objectLeftBrace.loc.end.line < objectRightBrace.loc.start.line
                 ? ''
                 : '\n'
@@ -543,12 +573,12 @@ function buildSuggest(define, emits, nameNode, context) {
     },
     {
       messageId: 'addObjectEmitsOption',
-      data: { name: `${nameNode.value}`, emitsKind },
+      data: { name: `${nameWithLoc.name}`, emitsKind },
       fix(fixer) {
         if (afterOptionNode) {
           return fixer.insertTextAfter(
             sourceCode.getTokenBefore(afterOptionNode),
-            `\nemits: {'${nameNode.value}': null},`
+            `\nemits: {'${nameWithLoc.name}': null},`
           )
         } else if (object.properties.length > 0) {
           const before =
@@ -556,7 +586,7 @@ function buildSuggest(define, emits, nameNode, context) {
             object.properties[object.properties.length - 1]
           return fixer.insertTextAfter(
             before,
-            `,\nemits: {'${nameNode.value}': null}`
+            `,\nemits: {'${nameWithLoc.name}': null}`
           )
         } else {
           const objectLeftBrace = /** @type {Token} */ (
@@ -567,7 +597,7 @@ function buildSuggest(define, emits, nameNode, context) {
           )
           return fixer.insertTextAfter(
             objectLeftBrace,
-            `\nemits: {'${nameNode.value}': null}${
+            `\nemits: {'${nameWithLoc.name}': null}${
               objectLeftBrace.loc.end.line < objectRightBrace.loc.start.line
                 ? ''
                 : '\n'
diff --git a/lib/rules/require-explicit-slots.js b/lib/rules/require-explicit-slots.js
new file mode 100644
index 000000000..6ad7303f6
--- /dev/null
+++ b/lib/rules/require-explicit-slots.js
@@ -0,0 +1,186 @@
+/**
+ * @author Mussin Benarbia
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+/**
+ * @typedef {import('@typescript-eslint/types').TSESTree.TypeNode} TypeNode
+ * @typedef {import('@typescript-eslint/types').TSESTree.TypeElement} TypeElement
+ */
+
+/**
+ * @param {TypeElement} node
+ * @return {string | null}
+ */
+function getSlotsName(node) {
+  if (
+    node.type !== 'TSMethodSignature' &&
+    node.type !== 'TSPropertySignature'
+  ) {
+    return null
+  }
+
+  const key = node.key
+  if (key.type === 'Literal') {
+    return typeof key.value === 'string' ? key.value : null
+  }
+
+  if (key.type === 'Identifier') {
+    return key.name
+  }
+
+  return null
+}
+
+/**
+ * @param {VElement} node
+ * @return {VAttribute | VDirective | undefined}
+ */
+function getSlotNameNode(node) {
+  return node.startTag.attributes.find(
+    (node) =>
+      (!node.directive && node.key.name === 'name') ||
+      (node.directive &&
+        node.key.name.name === 'bind' &&
+        node.key.argument?.type === 'VIdentifier' &&
+        node.key.argument?.name === 'name')
+  )
+}
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'require slots to be explicitly defined',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/require-explicit-slots.html'
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      requireExplicitSlots: 'Slots must be explicitly defined.',
+      alreadyDefinedSlot: 'Slot {{slotName}} is already defined.'
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    const sourceCode = context.sourceCode
+    const documentFragment =
+      sourceCode.parserServices.getDocumentFragment &&
+      sourceCode.parserServices.getDocumentFragment()
+    if (!documentFragment) {
+      return {}
+    }
+    const scripts = documentFragment.children.filter(
+      /** @returns {element is VElement} */
+      (element) => utils.isVElement(element) && element.name === 'script'
+    )
+    if (scripts.every((script) => !utils.hasAttribute(script, 'lang', 'ts'))) {
+      return {}
+    }
+    const slotsDefined = new Set()
+
+    /**
+     * @param {VElement} node
+     * @param {string | undefined} slotName
+     */
+    function reportMissingSlot(node, slotName) {
+      if (!slotsDefined.has(slotName)) {
+        context.report({
+          node,
+          messageId: 'requireExplicitSlots'
+        })
+      }
+    }
+
+    return utils.compositingVisitors(
+      utils.defineScriptSetupVisitor(context, {
+        onDefineSlotsEnter(_node, slots) {
+          for (const slot of slots) {
+            if (!slot.slotName) {
+              continue
+            }
+
+            if (slotsDefined.has(slot.slotName)) {
+              context.report({
+                node: slot.node,
+                messageId: 'alreadyDefinedSlot',
+                data: {
+                  slotName: slot.slotName
+                }
+              })
+            } else {
+              slotsDefined.add(slot.slotName)
+            }
+          }
+        }
+      }),
+      utils.executeOnVue(context, (obj) => {
+        const slotsProperty = utils.findProperty(obj, 'slots')
+        if (!slotsProperty) return
+
+        const slotsTypeHelper =
+          slotsProperty.value.type === 'TSAsExpression' &&
+          slotsProperty.value.typeAnnotation?.typeName.name === 'SlotsType' &&
+          slotsProperty.value.typeAnnotation
+        if (!slotsTypeHelper) return
+
+        const typeArguments =
+          'typeArguments' in slotsTypeHelper
+            ? slotsTypeHelper.typeArguments
+            : slotsTypeHelper.typeParameters
+        const param = /** @type {TypeNode|undefined} */ (
+          typeArguments?.params[0]
+        )
+        if (!param) return
+
+        if (param.type === 'TSTypeLiteral') {
+          for (const memberNode of param.members) {
+            const slotName = getSlotsName(memberNode)
+            if (!slotName) continue
+
+            if (slotsDefined.has(slotName)) {
+              context.report({
+                node: memberNode,
+                messageId: 'alreadyDefinedSlot',
+                data: {
+                  slotName
+                }
+              })
+            } else {
+              slotsDefined.add(slotName)
+            }
+          }
+        }
+      }),
+      utils.defineTemplateBodyVisitor(context, {
+        /** @param {VElement} node */
+        "VElement[name='slot']"(node) {
+          const nameNode = getSlotNameNode(node)
+
+          // if no slot name is declared, default to 'default'
+          if (!nameNode) {
+            reportMissingSlot(node, 'default')
+            return
+          }
+
+          if (nameNode.directive) {
+            const expression = nameNode.value?.expression
+            // ignore attribute binding except string literal
+            if (!expression || !utils.isStringLiteral(expression)) {
+              return
+            }
+
+            const name = utils.getStringLiteralValue(expression) || undefined
+            reportMissingSlot(node, name)
+          } else {
+            reportMissingSlot(node, nameNode.value?.value)
+          }
+        }
+      })
+    )
+  }
+}
diff --git a/lib/rules/require-expose.js b/lib/rules/require-expose.js
index df96ddb66..244fd5f28 100644
--- a/lib/rules/require-expose.js
+++ b/lib/rules/require-expose.js
@@ -4,15 +4,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const {
   findVariable,
   isOpeningBraceToken,
   isClosingBraceToken
-} = require('eslint-utils')
+} = require('@eslint-community/eslint-utils')
 const utils = require('../utils')
 const { getVueComponentDefinitionType } = require('../utils')
 
@@ -59,7 +55,6 @@ function getCalleeMemberNode(node) {
 
 module.exports = {
   meta: {
-    hasSuggestions: true,
     type: 'suggestion',
     docs: {
       description: 'require declare public properties using `expose`',
@@ -67,11 +62,11 @@ module.exports = {
       url: 'https://eslint.vuejs.org/rules/require-expose.html'
     },
     fixable: null,
+    hasSuggestions: true,
     schema: [],
     messages: {
       requireExpose:
         'The public properties of the component must be explicitly declared using `expose`. If the component does not have public properties, declare it empty.',
-
       addExposeOptionForEmpty:
         'Add the `expose` option to give an empty array.',
       addExposeOptionForAll:
@@ -125,7 +120,7 @@ module.exports = {
         return true
       }
       if (node.type === 'Identifier') {
-        const variable = findVariable(context.getScope(), node)
+        const variable = findVariable(utils.getScope(context, node), node)
         if (variable) {
           for (const def of variable.defs) {
             if (def.type === 'FunctionName') {
@@ -171,7 +166,7 @@ module.exports = {
           // `setup(props, {emit})`
           const variable =
             exposeParam.type === 'Identifier'
-              ? findVariable(context.getScope(), exposeParam)
+              ? findVariable(utils.getScope(context, exposeParam), exposeParam)
               : null
           if (!variable) {
             return
@@ -184,7 +179,10 @@ module.exports = {
           }
         } else if (contextParam.type === 'Identifier') {
           // `setup(props, context)`
-          const variable = findVariable(context.getScope(), contextParam)
+          const variable = findVariable(
+            utils.getScope(context, contextParam),
+            contextParam
+          )
           if (!variable) {
             return
           }
@@ -305,7 +303,7 @@ module.exports = {
 function buildSuggest(object, context) {
   const propertyNodes = object.properties.filter(utils.isProperty)
 
-  const sourceCode = context.getSourceCode()
+  const sourceCode = context.sourceCode
   const beforeOptionNode = propertyNodes.find((p) =>
     FIX_EXPOSE_BEFORE_OPTIONS.has(utils.getStaticPropertyName(p) || '')
   )
diff --git a/lib/rules/require-macro-variable-name.js b/lib/rules/require-macro-variable-name.js
new file mode 100644
index 000000000..02cb2f5af
--- /dev/null
+++ b/lib/rules/require-macro-variable-name.js
@@ -0,0 +1,96 @@
+/**
+ * @author ItMaga
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+const DEFAULT_OPTIONS = {
+  defineProps: 'props',
+  defineEmits: 'emit',
+  defineSlots: 'slots',
+  useSlots: 'slots',
+  useAttrs: 'attrs'
+}
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'require a certain macro variable name',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/require-macro-variable-name.html'
+    },
+    fixable: null,
+    hasSuggestions: true,
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          defineProps: { type: 'string' },
+          defineEmits: { type: 'string' },
+          defineSlots: { type: 'string' },
+          useSlots: { type: 'string' },
+          useAttrs: { type: 'string' }
+        },
+        additionalProperties: false
+      }
+    ],
+    messages: {
+      requireName:
+        'The variable name of "{{macroName}}" must be "{{variableName}}".',
+      changeName: 'Change the variable name to "{{variableName}}".'
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    const options = Object.assign({}, DEFAULT_OPTIONS, context.options[0])
+    const relevantMacros = new Set([
+      ...Object.keys(DEFAULT_OPTIONS),
+      'withDefaults'
+    ])
+
+    return utils.defineScriptSetupVisitor(context, {
+      VariableDeclarator(node) {
+        if (
+          node.init &&
+          node.init.type === 'CallExpression' &&
+          node.init.callee.type === 'Identifier' &&
+          relevantMacros.has(node.init.callee.name)
+        ) {
+          const macroName =
+            node.init.callee.name === 'withDefaults'
+              ? 'defineProps'
+              : node.init.callee.name
+
+          if (
+            node.id.type === 'Identifier' &&
+            node.id.name !== options[macroName]
+          ) {
+            context.report({
+              node: node.id,
+              loc: node.id.loc,
+              messageId: 'requireName',
+              data: {
+                macroName,
+                variableName: options[macroName]
+              },
+              suggest: [
+                {
+                  messageId: 'changeName',
+                  data: {
+                    variableName: options[macroName]
+                  },
+                  fix(fixer) {
+                    return fixer.replaceText(node.id, options[macroName])
+                  }
+                }
+              ]
+            })
+          }
+        }
+      }
+    })
+  }
+}
diff --git a/lib/rules/require-name-property.js b/lib/rules/require-name-property.js
index d4052f153..5eedc4781 100644
--- a/lib/rules/require-name-property.js
+++ b/lib/rules/require-name-property.js
@@ -4,9 +4,31 @@
  */
 'use strict'
 
+const path = require('path')
 const utils = require('../utils')
 const { getVueComponentDefinitionType } = require('../utils')
+/**
+ * Get the text of the empty indentation part of the line which the given token is on.
+ * @param {SourceCode} sourceCode the source code object
+ * @param {Token} token the token to get the indentation text of the line which the token is on
+ * @returns {string} The text of indentation part.
+ */
+function getLineEmptyIndent(sourceCode, token) {
+  const LT_CHAR = /[\n\r\u2028\u2029]/
+  const EMPTY_CHAR = /\s/
+  const text = sourceCode.text
+  let i = token.range[0] - 1
+
+  while (i >= 0 && !LT_CHAR.test(text[i])) {
+    i -= 1
+  }
+  let j = i
+  while (EMPTY_CHAR.test(text[j])) {
+    j += 1
+  }
 
+  return text.slice(i + 1, j)
+}
 /**
  * @param {Property | SpreadElement} node
  * @returns {node is ObjectExpressionProperty}
@@ -28,7 +50,12 @@ module.exports = {
       url: 'https://eslint.vuejs.org/rules/require-name-property.html'
     },
     fixable: null,
-    schema: []
+    hasSuggestions: true,
+    schema: [],
+    messages: {
+      missingName: 'Required name property is not set.',
+      addName: 'Add name property to component.'
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
@@ -47,7 +74,41 @@ module.exports = {
 
       context.report({
         node: component,
-        message: 'Required name property is not set.'
+        messageId: 'missingName',
+        suggest: [
+          {
+            messageId: 'addName',
+            fix(fixer) {
+              const extension = path.extname(context.filename)
+              const filename = path.basename(context.filename, extension)
+              const sourceCode = context.sourceCode
+              // fix only when property is not empty
+              if (component.properties.length > 0) {
+                const firstToken = sourceCode.getFirstToken(
+                  component.properties[0]
+                )
+                const indentText = getLineEmptyIndent(sourceCode, firstToken)
+                // insert name property before the first property
+                return fixer.insertTextBefore(
+                  component.properties[0],
+                  `name: '${filename}',\n${indentText}`
+                )
+              }
+
+              const firstToken = sourceCode.getFirstToken(component)
+              const lastToken = sourceCode.getLastToken(component)
+              // if the component is empty, insert name property and indent
+              if (firstToken.value === '{' && lastToken.value === '}') {
+                const indentText = getLineEmptyIndent(sourceCode, firstToken)
+                return fixer.replaceTextRange(
+                  [firstToken.range[1], lastToken.range[0]],
+                  `\n${indentText}  name: '${filename}'\n${indentText}`
+                )
+              }
+              return null
+            }
+          }
+        ]
       })
     })
   }
diff --git a/lib/rules/require-prop-comment.js b/lib/rules/require-prop-comment.js
new file mode 100644
index 000000000..0a374b65d
--- /dev/null
+++ b/lib/rules/require-prop-comment.js
@@ -0,0 +1,124 @@
+/**
+ * @author CZB
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+const { isBlockComment, isJSDocComment } = require('../utils/comments.js')
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'require props to have a comment',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/require-prop-comment.html'
+    },
+    fixable: null,
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          type: { enum: ['JSDoc', 'line', 'block', 'any'] }
+        },
+        additionalProperties: false
+      }
+    ],
+    messages: {
+      requireAnyComment: 'The "{{name}}" property should have a comment.',
+      requireLineComment: 'The "{{name}}" property should have a line comment.',
+      requireBlockComment:
+        'The "{{name}}" property should have a block comment.',
+      requireJSDocComment:
+        'The "{{name}}" property should have a JSDoc comment.'
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    /** @type {{type?: "JSDoc" | "line" | "block" | "any"}|undefined} */
+    const schema = context.options[0]
+    const type = (schema && schema.type) || 'JSDoc'
+
+    const sourceCode = context.sourceCode
+
+    /** @param {Comment | undefined} comment */
+    const verifyBlock = (comment) =>
+      comment && isBlockComment(comment) ? undefined : 'requireBlockComment'
+
+    /** @param {Comment | undefined} comment */
+    const verifyLine = (comment) =>
+      comment && comment.type === 'Line' ? undefined : 'requireLineComment'
+
+    /** @param {Comment | undefined} comment */
+    const verifyAny = (comment) => (comment ? undefined : 'requireAnyComment')
+
+    /** @param {Comment | undefined} comment */
+    const verifyJSDoc = (comment) =>
+      comment && isJSDocComment(comment) ? undefined : 'requireJSDocComment'
+
+    /**
+     * @param {import('../utils').ComponentProp[]} props
+     */
+    function verifyProps(props) {
+      for (const prop of props) {
+        if (!prop.propName || prop.type === 'infer-type') {
+          continue
+        }
+
+        const precedingComments = sourceCode.getCommentsBefore(prop.node)
+        const lastPrecedingComment =
+          precedingComments.length > 0
+            ? precedingComments[precedingComments.length - 1]
+            : undefined
+
+        /** @type {string|undefined} */
+        let messageId
+
+        switch (type) {
+          case 'block': {
+            messageId = verifyBlock(lastPrecedingComment)
+            break
+          }
+          case 'line': {
+            messageId = verifyLine(lastPrecedingComment)
+            break
+          }
+          case 'any': {
+            messageId = verifyAny(lastPrecedingComment)
+            break
+          }
+          default: {
+            messageId = verifyJSDoc(lastPrecedingComment)
+            break
+          }
+        }
+
+        if (!messageId) {
+          continue
+        }
+
+        context.report({
+          node: prop.node,
+          messageId,
+          data: {
+            name: prop.propName
+          }
+        })
+      }
+    }
+
+    return utils.compositingVisitors(
+      utils.defineScriptSetupVisitor(context, {
+        onDefinePropsEnter(_node, props) {
+          verifyProps(props)
+        }
+      }),
+      utils.defineVueVisitor(context, {
+        onVueObjectEnter(node) {
+          verifyProps(utils.getComponentPropsFromOptions(node))
+        }
+      })
+    )
+  }
+}
diff --git a/lib/rules/require-prop-type-constructor.js b/lib/rules/require-prop-type-constructor.js
index 121a503ab..d4c344844 100644
--- a/lib/rules/require-prop-type-constructor.js
+++ b/lib/rules/require-prop-type-constructor.js
@@ -11,12 +11,6 @@ const { isDef } = require('../utils')
  * @typedef {import('../utils').ComponentProp} ComponentProp
  */
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
-const message = 'The "{{name}}" property should be a constructor.'
-
 const forbiddenTypes = new Set([
   'Literal',
   'TemplateLiteral',
@@ -39,11 +33,14 @@ module.exports = {
     type: 'suggestion',
     docs: {
       description: 'require prop type to be a constructor',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/require-prop-type-constructor.html'
     },
-    fixable: 'code', // or "code" or "whitespace"
-    schema: []
+    fixable: 'code',
+    schema: [],
+    messages: {
+      propTypeConstructor: 'The "{{name}}" property should be a constructor.'
+    }
   },
 
   /** @param {RuleContext} context */
@@ -62,7 +59,7 @@ module.exports = {
 
         context.report({
           node: prop,
-          message,
+          messageId: 'propTypeConstructor',
           data: {
             name: propName
           },
@@ -83,7 +80,7 @@ module.exports = {
     /** @param {ComponentProp[]} props */
     function verifyProps(props) {
       for (const prop of props) {
-        if (!prop.value || prop.propName == null) {
+        if (prop.type !== 'object' || prop.propName == null) {
           continue
         }
         if (
diff --git a/lib/rules/require-prop-types.js b/lib/rules/require-prop-types.js
index 3239deb9b..af2a956a4 100644
--- a/lib/rules/require-prop-types.js
+++ b/lib/rules/require-prop-types.js
@@ -10,29 +10,45 @@ const utils = require('../utils')
  * @typedef {import('../utils').ComponentProp} ComponentProp
  */
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'suggestion',
     docs: {
       description: 'require type definitions in props',
-      categories: ['vue3-strongly-recommended', 'strongly-recommended'],
+      categories: ['vue3-strongly-recommended', 'vue2-strongly-recommended'],
       url: 'https://eslint.vuejs.org/rules/require-prop-types.html'
     },
-    fixable: null, // or "code" or "whitespace"
-    schema: [
-      // fill in your schema
-    ]
+    fixable: null,
+    schema: [],
+    messages: {
+      requireType: 'Prop "{{name}}" should define at least its type.'
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
-    // ----------------------------------------------------------------------
-    // Helpers
-    // ----------------------------------------------------------------------
+    /**
+     * @param {Expression} node
+     * @returns {boolean|null}
+     */
+    function optionHasType(node) {
+      switch (node.type) {
+        case 'ObjectExpression': {
+          // foo: {
+          return objectHasType(node)
+        }
+        case 'ArrayExpression': {
+          // foo: [
+          return node.elements.length > 0
+        }
+        case 'FunctionExpression':
+        case 'ArrowFunctionExpression': {
+          return false
+        }
+      }
 
+      // Unknown
+      return null
+    }
     /**
      * @param {ObjectExpression} node
      * @returns {boolean}
@@ -51,7 +67,6 @@ module.exports = {
       )
       return Boolean(typeProperty || validatorProperty)
     }
-
     /**
      * @param {ComponentProp} prop
      */
@@ -59,39 +74,18 @@ module.exports = {
       if (prop.type !== 'object' && prop.type !== 'array') {
         return
       }
-      const { value, node, propName } = prop
-      let hasType = true
-
-      if (!value) {
-        hasType = false
-      } else {
-        switch (value.type) {
-          case 'ObjectExpression': {
-            // foo: {
-            hasType = objectHasType(value)
-            break
-          }
-          case 'ArrayExpression': {
-            // foo: [
-            hasType = value.elements.length > 0
-            break
-          }
-          case 'FunctionExpression':
-          case 'ArrowFunctionExpression': {
-            hasType = false
-            break
-          }
-        }
-      }
+      const hasType =
+        prop.type === 'array' ? false : (optionHasType(prop.value) ?? true)
 
       if (!hasType) {
+        const { node, propName } = prop
         const name =
           propName ||
           (node.type === 'Identifier' && node.name) ||
           'Unknown prop'
         context.report({
           node,
-          message: 'Prop "{{name}}" should define at least its type.',
+          messageId: 'requireType',
           data: {
             name
           }
@@ -99,16 +93,25 @@ module.exports = {
       }
     }
 
-    // ----------------------------------------------------------------------
-    // Public
-    // ----------------------------------------------------------------------
-
     return utils.compositingVisitors(
       utils.defineScriptSetupVisitor(context, {
         onDefinePropsEnter(_node, props) {
           for (const prop of props) {
             checkProperty(prop)
           }
+        },
+        onDefineModelEnter(node, model) {
+          if (model.typeNode) return
+          if (model.options && (optionHasType(model.options) ?? true)) {
+            return
+          }
+          context.report({
+            node: model.options || node,
+            messageId: 'requireType',
+            data: {
+              name: model.name.modelName
+            }
+          })
         }
       }),
       utils.executeOnVue(context, (obj) => {
diff --git a/lib/rules/require-render-return.js b/lib/rules/require-render-return.js
index 8350f9209..084e63e5b 100644
--- a/lib/rules/require-render-return.js
+++ b/lib/rules/require-render-return.js
@@ -6,30 +6,25 @@
 
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
     docs: {
       description: 'enforce render function to always return value',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/require-render-return.html'
     },
-    fixable: null, // or "code" or "whitespace"
-    schema: []
+    fixable: null,
+    schema: [],
+    messages: {
+      expectedReturn: 'Expected to return a value in render function.'
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
     /** @type {Map<ESNode, Property['key']>} */
     const renderFunctions = new Map()
 
-    // ----------------------------------------------------------------------
-    // Public
-    // ----------------------------------------------------------------------
-
     return utils.compositingVisitors(
       utils.defineVueVisitor(context, {
         onRenderFunctionEnter(node) {
@@ -41,7 +36,7 @@ module.exports = {
         if (key) {
           context.report({
             node: key,
-            message: 'Expected to return a value in render function.'
+            messageId: 'expectedReturn'
           })
         }
       })
diff --git a/lib/rules/require-slots-as-functions.js b/lib/rules/require-slots-as-functions.js
index 0e83eeda7..686677ea8 100644
--- a/lib/rules/require-slots-as-functions.js
+++ b/lib/rules/require-slots-as-functions.js
@@ -4,16 +4,8 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
-const { findVariable } = require('eslint-utils')
-
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
+const { findVariable } = require('@eslint-community/eslint-utils')
 
 module.exports = {
   meta: {
@@ -86,7 +78,7 @@ module.exports = {
      * @param {Expression} reportNode The node to report
      */
     function verifyReferences(node, reportNode) {
-      const variable = findVariable(context.getScope(), node)
+      const variable = findVariable(utils.getScope(context, node), node)
       if (!variable) {
         return
       }
diff --git a/lib/rules/require-toggle-inside-transition.js b/lib/rules/require-toggle-inside-transition.js
index 223e4f9be..bfb267caa 100644
--- a/lib/rules/require-toggle-inside-transition.js
+++ b/lib/rules/require-toggle-inside-transition.js
@@ -4,15 +4,40 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
+/**
+ * @param {VDirective} vBindAppear
+ */
+function isValidBindAppear(vBindAppear) {
+  if (
+    vBindAppear.value?.expression &&
+    vBindAppear.value.expression.type === 'Literal'
+  ) {
+    return vBindAppear.value.expression?.value !== false
+  }
+
+  return true
+}
+
+/**
+ * @param {string[]} directives
+ */
+function createDirectiveList(directives) {
+  let str = ''
+
+  for (const [index, directive] of directives.entries()) {
+    if (index === 0) {
+      str += `\`v-${directive}\``
+    } else if (index < directives.length - 1) {
+      str += `, \`v-${directive}\``
+    } else {
+      str += ` or \`v-${directive}\``
+    }
+  }
+
+  return str
+}
 
 module.exports = {
   meta: {
@@ -24,14 +49,34 @@ module.exports = {
       url: 'https://eslint.vuejs.org/rules/require-toggle-inside-transition.html'
     },
     fixable: null,
-    schema: [],
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          additionalDirectives: {
+            type: 'array',
+            items: {
+              type: 'string'
+            },
+            uniqueItems: true
+          }
+        },
+        additionalProperties: false
+      }
+    ],
     messages: {
       expected:
-        'The element inside `<transition>` is expected to have a `v-if` or `v-show` directive.'
+        'The element inside `<transition>` is expected to have a {{allowedDirectives}} directive.'
     }
   },
   /** @param {RuleContext} context */
   create(context) {
+    /** @type {Array<string>} */
+    const additionalDirectives =
+      (context.options[0] && context.options[0].additionalDirectives) || []
+    const allowedDirectives = ['if', 'show', ...additionalDirectives]
+    const allowedDirectivesString = createDirectiveList(allowedDirectives)
+
     /**
      * Check if the given element has display control.
      * @param {VElement} element The element node to check.
@@ -40,14 +85,31 @@ module.exports = {
       if (utils.isCustomComponent(element)) {
         return
       }
+
+      /** @type VElement */ // @ts-expect-error
+      const parent = element.parent
+      const vBindAppear = utils.getDirective(parent, 'bind', 'appear')
       if (
-        !utils.hasDirective(element, 'if') &&
-        !utils.hasDirective(element, 'show')
+        utils.hasAttribute(parent, 'appear') ||
+        (vBindAppear && isValidBindAppear(vBindAppear))
+      ) {
+        return
+      }
+
+      if (
+        element.name !== 'slot' &&
+        !allowedDirectives.some((directive) =>
+          utils.hasDirective(element, directive)
+        ) &&
+        !utils.hasDirective(element, 'bind', 'key')
       ) {
         context.report({
           node: element.startTag,
           loc: element.startTag.loc,
-          messageId: 'expected'
+          messageId: 'expected',
+          data: {
+            allowedDirectives: allowedDirectivesString
+          }
         })
       }
     }
@@ -55,9 +117,11 @@ module.exports = {
     return utils.defineTemplateBodyVisitor(context, {
       /** @param {VElement} node */
       "VElement[name='transition'] > VElement"(node) {
-        if (node.parent.children[0] !== node) {
+        const child = node.parent.children.find(utils.isVElement)
+        if (child !== node) {
           return
         }
+
         verifyInsideElement(node)
       }
     })
diff --git a/lib/rules/require-typed-object-prop.js b/lib/rules/require-typed-object-prop.js
new file mode 100644
index 000000000..3c96816bf
--- /dev/null
+++ b/lib/rules/require-typed-object-prop.js
@@ -0,0 +1,172 @@
+/**
+ * @author Przemysław Jan Beigert
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+/**
+ * @param {RuleContext} context
+ * @param {Identifier} identifierNode
+ */
+const checkPropIdentifierType = (context, identifierNode) => {
+  if (identifierNode.name === 'Object' || identifierNode.name === 'Array') {
+    const arrayTypeSuggestion = identifierNode.name === 'Array' ? '[]' : ''
+    context.report({
+      node: identifierNode,
+      messageId: 'expectedTypeAnnotation',
+      suggest: [
+        {
+          messageId: 'addTypeAnnotation',
+          data: { type: `any${arrayTypeSuggestion}` },
+          fix(fixer) {
+            return fixer.insertTextAfter(
+              identifierNode,
+              ` as PropType<any${arrayTypeSuggestion}>`
+            )
+          }
+        },
+        {
+          messageId: 'addTypeAnnotation',
+          data: { type: `unknown${arrayTypeSuggestion}` },
+          fix(fixer) {
+            return fixer.insertTextAfter(
+              identifierNode,
+              ` as PropType<unknown${arrayTypeSuggestion}>`
+            )
+          }
+        }
+      ]
+    })
+  }
+}
+
+/**
+ * @param {RuleContext} context
+ * @param {ArrayExpression} arrayNode
+ */
+const checkPropArrayType = (context, arrayNode) => {
+  for (const elementNode of arrayNode.elements) {
+    if (elementNode?.type === 'Identifier') {
+      checkPropIdentifierType(context, elementNode)
+    }
+  }
+}
+
+/**
+ * @param {RuleContext} context
+ * @param {ObjectExpression} objectNode
+ */
+const checkPropObjectType = (context, objectNode) => {
+  const typeProperty = objectNode.properties.find(
+    (prop) =>
+      prop.type === 'Property' &&
+      prop.key.type === 'Identifier' &&
+      prop.key.name === 'type'
+  )
+  if (!typeProperty || typeProperty.type !== 'Property') {
+    return
+  }
+
+  if (typeProperty.value.type === 'Identifier') {
+    // `foo: { type: String }`
+    checkPropIdentifierType(context, typeProperty.value)
+  } else if (typeProperty.value.type === 'ArrayExpression') {
+    // `foo: { type: [String, Boolean] }`
+    checkPropArrayType(context, typeProperty.value)
+  }
+}
+
+/**
+ * @param {import('../utils').ComponentProp} prop
+ * @param {RuleContext} context
+ */
+const checkProp = (prop, context) => {
+  if (prop.type !== 'object') {
+    return
+  }
+
+  switch (prop.node.value.type) {
+    case 'Identifier': {
+      // e.g. `foo: String`
+      checkPropIdentifierType(context, prop.node.value)
+      break
+    }
+    case 'ArrayExpression': {
+      // e.g. `foo: [String, Boolean]`
+      checkPropArrayType(context, prop.node.value)
+      break
+    }
+    case 'ObjectExpression': {
+      // e.g. `foo: { type: … }`
+      checkPropObjectType(context, prop.node.value)
+      return
+    }
+  }
+}
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'enforce adding type declarations to object props',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/require-typed-object-prop.html'
+    },
+    fixable: null,
+    hasSuggestions: true,
+    schema: [],
+    messages: {
+      expectedTypeAnnotation: 'Expected type annotation on object prop.',
+      addTypeAnnotation: 'Add `{{ type }}` type annotation.'
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    const filename = context.filename
+    if (!utils.isVueFile(filename) && !utils.isTypeScriptFile(filename)) {
+      return {}
+    }
+
+    if (utils.isVueFile(filename)) {
+      const sourceCode = context.sourceCode
+      const documentFragment =
+        sourceCode.parserServices.getDocumentFragment &&
+        sourceCode.parserServices.getDocumentFragment()
+      if (!documentFragment) {
+        return {}
+      }
+      const scripts = documentFragment.children.filter(
+        /** @returns {element is VElement} */
+        (element) => utils.isVElement(element) && element.name === 'script'
+      )
+      if (
+        scripts.every((script) => !utils.hasAttribute(script, 'lang', 'ts'))
+      ) {
+        return {}
+      }
+    }
+
+    return utils.compositingVisitors(
+      utils.defineScriptSetupVisitor(context, {
+        onDefinePropsEnter(_node, props) {
+          for (const prop of props) {
+            checkProp(prop, context)
+          }
+        }
+      }),
+      utils.executeOnVue(context, (obj) => {
+        const props = utils.getComponentPropsFromOptions(obj)
+
+        for (const prop of props) {
+          checkProp(prop, context)
+        }
+      })
+    )
+  }
+}
diff --git a/lib/rules/require-typed-ref.js b/lib/rules/require-typed-ref.js
new file mode 100644
index 000000000..e1c82f01d
--- /dev/null
+++ b/lib/rules/require-typed-ref.js
@@ -0,0 +1,120 @@
+/**
+ * @author Ivan Demchuk <https://github.com/Demivan>
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const { iterateDefineRefs } = require('../utils/ref-object-references')
+const utils = require('../utils')
+
+/**
+ * @param {Expression|SpreadElement} node
+ */
+function isNullOrUndefined(node) {
+  return (
+    (node.type === 'Literal' && node.value === null) ||
+    (node.type === 'Identifier' && node.name === 'undefined')
+  )
+}
+
+/**
+ * @typedef {import('../utils/ref-object-references').RefObjectReferences} RefObjectReferences
+ */
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        'require `ref` and `shallowRef` functions to be strongly typed',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/require-typed-ref.html'
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      noType:
+        'Specify type parameter for `{{name}}` function, otherwise created variable will not be typechecked.'
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    const filename = context.filename
+    if (!utils.isVueFile(filename) && !utils.isTypeScriptFile(filename)) {
+      return {}
+    }
+
+    if (utils.isVueFile(filename)) {
+      const sourceCode = context.sourceCode
+      const documentFragment =
+        sourceCode.parserServices.getDocumentFragment &&
+        sourceCode.parserServices.getDocumentFragment()
+      if (!documentFragment) {
+        return {}
+      }
+      const scripts = documentFragment.children.filter(
+        /** @returns {element is VElement} */
+        (element) => utils.isVElement(element) && element.name === 'script'
+      )
+      if (
+        scripts.every((script) => !utils.hasAttribute(script, 'lang', 'ts'))
+      ) {
+        return {}
+      }
+    }
+
+    const defines = iterateDefineRefs(
+      /** @type {import('eslint').Scope.Scope} */ (
+        context.sourceCode.scopeManager.globalScope
+      )
+    )
+
+    /**
+     * @param {string} name
+     * @param {CallExpression} node
+     */
+    function report(name, node) {
+      context.report({
+        node,
+        messageId: 'noType',
+        data: {
+          name
+        }
+      })
+    }
+
+    return {
+      Program() {
+        for (const ref of defines) {
+          if (ref.name !== 'ref' && ref.name !== 'shallowRef') {
+            continue
+          }
+
+          if (
+            ref.node.arguments.length > 0 &&
+            !isNullOrUndefined(ref.node.arguments[0])
+          ) {
+            continue
+          }
+
+          const typeArguments =
+            'typeArguments' in ref.node
+              ? ref.node.typeArguments
+              : ref.node.typeParameters
+          if (typeArguments == null) {
+            if (
+              ref.node.parent.type === 'VariableDeclarator' &&
+              ref.node.parent.id.type === 'Identifier'
+            ) {
+              if (ref.node.parent.id.typeAnnotation == null) {
+                report(ref.name, ref.node)
+              }
+            } else {
+              report(ref.name, ref.node)
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/lib/rules/require-v-for-key.js b/lib/rules/require-v-for-key.js
index 3f82e696a..3ca2c68a7 100644
--- a/lib/rules/require-v-for-key.js
+++ b/lib/rules/require-v-for-key.js
@@ -5,26 +5,22 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
     docs: {
       description: 'require `v-bind:key` with `v-for` directives',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/require-v-for-key.html'
     },
     fixable: null,
-    schema: []
+    schema: [],
+    messages: {
+      requireKey:
+        "Elements in iteration expect to have 'v-bind:key' directives."
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
@@ -46,8 +42,7 @@ module.exports = {
         context.report({
           node: element.startTag,
           loc: element.startTag.loc,
-          message:
-            "Elements in iteration expect to have 'v-bind:key' directives."
+          messageId: 'requireKey'
         })
       }
     }
diff --git a/lib/rules/require-valid-default-prop.js b/lib/rules/require-valid-default-prop.js
index 5208dbdde..f24f33fa1 100644
--- a/lib/rules/require-valid-default-prop.js
+++ b/lib/rules/require-valid-default-prop.js
@@ -7,17 +7,15 @@ const utils = require('../utils')
 const { capitalize } = require('../utils/casing')
 
 /**
+ * @typedef {import('../utils').ComponentProp} ComponentProp
  * @typedef {import('../utils').ComponentObjectProp} ComponentObjectProp
  * @typedef {import('../utils').ComponentArrayProp} ComponentArrayProp
  * @typedef {import('../utils').ComponentTypeProp} ComponentTypeProp
+ * @typedef {import('../utils').ComponentInferTypeProp} ComponentInferTypeProp
  * @typedef {import('../utils').ComponentUnknownProp} ComponentUnknownProp
  * @typedef {import('../utils').VueObjectData} VueObjectData
  */
 
-// ----------------------------------------------------------------------
-// Helpers
-// ----------------------------------------------------------------------
-
 const NATIVE_TYPES = new Set([
   'String',
   'Number',
@@ -72,20 +70,20 @@ function getTypes(targetNode) {
   return []
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'suggestion',
     docs: {
       description: 'enforce props default values to be valid',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/require-valid-default-prop.html'
     },
     fixable: null,
-    schema: []
+    schema: [],
+    messages: {
+      invalidType:
+        "Type of the default value for '{{name}}' prop must be a {{types}}."
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
@@ -116,7 +114,7 @@ module.exports = {
      */
     /**
      * @typedef {object} PropDefaultFunctionContext
-     * @property {ComponentObjectProp | ComponentTypeProp} prop
+     * @property {ComponentObjectProp | ComponentTypeProp | ComponentInferTypeProp} prop
      * @property {Set<string>} types
      * @property {FunctionValueType} default
      */
@@ -232,19 +230,18 @@ module.exports = {
     }
 
     /**
-     * @param {*} node
-     * @param {ComponentObjectProp | ComponentTypeProp} prop
+     * @param {Expression} node
+     * @param {ComponentObjectProp | ComponentTypeProp | ComponentInferTypeProp} prop
      * @param {Iterable<string>} expectedTypeNames
      */
     function report(node, prop, expectedTypeNames) {
       const propName =
-        prop.propName != null
-          ? prop.propName
-          : `[${context.getSourceCode().getText(prop.node.key)}]`
+        prop.propName == null
+          ? `[${context.sourceCode.getText(prop.node.key)}]`
+          : prop.propName
       context.report({
         node,
-        message:
-          "Type of the default value for '{{name}}' prop must be a {{types}}.",
+        messageId: 'invalidType',
         data: {
           name: propName,
           types: [...expectedTypeNames].join(' or ').toLowerCase()
@@ -253,30 +250,46 @@ module.exports = {
     }
 
     /**
-     * @param {(ComponentObjectDefineProp | ComponentTypeProp)[]} props
-     * @param { { [key: string]: Expression | undefined } } withDefaults
+     * @typedef {object} DefaultDefine
+     * @property {Expression} expression
+     * @property {'assignment'|'withDefaults'|'defaultProperty'} src
+     */
+    /**
+     * @param {(ComponentObjectProp | ComponentTypeProp | ComponentInferTypeProp)[]} props
+     * @param {(propName: string) => Iterable<DefaultDefine>} otherDefaultProvider
      */
-    function processPropDefs(props, withDefaults) {
+    function processPropDefs(props, otherDefaultProvider) {
       /** @type {PropDefaultFunctionContext[]} */
       const propContexts = []
       for (const prop of props) {
         let typeList
-        let defExpr
+        /** @type {DefaultDefine[]} */
+        const defaultList = []
         if (prop.type === 'object') {
-          const type = getPropertyNode(prop.value, 'type')
-          if (!type) continue
+          if (prop.value.type === 'ObjectExpression') {
+            const type = getPropertyNode(prop.value, 'type')
+            if (!type) continue
 
-          typeList = getTypes(type.value)
+            typeList = getTypes(type.value)
 
-          const def = getPropertyNode(prop.value, 'default')
-          if (!def) continue
-
-          defExpr = def.value
+            const def = getPropertyNode(prop.value, 'default')
+            if (def) {
+              defaultList.push({
+                src: 'defaultProperty',
+                expression: def.value
+              })
+            }
+          } else {
+            typeList = getTypes(prop.value)
+          }
         } else {
           typeList = prop.types
-          defExpr = withDefaults[prop.propName]
         }
-        if (!defExpr) continue
+        if (prop.propName != null) {
+          defaultList.push(...otherDefaultProvider(prop.propName))
+        }
+
+        if (defaultList.length === 0) continue
 
         const typeNames = new Set(
           typeList.filter((item) => NATIVE_TYPES.has(item))
@@ -284,49 +297,57 @@ module.exports = {
         // There is no native types detected
         if (typeNames.size === 0) continue
 
-        const defType = getValueType(defExpr)
+        for (const defaultDef of defaultList) {
+          const defType = getValueType(defaultDef.expression)
 
-        if (!defType) continue
+          if (!defType) continue
 
-        if (!defType.function) {
-          if (
-            typeNames.has(defType.type) &&
-            !FUNCTION_VALUE_TYPES.has(defType.type)
-          ) {
-            continue
-          }
-          report(
-            defExpr,
-            prop,
-            [...typeNames].map((type) =>
-              FUNCTION_VALUE_TYPES.has(type) ? 'Function' : type
-            )
-          )
-        } else {
-          if (typeNames.has('Function')) {
-            continue
-          }
-          if (defType.expression) {
-            if (!defType.returnType || typeNames.has(defType.returnType)) {
+          if (defType.function) {
+            if (typeNames.has('Function')) {
               continue
             }
-            report(defType.functionBody, prop, typeNames)
+            if (defaultDef.src === 'assignment') {
+              // Factory functions cannot be used in default definitions with initial value assignments.
+              report(defaultDef.expression, prop, typeNames)
+              continue
+            }
+            if (defType.expression) {
+              if (!defType.returnType || typeNames.has(defType.returnType)) {
+                continue
+              }
+              report(defType.functionBody, prop, typeNames)
+            } else {
+              propContexts.push({
+                prop,
+                types: typeNames,
+                default: defType
+              })
+            }
           } else {
-            propContexts.push({
+            if (typeNames.has(defType.type)) {
+              if (defaultDef.src === 'assignment') {
+                continue
+              }
+              if (!FUNCTION_VALUE_TYPES.has(defType.type)) {
+                // For Array and Object, defaults must be defined in the factory function.
+                continue
+              }
+            }
+            report(
+              defaultDef.expression,
               prop,
-              types: typeNames,
-              default: defType
-            })
+              defaultDef.src === 'assignment'
+                ? typeNames
+                : [...typeNames].map((type) =>
+                    FUNCTION_VALUE_TYPES.has(type) ? 'Function' : type
+                  )
+            )
           }
         }
       }
       return propContexts
     }
 
-    // ----------------------------------------------------------------------
-    // Public
-    // ----------------------------------------------------------------------
-
     return utils.compositingVisitors(
       {
         /**
@@ -371,7 +392,7 @@ module.exports = {
                 prop.type === 'object' && prop.value.type === 'ObjectExpression'
               )
           )
-          const propContexts = processPropDefs(props, {})
+          const propContexts = processPropDefs(props, () => [])
           vueObjectPropsContexts.set(obj, propContexts)
         },
         /**
@@ -406,21 +427,35 @@ module.exports = {
       }),
       utils.defineScriptSetupVisitor(context, {
         onDefinePropsEnter(node, baseProps) {
-          /** @type {(ComponentObjectDefineProp | ComponentTypeProp)[]} */
           const props = baseProps.filter(
             /**
-             * @param {ComponentObjectProp | ComponentArrayProp | ComponentTypeProp | ComponentUnknownProp} prop
-             * @returns {prop is ComponentObjectDefineProp | ComponentTypeProp}
+             * @param {ComponentProp} prop
+             * @returns {prop is ComponentObjectProp | ComponentInferTypeProp | ComponentTypeProp}
              */
             (prop) =>
               Boolean(
                 prop.type === 'type' ||
-                  (prop.type === 'object' &&
-                    prop.value.type === 'ObjectExpression')
+                prop.type === 'infer-type' ||
+                prop.type === 'object'
               )
           )
-          const defaults = utils.getWithDefaultsPropExpressions(node)
-          const propContexts = processPropDefs(props, defaults)
+          const defaultsByWithDefaults =
+            utils.getWithDefaultsPropExpressions(node)
+          const defaultsByAssignmentPatterns =
+            utils.getDefaultPropExpressionsForPropsDestructure(node)
+          const propContexts = processPropDefs(props, function* (propName) {
+            const withDefaults = defaultsByWithDefaults[propName]
+            if (withDefaults) {
+              yield { src: 'withDefaults', expression: withDefaults }
+            }
+            const assignmentPattern = defaultsByAssignmentPatterns[propName]
+            if (assignmentPattern) {
+              yield {
+                src: 'assignment',
+                expression: assignmentPattern.expression
+              }
+            }
+          })
           scriptSetupPropsContexts.push({ node, props: propContexts })
         },
         /**
@@ -440,7 +475,21 @@ module.exports = {
           }
         },
         onDefinePropsExit() {
-          scriptSetupPropsContexts.pop()
+          const data = scriptSetupPropsContexts.pop()
+          if (!data) {
+            return
+          }
+          for (const {
+            prop,
+            types: typeNames,
+            default: defType
+          } of data.props) {
+            for (const returnType of defType.returnTypes) {
+              if (typeNames.has(returnType.type)) continue
+
+              report(returnType.node, prop, typeNames)
+            }
+          }
         }
       })
     )
diff --git a/lib/rules/restricted-component-names.js b/lib/rules/restricted-component-names.js
new file mode 100644
index 000000000..89d04bfad
--- /dev/null
+++ b/lib/rules/restricted-component-names.js
@@ -0,0 +1,79 @@
+/**
+ * @author Wayne Zhang
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+const { toRegExpGroupMatcher } = require('../utils/regexp')
+
+const htmlElements = require('../utils/html-elements.json')
+const deprecatedHtmlElements = require('../utils/deprecated-html-elements.json')
+const svgElements = require('../utils/svg-elements.json')
+const vue2builtinComponents = require('../utils/vue2-builtin-components')
+const vue3builtinComponents = require('../utils/vue3-builtin-components')
+
+const reservedNames = new Set([
+  ...htmlElements,
+  ...deprecatedHtmlElements,
+  ...svgElements,
+  ...vue2builtinComponents,
+  ...vue3builtinComponents
+])
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'enforce using only specific component names',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/restricted-component-names.html'
+    },
+    fixable: null,
+    schema: [
+      {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+          allow: {
+            type: 'array',
+            items: { type: 'string' },
+            uniqueItems: true,
+            additionalItems: false
+          }
+        }
+      }
+    ],
+    messages: {
+      invalidName: 'Component name "{{name}}" is not allowed.'
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    const options = context.options[0] || {}
+    const isAllowed = toRegExpGroupMatcher(options.allow)
+
+    /** @param {string} name  */
+    function isAllowedTarget(name) {
+      return reservedNames.has(name) || isAllowed(name)
+    }
+
+    return utils.defineTemplateBodyVisitor(context, {
+      VElement(node) {
+        const name = node.rawName
+        if (isAllowedTarget(name)) {
+          return
+        }
+
+        context.report({
+          node,
+          loc: node.loc,
+          messageId: 'invalidName',
+          data: {
+            name
+          }
+        })
+      }
+    })
+  }
+}
diff --git a/lib/rules/return-in-computed-property.js b/lib/rules/return-in-computed-property.js
index 5c29aa440..0728d0c5d 100644
--- a/lib/rules/return-in-computed-property.js
+++ b/lib/rules/return-in-computed-property.js
@@ -3,27 +3,23 @@
  * @author Armano
  */
 'use strict'
-const { ReferenceTracker } = require('eslint-utils')
+const { ReferenceTracker } = require('@eslint-community/eslint-utils')
 const utils = require('../utils')
 
 /**
  * @typedef {import('../utils').ComponentComputedProperty} ComponentComputedProperty
  */
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
     docs: {
       description:
         'enforce that a return statement is present in computed property',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/return-in-computed-property.html'
     },
-    fixable: null, // or "code" or "whitespace"
+    fixable: null,
     schema: [
       {
         type: 'object',
@@ -34,7 +30,13 @@ module.exports = {
         },
         additionalProperties: false
       }
-    ]
+    ],
+    messages: {
+      expectedReturnInFunction:
+        'Expected to return a value in computed function.',
+      expectedReturnInProperty:
+        'Expected to return a value in "{{name}}" computed property.'
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
@@ -50,22 +52,21 @@ module.exports = {
     /** @type {(FunctionExpression | ArrowFunctionExpression)[]} */
     const computedFunctionNodes = []
 
-    // ----------------------------------------------------------------------
-    // Public
-    // ----------------------------------------------------------------------
-
     return Object.assign(
       {
-        Program() {
-          const tracker = new ReferenceTracker(context.getScope())
-          const traceMap = utils.createCompositionApiTraceMap({
-            [ReferenceTracker.ESM]: true,
+        /** @param {Program} program */
+        Program(program) {
+          const tracker = new ReferenceTracker(utils.getScope(context, program))
+          const map = {
             computed: {
               [ReferenceTracker.CALL]: true
             }
-          })
+          }
 
-          for (const { node } of tracker.iterateEsmReferences(traceMap)) {
+          for (const { node } of utils.iterateReferencesTraceMap(
+            tracker,
+            map
+          )) {
             if (node.type !== 'CallExpression') {
               continue
             }
@@ -91,8 +92,7 @@ module.exports = {
             if (cp.value && cp.value.parent === node) {
               context.report({
                 node,
-                message:
-                  'Expected to return a value in "{{name}}" computed property.',
+                messageId: 'expectedReturnInProperty',
                 data: {
                   name: cp.key || 'Unknown'
                 }
@@ -103,7 +103,7 @@ module.exports = {
             if (cf === node) {
               context.report({
                 node,
-                message: 'Expected to return a value in computed function.'
+                messageId: 'expectedReturnInFunction'
               })
             }
           }
diff --git a/lib/rules/return-in-emits-validator.js b/lib/rules/return-in-emits-validator.js
index 91c9e6675..8989753b3 100644
--- a/lib/rules/return-in-emits-validator.js
+++ b/lib/rules/return-in-emits-validator.js
@@ -31,31 +31,29 @@ function isFalsy(node) {
     (node.name === 'undefined' || node.name === 'NaN')
   )
 }
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
     docs: {
       description:
         'enforce that a return statement is present in emits validator',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/return-in-emits-validator.html'
     },
-    fixable: null, // or "code" or "whitespace"
-    schema: []
+    fixable: null,
+    schema: [],
+    messages: {
+      expectedTrue:
+        'Expected to return a true value in "{{name}}" emits validator.',
+      expectedBoolean:
+        'Expected to return a boolean value in "{{name}}" emits validator.'
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
     /** @type {ComponentObjectEmit[]} */
     const emitsValidators = []
 
-    // ----------------------------------------------------------------------
-    // Public
-    // ----------------------------------------------------------------------
-
     /**
      * @typedef {object} ScopeStack
      * @property {ScopeStack | null} upper
@@ -73,7 +71,7 @@ module.exports = {
      */
     function processEmits(emits) {
       for (const emit of emits) {
-        if (!emit.value) {
+        if (emit.type !== 'object' || !emit.value) {
           continue
         }
         if (
@@ -135,9 +133,9 @@ module.exports = {
             if (emits) {
               context.report({
                 node,
-                message: scopeStack.hasReturnValue
-                  ? 'Expected to return a true value in "{{name}}" emits validator.'
-                  : 'Expected to return a boolean value in "{{name}}" emits validator.',
+                messageId: scopeStack.hasReturnValue
+                  ? 'expectedTrue'
+                  : 'expectedBoolean',
                 data: {
                   name: emits.emitName || 'Unknown'
                 }
diff --git a/lib/rules/script-indent.js b/lib/rules/script-indent.js
index 6a85e7114..14f8271a6 100644
--- a/lib/rules/script-indent.js
+++ b/lib/rules/script-indent.js
@@ -4,17 +4,10 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const indentCommon = require('../utils/indent-common')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
+  // eslint-disable-next-line eslint-plugin/prefer-message-ids
   meta: {
     type: 'layout',
     docs: {
@@ -22,10 +15,11 @@ module.exports = {
       categories: undefined,
       url: 'https://eslint.vuejs.org/rules/script-indent.html'
     },
+    // eslint-disable-next-line eslint-plugin/require-meta-fixable -- fixer is not recognized
     fixable: 'whitespace',
     schema: [
       {
-        anyOf: [{ type: 'integer', minimum: 1 }, { enum: ['tab'] }]
+        oneOf: [{ type: 'integer', minimum: 1 }, { enum: ['tab'] }]
       },
       {
         type: 'object',
@@ -38,7 +32,7 @@ module.exports = {
               allOf: [
                 { type: 'string' },
                 { not: { type: 'string', pattern: ':exit$' } },
-                { not: { type: 'string', pattern: '^\\s*$' } }
+                { not: { type: 'string', pattern: String.raw`^\s*$` } }
               ]
             },
             uniqueItems: true,
@@ -51,6 +45,6 @@ module.exports = {
   },
   /** @param {RuleContext} context */
   create(context) {
-    return indentCommon.defineVisitor(context, context.getSourceCode(), {})
+    return indentCommon.defineVisitor(context, context.sourceCode, {})
   }
 }
diff --git a/lib/rules/script-setup-uses-vars.js b/lib/rules/script-setup-uses-vars.js
deleted file mode 100644
index 40b8e54ac..000000000
--- a/lib/rules/script-setup-uses-vars.js
+++ /dev/null
@@ -1,144 +0,0 @@
-/**
- * @author Yosuke Ota
- * See LICENSE file in root directory for full license.
- */
-'use strict'
-
-const { getStyleVariablesContext } = require('../utils/style-variables')
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const utils = require('../utils')
-const casing = require('../utils/casing')
-
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
-/**
- * `casing.camelCase()` converts the beginning to lowercase,
- * but does not convert the case of the beginning character when converting with Vue3.
- * @see https://github.com/vuejs/vue-next/blob/2749c15170ad4913e6530a257db485d4e7ed2283/packages/shared/src/index.ts#L116
- * @param {string} str
- */
-function camelize(str) {
-  return str.replace(/-(\w)/g, (_, c) => (c ? c.toUpperCase() : ''))
-}
-
-module.exports = {
-  meta: {
-    type: 'problem',
-    docs: {
-      description:
-        'prevent `<script setup>` variables used in `<template>` to be marked as unused', // eslint-disable-line eslint-plugin/require-meta-docs-description
-      categories: undefined,
-      url: 'https://eslint.vuejs.org/rules/script-setup-uses-vars.html'
-    },
-    deprecated: true,
-    schema: []
-  },
-  /**
-   * @param {RuleContext} context - The rule context.
-   * @returns {RuleListener} AST event handlers.
-   */
-  create(context) {
-    if (!utils.isScriptSetup(context)) {
-      return {}
-    }
-    /** @type {Set<string>} */
-    const scriptVariableNames = new Set()
-    const globalScope = context.getSourceCode().scopeManager.globalScope
-    if (globalScope) {
-      for (const variable of globalScope.variables) {
-        scriptVariableNames.add(variable.name)
-      }
-      const moduleScope = globalScope.childScopes.find(
-        (scope) => scope.type === 'module'
-      )
-      for (const variable of (moduleScope && moduleScope.variables) || []) {
-        scriptVariableNames.add(variable.name)
-      }
-    }
-
-    /**
-     * @see https://github.com/vuejs/vue-next/blob/2749c15170ad4913e6530a257db485d4e7ed2283/packages/compiler-core/src/transforms/transformElement.ts#L333
-     * @param {string} name
-     */
-    function markSetupReferenceVariableAsUsed(name) {
-      if (scriptVariableNames.has(name)) {
-        context.markVariableAsUsed(name)
-        return true
-      }
-      const camelName = camelize(name)
-      if (scriptVariableNames.has(camelName)) {
-        context.markVariableAsUsed(camelName)
-        return true
-      }
-      const pascalName = casing.capitalize(camelName)
-      if (scriptVariableNames.has(pascalName)) {
-        context.markVariableAsUsed(pascalName)
-        return true
-      }
-      return false
-    }
-
-    return utils.defineTemplateBodyVisitor(
-      context,
-      {
-        VExpressionContainer(node) {
-          for (const ref of node.references.filter(
-            (ref) => ref.variable == null
-          )) {
-            context.markVariableAsUsed(ref.id.name)
-          }
-        },
-        VElement(node) {
-          if (
-            (!utils.isHtmlElementNode(node) && !utils.isSvgElementNode(node)) ||
-            (node.rawName === node.name &&
-              (utils.isHtmlWellKnownElementName(node.rawName) ||
-                utils.isSvgWellKnownElementName(node.rawName))) ||
-            utils.isBuiltInComponentName(node.rawName)
-          ) {
-            return
-          }
-          if (!markSetupReferenceVariableAsUsed(node.rawName)) {
-            // Check namespace
-            // https://github.com/vuejs/vue-next/blob/2749c15170ad4913e6530a257db485d4e7ed2283/packages/compiler-core/src/transforms/transformElement.ts#L304
-            const dotIndex = node.rawName.indexOf('.')
-            if (dotIndex > 0) {
-              markSetupReferenceVariableAsUsed(node.rawName.slice(0, dotIndex))
-            }
-          }
-        },
-        /** @param {VDirective} node */
-        'VAttribute[directive=true]'(node) {
-          if (utils.isBuiltInDirectiveName(node.key.name.name)) {
-            return
-          }
-          markSetupReferenceVariableAsUsed(`v-${node.key.name.rawName}`)
-        },
-        /** @param {VAttribute} node */
-        'VAttribute[directive=false]'(node) {
-          if (node.key.name === 'ref' && node.value) {
-            context.markVariableAsUsed(node.value.value)
-          }
-        }
-      },
-      {
-        Program() {
-          const styleVars = getStyleVariablesContext(context)
-          if (styleVars) {
-            for (const ref of styleVars.references) {
-              context.markVariableAsUsed(ref.id.name)
-            }
-          }
-        }
-      },
-      {
-        templateBodyTriggerSelector: 'Program'
-      }
-    )
-  }
-}
diff --git a/lib/rules/singleline-html-element-content-newline.js b/lib/rules/singleline-html-element-content-newline.js
index 3bf124fe1..267d240a4 100644
--- a/lib/rules/singleline-html-element-content-newline.js
+++ b/lib/rules/singleline-html-element-content-newline.js
@@ -4,18 +4,10 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 const casing = require('../utils/casing')
 const INLINE_ELEMENTS = require('../utils/inline-non-void-elements.json')
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 /**
  * @param {VElement & { endTag: VEndTag } } element
  */
@@ -30,6 +22,7 @@ function parseOptions(options) {
   return Object.assign(
     {
       ignores: ['pre', 'textarea', ...INLINE_ELEMENTS],
+      externalIgnores: [],
       ignoreWhenNoAttributes: true,
       ignoreWhenEmpty: true
     },
@@ -50,17 +43,13 @@ function isEmpty(node, sourceCode) {
   return sourceCode.text.slice(start, end).trim() === ''
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'layout',
     docs: {
       description:
         'require a line break before and after the contents of a singleline element',
-      categories: ['vue3-strongly-recommended', 'strongly-recommended'],
+      categories: ['vue3-strongly-recommended', 'vue2-strongly-recommended'],
       url: 'https://eslint.vuejs.org/rules/singleline-html-element-content-newline.html'
     },
     fixable: 'whitespace',
@@ -79,6 +68,12 @@ module.exports = {
             items: { type: 'string' },
             uniqueItems: true,
             additionalItems: false
+          },
+          externalIgnores: {
+            type: 'array',
+            items: { type: 'string' },
+            uniqueItems: true,
+            additionalItems: false
           }
         },
         additionalProperties: false
@@ -94,13 +89,13 @@ module.exports = {
   /** @param {RuleContext} context */
   create(context) {
     const options = parseOptions(context.options[0])
-    const ignores = options.ignores
+    const ignores = new Set([...options.ignores, ...options.externalIgnores])
     const ignoreWhenNoAttributes = options.ignoreWhenNoAttributes
     const ignoreWhenEmpty = options.ignoreWhenEmpty
+    const sourceCode = context.sourceCode
     const template =
-      context.parserServices.getTemplateBodyTokenStore &&
-      context.parserServices.getTemplateBodyTokenStore()
-    const sourceCode = context.getSourceCode()
+      sourceCode.parserServices.getTemplateBodyTokenStore &&
+      sourceCode.parserServices.getTemplateBodyTokenStore()
 
     /** @type {VElement | null} */
     let inIgnoreElement = null
@@ -108,9 +103,9 @@ module.exports = {
     /** @param {VElement} node */
     function isIgnoredElement(node) {
       return (
-        ignores.includes(node.name) ||
-        ignores.includes(casing.pascalCase(node.rawName)) ||
-        ignores.includes(casing.kebabCase(node.rawName))
+        ignores.has(node.name) ||
+        ignores.has(casing.pascalCase(node.rawName)) ||
+        ignores.has(casing.kebabCase(node.rawName))
       )
     }
 
diff --git a/lib/rules/slot-name-casing.js b/lib/rules/slot-name-casing.js
new file mode 100644
index 000000000..6d98d8d82
--- /dev/null
+++ b/lib/rules/slot-name-casing.js
@@ -0,0 +1,82 @@
+/**
+ * @author Wayne Zhang
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+const casing = require('../utils/casing')
+
+/**
+ * @typedef { 'camelCase' | 'kebab-case' | 'singleword' } OptionType
+ * @typedef { (str: string) => boolean } CheckerType
+ */
+
+/**
+ * Checks whether the given string is a single word.
+ * @param {string} str
+ * @return {boolean}
+ */
+function isSingleWord(str) {
+  return /^[a-z]+$/u.test(str)
+}
+
+/** @type {OptionType[]} */
+const allowedCaseOptions = ['camelCase', 'kebab-case', 'singleword']
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'enforce specific casing for slot names',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/slot-name-casing.html'
+    },
+    fixable: null,
+    schema: [
+      {
+        enum: allowedCaseOptions
+      }
+    ],
+    messages: {
+      invalidCase: 'Slot name "{{name}}" is not {{caseType}}.'
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    const option = context.options[0]
+
+    /** @type {OptionType} */
+    const caseType = allowedCaseOptions.includes(option) ? option : 'camelCase'
+
+    /** @type {CheckerType} */
+    const checker =
+      caseType === 'singleword' ? isSingleWord : casing.getChecker(caseType)
+
+    /** @param {VAttribute} node */
+    function processSlotNode(node) {
+      const name = node.value?.value
+      if (name && !checker(name)) {
+        context.report({
+          node,
+          loc: node.loc,
+          messageId: 'invalidCase',
+          data: {
+            name,
+            caseType
+          }
+        })
+      }
+    }
+
+    return utils.defineTemplateBodyVisitor(context, {
+      /** @param {VElement} node */
+      "VElement[name='slot']"(node) {
+        const slotName = utils.getAttribute(node, 'name')
+        if (slotName) {
+          processSlotNode(slotName)
+        }
+      }
+    })
+  }
+}
diff --git a/lib/rules/sort-keys.js b/lib/rules/sort-keys.js
index 320d74f13..601c8e1d4 100644
--- a/lib/rules/sort-keys.js
+++ b/lib/rules/sort-keys.js
@@ -5,17 +5,9 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const naturalCompare = require('natural-compare')
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 /**
  * Gets the property name of the given `Property` node.
  *
@@ -72,10 +64,6 @@ const isValidOrders = {
   }
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'suggestion',
@@ -83,7 +71,6 @@ module.exports = {
       description:
         'enforce sort-keys in a manner that is compatible with order-in-components',
       categories: null,
-      recommended: false,
       url: 'https://eslint.vuejs.org/rules/sort-keys.html'
     },
     fixable: null,
@@ -95,8 +82,7 @@ module.exports = {
         type: 'object',
         properties: {
           caseSensitive: {
-            type: 'boolean',
-            default: true
+            type: 'boolean'
           },
           ignoreChildrenOf: {
             type: 'array'
@@ -106,16 +92,10 @@ module.exports = {
           },
           minKeys: {
             type: 'integer',
-            minimum: 2,
-            default: 2
+            minimum: 2
           },
           natural: {
-            type: 'boolean',
-            default: false
-          },
-          runOutsideVue: {
-            type: 'boolean',
-            default: true
+            type: 'boolean'
           }
         },
         additionalProperties: false
@@ -150,7 +130,7 @@ module.exports = {
       (options && options.ignoreChildrenOf) || ['model']
     )
     const insensitive = options && options.caseSensitive === false
-    const minKeys = options && options.minKeys
+    const minKeys = options?.minKeys ?? 2
     const natural = options && options.natural
     const isValidOrder =
       isValidOrders[order + (insensitive ? 'I' : '') + (natural ? 'N' : '')]
diff --git a/lib/rules/space-in-parens.js b/lib/rules/space-in-parens.js
index 3a9a7e0dc..0d8791421 100644
--- a/lib/rules/space-in-parens.js
+++ b/lib/rules/space-in-parens.js
@@ -3,10 +3,10 @@
  */
 'use strict'
 
-const { wrapCoreRule } = require('../utils')
+const { wrapStylisticOrCoreRule } = require('../utils')
 
-// eslint-disable-next-line no-invalid-meta, no-invalid-meta-docs-categories
-module.exports = wrapCoreRule('space-in-parens', {
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = wrapStylisticOrCoreRule('space-in-parens', {
   skipDynamicArguments: true,
   skipDynamicArgumentsReport: true,
   applyDocument: true
diff --git a/lib/rules/space-infix-ops.js b/lib/rules/space-infix-ops.js
index dd0a8af26..0dc858bbb 100644
--- a/lib/rules/space-infix-ops.js
+++ b/lib/rules/space-infix-ops.js
@@ -3,10 +3,10 @@
  */
 'use strict'
 
-const { wrapCoreRule } = require('../utils')
+const { wrapStylisticOrCoreRule } = require('../utils')
 
-// eslint-disable-next-line no-invalid-meta, no-invalid-meta-docs-categories
-module.exports = wrapCoreRule('space-infix-ops', {
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = wrapStylisticOrCoreRule('space-infix-ops', {
   skipDynamicArguments: true,
   applyDocument: true
 })
diff --git a/lib/rules/space-unary-ops.js b/lib/rules/space-unary-ops.js
index e3ece4c2f..a4e7847e2 100644
--- a/lib/rules/space-unary-ops.js
+++ b/lib/rules/space-unary-ops.js
@@ -3,10 +3,10 @@
  */
 'use strict'
 
-const { wrapCoreRule } = require('../utils')
+const { wrapStylisticOrCoreRule } = require('../utils')
 
-// eslint-disable-next-line no-invalid-meta, no-invalid-meta-docs-categories
-module.exports = wrapCoreRule('space-unary-ops', {
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = wrapStylisticOrCoreRule('space-unary-ops', {
   skipDynamicArguments: true,
   applyDocument: true
 })
diff --git a/lib/rules/static-class-names-order.js b/lib/rules/static-class-names-order.js
index 3e5e9a631..741f6802d 100644
--- a/lib/rules/static-class-names-order.js
+++ b/lib/rules/static-class-names-order.js
@@ -4,15 +4,8 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const { defineTemplateBodyVisitor } = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
 module.exports = {
   meta: {
     type: 'suggestion',
@@ -22,7 +15,10 @@ module.exports = {
       categories: undefined
     },
     fixable: 'code',
-    schema: []
+    schema: [],
+    messages: {
+      shouldBeOrdered: 'Classes should be ordered alphabetically.'
+    }
   },
   /** @param {RuleContext} context */
   create: (context) =>
@@ -51,7 +47,7 @@ module.exports = {
           context.report({
             node,
             loc: node.loc,
-            message: 'Classes should be ordered alphabetically.',
+            messageId: 'shouldBeOrdered',
             fix: (fixer) => fixer.replaceText(value, `"${classListSorted}"`)
           })
         }
diff --git a/lib/rules/syntaxes/define-model.js b/lib/rules/syntaxes/define-model.js
new file mode 100644
index 000000000..188aae52e
--- /dev/null
+++ b/lib/rules/syntaxes/define-model.js
@@ -0,0 +1,22 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../../utils/index')
+
+module.exports = {
+  supported: '>=3.4.0',
+  /** @param {RuleContext} context @returns {RuleListener} */
+  createScriptVisitor(context) {
+    return utils.defineScriptSetupVisitor(context, {
+      onDefineModelEnter(node) {
+        context.report({
+          node,
+          messageId: 'forbiddenDefineModel'
+        })
+      }
+    })
+  }
+}
diff --git a/lib/rules/syntaxes/define-options.js b/lib/rules/syntaxes/define-options.js
new file mode 100644
index 000000000..75d245144
--- /dev/null
+++ b/lib/rules/syntaxes/define-options.js
@@ -0,0 +1,74 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../../utils/index')
+
+module.exports = {
+  supported: '>=3.3.0',
+  /** @param {RuleContext} context @returns {RuleListener} */
+  createScriptVisitor(context) {
+    const sourceCode = context.sourceCode
+    return utils.defineScriptSetupVisitor(context, {
+      onDefineOptionsEnter(node) {
+        context.report({
+          node,
+          messageId: 'forbiddenDefineOptions',
+          fix(fixer) {
+            return fix(fixer, node)
+          }
+        })
+      }
+    })
+
+    /**
+     * @param {RuleFixer} fixer
+     * @param {CallExpression} node defineOptions() node
+     */
+    function fix(fixer, node) {
+      if (node.arguments.length === 0) return null
+      const scriptSetup = utils.getScriptSetupElement(context)
+      if (!scriptSetup) return null
+      if (
+        scriptSetup.parent.children
+          .filter(utils.isVElement)
+          .some(
+            (node) =>
+              node.name === 'script' && !utils.hasAttribute(node, 'setup')
+          )
+      ) {
+        // has `<script>`
+        return null
+      }
+
+      // Find defineOptions statement
+      /** @type {ASTNode} */
+      let statement = node
+      while (statement.parent && statement.parent.type !== 'Program') {
+        statement = statement.parent
+      }
+      // Calc remove range
+      /** @type {Range} */
+      const removeRange = [...statement.range]
+      if (
+        sourceCode.lines[statement.loc.start.line - 1]
+          .slice(0, statement.loc.start.column)
+          .trim() === ''
+      ) {
+        removeRange[0] -= statement.loc.start.column
+      }
+
+      return [
+        fixer.insertTextBefore(
+          scriptSetup,
+          `<script>\nexport default ${sourceCode.getText(
+            node.arguments[0]
+          )}\n</script>\n`
+        ),
+        fixer.removeRange(removeRange)
+      ]
+    }
+  }
+}
diff --git a/lib/rules/syntaxes/define-slots.js b/lib/rules/syntaxes/define-slots.js
new file mode 100644
index 000000000..450ec3e89
--- /dev/null
+++ b/lib/rules/syntaxes/define-slots.js
@@ -0,0 +1,22 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../../utils/index')
+
+module.exports = {
+  supported: '>=3.3.0',
+  /** @param {RuleContext} context @returns {RuleListener} */
+  createScriptVisitor(context) {
+    return utils.defineScriptSetupVisitor(context, {
+      onDefineSlotsEnter(node) {
+        context.report({
+          node,
+          messageId: 'forbiddenDefineSlots'
+        })
+      }
+    })
+  }
+}
diff --git a/lib/rules/syntaxes/script-setup.js b/lib/rules/syntaxes/script-setup.js
index ef395d5ed..7c0538b3d 100644
--- a/lib/rules/syntaxes/script-setup.js
+++ b/lib/rules/syntaxes/script-setup.js
@@ -7,7 +7,7 @@
 const utils = require('../../utils')
 
 module.exports = {
-  supported: '>=3.0.0',
+  supported: '>=2.7.0',
   /** @param {RuleContext} context @returns {TemplateListener} */
   createScriptVisitor(context) {
     const scriptSetup = utils.getScriptSetupElement(context)
diff --git a/lib/rules/syntaxes/slot-attribute.js b/lib/rules/syntaxes/slot-attribute.js
index 3292cd9de..70c97bb41 100644
--- a/lib/rules/syntaxes/slot-attribute.js
+++ b/lib/rules/syntaxes/slot-attribute.js
@@ -5,16 +5,25 @@
 'use strict'
 
 const canConvertToVSlot = require('./utils/can-convert-to-v-slot')
+const regexp = require('../../utils/regexp')
+const casing = require('../../utils/casing')
+const { isVElement } = require('../../utils')
 
 module.exports = {
   deprecated: '2.6.0',
   supported: '<3.0.0',
   /** @param {RuleContext} context @returns {TemplateListener} */
   createTemplateBodyVisitor(context) {
-    const sourceCode = context.getSourceCode()
+    /** @type {{ ignore: string[], ignoreParents: string[] }} */
+    const options = context.options[0] || {}
+    const { ignore = [], ignoreParents = [] } = options
+    const isAnyIgnored = regexp.toRegExpGroupMatcher(ignore)
+    const isParentIgnored = regexp.toRegExpGroupMatcher(ignoreParents)
+
+    const sourceCode = context.sourceCode
     const tokenStore =
-      context.parserServices.getTemplateBodyTokenStore &&
-      context.parserServices.getTemplateBodyTokenStore()
+      sourceCode.parserServices.getTemplateBodyTokenStore &&
+      sourceCode.parserServices.getTemplateBodyTokenStore()
 
     /**
      * Checks whether the given node can convert to the `v-slot`.
@@ -51,10 +60,8 @@ module.exports = {
         // parse error or empty expression
         return false
       }
-      const slotName = sourceCode.getText(slotAttr.value.expression).trim()
-      // If non-Latin characters are included it can not be converted.
-      // It does not check the space only because `a>b?c:d` should be rejected.
-      return !/[^a-z]/i.test(slotName)
+
+      return slotAttr.value.expression.type === 'Identifier'
     }
 
     /**
@@ -66,8 +73,8 @@ module.exports = {
      * @returns {IterableIterator<Fix>} fix data
      */
     function* fixSlotToVSlot(fixer, slotAttr, slotName, vBind) {
-      const element = slotAttr.parent
-      const scopeAttr = element.attributes.find(
+      const startTag = slotAttr.parent
+      const scopeAttr = startTag.attributes.find(
         (attr) =>
           attr.directive === true &&
           attr.key.name &&
@@ -84,9 +91,32 @@ module.exports = {
           : ''
 
       const replaceText = `v-slot${nameArgument}${scopeValue}`
-      yield fixer.replaceText(slotAttr || scopeAttr, replaceText)
-      if (slotAttr && scopeAttr) {
-        yield fixer.remove(scopeAttr)
+
+      const element = startTag.parent
+      if (element.name === 'template') {
+        yield fixer.replaceText(slotAttr || scopeAttr, replaceText)
+        if (slotAttr && scopeAttr) {
+          yield fixer.remove(scopeAttr)
+        }
+      } else {
+        yield fixer.remove(slotAttr || scopeAttr)
+        if (slotAttr && scopeAttr) {
+          yield fixer.remove(scopeAttr)
+        }
+
+        const vFor = startTag.attributes.find(
+          (attr) => attr.directive && attr.key.name.name === 'for'
+        )
+        const vForText = vFor ? `${sourceCode.getText(vFor)} ` : ''
+        if (vFor) {
+          yield fixer.remove(vFor)
+        }
+
+        yield fixer.insertTextBefore(
+          element,
+          `<template ${vForText}${replaceText}>\n`
+        )
+        yield fixer.insertTextAfter(element, `\n</template>`)
       }
     }
     /**
@@ -95,6 +125,25 @@ module.exports = {
      * @returns {void}
      */
     function reportSlot(slotAttr) {
+      const component = slotAttr.parent.parent
+      const componentName = component.rawName
+
+      if (
+        isAnyIgnored(
+          componentName,
+          casing.pascalCase(componentName),
+          casing.kebabCase(componentName)
+        )
+      ) {
+        return
+      }
+
+      const parent = component.parent
+      const parentName = isVElement(parent) ? parent.rawName : null
+      if (parentName && isParentIgnored(parentName)) {
+        return
+      }
+
       context.report({
         node: slotAttr.key,
         messageId: 'forbiddenSlotAttribute',
diff --git a/lib/rules/syntaxes/slot-scope-attribute.js b/lib/rules/syntaxes/slot-scope-attribute.js
index 53a54d6de..a5c7c37b4 100644
--- a/lib/rules/syntaxes/slot-scope-attribute.js
+++ b/lib/rules/syntaxes/slot-scope-attribute.js
@@ -16,10 +16,10 @@ module.exports = {
    * @returns {TemplateListener}
    */
   createTemplateBodyVisitor(context, { fixToUpgrade } = {}) {
-    const sourceCode = context.getSourceCode()
+    const sourceCode = context.sourceCode
     const tokenStore =
-      context.parserServices.getTemplateBodyTokenStore &&
-      context.parserServices.getTemplateBodyTokenStore()
+      sourceCode.parserServices.getTemplateBodyTokenStore &&
+      sourceCode.parserServices.getTemplateBodyTokenStore()
 
     /**
      * Checks whether the given node can convert to the `v-slot`.
@@ -62,16 +62,26 @@ module.exports = {
      * Convert to `v-slot`.
      * @param {RuleFixer} fixer fixer
      * @param {VDirective} scopeAttr node of `slot-scope`
-     * @returns {Fix} fix data
+     * @returns {Fix[]} fix data
      */
     function fixSlotScopeToVSlot(fixer, scopeAttr) {
+      const element = scopeAttr.parent.parent
       const scopeValue =
         scopeAttr && scopeAttr.value
           ? `=${sourceCode.getText(scopeAttr.value)}`
           : ''
 
       const replaceText = `v-slot${scopeValue}`
-      return fixer.replaceText(scopeAttr, replaceText)
+      if (element.name === 'template') {
+        return [fixer.replaceText(scopeAttr, replaceText)]
+      } else {
+        const tokenBefore = tokenStore.getTokenBefore(scopeAttr)
+        return [
+          fixer.removeRange([tokenBefore.range[1], scopeAttr.range[1]]),
+          fixer.insertTextBefore(element, `<template ${replaceText}>\n`),
+          fixer.insertTextAfter(element, `\n</template>`)
+        ]
+      }
     }
     /**
      * Reports `slot-scope` node
diff --git a/lib/rules/syntaxes/style-css-vars-injection.js b/lib/rules/syntaxes/style-css-vars-injection.js
index 1337cd0df..03608b5e1 100644
--- a/lib/rules/syntaxes/style-css-vars-injection.js
+++ b/lib/rules/syntaxes/style-css-vars-injection.js
@@ -7,7 +7,7 @@
 const { getStyleVariablesContext } = require('../../utils/style-variables')
 
 module.exports = {
-  supported: '>=3.0.3',
+  supported: '>=3.0.3 || >=2.7.0 <3.0.0',
   /** @param {RuleContext} context @returns {TemplateListener} */
   createScriptVisitor(context) {
     const styleVars = getStyleVariablesContext(context)
diff --git a/lib/rules/syntaxes/utils/can-convert-to-v-slot.js b/lib/rules/syntaxes/utils/can-convert-to-v-slot.js
index 69c26cf43..e0e51053d 100644
--- a/lib/rules/syntaxes/utils/can-convert-to-v-slot.js
+++ b/lib/rules/syntaxes/utils/can-convert-to-v-slot.js
@@ -25,13 +25,11 @@ const utils = require('../../../utils')
  * @param {ParserServices.TokenStore} tokenStore
  */
 module.exports = function canConvertToVSlot(element, sourceCode, tokenStore) {
-  if (element.name !== 'template') {
-    return false
-  }
   const ownerElement = element.parent
   if (
     ownerElement.type === 'VDocumentFragment' ||
-    !utils.isCustomComponent(ownerElement)
+    !utils.isCustomComponent(ownerElement) ||
+    ownerElement.name === 'component'
   ) {
     return false
   }
diff --git a/lib/rules/syntaxes/v-bind-same-name-shorthand.js b/lib/rules/syntaxes/v-bind-same-name-shorthand.js
new file mode 100644
index 000000000..d9e7a388c
--- /dev/null
+++ b/lib/rules/syntaxes/v-bind-same-name-shorthand.js
@@ -0,0 +1,34 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../../utils')
+
+module.exports = {
+  supported: '>=3.4.0',
+  /** @param {RuleContext} context @returns {TemplateListener} */
+  createTemplateBodyVisitor(context) {
+    /**
+     * Verify the directive node
+     * @param {VDirective} node The directive node to check
+     * @returns {void}
+     */
+    function checkDirective(node) {
+      if (utils.isVBindSameNameShorthand(node)) {
+        context.report({
+          node,
+          messageId: 'forbiddenVBindSameNameShorthand',
+          // fix to use `:x="x"` (downgrade)
+          fix: (fixer) =>
+            fixer.insertTextAfter(node, `="${node.value.expression.name}"`)
+        })
+      }
+    }
+
+    return {
+      "VAttribute[directive=true][key.name.name='bind']": checkDirective
+    }
+  }
+}
diff --git a/lib/rules/syntaxes/v-model-custom-modifiers.js b/lib/rules/syntaxes/v-model-custom-modifiers.js
index d11116b2d..4b17b47d6 100644
--- a/lib/rules/syntaxes/v-model-custom-modifiers.js
+++ b/lib/rules/syntaxes/v-model-custom-modifiers.js
@@ -4,10 +4,6 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 const BUILTIN_MODIFIERS = new Set(['lazy', 'number', 'trim'])
 
 module.exports = {
diff --git a/lib/rules/syntaxes/v-slot.js b/lib/rules/syntaxes/v-slot.js
index a6a4b4ebd..09f6c53db 100644
--- a/lib/rules/syntaxes/v-slot.js
+++ b/lib/rules/syntaxes/v-slot.js
@@ -17,7 +17,7 @@ module.exports = {
   supported: '>=2.6.0',
   /** @param {RuleContext} context @returns {TemplateListener} */
   createTemplateBodyVisitor(context) {
-    const sourceCode = context.getSourceCode()
+    const sourceCode = context.sourceCode
 
     /**
      * Convert to `slot` and `slot-scope`.
diff --git a/lib/rules/template-curly-spacing.js b/lib/rules/template-curly-spacing.js
index 549c790b6..e215108e9 100644
--- a/lib/rules/template-curly-spacing.js
+++ b/lib/rules/template-curly-spacing.js
@@ -3,10 +3,10 @@
  */
 'use strict'
 
-const { wrapCoreRule } = require('../utils')
+const { wrapStylisticOrCoreRule } = require('../utils')
 
-// eslint-disable-next-line no-invalid-meta, no-invalid-meta-docs-categories
-module.exports = wrapCoreRule('template-curly-spacing', {
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = wrapStylisticOrCoreRule('template-curly-spacing', {
   skipDynamicArguments: true,
   applyDocument: true
 })
diff --git a/lib/rules/this-in-template.js b/lib/rules/this-in-template.js
index cd03c2106..a664a8edf 100644
--- a/lib/rules/this-in-template.js
+++ b/lib/rules/this-in-template.js
@@ -4,23 +4,15 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 const RESERVED_NAMES = new Set(require('../utils/js-reserved.json'))
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'suggestion',
     docs: {
       description: 'disallow usage of `this` in template',
-      categories: ['vue3-recommended', 'recommended'],
+      categories: ['vue3-recommended', 'vue2-recommended'],
       url: 'https://eslint.vuejs.org/rules/this-in-template.html'
     },
     fixable: 'code',
@@ -28,7 +20,11 @@ module.exports = {
       {
         enum: ['always', 'never']
       }
-    ]
+    ],
+    messages: {
+      unexpected: "Unexpected usage of 'this'.",
+      expected: "Expected 'this'."
+    }
   },
 
   /**
@@ -38,7 +34,7 @@ module.exports = {
    * @returns {Object} AST event handlers.
    */
   create(context) {
-    const options = context.options[0] !== 'always' ? 'never' : 'always'
+    const options = context.options[0] === 'always' ? 'always' : 'never'
     /**
      * @typedef {object} ScopeStack
      * @property {ScopeStack | null} parent
@@ -95,7 +91,7 @@ module.exports = {
                   // node.parent should be some code like `this.test`, `this?.['result']`
                   return fixer.replaceText(node.parent, propertyName)
                 },
-                message: "Unexpected usage of 'this'."
+                messageId: 'unexpected'
               })
             }
           }
@@ -120,7 +116,7 @@ module.exports = {
                     context.report({
                       node: reference.id,
                       loc: reference.id.loc,
-                      message: "Expected 'this'.",
+                      messageId: 'expected',
                       fix(fixer) {
                         return fixer.insertTextBefore(reference.id, 'this.')
                       }
diff --git a/lib/rules/use-v-on-exact.js b/lib/rules/use-v-on-exact.js
index 75c72c12d..cfce10fee 100644
--- a/lib/rules/use-v-on-exact.js
+++ b/lib/rules/use-v-on-exact.js
@@ -4,10 +4,6 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 /**
  * @typedef { {name: string, node: VDirectiveKey, modifiers: string[] } } EventDirective
  */
@@ -25,10 +21,6 @@ const GLOBAL_MODIFIERS = new Set([
   'native'
 ])
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 /**
  * Finds and returns all keys for event directives
  *
@@ -167,20 +159,19 @@ function findConflictedEvents(events) {
   return conflictedEvents
 }
 
-// ------------------------------------------------------------------------------
-// Rule details
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'suggestion',
     docs: {
       description: 'enforce usage of `exact` modifier on `v-on`',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/use-v-on-exact.html'
     },
     fixable: null,
-    schema: []
+    schema: [],
+    messages: {
+      considerExact: "Consider to use '.exact' modifier."
+    }
   },
 
   /**
@@ -190,7 +181,7 @@ module.exports = {
    * @returns {Object} AST event handlers.
    */
   create(context) {
-    const sourceCode = context.getSourceCode()
+    const sourceCode = context.sourceCode
 
     return utils.defineTemplateBodyVisitor(context, {
       /** @param {VStartTag} node */
@@ -221,7 +212,7 @@ module.exports = {
             context.report({
               node: e.node,
               loc: e.node.loc,
-              message: "Consider to use '.exact' modifier."
+              messageId: 'considerExact'
             })
           }
         }
diff --git a/lib/rules/v-bind-style.js b/lib/rules/v-bind-style.js
index 4e3c638be..752a8fdf0 100644
--- a/lib/rules/v-bind-style.js
+++ b/lib/rules/v-bind-style.js
@@ -5,74 +5,166 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
+const casing = require('../utils/casing')
+
+/**
+ * @typedef { VDirectiveKey & { name: VIdentifier & { name: 'bind' }, argument: VExpressionContainer | VIdentifier } } VBindDirectiveKey
+ * @typedef { VDirective & { key: VBindDirectiveKey } } VBindDirective
+ */
+
+/**
+ * @param {string} name
+ * @returns {string}
+ */
+function kebabCaseToCamelCase(name) {
+  return casing.isKebabCase(name) ? casing.camelCase(name) : name
+}
+
+/**
+ * @param {VBindDirective} node
+ * @returns {boolean}
+ */
+function isSameName(node) {
+  const attrName =
+    node.key.argument.type === 'VIdentifier' ? node.key.argument.rawName : null
+  const valueName =
+    node.value?.expression?.type === 'Identifier'
+      ? node.value.expression.name
+      : null
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
+  if (!attrName || !valueName) return false
+
+  return kebabCaseToCamelCase(attrName) === kebabCaseToCamelCase(valueName)
+}
+
+/**
+ * @param {VBindDirectiveKey} key
+ * @returns {number}
+ */
+function getCutStart(key) {
+  const modifiers = key.modifiers
+  return modifiers.length > 0
+    ? modifiers[modifiers.length - 1].range[1]
+    : key.argument.range[1]
+}
 
 module.exports = {
   meta: {
     type: 'suggestion',
     docs: {
       description: 'enforce `v-bind` directive style',
-      categories: ['vue3-strongly-recommended', 'strongly-recommended'],
+      categories: ['vue3-strongly-recommended', 'vue2-strongly-recommended'],
       url: 'https://eslint.vuejs.org/rules/v-bind-style.html'
     },
     fixable: 'code',
-    schema: [{ enum: ['shorthand', 'longform'] }]
+    schema: [
+      { enum: ['shorthand', 'longform'] },
+      {
+        type: 'object',
+        properties: {
+          sameNameShorthand: { enum: ['always', 'never', 'ignore'] }
+        },
+        additionalProperties: false
+      }
+    ],
+    messages: {
+      expectedLonghand: "Expected 'v-bind' before ':'.",
+      unexpectedLonghand: "Unexpected 'v-bind' before ':'.",
+      expectedLonghandForProp: "Expected 'v-bind:' instead of '.'.",
+      expectedShorthand: 'Expected same-name shorthand.',
+      unexpectedShorthand: 'Unexpected same-name shorthand.'
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
     const preferShorthand = context.options[0] !== 'longform'
+    /** @type {"always" | "never" | "ignore"} */
+    const sameNameShorthand = context.options[1]?.sameNameShorthand || 'ignore'
 
-    return utils.defineTemplateBodyVisitor(context, {
-      /** @param {VDirective} node */
-      "VAttribute[directive=true][key.name.name='bind'][key.argument!=null]"(
-        node
-      ) {
-        const shorthandProp = node.key.name.rawName === '.'
-        const shorthand = node.key.name.rawName === ':' || shorthandProp
-        if (shorthand === preferShorthand) {
-          return
-        }
+    /** @param {VBindDirective} node */
+    function checkAttributeStyle(node) {
+      const shorthandProp = node.key.name.rawName === '.'
+      const shorthand = node.key.name.rawName === ':' || shorthandProp
+      if (shorthand === preferShorthand) {
+        return
+      }
 
-        let message = "Expected 'v-bind' before ':'."
-        if (preferShorthand) {
-          message = "Unexpected 'v-bind' before ':'."
-        } else if (shorthandProp) {
-          message = "Expected 'v-bind:' instead of '.'."
-        }
+      let messageId = 'expectedLonghand'
+      if (preferShorthand) {
+        messageId = 'unexpectedLonghand'
+      } else if (shorthandProp) {
+        messageId = 'expectedLonghandForProp'
+      }
+
+      context.report({
+        node,
+        loc: node.loc,
+        messageId,
+        *fix(fixer) {
+          if (preferShorthand) {
+            yield fixer.remove(node.key.name)
+          } else {
+            yield fixer.insertTextBefore(node, 'v-bind')
 
-        context.report({
-          node,
-          loc: node.loc,
-          message,
-          *fix(fixer) {
-            if (preferShorthand) {
-              yield fixer.remove(node.key.name)
-            } else {
-              yield fixer.insertTextBefore(node, 'v-bind')
-
-              if (shorthandProp) {
-                // Replace `.` by `:`.
-                yield fixer.replaceText(node.key.name, ':')
-
-                // Insert `.prop` modifier if it doesn't exist.
-                const modifier = node.key.modifiers[0]
-                const isAutoGeneratedPropModifier =
-                  modifier.name === 'prop' && modifier.rawName === ''
-                if (isAutoGeneratedPropModifier) {
-                  yield fixer.insertTextBefore(modifier, '.prop')
-                }
+            if (shorthandProp) {
+              // Replace `.` by `:`.
+              yield fixer.replaceText(node.key.name, ':')
+
+              // Insert `.prop` modifier if it doesn't exist.
+              const modifier = node.key.modifiers[0]
+              const isAutoGeneratedPropModifier =
+                modifier.name === 'prop' && modifier.rawName === ''
+              if (isAutoGeneratedPropModifier) {
+                yield fixer.insertTextBefore(modifier, '.prop')
               }
             }
           }
-        })
+        }
+      })
+    }
+
+    /** @param {VBindDirective} node */
+    function checkAttributeSameName(node) {
+      if (sameNameShorthand === 'ignore' || !isSameName(node)) return
+
+      const preferShorthand = sameNameShorthand === 'always'
+      const isShorthand = utils.isVBindSameNameShorthand(node)
+      if (isShorthand === preferShorthand) {
+        return
+      }
+
+      const messageId = preferShorthand
+        ? 'expectedShorthand'
+        : 'unexpectedShorthand'
+
+      context.report({
+        node,
+        loc: node.loc,
+        messageId,
+        *fix(fixer) {
+          if (preferShorthand) {
+            /** @type {Range} */
+            const valueRange = [getCutStart(node.key), node.range[1]]
+
+            yield fixer.removeRange(valueRange)
+          } else if (node.key.argument.type === 'VIdentifier') {
+            yield fixer.insertTextAfter(
+              node,
+              `="${kebabCaseToCamelCase(node.key.argument.rawName)}"`
+            )
+          }
+        }
+      })
+    }
+
+    return utils.defineTemplateBodyVisitor(context, {
+      /** @param {VBindDirective} node */
+      "VAttribute[directive=true][key.name.name='bind'][key.argument!=null]"(
+        node
+      ) {
+        checkAttributeSameName(node)
+        checkAttributeStyle(node)
       }
     })
   }
diff --git a/lib/rules/v-for-delimiter-style.js b/lib/rules/v-for-delimiter-style.js
index 2dca5eecd..fefdefc12 100644
--- a/lib/rules/v-for-delimiter-style.js
+++ b/lib/rules/v-for-delimiter-style.js
@@ -6,27 +6,22 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'layout',
     docs: {
       description: "enforce `v-for` directive's delimiter style",
       categories: undefined,
-      recommended: false,
       url: 'https://eslint.vuejs.org/rules/v-for-delimiter-style.html'
     },
     fixable: 'code',
-    schema: [{ enum: ['in', 'of'] }]
+    schema: [{ enum: ['in', 'of'] }],
+    messages: {
+      expected:
+        "Expected '{{preferredDelimiter}}' instead of '{{usedDelimiter}}' in 'v-for'."
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
@@ -36,16 +31,17 @@ module.exports = {
     return utils.defineTemplateBodyVisitor(context, {
       /** @param {VForExpression} node */
       VForExpression(node) {
+        const sourceCode = context.sourceCode
         const tokenStore =
-          context.parserServices.getTemplateBodyTokenStore &&
-          context.parserServices.getTemplateBodyTokenStore()
+          sourceCode.parserServices.getTemplateBodyTokenStore &&
+          sourceCode.parserServices.getTemplateBodyTokenStore()
 
         const delimiterToken = /** @type {Token} */ (
           tokenStore.getTokenAfter(
             node.left.length > 0
               ? node.left[node.left.length - 1]
               : tokenStore.getFirstToken(node),
-            (token) => token.type !== 'Punctuator' || token.value !== ')'
+            (token) => token.type !== 'Punctuator'
           )
         )
 
@@ -56,7 +52,7 @@ module.exports = {
         context.report({
           node,
           loc: node.loc,
-          message: `Expected '{{preferredDelimiter}}' instead of '{{usedDelimiter}}' in 'v-for'.`,
+          messageId: 'expected',
           data: {
             preferredDelimiter,
             usedDelimiter: delimiterToken.value
diff --git a/lib/rules/v-if-else-key.js b/lib/rules/v-if-else-key.js
new file mode 100644
index 000000000..d8e913670
--- /dev/null
+++ b/lib/rules/v-if-else-key.js
@@ -0,0 +1,317 @@
+/**
+ * @author Felipe Melendez
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+// =============================================================================
+// Requirements
+// =============================================================================
+
+const utils = require('../utils')
+const casing = require('../utils/casing')
+
+// =============================================================================
+// Rule Helpers
+// =============================================================================
+
+/**
+ * A conditional family is made up of a group of repeated components that are conditionally rendered
+ * using v-if, v-else-if, and v-else.
+ *
+ * @typedef {Object} ConditionalFamily
+ * @property {VElement} if - The node associated with the 'v-if' directive.
+ * @property {VElement[]} elseIf - An array of nodes associated with 'v-else-if' directives.
+ * @property {VElement | null} else - The node associated with the 'v-else' directive, or null if there isn't one.
+ */
+
+/**
+ * Checks if a given node has sibling nodes of the same type that are also conditionally rendered.
+ * This is used to determine if multiple instances of the same component are being conditionally
+ * rendered within the same parent scope.
+ *
+ * @param {VElement} node - The Vue component node to check for conditional rendering siblings.
+ * @param {string} componentName - The name of the component to check for sibling instances.
+ * @returns {boolean} True if there are sibling nodes of the same type and conditionally rendered, false otherwise.
+ */
+const hasConditionalRenderedSiblings = (node, componentName) => {
+  if (!node.parent || node.parent.type !== 'VElement') {
+    return false
+  }
+  return node.parent.children.some(
+    (sibling) =>
+      sibling !== node &&
+      sibling.type === 'VElement' &&
+      sibling.rawName === componentName &&
+      hasConditionalDirective(sibling)
+  )
+}
+
+/**
+ * Checks for the presence of a 'key' attribute in the given node. If the 'key' attribute is missing
+ * and the node is part of a conditional family a report is generated.
+ * The fix proposed adds a unique key based on the component's name and count,
+ * following the format '${kebabCase(componentName)}-${componentCount}', e.g., 'some-component-2'.
+ *
+ * @param {VElement} node - The Vue component node to check for a 'key' attribute.
+ * @param {RuleContext} context - The rule's context object, used for reporting.
+ * @param {string} componentName - Name of the component.
+ * @param {string} uniqueKey - A unique key for the repeated component, used for the fix.
+ * @param {Map<VElement, ConditionalFamily>} conditionalFamilies - Map of conditionally rendered components and their respective conditional directives.
+ */
+const checkForKey = (
+  node,
+  context,
+  componentName,
+  uniqueKey,
+  conditionalFamilies
+) => {
+  if (
+    !node.parent ||
+    node.parent.type !== 'VElement' ||
+    !hasConditionalRenderedSiblings(node, componentName)
+  ) {
+    return
+  }
+
+  const conditionalFamily = conditionalFamilies.get(node.parent)
+
+  if (!conditionalFamily || utils.hasAttribute(node, 'key')) {
+    return
+  }
+
+  const needsKey =
+    conditionalFamily.if === node ||
+    conditionalFamily.else === node ||
+    conditionalFamily.elseIf.includes(node)
+
+  if (needsKey) {
+    context.report({
+      node: node.startTag,
+      loc: node.startTag.loc,
+      messageId: 'requireKey',
+      data: { componentName },
+      fix(fixer) {
+        const afterComponentNamePosition =
+          node.startTag.range[0] + componentName.length + 1
+        return fixer.insertTextBeforeRange(
+          [afterComponentNamePosition, afterComponentNamePosition],
+          ` key="${uniqueKey}"`
+        )
+      }
+    })
+  }
+}
+
+/**
+ * Checks for the presence of conditional directives in the given node.
+ *
+ * @param {VElement} node - The node to check for conditional directives.
+ * @returns {boolean} Returns true if a conditional directive is found in the node or its parents,
+ *   false otherwise.
+ */
+const hasConditionalDirective = (node) =>
+  utils.hasDirective(node, 'if') ||
+  utils.hasDirective(node, 'else-if') ||
+  utils.hasDirective(node, 'else')
+
+// =============================================================================
+// Rule Definition
+// =============================================================================
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'require key attribute for conditionally rendered repeated components',
+      categories: null,
+      url: 'https://eslint.vuejs.org/rules/v-if-else-key.html'
+    },
+    // eslint-disable-next-line eslint-plugin/require-meta-fixable -- fixer is not recognized
+    fixable: 'code',
+    schema: [],
+    messages: {
+      requireKey:
+        "Conditionally rendered repeated component '{{componentName}}' expected to have a 'key' attribute."
+    }
+  },
+  /**
+   * Creates and returns a rule object which checks usage of repeated components. If a component
+   * is used more than once, it checks for the presence of a key.
+   *
+   * @param {RuleContext} context - The context object.
+   * @returns {Object} A dictionary of functions to be called on traversal of the template body by
+   *   the eslint parser.
+   */
+  create(context) {
+    /**
+     * Map to store conditionally rendered components and their respective conditional directives.
+     *
+     * @type {Map<VElement, ConditionalFamily>}
+     */
+    const conditionalFamilies = new Map()
+
+    /**
+     * Array of Maps to keep track of components and their usage counts along with the first
+     * node instance. Each Map represents a different scope level, and maps a component name to
+     * an object containing the count and a reference to the first node.
+     */
+    /** @type {Map<string, { count: number; firstNode: any }>[]} */
+    const componentUsageStack = [new Map()]
+
+    /**
+     * Checks if a given node represents a custom component without any conditional directives.
+     *
+     * @param {VElement} node - The AST node to check.
+     * @returns {boolean} True if the node represents a custom component without any conditional directives, false otherwise.
+     */
+    const isCustomComponentWithoutCondition = (node) =>
+      node.type === 'VElement' &&
+      utils.isCustomComponent(node) &&
+      !hasConditionalDirective(node)
+
+    /** Set of built-in Vue components that are exempt from the rule. */
+    /** @type {Set<string>} */
+    const exemptTags = new Set(['component', 'slot', 'template'])
+
+    /** Set to keep track of nodes we've pushed to the stack. */
+    /** @type {Set<any>} */
+    const pushedNodes = new Set()
+
+    /**
+     * Creates and returns an object representing a conditional family.
+     *
+     * @param {VElement} ifNode - The VElement associated with the 'v-if' directive.
+     * @returns {ConditionalFamily}
+     */
+    const createConditionalFamily = (ifNode) => ({
+      if: ifNode,
+      elseIf: [],
+      else: null
+    })
+
+    return utils.defineTemplateBodyVisitor(context, {
+      /**
+       * Callback to be executed when a Vue element is traversed. This function checks if the
+       * element is a component, increments the usage count of the component in the
+       * current scope, and checks for the key directive if the component is repeated.
+       *
+       * @param {VElement} node - The traversed Vue element.
+       */
+      VElement(node) {
+        if (exemptTags.has(node.rawName)) {
+          return
+        }
+
+        const condition =
+          utils.getDirective(node, 'if') ||
+          utils.getDirective(node, 'else-if') ||
+          utils.getDirective(node, 'else')
+
+        if (condition) {
+          const conditionType = condition.key.name.name
+
+          if (node.parent && node.parent.type === 'VElement') {
+            let conditionalFamily = conditionalFamilies.get(node.parent)
+
+            if (!conditionalFamily) {
+              conditionalFamily = createConditionalFamily(node)
+              conditionalFamilies.set(node.parent, conditionalFamily)
+            }
+
+            if (conditionalFamily) {
+              switch (conditionType) {
+                case 'if': {
+                  conditionalFamily = createConditionalFamily(node)
+                  conditionalFamilies.set(node.parent, conditionalFamily)
+                  break
+                }
+                case 'else-if': {
+                  conditionalFamily.elseIf.push(node)
+                  break
+                }
+                case 'else': {
+                  conditionalFamily.else = node
+                  break
+                }
+              }
+            }
+          }
+        }
+
+        if (isCustomComponentWithoutCondition(node)) {
+          componentUsageStack.push(new Map())
+          return
+        }
+
+        if (!utils.isCustomComponent(node)) {
+          return
+        }
+
+        const componentName = node.rawName
+        const currentScope = componentUsageStack[componentUsageStack.length - 1]
+        const usageInfo = currentScope.get(componentName) || {
+          count: 0,
+          firstNode: null
+        }
+
+        if (hasConditionalDirective(node)) {
+          // Store the first node if this is the first occurrence
+          if (usageInfo.count === 0) {
+            usageInfo.firstNode = node
+          }
+
+          if (usageInfo.count > 0) {
+            const uniqueKey = `${casing.kebabCase(componentName)}-${
+              usageInfo.count + 1
+            }`
+            checkForKey(
+              node,
+              context,
+              componentName,
+              uniqueKey,
+              conditionalFamilies
+            )
+
+            // If this is the second occurrence, also apply a fix to the first occurrence
+            if (usageInfo.count === 1) {
+              const uniqueKeyForFirstInstance = `${casing.kebabCase(
+                componentName
+              )}-1`
+              checkForKey(
+                usageInfo.firstNode,
+                context,
+                componentName,
+                uniqueKeyForFirstInstance,
+                conditionalFamilies
+              )
+            }
+          }
+          usageInfo.count += 1
+          currentScope.set(componentName, usageInfo)
+        }
+        componentUsageStack.push(new Map())
+        pushedNodes.add(node)
+      },
+
+      'VElement:exit'(node) {
+        if (exemptTags.has(node.rawName)) {
+          return
+        }
+        if (isCustomComponentWithoutCondition(node)) {
+          componentUsageStack.pop()
+          return
+        }
+        if (!utils.isCustomComponent(node)) {
+          return
+        }
+        if (pushedNodes.has(node)) {
+          componentUsageStack.pop()
+          pushedNodes.delete(node)
+        }
+      }
+    })
+  }
+}
diff --git a/lib/rules/v-on-event-hyphenation.js b/lib/rules/v-on-event-hyphenation.js
index 7060ab620..3cdd34fd7 100644
--- a/lib/rules/v-on-event-hyphenation.js
+++ b/lib/rules/v-on-event-hyphenation.js
@@ -2,14 +2,19 @@
 
 const utils = require('../utils')
 const casing = require('../utils/casing')
+const { toRegExpGroupMatcher } = require('../utils/regexp')
 
 module.exports = {
   meta: {
+    type: 'suggestion',
     docs: {
       description:
         'enforce v-on event naming style on custom components in template',
       categories: ['vue3-strongly-recommended'],
-      url: 'https://eslint.vuejs.org/rules/v-on-event-hyphenation.html'
+      url: 'https://eslint.vuejs.org/rules/v-on-event-hyphenation.html',
+      defaultOptions: {
+        vue3: ['always', { autofix: true }]
+      }
     },
     fixable: 'code',
     schema: [
@@ -26,27 +31,39 @@ module.exports = {
               allOf: [
                 { type: 'string' },
                 { not: { type: 'string', pattern: ':exit$' } },
-                { not: { type: 'string', pattern: '^\\s*$' } }
+                { not: { type: 'string', pattern: String.raw`^\s*$` } }
               ]
             },
             uniqueItems: true,
             additionalItems: false
+          },
+          ignoreTags: {
+            type: 'array',
+            items: { type: 'string' },
+            uniqueItems: true,
+            additionalItems: false
           }
         },
         additionalProperties: false
       }
     ],
-    type: 'suggestion'
+    messages: {
+      // eslint-disable-next-line eslint-plugin/report-message-format
+      mustBeHyphenated: "v-on event '{{text}}' must be hyphenated.",
+      // eslint-disable-next-line eslint-plugin/report-message-format
+      cannotBeHyphenated: "v-on event '{{text}}' can't be hyphenated."
+    }
   },
 
   /** @param {RuleContext} context */
   create(context) {
-    const sourceCode = context.getSourceCode()
+    const sourceCode = context.sourceCode
     const option = context.options[0]
     const optionsPayload = context.options[1]
     const useHyphenated = option !== 'never'
     /** @type {string[]} */
     const ignoredAttributes = (optionsPayload && optionsPayload.ignore) || []
+    const isIgnoredTag = toRegExpGroupMatcher(optionsPayload?.ignoreTags)
     const autofix = Boolean(optionsPayload && optionsPayload.autofix)
 
     const caseConverter = casing.getConverter(
@@ -64,9 +81,7 @@ module.exports = {
       context.report({
         node: node.key,
         loc: node.loc,
-        message: useHyphenated
-          ? "v-on event '{{text}}' must be hyphenated."
-          : "v-on event '{{text}}' can't be hyphenated.",
+        messageId: useHyphenated ? 'mustBeHyphenated' : 'cannotBeHyphenated',
         data: {
           text
         },
@@ -94,7 +109,13 @@ module.exports = {
 
     return utils.defineTemplateBodyVisitor(context, {
       "VAttribute[directive=true][key.name.name='on']"(node) {
-        if (!utils.isCustomComponent(node.parent.parent)) return
+        const element = node.parent.parent
+        if (
+          !utils.isCustomComponent(element) ||
+          isIgnoredTag(element.rawName)
+        ) {
+          return
+        }
         if (!node.key.argument || node.key.argument.type !== 'VIdentifier') {
           return
         }
diff --git a/lib/rules/v-on-function-call.js b/lib/rules/v-on-function-call.js
deleted file mode 100644
index b72548daa..000000000
--- a/lib/rules/v-on-function-call.js
+++ /dev/null
@@ -1,210 +0,0 @@
-/**
- * @author Niklas Higi
- */
-'use strict'
-
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const utils = require('../utils')
-
-/**
- * @typedef { import('../utils').ComponentPropertyData } ComponentPropertyData
- */
-
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
-/**
- * Check whether the given token is a quote.
- * @param {Token} token The token to check.
- * @returns {boolean} `true` if the token is a quote.
- */
-function isQuote(token) {
-  return (
-    token != null &&
-    token.type === 'Punctuator' &&
-    (token.value === '"' || token.value === "'")
-  )
-}
-
-/**
- * @param {VOnExpression} node
- * @returns {CallExpression | null}
- */
-function getInvalidNeverCallExpression(node) {
-  /** @type {ExpressionStatement} */
-  let exprStatement
-  let body = node.body
-  while (true) {
-    const statements = body.filter((st) => st.type !== 'EmptyStatement')
-    if (statements.length !== 1) {
-      return null
-    }
-    const statement = statements[0]
-    if (statement.type === 'ExpressionStatement') {
-      exprStatement = statement
-      break
-    }
-    if (statement.type === 'BlockStatement') {
-      body = statement.body
-      continue
-    }
-    return null
-  }
-  const expression = exprStatement.expression
-  if (expression.type !== 'CallExpression' || expression.arguments.length > 0) {
-    return null
-  }
-  if (expression.optional) {
-    // Allow optional chaining
-    return null
-  }
-  const callee = expression.callee
-  if (callee.type !== 'Identifier') {
-    return null
-  }
-  return expression
-}
-
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
-module.exports = {
-  meta: {
-    type: 'suggestion',
-    docs: {
-      description:
-        'enforce or forbid parentheses after method calls without arguments in `v-on` directives',
-      categories: undefined,
-      url: 'https://eslint.vuejs.org/rules/v-on-function-call.html'
-    },
-    fixable: 'code',
-    schema: [
-      { enum: ['always', 'never'] },
-      {
-        type: 'object',
-        properties: {
-          ignoreIncludesComment: {
-            type: 'boolean'
-          }
-        },
-        additionalProperties: false
-      }
-    ]
-  },
-  /** @param {RuleContext} context */
-  create(context) {
-    const always = context.options[0] === 'always'
-
-    if (always) {
-      return utils.defineTemplateBodyVisitor(context, {
-        /** @param {Identifier} node */
-        "VAttribute[directive=true][key.name.name='on'][key.argument!=null] > VExpressionContainer > Identifier"(
-          node
-        ) {
-          context.report({
-            node,
-            message:
-              "Method calls inside of 'v-on' directives must have parentheses."
-          })
-        }
-      })
-    }
-
-    const option = context.options[1] || {}
-    const ignoreIncludesComment = !!option.ignoreIncludesComment
-    /** @type {Set<string>} */
-    const useArgsMethods = new Set()
-
-    return utils.defineTemplateBodyVisitor(
-      context,
-      {
-        /** @param {VOnExpression} node */
-        "VAttribute[directive=true][key.name.name='on'][key.argument!=null] VOnExpression"(
-          node
-        ) {
-          const expression = getInvalidNeverCallExpression(node)
-          if (!expression) {
-            return
-          }
-
-          const tokenStore = context.parserServices.getTemplateBodyTokenStore()
-          const tokens = tokenStore.getTokens(node.parent, {
-            includeComments: true
-          })
-          /** @type {Token | undefined} */
-          let leftQuote
-          /** @type {Token | undefined} */
-          let rightQuote
-          if (isQuote(tokens[0])) {
-            leftQuote = tokens.shift()
-            rightQuote = tokens.pop()
-          }
-
-          const hasComment = tokens.some(
-            (token) => token.type === 'Block' || token.type === 'Line'
-          )
-
-          if (ignoreIncludesComment && hasComment) {
-            return
-          }
-
-          if (
-            expression.callee.type === 'Identifier' &&
-            useArgsMethods.has(expression.callee.name)
-          ) {
-            // The behavior of target method can change given the arguments.
-            return
-          }
-
-          context.report({
-            node: expression,
-            message:
-              "Method calls without arguments inside of 'v-on' directives must not have parentheses.",
-            fix: hasComment
-              ? null /* The comment is included and cannot be fixed. */
-              : (fixer) => {
-                  /** @type {Range} */
-                  const range =
-                    leftQuote && rightQuote
-                      ? [leftQuote.range[1], rightQuote.range[0]]
-                      : [tokens[0].range[0], tokens[tokens.length - 1].range[1]]
-
-                  return fixer.replaceTextRange(
-                    range,
-                    context.getSourceCode().getText(expression.callee)
-                  )
-                }
-          })
-        }
-      },
-      utils.defineVueVisitor(context, {
-        onVueObjectEnter(node) {
-          for (const method of utils.iterateProperties(
-            node,
-            new Set(['methods'])
-          )) {
-            if (useArgsMethods.has(method.name)) {
-              continue
-            }
-            if (method.type !== 'object') {
-              continue
-            }
-            const value = method.property.value
-            if (
-              (value.type === 'FunctionExpression' ||
-                value.type === 'ArrowFunctionExpression') &&
-              value.params.length > 0
-            ) {
-              useArgsMethods.add(method.name)
-            }
-          }
-        }
-      })
-    )
-  }
-}
diff --git a/lib/rules/v-on-handler-style.js b/lib/rules/v-on-handler-style.js
new file mode 100644
index 000000000..d21f9f4e0
--- /dev/null
+++ b/lib/rules/v-on-handler-style.js
@@ -0,0 +1,586 @@
+/**
+ * @author Yosuke Ota <https://github.com/ota-meshi>
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+/**
+ * @typedef {import('eslint').ReportDescriptorFix} ReportDescriptorFix
+ * @typedef {'method' | 'inline' | 'inline-function'} HandlerKind
+ * @typedef {object} ObjectOption
+ * @property {boolean} [ignoreIncludesComment]
+ */
+
+/**
+ * @param {RuleContext} context
+ */
+function parseOptions(context) {
+  /** @type {[HandlerKind | HandlerKind[] | undefined, ObjectOption | undefined]} */
+  const options = /** @type {any} */ (context.options)
+  /** @type {HandlerKind[]} */
+  const allows = []
+  if (options[0]) {
+    if (Array.isArray(options[0])) {
+      allows.push(...options[0])
+    } else {
+      allows.push(options[0])
+    }
+  } else {
+    allows.push('method', 'inline-function')
+  }
+
+  const option = options[1] || {}
+  const ignoreIncludesComment = !!option.ignoreIncludesComment
+
+  return { allows, ignoreIncludesComment }
+}
+
+/**
+ * Check whether the given token is a quote.
+ * @param {Token} token The token to check.
+ * @returns {boolean} `true` if the token is a quote.
+ */
+function isQuote(token) {
+  return (
+    token != null &&
+    token.type === 'Punctuator' &&
+    (token.value === '"' || token.value === "'")
+  )
+}
+/**
+ * Check whether the given node is an identifier call expression. e.g. `foo()`
+ * @param {Expression} node The node to check.
+ * @returns {node is CallExpression & {callee: Identifier}}
+ */
+function isIdentifierCallExpression(node) {
+  if (node.type !== 'CallExpression') {
+    return false
+  }
+  if (node.optional) {
+    // optional chaining
+    return false
+  }
+  const callee = node.callee
+  return callee.type === 'Identifier'
+}
+
+/**
+ * Returns a call expression node if the given VOnExpression or BlockStatement consists
+ * of only a single identifier call expression.
+ * e.g.
+ *   @click="foo()"
+ *   @click="{ foo() }"
+ *   @click="foo();;"
+ * @param {VOnExpression | BlockStatement} node
+ * @returns {CallExpression & {callee: Identifier} | null}
+ */
+function getIdentifierCallExpression(node) {
+  /** @type {ExpressionStatement} */
+  let exprStatement
+  let body = node.body
+  while (true) {
+    const statements = body.filter((st) => st.type !== 'EmptyStatement')
+    if (statements.length !== 1) {
+      return null
+    }
+    const statement = statements[0]
+    if (statement.type === 'ExpressionStatement') {
+      exprStatement = statement
+      break
+    }
+    if (statement.type === 'BlockStatement') {
+      body = statement.body
+      continue
+    }
+    return null
+  }
+  const expression = exprStatement.expression
+  if (!isIdentifierCallExpression(expression)) {
+    return null
+  }
+  return expression
+}
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'enforce writing style for handlers in `v-on` directives',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/v-on-handler-style.html'
+    },
+    fixable: 'code',
+    schema: [
+      {
+        oneOf: [
+          { enum: ['inline', 'inline-function'] },
+          {
+            type: 'array',
+            items: [
+              { const: 'method' },
+              { enum: ['inline', 'inline-function'] }
+            ],
+            uniqueItems: true,
+            additionalItems: false,
+            minItems: 2,
+            maxItems: 2
+          }
+        ]
+      },
+      {
+        type: 'object',
+        properties: {
+          ignoreIncludesComment: {
+            type: 'boolean'
+          }
+        },
+        additionalProperties: false
+      }
+    ],
+    messages: {
+      preferMethodOverInline:
+        'Prefer method handler over inline handler in v-on.',
+      preferMethodOverInlineWithoutIdCall:
+        'Prefer method handler over inline handler in v-on. Note that you may need to create a new method.',
+      preferMethodOverInlineFunction:
+        'Prefer method handler over inline function in v-on.',
+      preferMethodOverInlineFunctionWithoutIdCall:
+        'Prefer method handler over inline function in v-on. Note that you may need to create a new method.',
+      preferInlineOverMethod:
+        'Prefer inline handler over method handler in v-on.',
+      preferInlineOverInlineFunction:
+        'Prefer inline handler over inline function in v-on.',
+      preferInlineOverInlineFunctionWithMultipleParams:
+        'Prefer inline handler over inline function in v-on. Note that the custom event must be changed to a single payload.',
+      preferInlineFunctionOverMethod:
+        'Prefer inline function over method handler in v-on.',
+      preferInlineFunctionOverInline:
+        'Prefer inline function over inline handler in v-on.'
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    const sourceCode = context.sourceCode
+    const { allows, ignoreIncludesComment } = parseOptions(context)
+
+    /** @type {Set<VElement>} */
+    const upperElements = new Set()
+    /** @type {Map<string, number>} */
+    const methodParamCountMap = new Map()
+    /** @type {Identifier[]} */
+    const $eventIdentifiers = []
+
+    /**
+     * Verify for inline handler.
+     * @param {VOnExpression} node
+     * @param {HandlerKind} kind
+     * @returns {boolean} Returns `true` if reported.
+     */
+    function verifyForInlineHandler(node, kind) {
+      switch (kind) {
+        case 'method': {
+          return verifyCanUseMethodHandlerForInlineHandler(node)
+        }
+        case 'inline-function': {
+          reportCanUseInlineFunctionForInlineHandler(node)
+          return true
+        }
+      }
+      return false
+    }
+    /**
+     * Report for method handler.
+     * @param {Identifier} node
+     * @param {HandlerKind} kind
+     * @returns {boolean} Returns `true` if reported.
+     */
+    function reportForMethodHandler(node, kind) {
+      switch (kind) {
+        case 'inline':
+        case 'inline-function': {
+          context.report({
+            node,
+            messageId:
+              kind === 'inline'
+                ? 'preferInlineOverMethod'
+                : 'preferInlineFunctionOverMethod'
+          })
+          return true
+        }
+      }
+      // This path is currently not taken.
+      return false
+    }
+    /**
+     * Verify for inline function handler.
+     * @param {ArrowFunctionExpression | FunctionExpression} node
+     * @param {HandlerKind} kind
+     * @returns {boolean} Returns `true` if reported.
+     */
+    function verifyForInlineFunction(node, kind) {
+      switch (kind) {
+        case 'method': {
+          return verifyCanUseMethodHandlerForInlineFunction(node)
+        }
+        case 'inline': {
+          reportCanUseInlineHandlerForInlineFunction(node)
+          return true
+        }
+      }
+      return false
+    }
+
+    /**
+     * Get token information for the given VExpressionContainer node.
+     * @param {VExpressionContainer} node
+     */
+    function getVExpressionContainerTokenInfo(node) {
+      const tokenStore = sourceCode.parserServices.getTemplateBodyTokenStore()
+      const tokens = tokenStore.getTokens(node, {
+        includeComments: true
+      })
+      const firstToken = tokens[0]
+      const lastToken = tokens[tokens.length - 1]
+
+      const hasQuote = isQuote(firstToken)
+      /** @type {Range} */
+      const rangeWithoutQuotes = hasQuote
+        ? [firstToken.range[1], lastToken.range[0]]
+        : [firstToken.range[0], lastToken.range[1]]
+
+      return {
+        rangeWithoutQuotes,
+        get hasComment() {
+          return tokens.some(
+            (token) => token.type === 'Block' || token.type === 'Line'
+          )
+        },
+        hasQuote
+      }
+    }
+
+    /**
+     * Checks whether the given node refers to a variable of the element.
+     * @param {Expression | VOnExpression} node
+     */
+    function hasReferenceUpperElementVariable(node) {
+      for (const element of upperElements) {
+        for (const vv of element.variables) {
+          for (const reference of vv.references) {
+            const { range } = reference.id
+            if (node.range[0] <= range[0] && range[1] <= node.range[1]) {
+              return true
+            }
+          }
+        }
+      }
+      return false
+    }
+    /**
+     * Check if `v-on:click="foo()"` can be converted to `v-on:click="foo"` and report if it can.
+     * @param {VOnExpression} node
+     * @returns {boolean} Returns `true` if reported.
+     */
+    function verifyCanUseMethodHandlerForInlineHandler(node) {
+      const { rangeWithoutQuotes, hasComment } =
+        getVExpressionContainerTokenInfo(node.parent)
+      if (ignoreIncludesComment && hasComment) {
+        return false
+      }
+
+      const idCallExpr = getIdentifierCallExpression(node)
+      if (
+        (!idCallExpr || idCallExpr.arguments.length > 0) &&
+        hasReferenceUpperElementVariable(node)
+      ) {
+        // It cannot be converted to method because it refers to the variable of the element.
+        // e.g. <template v-for="e in list"><button @click="foo(e)" /></template>
+        return false
+      }
+
+      context.report({
+        node,
+        messageId: idCallExpr
+          ? 'preferMethodOverInline'
+          : 'preferMethodOverInlineWithoutIdCall',
+        fix: (fixer) => {
+          if (
+            hasComment /* The statement contains comment and cannot be fixed. */ ||
+            !idCallExpr /* The statement is not a simple identifier call and cannot be fixed. */ ||
+            idCallExpr.arguments.length > 0
+          ) {
+            return null
+          }
+          const paramCount = methodParamCountMap.get(idCallExpr.callee.name)
+          if (paramCount != null && paramCount > 0) {
+            // The behavior of target method can change given the arguments.
+            return null
+          }
+          return fixer.replaceTextRange(
+            rangeWithoutQuotes,
+            sourceCode.getText(idCallExpr.callee)
+          )
+        }
+      })
+      return true
+    }
+    /**
+     * Check if `v-on:click="() => foo()"` can be converted to `v-on:click="foo"` and report if it can.
+     * @param {ArrowFunctionExpression | FunctionExpression} node
+     * @returns {boolean} Returns `true` if reported.
+     */
+    function verifyCanUseMethodHandlerForInlineFunction(node) {
+      const { rangeWithoutQuotes, hasComment } =
+        getVExpressionContainerTokenInfo(
+          /** @type {VExpressionContainer} */ (node.parent)
+        )
+      if (ignoreIncludesComment && hasComment) {
+        return false
+      }
+
+      /** @type {CallExpression & {callee: Identifier} | null} */
+      let idCallExpr = null
+      if (node.body.type === 'BlockStatement') {
+        idCallExpr = getIdentifierCallExpression(node.body)
+      } else if (isIdentifierCallExpression(node.body)) {
+        idCallExpr = node.body
+      }
+      if (
+        (!idCallExpr || !isSameParamsAndArgs(idCallExpr)) &&
+        hasReferenceUpperElementVariable(node)
+      ) {
+        // It cannot be converted to method because it refers to the variable of the element.
+        // e.g. <template v-for="e in list"><button @click="() => foo(e)" /></template>
+        return false
+      }
+
+      context.report({
+        node,
+        messageId: idCallExpr
+          ? 'preferMethodOverInlineFunction'
+          : 'preferMethodOverInlineFunctionWithoutIdCall',
+        fix: (fixer) => {
+          if (
+            hasComment /* The function contains comment and cannot be fixed. */ ||
+            !idCallExpr /* The function is not a simple identifier call and cannot be fixed. */
+          ) {
+            return null
+          }
+          if (!isSameParamsAndArgs(idCallExpr)) {
+            // It is not a call with the arguments given as is.
+            return null
+          }
+          const paramCount = methodParamCountMap.get(idCallExpr.callee.name)
+          if (
+            paramCount != null &&
+            paramCount !== idCallExpr.arguments.length
+          ) {
+            // The behavior of target method can change given the arguments.
+            return null
+          }
+          return fixer.replaceTextRange(
+            rangeWithoutQuotes,
+            sourceCode.getText(idCallExpr.callee)
+          )
+        }
+      })
+      return true
+
+      /**
+       * Checks whether parameters are passed as arguments as-is.
+       * @param {CallExpression} expression
+       */
+      function isSameParamsAndArgs(expression) {
+        return (
+          node.params.length === expression.arguments.length &&
+          node.params.every((param, index) => {
+            if (param.type !== 'Identifier') {
+              return false
+            }
+            const arg = expression.arguments[index]
+            if (!arg || arg.type !== 'Identifier') {
+              return false
+            }
+            return param.name === arg.name
+          })
+        )
+      }
+    }
+    /**
+     * Report `v-on:click="foo()"` can be converted to `v-on:click="()=>foo()"`.
+     * @param {VOnExpression} node
+     * @returns {void}
+     */
+    function reportCanUseInlineFunctionForInlineHandler(node) {
+      context.report({
+        node,
+        messageId: 'preferInlineFunctionOverInline',
+        *fix(fixer) {
+          const has$Event = $eventIdentifiers.some(
+            ({ range }) =>
+              node.range[0] <= range[0] && range[1] <= node.range[1]
+          )
+          if (has$Event) {
+            /* The statements contains $event and cannot be fixed. */
+            return
+          }
+          const { rangeWithoutQuotes, hasQuote } =
+            getVExpressionContainerTokenInfo(node.parent)
+          if (!hasQuote) {
+            /* The statements is not enclosed in quotes and cannot be fixed. */
+            return
+          }
+          yield fixer.insertTextBeforeRange(rangeWithoutQuotes, '() => ')
+          const tokenStore =
+            sourceCode.parserServices.getTemplateBodyTokenStore()
+          const firstToken = tokenStore.getFirstToken(node)
+          const lastToken = tokenStore.getLastToken(node)
+          if (firstToken.value === '{' && lastToken.value === '}') return
+          if (
+            lastToken.value !== ';' &&
+            node.body.length === 1 &&
+            node.body[0].type === 'ExpressionStatement'
+          ) {
+            // it is a single expression
+            return
+          }
+          yield fixer.insertTextBefore(firstToken, '{')
+          yield fixer.insertTextAfter(lastToken, '}')
+        }
+      })
+    }
+    /**
+     * Report `v-on:click="() => foo()"` can be converted to `v-on:click="foo()"`.
+     * @param {ArrowFunctionExpression | FunctionExpression} node
+     * @returns {void}
+     */
+    function reportCanUseInlineHandlerForInlineFunction(node) {
+      // If a function has one parameter, you can turn it into an inline handler using $event.
+      // If a function has two or more parameters, it cannot be easily converted to an inline handler.
+      // However, users can use inline handlers by changing the payload of the component's custom event.
+      // So we report it regardless of the number of parameters.
+
+      context.report({
+        node,
+        messageId:
+          node.params.length > 1
+            ? 'preferInlineOverInlineFunctionWithMultipleParams'
+            : 'preferInlineOverInlineFunction',
+        fix:
+          node.params.length > 0
+            ? null /* The function has parameters and cannot be fixed. */
+            : (fixer) => {
+                let text = sourceCode.getText(node.body)
+                if (node.body.type === 'BlockStatement') {
+                  text = text.slice(1, -1) // strip braces
+                }
+                return fixer.replaceText(node, text)
+              }
+      })
+    }
+
+    return utils.defineTemplateBodyVisitor(
+      context,
+      {
+        VElement(node) {
+          upperElements.add(node)
+        },
+        'VElement:exit'(node) {
+          upperElements.delete(node)
+        },
+        /** @param {VExpressionContainer} node */
+        "VAttribute[directive=true][key.name.name='on'][key.argument!=null] > VExpressionContainer.value:exit"(
+          node
+        ) {
+          const expression = node.expression
+          if (!expression) {
+            return
+          }
+          switch (expression.type) {
+            case 'VOnExpression': {
+              // e.g. v-on:click="foo()"
+              if (allows[0] === 'inline') {
+                return
+              }
+              for (const allow of allows) {
+                if (verifyForInlineHandler(expression, allow)) {
+                  return
+                }
+              }
+              break
+            }
+            case 'Identifier': {
+              // e.g. v-on:click="foo"
+              if (allows[0] === 'method') {
+                return
+              }
+              for (const allow of allows) {
+                if (reportForMethodHandler(expression, allow)) {
+                  return
+                }
+              }
+              break
+            }
+            case 'ArrowFunctionExpression':
+            case 'FunctionExpression': {
+              // e.g. v-on:click="()=>foo()"
+              if (allows[0] === 'inline-function') {
+                return
+              }
+              for (const allow of allows) {
+                if (verifyForInlineFunction(expression, allow)) {
+                  return
+                }
+              }
+              break
+            }
+            default: {
+              return
+            }
+          }
+        },
+        ...(allows.includes('inline-function')
+          ? // Collect $event identifiers to check for side effects
+            // when converting from `v-on:click="foo($event)"` to `v-on:click="()=>foo($event)"` .
+            {
+              'Identifier[name="$event"]'(node) {
+                $eventIdentifiers.push(node)
+              }
+            }
+          : {})
+      },
+      allows.includes('method')
+        ? // Collect method definition with params information to check for side effects.
+          // when converting from `v-on:click="foo()"` to `v-on:click="foo"`, or
+          // converting from `v-on:click="() => foo()"` to `v-on:click="foo"`.
+          utils.defineVueVisitor(context, {
+            onVueObjectEnter(node) {
+              for (const method of utils.iterateProperties(
+                node,
+                new Set(['methods'])
+              )) {
+                if (method.type !== 'object') {
+                  // This branch is usually not passed.
+                  continue
+                }
+                const value = method.property.value
+                if (
+                  value.type === 'FunctionExpression' ||
+                  value.type === 'ArrowFunctionExpression'
+                ) {
+                  methodParamCountMap.set(
+                    method.name,
+                    value.params.some((p) => p.type === 'RestElement')
+                      ? Number.POSITIVE_INFINITY
+                      : value.params.length
+                  )
+                }
+              }
+            }
+          })
+        : {}
+    )
+  }
+}
diff --git a/lib/rules/v-on-style.js b/lib/rules/v-on-style.js
index 4649aacf9..eb5950026 100644
--- a/lib/rules/v-on-style.js
+++ b/lib/rules/v-on-style.js
@@ -5,26 +5,22 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'suggestion',
     docs: {
       description: 'enforce `v-on` directive style',
-      categories: ['vue3-strongly-recommended', 'strongly-recommended'],
+      categories: ['vue3-strongly-recommended', 'vue2-strongly-recommended'],
       url: 'https://eslint.vuejs.org/rules/v-on-style.html'
     },
     fixable: 'code',
-    schema: [{ enum: ['shorthand', 'longform'] }]
+    schema: [{ enum: ['shorthand', 'longform'] }],
+    messages: {
+      expectedShorthand: "Expected '@' instead of 'v-on:'.",
+      expectedLonghand: "Expected 'v-on:' instead of '@'."
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
@@ -44,9 +40,7 @@ module.exports = {
         context.report({
           node,
           loc: node.loc,
-          message: preferShorthand
-            ? "Expected '@' instead of 'v-on:'."
-            : "Expected 'v-on:' instead of '@'.",
+          messageId: preferShorthand ? 'expectedShorthand' : 'expectedLonghand',
           fix: (fixer) =>
             preferShorthand
               ? fixer.replaceTextRange([pos, pos + 5], '@')
diff --git a/lib/rules/v-slot-style.js b/lib/rules/v-slot-style.js
index 1bb5f57f2..30a536ab5 100644
--- a/lib/rules/v-slot-style.js
+++ b/lib/rules/v-slot-style.js
@@ -86,13 +86,13 @@ module.exports = {
     type: 'suggestion',
     docs: {
       description: 'enforce `v-slot` directive style',
-      categories: ['vue3-strongly-recommended', 'strongly-recommended'],
+      categories: ['vue3-strongly-recommended', 'vue2-strongly-recommended'],
       url: 'https://eslint.vuejs.org/rules/v-slot-style.html'
     },
     fixable: 'code',
     schema: [
       {
-        anyOf: [
+        oneOf: [
           { enum: ['shorthand', 'longform'] },
           {
             type: 'object',
@@ -115,7 +115,7 @@ module.exports = {
   },
   /** @param {RuleContext} context */
   create(context) {
-    const sourceCode = context.getSourceCode()
+    const sourceCode = context.sourceCode
     const options = normalizeOptions(context.options[0])
 
     return utils.defineTemplateBodyVisitor(context, {
@@ -141,14 +141,18 @@ module.exports = {
 
           fix(fixer) {
             switch (expected) {
-              case 'shorthand':
+              case 'shorthand': {
                 return fixer.replaceTextRange(range, `#${argumentText}`)
-              case 'longform':
+              }
+              case 'longform': {
                 return fixer.replaceTextRange(range, `v-slot:${argumentText}`)
-              case 'v-slot':
+              }
+              case 'v-slot': {
                 return fixer.replaceTextRange(range, 'v-slot')
-              default:
+              }
+              default: {
                 return null
+              }
             }
           }
         })
diff --git a/lib/rules/valid-attribute-name.js b/lib/rules/valid-attribute-name.js
index 6da399f34..51d52a1b6 100644
--- a/lib/rules/valid-attribute-name.js
+++ b/lib/rules/valid-attribute-name.js
@@ -12,7 +12,7 @@ module.exports = {
     type: 'problem',
     docs: {
       description: 'require valid attribute names',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/valid-attribute-name.html'
     },
     fixable: null,
diff --git a/lib/rules/valid-define-emits.js b/lib/rules/valid-define-emits.js
index f225c7af6..8d2306c23 100644
--- a/lib/rules/valid-define-emits.js
+++ b/lib/rules/valid-define-emits.js
@@ -4,7 +4,7 @@
  */
 'use strict'
 
-const { findVariable } = require('eslint-utils')
+const { findVariable } = require('@eslint-community/eslint-utils')
 const utils = require('../utils')
 
 module.exports = {
@@ -12,7 +12,7 @@ module.exports = {
     type: 'problem',
     docs: {
       description: 'enforce valid `defineEmits` compiler macro',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/valid-define-emits.html'
     },
     fixable: null,
@@ -20,7 +20,7 @@ module.exports = {
     messages: {
       hasTypeAndArg: '`defineEmits` has both a type-only emit and an argument.',
       referencingLocally:
-        '`defineEmits` are referencing locally declared variables.',
+        '`defineEmits` is referencing locally declared variables.',
       multiple: '`defineEmits` has been called multiple times.',
       notDefined: 'Custom events are not defined.',
       definedInBoth:
@@ -47,8 +47,10 @@ module.exports = {
         onDefineEmitsEnter(node) {
           defineEmitsNodes.push(node)
 
+          const typeArguments =
+            'typeArguments' in node ? node.typeArguments : node.typeParameters
           if (node.arguments.length > 0) {
-            if (node.typeParameters && node.typeParameters.params.length > 0) {
+            if (typeArguments && typeArguments.params.length > 0) {
               // `defineEmits` has both a literal type and an argument.
               context.report({
                 node,
@@ -59,10 +61,7 @@ module.exports = {
 
             emitsDefExpressions.add(node.arguments[0])
           } else {
-            if (
-              !node.typeParameters ||
-              node.typeParameters.params.length === 0
-            ) {
+            if (!typeArguments || typeArguments.params.length === 0) {
               emptyDefineEmits = node
             }
           }
@@ -70,7 +69,7 @@ module.exports = {
         Identifier(node) {
           for (const defineEmits of emitsDefExpressions) {
             if (utils.inRange(defineEmits.range, node)) {
-              const variable = findVariable(context.getScope(), node)
+              const variable = findVariable(utils.getScope(context, node), node)
               if (
                 variable &&
                 variable.references.some((ref) => ref.identifier === node) &&
@@ -85,7 +84,7 @@ module.exports = {
                 if (utils.withinTypeNode(node)) {
                   continue
                 }
-                //`defineEmits` are referencing locally declared variables.
+                //`defineEmits` is referencing locally declared variables.
                 context.report({
                   node,
                   messageId: 'referencingLocally'
diff --git a/lib/rules/valid-define-options.js b/lib/rules/valid-define-options.js
new file mode 100644
index 000000000..712f1d8e7
--- /dev/null
+++ b/lib/rules/valid-define-options.js
@@ -0,0 +1,133 @@
+/**
+ * @author Yosuke Ota <https://github.com/ota-meshi>
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const { findVariable } = require('@eslint-community/eslint-utils')
+const utils = require('../utils')
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'enforce valid `defineOptions` compiler macro',
+      categories: ['vue3-essential'],
+      url: 'https://eslint.vuejs.org/rules/valid-define-options.html'
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      referencingLocally:
+        '`defineOptions` is referencing locally declared variables.',
+      multiple: '`defineOptions` has been called multiple times.',
+      notDefined: 'Options are not defined.',
+      disallowProp:
+        '`defineOptions()` cannot be used to declare `{{propName}}`. Use `{{insteadMacro}}()` instead.',
+      typeArgs: '`defineOptions()` cannot accept type arguments.'
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    const scriptSetup = utils.getScriptSetupElement(context)
+    if (!scriptSetup) {
+      return {}
+    }
+
+    /** @type {Set<Expression | SpreadElement>} */
+    const optionsDefExpressions = new Set()
+    /** @type {CallExpression[]} */
+    const defineOptionsNodes = []
+
+    return utils.compositingVisitors(
+      utils.defineScriptSetupVisitor(context, {
+        onDefineOptionsEnter(node) {
+          defineOptionsNodes.push(node)
+
+          if (node.arguments.length > 0) {
+            const define = node.arguments[0]
+            if (define.type === 'ObjectExpression') {
+              for (const [propName, insteadMacro] of [
+                ['props', 'defineProps'],
+                ['emits', 'defineEmits'],
+                ['expose', 'defineExpose'],
+                ['slots', 'defineSlots']
+              ]) {
+                const prop = utils.findProperty(define, propName)
+                if (prop) {
+                  context.report({
+                    node,
+                    messageId: 'disallowProp',
+                    data: { propName, insteadMacro }
+                  })
+                }
+              }
+            }
+
+            optionsDefExpressions.add(node.arguments[0])
+          } else {
+            context.report({
+              node,
+              messageId: 'notDefined'
+            })
+          }
+
+          const typeArguments =
+            'typeArguments' in node ? node.typeArguments : node.typeParameters
+          if (typeArguments) {
+            context.report({
+              node: typeArguments,
+              messageId: 'typeArgs'
+            })
+          }
+        },
+        Identifier(node) {
+          for (const defineOptions of optionsDefExpressions) {
+            if (utils.inRange(defineOptions.range, node)) {
+              const variable = findVariable(utils.getScope(context, node), node)
+              if (
+                variable &&
+                variable.references.some((ref) => ref.identifier === node) &&
+                variable.defs.length > 0 &&
+                variable.defs.every(
+                  (def) =>
+                    def.type !== 'ImportBinding' &&
+                    utils.inRange(scriptSetup.range, def.name) &&
+                    !utils.inRange(defineOptions.range, def.name) &&
+                    !(
+                      def.type === 'Variable' &&
+                      def.parent.kind === 'const' &&
+                      def.node.init &&
+                      def.node.init.type === 'Literal'
+                    )
+                )
+              ) {
+                if (utils.withinTypeNode(node)) {
+                  continue
+                }
+                //`defineOptions` is referencing locally declared variables.
+                context.report({
+                  node,
+                  messageId: 'referencingLocally'
+                })
+              }
+            }
+          }
+        }
+      }),
+      {
+        'Program:exit'() {
+          if (defineOptionsNodes.length > 1) {
+            // `defineOptions` has been called multiple times.
+            for (const node of defineOptionsNodes) {
+              context.report({
+                node,
+                messageId: 'multiple'
+              })
+            }
+          }
+        }
+      }
+    )
+  }
+}
diff --git a/lib/rules/valid-define-props.js b/lib/rules/valid-define-props.js
index 60101f495..2ba81b188 100644
--- a/lib/rules/valid-define-props.js
+++ b/lib/rules/valid-define-props.js
@@ -4,7 +4,7 @@
  */
 'use strict'
 
-const { findVariable } = require('eslint-utils')
+const { findVariable } = require('@eslint-community/eslint-utils')
 const utils = require('../utils')
 
 module.exports = {
@@ -12,7 +12,7 @@ module.exports = {
     type: 'problem',
     docs: {
       description: 'enforce valid `defineProps` compiler macro',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/valid-define-props.html'
     },
     fixable: null,
@@ -21,7 +21,7 @@ module.exports = {
       hasTypeAndArg:
         '`defineProps` has both a type-only props and an argument.',
       referencingLocally:
-        '`defineProps` are referencing locally declared variables.',
+        '`defineProps` is referencing locally declared variables.',
       multiple: '`defineProps` has been called multiple times.',
       notDefined: 'Props are not defined.',
       definedInBoth:
@@ -48,8 +48,10 @@ module.exports = {
         onDefinePropsEnter(node) {
           definePropsNodes.push(node)
 
+          const typeArguments =
+            'typeArguments' in node ? node.typeArguments : node.typeParameters
           if (node.arguments.length > 0) {
-            if (node.typeParameters && node.typeParameters.params.length > 0) {
+            if (typeArguments && typeArguments.params.length > 0) {
               // `defineProps` has both a literal type and an argument.
               context.report({
                 node,
@@ -60,10 +62,7 @@ module.exports = {
 
             propsDefExpressions.add(node.arguments[0])
           } else {
-            if (
-              !node.typeParameters ||
-              node.typeParameters.params.length === 0
-            ) {
+            if (!typeArguments || typeArguments.params.length === 0) {
               emptyDefineProps = node
             }
           }
@@ -71,7 +70,7 @@ module.exports = {
         Identifier(node) {
           for (const defineProps of propsDefExpressions) {
             if (utils.inRange(defineProps.range, node)) {
-              const variable = findVariable(context.getScope(), node)
+              const variable = findVariable(utils.getScope(context, node), node)
               if (
                 variable &&
                 variable.references.some((ref) => ref.identifier === node) &&
@@ -86,7 +85,7 @@ module.exports = {
                 if (utils.withinTypeNode(node)) {
                   continue
                 }
-                //`defineProps` are referencing locally declared variables.
+                //`defineProps` is referencing locally declared variables.
                 context.report({
                   node,
                   messageId: 'referencingLocally'
diff --git a/lib/rules/valid-model-definition.js b/lib/rules/valid-model-definition.js
index 5b7435f4c..6d82fca32 100644
--- a/lib/rules/valid-model-definition.js
+++ b/lib/rules/valid-model-definition.js
@@ -6,9 +6,6 @@
 
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
 const VALID_MODEL_KEYS = new Set(['prop', 'event'])
 
 module.exports = {
@@ -16,18 +13,18 @@ module.exports = {
     type: 'problem',
     docs: {
       description: 'require valid keys in model option',
-      categories: ['essential'],
+      categories: ['vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/valid-model-definition.html'
     },
     fixable: null,
-    schema: []
+    deprecated: true,
+    schema: [],
+    messages: {
+      invalidKey: "Invalid key '{{name}}' in model option."
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
-    // ----------------------------------------------------------------------
-    // Public
-    // ----------------------------------------------------------------------
-
     return utils.executeOnVue(context, (obj) => {
       const modelProperty = utils.findProperty(obj, 'model')
       if (!modelProperty || modelProperty.value.type !== 'ObjectExpression') {
@@ -45,7 +42,7 @@ module.exports = {
         if (!VALID_MODEL_KEYS.has(name)) {
           context.report({
             node: p,
-            message: "Invalid key '{{name}}' in model option.",
+            messageId: 'invalidKey',
             data: {
               name
             }
diff --git a/lib/rules/valid-next-tick.js b/lib/rules/valid-next-tick.js
index eba820041..c384f6ac0 100644
--- a/lib/rules/valid-next-tick.js
+++ b/lib/rules/valid-next-tick.js
@@ -6,16 +6,8 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
-const { findVariable } = require('eslint-utils')
-
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
+const { findVariable } = require('@eslint-community/eslint-utils')
 
 /**
  * @param {Identifier} identifier
@@ -43,7 +35,7 @@ function getVueNextTickNode(identifier, context) {
   }
 
   // Vue 3 Global API: import { nextTick as nt } from 'vue'; nt()
-  const variable = findVariable(context.getScope(), identifier)
+  const variable = findVariable(utils.getScope(context, identifier), identifier)
 
   if (variable != null && variable.defs.length === 1) {
     const def = variable.defs[0]
@@ -116,21 +108,26 @@ function isAwaitedPromise(callExpression) {
   return false
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
-    hasSuggestions: true,
     type: 'problem',
     docs: {
       description: 'enforce valid `nextTick` function calls',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/valid-next-tick.html'
     },
     fixable: 'code',
-    schema: []
+    hasSuggestions: true,
+    schema: [],
+    messages: {
+      shouldBeFunction: '`nextTick` is a function.',
+      missingCallbackOrAwait:
+        'Await the Promise returned by `nextTick` or pass a callback function.',
+      addAwait: 'Add missing `await` statement.',
+      tooManyParameters: '`nextTick` expects zero or one parameters.',
+      eitherAwaitOrCallback:
+        'Either await the Promise or pass a callback function to `nextTick`.'
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
@@ -168,7 +165,7 @@ module.exports = {
         if (parentNode.type !== 'CallExpression') {
           context.report({
             node,
-            message: '`nextTick` is a function.',
+            messageId: 'shouldBeFunction',
             fix(fixer) {
               return fixer.insertTextAfter(node, '()')
             }
@@ -180,11 +177,10 @@ module.exports = {
           if (!isAwaitedPromise(parentNode)) {
             context.report({
               node,
-              message:
-                'Await the Promise returned by `nextTick` or pass a callback function.',
+              messageId: 'missingCallbackOrAwait',
               suggest: [
                 {
-                  desc: 'Add missing `await` statement.',
+                  messageId: 'addAwait',
                   fix(fixer) {
                     return fixer.insertTextBefore(parentNode, 'await ')
                   }
@@ -198,7 +194,7 @@ module.exports = {
         if (parentNode.arguments.length > 1) {
           context.report({
             node,
-            message: '`nextTick` expects zero or one parameters.'
+            messageId: 'tooManyParameters'
           })
           return
         }
@@ -206,8 +202,7 @@ module.exports = {
         if (isAwaitedPromise(parentNode)) {
           context.report({
             node,
-            message:
-              'Either await the Promise or pass a callback function to `nextTick`.'
+            messageId: 'eitherAwaitOrCallback'
           })
         }
       }
diff --git a/lib/rules/valid-template-root.js b/lib/rules/valid-template-root.js
index 7612ae85f..88f814f8f 100644
--- a/lib/rules/valid-template-root.js
+++ b/lib/rules/valid-template-root.js
@@ -5,30 +5,27 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
     docs: {
       description: 'enforce valid template root',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/valid-template-root.html'
     },
     fixable: null,
-    schema: []
+    schema: [],
+    messages: {
+      emptySrc:
+        "The template root with 'src' attribute is required to be empty.",
+      noChild: 'The template requires child element.'
+    }
   },
   /** @param {RuleContext} context */
   create(context) {
-    const sourceCode = context.getSourceCode()
+    const sourceCode = context.sourceCode
 
     return {
       /** @param {Program} program */
@@ -52,15 +49,14 @@ module.exports = {
             context.report({
               node: element,
               loc: element.loc,
-              message:
-                "The template root with 'src' attribute is required to be empty."
+              messageId: 'emptySrc'
             })
           }
         } else if (rootElements.length === 0 && !hasSrc) {
           context.report({
             node: element,
             loc: element.loc,
-            message: 'The template requires child element.'
+            messageId: 'noChild'
           })
         }
       }
diff --git a/lib/rules/valid-v-bind-sync.js b/lib/rules/valid-v-bind-sync.js
index 2a42e1b32..ba04d6117 100644
--- a/lib/rules/valid-v-bind-sync.js
+++ b/lib/rules/valid-v-bind-sync.js
@@ -4,16 +4,8 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 /**
  * Check whether the given node is valid or not.
  * @param {VElement} node The element node to check.
@@ -78,19 +70,16 @@ function maybeNullObjectMemberExpression(node) {
   return false
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
     docs: {
       description: 'enforce valid `.sync` modifier on `v-bind` directives',
-      categories: ['essential'],
+      categories: ['vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/valid-v-bind-sync.html'
     },
     fixable: null,
+    deprecated: true,
     schema: [],
     messages: {
       unexpectedInvalidElement:
diff --git a/lib/rules/valid-v-bind.js b/lib/rules/valid-v-bind.js
index 6605ed1c7..0f44dad26 100644
--- a/lib/rules/valid-v-bind.js
+++ b/lib/rules/valid-v-bind.js
@@ -5,28 +5,16 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 const VALID_MODIFIERS = new Set(['prop', 'camel', 'sync', 'attr'])
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
     docs: {
       description: 'enforce valid `v-bind` directives',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/valid-v-bind.html'
     },
     fixable: null,
diff --git a/lib/rules/valid-v-cloak.js b/lib/rules/valid-v-cloak.js
index efcaf6940..5ff956818 100644
--- a/lib/rules/valid-v-cloak.js
+++ b/lib/rules/valid-v-cloak.js
@@ -5,22 +5,14 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
     docs: {
       description: 'enforce valid `v-cloak` directives',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/valid-v-cloak.html'
     },
     fixable: null,
diff --git a/lib/rules/valid-v-else-if.js b/lib/rules/valid-v-else-if.js
index c2c0c8851..b94437466 100644
--- a/lib/rules/valid-v-else-if.js
+++ b/lib/rules/valid-v-else-if.js
@@ -5,22 +5,14 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
     docs: {
       description: 'enforce valid `v-else-if` directives',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/valid-v-else-if.html'
     },
     fixable: null,
diff --git a/lib/rules/valid-v-else.js b/lib/rules/valid-v-else.js
index 7c4bd28aa..f35ac661d 100644
--- a/lib/rules/valid-v-else.js
+++ b/lib/rules/valid-v-else.js
@@ -5,22 +5,14 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
     docs: {
       description: 'enforce valid `v-else` directives',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/valid-v-else.html'
     },
     fixable: null,
diff --git a/lib/rules/valid-v-for.js b/lib/rules/valid-v-for.js
index 0acf7dba2..21781142b 100644
--- a/lib/rules/valid-v-for.js
+++ b/lib/rules/valid-v-for.js
@@ -5,16 +5,8 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 /**
  * Check whether the given attribute is using the variables which are defined by `v-for` directives.
  * @param {VDirective} vFor The attribute node of `v-for` to check.
@@ -95,16 +87,12 @@ function checkKey(context, vFor, element) {
   }
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
     docs: {
       description: 'enforce valid `v-for` directives',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/valid-v-for.html'
     },
     fixable: null,
@@ -125,7 +113,7 @@ module.exports = {
   },
   /** @param {RuleContext} context */
   create(context) {
-    const sourceCode = context.getSourceCode()
+    const sourceCode = context.sourceCode
 
     return utils.defineTemplateBodyVisitor(context, {
       /** @param {VDirective} node */
diff --git a/lib/rules/valid-v-html.js b/lib/rules/valid-v-html.js
index be39026d0..1df254033 100644
--- a/lib/rules/valid-v-html.js
+++ b/lib/rules/valid-v-html.js
@@ -5,22 +5,14 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
     docs: {
       description: 'enforce valid `v-html` directives',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/valid-v-html.html'
     },
     fixable: null,
diff --git a/lib/rules/valid-v-if.js b/lib/rules/valid-v-if.js
index 7ac4287b3..2e8651b44 100644
--- a/lib/rules/valid-v-if.js
+++ b/lib/rules/valid-v-if.js
@@ -5,22 +5,14 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
     docs: {
       description: 'enforce valid `v-if` directives',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/valid-v-if.html'
     },
     fixable: null,
diff --git a/lib/rules/valid-v-is.js b/lib/rules/valid-v-is.js
index 15cde7431..2f97d1fd9 100644
--- a/lib/rules/valid-v-is.js
+++ b/lib/rules/valid-v-is.js
@@ -4,16 +4,8 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 /**
  * Check whether the given node is valid or not.
  * @param {VElement} node The element node to check.
@@ -30,10 +22,6 @@ function isValidElement(node) {
   return true
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
diff --git a/lib/rules/valid-v-memo.js b/lib/rules/valid-v-memo.js
index a5f548ae5..66ba9a75d 100644
--- a/lib/rules/valid-v-memo.js
+++ b/lib/rules/valid-v-memo.js
@@ -4,16 +4,8 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
diff --git a/lib/rules/valid-v-model.js b/lib/rules/valid-v-model.js
index eb8b63b2b..ca2830dc6 100644
--- a/lib/rules/valid-v-model.js
+++ b/lib/rules/valid-v-model.js
@@ -5,16 +5,8 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 const VALID_MODIFIERS = new Set(['lazy', 'number', 'trim'])
 
 /**
@@ -57,6 +49,10 @@ function isOptionalChainingMemberExpression(node) {
  * @returns {boolean} `true` if the node can be LHS.
  */
 function isLhs(node) {
+  if (node.type === 'TSAsExpression' || node.type === 'TSNonNullExpression') {
+    return isLhs(node.expression)
+  }
+
   return node.type === 'Identifier' || node.type === 'MemberExpression'
 }
 
@@ -114,17 +110,13 @@ function getVariable(name, leafNode) {
   return null
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 /** @type {RuleModule}  */
 module.exports = {
   meta: {
     type: 'problem',
     docs: {
       description: 'enforce valid `v-model` directives',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/valid-v-model.html'
     },
     fixable: null,
diff --git a/lib/rules/valid-v-on.js b/lib/rules/valid-v-on.js
index 62deb4e47..19293f923 100644
--- a/lib/rules/valid-v-on.js
+++ b/lib/rules/valid-v-on.js
@@ -5,17 +5,9 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 const keyAliases = require('../utils/key-aliases.json')
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 const VALID_MODIFIERS = new Set([
   'stop',
   'prevent',
@@ -66,16 +58,12 @@ function isValidModifier(modifierNode, customModifiers) {
   )
 }
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
     docs: {
       description: 'enforce valid `v-on` directives',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/valid-v-on.html'
     },
     fixable: null,
@@ -104,7 +92,7 @@ module.exports = {
     const options = context.options[0] || {}
     /** @type {Set<string>} */
     const customModifiers = new Set(options.modifiers || [])
-    const sourceCode = context.getSourceCode()
+    const sourceCode = context.sourceCode
 
     return utils.defineTemplateBodyVisitor(context, {
       /** @param {VDirective} node */
diff --git a/lib/rules/valid-v-once.js b/lib/rules/valid-v-once.js
index bacf83304..9d3d8bf8f 100644
--- a/lib/rules/valid-v-once.js
+++ b/lib/rules/valid-v-once.js
@@ -5,22 +5,14 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
     docs: {
       description: 'enforce valid `v-once` directives',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/valid-v-once.html'
     },
     fixable: null,
diff --git a/lib/rules/valid-v-pre.js b/lib/rules/valid-v-pre.js
index 0112ebde3..0505b9cb5 100644
--- a/lib/rules/valid-v-pre.js
+++ b/lib/rules/valid-v-pre.js
@@ -5,22 +5,14 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
     docs: {
       description: 'enforce valid `v-pre` directives',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/valid-v-pre.html'
     },
     fixable: null,
diff --git a/lib/rules/valid-v-show.js b/lib/rules/valid-v-show.js
index 59ba9c432..1da617806 100644
--- a/lib/rules/valid-v-show.js
+++ b/lib/rules/valid-v-show.js
@@ -5,22 +5,14 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
     docs: {
       description: 'enforce valid `v-show` directives',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/valid-v-show.html'
     },
     fixable: null,
diff --git a/lib/rules/valid-v-slot.js b/lib/rules/valid-v-slot.js
index c33107966..a18014455 100644
--- a/lib/rules/valid-v-slot.js
+++ b/lib/rules/valid-v-slot.js
@@ -241,7 +241,7 @@ module.exports = {
     type: 'problem',
     docs: {
       description: 'enforce valid `v-slot` directives',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/valid-v-slot.html'
     },
     fixable: null,
@@ -276,10 +276,10 @@ module.exports = {
   },
   /** @param {RuleContext} context */
   create(context) {
-    const sourceCode = context.getSourceCode()
+    const sourceCode = context.sourceCode
     const tokenStore =
-      context.parserServices.getTemplateBodyTokenStore &&
-      context.parserServices.getTemplateBodyTokenStore()
+      sourceCode.parserServices.getTemplateBodyTokenStore &&
+      sourceCode.parserServices.getTemplateBodyTokenStore()
     const options = context.options[0] || {}
     const allowModifiers = options.allowModifiers === true
 
diff --git a/lib/rules/valid-v-text.js b/lib/rules/valid-v-text.js
index 1e93c14e0..b41e7f2b3 100644
--- a/lib/rules/valid-v-text.js
+++ b/lib/rules/valid-v-text.js
@@ -5,22 +5,14 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
     docs: {
       description: 'enforce valid `v-text` directives',
-      categories: ['vue3-essential', 'essential'],
+      categories: ['vue3-essential', 'vue2-essential'],
       url: 'https://eslint.vuejs.org/rules/valid-v-text.html'
     },
     fixable: null,
diff --git a/lib/utils/casing.js b/lib/utils/casing.js
index 9f911951d..a47e978cd 100644
--- a/lib/utils/casing.js
+++ b/lib/utils/casing.js
@@ -1,7 +1,3 @@
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 /**
  * Capitalize a string.
  * @param {string} str
diff --git a/lib/utils/comments.js b/lib/utils/comments.js
new file mode 100644
index 000000000..d285e7cac
--- /dev/null
+++ b/lib/utils/comments.js
@@ -0,0 +1,21 @@
+/**
+ * @param {Comment} node
+ * @returns {boolean}
+ */
+const isJSDocComment = (node) =>
+  node.type === 'Block' &&
+  node.value.charAt(0) === '*' &&
+  node.value.charAt(1) !== '*'
+
+/**
+ * @param {Comment} node
+ * @returns {boolean}
+ */
+const isBlockComment = (node) =>
+  node.type === 'Block' &&
+  (node.value.charAt(0) !== '*' || node.value.charAt(1) === '*')
+
+module.exports = {
+  isJSDocComment,
+  isBlockComment
+}
diff --git a/lib/utils/deprecated-html-elements.json b/lib/utils/deprecated-html-elements.json
index daf23f512..63a3f7162 100644
--- a/lib/utils/deprecated-html-elements.json
+++ b/lib/utils/deprecated-html-elements.json
@@ -1 +1,31 @@
-["acronym","applet","basefont","bgsound","big","blink","center","command","content","dir","element","font","frame","frameset","image","isindex","keygen","listing","marquee","menuitem","multicol","nextid","nobr","noembed","noframes","plaintext","shadow","spacer","strike","tt","xmp"]
\ No newline at end of file
+[
+  "acronym",
+  "applet",
+  "basefont",
+  "bgsound",
+  "big",
+  "blink",
+  "center",
+  "dir",
+  "font",
+  "frame",
+  "frameset",
+  "isindex",
+  "keygen",
+  "listing",
+  "marquee",
+  "menuitem",
+  "multicol",
+  "nextid",
+  "nobr",
+  "noembed",
+  "noframes",
+  "param",
+  "plaintext",
+  "rb",
+  "rtc",
+  "spacer",
+  "strike",
+  "tt",
+  "xmp"
+]
diff --git a/lib/utils/html-comments.js b/lib/utils/html-comments.js
index 5e2d3f1f4..23651e835 100644
--- a/lib/utils/html-comments.js
+++ b/lib/utils/html-comments.js
@@ -10,16 +10,8 @@
  * @typedef { Token & { type: 'HTMLCommentCloseDecoration' } } HTMLCommentCloseDecoration
  * @typedef { { open: HTMLCommentOpen, openDecoration: HTMLCommentOpenDecoration | null, value: HTMLCommentValue | null, closeDecoration: HTMLCommentCloseDecoration | null, close: HTMLCommentClose } } ParsedHTMLComment
  */
-// -----------------------------------------------------------------------------
-// Requirements
-// -----------------------------------------------------------------------------
-
 const utils = require('./')
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 const COMMENT_DIRECTIVE = /^\s*eslint-(?:en|dis)able/
 const IE_CONDITIONAL_IF = /^\[if\s+/
 const IE_CONDITIONAL_ENDIF = /\[endif]$/
@@ -230,7 +222,7 @@ function defineVisitor(context, config, visitHTMLComment, visitorOption) {
       if (!node.templateBody) {
         return
       }
-      const parse = defineParser(context.getSourceCode(), config)
+      const parse = defineParser(context.sourceCode, config)
 
       for (const comment of node.templateBody.comments) {
         if (comment.type !== 'HTMLComment') {
diff --git a/lib/utils/html-elements.json b/lib/utils/html-elements.json
index 721f7876d..ff9cdf313 100644
--- a/lib/utils/html-elements.json
+++ b/lib/utils/html-elements.json
@@ -1 +1,116 @@
-["html","body","base","head","link","meta","style","title","address","article","aside","footer","header","h1","h2","h3","h4","h5","h6","hgroup","nav","section","div","dd","dl","dt","figcaption","figure","hr","img","li","main","ol","p","pre","ul","a","b","abbr","bdi","bdo","br","cite","code","data","dfn","em","i","kbd","mark","q","rp","rt","rtc","ruby","s","samp","small","span","strong","sub","sup","time","u","var","wbr","area","audio","map","track","video","embed","object","param","source","canvas","script","noscript","del","ins","caption","col","colgroup","table","thead","tbody","tfoot","td","th","tr","button","datalist","fieldset","form","input","label","legend","meter","optgroup","option","output","progress","select","textarea","details","dialog","menu","menuitem","summary","content","element","shadow","template","slot","blockquote","iframe","noframes","picture"]
+[
+  "a",
+  "abbr",
+  "address",
+  "area",
+  "article",
+  "aside",
+  "audio",
+  "b",
+  "base",
+  "bdi",
+  "bdo",
+  "blockquote",
+  "body",
+  "br",
+  "button",
+  "canvas",
+  "caption",
+  "cite",
+  "code",
+  "col",
+  "colgroup",
+  "data",
+  "datalist",
+  "dd",
+  "del",
+  "details",
+  "dfn",
+  "dialog",
+  "div",
+  "dl",
+  "dt",
+  "em",
+  "embed",
+  "fencedframe",
+  "fieldset",
+  "figcaption",
+  "figure",
+  "footer",
+  "form",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "head",
+  "header",
+  "hgroup",
+  "hr",
+  "html",
+  "i",
+  "iframe",
+  "img",
+  "input",
+  "ins",
+  "kbd",
+  "label",
+  "legend",
+  "li",
+  "link",
+  "main",
+  "map",
+  "mark",
+  "menu",
+  "meta",
+  "meter",
+  "nav",
+  "noscript",
+  "object",
+  "ol",
+  "optgroup",
+  "option",
+  "output",
+  "p",
+  "picture",
+  "pre",
+  "progress",
+  "q",
+  "rp",
+  "rt",
+  "ruby",
+  "s",
+  "samp",
+  "script",
+  "search",
+  "section",
+  "select",
+  "selectedcontent",
+  "slot",
+  "small",
+  "source",
+  "span",
+  "strong",
+  "style",
+  "sub",
+  "summary",
+  "sup",
+  "table",
+  "tbody",
+  "td",
+  "template",
+  "textarea",
+  "tfoot",
+  "th",
+  "thead",
+  "time",
+  "title",
+  "tr",
+  "track",
+  "u",
+  "ul",
+  "var",
+  "video",
+  "wbr"
+]
diff --git a/lib/utils/indent-common.js b/lib/utils/indent-common.js
index efcde09df..6ab8a8a38 100644
--- a/lib/utils/indent-common.js
+++ b/lib/utils/indent-common.js
@@ -4,10 +4,6 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const {
   isArrowToken,
   isOpeningParenToken,
@@ -21,7 +17,7 @@ const {
   isClosingBracketToken,
   isSemicolonToken,
   isNotSemicolonToken
-} = require('eslint-utils')
+} = require('@eslint-community/eslint-utils')
 const {
   isComment,
   isNotComment,
@@ -39,9 +35,6 @@ const { defineVisitor: tsDefineVisitor } = require('./indent-ts')
  * @typedef { { type: string } & HasLocation } MaybeNode
  */
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
 const LT_CHAR = /[\n\r\u2028\u2029]/
 const LINES = /[^\n\r\u2028\u2029]+(?:$|\r\n|[\n\r\u2028\u2029])/g
 const BLOCK_COMMENT_PREFIX = /^\s*\*/
@@ -205,14 +198,14 @@ module.exports.defineVisitor = function create(
   tokenStore,
   defaultOptions
 ) {
-  if (!context.getFilename().endsWith('.vue')) return {}
+  if (!context.filename.endsWith('.vue')) return {}
 
   const options = parseOptions(
     context.options[0],
     context.options[1] || {},
     defaultOptions
   )
-  const sourceCode = context.getSourceCode()
+  const sourceCode = context.sourceCode
   /**
    * @typedef { { baseToken: Token | null, offset: number, baseline: boolean, expectedIndent: number | undefined } } OffsetData
    */
@@ -379,7 +372,7 @@ module.exports.defineVisitor = function create(
         }
         const elementTokens = getFirstAndLastTokens(
           node,
-          lastToken != null ? lastToken.range[1] : 0
+          lastToken == null ? 0 : lastToken.range[1]
         )
 
         // Collect comma/comment tokens between the last token of the previous node and the first token of this node.
@@ -585,15 +578,15 @@ module.exports.defineVisitor = function create(
   function processTopLevelNode(node, expectedIndent) {
     const token = tokenStore.getFirstToken(node)
     const offsetInfo = offsets.get(token)
-    if (offsetInfo != null) {
-      offsetInfo.expectedIndent = expectedIndent
-    } else {
+    if (offsetInfo == null) {
       offsets.set(token, {
         baseToken: null,
         offset: 0,
         baseline: false,
         expectedIndent
       })
+    } else {
+      offsetInfo.expectedIndent = expectedIndent
     }
   }
 
@@ -646,9 +639,7 @@ module.exports.defineVisitor = function create(
       const offsetInfo = offsets.get(token)
 
       if (offsetInfo != null) {
-        if (offsetInfo.expectedIndent != null) {
-          expectedIndents.push(offsetInfo.expectedIndent)
-        } else {
+        if (offsetInfo.expectedIndent == null) {
           const baseOffsetInfo = offsets.get(offsetInfo.baseToken)
           if (
             baseOffsetInfo != null &&
@@ -663,6 +654,8 @@ module.exports.defineVisitor = function create(
               break
             }
           }
+        } else {
+          expectedIndents.push(offsetInfo.expectedIndent)
         }
       }
     }
@@ -950,7 +943,12 @@ module.exports.defineVisitor = function create(
     },
     /** @param {VElement} node */
     VElement(node) {
-      if (!PREFORMATTED_ELEMENT_NAMES.has(node.name)) {
+      if (PREFORMATTED_ELEMENT_NAMES.has(node.name)) {
+        const startTagToken = tokenStore.getFirstToken(node)
+        const endTagToken = node.endTag && tokenStore.getFirstToken(node.endTag)
+        setOffset(endTagToken, 0, startTagToken)
+        setPreformattedTokens(node)
+      } else {
         const isTopLevel = node.parent.type !== 'VElement'
         const offset = isTopLevel ? options.baseIndent : 1
         processNodeList(
@@ -960,11 +958,6 @@ module.exports.defineVisitor = function create(
           offset,
           false
         )
-      } else {
-        const startTagToken = tokenStore.getFirstToken(node)
-        const endTagToken = node.endTag && tokenStore.getFirstToken(node.endTag)
-        setOffset(endTagToken, 0, startTagToken)
-        setPreformattedTokens(node)
       }
     },
     /** @param {VEndTag} node */
@@ -1057,9 +1050,9 @@ module.exports.defineVisitor = function create(
       )
       if (closeToken != null && closeToken.type.endsWith('TagClose')) {
         const offset =
-          closeToken.type !== 'HTMLSelfClosingTagClose'
-            ? options.closeBracket.startTag
-            : options.closeBracket.selfClosingTag
+          closeToken.type === 'HTMLSelfClosingTagClose'
+            ? options.closeBracket.selfClosingTag
+            : options.closeBracket.startTag
         setOffset(closeToken, offset, openToken)
       }
     },
@@ -1175,14 +1168,23 @@ module.exports.defineVisitor = function create(
     },
     /** @param {CallExpression} node */
     CallExpression(node) {
+      const typeArguments =
+        'typeArguments' in node ? node.typeArguments : node.typeParameters
       const firstToken = tokenStore.getFirstToken(node)
       const rightToken = tokenStore.getLastToken(node)
       const leftToken = /** @type {Token} */ (
-        tokenStore.getTokenAfter(node.callee, isOpeningParenToken)
+        tokenStore.getTokenAfter(
+          typeArguments || node.callee,
+          isOpeningParenToken
+        )
       )
 
+      if (typeArguments) {
+        setOffset(tokenStore.getFirstToken(typeArguments), 1, firstToken)
+      }
+
       for (const optionalToken of tokenStore.getTokensBetween(
-        tokenStore.getLastToken(node.callee),
+        tokenStore.getLastToken(typeArguments || node.callee),
         leftToken,
         isOptionalToken
       )) {
@@ -1290,9 +1292,7 @@ module.exports.defineVisitor = function create(
         ...tokenStore.getTokensBetween(exportToken, node.source),
         tokenStore.getFirstToken(node.source)
       ]
-      if (!node.exported) {
-        setOffset(tokens, 1, exportToken)
-      } else {
+      if (node.exported) {
         // export * as foo from "mod"
         const starToken = /** @type {Token} */ (tokens.find(isWildcard))
         const asToken = tokenStore.getTokenAfter(starToken)
@@ -1303,6 +1303,8 @@ module.exports.defineVisitor = function create(
         setOffset(asToken, 1, starToken)
         setOffset(exportedToken, 1, starToken)
         setOffset(afterTokens, 1, exportToken)
+      } else {
+        setOffset(tokens, 1, exportToken)
       }
 
       // assertions
@@ -1529,8 +1531,13 @@ module.exports.defineVisitor = function create(
       const tokens = tokenStore.getTokensBetween(importToken, node.source)
       const fromIndex = tokens.map((t) => t.value).lastIndexOf('from')
       const { fromToken, beforeTokens, afterTokens } =
-        fromIndex >= 0
+        fromIndex === -1
           ? {
+              fromToken: null,
+              beforeTokens: [...tokens, tokenStore.getFirstToken(node.source)],
+              afterTokens: []
+            }
+          : {
               fromToken: tokens[fromIndex],
               beforeTokens: tokens.slice(0, fromIndex),
               afterTokens: [
@@ -1538,11 +1545,6 @@ module.exports.defineVisitor = function create(
                 tokenStore.getFirstToken(node.source)
               ]
             }
-          : {
-              fromToken: null,
-              beforeTokens: [...tokens, tokenStore.getFirstToken(node.source)],
-              afterTokens: []
-            }
 
       /** @type {ImportSpecifier[]} */
       const namedSpecifiers = []
@@ -1554,7 +1556,7 @@ module.exports.defineVisitor = function create(
           removeTokens.shift()
           for (const token of removeTokens) {
             const i = beforeTokens.indexOf(token)
-            if (i >= 0) {
+            if (i !== -1) {
               beforeTokens.splice(i, 1)
             }
           }
@@ -1574,7 +1576,7 @@ module.exports.defineVisitor = function create(
           rightBrace
         ]) {
           const i = beforeTokens.indexOf(token)
-          if (i >= 0) {
+          if (i !== -1) {
             beforeTokens.splice(i, 1)
           }
         }
@@ -1694,17 +1696,23 @@ module.exports.defineVisitor = function create(
     },
     /** @param {NewExpression} node */
     NewExpression(node) {
+      const typeArguments =
+        'typeArguments' in node ? node.typeArguments : node.typeParameters
       const newToken = tokenStore.getFirstToken(node)
       const calleeToken = tokenStore.getTokenAfter(newToken)
       const rightToken = tokenStore.getLastToken(node)
       const leftToken = isClosingParenToken(rightToken)
         ? tokenStore.getFirstTokenBetween(
-            node.callee,
+            typeArguments || node.callee,
             rightToken,
             isOpeningParenToken
           )
         : null
 
+      if (typeArguments) {
+        setOffset(tokenStore.getFirstToken(typeArguments), 1, calleeToken)
+      }
+
       setOffset(calleeToken, 1, newToken)
       if (leftToken != null) {
         setOffset(leftToken, 1, calleeToken)
@@ -1728,7 +1736,11 @@ module.exports.defineVisitor = function create(
     SwitchCase(node) {
       const caseToken = tokenStore.getFirstToken(node)
 
-      if (node.test != null) {
+      if (node.test == null) {
+        const colonToken = tokenStore.getTokenAfter(caseToken)
+
+        setOffset(colonToken, 1, caseToken)
+      } else {
         const testToken = tokenStore.getTokenAfter(caseToken)
         const colonToken = tokenStore.getTokenAfter(
           node.test,
@@ -1736,10 +1748,6 @@ module.exports.defineVisitor = function create(
         )
 
         setOffset([testToken, colonToken], 1, caseToken)
-      } else {
-        const colonToken = tokenStore.getTokenAfter(caseToken)
-
-        setOffset(colonToken, 1, caseToken)
       }
 
       if (
diff --git a/lib/utils/indent-ts.js b/lib/utils/indent-ts.js
index f2f5b69cf..034bde947 100644
--- a/lib/utils/indent-ts.js
+++ b/lib/utils/indent-ts.js
@@ -11,8 +11,8 @@ const {
   isNotClosingParenToken,
   isClosingBracketToken,
   isOpeningBracketToken
-} = require('eslint-utils')
-const { isTypeNode } = require('./ts-ast-utils')
+} = require('@eslint-community/eslint-utils')
+const { isTypeNode } = require('./ts-utils')
 
 /**
  * @typedef {import('../../typings/eslint-plugin-vue/util-types/indent-helper').TSNodeListener} TSNodeListener
@@ -29,6 +29,7 @@ const { isTypeNode } = require('./ts-ast-utils')
  * @typedef {import('@typescript-eslint/types').TSESTree.TSImportEqualsDeclaration} TSImportEqualsDeclaration
  * @typedef {import('@typescript-eslint/types').TSESTree.TSAbstractMethodDefinition} TSAbstractMethodDefinition
  * @typedef {import('@typescript-eslint/types').TSESTree.TSAbstractPropertyDefinition} TSAbstractPropertyDefinition
+ * @typedef {import('@typescript-eslint/types').TSESTree.TSAbstractAccessorProperty} TSAbstractAccessorProperty
  * @typedef {import('@typescript-eslint/types').TSESTree.TSEnumMember} TSEnumMember
  * @typedef {import('@typescript-eslint/types').TSESTree.TSPropertySignature} TSPropertySignature
  * @typedef {import('@typescript-eslint/types').TSESTree.TSIndexSignature} TSIndexSignature
@@ -50,6 +51,10 @@ const { isTypeNode } = require('./ts-ast-utils')
  * @typedef {import('@typescript-eslint/types').TSESTree.TSInferType} TSInferType
  * @typedef {import('@typescript-eslint/types').TSESTree.TSOptionalType} TSOptionalType
  * @typedef {import('@typescript-eslint/types').TSESTree.TSNonNullExpression} TSNonNullExpression
+ * @typedef {import('@typescript-eslint/types').TSESTree.TSAsExpression} TSAsExpression
+ * @typedef {import('@typescript-eslint/types').TSESTree.TSSatisfiesExpression} TSSatisfiesExpression
+ * @typedef {import('@typescript-eslint/types').TSESTree.TSTypeReference} TSTypeReference
+ * @typedef {import('@typescript-eslint/types').TSESTree.TSInstantiationExpression} TSInstantiationExpression
  * @typedef {import('@typescript-eslint/types').TSESTree.JSXChild} JSXChild
  * @typedef {import('@typescript-eslint/types').TSESTree.TypeNode} TypeNode
  *
@@ -184,9 +189,12 @@ function defineVisitor({
           tokenStore.getFirstToken(node.id || node)
         )
       }
-      if (node.superTypeParameters != null && node.superClass != null) {
+      const superTypeArguments =
+        node.superTypeArguments ||
+        /** @type {any} for old parser */ (node).superTypeParameters
+      if (superTypeArguments != null && node.superClass != null) {
         setOffset(
-          tokenStore.getFirstToken(node.superTypeParameters),
+          tokenStore.getFirstToken(superTypeArguments),
           1,
           tokenStore.getFirstToken(node.superClass)
         )
@@ -206,24 +214,24 @@ function defineVisitor({
      *   | TSImportEqualsDeclaration
      *   | TSAbstractMethodDefinition
      *   | TSAbstractPropertyDefinition
-     *   | TSAbstractClassProperty
+     *   | TSAbstractAccessorProperty
      *   | TSEnumMember
-     *   | ClassProperty
      *   | TSPropertySignature
      *   | TSIndexSignature
-     *   | TSMethodSignature} node
+     *   | TSMethodSignature
+     *   | ClassProperty
+     *   | TSAbstractClassProperty} node
      */
     ['TSTypeAliasDeclaration, TSCallSignatureDeclaration, TSConstructSignatureDeclaration, TSImportEqualsDeclaration,' +
-      'TSAbstractMethodDefinition, TSAbstractPropertyDefinition, TSEnumMember,' +
+      'TSAbstractMethodDefinition, TSAbstractPropertyDefinition, TSAbstractAccessorProperty, TSEnumMember,' +
       'TSPropertySignature, TSIndexSignature, TSMethodSignature,' +
       // Deprecated in @typescript-eslint/parser v5
       'ClassProperty, TSAbstractClassProperty'](node) {
       processSemicolons(node)
     },
     /**
-     * @param {TSESTreeNode} node
+     * @param {ASTNode} node
      */
-    // eslint-disable-next-line complexity -- ignore
     '*[type=/^TS/]'(node) {
       if (!isTypeNode(node)) {
         return
@@ -279,40 +287,61 @@ function defineVisitor({
       }
     },
     /**
-     * Process as expression
+     * Process as expression or satisfies expression
      *
      * e.g.
      * ```
      * var foo = bar as boolean
      * //        ^^^^^^^^^^^^^^
      * ```
+     *
+     * e.g.
+     * ```
+     * var foo = bar satisfies Bar
+     * //        ^^^^^^^^^^^^^^^^^
+     * ```
+     *
+     * @param {TSAsExpression | TSSatisfiesExpression} node
      */
-    TSAsExpression(node) {
+    'TSAsExpression, TSSatisfiesExpression'(node) {
       const expressionTokens = getFirstAndLastTokens(node.expression)
-      const asToken = tokenStore.getTokenAfter(expressionTokens.lastToken)
+      const asOrSatisfiesToken = tokenStore.getTokenAfter(
+        expressionTokens.lastToken
+      )
       setOffset(
-        [asToken, getFirstAndLastTokens(node.typeAnnotation).firstToken],
+        [
+          asOrSatisfiesToken,
+          getFirstAndLastTokens(node.typeAnnotation).firstToken
+        ],
         1,
         expressionTokens.firstToken
       )
     },
     /**
-     * Process type reference
+     * Process type reference and instantiation expression
      *
      * e.g.
      * ```
      * const foo: Type<P>
      * //         ^^^^^^^
      * ```
+     *
+     * e.g.
+     * ```
+     * const ErrorMap = Map<string, Error>;
+     * //               ^^^^^^^^^^^^^^^^^^
+     * ```
+     *
+     * @param {TSTypeReference | TSInstantiationExpression} node
      */
-    TSTypeReference(node) {
-      if (node.typeParameters) {
-        const typeNameTokens = getFirstAndLastTokens(node.typeName)
-        setOffset(
-          tokenStore.getFirstToken(node.typeParameters),
-          1,
-          typeNameTokens.firstToken
-        )
+    'TSTypeReference, TSInstantiationExpression'(node) {
+      const typeArguments =
+        'typeArguments' in node
+          ? node.typeArguments
+          : /** @type {any} typescript-eslint v5 */ (node).typeParameters
+      if (typeArguments) {
+        const firstToken = tokenStore.getFirstToken(node)
+        setOffset(tokenStore.getFirstToken(typeArguments), 1, firstToken)
       }
     },
     /**
@@ -574,9 +603,11 @@ function defineVisitor({
     TSMappedType(node) {
       // {[key in foo]: bar}
       const leftBraceToken = tokenStore.getFirstToken(node)
-      const leftBracketToken = tokenStore.getTokenBefore(node.typeParameter)
+      const leftBracketToken = tokenStore.getTokenBefore(
+        node.key || node.typeParameter
+      )
       const rightBracketToken = tokenStore.getTokenAfter(
-        node.nameType || node.typeParameter
+        node.nameType || node.constraint || node.typeParameter
       )
       setOffset(
         [
@@ -587,11 +618,21 @@ function defineVisitor({
         leftBraceToken
       )
       processNodeList(
-        [node.typeParameter, node.nameType],
+        [node.key || node.typeParameter, node.nameType],
         leftBracketToken,
         rightBracketToken,
         1
       )
+      if (node.constraint) {
+        setOffset(
+          [
+            ...tokenStore.getTokensBetween(node.key, node.constraint),
+            tokenStore.getFirstToken(node.constraint)
+          ],
+          1,
+          tokenStore.getFirstToken(node.key)
+        )
+      }
       const rightBraceToken = tokenStore.getLastToken(node)
       if (node.typeAnnotation) {
         const typeAnnotationToken = tokenStore.getFirstToken(
@@ -637,7 +678,7 @@ function defineVisitor({
         const [, ...removeTokens] = tokenStore.getTokens(child)
         for (const token of removeTokens) {
           const i = afterTokens.indexOf(token)
-          if (i >= 0) {
+          if (i !== -1) {
             afterTokens.splice(i, 1)
           }
         }
@@ -769,9 +810,12 @@ function defineVisitor({
      * @param {TSInterfaceHeritage | TSClassImplements} node
      */
     'TSClassImplements, TSInterfaceHeritage'(node) {
-      if (node.typeParameters) {
+      const typeArguments =
+        node.typeArguments ||
+        /** @type {any} for old parser */ (node).typeParameters
+      if (typeArguments) {
         setOffset(
-          tokenStore.getFirstToken(node.typeParameters),
+          tokenStore.getFirstToken(typeArguments),
           1,
           tokenStore.getFirstToken(node)
         )
@@ -797,6 +841,15 @@ function defineVisitor({
       const leftBraceToken = tokenStore.getTokenAfter(idTokens.lastToken)
       const rightBraceToken = tokenStore.getLastToken(node)
       setOffset(leftBraceToken, 0, firstToken)
+      if (node.body) {
+        return
+      }
+      // For old parser
+      processNodeList(node.members, leftBraceToken, rightBraceToken, 1)
+    },
+    TSEnumBody(node) {
+      const leftBraceToken = tokenStore.getFirstToken(node)
+      const rightBraceToken = tokenStore.getLastToken(node)
       processNodeList(node.members, leftBraceToken, rightBraceToken, 1)
     },
     TSModuleDeclaration(node) {
@@ -1053,10 +1106,10 @@ function defineVisitor({
      * //         ^^^^^^^
      * ```
      *
-     * @param {TSAbstractMethodDefinition | TSAbstractPropertyDefinition | TSEnumMember | TSAbstractClassProperty | ClassProperty} node
+     * @param {TSAbstractMethodDefinition | TSAbstractPropertyDefinition | TSAbstractAccessorProperty | TSEnumMember | TSAbstractClassProperty | ClassProperty} node
      *
      */
-    ['TSAbstractMethodDefinition, TSAbstractPropertyDefinition, TSEnumMember,' +
+    ['TSAbstractMethodDefinition, TSAbstractPropertyDefinition, TSAbstractAccessorProperty, TSEnumMember,' +
       // Deprecated in @typescript-eslint/parser v5
       'ClassProperty, TSAbstractClassProperty'](node) {
       const { keyNode, valueNode } =
@@ -1146,18 +1199,36 @@ function defineVisitor({
         isOpeningParenToken
       )
       setOffset(leftParenToken, 1, firstToken)
+
+      const args = []
+      if (node.source) {
+        args.push(node.source)
+      } else {
+        // For old typescript-eslint parser
+        args.push(
+          node.argument ||
+            /** @type {any} typescript-eslint v5 */ (node).parameter
+        )
+      }
+      if (node.options) {
+        args.push(node.options)
+      }
       const rightParenToken = tokenStore.getTokenAfter(
-        node.parameter,
+        args[args.length - 1],
         isClosingParenToken
       )
-      processNodeList([node.parameter], leftParenToken, rightParenToken, 1)
+      processNodeList(args, leftParenToken, rightParenToken, 1)
       if (node.qualifier) {
         const dotToken = tokenStore.getTokenBefore(node.qualifier)
         const propertyToken = tokenStore.getTokenAfter(dotToken)
         setOffset([dotToken, propertyToken], 1, firstToken)
       }
-      if (node.typeParameters) {
-        setOffset(tokenStore.getFirstToken(node.typeParameters), 1, firstToken)
+      const typeArguments =
+        'typeArguments' in node
+          ? node.typeArguments
+          : /** @type {any} typescript-eslint v5 */ (node).typeParameters
+      if (typeArguments) {
+        setOffset(tokenStore.getFirstToken(typeArguments), 1, firstToken)
       }
     },
     TSParameterProperty(node) {
@@ -1302,6 +1373,42 @@ function defineVisitor({
         setOffset(atToken, 0, tokenStore.getFirstToken(decorators[0]))
       }
     },
+    AccessorProperty(node) {
+      const keyNode = node.key
+      const valueNode = node.value
+      const firstToken = tokenStore.getFirstToken(node)
+      const keyTokens = getFirstAndLastTokens(keyNode)
+      const prefixTokens = tokenStore.getTokensBetween(
+        firstToken,
+        keyTokens.firstToken
+      )
+      if (node.computed) {
+        prefixTokens.pop() // pop opening bracket character (`[`)
+      }
+      setOffset(prefixTokens, 0, firstToken)
+      let lastKeyToken
+      if (node.computed) {
+        const leftBracketToken = tokenStore.getTokenBefore(keyTokens.firstToken)
+        const rightBracketToken = (lastKeyToken = tokenStore.getTokenAfter(
+          keyTokens.lastToken
+        ))
+        setOffset(leftBracketToken, 0, firstToken)
+        processNodeList([keyNode], leftBracketToken, rightBracketToken, 1)
+      } else {
+        setOffset(keyTokens.firstToken, 0, firstToken)
+        lastKeyToken = keyTokens.lastToken
+      }
+
+      if (valueNode != null) {
+        const initToken = tokenStore.getFirstToken(valueNode)
+        setOffset(
+          [...tokenStore.getTokensBetween(lastKeyToken, initToken), initToken],
+          1,
+          lastKeyToken
+        )
+      }
+      processSemicolons(node)
+    },
     ImportAttribute(node) {
       const firstToken = tokenStore.getFirstToken(node)
       const keyTokens = getFirstAndLastTokens(node.key)
diff --git a/lib/utils/index.js b/lib/utils/index.js
index 5a423faa4..56ad32b4b 100644
--- a/lib/utils/index.js
+++ b/lib/utils/index.js
@@ -5,6 +5,8 @@
  */
 'use strict'
 
+const { getScope } = require('./scope')
+
 /**
  * @typedef {import('eslint').Rule.RuleModule} RuleModule
  * @typedef {import('estree').Position} Position
@@ -15,13 +17,21 @@
  * @typedef {import('../../typings/eslint-plugin-vue/util-types/utils').ComponentArrayProp} ComponentArrayProp
  * @typedef {import('../../typings/eslint-plugin-vue/util-types/utils').ComponentObjectProp} ComponentObjectProp
  * @typedef {import('../../typings/eslint-plugin-vue/util-types/utils').ComponentTypeProp} ComponentTypeProp
+ * @typedef {import('../../typings/eslint-plugin-vue/util-types/utils').ComponentInferTypeProp} ComponentInferTypeProp
  * @typedef {import('../../typings/eslint-plugin-vue/util-types/utils').ComponentUnknownProp} ComponentUnknownProp
  * @typedef {import('../../typings/eslint-plugin-vue/util-types/utils').ComponentProp} ComponentProp
  * @typedef {import('../../typings/eslint-plugin-vue/util-types/utils').ComponentArrayEmit} ComponentArrayEmit
  * @typedef {import('../../typings/eslint-plugin-vue/util-types/utils').ComponentObjectEmit} ComponentObjectEmit
  * @typedef {import('../../typings/eslint-plugin-vue/util-types/utils').ComponentTypeEmit} ComponentTypeEmit
+ * @typedef {import('../../typings/eslint-plugin-vue/util-types/utils').ComponentInferTypeEmit} ComponentInferTypeEmit
  * @typedef {import('../../typings/eslint-plugin-vue/util-types/utils').ComponentUnknownEmit} ComponentUnknownEmit
  * @typedef {import('../../typings/eslint-plugin-vue/util-types/utils').ComponentEmit} ComponentEmit
+ * @typedef {import('../../typings/eslint-plugin-vue/util-types/utils').ComponentTypeSlot} ComponentTypeSlot
+ * @typedef {import('../../typings/eslint-plugin-vue/util-types/utils').ComponentInferTypeSlot} ComponentInferTypeSlot
+ * @typedef {import('../../typings/eslint-plugin-vue/util-types/utils').ComponentUnknownSlot} ComponentUnknownSlot
+ * @typedef {import('../../typings/eslint-plugin-vue/util-types/utils').ComponentSlot} ComponentSlot
+ * @typedef {import('../../typings/eslint-plugin-vue/util-types/utils').ComponentModelName} ComponentModelName
+ * @typedef {import('../../typings/eslint-plugin-vue/util-types/utils').ComponentModel} ComponentModel
  */
 /**
  * @typedef { {key: string | null, value: BlockStatement | null} } ComponentComputedProperty
@@ -45,6 +55,7 @@
 
 const HTML_ELEMENT_NAMES = new Set(require('./html-elements.json'))
 const SVG_ELEMENT_NAMES = new Set(require('./svg-elements.json'))
+const MATH_ELEMENT_NAMES = new Set(require('./math-elements.json'))
 const VOID_ELEMENT_NAMES = new Set(require('./void-elements.json'))
 const VUE2_BUILTIN_COMPONENT_NAMES = new Set(
   require('./vue2-builtin-components')
@@ -52,15 +63,21 @@ const VUE2_BUILTIN_COMPONENT_NAMES = new Set(
 const VUE3_BUILTIN_COMPONENT_NAMES = new Set(
   require('./vue3-builtin-components')
 )
+const VUE_BUILTIN_ELEMENT_NAMES = new Set(require('./vue-builtin-elements'))
+const { createRequire } = require('module')
 const path = require('path')
 const vueEslintParser = require('vue-eslint-parser')
 const { traverseNodes, getFallbackKeys, NS } = vueEslintParser.AST
-const { findVariable } = require('eslint-utils')
+const {
+  findVariable,
+  ReferenceTracker
+} = require('@eslint-community/eslint-utils')
 const {
   getComponentPropsFromTypeDefine,
   getComponentEmitsFromTypeDefine,
+  getComponentSlotsFromTypeDefine,
   isTypeNode
-} = require('./ts-ast-utils')
+} = require('./ts-utils')
 
 /**
  * @type { WeakMap<RuleContext, Token[]> }
@@ -68,15 +85,60 @@ const {
 const componentComments = new WeakMap()
 
 /** @type { Map<string, RuleModule> | null } */
-let ruleMap = null
+let coreRuleMap = null
+/** @type { Map<string, RuleModule> } */
+const stylisticRuleMap = new Map()
 /**
  * Get the core rule implementation from the rule name
  * @param {string} name
  * @returns {RuleModule | null}
  */
 function getCoreRule(name) {
-  const map = ruleMap || (ruleMap = new (require('eslint').Linter)().getRules())
-  return map.get(name) || null
+  const eslint = require('eslint')
+  try {
+    const map = coreRuleMap || (coreRuleMap = new eslint.Linter().getRules())
+    return map.get(name) || null
+  } catch {
+    // getRules() is no longer available in flat config.
+  }
+
+  const { builtinRules } = require('eslint/use-at-your-own-risk')
+  return /** @type {any} */ (builtinRules.get(name) || null)
+}
+/**
+ * Get ESLint Stylistic rule implementation from the rule name
+ * @param {string} name
+ * @param {'@stylistic/eslint-plugin' | '@stylistic/eslint-plugin-ts' | '@stylistic/eslint-plugin-js'} [preferModule]
+ * @returns {RuleModule | null}
+ */
+function getStylisticRule(name, preferModule) {
+  if (!preferModule) {
+    const cached = stylisticRuleMap.get(name)
+    if (cached) {
+      return cached
+    }
+  }
+  const stylisticPluginNames = [
+    '@stylistic/eslint-plugin',
+    '@stylistic/eslint-plugin-ts',
+    '@stylistic/eslint-plugin-js'
+  ]
+  if (preferModule) {
+    stylisticPluginNames.unshift(preferModule)
+  }
+  for (const stylisticPluginName of stylisticPluginNames) {
+    try {
+      const plugin = createRequire(`${process.cwd()}/__placeholder__.js`)(
+        stylisticPluginName
+      )
+      const rule = plugin?.rules?.[name]
+      if (!preferModule) stylisticRuleMap.set(name, rule)
+      return rule
+    } catch {
+      // ignore
+    }
+  }
+  return null
 }
 
 /**
@@ -123,10 +185,10 @@ function newProxy(target, ...propsArray) {
  * @returns {RuleContext}
  */
 function wrapContextToOverrideTokenMethods(context, tokenStore, options) {
-  const eslintSourceCode = context.getSourceCode()
+  const eslintSourceCode = context.sourceCode
   const rootNode = options.applyDocument
-    ? context.parserServices.getDocumentFragment &&
-      context.parserServices.getDocumentFragment()
+    ? eslintSourceCode.parserServices.getDocumentFragment &&
+      eslintSourceCode.parserServices.getDocumentFragment()
     : eslintSourceCode.ast.templateBody
   /** @type {Token[] | null} */
   let tokensAndComments = null
@@ -188,15 +250,19 @@ function wrapContextToOverrideTokenMethods(context, tokenStore, options) {
       get tokensAndComments() {
         return getTokensAndComments()
       },
-      getNodeByRangeIndex
+      getNodeByRangeIndex,
+      // @ts-expect-error -- Added in ESLint v8.38.0
+      getDeclaredVariables
     },
     tokenStore
   )
 
+  /** @type {WeakMap<ASTNode, import('eslint').Scope.ScopeManager>} */
   const containerScopes = new WeakMap()
 
   /**
    * @param {ASTNode} node
+   * @returns {import('eslint').Scope.ScopeManager|null}
    */
   function getContainerScope(node) {
     const exprContainer = getVExpressionContainer(node)
@@ -208,9 +274,11 @@ function wrapContextToOverrideTokenMethods(context, tokenStore, options) {
       return cache
     }
     const programNode = eslintSourceCode.ast
-    const parserOptions = context.parserOptions || {}
+    const parserOptions =
+      context.languageOptions?.parserOptions ?? context.parserOptions ?? {}
     const ecmaFeatures = parserOptions.ecmaFeatures || {}
-    const ecmaVersion = parserOptions.ecmaVersion || 2020
+    const ecmaVersion =
+      context.languageOptions?.ecmaVersion ?? parserOptions.ecmaVersion ?? 2020
     const sourceType = programNode.sourceType
     try {
       const eslintScope = createRequire(require.resolve('eslint'))(
@@ -234,7 +302,7 @@ function wrapContextToOverrideTokenMethods(context, tokenStore, options) {
       })
       containerScopes.set(exprContainer, scope)
       return scope
-    } catch (error) {
+    } catch {
       // ignore
       // console.log(error)
     }
@@ -245,15 +313,20 @@ function wrapContextToOverrideTokenMethods(context, tokenStore, options) {
     getSourceCode() {
       return sourceCode
     },
-    getDeclaredVariables(node) {
-      const scope = getContainerScope(node)
-      if (scope) {
-        return scope.getDeclaredVariables(node)
-      }
-
-      return context.getDeclaredVariables(node)
-    }
+    get sourceCode() {
+      return sourceCode
+    },
+    getDeclaredVariables
   })
+
+  /**
+   * @param {ESNode} node
+   * @returns {Variable[]}
+   */
+  function getDeclaredVariables(node) {
+    const scope = getContainerScope(node)
+    return scope?.getDeclaredVariables(node) ?? []
+  }
 }
 
 /**
@@ -262,7 +335,7 @@ function wrapContextToOverrideTokenMethods(context, tokenStore, options) {
  * @returns {RuleContext}
  */
 function wrapContextToOverrideReportMethodToSkipDynamicArgument(context) {
-  const sourceCode = context.getSourceCode()
+  const sourceCode = context.sourceCode
   const templateBody = sourceCode.ast.templateBody
   if (!templateBody) {
     return context
@@ -310,6 +383,267 @@ function wrapContextToOverrideReportMethodToSkipDynamicArgument(context) {
   })
 }
 
+/**
+ * @callback WrapRuleCreate
+ * @param {RuleContext} ruleContext
+ * @param {WrapRuleCreateContext} wrapContext
+ * @returns {TemplateListener}
+ *
+ * @typedef {object} WrapRuleCreateContext
+ * @property {RuleListener} baseHandlers
+ */
+/**
+ * @callback WrapRulePreprocess
+ * @param {RuleContext} ruleContext
+ * @param {WrapRulePreprocessContext} wrapContext
+ * @returns {void}
+ *
+ * @typedef {object} WrapRulePreprocessContext
+ * @property { (override: Partial<RuleContext>) => RuleContext } wrapContextToOverrideProperties Wrap the rule context object to override
+ * @property { (visitor: TemplateListener) => void } defineVisitor Define template body visitor
+ */
+/**
+ * @typedef {object} WrapRuleOptions
+ * @property {string[]} [categories] The categories of this rule.
+ * @property {boolean} [skipDynamicArguments] If `true`, skip validation within dynamic arguments.
+ * @property {boolean} [skipDynamicArgumentsReport] If `true`, skip report within dynamic arguments.
+ * @property {boolean} [applyDocument] If `true`, apply check to document fragment.
+ * @property {boolean} [skipBaseHandlers] If `true`, skip base rule handlers.
+ * @property {WrapRulePreprocess} [preprocess] Preprocess to calling create of base rule.
+ * @property {WrapRuleCreate} [create] If define, extend base rule.
+ */
+/**
+ * Wrap a given core rule to apply it to Vue.js template.
+ * @param {string} coreRuleName The name of the core rule implementation to wrap.
+ * @param {WrapRuleOptions} [options] The option of this rule.
+ * @returns {RuleModule} The wrapped rule implementation.
+ */
+function wrapCoreRule(coreRuleName, options) {
+  const coreRule = getCoreRule(coreRuleName)
+  if (!coreRule) {
+    return {
+      meta: {
+        type: 'problem',
+        docs: {
+          url: `https://eslint.vuejs.org/rules/${coreRuleName}.html`
+        }
+      },
+      create(context) {
+        return defineTemplateBodyVisitor(context, {
+          "VElement[name='template'][parent.type='VDocumentFragment']"(node) {
+            context.report({
+              node,
+              message: `Failed to extend ESLint core rule "${coreRuleName}". You may be able to use this rule by upgrading the version of ESLint. If you cannot upgrade it, turn off this rule.`
+            })
+          }
+        })
+      }
+    }
+  }
+  const rule = wrapRuleModule(coreRule, coreRuleName, options)
+  const meta = {
+    ...rule.meta,
+    docs: {
+      ...rule.meta.docs,
+      extensionSource: {
+        url: coreRule.meta.docs.url,
+        name: 'ESLint core'
+      }
+    }
+  }
+  return {
+    ...rule,
+    meta
+  }
+}
+/**
+ * @typedef {object} RuleNames
+ * @property {string} core The name of the core rule implementation to wrap.
+ * @property {string} stylistic The name of ESLint Stylistic rule implementation to wrap.
+ * @property {string} vue The name of the wrapped rule
+ */
+/**
+ * Wrap a core rule or ESLint Stylistic rule to apply it to Vue.js template.
+ * @param {RuleNames|string} ruleNames The names of the rule implementation to wrap.
+ * @param {WrapRuleOptions} [options] The option of this rule.
+ * @returns {RuleModule} The wrapped rule implementation.
+ */
+function wrapStylisticOrCoreRule(ruleNames, options) {
+  const stylisticRuleName =
+    typeof ruleNames === 'string' ? ruleNames : ruleNames.stylistic
+  const coreRuleName =
+    typeof ruleNames === 'string' ? ruleNames : ruleNames.core
+  const vueRuleName = typeof ruleNames === 'string' ? ruleNames : ruleNames.vue
+  const stylisticRule = getStylisticRule(stylisticRuleName)
+  const baseRule = stylisticRule || getCoreRule(coreRuleName)
+  if (!baseRule) {
+    return {
+      meta: {
+        type: 'problem',
+        docs: {
+          url: `https://eslint.vuejs.org/rules/${vueRuleName}.html`
+        }
+      },
+      create(context) {
+        return defineTemplateBodyVisitor(context, {
+          "VElement[name='template'][parent.type='VDocumentFragment']"(node) {
+            context.report({
+              node,
+              message: `Failed to extend ESLint Stylistic rule "${stylisticRule}". You may be able to use this rule by installing ESLint Stylistic plugin (https://eslint.style/). If you cannot install it, turn off this rule.`
+            })
+          }
+        })
+      }
+    }
+  }
+  const rule = wrapRuleModule(baseRule, vueRuleName, options)
+  const jsRule = getStylisticRule(
+    stylisticRuleName,
+    '@stylistic/eslint-plugin-js'
+  )
+  const description = stylisticRule
+    ? `${jsRule?.meta.docs.description} in \`<template>\``
+    : rule.meta.docs.description
+  const meta = {
+    ...rule.meta,
+    docs: {
+      ...rule.meta.docs,
+      description,
+      extensionSource: {
+        url: baseRule.meta.docs.url,
+        name: stylisticRule ? 'ESLint Stylistic' : 'ESLint core'
+      }
+    },
+    deprecated: undefined,
+    replacedBy: undefined
+  }
+  return {
+    ...rule,
+    meta
+  }
+}
+/**
+ * Wrap a given rule to apply it to Vue.js template.
+ * @param {RuleModule} baseRule The rule implementation to wrap.
+ * @param {string} ruleName The name of the wrapped rule.
+ * @param {WrapRuleOptions} [options] The option of this rule.
+ * @returns {RuleModule} The wrapped rule implementation.
+ */
+function wrapRuleModule(baseRule, ruleName, options) {
+  let description = baseRule.meta.docs.description
+  if (description) {
+    description += ' in `<template>`'
+  }
+
+  const {
+    categories,
+    skipDynamicArguments,
+    skipDynamicArgumentsReport,
+    skipBaseHandlers,
+    applyDocument,
+    preprocess,
+    create
+  } = options || {}
+  return {
+    create(context) {
+      const sourceCode = context.sourceCode
+      const tokenStore =
+        sourceCode.parserServices.getTemplateBodyTokenStore &&
+        sourceCode.parserServices.getTemplateBodyTokenStore()
+
+      // The `context.sourceCode` cannot access the tokens of templates.
+      // So override the methods which access to tokens by the `tokenStore`.
+      if (tokenStore) {
+        context = wrapContextToOverrideTokenMethods(context, tokenStore, {
+          applyDocument
+        })
+      }
+
+      if (skipDynamicArgumentsReport) {
+        context =
+          wrapContextToOverrideReportMethodToSkipDynamicArgument(context)
+      }
+
+      /** @type {TemplateListener} */
+      const handlers = {}
+
+      if (preprocess) {
+        preprocess(context, {
+          wrapContextToOverrideProperties(override) {
+            context = newProxy(context, override)
+            return context
+          },
+          defineVisitor(visitor) {
+            compositingVisitors(handlers, visitor)
+          }
+        })
+      }
+
+      const baseHandlers = baseRule.create(context)
+      if (!skipBaseHandlers) {
+        compositingVisitors(handlers, baseHandlers)
+      }
+
+      // Move `Program` handlers to `VElement[parent.type!='VElement']`
+      if (handlers.Program) {
+        handlers[
+          applyDocument
+            ? 'VDocumentFragment'
+            : "VElement[parent.type!='VElement']"
+        ] = /** @type {any} */ (handlers.Program)
+        delete handlers.Program
+      }
+      if (handlers['Program:exit']) {
+        handlers[
+          applyDocument
+            ? 'VDocumentFragment:exit'
+            : "VElement[parent.type!='VElement']:exit"
+        ] = /** @type {any} */ (handlers['Program:exit'])
+        delete handlers['Program:exit']
+      }
+
+      if (skipDynamicArguments) {
+        let withinDynamicArguments = false
+        for (const name of Object.keys(handlers)) {
+          const original = handlers[name]
+          /** @param {any[]} args */
+          handlers[name] = (...args) => {
+            if (withinDynamicArguments) return
+            // @ts-expect-error
+            original(...args)
+          }
+        }
+        handlers['VDirectiveKey > VExpressionContainer'] = () => {
+          withinDynamicArguments = true
+        }
+        handlers['VDirectiveKey > VExpressionContainer:exit'] = () => {
+          withinDynamicArguments = false
+        }
+      }
+
+      if (create) {
+        compositingVisitors(handlers, create(context, { baseHandlers }))
+      }
+
+      if (applyDocument) {
+        // Apply the handlers to document.
+        return defineDocumentVisitor(context, handlers)
+      }
+      // Apply the handlers to templates.
+      return defineTemplateBodyVisitor(context, handlers)
+    },
+
+    meta: Object.assign({}, baseRule.meta, {
+      docs: Object.assign({}, baseRule.meta.docs, {
+        description,
+        category: null,
+        categories,
+        url: `https://eslint.vuejs.org/rules/${ruleName}.html`
+      })
+    })
+  }
+}
+
 // ------------------------------------------------------------------------------
 // Exports
 // ------------------------------------------------------------------------------
@@ -339,174 +673,13 @@ module.exports = {
    * @returns {RuleListener} The merged visitor.
    */
   defineDocumentVisitor,
-
-  /**
-   * @callback WrapCoreRuleCreate
-   * @param {RuleContext} ruleContext
-   * @param {WrapCoreRuleCreateContext} wrapContext
-   * @returns {TemplateListener}
-   *
-   * @typedef {object} WrapCoreRuleCreateContext
-   * @property {RuleListener} coreHandlers
-   */
-  /**
-   * @callback WrapCoreRulePreprocess
-   * @param {RuleContext} ruleContext
-   * @param {WrapCoreRulePreprocessContext} wrapContext
-   * @returns {void}
-   *
-   * @typedef {object} WrapCoreRulePreprocessContext
-   * @property { (override: Partial<RuleContext>) => RuleContext } wrapContextToOverrideProperties Wrap the rule context object to override
-   * @property { (visitor: TemplateListener) => void } defineVisitor Define template body visitor
-   */
   /**
    * Wrap a given core rule to apply it to Vue.js template.
-   * @param {string} coreRuleName The name of the core rule implementation to wrap.
-   * @param {Object} [options] The option of this rule.
-   * @param {string[]} [options.categories] The categories of this rule.
-   * @param {boolean} [options.skipDynamicArguments] If `true`, skip validation within dynamic arguments.
-   * @param {boolean} [options.skipDynamicArgumentsReport] If `true`, skip report within dynamic arguments.
-   * @param {boolean} [options.applyDocument] If `true`, apply check to document fragment.
-   * @param {WrapCoreRulePreprocess} [options.preprocess] Preprocess to calling create of core rule.
-   * @param {WrapCoreRuleCreate} [options.create] If define, extend core rule.
-   * @returns {RuleModule} The wrapped rule implementation.
-   */
-  wrapCoreRule(coreRuleName, options) {
-    const coreRule = getCoreRule(coreRuleName)
-    if (!coreRule) {
-      return {
-        meta: {
-          type: 'problem',
-          docs: {
-            url: `https://eslint.vuejs.org/rules/${coreRuleName}.html`
-          }
-        },
-        create(context) {
-          return defineTemplateBodyVisitor(context, {
-            "VElement[name='template'][parent.type='VDocumentFragment']"(node) {
-              context.report({
-                node,
-                message: `Failed to extend ESLint core rule "${coreRuleName}". You may be able to use this rule by upgrading the version of ESLint. If you cannot upgrade it, turn off this rule.`
-              })
-            }
-          })
-        }
-      }
-    }
-
-    let description = coreRule.meta.docs.description
-    if (description) {
-      description += ' in `<template>`'
-    }
-
-    const {
-      categories,
-      skipDynamicArguments,
-      skipDynamicArgumentsReport,
-      applyDocument,
-      preprocess,
-      create
-    } = options || {}
-    return {
-      create(context) {
-        const tokenStore =
-          context.parserServices.getTemplateBodyTokenStore &&
-          context.parserServices.getTemplateBodyTokenStore()
-
-        // The `context.getSourceCode()` cannot access the tokens of templates.
-        // So override the methods which access to tokens by the `tokenStore`.
-        if (tokenStore) {
-          context = wrapContextToOverrideTokenMethods(context, tokenStore, {
-            applyDocument
-          })
-        }
-
-        if (skipDynamicArgumentsReport) {
-          context =
-            wrapContextToOverrideReportMethodToSkipDynamicArgument(context)
-        }
-
-        /** @type {TemplateListener} */
-        const handlers = {}
-
-        if (preprocess) {
-          preprocess(context, {
-            wrapContextToOverrideProperties(override) {
-              context = newProxy(context, override)
-              return context
-            },
-            defineVisitor(visitor) {
-              compositingVisitors(handlers, visitor)
-            }
-          })
-        }
-
-        const coreHandlers = coreRule.create(context)
-        compositingVisitors(handlers, coreHandlers)
-
-        // Move `Program` handlers to `VElement[parent.type!='VElement']`
-        if (handlers.Program) {
-          handlers[
-            applyDocument
-              ? 'VDocumentFragment'
-              : "VElement[parent.type!='VElement']"
-          ] = /** @type {any} */ (handlers.Program)
-          delete handlers.Program
-        }
-        if (handlers['Program:exit']) {
-          handlers[
-            applyDocument
-              ? 'VDocumentFragment:exit'
-              : "VElement[parent.type!='VElement']:exit"
-          ] = /** @type {any} */ (handlers['Program:exit'])
-          delete handlers['Program:exit']
-        }
-
-        if (skipDynamicArguments) {
-          let withinDynamicArguments = false
-          for (const name of Object.keys(handlers)) {
-            const original = handlers[name]
-            /** @param {any[]} args */
-            handlers[name] = (...args) => {
-              if (withinDynamicArguments) return
-              // @ts-expect-error
-              original(...args)
-            }
-          }
-          handlers['VDirectiveKey > VExpressionContainer'] = () => {
-            withinDynamicArguments = true
-          }
-          handlers['VDirectiveKey > VExpressionContainer:exit'] = () => {
-            withinDynamicArguments = false
-          }
-        }
-
-        if (create) {
-          compositingVisitors(handlers, create(context, { coreHandlers }))
-        }
-
-        if (applyDocument) {
-          // Apply the handlers to document.
-          return defineDocumentVisitor(context, handlers)
-        }
-        // Apply the handlers to templates.
-        return defineTemplateBodyVisitor(context, handlers)
-      },
-
-      meta: Object.assign({}, coreRule.meta, {
-        docs: Object.assign({}, coreRule.meta.docs, {
-          description,
-          category: null,
-          categories,
-          url: `https://eslint.vuejs.org/rules/${path.basename(
-            coreRule.meta.docs.url || ''
-          )}.html`,
-          extensionRule: true,
-          coreRuleUrl: coreRule.meta.docs.url
-        })
-      })
-    }
-  },
+   * @type {typeof wrapCoreRule}
+   */
+  wrapCoreRule,
+  wrapStylisticOrCoreRule,
+  getCoreRule,
   /**
    * Checks whether the given value is defined.
    * @template T
@@ -555,7 +728,7 @@ module.exports = {
       return false
     }
 
-    let valueText = context.getSourceCode().getText(node.value)
+    let valueText = context.sourceCode.getText(node.value)
     if (
       (valueText[0] === '"' || valueText[0] === "'") &&
       valueText[0] === valueText[valueText.length - 1]
@@ -583,9 +756,9 @@ module.exports = {
     if (node.value.expression != null) {
       return false
     }
-
+    const sourceCode = context.sourceCode
     const valueNode = node.value
-    const tokenStore = context.parserServices.getTemplateBodyTokenStore()
+    const tokenStore = sourceCode.parserServices.getTemplateBodyTokenStore()
     let quote1 = null
     let quote2 = null
     // `node.value` may be only comments, so cannot get the correct tokens with `tokenStore.getTokens(node.value)`.
@@ -664,6 +837,8 @@ module.exports = {
    */
   hasDirective,
 
+  isVBindSameNameShorthand,
+
   /**
    * Returns the list of all registered components
    * @param {ObjectExpression} componentObject
@@ -768,17 +943,30 @@ module.exports = {
   /**
    * Check whether the given node is a custom component or not.
    * @param {VElement} node The start tag node to check.
+   * @param {boolean} [ignoreElementNamespaces=false] If `true`, ignore element namespaces.
    * @returns {boolean} `true` if the node is a custom component.
    */
-  isCustomComponent(node) {
-    return (
-      (this.isHtmlElementNode(node) &&
-        !this.isHtmlWellKnownElementName(node.rawName)) ||
-      (this.isSvgElementNode(node) &&
-        !this.isSvgWellKnownElementName(node.rawName)) ||
+  isCustomComponent(node, ignoreElementNamespaces = false) {
+    if (
       hasAttribute(node, 'is') ||
       hasDirective(node, 'bind', 'is') ||
       hasDirective(node, 'is')
+    ) {
+      return true
+    }
+
+    const isHtmlName = this.isHtmlWellKnownElementName(node.rawName)
+    const isSvgName = this.isSvgWellKnownElementName(node.rawName)
+    const isMathName = this.isMathWellKnownElementName(node.rawName)
+
+    if (ignoreElementNamespaces) {
+      return !isHtmlName && !isSvgName && !isMathName
+    }
+
+    return (
+      (this.isHtmlElementNode(node) && !isHtmlName) ||
+      (this.isSvgElementNode(node) && !isSvgName) ||
+      (this.isMathElementNode(node) && !isMathName)
     )
   },
 
@@ -805,7 +993,7 @@ module.exports = {
    * @param {VElement} node The node to check.
    * @returns {boolean} `true` if the node is a MathML element.
    */
-  isMathMLElementNode(node) {
+  isMathElementNode(node) {
     return node.namespace === NS.MathML
   },
 
@@ -827,6 +1015,15 @@ module.exports = {
     return SVG_ELEMENT_NAMES.has(name)
   },
 
+  /**
+   * Check whether the given name is a well-known MathML element or not.
+   * @param {string} name The name to check.
+   * @returns {boolean} `true` if the name is a well-known MathML element name.
+   */
+  isMathWellKnownElementName(name) {
+    return MATH_ELEMENT_NAMES.has(name)
+  },
+
   /**
    * Check whether the given name is a void element name or not.
    * @param {string} name The name to check.
@@ -848,6 +1045,15 @@ module.exports = {
     )
   },
 
+  /**
+   * Check whether the given name is Vue builtin element name or not.
+   * @param {string} name The name to check.
+   * @returns {boolean} `true` if the name is a builtin Vue element name
+   */
+  isVueBuiltInElementName(name) {
+    return VUE_BUILTIN_ELEMENT_NAMES.has(name.toLowerCase())
+  },
+
   /**
    * Check whether the given name is Vue builtin directive name or not.
    * @param {string} name The name to check.
@@ -983,6 +1189,8 @@ module.exports = {
     return null
   },
 
+  isTypeScriptFile,
+
   isVueFile,
 
   /**
@@ -1135,6 +1343,14 @@ module.exports = {
    * - `onDefinePropsExit` ... Event when defineProps visit ends.
    * - `onDefineEmitsEnter` ... Event when defineEmits is found.
    * - `onDefineEmitsExit` ... Event when defineEmits visit ends.
+   * - `onDefineOptionsEnter` ... Event when defineOptions is found.
+   * - `onDefineOptionsExit` ... Event when defineOptions visit ends.
+   * - `onDefineSlotsEnter` ... Event when defineSlots is found.
+   * - `onDefineSlotsExit` ... Event when defineSlots visit ends.
+   * - `onDefineExposeEnter` ... Event when defineExpose is found.
+   * - `onDefineExposeExit` ... Event when defineExpose visit ends.
+   * - `onDefineModelEnter` ... Event when defineModel is found.
+   * - `onDefineModelExit` ... Event when defineModel visit ends.
    *
    * @param {RuleContext} context The ESLint rule context object.
    * @param {ScriptSetupVisitor} visitor The visitor to traverse the AST nodes.
@@ -1161,7 +1377,7 @@ module.exports = {
      * @param {any[]} args
      */
     function callVisitor(key, node, ...args) {
-      if (visitor[key] && inScriptSetup(node)) {
+      if (visitor[key] && (node.type === 'Program' || inScriptSetup(node))) {
         // @ts-expect-error
         visitor[key](node, ...args)
       }
@@ -1173,11 +1389,72 @@ module.exports = {
       scriptSetupVisitor[key] = (node) => callVisitor(key, node)
     }
 
-    const hasPropsEvent =
-      visitor.onDefinePropsEnter || visitor.onDefinePropsExit
-    const hasEmitsEvent =
-      visitor.onDefineEmitsEnter || visitor.onDefineEmitsExit
-    if (hasPropsEvent || hasEmitsEvent) {
+    class MacroListener {
+      /**
+       * @param {string} name
+       * @param {string} enterName
+       * @param {string} exitName
+       * @param {(candidateMacro: Expression | null, node: CallExpression) => boolean} isMacroNode
+       * @param {(context: RuleContext, node: CallExpression) => unknown} buildParam
+       */
+      constructor(name, enterName, exitName, isMacroNode, buildParam) {
+        this.name = name
+        this.enterName = enterName
+        this.exitName = exitName
+        this.isMacroNode = isMacroNode
+        this.buildParam = buildParam
+        this.hasListener = Boolean(
+          visitor[this.enterName] || visitor[this.exitName]
+        )
+        this.paramsMap = new Map()
+      }
+    }
+    const macroListenerList = [
+      new MacroListener(
+        'defineProps',
+        'onDefinePropsEnter',
+        'onDefinePropsExit',
+        (candidateMacro, node) =>
+          candidateMacro === node || candidateMacro === getWithDefaults(node),
+        getComponentPropsFromDefineProps
+      ),
+      new MacroListener(
+        'defineEmits',
+        'onDefineEmitsEnter',
+        'onDefineEmitsExit',
+        (candidateMacro, node) => candidateMacro === node,
+        getComponentEmitsFromDefineEmits
+      ),
+      new MacroListener(
+        'defineOptions',
+        'onDefineOptionsEnter',
+        'onDefineOptionsExit',
+        (candidateMacro, node) => candidateMacro === node,
+        () => undefined
+      ),
+      new MacroListener(
+        'defineSlots',
+        'onDefineSlotsEnter',
+        'onDefineSlotsExit',
+        (candidateMacro, node) => candidateMacro === node,
+        getComponentSlotsFromDefineSlots
+      ),
+      new MacroListener(
+        'defineExpose',
+        'onDefineExposeEnter',
+        'onDefineExposeExit',
+        (candidateMacro, node) => candidateMacro === node,
+        () => undefined
+      ),
+      new MacroListener(
+        'defineModel',
+        'onDefineModelEnter',
+        'onDefineModelExit',
+        (candidateMacro, node) => candidateMacro === node,
+        getComponentModelFromDefineModel
+      )
+    ].filter((m) => m.hasListener)
+    if (macroListenerList.length > 0) {
       /** @type {Expression | null} */
       let candidateMacro = null
       /** @param {VariableDeclarator|ExpressionStatement} node */
@@ -1200,8 +1477,6 @@ module.exports = {
           candidateMacro = null
         }
       }
-      const definePropsMap = new Map()
-      const defineEmitsMap = new Map()
       /**
        * @param {CallExpression} node
        */
@@ -1211,40 +1486,32 @@ module.exports = {
           inScriptSetup(node) &&
           node.callee.type === 'Identifier'
         ) {
-          if (
-            hasPropsEvent &&
-            (candidateMacro === node ||
-              candidateMacro === getWithDefaults(node)) &&
-            node.callee.name === 'defineProps'
-          ) {
-            /** @type {ComponentProp[]} */
-            const props = getComponentPropsFromDefineProps(context, node)
-
-            callVisitor('onDefinePropsEnter', node, props)
-            definePropsMap.set(node, props)
-          } else if (
-            hasEmitsEvent &&
-            candidateMacro === node &&
-            node.callee.name === 'defineEmits'
-          ) {
-            /** @type {ComponentEmit[]} */
-            const emits = getComponentEmitsFromDefineEmits(context, node)
-
-            callVisitor('onDefineEmitsEnter', node, emits)
-            defineEmitsMap.set(node, emits)
+          for (const macroListener of macroListenerList) {
+            if (
+              node.callee.name !== macroListener.name ||
+              !macroListener.isMacroNode(candidateMacro, node)
+            ) {
+              continue
+            }
+            const param = macroListener.buildParam(context, node)
+            callVisitor(macroListener.enterName, node, param)
+            macroListener.paramsMap.set(node, param)
+            break
           }
         }
         callVisitor('CallExpression', node)
       }
       scriptSetupVisitor['CallExpression:exit'] = (node) => {
         callVisitor('CallExpression:exit', node)
-        if (definePropsMap.has(node)) {
-          callVisitor('onDefinePropsExit', node, definePropsMap.get(node))
-          definePropsMap.delete(node)
-        }
-        if (defineEmitsMap.has(node)) {
-          callVisitor('onDefineEmitsExit', node, defineEmitsMap.get(node))
-          defineEmitsMap.delete(node)
+        for (const macroListener of macroListenerList) {
+          if (macroListener.paramsMap.has(node)) {
+            callVisitor(
+              macroListener.exitName,
+              node,
+              macroListener.paramsMap.get(node)
+            )
+            macroListener.paramsMap.delete(node)
+          }
         }
       }
     }
@@ -1283,13 +1550,35 @@ module.exports = {
    * @returns { { [key: string]: Property | undefined } }
    */
   getWithDefaultsProps,
+  /**
+   * Gets the default definition nodes for defineProp
+   * using the props destructure with assignment pattern.
+   * @param {CallExpression} node The node of defineProps
+   * @returns { Record<string, {prop: AssignmentProperty , expression: Expression} | undefined> }
+   */
+  getDefaultPropExpressionsForPropsDestructure,
+  /**
+   * Checks whether the given defineProps node is using Props Destructure.
+   * @param {CallExpression} node The node of defineProps
+   * @returns {boolean}
+   */
+  isUsingPropsDestructure(node) {
+    const left = getLeftOfDefineProps(node)
+    return left?.type === 'ObjectPattern'
+  },
+  /**
+   * Gets the props destructure property nodes for defineProp.
+   * @param {CallExpression} node The node of defineProps
+   * @returns { Record<string, AssignmentProperty | undefined> }
+   */
+  getPropsDestructure,
 
   getVueObjectType,
   /**
    * Get the Vue component definition type from given node
    * Vue.component('xxx', {}) || component('xxx', {})
    * @param {ObjectExpression} node Node to check
-   * @returns {'component' | 'mixin' | 'extend' | 'createApp' | 'defineComponent' | null}
+   * @returns {'component' | 'mixin' | 'extend' | 'createApp' | 'defineComponent' | 'defineNuxtComponent' | null}
    */
   getVueComponentDefinitionType,
   /**
@@ -1534,6 +1823,7 @@ module.exports = {
      * @property {boolean} hasReturn
      * @property {boolean} hasReturnValue
      * @property {ArrowFunctionExpression | FunctionExpression | FunctionDeclaration} node
+     * @property {CodePathSegment[]} currentSegments
      */
 
     /** @type {FuncInfo | null} */
@@ -1543,10 +1833,7 @@ module.exports = {
       if (!funcInfo) {
         return true
       }
-      if (
-        funcInfo.codePath &&
-        funcInfo.codePath.currentSegments.some((segment) => segment.reachable)
-      ) {
+      if (funcInfo.currentSegments.some((segment) => segment.reachable)) {
         return false
       }
       return !treatUndefinedAsUnspecified || funcInfo.hasReturnValue
@@ -1565,6 +1852,7 @@ module.exports = {
         ) {
           funcInfo = {
             codePath,
+            currentSegments: [],
             funcInfo,
             hasReturn: false,
             hasReturnValue: false,
@@ -1572,6 +1860,12 @@ module.exports = {
           }
         }
       },
+      onCodePathSegmentStart(segment) {
+        funcInfo?.currentSegments.push(segment)
+      },
+      onCodePathSegmentEnd() {
+        funcInfo?.currentSegments.pop()
+      },
       onCodePathEnd() {
         funcInfo = funcInfo && funcInfo.funcInfo
       },
@@ -1661,21 +1955,21 @@ module.exports = {
     }
     for (let i = 1; i <= alen; i++) {
       for (let j = 1; j <= blen; j++) {
-        if (a[i - 1] === b[j - 1]) {
-          dp[i][j] = dp[i - 1][j - 1]
-        } else {
-          dp[i][j] = Math.min(dp[i - 1][j], dp[i][j - 1], dp[i - 1][j - 1]) + 1
-        }
+        dp[i][j] =
+          a[i - 1] === b[j - 1]
+            ? dp[i - 1][j - 1]
+            : Math.min(dp[i - 1][j], dp[i][j - 1], dp[i - 1][j - 1]) + 1
       }
     }
     return dp[alen][blen]
   },
   /**
    * Checks whether the target node is within the given range.
-   * @param { [number, number] } range
+   * @param { [number, number] | ASTNode | Token } rangeOrNode
    * @param {ASTNode | Token} target
    */
-  inRange(range, target) {
+  inRange(rangeOrNode, target) {
+    const range = Array.isArray(rangeOrNode) ? rangeOrNode : rangeOrNode.range
     return range[0] <= target.range[0] && target.range[1] <= range[1]
   },
   /**
@@ -1750,7 +2044,7 @@ module.exports = {
       return false
     }
 
-    const variable = findVariable(context.getScope(), node)
+    const variable = findVariable(getScope(context, node), node)
 
     if (variable != null && variable.defs.length === 1) {
       const def = variable.defs[0]
@@ -1767,6 +2061,26 @@ module.exports = {
     return false
   },
 
+  /**
+   * Check if a call expression is Object.assign with the given node as first argument
+   * @param {CallExpression} callExpr
+   * @param {ASTNode} targetNode
+   * @returns {boolean}
+   */
+  isObjectAssignCall(callExpr, targetNode) {
+    const { callee, arguments: args } = callExpr
+
+    return (
+      args.length > 0 &&
+      args[0] === targetNode &&
+      callee?.type === 'MemberExpression' &&
+      callee.object?.type === 'Identifier' &&
+      callee.object.name === 'Object' &&
+      callee.property?.type === 'Identifier' &&
+      callee.property.name === 'assign'
+    )
+  },
+
   /**
    * @param {MemberExpression|Identifier} props
    * @returns { { kind: 'assignment' | 'update' | 'call' , node: ESNode, pathNodes: MemberExpression[] } | null }
@@ -1798,6 +2112,16 @@ module.exports = {
             pathNodes
           }
         }
+        case 'UnaryExpression': {
+          if (target.operator === 'delete') {
+            return {
+              kind: 'update',
+              node: target,
+              pathNodes
+            }
+          }
+          break
+        }
         case 'CallExpression': {
           if (pathNodes.length > 0 && target.callee === node) {
             const mem = pathNodes[pathNodes.length - 1]
@@ -1817,6 +2141,14 @@ module.exports = {
               }
             }
           }
+          if (this.isObjectAssignCall(target, node)) {
+            // Object.assign(xxx, {})
+            return {
+              kind: 'call',
+              node: target,
+              pathNodes
+            }
+          }
           break
         }
         case 'MemberExpression': {
@@ -1847,14 +2179,38 @@ module.exports = {
   iterateWatchHandlerValues,
 
   /**
-   * Wraps composition API trace map in both 'vue' and '@vue/composition-api' imports
-   * @param {import('eslint-utils').TYPES.TraceMap} map
+   * Wraps composition API trace map in both 'vue' and '@vue/composition-api' imports, or '#imports' from unimport
+   * @param {import('@eslint-community/eslint-utils').TYPES.TraceMap} map
    */
   createCompositionApiTraceMap: (map) => ({
     vue: map,
-    '@vue/composition-api': map
+    '@vue/composition-api': map,
+    '#imports': map
   }),
 
+  /**
+   * Iterates all references in the given trace map.
+   * Take the third argument option to detect auto-imported references.
+   *
+   * @param {import('@eslint-community/eslint-utils').ReferenceTracker} tracker
+   * @param {import('@eslint-community/eslint-utils').TYPES.TraceMap} map
+   * @returns {ReturnType<import('@eslint-community/eslint-utils').ReferenceTracker['iterateEsmReferences']>}
+   */
+  *iterateReferencesTraceMap(tracker, map) {
+    const esmTraceMap = this.createCompositionApiTraceMap({
+      ...map,
+      [ReferenceTracker.ESM]: true
+    })
+
+    for (const ref of tracker.iterateEsmReferences(esmTraceMap)) {
+      yield ref
+    }
+
+    for (const ref of tracker.iterateGlobalReferences(map)) {
+      yield ref
+    }
+  },
+
   /**
    * Checks whether or not the tokens of two given nodes are same.
    * @param {ASTNode} left A node 1 to compare.
@@ -1918,36 +2274,6 @@ function isIterable(v) {
   return v && Symbol.iterator in v
 }
 
-// ------------------------------------------------------------------------------
-// Nodejs Helpers
-// ------------------------------------------------------------------------------
-/**
- * @param {String} filename
- */
-function createRequire(filename) {
-  const Module = require('module')
-  const moduleCreateRequire =
-    // Added in v12.2.0
-    Module.createRequire ||
-    // Added in v10.12.0, but deprecated in v12.2.0.
-    Module.createRequireFromPath ||
-    // Polyfill - This is not executed on the tests on node@>=10.
-    /**
-     * @param {string} filename
-     */
-    function (filename) {
-      const mod = new Module(filename)
-
-      mod.filename = filename
-      // @ts-ignore
-      mod.paths = Module._nodeModulePaths(path.dirname(filename))
-      // @ts-ignore
-      mod._compile('module.exports = require;', filename)
-      return mod.exports
-    }
-  return moduleCreateRequire(filename)
-}
-
 // ------------------------------------------------------------------------------
 // Rule Helpers
 // ------------------------------------------------------------------------------
@@ -1969,8 +2295,9 @@ function defineTemplateBodyVisitor(
   scriptVisitor,
   options
 ) {
-  if (context.parserServices.defineTemplateBodyVisitor == null) {
-    const filename = context.getFilename()
+  const sourceCode = context.sourceCode
+  if (sourceCode.parserServices.defineTemplateBodyVisitor == null) {
+    const filename = context.filename
     if (path.extname(filename) === '.vue') {
       context.report({
         loc: { line: 1, column: 0 },
@@ -1980,7 +2307,7 @@ function defineTemplateBodyVisitor(
     }
     return {}
   }
-  return context.parserServices.defineTemplateBodyVisitor(
+  return sourceCode.parserServices.defineTemplateBodyVisitor(
     templateBodyVisitor,
     scriptVisitor,
     options
@@ -1997,8 +2324,9 @@ function defineTemplateBodyVisitor(
  * @returns {RuleListener} The merged visitor.
  */
 function defineDocumentVisitor(context, documentVisitor, options) {
-  if (context.parserServices.defineDocumentVisitor == null) {
-    const filename = context.getFilename()
+  const sourceCode = context.sourceCode
+  if (sourceCode.parserServices.defineDocumentVisitor == null) {
+    const filename = context.filename
     if (path.extname(filename) === '.vue') {
       context.report({
         loc: { line: 1, column: 0 },
@@ -2008,7 +2336,10 @@ function defineDocumentVisitor(context, documentVisitor, options) {
     }
     return {}
   }
-  return context.parserServices.defineDocumentVisitor(documentVisitor, options)
+  return sourceCode.parserServices.defineDocumentVisitor(
+    documentVisitor,
+    options
+  )
 }
 
 /**
@@ -2053,33 +2384,6 @@ function findVariableByIdentifier(context, node) {
   return 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]
-}
-
 /**
  * Finds the property with the given name from the given ObjectExpression node.
  * @param {ObjectExpression} node
@@ -2150,7 +2454,7 @@ function isAssignmentProperty(node) {
 }
 /**
  * Checks whether the given node is VElement.
- * @param {VElement | VExpressionContainer | VText} node
+ * @param {VElement | VExpressionContainer | VText | VDocumentFragment} node
  * @returns {node is VElement}
  */
 function isVElement(node) {
@@ -2350,6 +2654,13 @@ function getVExpressionContainer(node) {
   return n
 }
 
+/**
+ * @param {string} path
+ */
+function isTypeScriptFile(path) {
+  return path.endsWith('.ts') || path.endsWith('.tsx') || path.endsWith('.mts')
+}
+
 // ------------------------------------------------------------------------------
 // Vue Helpers
 // ------------------------------------------------------------------------------
@@ -2358,7 +2669,7 @@ function getVExpressionContainer(node) {
  * @param {string} path
  */
 function isVueFile(path) {
-  return path.endsWith('.vue') || path.endsWith('.jsx')
+  return path.endsWith('.vue') || path.endsWith('.jsx') || path.endsWith('.tsx')
 }
 
 /**
@@ -2374,15 +2685,17 @@ function isScriptSetup(context) {
  * @returns {VElement | null} the element of `<script setup>`
  */
 function getScriptSetupElement(context) {
+  const sourceCode = context.sourceCode
   const df =
-    context.parserServices.getDocumentFragment &&
-    context.parserServices.getDocumentFragment()
+    sourceCode.parserServices.getDocumentFragment &&
+    sourceCode.parserServices.getDocumentFragment()
   if (!df) {
     return null
   }
-  const scripts = df.children
-    .filter(isVElement)
-    .filter((e) => e.name === 'script')
+  const scripts = df.children.filter(
+    /** @returns {e is VElement} */
+    (e) => isVElement(e) && e.name === 'script'
+  )
   if (scripts.length === 2) {
     return scripts.find((e) => hasAttribute(e, 'setup')) || null
   } else {
@@ -2414,7 +2727,7 @@ function isVueComponentFile(node, path) {
  * Get the Vue component definition type from given node
  * Vue.component('xxx', {}) || component('xxx', {})
  * @param {ObjectExpression} node Node to check
- * @returns {'component' | 'mixin' | 'extend' | 'createApp' | 'defineComponent' | null}
+ * @returns {'component' | 'mixin' | 'extend' | 'createApp' | 'defineComponent' | 'defineNuxtComponent' | null}
  */
 function getVueComponentDefinitionType(node) {
   const parent = getParent(node)
@@ -2470,6 +2783,12 @@ function getVueComponentDefinitionType(node) {
         const isDestructedVueComponent = isObjectArgument(parent)
         return isDestructedVueComponent ? 'defineComponent' : null
       }
+      if (callee.name === 'defineNuxtComponent') {
+        // for Nuxt 3.x
+        // defineNuxtComponent({})
+        const isDestructedVueComponent = isObjectArgument(parent)
+        return isDestructedVueComponent ? 'defineNuxtComponent' : null
+      }
     }
   }
 
@@ -2494,10 +2813,10 @@ function isVueInstance(node) {
   const callee = node.callee
   return Boolean(
     node.type === 'NewExpression' &&
-      callee.type === 'Identifier' &&
-      callee.name === 'Vue' &&
-      node.arguments.length > 0 &&
-      skipTSAsExpression(node.arguments[0]).type === 'ObjectExpression'
+    callee.type === 'Identifier' &&
+    callee.name === 'Vue' &&
+    node.arguments.length > 0 &&
+    skipTSAsExpression(node.arguments[0]).type === 'ObjectExpression'
   )
 }
 
@@ -2515,7 +2834,7 @@ function getVueObjectType(context, node) {
   switch (parent.type) {
     case 'ExportDefaultDeclaration': {
       // export default {} in .vue || .jsx
-      const filePath = context.getFilename()
+      const filePath = context.filename
       if (
         isVueComponentFile(parent, filePath) &&
         skipTSAsExpression(parent.declaration) === node
@@ -2578,7 +2897,7 @@ function isSFCObject(context, node) {
   if (node.type !== 'ObjectExpression') {
     return false
   }
-  const filePath = context.getFilename()
+  const filePath = context.filename
   const ext = path.extname(filePath)
   if (ext !== '.vue' && ext) {
     return false
@@ -2614,7 +2933,9 @@ function isSFCObject(context, node) {
         }
         const { callee } = parent
         if (
-          (callee.type === 'Identifier' && callee.name === 'defineComponent') ||
+          (callee.type === 'Identifier' &&
+            (callee.name === 'defineComponent' ||
+              callee.name === 'defineNuxtComponent')) ||
           (callee.type === 'MemberExpression' &&
             callee.object.type === 'Identifier' &&
             callee.object.name === 'Vue' &&
@@ -2632,7 +2953,7 @@ function isSFCObject(context, node) {
         ) {
           return false
         }
-        const variable = findVariable(context.getScope(), parent.id)
+        const variable = findVariable(getScope(context, node), parent.id)
         if (!variable) {
           return false
         }
@@ -2654,7 +2975,7 @@ function getComponentComments(context) {
   if (tokens) {
     return tokens
   }
-  const sourceCode = context.getSourceCode()
+  const sourceCode = context.sourceCode
   tokens = sourceCode
     .getAllComments()
     .filter((comment) => /@vue\/component/g.test(comment.value))
@@ -2772,6 +3093,21 @@ function hasDirective(node, name, argument) {
   return Boolean(getDirective(node, name, argument))
 }
 
+/**
+ * Check whether the given directive node is v-bind same-name shorthand.
+ * @param {VAttribute | VDirective} node The directive node to check.
+ * @returns {node is VDirective & { value: VExpressionContainer & { expression: Identifier } }} `true` if the directive node is v-bind same-name shorthand.
+ */
+function isVBindSameNameShorthand(node) {
+  return (
+    node.directive &&
+    node.key.name.name === 'bind' &&
+    node.value?.expression?.type === 'Identifier' &&
+    node.key.range[0] <= node.value.range[0] &&
+    node.value.range[1] <= node.key.range[1]
+  )
+}
+
 /**
  * Checks whether given defineProps call node has withDefaults.
  * @param {CallExpression} node The node of defineProps
@@ -2815,7 +3151,7 @@ function getWithDefaultsProps(node) {
 
   for (const prop of param.properties) {
     if (prop.type !== 'Property') {
-      return {}
+      continue
     }
     const name = getStaticPropertyName(prop)
     if (name != null) {
@@ -2826,6 +3162,68 @@ function getWithDefaultsProps(node) {
   return result
 }
 
+/**
+ * Gets the props destructure property nodes for defineProp.
+ * @param {CallExpression} node The node of defineProps
+ * @returns { Record<string, AssignmentProperty | undefined> }
+ */
+function getPropsDestructure(node) {
+  /** @type {ReturnType<typeof getPropsDestructure>} */
+  const result = Object.create(null)
+  const left = getLeftOfDefineProps(node)
+  if (!left || left.type !== 'ObjectPattern') {
+    return result
+  }
+  for (const prop of left.properties) {
+    if (prop.type !== 'Property') continue
+    const name = getStaticPropertyName(prop)
+    if (name != null) {
+      result[name] = prop
+    }
+  }
+  return result
+}
+
+/**
+ * Gets the default definition nodes for defineProp
+ * using the props destructure with assignment pattern.
+ * @param {CallExpression} node The node of defineProps
+ * @returns { Record<string, {prop: AssignmentProperty , expression: Expression} | undefined> }
+ */
+function getDefaultPropExpressionsForPropsDestructure(node) {
+  /** @type {ReturnType<typeof getDefaultPropExpressionsForPropsDestructure>} */
+  const result = Object.create(null)
+  for (const [name, prop] of Object.entries(getPropsDestructure(node))) {
+    if (!prop) continue
+    const value = prop.value
+    if (value.type !== 'AssignmentPattern') continue
+    result[name] = { prop, expression: value.right }
+  }
+  return result
+}
+
+/**
+ * Gets the pattern of the left operand of defineProps.
+ * @param {CallExpression} node The node of defineProps
+ * @returns {Pattern | null} The pattern of the left operand of defineProps
+ */
+function getLeftOfDefineProps(node) {
+  let target = node
+  if (hasWithDefaults(target)) {
+    target = target.parent
+  }
+  if (!target.parent) {
+    return null
+  }
+  if (
+    target.parent.type === 'VariableDeclarator' &&
+    target.parent.init === target
+  ) {
+    return target.parent.id
+  }
+  return null
+}
+
 /**
  * Get all props from component options object.
  * @param {ObjectExpression} componentObject Object with component definition
@@ -2850,9 +3248,7 @@ function getComponentPropsFromOptions(componentObject) {
     return [
       {
         type: 'unknown',
-        key: null,
         propName: null,
-        value: null,
         node: propsNode.value
       }
     ]
@@ -2885,9 +3281,7 @@ function getComponentEmitsFromOptions(componentObject) {
     return [
       {
         type: 'unknown',
-        key: null,
         emitName: null,
-        value: null,
         node: emitsNode.value
       }
     ]
@@ -2900,7 +3294,7 @@ function getComponentEmitsFromOptions(componentObject) {
  * Get all props from `defineProps` call expression.
  * @param {RuleContext} context The rule context object.
  * @param {CallExpression} node `defineProps` call expression
- * @return {(ComponentArrayProp | ComponentObjectProp | ComponentTypeProp | ComponentUnknownProp)[]} Array of component props
+ * @return {ComponentProp[]} Array of component props
  */
 function getComponentPropsFromDefineProps(context, node) {
   if (node.arguments.length > 0) {
@@ -2911,25 +3305,20 @@ function getComponentPropsFromDefineProps(context, node) {
     return [
       {
         type: 'unknown',
-        key: null,
         propName: null,
-        value: null,
         node: node.arguments[0]
       }
     ]
   }
-  if (node.typeParameters && node.typeParameters.params.length > 0) {
-    return getComponentPropsFromTypeDefine(
-      context,
-      node.typeParameters.params[0]
-    )
+  const typeArguments =
+    'typeArguments' in node ? node.typeArguments : node.typeParameters
+  if (typeArguments && typeArguments.params.length > 0) {
+    return getComponentPropsFromTypeDefine(context, typeArguments.params[0])
   }
   return [
     {
       type: 'unknown',
-      key: null,
       propName: null,
-      value: null,
       node: null
     }
   ]
@@ -2939,7 +3328,7 @@ function getComponentPropsFromDefineProps(context, node) {
  * Get all emits from `defineEmits` call expression.
  * @param {RuleContext} context The rule context object.
  * @param {CallExpression} node `defineEmits` call expression
- * @return {(ComponentArrayEmit | ComponentObjectEmit | ComponentTypeEmit | ComponentUnknownEmit)[]} Array of component emits
+ * @return {ComponentEmit[]} Array of component emits
  */
 function getComponentEmitsFromDefineEmits(context, node) {
   if (node.arguments.length > 0) {
@@ -2950,29 +3339,89 @@ function getComponentEmitsFromDefineEmits(context, node) {
     return [
       {
         type: 'unknown',
-        key: null,
         emitName: null,
-        value: null,
         node: node.arguments[0]
       }
     ]
   }
-  if (node.typeParameters && node.typeParameters.params.length > 0) {
-    return getComponentEmitsFromTypeDefine(
-      context,
-      node.typeParameters.params[0]
-    )
+  const typeArguments =
+    'typeArguments' in node ? node.typeArguments : node.typeParameters
+  if (typeArguments && typeArguments.params.length > 0) {
+    return getComponentEmitsFromTypeDefine(context, typeArguments.params[0])
   }
   return [
     {
       type: 'unknown',
-      key: null,
       emitName: null,
-      value: null,
       node: null
     }
   ]
 }
+
+/**
+ * Get all slots from `defineSlots` call expression.
+ * @param {RuleContext} context The rule context object.
+ * @param {CallExpression} node `defineSlots` call expression
+ * @return {ComponentSlot[]} Array of component slots
+ */
+function getComponentSlotsFromDefineSlots(context, node) {
+  const typeArguments =
+    'typeArguments' in node ? node.typeArguments : node.typeParameters
+  if (typeArguments && typeArguments.params.length > 0) {
+    return getComponentSlotsFromTypeDefine(context, typeArguments.params[0])
+  }
+  return [
+    {
+      type: 'unknown',
+      slotName: null,
+      node: null
+    }
+  ]
+}
+
+/**
+ * Get model info from `defineModel` call expression.
+ * @param {RuleContext} _context The rule context object.
+ * @param {CallExpression} node `defineModel` call expression
+ * @return {ComponentModel} Object of component model
+ */
+function getComponentModelFromDefineModel(_context, node) {
+  /** @type {ComponentModelName} */
+  let name = {
+    modelName: 'modelValue',
+    node: null
+  }
+  /** @type {Expression|null} */
+  let options =
+    node.arguments[0]?.type === 'SpreadElement' ? null : node.arguments[0]
+  if (node.arguments.length > 0) {
+    const nameNodeCandidate = skipTSAsExpression(node.arguments[0])
+    if (nameNodeCandidate.type === 'Literal') {
+      name = {
+        modelName: String(nameNodeCandidate.value),
+        node: nameNodeCandidate
+      }
+      options =
+        node.arguments[1]?.type === 'SpreadElement' ? null : node.arguments[1]
+    }
+  }
+
+  const typeArguments =
+    'typeArguments' in node ? node.typeArguments : node.typeParameters
+  if (typeArguments && typeArguments.params.length > 0) {
+    return {
+      name,
+      options,
+      typeNode: typeArguments.params[0]
+    }
+  }
+  return {
+    name,
+    options,
+    typeNode: null
+  }
+}
+
 /**
  * Get all props by looking at all component's properties
  * @param {ObjectExpression|ArrayExpression} propsNode Object with props definition
@@ -2980,34 +3429,35 @@ function getComponentEmitsFromDefineEmits(context, node) {
  */
 function getComponentPropsFromDefine(propsNode) {
   if (propsNode.type === 'ObjectExpression') {
-    return propsNode.properties.map((prop) => {
-      if (!isProperty(prop)) {
-        return {
-          type: 'unknown',
-          key: null,
-          propName: null,
-          value: null,
-          node: prop
+    return propsNode.properties.map(
+      /** @returns {ComponentArrayProp | ComponentObjectProp | ComponentUnknownProp} */
+      (prop) => {
+        if (!isProperty(prop)) {
+          return {
+            type: 'unknown',
+            propName: null,
+            node: prop
+          }
+        }
+        const propName = getStaticPropertyName(prop)
+        if (propName != null) {
+          return {
+            type: 'object',
+            key: prop.key,
+            propName,
+            value: skipTSAsExpression(prop.value),
+            node: prop
+          }
         }
-      }
-      const propName = getStaticPropertyName(prop)
-      if (propName != null) {
         return {
           type: 'object',
-          key: prop.key,
-          propName,
+          key: null,
+          propName: null,
           value: skipTSAsExpression(prop.value),
           node: prop
         }
       }
-      return {
-        type: 'object',
-        key: null,
-        propName: null,
-        value: skipTSAsExpression(prop.value),
-        node: prop
-      }
-    })
+    )
   }
 
   return propsNode.elements.filter(isDef).map((prop) => {
@@ -3106,7 +3556,7 @@ function getObjectOrArray(context, node) {
     return node
   }
   if (node.type === 'Identifier') {
-    const variable = findVariable(context.getScope(), node)
+    const variable = findVariable(getScope(context, node), node)
 
     if (variable != null && variable.defs.length === 1) {
       const def = variable.defs[0]
diff --git a/lib/utils/js-reserved.json b/lib/utils/js-reserved.json
index 9b3eb11cc..973c00328 100644
--- a/lib/utils/js-reserved.json
+++ b/lib/utils/js-reserved.json
@@ -1,18 +1,66 @@
 [
-  "abstract", "arguments", "await", "boolean",
-  "break", "byte", "case", "catch",
-  "char", "class", "const", "continue",
-  "debugger", "default", "delete", "do",
-  "double", "else", "enum", "eval",
-  "export", "extends", "false", "final",
-  "finally", "float", "for", "function",
-  "goto", "if", "implements", "import",
-  "in", "instanceof", "int", "interface",
-  "let", "long", "native", "new",
-  "null", "package", "private", "protected",
-  "public", "return", "short", "static",
-  "super", "switch", "synchronized", "this",
-  "throw", "throws", "transient", "true",
-  "try", "typeof", "var", "void",
-  "volatile", "while", "with", "yield"
+  "abstract",
+  "arguments",
+  "await",
+  "boolean",
+  "break",
+  "byte",
+  "case",
+  "catch",
+  "char",
+  "class",
+  "const",
+  "continue",
+  "debugger",
+  "default",
+  "delete",
+  "do",
+  "double",
+  "else",
+  "enum",
+  "eval",
+  "export",
+  "extends",
+  "false",
+  "final",
+  "finally",
+  "float",
+  "for",
+  "function",
+  "goto",
+  "if",
+  "implements",
+  "import",
+  "in",
+  "instanceof",
+  "int",
+  "interface",
+  "let",
+  "long",
+  "native",
+  "new",
+  "null",
+  "package",
+  "private",
+  "protected",
+  "public",
+  "return",
+  "short",
+  "static",
+  "super",
+  "switch",
+  "synchronized",
+  "this",
+  "throw",
+  "throws",
+  "transient",
+  "true",
+  "try",
+  "typeof",
+  "var",
+  "void",
+  "volatile",
+  "while",
+  "with",
+  "yield"
 ]
diff --git a/lib/utils/key-aliases.json b/lib/utils/key-aliases.json
index 49de3b3d8..601b2d73d 100644
--- a/lib/utils/key-aliases.json
+++ b/lib/utils/key-aliases.json
@@ -1,68 +1,304 @@
 [
-  "unidentified", "alt", "alt-graph", "caps-lock", "control", "fn", "fn-lock",
-  "meta", "num-lock", "scroll-lock", "shift", "symbol", "symbol-lock", "hyper",
-  "super", "enter", "tab", "arrow-down", "arrow-left", "arrow-right",
-  "arrow-up", "end", "home", "page-down", "page-up", "backspace", "clear",
-  "copy", "cr-sel", "cut", "delete", "erase-eof", "ex-sel", "insert", "paste",
-  "redo", "undo", "accept", "again", "attn", "cancel", "context-menu", "escape",
-  "execute", "find", "help", "pause", "select", "zoom-in", "zoom-out",
-  "brightness-down", "brightness-up", "eject", "log-off", "power",
-  "print-screen", "hibernate", "standby", "wake-up", "all-candidates",
-  "alphanumeric", "code-input", "compose", "convert", "dead", "final-mode",
-  "group-first", "group-last", "group-next", "group-previous", "mode-change",
-  "next-candidate", "non-convert", "previous-candidate", "process",
-  "single-candidate", "hangul-mode", "hanja-mode", "junja-mode", "eisu",
-  "hankaku", "hiragana", "hiragana-katakana", "kana-mode", "kanji-mode",
-  "katakana", "romaji", "zenkaku", "zenkaku-hankaku", "f1", "f2", "f3", "f4",
-  "f5", "f6", "f7", "f8", "f9", "f10", "f11", "f12", "soft1", "soft2", "soft3",
-  "soft4", "channel-down", "channel-up", "close", "mail-forward", "mail-reply",
-  "mail-send", "media-close", "media-fast-forward", "media-pause",
-  "media-play-pause", "media-record", "media-rewind", "media-stop",
-  "media-track-next", "media-track-previous", "new", "open", "print", "save",
-  "spell-check", "key11", "key12", "audio-balance-left", "audio-balance-right",
-  "audio-bass-boost-down", "audio-bass-boost-toggle", "audio-bass-boost-up",
-  "audio-fader-front", "audio-fader-rear", "audio-surround-mode-next",
-  "audio-treble-down", "audio-treble-up", "audio-volume-down",
-  "audio-volume-up", "audio-volume-mute", "microphone-toggle",
-  "microphone-volume-down", "microphone-volume-up", "microphone-volume-mute",
-  "speech-correction-list", "speech-input-toggle", "launch-application1",
-  "launch-application2", "launch-calendar", "launch-contacts", "launch-mail",
-  "launch-media-player", "launch-music-player", "launch-phone",
-  "launch-screen-saver", "launch-spreadsheet", "launch-web-browser",
-  "launch-web-cam", "launch-word-processor", "browser-back",
-  "browser-favorites", "browser-forward", "browser-home", "browser-refresh",
-  "browser-search", "browser-stop", "app-switch", "call", "camera",
-  "camera-focus", "end-call", "go-back", "go-home", "headset-hook",
-  "last-number-redial", "notification", "manner-mode", "voice-dial", "t-v",
-  "t-v3-d-mode", "t-v-antenna-cable", "t-v-audio-description",
-  "t-v-audio-description-mix-down", "t-v-audio-description-mix-up",
-  "t-v-contents-menu", "t-v-data-service", "t-v-input", "t-v-input-component1",
-  "t-v-input-component2", "t-v-input-composite1", "t-v-input-composite2",
-  "t-v-input-h-d-m-i1", "t-v-input-h-d-m-i2", "t-v-input-h-d-m-i3",
-  "t-v-input-h-d-m-i4", "t-v-input-v-g-a1", "t-v-media-context", "t-v-network",
-  "t-v-number-entry", "t-v-power", "t-v-radio-service", "t-v-satellite",
-  "t-v-satellite-b-s", "t-v-satellite-c-s", "t-v-satellite-toggle",
-  "t-v-terrestrial-analog", "t-v-terrestrial-digital", "t-v-timer",
-  "a-v-r-input", "a-v-r-power", "color-f0-red", "color-f1-green",
-  "color-f2-yellow", "color-f3-blue", "color-f4-grey", "color-f5-brown",
-  "closed-caption-toggle", "dimmer", "display-swap", "d-v-r", "exit",
-  "favorite-clear0", "favorite-clear1", "favorite-clear2", "favorite-clear3",
-  "favorite-recall0", "favorite-recall1", "favorite-recall2",
-  "favorite-recall3", "favorite-store0", "favorite-store1", "favorite-store2",
-  "favorite-store3", "guide", "guide-next-day", "guide-previous-day", "info",
-  "instant-replay", "link", "list-program", "live-content", "lock",
-  "media-apps", "media-last", "media-skip-backward", "media-skip-forward",
-  "media-step-backward", "media-step-forward", "media-top-menu", "navigate-in",
-  "navigate-next", "navigate-out", "navigate-previous", "next-favorite-channel",
-  "next-user-profile", "on-demand", "pairing", "pin-p-down", "pin-p-move",
-  "pin-p-toggle", "pin-p-up", "play-speed-down", "play-speed-reset",
-  "play-speed-up", "random-toggle", "rc-low-battery", "record-speed-next",
-  "rf-bypass", "scan-channels-toggle", "screen-mode-next", "settings",
-  "split-screen-toggle", "s-t-b-input", "s-t-b-power", "subtitle", "teletext",
-  "video-mode-next", "wink", "zoom-toggle", "audio-volume-down",
-  "audio-volume-up", "audio-volume-mute", "browser-back", "browser-forward",
-  "channel-down", "channel-up", "context-menu", "eject", "end", "enter", "home",
-  "media-fast-forward", "media-play", "media-play-pause", "media-record",
-  "media-rewind", "media-stop", "media-next-track", "media-pause",
-  "media-previous-track", "power", "unidentified"
+  "unidentified",
+  "alt",
+  "alt-graph",
+  "caps-lock",
+  "control",
+  "fn",
+  "fn-lock",
+  "meta",
+  "num-lock",
+  "scroll-lock",
+  "shift",
+  "symbol",
+  "symbol-lock",
+  "hyper",
+  "super",
+  "enter",
+  "tab",
+  "arrow-down",
+  "arrow-left",
+  "arrow-right",
+  "arrow-up",
+  "end",
+  "home",
+  "page-down",
+  "page-up",
+  "backspace",
+  "clear",
+  "copy",
+  "cr-sel",
+  "cut",
+  "delete",
+  "erase-eof",
+  "ex-sel",
+  "insert",
+  "paste",
+  "redo",
+  "undo",
+  "accept",
+  "again",
+  "attn",
+  "cancel",
+  "context-menu",
+  "escape",
+  "execute",
+  "find",
+  "help",
+  "pause",
+  "select",
+  "zoom-in",
+  "zoom-out",
+  "brightness-down",
+  "brightness-up",
+  "eject",
+  "log-off",
+  "power",
+  "print-screen",
+  "hibernate",
+  "standby",
+  "wake-up",
+  "all-candidates",
+  "alphanumeric",
+  "code-input",
+  "compose",
+  "convert",
+  "dead",
+  "final-mode",
+  "group-first",
+  "group-last",
+  "group-next",
+  "group-previous",
+  "mode-change",
+  "next-candidate",
+  "non-convert",
+  "previous-candidate",
+  "process",
+  "single-candidate",
+  "hangul-mode",
+  "hanja-mode",
+  "junja-mode",
+  "eisu",
+  "hankaku",
+  "hiragana",
+  "hiragana-katakana",
+  "kana-mode",
+  "kanji-mode",
+  "katakana",
+  "romaji",
+  "zenkaku",
+  "zenkaku-hankaku",
+  "f1",
+  "f2",
+  "f3",
+  "f4",
+  "f5",
+  "f6",
+  "f7",
+  "f8",
+  "f9",
+  "f10",
+  "f11",
+  "f12",
+  "soft1",
+  "soft2",
+  "soft3",
+  "soft4",
+  "channel-down",
+  "channel-up",
+  "close",
+  "mail-forward",
+  "mail-reply",
+  "mail-send",
+  "media-close",
+  "media-fast-forward",
+  "media-pause",
+  "media-play-pause",
+  "media-record",
+  "media-rewind",
+  "media-stop",
+  "media-track-next",
+  "media-track-previous",
+  "new",
+  "open",
+  "print",
+  "save",
+  "spell-check",
+  "key11",
+  "key12",
+  "audio-balance-left",
+  "audio-balance-right",
+  "audio-bass-boost-down",
+  "audio-bass-boost-toggle",
+  "audio-bass-boost-up",
+  "audio-fader-front",
+  "audio-fader-rear",
+  "audio-surround-mode-next",
+  "audio-treble-down",
+  "audio-treble-up",
+  "audio-volume-down",
+  "audio-volume-up",
+  "audio-volume-mute",
+  "microphone-toggle",
+  "microphone-volume-down",
+  "microphone-volume-up",
+  "microphone-volume-mute",
+  "speech-correction-list",
+  "speech-input-toggle",
+  "launch-application1",
+  "launch-application2",
+  "launch-calendar",
+  "launch-contacts",
+  "launch-mail",
+  "launch-media-player",
+  "launch-music-player",
+  "launch-phone",
+  "launch-screen-saver",
+  "launch-spreadsheet",
+  "launch-web-browser",
+  "launch-web-cam",
+  "launch-word-processor",
+  "browser-back",
+  "browser-favorites",
+  "browser-forward",
+  "browser-home",
+  "browser-refresh",
+  "browser-search",
+  "browser-stop",
+  "app-switch",
+  "call",
+  "camera",
+  "camera-focus",
+  "end-call",
+  "go-back",
+  "go-home",
+  "headset-hook",
+  "last-number-redial",
+  "notification",
+  "manner-mode",
+  "voice-dial",
+  "t-v",
+  "t-v3-d-mode",
+  "t-v-antenna-cable",
+  "t-v-audio-description",
+  "t-v-audio-description-mix-down",
+  "t-v-audio-description-mix-up",
+  "t-v-contents-menu",
+  "t-v-data-service",
+  "t-v-input",
+  "t-v-input-component1",
+  "t-v-input-component2",
+  "t-v-input-composite1",
+  "t-v-input-composite2",
+  "t-v-input-h-d-m-i1",
+  "t-v-input-h-d-m-i2",
+  "t-v-input-h-d-m-i3",
+  "t-v-input-h-d-m-i4",
+  "t-v-input-v-g-a1",
+  "t-v-media-context",
+  "t-v-network",
+  "t-v-number-entry",
+  "t-v-power",
+  "t-v-radio-service",
+  "t-v-satellite",
+  "t-v-satellite-b-s",
+  "t-v-satellite-c-s",
+  "t-v-satellite-toggle",
+  "t-v-terrestrial-analog",
+  "t-v-terrestrial-digital",
+  "t-v-timer",
+  "a-v-r-input",
+  "a-v-r-power",
+  "color-f0-red",
+  "color-f1-green",
+  "color-f2-yellow",
+  "color-f3-blue",
+  "color-f4-grey",
+  "color-f5-brown",
+  "closed-caption-toggle",
+  "dimmer",
+  "display-swap",
+  "d-v-r",
+  "exit",
+  "favorite-clear0",
+  "favorite-clear1",
+  "favorite-clear2",
+  "favorite-clear3",
+  "favorite-recall0",
+  "favorite-recall1",
+  "favorite-recall2",
+  "favorite-recall3",
+  "favorite-store0",
+  "favorite-store1",
+  "favorite-store2",
+  "favorite-store3",
+  "guide",
+  "guide-next-day",
+  "guide-previous-day",
+  "info",
+  "instant-replay",
+  "link",
+  "list-program",
+  "live-content",
+  "lock",
+  "media-apps",
+  "media-last",
+  "media-skip-backward",
+  "media-skip-forward",
+  "media-step-backward",
+  "media-step-forward",
+  "media-top-menu",
+  "navigate-in",
+  "navigate-next",
+  "navigate-out",
+  "navigate-previous",
+  "next-favorite-channel",
+  "next-user-profile",
+  "on-demand",
+  "pairing",
+  "pin-p-down",
+  "pin-p-move",
+  "pin-p-toggle",
+  "pin-p-up",
+  "play-speed-down",
+  "play-speed-reset",
+  "play-speed-up",
+  "random-toggle",
+  "rc-low-battery",
+  "record-speed-next",
+  "rf-bypass",
+  "scan-channels-toggle",
+  "screen-mode-next",
+  "settings",
+  "split-screen-toggle",
+  "s-t-b-input",
+  "s-t-b-power",
+  "subtitle",
+  "teletext",
+  "video-mode-next",
+  "wink",
+  "zoom-toggle",
+  "audio-volume-down",
+  "audio-volume-up",
+  "audio-volume-mute",
+  "browser-back",
+  "browser-forward",
+  "channel-down",
+  "channel-up",
+  "context-menu",
+  "eject",
+  "end",
+  "enter",
+  "home",
+  "media-fast-forward",
+  "media-play",
+  "media-play-pause",
+  "media-record",
+  "media-rewind",
+  "media-stop",
+  "media-next-track",
+  "media-pause",
+  "media-previous-track",
+  "power",
+  "unidentified"
 ]
diff --git a/lib/utils/math-elements.json b/lib/utils/math-elements.json
new file mode 100644
index 000000000..46ac91ac5
--- /dev/null
+++ b/lib/utils/math-elements.json
@@ -0,0 +1,34 @@
+[
+  "math",
+  "maction",
+  "annotation",
+  "annotation-xml",
+  "menclose",
+  "merror",
+  "mfenced",
+  "mfrac",
+  "mi",
+  "mmultiscripts",
+  "mn",
+  "mo",
+  "mover",
+  "mpadded",
+  "mphantom",
+  "mprescripts",
+  "mroot",
+  "mrow",
+  "ms",
+  "semantics",
+  "mspace",
+  "msqrt",
+  "mstyle",
+  "msub",
+  "msup",
+  "msubsup",
+  "mtable",
+  "mtd",
+  "mtext",
+  "mtr",
+  "munder",
+  "munderover"
+]
diff --git a/lib/utils/property-references.js b/lib/utils/property-references.js
index beb3118d6..894e863cc 100644
--- a/lib/utils/property-references.js
+++ b/lib/utils/property-references.js
@@ -6,7 +6,7 @@
 'use strict'
 
 const utils = require('./index')
-const eslintUtils = require('eslint-utils')
+const eslintUtils = require('@eslint-community/eslint-utils')
 
 /**
  * @typedef {import('./style-variables').StyleVariablesContext} StyleVariablesContext
@@ -15,29 +15,39 @@ const eslintUtils = require('eslint-utils')
  * @typedef {object} IHasPropertyOption
  * @property {boolean} [unknownCallAsAny]
  */
+/**
+ * @typedef {object} NestPropertyNodeForExpression
+ * @property {'expression'} type
+ * @property {MemberExpression} node
+ *
+ * @typedef {object} NestPropertyNodeForPattern
+ * @property {'pattern'} type
+ * @property {MemberExpression | Identifier | ObjectPattern | ArrayPattern} node
+ *
+ * @typedef {NestPropertyNodeForExpression | NestPropertyNodeForPattern} NestPropertyNode
+ */
 /**
  * @typedef {object} IPropertyReferences
  * @property { (name: string, option?: IHasPropertyOption) => boolean } hasProperty
- * @property { () => Map<string, {nodes:ASTNode[]}> } allProperties
- * @property { (name: string) => IPropertyReferences } getNest
+ * @property { () => Map<string, {nodes:ASTNode[]}> } allProperties Get all properties.
+ * @property { (name: string) => IPropertyReferences } getNest Get the nesting property references.
+ * @property { (name: string) => Iterable<NestPropertyNode> } getNestNodes Get the nesting property nodes.
  */
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 /** @type {IPropertyReferences} */
 const ANY = {
   hasProperty: () => true,
   allProperties: () => new Map(),
-  getNest: () => ANY
+  getNest: () => ANY,
+  getNestNodes: () => []
 }
 
 /** @type {IPropertyReferences} */
 const NEVER = {
   hasProperty: () => false,
   allProperties: () => new Map(),
-  getNest: () => NEVER
+  getNest: () => NEVER,
+  getNestNodes: () => []
 }
 
 /**
@@ -74,10 +84,6 @@ function findFunction(context, id) {
   return null
 }
 
-// ------------------------------------------------------------------------------
-// Public
-// ------------------------------------------------------------------------------
-
 module.exports = {
   definePropertyReferenceExtractor,
   mergePropertyReferences
@@ -86,7 +92,10 @@ module.exports = {
 /**
  * @param {RuleContext} context The rule context.
  */
-function definePropertyReferenceExtractor(context) {
+function definePropertyReferenceExtractor(
+  context,
+  { unknownMemberAsUnreferenced = false, returnAsUnreferenced = false } = {}
+) {
   /** @type {Map<Expression, IPropertyReferences>} */
   const cacheForExpression = new Map()
   /** @type {Map<Pattern, IPropertyReferences>} */
@@ -97,7 +106,7 @@ function definePropertyReferenceExtractor(context) {
   let toRefSet = null
 
   let isFunctionalTemplate = false
-  const templateBody = context.getSourceCode().ast.templateBody
+  const templateBody = context.sourceCode.ast.templateBody
   if (templateBody) {
     isFunctionalTemplate = utils.hasAttribute(templateBody, 'functional')
   }
@@ -107,28 +116,24 @@ function definePropertyReferenceExtractor(context) {
       return toRefSet
     }
     const tracker = new eslintUtils.ReferenceTracker(
-      context.getSourceCode().scopeManager.scopes[0]
+      context.sourceCode.scopeManager.scopes[0]
     )
     const toRefNodes = new Set()
-    for (const { node } of tracker.iterateEsmReferences(
-      utils.createCompositionApiTraceMap({
-        [eslintUtils.ReferenceTracker.ESM]: true,
-        toRef: {
-          [eslintUtils.ReferenceTracker.CALL]: true
-        }
-      })
-    )) {
+    for (const { node } of utils.iterateReferencesTraceMap(tracker, {
+      [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
-        }
-      })
-    )) {
+    for (const { node } of utils.iterateReferencesTraceMap(tracker, {
+      [eslintUtils.ReferenceTracker.ESM]: true,
+      toRefs: {
+        [eslintUtils.ReferenceTracker.CALL]: true
+      }
+    })) {
       toRefsNodes.add(node)
     }
 
@@ -137,7 +142,7 @@ function definePropertyReferenceExtractor(context) {
 
   /**
    * Collects the property references for member expr.
-   * @implements IPropertyReferences
+   * @implements {IPropertyReferences}
    */
   class PropertyReferencesForMember {
     /**
@@ -172,10 +177,23 @@ function definePropertyReferenceExtractor(context) {
         ? extractFromExpression(this.node, this.withInTemplate)
         : NEVER
     }
+
+    /**
+     * @param {string} name
+     * @returns {Iterable<NestPropertyNodeForExpression>}
+     */
+    *getNestNodes(name) {
+      if (name === this.name) {
+        yield {
+          type: 'expression',
+          node: this.node
+        }
+      }
+    }
   }
   /**
    * Collects the property references for object.
-   * @implements IPropertyReferences
+   * @implements {IPropertyReferences}
    */
   class PropertyReferencesForObject {
     constructor() {
@@ -210,6 +228,35 @@ function definePropertyReferenceExtractor(context) {
           )
         : NEVER
     }
+
+    /**
+     * @param {string} name
+     * @returns {Iterable<NestPropertyNodeForPattern>}
+     */
+    *getNestNodes(name) {
+      const properties = this.properties[name]
+      if (!properties) {
+        return
+      }
+      const values = properties.map((property) => property.value)
+      let node
+      while ((node = values.shift())) {
+        if (
+          node.type === 'Identifier' ||
+          node.type === 'MemberExpression' ||
+          node.type === 'ObjectPattern' ||
+          node.type === 'ArrayPattern'
+        ) {
+          yield {
+            type: 'pattern',
+            node
+          }
+        } else if (node.type === 'AssignmentPattern') {
+          values.unshift(node.left)
+        }
+      }
+      return properties ? properties.map((p) => p.value) : []
+    }
   }
 
   /**
@@ -249,7 +296,9 @@ function definePropertyReferenceExtractor(context) {
       switch (parent.type) {
         case 'AssignmentExpression': {
           // `({foo} = arg)`
-          return !withInTemplate && parent.right === node
+          return !withInTemplate &&
+            parent.right === node &&
+            parent.operator === '='
             ? extractFromPattern(parent.left)
             : NEVER
         }
@@ -264,16 +313,37 @@ function definePropertyReferenceExtractor(context) {
           if (parent.object === node) {
             // `arg.foo`
             const name = utils.getStaticPropertyName(parent)
-            return name
-              ? new PropertyReferencesForMember(parent, name, withInTemplate)
-              : ANY
+
+            if (
+              name === '$props' &&
+              parent.parent.type === 'MemberExpression'
+            ) {
+              // `$props.arg`
+              const propName = utils.getStaticPropertyName(parent.parent)
+
+              if (!propName) return unknownMemberAsUnreferenced ? NEVER : ANY
+
+              return new PropertyReferencesForMember(
+                parent.parent,
+                propName,
+                withInTemplate
+              )
+            } else if (name) {
+              return new PropertyReferencesForMember(
+                parent,
+                name,
+                withInTemplate
+              )
+            } else {
+              return unknownMemberAsUnreferenced ? NEVER : ANY
+            }
           }
           return NEVER
         }
         case 'CallExpression': {
           const argIndex = parent.arguments.indexOf(node)
           // `foo(arg)`
-          return !withInTemplate && argIndex > -1
+          return !withInTemplate && argIndex !== -1
             ? extractFromCall(parent, argIndex)
             : NEVER
         }
@@ -281,12 +351,18 @@ function definePropertyReferenceExtractor(context) {
           return extractFromExpression(parent, withInTemplate)
         }
         case 'ArrowFunctionExpression':
-        case 'ReturnStatement':
         case 'VExpressionContainer':
         case 'Property':
         case 'ArrayExpression': {
           return maybeExternalUsed(parent) ? ANY : NEVER
         }
+        case 'ReturnStatement': {
+          if (returnAsUnreferenced) {
+            return NEVER
+          } else {
+            return maybeExternalUsed(parent) ? ANY : NEVER
+          }
+        }
       }
       return NEVER
     }
@@ -404,7 +480,8 @@ function definePropertyReferenceExtractor(context) {
           return Boolean(options && options.unknownCallAsAny)
         },
         allProperties: () => new Map(),
-        getNest: () => ANY
+        getNest: () => ANY,
+        getNestNodes: () => []
       }
     }
 
@@ -422,7 +499,8 @@ function definePropertyReferenceExtractor(context) {
           return Boolean(options && options.unknownCallAsAny)
         },
         allProperties: () => new Map(),
-        getNest: () => ANY
+        getNest: () => ANY,
+        getNestNodes: () => []
       }
     }
 
@@ -477,7 +555,8 @@ function definePropertyReferenceExtractor(context) {
         hasProperty: (name) => name === segmentName,
         allProperties: () => new Map([[segmentName, { nodes: [node] }]]),
         getNest: (name) =>
-          name === segmentName ? extractFromSegments(segments.slice(1)) : NEVER
+          name === segmentName ? extractFromSegments(segments.slice(1)) : NEVER,
+        getNestNodes: () => []
       }
     }
   }
@@ -496,7 +575,8 @@ function definePropertyReferenceExtractor(context) {
       ? {
           hasProperty: (name) => name === referenceName,
           allProperties: () => new Map([[referenceName, { nodes: [node] }]]),
-          getNest: (name) => (name === referenceName ? ANY : NEVER)
+          getNest: (name) => (name === referenceName ? ANY : NEVER),
+          getNestNodes: () => []
         }
       : NEVER
   }
@@ -513,7 +593,8 @@ function definePropertyReferenceExtractor(context) {
       hasProperty: (name) => name === referenceName,
       allProperties: () => new Map([[referenceName, { nodes: [nameNode] }]]),
       getNest: (name) =>
-        name === referenceName ? (getNest ? getNest() : ANY) : NEVER
+        name === referenceName ? (getNest ? getNest() : ANY) : NEVER,
+      getNestNodes: () => []
     }
   }
 
@@ -548,7 +629,8 @@ function definePropertyReferenceExtractor(context) {
     return {
       hasProperty: (name, option) => base.hasProperty(name, option),
       allProperties: () => base.allProperties(),
-      getNest: (name) => base.getNest(name).getNest('value')
+      getNest: (name) => base.getNest(name).getNest('value'),
+      getNestNodes: (name) => base.getNest(name).getNestNodes('value')
     }
   }
 
@@ -566,8 +648,8 @@ function definePropertyReferenceExtractor(context) {
     let ignoreRef = () => false
     if (ignoreGlobals) {
       const globalScope =
-        context.getSourceCode().scopeManager.globalScope ||
-        context.getSourceCode().scopeManager.scopes[0]
+        context.sourceCode.scopeManager.globalScope ||
+        context.sourceCode.scopeManager.scopes[0]
 
       ignoreRef = (name) => globalScope.set.has(name)
     }
@@ -579,14 +661,23 @@ function definePropertyReferenceExtractor(context) {
       if (ignoreRef(id.name)) {
         continue
       }
-      if (!isFunctionalTemplate) {
-        references.push(
-          extractFromName(id.name, id, () => extractFromExpression(id, true))
-        )
-      } else {
+      if (isFunctionalTemplate) {
         if (id.name === 'props') {
           references.push(extractFromExpression(id, true))
         }
+      } else {
+        const referenceId =
+          id.name === '$props' &&
+          id.parent.type === 'MemberExpression' &&
+          id.parent.property.type === 'Identifier'
+            ? id.parent.property
+            : id
+
+        references.push(
+          extractFromName(referenceId.name, referenceId, () =>
+            extractFromExpression(referenceId, true)
+          )
+        )
       }
     }
     return mergePropertyReferences(references)
@@ -634,7 +725,7 @@ function mergePropertyReferences(references) {
 
 /**
  * Collects the property references for merge.
- * @implements IPropertyReferences
+ * @implements {IPropertyReferences}
  */
 class PropertyReferencesForMerge {
   /**
@@ -681,4 +772,16 @@ class PropertyReferencesForMerge {
     }
     return mergePropertyReferences(nest)
   }
+
+  /**
+   * @param {string} name
+   * @returns {Iterable<NestPropertyNode>}
+   */
+  *getNestNodes(name) {
+    for (const ref of this.references) {
+      if (ref.hasProperty(name)) {
+        yield* ref.getNestNodes(name)
+      }
+    }
+  }
 }
diff --git a/lib/utils/ref-object-references.js b/lib/utils/ref-object-references.js
new file mode 100644
index 000000000..4edd52ff9
--- /dev/null
+++ b/lib/utils/ref-object-references.js
@@ -0,0 +1,702 @@
+/**
+ * @author Yosuke Ota
+ * @copyright 2022 Yosuke Ota. All rights reserved.
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('./index')
+const eslintUtils = require('@eslint-community/eslint-utils')
+const { definePropertyReferenceExtractor } = require('./property-references')
+const { ReferenceTracker } = eslintUtils
+
+/**
+ * @typedef {object} RefObjectReferenceForExpression
+ * @property {'expression'} type
+ * @property {MemberExpression | CallExpression} node
+ * @property {string} method
+ * @property {CallExpression} define
+ * @property {(CallExpression | Identifier | MemberExpression)[]} defineChain Holds the initialization path for assignment of ref objects.
+ *
+ * @typedef {object} RefObjectReferenceForPattern
+ * @property {'pattern'} type
+ * @property {ObjectPattern} node
+ * @property {string} method
+ * @property {CallExpression} define
+ * @property {(CallExpression | Identifier | MemberExpression)[]} defineChain Holds the initialization path for assignment of ref objects.
+ *
+ * @typedef {object} RefObjectReferenceForIdentifier
+ * @property {'expression' | 'pattern'} type
+ * @property {Identifier} node
+ * @property {VariableDeclarator | null} variableDeclarator
+ * @property {VariableDeclaration | null} variableDeclaration
+ * @property {string} method
+ * @property {CallExpression} define
+ * @property {(CallExpression | Identifier | MemberExpression)[]} defineChain Holds the initialization path for assignment of ref objects.
+ *
+ * @typedef {RefObjectReferenceForIdentifier | RefObjectReferenceForExpression | RefObjectReferenceForPattern} RefObjectReference
+ */
+/**
+ * @typedef {object} ReactiveVariableReference
+ * @property {Identifier} node
+ * @property {boolean} escape Within escape hint (`$$()`)
+ * @property {VariableDeclaration} variableDeclaration
+ * @property {string} method
+ * @property {CallExpression} define
+ */
+
+/**
+ * @typedef {object} RefObjectReferences
+ * @property {<T extends Identifier | Expression | Pattern | Super> (node: T) =>
+ *   T extends Identifier ?
+ *     RefObjectReferenceForIdentifier | null :
+ *   T extends Expression ?
+ *     RefObjectReferenceForExpression | null :
+ *   T extends Pattern ?
+ *     RefObjectReferenceForPattern | null :
+ *   null} get
+ */
+/**
+ * @typedef {object} ReactiveVariableReferences
+ * @property {(node: Identifier) => ReactiveVariableReference | null} get
+ */
+
+const REF_MACROS = [
+  '$ref',
+  '$computed',
+  '$shallowRef',
+  '$customRef',
+  '$toRef',
+  '$'
+]
+
+/** @type {WeakMap<Program, RefObjectReferences>} */
+const cacheForRefObjectReferences = new WeakMap()
+/** @type {WeakMap<Program, ReactiveVariableReferences>} */
+const cacheForReactiveVariableReferences = new WeakMap()
+
+/**
+ * Iterate the call expressions that define the ref object.
+ * @param {import('eslint').Scope.Scope} globalScope
+ * @returns {Iterable<{ node: CallExpression, name: string }>}
+ */
+function* iterateDefineRefs(globalScope) {
+  const tracker = new ReferenceTracker(globalScope)
+  for (const { node, path } of utils.iterateReferencesTraceMap(tracker, {
+    ref: {
+      [ReferenceTracker.CALL]: true
+    },
+    computed: {
+      [ReferenceTracker.CALL]: true
+    },
+    toRef: {
+      [ReferenceTracker.CALL]: true
+    },
+    customRef: {
+      [ReferenceTracker.CALL]: true
+    },
+    shallowRef: {
+      [ReferenceTracker.CALL]: true
+    },
+    toRefs: {
+      [ReferenceTracker.CALL]: true
+    }
+  })) {
+    const expr = /** @type {CallExpression} */ (node)
+    yield {
+      node: expr,
+      name: path[path.length - 1]
+    }
+  }
+}
+
+/**
+ * Iterate the call expressions that defineModel() macro.
+ * @param {import('eslint').Scope.Scope} globalScope
+ * @returns {Iterable<{ node: CallExpression }>}
+ */
+function* iterateDefineModels(globalScope) {
+  for (const { identifier } of iterateMacroReferences()) {
+    if (
+      identifier.parent.type === 'CallExpression' &&
+      identifier.parent.callee === identifier
+    ) {
+      yield {
+        node: identifier.parent
+      }
+    }
+  }
+
+  /**
+   * Iterate macro reference.
+   * @returns {Iterable<Reference>}
+   */
+  function* iterateMacroReferences() {
+    const variable = globalScope.set.get('defineModel')
+    if (
+      variable &&
+      variable.defs.length === 0 /* It was automatically defined. */
+    ) {
+      yield* variable.references
+    }
+    for (const ref of globalScope.through) {
+      if (ref.identifier.name === 'defineModel') {
+        yield ref
+      }
+    }
+  }
+}
+
+/**
+ * Iterate the call expressions that define the reactive variables.
+ * @param {import('eslint').Scope.Scope} globalScope
+ * @returns {Iterable<{ node: CallExpression, name: string }>}
+ */
+function* iterateDefineReactiveVariables(globalScope) {
+  for (const { identifier } of iterateRefMacroReferences()) {
+    if (
+      identifier.parent.type === 'CallExpression' &&
+      identifier.parent.callee === identifier
+    ) {
+      yield {
+        node: identifier.parent,
+        name: identifier.name
+      }
+    }
+  }
+
+  /**
+   * Iterate ref macro reference.
+   * @returns {Iterable<Reference>}
+   */
+  function* iterateRefMacroReferences() {
+    yield* REF_MACROS.map((m) => globalScope.set.get(m))
+      .filter(utils.isDef)
+      .flatMap((v) => v.references)
+    for (const ref of globalScope.through) {
+      if (REF_MACROS.includes(ref.identifier.name)) {
+        yield ref
+      }
+    }
+  }
+}
+
+/**
+ *  Iterate the call expressions that the escape hint values.
+ * @param {import('eslint').Scope.Scope} globalScope
+ * @returns {Iterable<CallExpression>}
+ */
+function* iterateEscapeHintValueRefs(globalScope) {
+  for (const { identifier } of iterateEscapeHintReferences()) {
+    if (
+      identifier.parent.type === 'CallExpression' &&
+      identifier.parent.callee === identifier
+    ) {
+      yield identifier.parent
+    }
+  }
+
+  /**
+   * Iterate escape hint reference.
+   * @returns {Iterable<Reference>}
+   */
+  function* iterateEscapeHintReferences() {
+    const escapeHint = globalScope.set.get('$$')
+    if (escapeHint) {
+      yield* escapeHint.references
+    }
+    for (const ref of globalScope.through) {
+      if (ref.identifier.name === '$$') {
+        yield ref
+      }
+    }
+  }
+}
+
+/**
+ * Extract identifier from given pattern node.
+ * @param {Pattern} node
+ * @returns {Iterable<Identifier>}
+ */
+function* extractIdentifier(node) {
+  switch (node.type) {
+    case 'Identifier': {
+      yield node
+      break
+    }
+    case 'ObjectPattern': {
+      for (const property of node.properties) {
+        if (property.type === 'Property') {
+          yield* extractIdentifier(property.value)
+        } else if (property.type === 'RestElement') {
+          yield* extractIdentifier(property)
+        }
+      }
+      break
+    }
+    case 'ArrayPattern': {
+      for (const element of node.elements) {
+        if (element) {
+          yield* extractIdentifier(element)
+        }
+      }
+      break
+    }
+    case 'AssignmentPattern': {
+      yield* extractIdentifier(node.left)
+      break
+    }
+    case 'RestElement': {
+      yield* extractIdentifier(node.argument)
+      break
+    }
+    case 'MemberExpression': {
+      // can't extract
+      break
+    }
+    // No default
+  }
+}
+
+/**
+ * Iterate references of the given identifier.
+ * @param {Identifier} id
+ * @param {import('eslint').Scope.Scope} globalScope
+ * @returns {Iterable<import('eslint').Scope.Reference>}
+ */
+function* iterateIdentifierReferences(id, globalScope) {
+  const variable = eslintUtils.findVariable(globalScope, id)
+  if (!variable) {
+    return
+  }
+
+  for (const reference of variable.references) {
+    yield reference
+  }
+}
+
+/**
+ * @param {RuleContext} context The rule context.
+ */
+function getGlobalScope(context) {
+  const sourceCode = context.sourceCode
+  return (
+    sourceCode.scopeManager.globalScope || sourceCode.scopeManager.scopes[0]
+  )
+}
+
+module.exports = {
+  iterateDefineRefs,
+  extractRefObjectReferences,
+  extractReactiveVariableReferences
+}
+
+/**
+ * @typedef {object} RefObjectReferenceContext
+ * @property {string} method
+ * @property {CallExpression} define
+ * @property {(CallExpression | Identifier | MemberExpression)[]} defineChain Holds the initialization path for assignment of ref objects.
+ */
+
+/**
+ * @implements {RefObjectReferences}
+ */
+class RefObjectReferenceExtractor {
+  /**
+   * @param {RuleContext} context The rule context.
+   */
+  constructor(context) {
+    this.context = context
+    /** @type {Map<Identifier | MemberExpression | CallExpression | ObjectPattern, RefObjectReference>} */
+    this.references = new Map()
+
+    /** @type {Set<Identifier>} */
+    this._processedIds = new Set()
+  }
+
+  /**
+   * @template {Identifier | Expression | Pattern | Super} T
+   * @param {T} node
+   * @returns {T extends Identifier ?
+   *     RefObjectReferenceForIdentifier | null :
+   *   T extends Expression ?
+   *     RefObjectReferenceForExpression | null :
+   *   T extends Pattern ?
+   *     RefObjectReferenceForPattern | null :
+   *   null}
+   */
+  get(node) {
+    return /** @type {never} */ (
+      this.references.get(/** @type {never} */ (node)) || null
+    )
+  }
+
+  /**
+   * @param {CallExpression} node
+   * @param {string} method
+   */
+  processDefineRef(node, method) {
+    const parent = node.parent
+    /** @type {Pattern | null} */
+    let pattern = null
+    if (parent.type === 'VariableDeclarator') {
+      pattern = parent.id
+    } else if (
+      parent.type === 'AssignmentExpression' &&
+      parent.operator === '='
+    ) {
+      pattern = parent.left
+    } else {
+      if (method !== 'toRefs') {
+        this.references.set(node, {
+          type: 'expression',
+          node,
+          method,
+          define: node,
+          defineChain: [node]
+        })
+      }
+      return
+    }
+
+    const ctx = {
+      method,
+      define: node,
+      defineChain: [node]
+    }
+
+    if (method === 'toRefs') {
+      const propertyReferenceExtractor = definePropertyReferenceExtractor(
+        this.context
+      )
+      const propertyReferences =
+        propertyReferenceExtractor.extractFromPattern(pattern)
+      for (const name of propertyReferences.allProperties().keys()) {
+        for (const nest of propertyReferences.getNestNodes(name)) {
+          if (nest.type === 'expression') {
+            this.processMemberExpression(nest.node, ctx)
+          } else if (nest.type === 'pattern') {
+            this.processPattern(nest.node, ctx)
+          }
+        }
+      }
+    } else {
+      this.processPattern(pattern, ctx)
+    }
+  }
+
+  /**
+   * @param {CallExpression} node
+   */
+  processDefineModel(node) {
+    const parent = node.parent
+    /** @type {Pattern | null} */
+    let pattern = null
+    if (parent.type === 'VariableDeclarator') {
+      pattern = parent.id
+    } else if (
+      parent.type === 'AssignmentExpression' &&
+      parent.operator === '='
+    ) {
+      pattern = parent.left
+    } else {
+      return
+    }
+
+    const ctx = {
+      method: 'defineModel',
+      define: node,
+      defineChain: [node]
+    }
+
+    if (pattern.type === 'ArrayPattern' && pattern.elements[0]) {
+      pattern = pattern.elements[0]
+    }
+    this.processPattern(pattern, ctx)
+  }
+
+  /**
+   * @param {MemberExpression | Identifier} node
+   * @param {RefObjectReferenceContext} ctx
+   */
+  processExpression(node, ctx) {
+    const parent = node.parent
+    if (parent.type === 'AssignmentExpression') {
+      if (parent.operator === '=' && parent.right === node) {
+        // `(foo = obj.mem)`
+        this.processPattern(parent.left, {
+          ...ctx,
+          defineChain: [node, ...ctx.defineChain]
+        })
+        return true
+      }
+    } else if (parent.type === 'VariableDeclarator' && parent.init === node) {
+      // `const foo = obj.mem`
+      this.processPattern(parent.id, {
+        ...ctx,
+        defineChain: [node, ...ctx.defineChain]
+      })
+      return true
+    }
+    return false
+  }
+  /**
+   * @param {MemberExpression} node
+   * @param {RefObjectReferenceContext} ctx
+   */
+  processMemberExpression(node, ctx) {
+    if (this.processExpression(node, ctx)) {
+      return
+    }
+    this.references.set(node, {
+      type: 'expression',
+      node,
+      ...ctx
+    })
+  }
+
+  /**
+   * @param {Pattern} node
+   * @param {RefObjectReferenceContext} ctx
+   */
+  processPattern(node, ctx) {
+    switch (node.type) {
+      case 'Identifier': {
+        this.processIdentifierPattern(node, ctx)
+        break
+      }
+      case 'ArrayPattern':
+      case 'RestElement':
+      case 'MemberExpression': {
+        return
+      }
+      case 'ObjectPattern': {
+        this.references.set(node, {
+          type: 'pattern',
+          node,
+          ...ctx
+        })
+        return
+      }
+      case 'AssignmentPattern': {
+        this.processPattern(node.left, ctx)
+        return
+      }
+      // No default
+    }
+  }
+
+  /**
+   * @param {Identifier} node
+   * @param {RefObjectReferenceContext} ctx
+   */
+  processIdentifierPattern(node, ctx) {
+    if (this._processedIds.has(node)) {
+      return
+    }
+    this._processedIds.add(node)
+
+    for (const reference of iterateIdentifierReferences(
+      node,
+      getGlobalScope(this.context)
+    )) {
+      const def =
+        reference.resolved &&
+        reference.resolved.defs.length === 1 &&
+        reference.resolved.defs[0].type === 'Variable'
+          ? reference.resolved.defs[0]
+          : null
+      if (def && def.name === reference.identifier) {
+        continue
+      }
+      if (
+        reference.isRead() &&
+        this.processExpression(reference.identifier, ctx)
+      ) {
+        continue
+      }
+      this.references.set(reference.identifier, {
+        type: reference.isWrite() ? 'pattern' : 'expression',
+        node: reference.identifier,
+        variableDeclarator: def ? def.node : null,
+        variableDeclaration: def ? def.parent : null,
+        ...ctx
+      })
+    }
+  }
+}
+
+/**
+ * Extracts references of all ref objects.
+ * @param {RuleContext} context The rule context.
+ * @returns {RefObjectReferences}
+ */
+function extractRefObjectReferences(context) {
+  const sourceCode = context.sourceCode
+  const cachedReferences = cacheForRefObjectReferences.get(sourceCode.ast)
+  if (cachedReferences) {
+    return cachedReferences
+  }
+  const references = new RefObjectReferenceExtractor(context)
+
+  const globalScope = getGlobalScope(context)
+  for (const { node, name } of iterateDefineRefs(globalScope)) {
+    references.processDefineRef(node, name)
+  }
+  for (const { node } of iterateDefineModels(globalScope)) {
+    references.processDefineModel(node)
+  }
+
+  cacheForRefObjectReferences.set(sourceCode.ast, references)
+
+  return references
+}
+
+/**
+ * @implements {ReactiveVariableReferences}
+ */
+class ReactiveVariableReferenceExtractor {
+  /**
+   * @param {RuleContext} context The rule context.
+   */
+  constructor(context) {
+    this.context = context
+    /** @type {Map<Identifier, ReactiveVariableReference>} */
+    this.references = new Map()
+
+    /** @type {Set<Identifier>} */
+    this._processedIds = new Set()
+
+    /** @type {Set<CallExpression>} */
+    this._escapeHintValueRefs = new Set(
+      iterateEscapeHintValueRefs(getGlobalScope(context))
+    )
+  }
+
+  /**
+   * @param {Identifier} node
+   * @returns {ReactiveVariableReference | null}
+   */
+  get(node) {
+    return this.references.get(node) || null
+  }
+
+  /**
+   * @param {CallExpression} node
+   * @param {string} method
+   */
+  processDefineReactiveVariable(node, method) {
+    const parent = node.parent
+    if (parent.type !== 'VariableDeclarator') {
+      return
+    }
+    /** @type {Pattern | null} */
+    const pattern = parent.id
+
+    if (method === '$') {
+      for (const id of extractIdentifier(pattern)) {
+        this.processIdentifierPattern(id, method, node)
+      }
+    } else {
+      if (pattern.type === 'Identifier') {
+        this.processIdentifierPattern(pattern, method, node)
+      }
+    }
+  }
+
+  /**
+   * @param {Identifier} node
+   * @param {string} method
+   * @param {CallExpression} define
+   */
+  processIdentifierPattern(node, method, define) {
+    if (this._processedIds.has(node)) {
+      return
+    }
+    this._processedIds.add(node)
+
+    for (const reference of iterateIdentifierReferences(
+      node,
+      getGlobalScope(this.context)
+    )) {
+      const def =
+        reference.resolved &&
+        reference.resolved.defs.length === 1 &&
+        reference.resolved.defs[0].type === 'Variable'
+          ? reference.resolved.defs[0]
+          : null
+      if (!def || def.name === reference.identifier) {
+        continue
+      }
+      this.references.set(reference.identifier, {
+        node: reference.identifier,
+        escape: this.withinEscapeHint(reference.identifier),
+        method,
+        define,
+        variableDeclaration: def.parent
+      })
+    }
+  }
+
+  /**
+   * Checks whether the given identifier node within the escape hints (`$$()`) or not.
+   * @param {Identifier} node
+   */
+  withinEscapeHint(node) {
+    /** @type {Identifier | ObjectExpression | ArrayExpression | SpreadElement | Property | AssignmentProperty} */
+    let target = node
+    /** @type {ASTNode | null} */
+    let parent = target.parent
+    while (parent) {
+      if (parent.type === 'CallExpression') {
+        if (
+          parent.arguments.includes(/** @type {any} */ (target)) &&
+          this._escapeHintValueRefs.has(parent)
+        ) {
+          return true
+        }
+        return false
+      }
+      if (
+        (parent.type === 'Property' && parent.value === target) ||
+        (parent.type === 'ObjectExpression' &&
+          parent.properties.includes(/** @type {any} */ (target))) ||
+        parent.type === 'ArrayExpression' ||
+        parent.type === 'SpreadElement'
+      ) {
+        target = parent
+        parent = target.parent
+      } else {
+        return false
+      }
+    }
+    return false
+  }
+}
+
+/**
+ * Extracts references of all reactive variables.
+ * @param {RuleContext} context The rule context.
+ * @returns {ReactiveVariableReferences}
+ */
+function extractReactiveVariableReferences(context) {
+  const sourceCode = context.sourceCode
+  const cachedReferences = cacheForReactiveVariableReferences.get(
+    sourceCode.ast
+  )
+  if (cachedReferences) {
+    return cachedReferences
+  }
+
+  const references = new ReactiveVariableReferenceExtractor(context)
+
+  for (const { node, name } of iterateDefineReactiveVariables(
+    getGlobalScope(context)
+  )) {
+    references.processDefineReactiveVariable(node, name)
+  }
+
+  cacheForReactiveVariableReferences.set(sourceCode.ast, references)
+
+  return references
+}
diff --git a/lib/utils/regexp.js b/lib/utils/regexp.js
index f19d55a6e..006568067 100644
--- a/lib/utils/regexp.js
+++ b/lib/utils/regexp.js
@@ -12,7 +12,7 @@ const RE_REGEXP_STR = /^\/(.+)\/(.*)$/u
  */
 function escape(string) {
   return string && RE_HAS_REGEXP_CHAR.test(string)
-    ? string.replace(RE_REGEXP_CHAR, '\\$&')
+    ? string.replace(RE_REGEXP_CHAR, String.raw`\$&`)
     : string
 }
 
@@ -22,14 +22,25 @@ function escape(string) {
  * Strings like `"/^foo/i"` are converted to `/^foo/i` of `RegExp`.
  *
  * @param {string} string The string to convert.
+ * @param {{add?: string, remove?: string}} [flags] The flags to add or remove.
+ *   - `add`: Flags to add to the `RegExp` (e.g. `'i'` for case-insensitive).
+ *   - `remove`: Flags to remove from the `RegExp` (e.g. `'g'` to remove global matching).
  * @returns {RegExp} Returns the `RegExp`.
  */
-function toRegExp(string) {
+function toRegExp(string, flags = {}) {
   const parts = RE_REGEXP_STR.exec(string)
+  const { add: forceAddFlags = '', remove: forceRemoveFlags = '' } =
+    typeof flags === 'object' ? flags : {} // Avoid issues when this is called directly from array.map
   if (parts) {
-    return new RegExp(parts[1], parts[2])
+    return new RegExp(
+      parts[1],
+      parts[2].replace(
+        new RegExp(`[${forceAddFlags}${forceRemoveFlags}]`, 'g'),
+        ''
+      ) + forceAddFlags
+    )
   }
-  return new RegExp(`^${escape(string)}$`)
+  return new RegExp(`^${escape(string)}$`, forceAddFlags)
 }
 
 /**
@@ -41,8 +52,32 @@ function isRegExp(string) {
   return RE_REGEXP_STR.test(string)
 }
 
+/**
+ * Converts an array of strings to a singular function to match any of them.
+ * This function converts each string to a `RegExp` and returns a function that checks all of them.
+ *
+ * @param {string[]} [patterns] The strings or regular expression strings to match.
+ * @returns {(...toCheck: string[]) => boolean} Returns a function that checks if any string matches any of the given patterns.
+ */
+function toRegExpGroupMatcher(patterns = []) {
+  if (patterns.length === 0) {
+    return () => false
+  }
+
+  // In the future, we could optimize this by joining expressions with identical flags.
+  const regexps = patterns.map((pattern) => toRegExp(pattern, { remove: 'g' }))
+
+  if (regexps.length === 1) {
+    return (...toCheck) => toCheck.some((str) => regexps[0].test(str))
+  }
+
+  return (...toCheck) =>
+    regexps.some((regexp) => toCheck.some((str) => regexp.test(str)))
+}
+
 module.exports = {
   escape,
   toRegExp,
-  isRegExp
+  isRegExp,
+  toRegExpGroupMatcher
 }
diff --git a/lib/utils/scope.js b/lib/utils/scope.js
new file mode 100644
index 000000000..7b0083e1d
--- /dev/null
+++ b/lib/utils/scope.js
@@ -0,0 +1,30 @@
+module.exports = {
+  getScope
+}
+
+/**
+ * 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.sourceCode.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]
+}
diff --git a/lib/utils/selector.js b/lib/utils/selector.js
index 862f695fb..dfcfc3265 100644
--- a/lib/utils/selector.js
+++ b/lib/utils/selector.js
@@ -23,7 +23,7 @@ function parseSelector(selector, context) {
   let astSelector
   try {
     astSelector = parser().astSync(selector)
-  } catch (error) {
+  } catch {
     context.report({
       loc: { line: 0, column: 0 },
       message: `Cannot parse selector: ${selector}.`
@@ -168,7 +168,7 @@ function selectorToVElementMatcher(selectorChildren) {
  */
 function combination(left, combinator, right) {
   switch (combinator.trim()) {
-    case '':
+    case '': {
       // descendant
       return (element, subject) => {
         if (right(element, null)) {
@@ -182,7 +182,8 @@ function combination(left, combinator, right) {
         }
         return false
       }
-    case '>':
+    }
+    case '>': {
       // child
       return (element, subject) => {
         if (right(element, null)) {
@@ -193,7 +194,8 @@ function combination(left, combinator, right) {
         }
         return false
       }
-    case '+':
+    }
+    case '+': {
       // adjacent
       return (element, subject) => {
         if (right(element, null)) {
@@ -204,7 +206,8 @@ function combination(left, combinator, right) {
         }
         return false
       }
-    case '~':
+    }
+    case '~': {
       // sibling
       return (element, subject) => {
         if (right(element, null)) {
@@ -216,8 +219,10 @@ function combination(left, combinator, right) {
         }
         return false
       }
-    default:
+    }
+    default: {
       throw new SelectorError(`Unknown combinator: ${combinator}.`)
+    }
   }
 }
 
@@ -228,26 +233,35 @@ function combination(left, combinator, right) {
  */
 function nodeToVElementMatcher(selector) {
   switch (selector.type) {
-    case 'attribute':
+    case 'attribute': {
       return attributeNodeToVElementMatcher(selector)
-    case 'class':
+    }
+    case 'class': {
       return classNameNodeToVElementMatcher(selector)
-    case 'id':
+    }
+    case 'id': {
       return identifierNodeToVElementMatcher(selector)
-    case 'tag':
+    }
+    case 'tag': {
       return tagNodeToVElementMatcher(selector)
-    case 'universal':
+    }
+    case 'universal': {
       return universalNodeToVElementMatcher(selector)
-    case 'pseudo':
+    }
+    case 'pseudo': {
       return pseudoNodeToVElementMatcher(selector)
-    case 'nesting':
+    }
+    case 'nesting': {
       throw new SelectorError('Unsupported nesting selector.')
-    case 'string':
+    }
+    case 'string': {
       throw new SelectorError(`Unknown selector: ${selector.value}.`)
-    default:
+    }
+    default: {
       throw new SelectorError(
         `Unknown selector: ${/** @type {any}*/ (selector).value}.`
       )
+    }
   }
 }
 
@@ -264,30 +278,37 @@ function attributeNodeToVElementMatcher(selector) {
   const value = selector.value || ''
 
   switch (selector.operator) {
-    case '=':
+    case '=': {
       return buildVElementMatcher(value, (attr, val) => attr === val)
-    case '~=':
+    }
+    case '~=': {
       // words
       return buildVElementMatcher(value, (attr, val) =>
         attr.split(/\s+/gu).includes(val)
       )
-    case '|=':
+    }
+    case '|=': {
       // immediately followed by hyphen
       return buildVElementMatcher(
         value,
         (attr, val) => attr === val || attr.startsWith(`${val}-`)
       )
-    case '^=':
+    }
+    case '^=': {
       // prefixed
       return buildVElementMatcher(value, (attr, val) => attr.startsWith(val))
-    case '$=':
+    }
+    case '$=': {
       // suffixed
       return buildVElementMatcher(value, (attr, val) => attr.endsWith(val))
-    case '*=':
+    }
+    case '*=': {
       // contains
       return buildVElementMatcher(value, (attr, val) => attr.includes(val))
-    default:
+    }
+    default: {
       throw new SelectorError(`Unsupported operator: ${selector.operator}.`)
+    }
   }
 
   /**
@@ -376,19 +397,22 @@ function pseudoNodeToVElementMatcher(selector) {
       return (element, subject) => !selectors(element, subject)
     }
     case ':is':
-    case ':where':
+    case ':where': {
       // https://developer.mozilla.org/en-US/docs/Web/CSS/:is
       // https://developer.mozilla.org/en-US/docs/Web/CSS/:where
       return selectorsToVElementMatcher(selector.nodes)
-    case ':has':
+    }
+    case ':has': {
       // https://developer.mozilla.org/en-US/docs/Web/CSS/:has
       return pseudoHasSelectorsToVElementMatcher(selector.nodes)
-    case ':empty':
+    }
+    case ':empty': {
       // https://developer.mozilla.org/en-US/docs/Web/CSS/:empty
       return (element) =>
         element.children.every(
           (child) => child.type === 'VText' && !child.value.trim()
         )
+    }
     case ':nth-child': {
       // https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
       const nth = parseNth(selector)
@@ -401,19 +425,22 @@ function pseudoNodeToVElementMatcher(selector) {
         nth(length - index - 1)
       )
     }
-    case ':first-child':
+    case ':first-child': {
       // https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child
       return buildPseudoNthVElementMatcher((index) => index === 0)
-    case ':last-child':
+    }
+    case ':last-child': {
       // https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child
       return buildPseudoNthVElementMatcher(
         (index, length) => index === length - 1
       )
-    case ':only-child':
+    }
+    case ':only-child': {
       // https://developer.mozilla.org/en-US/docs/Web/CSS/:only-child
       return buildPseudoNthVElementMatcher(
         (index, length) => index === 0 && length === 1
       )
+    }
     case ':nth-of-type': {
       // https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type
       const nth = parseNth(selector)
@@ -426,21 +453,25 @@ function pseudoNodeToVElementMatcher(selector) {
         nth(length - index - 1)
       )
     }
-    case ':first-of-type':
+    case ':first-of-type': {
       // https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type
       return buildPseudoNthOfTypeVElementMatcher((index) => index === 0)
-    case ':last-of-type':
+    }
+    case ':last-of-type': {
       // https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type
       return buildPseudoNthOfTypeVElementMatcher(
         (index, length) => index === length - 1
       )
-    case ':only-of-type':
+    }
+    case ':only-of-type': {
       // https://developer.mozilla.org/en-US/docs/Web/CSS/:only-of-type
       return buildPseudoNthOfTypeVElementMatcher(
         (index, length) => index === 0 && length === 1
       )
-    default:
+    }
+    default: {
       throw new SelectorError(`Unsupported pseudo selector: ${pseudo}.`)
+    }
   }
 }
 
@@ -512,7 +543,7 @@ function parseNth(pseudoNode) {
     .toLowerCase()
   const openParenIndex = argumentsText.indexOf('(')
   const closeParenIndex = argumentsText.lastIndexOf(')')
-  if (openParenIndex < 0 || closeParenIndex < 0) {
+  if (openParenIndex === -1 || closeParenIndex === -1) {
     throw new SelectorError(
       `Cannot parse An+B micro syntax (:nth-xxx() argument): ${argumentsText}.`
     )
@@ -523,7 +554,7 @@ function parseNth(pseudoNode) {
     .trim()
   try {
     return nthCheck(argument)
-  } catch (error) {
+  } catch {
     throw new SelectorError(
       `Cannot parse An+B micro syntax (:nth-xxx() argument): '${argument}'.`
     )
@@ -549,9 +580,10 @@ function buildPseudoNthVElementMatcher(testIndex) {
  */
 function buildPseudoNthOfTypeVElementMatcher(testIndex) {
   return (element) => {
-    const elements = element.parent.children
-      .filter(isVElement)
-      .filter((e) => e.rawName === element.rawName)
+    const elements = element.parent.children.filter(
+      /** @returns {e is VElement} */
+      (e) => isVElement(e) && e.rawName === element.rawName
+    )
     return testIndex(elements.indexOf(element), elements.length)
   }
 }
diff --git a/lib/utils/style-variables/index.js b/lib/utils/style-variables/index.js
index 841f72f55..e855504d0 100644
--- a/lib/utils/style-variables/index.js
+++ b/lib/utils/style-variables/index.js
@@ -40,15 +40,17 @@ const cache = new WeakMap()
  * @returns {StyleVariablesContext | null}
  */
 function getStyleVariablesContext(context) {
+  const sourceCode = context.sourceCode
   const df =
-    context.parserServices.getDocumentFragment &&
-    context.parserServices.getDocumentFragment()
+    sourceCode.parserServices.getDocumentFragment &&
+    sourceCode.parserServices.getDocumentFragment()
   if (!df) {
     return null
   }
-  const styles = df.children
-    .filter(isVElement)
-    .filter((e) => e.name === 'style')
+  const styles = df.children.filter(
+    /** @returns {e is VElement} */
+    (e) => isVElement(e) && e.name === 'style'
+  )
   if (styles.length === 0) {
     return null
   }
diff --git a/lib/utils/svg-attributes-weird-case.json b/lib/utils/svg-attributes-weird-case.json
index fb28f8922..d3988f0e6 100644
--- a/lib/utils/svg-attributes-weird-case.json
+++ b/lib/utils/svg-attributes-weird-case.json
@@ -135,4 +135,4 @@
   "xChannelSelector",
   "yChannelSelector",
   "zoomAndPan"
-]
\ No newline at end of file
+]
diff --git a/lib/utils/svg-elements.json b/lib/utils/svg-elements.json
index aaee2e6f3..f214aad24 100644
--- a/lib/utils/svg-elements.json
+++ b/lib/utils/svg-elements.json
@@ -1 +1,65 @@
-["a","animate","animateMotion","animateTransform","audio","canvas","circle","clipPath","defs","desc","discard","ellipse","feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feDropShadow","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feImage","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence","filter","foreignObject","g","iframe","image","line","linearGradient","marker","mask","metadata","mpath","path","pattern","polygon","polyline","radialGradient","rect","script","set","stop","style","svg","switch","symbol","text","textPath","title","tspan","unknown","use","video","view"]
+[
+  "a",
+  "animate",
+  "animateMotion",
+  "animateTransform",
+  "circle",
+  "clipPath",
+  "defs",
+  "desc",
+  "ellipse",
+  "feBlend",
+  "feColorMatrix",
+  "feComponentTransfer",
+  "feComposite",
+  "feConvolveMatrix",
+  "feDiffuseLighting",
+  "feDisplacementMap",
+  "feDistantLight",
+  "feDropShadow",
+  "feFlood",
+  "feFuncA",
+  "feFuncB",
+  "feFuncG",
+  "feFuncR",
+  "feGaussianBlur",
+  "feImage",
+  "feMerge",
+  "feMergeNode",
+  "feMorphology",
+  "feOffset",
+  "fePointLight",
+  "feSpecularLighting",
+  "feSpotLight",
+  "feTile",
+  "feTurbulence",
+  "filter",
+  "foreignObject",
+  "g",
+  "image",
+  "line",
+  "linearGradient",
+  "marker",
+  "mask",
+  "metadata",
+  "mpath",
+  "path",
+  "pattern",
+  "polygon",
+  "polyline",
+  "radialGradient",
+  "rect",
+  "script",
+  "set",
+  "stop",
+  "style",
+  "svg",
+  "switch",
+  "symbol",
+  "text",
+  "textPath",
+  "title",
+  "tspan",
+  "use",
+  "view"
+]
diff --git a/lib/utils/ts-ast-utils.js b/lib/utils/ts-ast-utils.js
deleted file mode 100644
index 181b51a53..000000000
--- a/lib/utils/ts-ast-utils.js
+++ /dev/null
@@ -1,333 +0,0 @@
-const { findVariable } = require('eslint-utils')
-/**
- * @typedef {import('@typescript-eslint/types').TSESTree.TypeNode} TypeNode
- * @typedef {import('@typescript-eslint/types').TSESTree.TSInterfaceBody} TSInterfaceBody
- * @typedef {import('@typescript-eslint/types').TSESTree.TSTypeLiteral} TSTypeLiteral
- * @typedef {import('@typescript-eslint/types').TSESTree.Parameter} TSESTreeParameter
- * @typedef {import('@typescript-eslint/types').TSESTree.Node} Node
- *
- */
-/**
- * @typedef {import('../../typings/eslint-plugin-vue/util-types/utils').ComponentTypeProp} ComponentTypeProp
- * @typedef {import('../../typings/eslint-plugin-vue/util-types/utils').ComponentTypeEmit} ComponentTypeEmit
- */
-
-module.exports = {
-  isTypeNode,
-  getComponentPropsFromTypeDefine,
-  getComponentEmitsFromTypeDefine
-}
-
-/**
- * @param {Node | ASTNode} node
- * @returns {node is TypeNode}
- */
-function isTypeNode(node) {
-  return (
-    node.type === 'TSAnyKeyword' ||
-    node.type === 'TSArrayType' ||
-    node.type === 'TSBigIntKeyword' ||
-    node.type === 'TSBooleanKeyword' ||
-    node.type === 'TSConditionalType' ||
-    node.type === 'TSConstructorType' ||
-    node.type === 'TSFunctionType' ||
-    node.type === 'TSImportType' ||
-    node.type === 'TSIndexedAccessType' ||
-    node.type === 'TSInferType' ||
-    node.type === 'TSIntersectionType' ||
-    node.type === 'TSIntrinsicKeyword' ||
-    node.type === 'TSLiteralType' ||
-    node.type === 'TSMappedType' ||
-    node.type === 'TSNamedTupleMember' ||
-    node.type === 'TSNeverKeyword' ||
-    node.type === 'TSNullKeyword' ||
-    node.type === 'TSNumberKeyword' ||
-    node.type === 'TSObjectKeyword' ||
-    node.type === 'TSOptionalType' ||
-    node.type === 'TSRestType' ||
-    node.type === 'TSStringKeyword' ||
-    node.type === 'TSSymbolKeyword' ||
-    node.type === 'TSTemplateLiteralType' ||
-    node.type === 'TSThisType' ||
-    node.type === 'TSTupleType' ||
-    node.type === 'TSTypeLiteral' ||
-    node.type === 'TSTypeOperator' ||
-    node.type === 'TSTypePredicate' ||
-    node.type === 'TSTypeQuery' ||
-    node.type === 'TSTypeReference' ||
-    node.type === 'TSUndefinedKeyword' ||
-    node.type === 'TSUnionType' ||
-    node.type === 'TSUnknownKeyword' ||
-    node.type === 'TSVoidKeyword'
-  )
-}
-
-/**
- * @param {TypeNode} node
- * @returns {node is TSTypeLiteral}
- */
-function isTSTypeLiteral(node) {
-  return node.type === 'TSTypeLiteral'
-}
-/**
- * @param {TypeNode} node
- * @returns {node is TSFunctionType}
- */
-function isTSFunctionType(node) {
-  return node.type === 'TSFunctionType'
-}
-
-/**
- * Get all props by looking at all component's properties
- * @param {RuleContext} context The ESLint rule context object.
- * @param {TypeNode} propsNode Type with props definition
- * @return {ComponentTypeProp[]} Array of component props
- */
-function getComponentPropsFromTypeDefine(context, propsNode) {
-  /** @type {TSInterfaceBody | TSTypeLiteral|null} */
-  const defNode = resolveQualifiedType(context, propsNode, isTSTypeLiteral)
-  if (!defNode) {
-    return []
-  }
-  return [...extractRuntimeProps(context, defNode)]
-}
-
-/**
- * Get all emits by looking at all component's properties
- * @param {RuleContext} context The ESLint rule context object.
- * @param {TypeNode} emitsNode Type with emits definition
- * @return {ComponentTypeEmit[]} Array of component emits
- */
-function getComponentEmitsFromTypeDefine(context, emitsNode) {
-  /** @type {TSInterfaceBody | TSTypeLiteral | TSFunctionType | null} */
-  const defNode = resolveQualifiedType(
-    context,
-    emitsNode,
-    (n) => isTSTypeLiteral(n) || isTSFunctionType(n)
-  )
-  if (!defNode) {
-    return []
-  }
-  return [...extractRuntimeEmits(defNode)]
-}
-
-/**
- * @see https://github.com/vuejs/vue-next/blob/253ca2729d808fc051215876aa4af986e4caa43c/packages/compiler-sfc/src/compileScript.ts#L1512
- * @param {RuleContext} context The ESLint rule context object.
- * @param {TSTypeLiteral | TSInterfaceBody} node
- * @returns {IterableIterator<ComponentTypeProp>}
- */
-function* extractRuntimeProps(context, node) {
-  const members = node.type === 'TSTypeLiteral' ? node.members : node.body
-  for (const m of members) {
-    if (
-      (m.type === 'TSPropertySignature' || m.type === 'TSMethodSignature') &&
-      (m.key.type === 'Identifier' || m.key.type === 'Literal')
-    ) {
-      let type
-      if (m.type === 'TSMethodSignature') {
-        type = ['Function']
-      } else if (m.typeAnnotation) {
-        type = inferRuntimeType(context, m.typeAnnotation.typeAnnotation)
-      }
-      yield {
-        type: 'type',
-        key: /** @type {Identifier | Literal} */ (m.key),
-        propName: m.key.type === 'Identifier' ? m.key.name : `${m.key.value}`,
-        value: null,
-        node: /** @type {TSPropertySignature | TSMethodSignature} */ (m),
-
-        required: !m.optional,
-        types: type || [`null`]
-      }
-    }
-  }
-}
-
-/**
- * @see https://github.com/vuejs/vue-next/blob/348c3b01e56383ffa70b180d1376fdf4ac12e274/packages/compiler-sfc/src/compileScript.ts#L1632
- * @param {TSTypeLiteral | TSInterfaceBody | TSFunctionType} node
- * @returns {IterableIterator<ComponentTypeEmit>}
- */
-function* extractRuntimeEmits(node) {
-  if (node.type === 'TSTypeLiteral' || node.type === 'TSInterfaceBody') {
-    const members = node.type === 'TSTypeLiteral' ? node.members : node.body
-    for (const t of members) {
-      if (t.type === 'TSCallSignatureDeclaration') {
-        yield* extractEventNames(
-          t.params[0],
-          /** @type {TSCallSignatureDeclaration} */ (t)
-        )
-      }
-    }
-    return
-  } else {
-    yield* extractEventNames(node.params[0], node)
-  }
-}
-
-/**
- * @param {TSESTreeParameter} eventName
- * @param {TSCallSignatureDeclaration | TSFunctionType} member
- * @returns {IterableIterator<ComponentTypeEmit>}
- */
-function* extractEventNames(eventName, member) {
-  if (
-    eventName &&
-    eventName.type === 'Identifier' &&
-    eventName.typeAnnotation &&
-    eventName.typeAnnotation.type === 'TSTypeAnnotation'
-  ) {
-    const typeNode = eventName.typeAnnotation.typeAnnotation
-    if (
-      typeNode.type === 'TSLiteralType' &&
-      typeNode.literal.type === 'Literal'
-    ) {
-      const emitName = String(typeNode.literal.value)
-      yield {
-        type: 'type',
-        key: /** @type {TSLiteralType} */ (typeNode),
-        emitName,
-        value: null,
-        node: member
-      }
-    } else if (typeNode.type === 'TSUnionType') {
-      for (const t of typeNode.types) {
-        if (t.type === 'TSLiteralType' && t.literal.type === 'Literal') {
-          const emitName = String(t.literal.value)
-          yield {
-            type: 'type',
-            key: /** @type {TSLiteralType} */ (t),
-            emitName,
-            value: null,
-            node: member
-          }
-        }
-      }
-    }
-  }
-}
-
-/**
- * @see https://github.com/vuejs/vue-next/blob/253ca2729d808fc051215876aa4af986e4caa43c/packages/compiler-sfc/src/compileScript.ts#L425
- *
- * @param {RuleContext} context The ESLint rule context object.
- * @param {TypeNode} node
- * @param {(n: TypeNode)=> boolean } qualifier
- */
-function resolveQualifiedType(context, node, qualifier) {
-  if (qualifier(node)) {
-    return node
-  }
-  if (node.type === 'TSTypeReference' && node.typeName.type === 'Identifier') {
-    const refName = node.typeName.name
-    const variable = findVariable(context.getScope(), refName)
-    if (variable && variable.defs.length === 1) {
-      const def = variable.defs[0]
-      if (def.node.type === 'TSInterfaceDeclaration') {
-        return /** @type {any} */ (def.node).body
-      }
-      if (def.node.type === 'TSTypeAliasDeclaration') {
-        const typeAnnotation = /** @type {any} */ (def.node).typeAnnotation
-        return qualifier(typeAnnotation) ? typeAnnotation : null
-      }
-    }
-  }
-}
-
-/**
- * @param {RuleContext} context The ESLint rule context object.
- * @param {TypeNode} node
- * @param {Set<TypeNode>} [checked]
- * @returns {string[]}
- */
-function inferRuntimeType(context, node, checked = new Set()) {
-  switch (node.type) {
-    case 'TSStringKeyword':
-      return ['String']
-    case 'TSNumberKeyword':
-      return ['Number']
-    case 'TSBooleanKeyword':
-      return ['Boolean']
-    case 'TSObjectKeyword':
-      return ['Object']
-    case 'TSTypeLiteral':
-      return ['Object']
-    case 'TSFunctionType':
-      return ['Function']
-    case 'TSArrayType':
-    case 'TSTupleType':
-      return ['Array']
-
-    case 'TSLiteralType':
-      if (node.literal.type === 'Literal') {
-        switch (typeof node.literal.value) {
-          case 'boolean':
-            return ['Boolean']
-          case 'string':
-            return ['String']
-          case 'number':
-          case 'bigint':
-            return ['Number']
-        }
-        if (node.literal.value instanceof RegExp) {
-          return ['RegExp']
-        }
-      }
-      return [`null`]
-    case 'TSTypeReference':
-      if (node.typeName.type === 'Identifier') {
-        const variable = findVariable(context.getScope(), node.typeName.name)
-        if (variable && variable.defs.length === 1) {
-          const def = variable.defs[0]
-          if (def.node.type === 'TSInterfaceDeclaration') {
-            return [`Object`]
-          }
-          if (def.node.type === 'TSTypeAliasDeclaration') {
-            const typeAnnotation = /** @type {any} */ (def.node).typeAnnotation
-            if (!checked.has(typeAnnotation)) {
-              checked.add(typeAnnotation)
-              return inferRuntimeType(context, typeAnnotation, checked)
-            }
-          }
-        }
-        switch (node.typeName.name) {
-          case 'Array':
-          case 'Function':
-          case 'Object':
-          case 'Set':
-          case 'Map':
-          case 'WeakSet':
-          case 'WeakMap':
-          case 'Date':
-            return [node.typeName.name]
-          case 'Record':
-          case 'Partial':
-          case 'Readonly':
-          case 'Pick':
-          case 'Omit':
-          case 'Exclude':
-          case 'Extract':
-          case 'Required':
-          case 'InstanceType':
-            return ['Object']
-        }
-      }
-      return [`null`]
-
-    case 'TSUnionType':
-      const set = new Set()
-      for (const t of node.types) {
-        for (const tt of inferRuntimeType(context, t, checked)) {
-          set.add(tt)
-        }
-      }
-      return [...set]
-
-    case 'TSIntersectionType':
-      return ['Object']
-
-    default:
-      return [`null`] // no runtime check
-  }
-}
diff --git a/lib/utils/ts-utils/index.js b/lib/utils/ts-utils/index.js
new file mode 100644
index 000000000..3db610d1c
--- /dev/null
+++ b/lib/utils/ts-utils/index.js
@@ -0,0 +1,121 @@
+const {
+  isTypeNode,
+  extractRuntimeProps,
+  isTSTypeLiteral,
+  isTSTypeLiteralOrTSFunctionType,
+  extractRuntimeEmits,
+  flattenTypeNodes,
+  isTSInterfaceBody,
+  extractRuntimeSlots
+} = require('./ts-ast')
+const {
+  getComponentPropsFromTypeDefineTypes,
+  getComponentEmitsFromTypeDefineTypes,
+  getComponentSlotsFromTypeDefineTypes
+} = require('./ts-types')
+
+/**
+ * @typedef {import('@typescript-eslint/types').TSESTree.TypeNode} TSESTreeTypeNode
+ */
+/**
+ * @typedef {import('../index').ComponentTypeProp} ComponentTypeProp
+ * @typedef {import('../index').ComponentInferTypeProp} ComponentInferTypeProp
+ * @typedef {import('../index').ComponentUnknownProp} ComponentUnknownProp
+ * @typedef {import('../index').ComponentTypeEmit} ComponentTypeEmit
+ * @typedef {import('../index').ComponentInferTypeEmit} ComponentInferTypeEmit
+ * @typedef {import('../index').ComponentUnknownEmit} ComponentUnknownEmit
+ * @typedef {import('../index').ComponentTypeSlot} ComponentTypeSlot
+ * @typedef {import('../index').ComponentInferTypeSlot} ComponentInferTypeSlot
+ * @typedef {import('../index').ComponentUnknownSlot} ComponentUnknownSlot
+ */
+
+module.exports = {
+  isTypeNode,
+  getComponentPropsFromTypeDefine,
+  getComponentEmitsFromTypeDefine,
+  getComponentSlotsFromTypeDefine
+}
+
+/**
+ * Get all props by looking at all component's properties
+ * @param {RuleContext} context The ESLint rule context object.
+ * @param {TypeNode} propsNode Type with props definition
+ * @return {(ComponentTypeProp|ComponentInferTypeProp|ComponentUnknownProp)[]} Array of component props
+ */
+function getComponentPropsFromTypeDefine(context, propsNode) {
+  /** @type {(ComponentTypeProp|ComponentInferTypeProp|ComponentUnknownProp)[]} */
+  const result = []
+  for (const defNode of flattenTypeNodes(
+    context,
+    /** @type {TSESTreeTypeNode} */ (propsNode)
+  )) {
+    if (isTSInterfaceBody(defNode) || isTSTypeLiteral(defNode)) {
+      result.push(...extractRuntimeProps(context, defNode))
+    } else {
+      result.push(
+        ...getComponentPropsFromTypeDefineTypes(
+          context,
+          /** @type {TypeNode} */ (defNode)
+        )
+      )
+    }
+  }
+  return result
+}
+
+/**
+ * Get all emits by looking at all component's properties
+ * @param {RuleContext} context The ESLint rule context object.
+ * @param {TypeNode} emitsNode Type with emits definition
+ * @return {(ComponentTypeEmit|ComponentInferTypeEmit|ComponentUnknownEmit)[]} Array of component emits
+ */
+function getComponentEmitsFromTypeDefine(context, emitsNode) {
+  /** @type {(ComponentTypeEmit|ComponentInferTypeEmit|ComponentUnknownEmit)[]} */
+  const result = []
+  for (const defNode of flattenTypeNodes(
+    context,
+    /** @type {TSESTreeTypeNode} */ (emitsNode)
+  )) {
+    if (
+      isTSInterfaceBody(defNode) ||
+      isTSTypeLiteralOrTSFunctionType(defNode)
+    ) {
+      result.push(...extractRuntimeEmits(defNode))
+    } else {
+      result.push(
+        ...getComponentEmitsFromTypeDefineTypes(
+          context,
+          /** @type {TypeNode} */ (defNode)
+        )
+      )
+    }
+  }
+  return result
+}
+
+/**
+ * Get all slots by looking at all component's properties
+ * @param {RuleContext} context The ESLint rule context object.
+ * @param {TypeNode} slotsNode Type with slots definition
+ * @return {(ComponentTypeSlot|ComponentInferTypeSlot|ComponentUnknownSlot)[]} Array of component slots
+ */
+function getComponentSlotsFromTypeDefine(context, slotsNode) {
+  /** @type {(ComponentTypeSlot|ComponentInferTypeSlot|ComponentUnknownSlot)[]} */
+  const result = []
+  for (const defNode of flattenTypeNodes(
+    context,
+    /** @type {TSESTreeTypeNode} */ (slotsNode)
+  )) {
+    if (isTSInterfaceBody(defNode) || isTSTypeLiteral(defNode)) {
+      result.push(...extractRuntimeSlots(defNode))
+    } else {
+      result.push(
+        ...getComponentSlotsFromTypeDefineTypes(
+          context,
+          /** @type {TypeNode} */ (defNode)
+        )
+      )
+    }
+  }
+  return result
+}
diff --git a/lib/utils/ts-utils/ts-ast.js b/lib/utils/ts-utils/ts-ast.js
new file mode 100644
index 000000000..c33e66220
--- /dev/null
+++ b/lib/utils/ts-utils/ts-ast.js
@@ -0,0 +1,600 @@
+const { getScope } = require('../scope')
+const { findVariable } = require('@eslint-community/eslint-utils')
+const { inferRuntimeTypeFromTypeNode } = require('./ts-types')
+/**
+ * @typedef {import('@typescript-eslint/types').TSESTree.TypeNode} TSESTreeTypeNode
+ * @typedef {import('@typescript-eslint/types').TSESTree.TSInterfaceBody} TSESTreeTSInterfaceBody
+ * @typedef {import('@typescript-eslint/types').TSESTree.TSTypeLiteral} TSESTreeTSTypeLiteral
+ * @typedef {import('@typescript-eslint/types').TSESTree.TSFunctionType} TSESTreeTSFunctionType
+ * @typedef {import('@typescript-eslint/types').TSESTree.Parameter} TSESTreeParameter
+ * @typedef {import('@typescript-eslint/types').TSESTree.Node} TSESTreeNode
+ *
+ */
+/**
+ * @typedef {import('../index').ComponentTypeProp} ComponentTypeProp
+ * @typedef {import('../index').ComponentUnknownProp} ComponentUnknownProp
+ * @typedef {import('../index').ComponentTypeEmit} ComponentTypeEmit
+ * @typedef {import('../index').ComponentUnknownEmit} ComponentUnknownEmit
+ * @typedef {import('../index').ComponentTypeSlot} ComponentTypeSlot
+ * @typedef {import('../index').ComponentUnknownSlot} ComponentUnknownSlot
+ */
+
+const noop = Function.prototype
+
+module.exports = {
+  isTypeNode,
+  flattenTypeNodes,
+  isTSInterfaceBody,
+  isTSTypeLiteral,
+  isTSTypeLiteralOrTSFunctionType,
+  extractRuntimeProps,
+  extractRuntimeEmits,
+  extractRuntimeSlots
+}
+
+/**
+ * @param {ASTNode} node
+ * @returns {node is TypeNode}
+ */
+function isTypeNode(node) {
+  if (
+    node.type === 'TSAbstractKeyword' ||
+    node.type === 'TSAnyKeyword' ||
+    node.type === 'TSAsyncKeyword' ||
+    node.type === 'TSArrayType' ||
+    node.type === 'TSBigIntKeyword' ||
+    node.type === 'TSBooleanKeyword' ||
+    node.type === 'TSConditionalType' ||
+    node.type === 'TSConstructorType' ||
+    node.type === 'TSDeclareKeyword' ||
+    node.type === 'TSExportKeyword' ||
+    node.type === 'TSFunctionType' ||
+    node.type === 'TSImportType' ||
+    node.type === 'TSIndexedAccessType' ||
+    node.type === 'TSInferType' ||
+    node.type === 'TSIntersectionType' ||
+    node.type === 'TSIntrinsicKeyword' ||
+    node.type === 'TSLiteralType' ||
+    node.type === 'TSMappedType' ||
+    node.type === 'TSNamedTupleMember' ||
+    node.type === 'TSNeverKeyword' ||
+    node.type === 'TSNullKeyword' ||
+    node.type === 'TSNumberKeyword' ||
+    node.type === 'TSObjectKeyword' ||
+    node.type === 'TSOptionalType' ||
+    node.type === 'TSQualifiedName' ||
+    node.type === 'TSPrivateKeyword' ||
+    node.type === 'TSProtectedKeyword' ||
+    node.type === 'TSPublicKeyword' ||
+    node.type === 'TSReadonlyKeyword' ||
+    node.type === 'TSRestType' ||
+    node.type === 'TSStaticKeyword' ||
+    node.type === 'TSStringKeyword' ||
+    node.type === 'TSSymbolKeyword' ||
+    node.type === 'TSTemplateLiteralType' ||
+    node.type === 'TSThisType' ||
+    node.type === 'TSTupleType' ||
+    node.type === 'TSTypeLiteral' ||
+    node.type === 'TSTypeOperator' ||
+    node.type === 'TSTypePredicate' ||
+    node.type === 'TSTypeQuery' ||
+    node.type === 'TSTypeReference' ||
+    node.type === 'TSUndefinedKeyword' ||
+    node.type === 'TSUnionType' ||
+    node.type === 'TSUnknownKeyword' ||
+    node.type === 'TSVoidKeyword'
+  ) {
+    /** @type {TypeNode['type']} for type check */
+    const type = node.type
+    noop(type)
+    return true
+  }
+  /** @type {Exclude<ASTNode['type'], TypeNode['type']>} for type check */
+  const type = node.type
+  noop(type)
+  return false
+}
+
+/**
+ * @param {TSESTreeTypeNode|TSESTreeTSInterfaceBody} node
+ * @returns {node is TSESTreeTSInterfaceBody}
+ */
+function isTSInterfaceBody(node) {
+  return node.type === 'TSInterfaceBody'
+}
+/**
+ * @param {TSESTreeTypeNode} node
+ * @returns {node is TSESTreeTSTypeLiteral}
+ */
+function isTSTypeLiteral(node) {
+  return node.type === 'TSTypeLiteral'
+}
+/**
+ * @param {TSESTreeTypeNode} node
+ * @returns {node is TSESTreeTSFunctionType}
+ */
+function isTSFunctionType(node) {
+  return node.type === 'TSFunctionType'
+}
+/**
+ * @param {TSESTreeTypeNode} node
+ * @returns {node is TSESTreeTSTypeLiteral | TSESTreeTSFunctionType}
+ */
+function isTSTypeLiteralOrTSFunctionType(node) {
+  return isTSTypeLiteral(node) || isTSFunctionType(node)
+}
+
+/**
+ * @see https://github.com/vuejs/vue-next/blob/253ca2729d808fc051215876aa4af986e4caa43c/packages/compiler-sfc/src/compileScript.ts#L1512
+ * @param {RuleContext} context The ESLint rule context object.
+ * @param {TSESTreeTSTypeLiteral | TSESTreeTSInterfaceBody} node
+ * @returns {IterableIterator<ComponentTypeProp | ComponentUnknownProp>}
+ */
+function* extractRuntimeProps(context, node) {
+  const members = node.type === 'TSTypeLiteral' ? node.members : node.body
+  for (const member of members) {
+    if (
+      member.type === 'TSPropertySignature' ||
+      member.type === 'TSMethodSignature'
+    ) {
+      if (member.key.type !== 'Identifier' && member.key.type !== 'Literal') {
+        yield {
+          type: 'unknown',
+          propName: null,
+          node: /** @type {Expression} */ (member.key)
+        }
+        continue
+      }
+      /** @type {string[]|undefined} */
+      let types
+      if (member.type === 'TSMethodSignature') {
+        types = ['Function']
+      } else if (member.typeAnnotation) {
+        types = inferRuntimeType(context, member.typeAnnotation.typeAnnotation)
+      }
+      yield {
+        type: 'type',
+        key: /** @type {Identifier | Literal} */ (member.key),
+        propName:
+          member.key.type === 'Identifier'
+            ? member.key.name
+            : `${member.key.value}`,
+        node: /** @type {TSPropertySignature | TSMethodSignature} */ (member),
+
+        required: !member.optional,
+        types: types || [`null`]
+      }
+    }
+  }
+}
+
+/**
+ * @param {TSESTreeTSTypeLiteral | TSESTreeTSInterfaceBody | TSESTreeTSFunctionType} node
+ * @returns {IterableIterator<ComponentTypeEmit | ComponentUnknownEmit>}
+ */
+function* extractRuntimeEmits(node) {
+  if (node.type === 'TSFunctionType') {
+    yield* extractEventNames(
+      node.params[0],
+      /** @type {TSFunctionType} */ (node)
+    )
+    return
+  }
+  const members = node.type === 'TSTypeLiteral' ? node.members : node.body
+  for (const member of members) {
+    if (member.type === 'TSCallSignatureDeclaration') {
+      yield* extractEventNames(
+        member.params[0],
+        /** @type {TSCallSignatureDeclaration} */ (member)
+      )
+    } else if (
+      member.type === 'TSPropertySignature' ||
+      member.type === 'TSMethodSignature'
+    ) {
+      if (member.key.type !== 'Identifier' && member.key.type !== 'Literal') {
+        yield {
+          type: 'unknown',
+          emitName: null,
+          node: /** @type {Expression} */ (member.key)
+        }
+        continue
+      }
+      yield {
+        type: 'type',
+        key: /** @type {Identifier | Literal} */ (member.key),
+        emitName:
+          member.key.type === 'Identifier'
+            ? member.key.name
+            : `${member.key.value}`,
+        node: /** @type {TSPropertySignature | TSMethodSignature} */ (member)
+      }
+    }
+  }
+}
+
+/**
+ * @param {TSESTreeTSTypeLiteral | TSESTreeTSInterfaceBody} node
+ * @returns {IterableIterator<ComponentTypeSlot | ComponentUnknownSlot>}
+ */
+function* extractRuntimeSlots(node) {
+  const members = node.type === 'TSTypeLiteral' ? node.members : node.body
+  for (const member of members) {
+    if (
+      member.type === 'TSPropertySignature' ||
+      member.type === 'TSMethodSignature'
+    ) {
+      if (member.key.type !== 'Identifier' && member.key.type !== 'Literal') {
+        yield {
+          type: 'unknown',
+          slotName: null,
+          node: /** @type {Expression} */ (member.key)
+        }
+        continue
+      }
+      yield {
+        type: 'type',
+        key: /** @type {Identifier | Literal} */ (member.key),
+        slotName:
+          member.key.type === 'Identifier'
+            ? member.key.name
+            : `${member.key.value}`,
+        node: /** @type {TSPropertySignature | TSMethodSignature} */ (member)
+      }
+    }
+  }
+}
+
+/**
+ * @param {TSESTreeParameter} eventName
+ * @param {TSCallSignatureDeclaration | TSFunctionType} member
+ * @returns {IterableIterator<ComponentTypeEmit>}
+ */
+function* extractEventNames(eventName, member) {
+  if (
+    eventName &&
+    eventName.type === 'Identifier' &&
+    eventName.typeAnnotation &&
+    eventName.typeAnnotation.type === 'TSTypeAnnotation'
+  ) {
+    const typeNode = eventName.typeAnnotation.typeAnnotation
+    if (
+      typeNode.type === 'TSLiteralType' &&
+      typeNode.literal.type === 'Literal'
+    ) {
+      const emitName = String(typeNode.literal.value)
+      yield {
+        type: 'type',
+        key: /** @type {TSLiteralType} */ (typeNode),
+        emitName,
+        node: member
+      }
+    } else if (typeNode.type === 'TSUnionType') {
+      for (const t of typeNode.types) {
+        if (t.type === 'TSLiteralType' && t.literal.type === 'Literal') {
+          const emitName = String(t.literal.value)
+          yield {
+            type: 'type',
+            key: /** @type {TSLiteralType} */ (t),
+            emitName,
+            node: member
+          }
+        }
+      }
+    }
+  }
+}
+
+/**
+ * @param {RuleContext} context The ESLint rule context object.
+ * @param {TSESTreeTypeNode} node
+ * @returns {(TSESTreeTypeNode|TSESTreeTSInterfaceBody)[]}
+ */
+function flattenTypeNodes(context, node) {
+  /**
+   * @typedef {object} TraversedData
+   * @property {Set<TSESTreeTypeNode|TSESTreeTSInterfaceBody>} nodes
+   * @property {boolean} finished
+   */
+  /** @type {Map<TSESTreeTypeNode,TraversedData>} */
+  const traversed = new Map()
+
+  return [...flattenImpl(node)]
+  /**
+   * @param {TSESTreeTypeNode} node
+   * @returns {Iterable<TSESTreeTypeNode|TSESTreeTSInterfaceBody>}
+   */
+  function* flattenImpl(node) {
+    if (node.type === 'TSUnionType' || node.type === 'TSIntersectionType') {
+      for (const typeNode of node.types) {
+        yield* flattenImpl(typeNode)
+      }
+      return
+    }
+    if (
+      node.type === 'TSTypeReference' &&
+      node.typeName.type === 'Identifier'
+    ) {
+      const refName = node.typeName.name
+      const variable = findVariable(
+        getScope(context, /** @type {any} */ (node)),
+        refName
+      )
+      if (variable && variable.defs.length === 1) {
+        const defNode = /** @type {TSESTreeNode} */ (variable.defs[0].node)
+        if (defNode.type === 'TSInterfaceDeclaration') {
+          yield defNode.body
+          return
+        } else if (defNode.type === 'TSTypeAliasDeclaration') {
+          const typeAnnotation = defNode.typeAnnotation
+          let traversedData = traversed.get(typeAnnotation)
+          if (traversedData) {
+            const copy = [...traversedData.nodes]
+            yield* copy
+            if (!traversedData.finished) {
+              // Include the node because it will probably be referenced recursively.
+              yield typeAnnotation
+            }
+            return
+          }
+          traversedData = { nodes: new Set(), finished: false }
+          traversed.set(typeAnnotation, traversedData)
+          for (const e of flattenImpl(typeAnnotation)) {
+            traversedData.nodes.add(e)
+          }
+          traversedData.finished = true
+          yield* traversedData.nodes
+          return
+        }
+      }
+    }
+    yield node
+  }
+}
+
+/**
+ * @param {RuleContext} context The ESLint rule context object.
+ * @param {TSESTreeTypeNode} node
+ * @param {Set<TSESTreeTypeNode>} [checked]
+ * @returns {string[]}
+ */
+function inferRuntimeType(context, node, checked = new Set()) {
+  switch (node.type) {
+    case 'TSStringKeyword':
+    case 'TSTemplateLiteralType': {
+      return ['String']
+    }
+    case 'TSNumberKeyword': {
+      return ['Number']
+    }
+    case 'TSBooleanKeyword': {
+      return ['Boolean']
+    }
+    case 'TSObjectKeyword': {
+      return ['Object']
+    }
+    case 'TSTypeLiteral': {
+      return inferTypeLiteralType(node)
+    }
+    case 'TSFunctionType': {
+      return ['Function']
+    }
+    case 'TSArrayType':
+    case 'TSTupleType': {
+      return ['Array']
+    }
+    case 'TSSymbolKeyword': {
+      return ['Symbol']
+    }
+
+    case 'TSLiteralType': {
+      if (node.literal.type === 'Literal') {
+        switch (typeof node.literal.value) {
+          case 'boolean': {
+            return ['Boolean']
+          }
+          case 'string': {
+            return ['String']
+          }
+          case 'number':
+          case 'bigint': {
+            return ['Number']
+          }
+        }
+      }
+      return inferRuntimeTypeFromTypeNode(
+        context,
+        /** @type {TypeNode} */ (node)
+      )
+    }
+    case 'TSTypeReference': {
+      if (node.typeName.type === 'Identifier') {
+        const variable = findVariable(
+          getScope(context, /** @type {any} */ (node)),
+          node.typeName.name
+        )
+        if (variable && variable.defs.length === 1) {
+          const defNode = /** @type {TSESTreeNode} */ (variable.defs[0].node)
+          if (defNode.type === 'TSInterfaceDeclaration') {
+            return [`Object`]
+          }
+          if (defNode.type === 'TSTypeAliasDeclaration') {
+            const typeAnnotation = defNode.typeAnnotation
+            if (!checked.has(typeAnnotation)) {
+              checked.add(typeAnnotation)
+              return inferRuntimeType(context, typeAnnotation, checked)
+            }
+          }
+          if (defNode.type === 'TSEnumDeclaration') {
+            return inferEnumType(context, defNode)
+          }
+        }
+        for (const name of [
+          node.typeName.name,
+          ...(node.typeName.name.startsWith('Readonly')
+            ? [node.typeName.name.slice(8)]
+            : [])
+        ]) {
+          switch (name) {
+            case 'Array':
+            case 'Function':
+            case 'Object':
+            case 'Set':
+            case 'Map':
+            case 'WeakSet':
+            case 'WeakMap':
+            case 'Date': {
+              return [name]
+            }
+          }
+        }
+
+        switch (node.typeName.name) {
+          case 'Record':
+          case 'Partial':
+          case 'Readonly':
+          case 'Pick':
+          case 'Omit':
+          case 'Required':
+          case 'InstanceType': {
+            return ['Object']
+          }
+          case 'Uppercase':
+          case 'Lowercase':
+          case 'Capitalize':
+          case 'Uncapitalize': {
+            return ['String']
+          }
+          case 'Parameters':
+          case 'ConstructorParameters': {
+            return ['Array']
+          }
+          case 'NonNullable': {
+            const typeArguments =
+              'typeArguments' in node
+                ? node.typeArguments
+                : /** @type {any} typescript-eslint v5 */ (node).typeParameters
+            if (typeArguments && typeArguments.params[0]) {
+              return inferRuntimeType(
+                context,
+                typeArguments.params[0],
+                checked
+              ).filter((t) => t !== 'null')
+            }
+            break
+          }
+          case 'Extract': {
+            const typeArguments =
+              'typeArguments' in node
+                ? node.typeArguments
+                : /** @type {any} typescript-eslint v5 */ (node).typeParameters
+            if (typeArguments && typeArguments.params[1]) {
+              return inferRuntimeType(context, typeArguments.params[1], checked)
+            }
+            break
+          }
+          case 'Exclude':
+          case 'OmitThisParameter': {
+            const typeArguments =
+              'typeArguments' in node
+                ? node.typeArguments
+                : /** @type {any} typescript-eslint v5 */ (node).typeParameters
+            if (typeArguments && typeArguments.params[0]) {
+              return inferRuntimeType(context, typeArguments.params[0], checked)
+            }
+            break
+          }
+        }
+      }
+      return inferRuntimeTypeFromTypeNode(
+        context,
+        /** @type {TypeNode} */ (node)
+      )
+    }
+
+    case 'TSUnionType':
+    case 'TSIntersectionType': {
+      return inferUnionType(node)
+    }
+
+    default: {
+      return inferRuntimeTypeFromTypeNode(
+        context,
+        /** @type {TypeNode} */ (node)
+      )
+    }
+  }
+
+  /**
+   * @param {import('@typescript-eslint/types').TSESTree.TSUnionType|import('@typescript-eslint/types').TSESTree.TSIntersectionType} node
+   * @returns {string[]}
+   */
+  function inferUnionType(node) {
+    const types = new Set()
+    for (const t of node.types) {
+      for (const tt of inferRuntimeType(context, t, checked)) {
+        types.add(tt)
+      }
+    }
+    return [...types]
+  }
+}
+
+/**
+ * @param {import('@typescript-eslint/types').TSESTree.TSTypeLiteral} node
+ * @returns {string[]}
+ */
+function inferTypeLiteralType(node) {
+  const types = new Set()
+  for (const m of node.members) {
+    switch (m.type) {
+      case 'TSCallSignatureDeclaration':
+      case 'TSConstructSignatureDeclaration': {
+        types.add('Function')
+        break
+      }
+      default: {
+        types.add('Object')
+      }
+    }
+  }
+  return types.size > 0 ? [...types] : ['Object']
+}
+/**
+ * @param {RuleContext} context The ESLint rule context object.
+ * @param {import('@typescript-eslint/types').TSESTree.TSEnumDeclaration} node
+ * @returns {string[]}
+ */
+function inferEnumType(context, node) {
+  const types = new Set()
+  for (const m of node.members) {
+    if (m.initializer) {
+      if (m.initializer.type === 'Literal') {
+        switch (typeof m.initializer.value) {
+          case 'string': {
+            types.add('String')
+            break
+          }
+          case 'number':
+          case 'bigint': {
+            // Now it's a syntax error.
+            types.add('Number')
+            break
+          }
+          case 'boolean': {
+            // Now it's a syntax error.
+            types.add('Boolean')
+            break
+          }
+        }
+      } else {
+        for (const type of inferRuntimeTypeFromTypeNode(
+          context,
+          /** @type {Expression} */ (m.initializer)
+        )) {
+          types.add(type)
+        }
+      }
+    }
+  }
+  return types.size > 0 ? [...types] : ['Number']
+}
diff --git a/lib/utils/ts-utils/ts-types.js b/lib/utils/ts-utils/ts-types.js
new file mode 100644
index 000000000..0f94b7c53
--- /dev/null
+++ b/lib/utils/ts-utils/ts-types.js
@@ -0,0 +1,336 @@
+const {
+  getTypeScript,
+  isAny,
+  isUnknown,
+  isNever,
+  isNull,
+  isObject,
+  isFunction,
+  isStringLike,
+  isNumberLike,
+  isBooleanLike,
+  isBigIntLike,
+  isArrayLikeObject,
+  isReferenceObject
+} = require('./typescript')
+/**
+ * @typedef {import('@typescript-eslint/types').TSESTree.Node} TSESTreeNode
+ * @typedef {import('typescript').Type} Type
+ * @typedef {import('typescript').TypeChecker} TypeChecker
+ * @typedef {import('typescript').Node} TypeScriptNode
+ */
+/**
+ * @typedef {import('../index').ComponentInferTypeProp} ComponentInferTypeProp
+ * @typedef {import('../index').ComponentUnknownProp} ComponentUnknownProp
+ * @typedef {import('../index').ComponentInferTypeEmit} ComponentInferTypeEmit
+ * @typedef {import('../index').ComponentUnknownEmit} ComponentUnknownEmit
+ * @typedef {import('../index').ComponentInferTypeSlot} ComponentInferTypeSlot
+ * @typedef {import('../index').ComponentUnknownSlot} ComponentUnknownSlot
+ */
+
+module.exports = {
+  getComponentPropsFromTypeDefineTypes,
+  getComponentEmitsFromTypeDefineTypes,
+  getComponentSlotsFromTypeDefineTypes,
+  inferRuntimeTypeFromTypeNode
+}
+
+/**
+ * @typedef {object} Services
+ * @property {typeof import("typescript")} ts
+ * @property {Map<ESNode | TSNode | TSESTreeNode, TypeScriptNode>} tsNodeMap
+ * @property {import('typescript').TypeChecker} checker
+ */
+
+/**
+ * Get TypeScript parser services.
+ * @param {RuleContext} context The ESLint rule context object.
+ * @returns {Services|null}
+ */
+function getTSParserServices(context) {
+  const sourceCode = context.sourceCode
+  const tsNodeMap = sourceCode.parserServices.esTreeNodeToTSNodeMap
+  if (!tsNodeMap) return null
+  const hasFullTypeInformation =
+    sourceCode.parserServices.hasFullTypeInformation !== false
+  const checker =
+    (hasFullTypeInformation &&
+      sourceCode.parserServices.program &&
+      sourceCode.parserServices.program.getTypeChecker()) ||
+    null
+  if (!checker) return null
+  const ts = getTypeScript()
+  if (!ts) return null
+
+  return {
+    ts,
+    tsNodeMap,
+    checker
+  }
+}
+
+/**
+ * Get all props by looking at all component's properties
+ * @param {RuleContext} context The ESLint rule context object.
+ * @param {TypeNode} propsNode Type with props definition
+ * @return {(ComponentInferTypeProp|ComponentUnknownProp)[]} Array of component props
+ */
+function getComponentPropsFromTypeDefineTypes(context, propsNode) {
+  const services = getTSParserServices(context)
+  const tsNode = services && services.tsNodeMap.get(propsNode)
+  const type = tsNode && services.checker.getTypeAtLocation(tsNode)
+  if (
+    !type ||
+    isAny(type) ||
+    isUnknown(type) ||
+    isNever(type) ||
+    isNull(type)
+  ) {
+    return [
+      {
+        type: 'unknown',
+        propName: null,
+        node: propsNode
+      }
+    ]
+  }
+  return [...extractRuntimeProps(type, tsNode, propsNode, services)]
+}
+
+/**
+ * Get all emits by looking at all component's properties
+ * @param {RuleContext} context The ESLint rule context object.
+ * @param {TypeNode} emitsNode Type with emits definition
+ * @return {(ComponentInferTypeEmit|ComponentUnknownEmit)[]} Array of component emits
+ */
+function getComponentEmitsFromTypeDefineTypes(context, emitsNode) {
+  const services = getTSParserServices(context)
+  const tsNode = services && services.tsNodeMap.get(emitsNode)
+  const type = tsNode && services.checker.getTypeAtLocation(tsNode)
+  if (
+    !type ||
+    isAny(type) ||
+    isUnknown(type) ||
+    isNever(type) ||
+    isNull(type)
+  ) {
+    return [
+      {
+        type: 'unknown',
+        emitName: null,
+        node: emitsNode
+      }
+    ]
+  }
+  return [...extractRuntimeEmits(type, tsNode, emitsNode, services)]
+}
+
+/**
+ * Get all slots by looking at all component's properties
+ * @param {RuleContext} context The ESLint rule context object.
+ * @param {TypeNode} slotsNode Type with slots definition
+ * @return {(ComponentInferTypeSlot|ComponentUnknownSlot)[]} Array of component slots
+ */
+function getComponentSlotsFromTypeDefineTypes(context, slotsNode) {
+  const services = getTSParserServices(context)
+  const tsNode = services && services.tsNodeMap.get(slotsNode)
+  const type = tsNode && services.checker.getTypeAtLocation(tsNode)
+  if (
+    !type ||
+    isAny(type) ||
+    isUnknown(type) ||
+    isNever(type) ||
+    isNull(type)
+  ) {
+    return [
+      {
+        type: 'unknown',
+        slotName: null,
+        node: slotsNode
+      }
+    ]
+  }
+  return [...extractRuntimeSlots(type, slotsNode)]
+}
+
+/**
+ * @param {RuleContext} context The ESLint rule context object.
+ * @param {TypeNode|Expression} node
+ * @returns {string[]}
+ */
+function inferRuntimeTypeFromTypeNode(context, node) {
+  const services = getTSParserServices(context)
+  const tsNode = services && services.tsNodeMap.get(node)
+  const type = tsNode && services.checker.getTypeAtLocation(tsNode)
+  if (!type) {
+    return ['null']
+  }
+  return inferRuntimeTypeInternal(type, services)
+}
+
+/**
+ * @param {Type} type
+ * @param {TypeScriptNode} tsNode
+ * @param {TypeNode} propsNode Type with props definition
+ * @param {Services} services
+ * @returns {IterableIterator<ComponentInferTypeProp>}
+ */
+function* extractRuntimeProps(type, tsNode, propsNode, services) {
+  const { ts, checker } = services
+  for (const property of type.getProperties()) {
+    const isOptional = (property.flags & ts.SymbolFlags.Optional) !== 0
+    const name = property.getName()
+
+    const type = checker.getTypeOfSymbolAtLocation(property, tsNode)
+
+    yield {
+      type: 'infer-type',
+      propName: name,
+      required: !isOptional,
+      node: propsNode,
+      types: inferRuntimeTypeInternal(type, services)
+    }
+  }
+}
+
+/**
+ * @param {Type} type
+ * @param {Services} services
+ * @returns {string[]}
+ */
+function inferRuntimeTypeInternal(type, services) {
+  const { checker } = services
+  /** @type {Set<string>} */
+  const types = new Set()
+
+  // handle generic parameter types
+  if (type.isTypeParameter()) {
+    const constraint = type.getConstraint()
+    if (constraint) {
+      for (const t of inferRuntimeTypeInternal(constraint, services)) {
+        types.add(t)
+      }
+    }
+    return [...types]
+  }
+
+  for (const targetType of iterateTypes(checker.getNonNullableType(type))) {
+    if (
+      isAny(targetType) ||
+      isUnknown(targetType) ||
+      isNever(targetType) ||
+      isNull(targetType)
+    ) {
+      types.add('null')
+    } else if (isStringLike(targetType)) {
+      types.add('String')
+    } else if (isNumberLike(targetType) || isBigIntLike(targetType)) {
+      types.add('Number')
+    } else if (isBooleanLike(targetType)) {
+      types.add('Boolean')
+    } else if (isFunction(targetType)) {
+      types.add('Function')
+    } else if (
+      isArrayLikeObject(targetType) ||
+      (targetType.isClassOrInterface() &&
+        ['Array', 'ReadonlyArray'].includes(
+          checker.getFullyQualifiedName(targetType.symbol)
+        ))
+    ) {
+      types.add('Array')
+    } else if (isObject(targetType)) {
+      types.add('Object')
+    }
+  }
+
+  if (types.size <= 0) types.add('null')
+
+  return [...types]
+}
+
+/**
+ * @param {Type} type
+ * @param {TypeScriptNode} tsNode
+ * @param {TypeNode} emitsNode Type with emits definition
+ * @param {Services} services
+ * @returns {IterableIterator<ComponentInferTypeEmit|ComponentUnknownEmit>}
+ */
+function* extractRuntimeEmits(type, tsNode, emitsNode, services) {
+  const { checker } = services
+  if (isFunction(type)) {
+    for (const signature of type.getCallSignatures()) {
+      const param = signature.getParameters()[0]
+      if (!param) {
+        yield {
+          type: 'unknown',
+          emitName: null,
+          node: emitsNode
+        }
+        continue
+      }
+      const type = checker.getTypeOfSymbolAtLocation(param, tsNode)
+
+      for (const targetType of iterateTypes(type)) {
+        yield targetType.isStringLiteral()
+          ? {
+              type: 'infer-type',
+              emitName: targetType.value,
+              node: emitsNode
+            }
+          : {
+              type: 'unknown',
+              emitName: null,
+              node: emitsNode
+            }
+      }
+    }
+  } else if (isObject(type)) {
+    for (const property of type.getProperties()) {
+      const name = property.getName()
+      yield {
+        type: 'infer-type',
+        emitName: name,
+        node: emitsNode
+      }
+    }
+  } else {
+    yield {
+      type: 'unknown',
+      emitName: null,
+      node: emitsNode
+    }
+  }
+}
+
+/**
+ * @param {Type} type
+ * @param {TypeNode} slotsNode Type with slots definition
+ * @returns {IterableIterator<ComponentInferTypeSlot>}
+ */
+function* extractRuntimeSlots(type, slotsNode) {
+  for (const property of type.getProperties()) {
+    const name = property.getName()
+
+    yield {
+      type: 'infer-type',
+      slotName: name,
+      node: slotsNode
+    }
+  }
+}
+
+/**
+ * @param {Type} type
+ * @returns {Iterable<Type>}
+ */
+function* iterateTypes(type) {
+  if (isReferenceObject(type) && type.target !== type) {
+    yield* iterateTypes(type.target)
+  } else if (type.isUnion() && !isBooleanLike(type)) {
+    for (const t of type.types) {
+      yield* iterateTypes(t)
+    }
+  } else {
+    yield type
+  }
+}
diff --git a/lib/utils/ts-utils/typescript.js b/lib/utils/ts-utils/typescript.js
new file mode 100644
index 000000000..8d656401e
--- /dev/null
+++ b/lib/utils/ts-utils/typescript.js
@@ -0,0 +1,214 @@
+/**
+ * @typedef {typeof import("typescript")} TypeScript
+ * @typedef {import("typescript").Type} Type
+ * @typedef {import("typescript").ObjectType} ObjectType
+ * @typedef {import("typescript").InterfaceType} InterfaceType
+ * @typedef {import("typescript").TypeReference} TypeReference
+ * @typedef {import("typescript").UnionOrIntersectionType} UnionOrIntersectionType
+ * @typedef {import("typescript").TypeParameter} TypeParameter
+ */
+
+/** @type {TypeScript | undefined} */
+let cacheTypeScript
+
+module.exports = {
+  getTypeScript,
+  isObject,
+  isAny,
+  isUnknown,
+  isNever,
+  isNull,
+  isFunction,
+  isArrayLikeObject,
+  isStringLike,
+  isNumberLike,
+  isBooleanLike,
+  isBigIntLike,
+  isReferenceObject,
+  extractTypeFlags,
+  extractObjectFlags
+}
+
+/**
+ * Get TypeScript instance
+ */
+function getTypeScript() {
+  if (cacheTypeScript) {
+    return cacheTypeScript
+  }
+  try {
+    return (cacheTypeScript = require('typescript'))
+  } catch (error) {
+    if (/** @type {any} */ (error).code === 'MODULE_NOT_FOUND') {
+      return undefined
+    }
+
+    throw error
+  }
+}
+/**
+ * For debug
+ * @param {Type} tsType
+ * @returns {string[]}
+ */
+function extractTypeFlags(tsType) {
+  const ts = /** @type {TypeScript} */ (getTypeScript())
+  /** @type {string[]} */
+  const result = []
+  const keys = /** @type {(keyof (typeof ts.TypeFlags))[]} */ (
+    Object.keys(ts.TypeFlags)
+  )
+  for (const k of keys) {
+    if ((tsType.flags & ts.TypeFlags[k]) !== 0) {
+      result.push(k)
+    }
+  }
+  return result
+}
+/**
+ * For debug
+ * @param {Type} tsType
+ * @returns {string[]}
+ */
+function extractObjectFlags(tsType) {
+  if (!isObject(tsType)) {
+    return []
+  }
+  const ts = /** @type {TypeScript} */ (getTypeScript())
+  /** @type {string[]} */
+  const result = []
+  const keys = /** @type {(keyof (typeof ts.ObjectFlags))[]} */ (
+    Object.keys(ts.ObjectFlags)
+  )
+  for (const k of keys) {
+    if ((tsType.objectFlags & ts.ObjectFlags[k]) !== 0) {
+      result.push(k)
+    }
+  }
+  return result
+}
+
+/**
+ * Check if a given type is an object type or not.
+ * @param {Type} tsType The type to check.
+ * @returns {tsType is ObjectType}
+ */
+function isObject(tsType) {
+  const ts = /** @type {TypeScript} */ (getTypeScript())
+  return (tsType.flags & ts.TypeFlags.Object) !== 0
+}
+
+/**
+ * Check if a given type is an array-like type or not.
+ * @param {Type} tsType The type to check.
+ */
+function isArrayLikeObject(tsType) {
+  const ts = /** @type {TypeScript} */ (getTypeScript())
+  return (
+    isObject(tsType) &&
+    (tsType.objectFlags &
+      (ts.ObjectFlags.ArrayLiteral |
+        ts.ObjectFlags.EvolvingArray |
+        ts.ObjectFlags.Tuple)) !==
+      0
+  )
+}
+/**
+ * Check if a given type is an any type or not.
+ * @param {Type} tsType The type to check.
+ */
+function isAny(tsType) {
+  const ts = /** @type {TypeScript} */ (getTypeScript())
+  return (tsType.flags & ts.TypeFlags.Any) !== 0
+}
+/**
+ * Check if a given type is an unknown type or not.
+ * @param {Type} tsType The type to check.
+ */
+function isUnknown(tsType) {
+  const ts = /** @type {TypeScript} */ (getTypeScript())
+  return (tsType.flags & ts.TypeFlags.Unknown) !== 0
+}
+/**
+ * Check if a given type is a never type or not.
+ * @param {Type} tsType The type to check.
+ */
+function isNever(tsType) {
+  const ts = /** @type {TypeScript} */ (getTypeScript())
+  return (tsType.flags & ts.TypeFlags.Never) !== 0
+}
+/**
+ * Check if a given type is an null type or not.
+ * @param {Type} tsType The type to check.
+ */
+function isNull(tsType) {
+  const ts = /** @type {TypeScript} */ (getTypeScript())
+  return (tsType.flags & ts.TypeFlags.Null) !== 0
+}
+
+/**
+ * Check if a given type is a string-like type or not.
+ * @param {Type} tsType The type to check.
+ * @returns {boolean} `true` if the type is a string-like type.
+ */
+function isStringLike(tsType) {
+  const ts = /** @type {TypeScript} */ (getTypeScript())
+  return (tsType.flags & ts.TypeFlags.StringLike) !== 0
+}
+/**
+ * Check if a given type is an number-like type or not.
+ * @param {Type} tsType The type to check.
+ * @returns {boolean} `true` if the type is a number-like type.
+ */
+function isNumberLike(tsType) {
+  const ts = /** @type {TypeScript} */ (getTypeScript())
+  return (tsType.flags & ts.TypeFlags.NumberLike) !== 0
+}
+/**
+ * Check if a given type is an boolean-like type or not.
+ * @param {Type} tsType The type to check.
+ * @returns {boolean} `true` if the type is a boolean-like type.
+ */
+function isBooleanLike(tsType) {
+  const ts = /** @type {TypeScript} */ (getTypeScript())
+  return (tsType.flags & ts.TypeFlags.BooleanLike) !== 0
+}
+/**
+ * Check if a given type is an bigint-like type or not.
+ * @param {Type} tsType The type to check.
+ * @returns {boolean} `true` if the type is a bigint-like type.
+ */
+function isBigIntLike(tsType) {
+  const ts = /** @type {TypeScript} */ (getTypeScript())
+  return (tsType.flags & ts.TypeFlags.BigIntLike) !== 0
+}
+
+/**
+ * Check if a given type is a reference type or not.
+ * @param {Type} tsType The type to check.
+ * @returns {tsType is TypeReference} `true` if the type is a reference type.
+ */
+function isReferenceObject(tsType) {
+  const ts = /** @type {TypeScript} */ (getTypeScript())
+  return (
+    isObject(tsType) && (tsType.objectFlags & ts.ObjectFlags.Reference) !== 0
+  )
+}
+/**
+ * Check if a given type is `function` or not.
+ * @param {Type} tsType The type to check.
+ */
+function isFunction(tsType) {
+  const ts = /** @type {TypeScript} */ (getTypeScript())
+  if (
+    tsType.symbol &&
+    (tsType.symbol.flags &
+      (ts.SymbolFlags.Function | ts.SymbolFlags.Method)) !==
+      0
+  ) {
+    return true
+  }
+
+  const signatures = tsType.getCallSignatures()
+  return signatures.length > 0
+}
diff --git a/lib/utils/void-elements.json b/lib/utils/void-elements.json
index b737cc683..a24e32f3d 100644
--- a/lib/utils/void-elements.json
+++ b/lib/utils/void-elements.json
@@ -1 +1,18 @@
-["area","base","br","col","embed","hr","img","input","keygen","link","menuitem","meta","param","source","track","wbr"]
+[
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "keygen",
+  "link",
+  "menuitem",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]
diff --git a/lib/utils/vue-builtin-elements.js b/lib/utils/vue-builtin-elements.js
new file mode 100644
index 000000000..70ddb6b7d
--- /dev/null
+++ b/lib/utils/vue-builtin-elements.js
@@ -0,0 +1 @@
+module.exports = ['template', 'slot', 'component']
diff --git a/lib/utils/vue-component-options.json b/lib/utils/vue-component-options.json
index 1dcce9f5c..f4a6db0bd 100644
--- a/lib/utils/vue-component-options.json
+++ b/lib/utils/vue-component-options.json
@@ -1,10 +1,18 @@
 {
-  "nuxt": ["asyncData", "fetch", "head", "key", "layout", "loading", "middleware", "scrollToTop", "transition", "validate", "watchQuery"],
-  "vue-router": [
-    "beforeRouteEnter",
-    "beforeRouteUpdate",
-    "beforeRouteLeave"
+  "nuxt": [
+    "asyncData",
+    "fetch",
+    "head",
+    "key",
+    "layout",
+    "loading",
+    "middleware",
+    "scrollToTop",
+    "transition",
+    "validate",
+    "watchQuery"
   ],
+  "vue-router": ["beforeRouteEnter", "beforeRouteUpdate", "beforeRouteLeave"],
   "vue": [
     "data",
     "props",
diff --git a/lib/utils/vue-reserved.json b/lib/utils/vue-reserved.json
index 03bcdcba9..9321710d4 100644
--- a/lib/utils/vue-reserved.json
+++ b/lib/utils/vue-reserved.json
@@ -1,4 +1,26 @@
 [
-  "$data", "$props", "$el", "$options", "$parent", "$root", "$children", "$slots", "$scopedSlots", "$refs", "$isServer", "$attrs", "$listeners",
-  "$watch", "$set", "$delete", "$on", "$once", "$off", "$emit", "$mount", "$forceUpdate", "$nextTick", "$destroy"
+  "$data",
+  "$props",
+  "$el",
+  "$options",
+  "$parent",
+  "$root",
+  "$children",
+  "$slots",
+  "$scopedSlots",
+  "$refs",
+  "$isServer",
+  "$attrs",
+  "$listeners",
+  "$watch",
+  "$set",
+  "$delete",
+  "$on",
+  "$once",
+  "$off",
+  "$emit",
+  "$mount",
+  "$forceUpdate",
+  "$nextTick",
+  "$destroy"
 ]
diff --git a/lib/utils/vue3-export-names.json b/lib/utils/vue3-export-names.json
index ecdd2462a..f86952ee6 100644
--- a/lib/utils/vue3-export-names.json
+++ b/lib/utils/vue3-export-names.json
@@ -1,250 +1,296 @@
 [
-  "compile",
-  "createApp",
-  "createSSRApp",
-  "defineCustomElement",
-  "defineSSRCustomElement",
-  "hydrate",
-  "render",
-  "Transition",
-  "TransitionGroup",
-  "TransitionGroupProps",
-  "TransitionProps",
-  "useCssModule",
-  "useCssVars",
-  "vModelCheckbox",
-  "vModelDynamic",
-  "vModelRadio",
-  "vModelSelect",
-  "vModelText",
-  "vShow",
-  "VueElement",
-  "VueElementConstructor",
-  "withKeys",
-  "withModifiers",
-  "AllowedComponentProps",
-  "App",
-  "AppConfig",
-  "AppContext",
-  "AsyncComponentLoader",
-  "AsyncComponentOptions",
-  "BaseTransition",
-  "BaseTransitionProps",
-  "callWithAsyncErrorHandling",
-  "callWithErrorHandling",
-  "camelize",
-  "capitalize",
-  "cloneVNode",
-  "Comment",
-  "CompatVue",
-  "Component",
-  "ComponentCustomOptions",
-  "ComponentCustomProperties",
-  "ComponentCustomProps",
-  "ComponentInternalInstance",
-  "ComponentObjectPropsOptions",
-  "ComponentOptions",
-  "ComponentOptionsBase",
-  "ComponentOptionsMixin",
-  "ComponentOptionsWithArrayProps",
-  "ComponentOptionsWithObjectProps",
-  "ComponentOptionsWithoutProps",
-  "ComponentPropsOptions",
-  "ComponentProvideOptions",
-  "ComponentPublicInstance",
-  "computed",
   "ComputedGetter",
-  "ComputedOptions",
   "ComputedRef",
   "ComputedSetter",
-  "ConcreteComponent",
-  "CreateAppFunction",
-  "createBlock",
-  "createCommentVNode",
-  "CreateComponentPublicInstance",
-  "createElementBlock",
-  "createElementVNode",
-  "createHydrationRenderer",
-  "createRenderer",
-  "createSlots",
-  "createStaticVNode",
-  "createTextVNode",
-  "createVNode",
-  "customRef",
   "CustomRefFactory",
   "DebuggerEvent",
   "DebuggerEventExtraInfo",
   "DebuggerOptions",
   "DeepReadonly",
-  "defineAsyncComponent",
-  "DefineComponent",
-  "defineComponent",
-  "defineEmits",
-  "defineExpose",
-  "defineProps",
-  "DeprecationTypes",
-  "devtools",
-  "Directive",
-  "DirectiveArguments",
-  "DirectiveBinding",
-  "DirectiveHook",
-  "effect",
   "EffectScheduler",
   "EffectScope",
+  "MaybeRef",
+  "MaybeRefOrGetter",
+  "Raw",
+  "Reactive",
+  "ReactiveEffect",
+  "ReactiveEffectOptions",
+  "ReactiveEffectRunner",
+  "ReactiveFlags",
+  "Ref",
+  "ShallowReactive",
+  "ShallowRef",
+  "ShallowUnwrapRef",
+  "ToRef",
+  "ToRefs",
+  "TrackOpTypes",
+  "TriggerOpTypes",
+  "UnwrapNestedRefs",
+  "UnwrapRef",
+  "WatchCallback",
+  "WatchEffect",
+  "WatchHandle",
+  "WatchSource",
+  "WatchStopHandle",
+  "WritableComputedOptions",
+  "WritableComputedRef",
+  "customRef",
+  "effect",
   "effectScope",
-  "EmitsOptions",
-  "ErrorCodes",
-  "ExtractDefaultPropTypes",
-  "ExtractPropTypes",
-  "Fragment",
-  "FunctionalComponent",
-  "FunctionDirective",
-  "getCurrentInstance",
   "getCurrentScope",
-  "getTransitionRawChildren",
-  "guardReactiveProps",
-  "h",
-  "handleError",
-  "HMRRuntime",
-  "HydrationRenderer",
-  "initCustomFormatter",
-  "inject",
-  "InjectionKey",
-  "isMemoSame",
+  "getCurrentWatcher",
   "isProxy",
   "isReactive",
   "isReadonly",
   "isRef",
-  "isRuntimeOnly",
   "isShallow",
-  "isVNode",
-  "KeepAlive",
-  "KeepAliveProps",
-  "LegacyConfig",
   "markRaw",
-  "mergeProps",
-  "MethodOptions",
-  "nextTick",
-  "normalizeClass",
-  "normalizeProps",
-  "normalizeStyle",
-  "ObjectDirective",
-  "ObjectEmitsOptions",
-  "onActivated",
-  "onBeforeMount",
-  "onBeforeUnmount",
-  "onBeforeUpdate",
-  "onDeactivated",
-  "onErrorCaptured",
-  "onMounted",
-  "onRenderTracked",
-  "onRenderTriggered",
   "onScopeDispose",
-  "onServerPrefetch",
-  "onUnmounted",
-  "onUpdated",
-  "openBlock",
-  "OptionMergeFunction",
-  "Plugin",
-  "popScopeId",
-  "Prop",
-  "PropType",
-  "provide",
+  "onWatcherCleanup",
   "proxyRefs",
-  "pushScopeId",
-  "queuePostFlushCb",
   "reactive",
-  "ReactiveEffect",
-  "ReactiveEffectOptions",
-  "ReactiveEffectRunner",
-  "ReactiveFlags",
   "readonly",
-  "Ref",
   "ref",
-  "registerRuntimeCompiler",
-  "Renderer",
-  "RendererElement",
-  "RendererNode",
-  "RendererOptions",
-  "RenderFunction",
-  "renderList",
-  "renderSlot",
-  "resolveComponent",
-  "resolveDirective",
-  "resolveDynamicComponent",
-  "resolveTransitionHooks",
-  "RootHydrateFunction",
-  "RootRenderFunction",
-  "RuntimeCompilerOptions",
-  "setBlockTracking",
-  "setDevtoolsHook",
-  "setTransitionHooks",
-  "SetupContext",
-  "ShallowReactive",
   "shallowReactive",
   "shallowReadonly",
-  "ShallowRef",
   "shallowRef",
-  "ShallowUnwrapRef",
-  "Slot",
-  "Slots",
-  "ssrContextKey",
-  "Static",
   "stop",
-  "Suspense",
-  "SuspenseBoundary",
-  "SuspenseProps",
-  "Teleport",
-  "TeleportProps",
-  "Text",
-  "toDisplayString",
-  "toHandlerKey",
-  "toHandlers",
   "toRaw",
-  "ToRef",
   "toRef",
-  "ToRefs",
   "toRefs",
-  "TrackOpTypes",
-  "transformVNodeArgs",
-  "TransitionHooks",
-  "TransitionState",
-  "TriggerOpTypes",
+  "toValue",
   "triggerRef",
   "unref",
-  "UnwrapNestedRefs",
-  "UnwrapRef",
-  "useAttrs",
+  "camelize",
+  "capitalize",
+  "normalizeClass",
+  "normalizeProps",
+  "normalizeStyle",
+  "toDisplayString",
+  "toHandlerKey",
+  "computed",
+  "Slot",
+  "Slots",
+  "SlotsType",
+  "nextTick",
+  "queuePostFlushCb",
+  "ComponentPropsOptions",
+  "ComponentObjectPropsOptions",
+  "Prop",
+  "PropType",
+  "ExtractPropTypes",
+  "ExtractPublicPropTypes",
+  "ExtractDefaultPropTypes",
+  "defineProps",
+  "DefineProps",
+  "defineEmits",
+  "ComponentTypeEmits",
+  "defineExpose",
+  "defineOptions",
+  "defineSlots",
+  "ModelRef",
+  "defineModel",
+  "withDefaults",
   "useSlots",
-  "useSSRContext",
+  "useAttrs",
+  "ObjectEmitsOptions",
+  "EmitsOptions",
+  "EmitsToProps",
+  "ShortEmitsToObject",
+  "EmitFn",
+  "DirectiveBinding",
+  "DirectiveHook",
+  "ObjectDirective",
+  "FunctionDirective",
+  "Directive",
+  "DirectiveArguments",
+  "withDirectives",
+  "ComponentCustomProperties",
+  "CreateComponentPublicInstance",
+  "CreateComponentPublicInstanceWithMixins",
+  "ComponentPublicInstance",
+  "SuspenseProps",
+  "Suspense",
+  "SuspenseBoundary",
+  "RootHydrateFunction",
+  "BaseTransitionProps",
+  "TransitionHooks",
+  "TransitionState",
   "useTransitionState",
-  "version",
-  "VNode",
+  "BaseTransitionPropsValidators",
+  "BaseTransition",
+  "resolveTransitionHooks",
+  "setTransitionHooks",
+  "getTransitionRawChildren",
+  "Renderer",
+  "HydrationRenderer",
+  "ElementNamespace",
+  "RootRenderFunction",
+  "RendererOptions",
+  "RendererNode",
+  "RendererElement",
+  "createRenderer",
+  "createHydrationRenderer",
+  "KeepAliveProps",
+  "KeepAlive",
+  "onActivated",
+  "onDeactivated",
+  "onBeforeMount",
+  "onMounted",
+  "onBeforeUpdate",
+  "onUpdated",
+  "onBeforeUnmount",
+  "onUnmounted",
+  "onServerPrefetch",
+  "onRenderTriggered",
+  "onRenderTracked",
+  "onErrorCaptured",
+  "ComponentCustomOptions",
+  "RenderFunction",
+  "ComponentOptionsBase",
+  "RuntimeCompilerOptions",
+  "ComponentOptions",
+  "ComponentOptionsMixin",
+  "ComputedOptions",
+  "MethodOptions",
+  "ComponentProvideOptions",
+  "ComponentInjectOptions",
+  "ComponentOptionsWithoutProps",
+  "ComponentOptionsWithArrayProps",
+  "ComponentOptionsWithObjectProps",
+  "InjectionKey",
+  "provide",
+  "inject",
+  "hasInjectionContext",
+  "PublicProps",
+  "DefineComponent",
+  "DefineSetupFnComponent",
+  "defineComponent",
+  "App",
+  "OptionMergeFunction",
+  "AppConfig",
+  "AppContext",
+  "ObjectPlugin",
+  "FunctionPlugin",
+  "Plugin",
+  "CreateAppFunction",
+  "TeleportProps",
+  "Teleport",
+  "resolveComponent",
+  "resolveDynamicComponent",
+  "resolveDirective",
+  "Fragment",
+  "Text",
+  "Comment",
+  "Static",
+  "VNodeTypes",
+  "VNodeRef",
+  "VNodeProps",
   "VNodeArrayChildren",
   "VNodeChild",
   "VNodeNormalizedChildren",
-  "VNodeProps",
-  "VNodeRef",
-  "VNodeTypes",
-  "warn",
-  "watch",
-  "WatchCallback",
-  "WatchEffect",
-  "watchEffect",
+  "VNode",
+  "openBlock",
+  "setBlockTracking",
+  "createElementBlock",
+  "createBlock",
+  "isVNode",
+  "transformVNodeArgs",
+  "createBaseVNode",
+  "createVNode",
+  "guardReactiveProps",
+  "cloneVNode",
+  "createTextVNode",
+  "createStaticVNode",
+  "createCommentVNode",
+  "mergeProps",
+  "ComponentInstance",
+  "ComponentCustomProps",
+  "GlobalDirectives",
+  "GlobalComponents",
+  "AllowedComponentProps",
+  "FunctionalComponent",
+  "ConcreteComponent",
+  "Component",
+  "SetupContext",
+  "ComponentInternalInstance",
+  "getCurrentInstance",
+  "registerRuntimeCompiler",
+  "isRuntimeOnly",
+  "ComponentCustomElementInterface",
+  "WatchEffectOptions",
   "WatchOptions",
-  "WatchOptionsBase",
+  "watchEffect",
   "watchPostEffect",
-  "WatchSource",
-  "WatchStopHandle",
   "watchSyncEffect",
+  "MultiWatchSources",
+  "watch",
+  "HydrationStrategy",
+  "HydrationStrategyFactory",
+  "hydrateOnIdle",
+  "hydrateOnVisible",
+  "hydrateOnMediaQuery",
+  "hydrateOnInteraction",
+  "AsyncComponentLoader",
+  "AsyncComponentOptions",
+  "defineAsyncComponent",
+  "useModel",
+  "TemplateRef",
+  "useTemplateRef",
+  "useId",
+  "h",
+  "ssrContextKey",
+  "useSSRContext",
+  "ErrorCodes",
+  "callWithErrorHandling",
+  "callWithAsyncErrorHandling",
+  "handleError",
+  "initCustomFormatter",
+  "HMRRuntime",
+  "pushScopeId",
+  "popScopeId",
+  "withScopeId",
   "withCtx",
-  "withDefaults",
-  "withDirectives",
+  "renderList",
+  "toHandlers",
+  "renderSlot",
+  "createSlots",
   "withMemo",
-  "withScopeId",
-  "WritableComputedOptions",
-  "WritableComputedRef",
+  "isMemoSame",
+  "LegacyConfig",
+  "CompatVue",
+  "version",
+  "warn",
+  "devtools",
+  "setDevtoolsHook",
+  "DeprecationTypes",
+  "createElementVNode",
+  "WatchOptionsBase",
+  "nodeOps",
+  "patchProp",
+  "TransitionProps",
+  "Transition",
+  "TransitionGroupProps",
+  "TransitionGroup",
+  "vShow",
+  "withModifiers",
+  "withKeys",
+  "vModelText",
+  "vModelCheckbox",
+  "vModelRadio",
+  "vModelSelect",
+  "vModelDynamic",
+  "VueElementConstructor",
+  "CustomElementOptions",
+  "defineCustomElement",
+  "defineSSRCustomElement",
+  "VueElement",
+  "useHost",
+  "useShadowRoot",
+  "useCssModule",
+  "useCssVars",
   "CSSProperties",
+  "AriaAttributes",
   "StyleValue",
   "HTMLAttributes",
   "AnchorHTMLAttributes",
@@ -267,6 +313,7 @@
   "IframeHTMLAttributes",
   "ImgHTMLAttributes",
   "InsHTMLAttributes",
+  "InputTypeHTMLAttribute",
   "InputHTMLAttributes",
   "KeygenHTMLAttributes",
   "LabelHTMLAttributes",
@@ -298,5 +345,14 @@
   "VideoHTMLAttributes",
   "WebViewHTMLAttributes",
   "SVGAttributes",
-  "Events"
-]
\ No newline at end of file
+  "IntrinsicElementAttributes",
+  "Events",
+  "ReservedProps",
+  "NativeElements",
+  "render",
+  "hydrate",
+  "createApp",
+  "createSSRApp",
+  "compileToFunction",
+  "compile"
+]
diff --git a/package.json b/package.json
index 9dc0231ad..593c90043 100644
--- a/package.json
+++ b/package.json
@@ -1,26 +1,33 @@
 {
   "name": "eslint-plugin-vue",
-  "version": "9.1.1",
+  "version": "10.6.2",
   "description": "Official ESLint plugin for Vue.js",
   "main": "lib/index.js",
+  "types": "lib/index.d.ts",
   "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",
-    "debug": "mocha --inspect \"tests/lib/**/*.js\" --reporter dot --timeout 60000",
+    "start": "npm run test:base -- --watch",
+    "test:base": "vitest run --reporter=dot tests/lib",
+    "test": "vitest run",
+    "test:integrations": "vitest run tests/integrations",
+    "debug": "vitest run --inspect --no-file-parallelism --reporter=dot tests/lib",
     "cover": "npm run cover:test && npm run cover:report",
-    "cover:test": "nyc npm run test:base -- --timeout 60000",
-    "cover:report": "nyc report --reporter=html",
-    "lint": "eslint . --rulesdir eslint-internal-rules && markdownlint \"**/*.md\"",
-    "lint:fix": "eslint . --rulesdir eslint-internal-rules --fix && markdownlint \"**/*.md\" --fix",
+    "cover:test": "vitest run --coverage --reporter=dot tests/lib",
+    "cover:report": "echo 'HTML coverage report available at ./coverage/index.html'",
+    "lint": "eslint . && markdownlint \"**/*.md\"",
+    "lint:fix": "eslint . --fix && markdownlint \"**/*.md\" --fix",
     "tsc": "tsc",
     "preversion": "npm test && git add .",
-    "version": "env-cmd -e version npm run update && npm run lint -- --fix && git add .",
+    "version": "npm run generate:version && git add .",
     "update": "node ./tools/update.js",
-    "docs:watch": "vuepress dev docs",
+    "update-resources": "node ./tools/update-resources.js",
+    "typegen": "node ./tools/generate-typegen.mjs",
+    "docs:watch": "vitepress dev docs",
     "predocs:build": "npm run update",
-    "docs:build": "vuepress build docs"
+    "docs:build": "vitepress build docs",
+    "generate:version": "env-cmd -e version npm run update && npm run lint:fix",
+    "changeset:version": "changeset version && npm run generate:version && git add --all",
+    "changeset:publish": "npm run typegen && changeset publish"
   },
   "files": [
     "lib"
@@ -48,47 +55,72 @@
     "url": "https://github.com/vuejs/eslint-plugin-vue/issues"
   },
   "engines": {
-    "node": "^14.17.0 || >=16.0.0"
+    "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
   },
   "peerDependencies": {
-    "eslint": "^6.2.0 || ^7.0.0 || ^8.0.0"
+    "@stylistic/eslint-plugin": "^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0",
+    "@typescript-eslint/parser": "^7.0.0 || ^8.0.0",
+    "eslint": "^8.57.0 || ^9.0.0",
+    "vue-eslint-parser": "^10.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@stylistic/eslint-plugin": {
+      "optional": true
+    },
+    "@typescript-eslint/parser": {
+      "optional": true
+    }
   },
   "dependencies": {
-    "eslint-utils": "^3.0.0",
+    "@eslint-community/eslint-utils": "^4.4.0",
     "natural-compare": "^1.4.0",
-    "nth-check": "^2.0.1",
-    "postcss-selector-parser": "^6.0.9",
-    "semver": "^7.3.5",
-    "vue-eslint-parser": "^9.0.1",
+    "nth-check": "^2.1.1",
+    "postcss-selector-parser": "^7.1.0",
+    "semver": "^7.6.3",
     "xml-name-validator": "^4.0.0"
   },
   "devDependencies": {
-    "@types/eslint": "^8.4.2",
-    "@types/eslint-visitor-keys": "^1.0.0",
-    "@types/natural-compare": "^1.4.1",
-    "@types/node": "^13.13.5",
-    "@types/semver": "^7.3.9",
-    "@types/xml-name-validator": "^4.0.0",
-    "@typescript-eslint/parser": "^5.23.0",
-    "@vuepress/plugin-pwa": "^1.9.7",
-    "acorn": "^8.7.1",
+    "@changesets/cli": "^2.29.2",
+    "@eslint/markdown": "^7.1.0",
+    "@ota-meshi/site-kit-eslint-editor-vue": "^0.2.4",
+    "@stylistic/eslint-plugin": "^5.2.2",
+    "@svitejs/changesets-changelog-github-compact": "^1.2.0",
+    "@types/eslint": "^8.56.2",
+    "@types/natural-compare": "^1.4.3",
+    "@types/node": "^24.0.8",
+    "@types/semver": "^7.5.8",
+    "@types/xml-name-validator": "^4.0.3",
+    "@typescript-eslint/eslint-plugin": "^8.35.1",
+    "@typescript-eslint/parser": "^8.35.1",
+    "@typescript-eslint/types": "^8.35.1",
+    "@vitest/coverage-v8": "^3.2.4",
+    "assert": "^2.1.0",
     "env-cmd": "^10.1.0",
-    "eslint": "^8.15.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-eslint-plugin": "^3.5.3",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsonc": "^2.2.1",
-    "eslint-plugin-node-dependencies": ">=0.5.0 <1.0.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-unicorn": "^42.0.0",
+    "esbuild": "^0.24.0",
+    "eslint": "^9.32.0",
+    "eslint-config-flat-gitignore": "^2.1.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-eslint-plugin": "~6.4.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsonc": "^2.16.0",
+    "eslint-plugin-markdown-preferences": "^0.7.0",
+    "eslint-plugin-node-dependencies": "^0.12.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-unicorn": "^56.0.0",
     "eslint-plugin-vue": "file:.",
-    "espree": "^9.3.2",
-    "markdownlint-cli": "^0.31.1",
-    "mocha": "^10.0.0",
-    "nyc": "^15.1.0",
-    "prettier": "^2.6.2",
-    "typescript": "^4.6.4",
-    "vue-eslint-editor": "^1.1.0",
-    "vuepress": "^1.9.7"
+    "eslint-typegen": "^2.2.0",
+    "eslint-visitor-keys": "^4.2.0",
+    "espree": "^10.4.0",
+    "events": "^3.3.0",
+    "globals": "^15.14.0",
+    "jsdom": "^22.0.0",
+    "markdownlint-cli": "^0.42.0",
+    "pathe": "^1.1.2",
+    "prettier": "^3.7.0",
+    "typescript": "^5.7.2",
+    "vite-plugin-eslint4b": "^0.5.1",
+    "vitepress": "^1.4.1",
+    "vitest": "^3.2.4",
+    "vue-eslint-parser": "^10.0.0"
   }
 }
diff --git a/tests/.eslintrc.json b/tests/.eslintrc.json
deleted file mode 100644
index 4668ae79f..000000000
--- a/tests/.eslintrc.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-    "env": {
-        "mocha": true
-    }
-}
diff --git a/tests/eslint-compat.js b/tests/eslint-compat.js
index 86b16265d..cef6b7aba 100644
--- a/tests/eslint-compat.js
+++ b/tests/eslint-compat.js
@@ -1,70 +1,163 @@
 // @ts-check
 const eslint = require('eslint')
+const semver = require('semver')
+
+let ESLint = eslint.ESLint
+/** @type {typeof eslint.ESLint | null} */
+let FlatESLint = eslint.ESLint
+let Linter = eslint.Linter
+let RuleTester = eslint.RuleTester
+if (semver.lt(eslint.Linter.version, '9.0.0-0')) {
+  ESLint = getESLintClassForV8()
+  Linter = getLinterClassForV8()
+  RuleTester = getRuleTesterClassForV8()
+  try {
+    // @ts-ignore
+    FlatESLint = require('eslint/use-at-your-own-risk').FlatESLint
+  } catch {
+    FlatESLint = null
+  }
+}
 
 module.exports = {
-  ESLint: eslint.ESLint || getESLintClassForV6(),
-  RuleTester: eslint.RuleTester
+  ESLint,
+  FlatESLint,
+  RuleTester,
+  Linter
 }
 
 /** @returns {typeof eslint.ESLint} */
-function getESLintClassForV6() {
-  class ESLintForV6 {
+function getESLintClassForV8(BaseESLintClass = eslint.ESLint) {
+  return class ESLintForV8 extends BaseESLintClass {
     static get version() {
-      return eslint.CLIEngine.version
+      return BaseESLintClass.version
     }
-
-    /** @param {eslint.ESLint.Options} options */
     constructor(options) {
-      const {
-        overrideConfig: { plugins, globals, rules, ...overrideConfig } = {
-          plugins: [],
-          globals: {},
-          rules: {}
-        },
-        fix,
-        reportUnusedDisableDirectives,
-        plugins: pluginsMap,
-        ...otherOptions
-      } = options || {}
-      /** @type {eslint.CLIEngine.Options} */
-      const newOptions = {
-        fix: Boolean(fix),
-        reportUnusedDisableDirectives: reportUnusedDisableDirectives
-          ? reportUnusedDisableDirectives !== 'off'
-          : undefined,
-        ...otherOptions,
+      super(adjustOptions(options))
+    }
+  }
 
-        globals: globals
-          ? Object.keys(globals).filter((n) => globals[n])
-          : undefined,
-        plugins: plugins || [],
-        rules: rules
-          ? Object.fromEntries(
-              Object.entries(rules).flatMap(([ruleId, opt]) =>
-                opt ? [[ruleId, opt]] : []
-              )
-            )
-          : undefined,
-        ...overrideConfig
+  // eslint-disable-next-line unicorn/consistent-function-scoping
+  function adjustOptions(options) {
+    const newOptions = {
+      ...options
+    }
+    if (newOptions.overrideConfigFile === true) {
+      newOptions.useEslintrc = false
+      delete newOptions.overrideConfigFile
+    }
+    if (newOptions.overrideConfig) {
+      newOptions.overrideConfig = { ...newOptions.overrideConfig }
+      let plugins
+      if (newOptions.overrideConfig.plugins) {
+        plugins = newOptions.overrideConfig.plugins
+        delete newOptions.overrideConfig.plugins
       }
-      this.engine = new eslint.CLIEngine(newOptions)
+      newOptions.overrideConfig = processCompatibleConfig(
+        newOptions.overrideConfig
+      )
+      if (plugins) {
+        newOptions.overrideConfig.plugins = Object.keys(plugins)
+        newOptions.plugins = plugins
+      }
+
+      // adjust
+      delete newOptions.overrideConfig.files
+      delete newOptions.overrideConfig.processor
+    }
+    return newOptions
+  }
+}
+
+/** @returns {typeof eslint.Linter} */
+function getLinterClassForV8() {
+  return class LinterForV8 extends eslint.Linter {
+    static get version() {
+      return eslint.Linter.version
+    }
+    verify(code, config, option) {
+      return super.verify(code, processCompatibleConfig(config, this), option)
+    }
+  }
+}
 
-      for (const [name, plugin] of Object.entries(pluginsMap || {})) {
-        this.engine.addPlugin(name, plugin)
+function getRuleTesterClassForV8() {
+  return class RuleTesterForV8 extends eslint.RuleTester {
+    constructor(options) {
+      const defineRules = []
+      super(
+        processCompatibleConfig(options, {
+          defineRule(...args) {
+            defineRules.push(args)
+          }
+        })
+      )
+      for (const args of defineRules) {
+        // @ts-expect-error
+        this.linter.defineRule(...args)
       }
     }
+    run(name, rule, tests) {
+      super.run(name, rule, {
+        valid: (tests.valid || []).map((test) =>
+          typeof test === 'string' ? test : adjustOptions(test)
+        ),
+        invalid: (tests.invalid || []).map((test) => adjustOptions(test))
+      })
+    }
+  }
+  // eslint-disable-next-line unicorn/consistent-function-scoping
+  function adjustOptions(test) {
+    return processCompatibleConfig(test)
+  }
+}
 
-    /**
-     * @param {Parameters<eslint.ESLint['lintText']>} params
-     * @returns {ReturnType<eslint.ESLint['lintText']>}
-     */
-    async lintText(...params) {
-      const result = this.engine.executeOnText(params[0], params[1].filePath)
-      return result.results
+function processCompatibleConfig(config, linter) {
+  const newConfig = { ...config }
+  if (newConfig.languageOptions) {
+    const languageOptions = newConfig.languageOptions
+    delete newConfig.languageOptions
+    newConfig.parserOptions = {
+      ...newConfig.parserOptions,
+      ...languageOptions,
+      ...languageOptions.parserOptions
+    }
+    if (languageOptions.globals) {
+      newConfig.globals = {
+        ...newConfig.globals,
+        ...languageOptions.globals
+      }
+    }
+    if (languageOptions.parser) {
+      newConfig.parser = getParserName(languageOptions.parser)
+      if (!languageOptions.parserOptions?.parser) {
+        delete newConfig.parserOptions.parser
+      }
+      linter?.defineParser?.(newConfig.parser, require(newConfig.parser))
     }
   }
+  if (newConfig.plugins) {
+    const plugins = newConfig.plugins
+    delete newConfig.plugins
+    for (const [pluginName, plugin] of Object.entries(plugins)) {
+      for (const [ruleName, rule] of Object.entries(plugin.rules || {})) {
+        linter.defineRule(`${pluginName}/${ruleName}`, rule)
+      }
+    }
+  }
+  newConfig.env = { ...newConfig.env, es6: true }
+  return newConfig
+}
 
-  /** @type {typeof eslint.ESLint} */
-  const eslintClass = /** @type {any} */ (ESLintForV6)
-  return eslintClass
+function getParserName(parser) {
+  const name = parser.meta?.name || parser.name
+  if (name === 'typescript-eslint/parser') {
+    return require.resolve('@typescript-eslint/parser')
+  } else if (
+    name == null &&
+    // @ts-expect-error
+    parser === require('@typescript-eslint/parser')
+  )
+    return require.resolve('@typescript-eslint/parser')
+  return require.resolve(name)
 }
diff --git a/tests/fixtures/script-indent/jsx-01.vue b/tests/fixtures/script-indent/jsx-01.vue
index 7cd302aa3..d5e73c650 100644
--- a/tests/fixtures/script-indent/jsx-01.vue
+++ b/tests/fixtures/script-indent/jsx-01.vue
@@ -1,4 +1,4 @@
-<!--{ "parserOptions": { "ecmaFeatures": { "jsx": true } } }-->
+<!--{ "languageOptions": { "parserOptions": {"ecmaFeatures": { "jsx": true }} } }-->
 <script>
 // Not yet supported.
 const jsx = <
diff --git a/tests/fixtures/script-indent/jsx-02.vue b/tests/fixtures/script-indent/jsx-02.vue
index 895f4039e..a7656d430 100644
--- a/tests/fixtures/script-indent/jsx-02.vue
+++ b/tests/fixtures/script-indent/jsx-02.vue
@@ -1,4 +1,4 @@
-<!--{ "parserOptions": { "ecmaFeatures": { "jsx": true } } }-->
+<!--{ "languageOptions": { "parserOptions": {"ecmaFeatures": { "jsx": true }} } }-->
 <script>
 // Not yet supported.
 const jsx = <
diff --git a/tests/fixtures/script-indent/ts-abstract-accessor-property-01.vue b/tests/fixtures/script-indent/ts-abstract-accessor-property-01.vue
new file mode 100644
index 000000000..01068057e
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-abstract-accessor-property-01.vue
@@ -0,0 +1,12 @@
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}, "requirements": { "@typescript-eslint/parser": ">=5.44.1-alpha.15"}}-->
+<script lang="ts">
+abstract class Foo {
+  abstract accessor
+  foo:
+    number
+  // parser v5 does not parse value.
+  //    =
+  //    1
+  ;
+}
+</script>
diff --git a/tests/fixtures/script-indent/ts-abstract-class-property-01.vue b/tests/fixtures/script-indent/ts-abstract-class-property-01.vue
index ec38f5ff3..500b4c493 100644
--- a/tests/fixtures/script-indent/ts-abstract-class-property-01.vue
+++ b/tests/fixtures/script-indent/ts-abstract-class-property-01.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 abstract class A {
   abstract a;
diff --git a/tests/fixtures/script-indent/ts-abstract-class-property-02.vue b/tests/fixtures/script-indent/ts-abstract-class-property-02.vue
index 6b10b8033..47e4aba99 100644
--- a/tests/fixtures/script-indent/ts-abstract-class-property-02.vue
+++ b/tests/fixtures/script-indent/ts-abstract-class-property-02.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 abstract class A {
   a
diff --git a/tests/fixtures/script-indent/ts-abstract-method-definition-01.vue b/tests/fixtures/script-indent/ts-abstract-method-definition-01.vue
index bed8e269e..cd700f1a9 100644
--- a/tests/fixtures/script-indent/ts-abstract-method-definition-01.vue
+++ b/tests/fixtures/script-indent/ts-abstract-method-definition-01.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 abstract class A {
   abstract a ();
diff --git a/tests/fixtures/script-indent/ts-accessor-property-01.vue b/tests/fixtures/script-indent/ts-accessor-property-01.vue
new file mode 100644
index 000000000..97928b6b6
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-accessor-property-01.vue
@@ -0,0 +1,8 @@
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}, "requirements": { "@typescript-eslint/parser": ">=5.44.1-alpha.15"}}-->
+<script lang="ts">
+class Foo {
+  accessor
+  foo
+  ;
+}
+</script>
diff --git a/tests/fixtures/script-indent/ts-accessor-property-02.vue b/tests/fixtures/script-indent/ts-accessor-property-02.vue
new file mode 100644
index 000000000..da749a32e
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-accessor-property-02.vue
@@ -0,0 +1,10 @@
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}, "requirements": { "@typescript-eslint/parser": ">=5.44.1-alpha.15"}}-->
+<script lang="ts">
+class Foo {
+  accessor
+  foo
+    =
+    2
+  ;
+}
+</script>
diff --git a/tests/fixtures/script-indent/ts-accessor-property-03.vue b/tests/fixtures/script-indent/ts-accessor-property-03.vue
new file mode 100644
index 000000000..993e52527
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-accessor-property-03.vue
@@ -0,0 +1,9 @@
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}, "requirements": { "@typescript-eslint/parser": ">=5.44.1-alpha.15"}}-->
+<script lang="ts">
+class Foo {
+  declare accessor
+  foo:
+    number
+  ;
+}
+</script>
diff --git a/tests/fixtures/script-indent/ts-accessor-property-04.vue b/tests/fixtures/script-indent/ts-accessor-property-04.vue
new file mode 100644
index 000000000..e69e294fc
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-accessor-property-04.vue
@@ -0,0 +1,10 @@
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}, "requirements": { "@typescript-eslint/parser": ">=5.44.1-alpha.15"}}-->
+<script lang="ts">
+class Foo {
+  override accessor
+  foo
+    =
+    2
+  ;
+}
+</script>
diff --git a/tests/fixtures/script-indent/ts-accessor-property-05.vue b/tests/fixtures/script-indent/ts-accessor-property-05.vue
new file mode 100644
index 000000000..dc3503ca7
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-accessor-property-05.vue
@@ -0,0 +1,12 @@
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}, "requirements": { "@typescript-eslint/parser": ">=5.44.1-alpha.15"}}-->
+<script lang="ts">
+class Foo {
+  accessor
+  [
+    1
+  ]
+    =
+    2
+  ;
+}
+</script>
diff --git a/tests/fixtures/script-indent/ts-as-expression-01.vue b/tests/fixtures/script-indent/ts-as-expression-01.vue
index 869101939..377dd3436 100644
--- a/tests/fixtures/script-indent/ts-as-expression-01.vue
+++ b/tests/fixtures/script-indent/ts-as-expression-01.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 var foo =
   bar as
diff --git a/tests/fixtures/script-indent/ts-call-expression-01.vue b/tests/fixtures/script-indent/ts-call-expression-01.vue
new file mode 100644
index 000000000..a12e28f7d
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-call-expression-01.vue
@@ -0,0 +1,12 @@
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
+<script lang="ts">
+foo
+  <
+    T
+    ,
+    U
+  >
+  (
+    arg
+  )
+</script>
diff --git a/tests/fixtures/script-indent/ts-call-signature-declaration-01.vue b/tests/fixtures/script-indent/ts-call-signature-declaration-01.vue
index a6b14b935..b734c69c6 100644
--- a/tests/fixtures/script-indent/ts-call-signature-declaration-01.vue
+++ b/tests/fixtures/script-indent/ts-call-signature-declaration-01.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 interface Foo {
   (
diff --git a/tests/fixtures/script-indent/ts-call-signature-declaration-02.vue b/tests/fixtures/script-indent/ts-call-signature-declaration-02.vue
index 7ef9cce2b..e2b6cd0b7 100644
--- a/tests/fixtures/script-indent/ts-call-signature-declaration-02.vue
+++ b/tests/fixtures/script-indent/ts-call-signature-declaration-02.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 type Foo = {
   (
diff --git a/tests/fixtures/script-indent/ts-class-declaration-01.vue b/tests/fixtures/script-indent/ts-class-declaration-01.vue
index 972eb91d2..776e38aa3 100644
--- a/tests/fixtures/script-indent/ts-class-declaration-01.vue
+++ b/tests/fixtures/script-indent/ts-class-declaration-01.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 class
   Foo
diff --git a/tests/fixtures/script-indent/ts-class-declaration-02.vue b/tests/fixtures/script-indent/ts-class-declaration-02.vue
index 6ddf94570..4b4eafbf1 100644
--- a/tests/fixtures/script-indent/ts-class-declaration-02.vue
+++ b/tests/fixtures/script-indent/ts-class-declaration-02.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 class
   Foo
diff --git a/tests/fixtures/script-indent/ts-class-declaration-03.vue b/tests/fixtures/script-indent/ts-class-declaration-03.vue
index 206c64347..c1697f273 100644
--- a/tests/fixtures/script-indent/ts-class-declaration-03.vue
+++ b/tests/fixtures/script-indent/ts-class-declaration-03.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 class
   Foo
diff --git a/tests/fixtures/script-indent/ts-class-declaration-04.vue b/tests/fixtures/script-indent/ts-class-declaration-04.vue
index 1b7e09fdb..c1697f273 100644
--- a/tests/fixtures/script-indent/ts-class-declaration-04.vue
+++ b/tests/fixtures/script-indent/ts-class-declaration-04.vue
@@ -1,10 +1,15 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 class
   Foo
     <
       T
     >
+  extends
+    Bar
+      <
+        T
+      >
   implements
     Baz1
       <
@@ -15,11 +20,6 @@ class
       <
         T
       >
-  extends
-    Bar
-      <
-        T
-      >
 {
   prop:string
 }
diff --git a/tests/fixtures/script-indent/ts-class-declaration-05.vue b/tests/fixtures/script-indent/ts-class-declaration-05.vue
index 69bff1cc1..893584928 100644
--- a/tests/fixtures/script-indent/ts-class-declaration-05.vue
+++ b/tests/fixtures/script-indent/ts-class-declaration-05.vue
@@ -1,13 +1,13 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 class
   Foo
+  extends
+    Bar
   implements
     Baz1
     ,
     Baz2
-  extends
-    Bar
 {
   prop:string
 }
diff --git a/tests/fixtures/script-indent/ts-class-declaration-06.vue b/tests/fixtures/script-indent/ts-class-declaration-06.vue
index 008d9c568..06e42f0c6 100644
--- a/tests/fixtures/script-indent/ts-class-declaration-06.vue
+++ b/tests/fixtures/script-indent/ts-class-declaration-06.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 class
   Foo
@@ -23,6 +23,6 @@ class
       boolean
       =
       false
-  )
+  ) {}
 }
 </script>
diff --git a/tests/fixtures/script-indent/ts-class-declaration-07.vue b/tests/fixtures/script-indent/ts-class-declaration-07.vue
index 5568aa6d3..dfca03b8a 100644
--- a/tests/fixtures/script-indent/ts-class-declaration-07.vue
+++ b/tests/fixtures/script-indent/ts-class-declaration-07.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 import {Component, Prop, Vue} from "vue-property-decorator";
 
diff --git a/tests/fixtures/script-indent/ts-class-fields-private-methods-01.vue b/tests/fixtures/script-indent/ts-class-fields-private-methods-01.vue
index aa1ae7b89..ac0eda090 100644
--- a/tests/fixtures/script-indent/ts-class-fields-private-methods-01.vue
+++ b/tests/fixtures/script-indent/ts-class-fields-private-methods-01.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script>
 class Counter {
   get
diff --git a/tests/fixtures/script-indent/ts-class-fields-private-properties-01.vue b/tests/fixtures/script-indent/ts-class-fields-private-properties-01.vue
index e74198af8..26006fb4a 100644
--- a/tests/fixtures/script-indent/ts-class-fields-private-properties-01.vue
+++ b/tests/fixtures/script-indent/ts-class-fields-private-properties-01.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script>
 class Counter {
   #x
diff --git a/tests/fixtures/script-indent/ts-class-property-01.vue b/tests/fixtures/script-indent/ts-class-property-01.vue
index 8f55b5483..a0e8b8583 100644
--- a/tests/fixtures/script-indent/ts-class-property-01.vue
+++ b/tests/fixtures/script-indent/ts-class-property-01.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 class A {
   a;
diff --git a/tests/fixtures/script-indent/ts-class-property-02.vue b/tests/fixtures/script-indent/ts-class-property-02.vue
index 71c059b7c..f2ae2e508 100644
--- a/tests/fixtures/script-indent/ts-class-property-02.vue
+++ b/tests/fixtures/script-indent/ts-class-property-02.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 class A {
   a
diff --git a/tests/fixtures/script-indent/ts-class-property-03.vue b/tests/fixtures/script-indent/ts-class-property-03.vue
index 7a44d6a7d..dfd437f38 100644
--- a/tests/fixtures/script-indent/ts-class-property-03.vue
+++ b/tests/fixtures/script-indent/ts-class-property-03.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 class A {
   a: number
diff --git a/tests/fixtures/script-indent/ts-conditional-type-01.vue b/tests/fixtures/script-indent/ts-conditional-type-01.vue
index 188ee1654..ca1334b18 100644
--- a/tests/fixtures/script-indent/ts-conditional-type-01.vue
+++ b/tests/fixtures/script-indent/ts-conditional-type-01.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 type X = A extends B
   ? C
diff --git a/tests/fixtures/script-indent/ts-conditional-type-02.vue b/tests/fixtures/script-indent/ts-conditional-type-02.vue
index 778ae1ec1..1e8d68b76 100644
--- a/tests/fixtures/script-indent/ts-conditional-type-02.vue
+++ b/tests/fixtures/script-indent/ts-conditional-type-02.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 type X = A extends B ?
   C :
diff --git a/tests/fixtures/script-indent/ts-conditional-type-03.vue b/tests/fixtures/script-indent/ts-conditional-type-03.vue
index 8735d9f8b..e3230e948 100644
--- a/tests/fixtures/script-indent/ts-conditional-type-03.vue
+++ b/tests/fixtures/script-indent/ts-conditional-type-03.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 type X = A extends B
   ?
diff --git a/tests/fixtures/script-indent/ts-constructor-type-01.vue b/tests/fixtures/script-indent/ts-constructor-type-01.vue
index 07a3d7f59..97cc1a1d8 100644
--- a/tests/fixtures/script-indent/ts-constructor-type-01.vue
+++ b/tests/fixtures/script-indent/ts-constructor-type-01.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 type Foo = new
   (
diff --git a/tests/fixtures/script-indent/ts-declare-function-01.vue b/tests/fixtures/script-indent/ts-declare-function-01.vue
index 164611be6..2d1fa1f19 100644
--- a/tests/fixtures/script-indent/ts-declare-function-01.vue
+++ b/tests/fixtures/script-indent/ts-declare-function-01.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 declare function
   foo
diff --git a/tests/fixtures/script-indent/ts-declare-function-02.vue b/tests/fixtures/script-indent/ts-declare-function-02.vue
index fcca210b0..1450b1b32 100644
--- a/tests/fixtures/script-indent/ts-declare-function-02.vue
+++ b/tests/fixtures/script-indent/ts-declare-function-02.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 function
   foo
diff --git a/tests/fixtures/script-indent/ts-declare-function-03.vue b/tests/fixtures/script-indent/ts-declare-function-03.vue
index 397c36f0f..7dabfe206 100644
--- a/tests/fixtures/script-indent/ts-declare-function-03.vue
+++ b/tests/fixtures/script-indent/ts-declare-function-03.vue
@@ -1,6 +1,6 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
-declare async function
+declare function
   foo
   (
     arg1: string,
@@ -9,4 +9,6 @@ declare async function
   :
   arg1 is
     string;
+async function
+  bar() {}
 </script>
diff --git a/tests/fixtures/script-indent/ts-declare-function-04.vue b/tests/fixtures/script-indent/ts-declare-function-04.vue
index 3a62cc896..7ae12d894 100644
--- a/tests/fixtures/script-indent/ts-declare-function-04.vue
+++ b/tests/fixtures/script-indent/ts-declare-function-04.vue
@@ -1,7 +1,6 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 declare function
-  *
   foo
   (
     arg1: string,
diff --git a/tests/fixtures/script-indent/ts-decorator-01.vue b/tests/fixtures/script-indent/ts-decorator-01.vue
index be6def42f..c6f39dc35 100644
--- a/tests/fixtures/script-indent/ts-decorator-01.vue
+++ b/tests/fixtures/script-indent/ts-decorator-01.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 class
   ExampleClass
diff --git a/tests/fixtures/script-indent/ts-decorator-02.vue b/tests/fixtures/script-indent/ts-decorator-02.vue
index 5d663f250..a314771ad 100644
--- a/tests/fixtures/script-indent/ts-decorator-02.vue
+++ b/tests/fixtures/script-indent/ts-decorator-02.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 @
 (
diff --git a/tests/fixtures/script-indent/ts-enum-01.vue b/tests/fixtures/script-indent/ts-enum-01.vue
index 2b438689d..b6b9ccae0 100644
--- a/tests/fixtures/script-indent/ts-enum-01.vue
+++ b/tests/fixtures/script-indent/ts-enum-01.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 enum Direction {
   Up = 1,
diff --git a/tests/fixtures/script-indent/ts-enum-02.vue b/tests/fixtures/script-indent/ts-enum-02.vue
index 03034cef1..a0e25f12b 100644
--- a/tests/fixtures/script-indent/ts-enum-02.vue
+++ b/tests/fixtures/script-indent/ts-enum-02.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 enum Direction {
   Up = "UP",
diff --git a/tests/fixtures/script-indent/ts-enum-03.vue b/tests/fixtures/script-indent/ts-enum-03.vue
index 53f6d2e51..f46b6b179 100644
--- a/tests/fixtures/script-indent/ts-enum-03.vue
+++ b/tests/fixtures/script-indent/ts-enum-03.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 enum FileAccess {
   // constant members
diff --git a/tests/fixtures/script-indent/ts-enum-04.vue b/tests/fixtures/script-indent/ts-enum-04.vue
index 2995e29ab..141e8d7f9 100644
--- a/tests/fixtures/script-indent/ts-enum-04.vue
+++ b/tests/fixtures/script-indent/ts-enum-04.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 const enum Enum {
   A = 1,
diff --git a/tests/fixtures/script-indent/ts-enum-05.vue b/tests/fixtures/script-indent/ts-enum-05.vue
index 6b266680c..d40883ee9 100644
--- a/tests/fixtures/script-indent/ts-enum-05.vue
+++ b/tests/fixtures/script-indent/ts-enum-05.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 declare enum Enum {
   A = 1,
diff --git a/tests/fixtures/script-indent/ts-enum-06.vue b/tests/fixtures/script-indent/ts-enum-06.vue
index aae884251..b4d02a8f3 100644
--- a/tests/fixtures/script-indent/ts-enum-06.vue
+++ b/tests/fixtures/script-indent/ts-enum-06.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 {
   declare enum
diff --git a/tests/fixtures/script-indent/ts-enum-member-01.vue b/tests/fixtures/script-indent/ts-enum-member-01.vue
index 925dc7b32..2a3577264 100644
--- a/tests/fixtures/script-indent/ts-enum-member-01.vue
+++ b/tests/fixtures/script-indent/ts-enum-member-01.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 enum Direction {
   // comment
@@ -7,9 +7,10 @@ enum Direction {
   Down,
   Left
     = 2,
-  [
-    Right
-  ] =
+  // [ // Currently, computed property names are not allowed in enums.
+  Right
+    // ]
+    =
     3,
 }
 </script>
diff --git a/tests/fixtures/script-indent/ts-enum-member-02.vue b/tests/fixtures/script-indent/ts-enum-member-02.vue
index 04cb70b31..0dfad0857 100644
--- a/tests/fixtures/script-indent/ts-enum-member-02.vue
+++ b/tests/fixtures/script-indent/ts-enum-member-02.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 enum FileAccess {
   // constant members
diff --git a/tests/fixtures/script-indent/ts-export-assignment-01.vue b/tests/fixtures/script-indent/ts-export-assignment-01.vue
index f19bd6611..ee028cb48 100644
--- a/tests/fixtures/script-indent/ts-export-assignment-01.vue
+++ b/tests/fixtures/script-indent/ts-export-assignment-01.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 export = {
 }
diff --git a/tests/fixtures/script-indent/ts-export-assignment-02.vue b/tests/fixtures/script-indent/ts-export-assignment-02.vue
index 8844b3744..0d167f0df 100644
--- a/tests/fixtures/script-indent/ts-export-assignment-02.vue
+++ b/tests/fixtures/script-indent/ts-export-assignment-02.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 var obj
   =
diff --git a/tests/fixtures/script-indent/ts-export-namespace-01.vue b/tests/fixtures/script-indent/ts-export-namespace-01.vue
index 4bad9b1d1..098f4b3cb 100644
--- a/tests/fixtures/script-indent/ts-export-namespace-01.vue
+++ b/tests/fixtures/script-indent/ts-export-namespace-01.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 export
   as
diff --git a/tests/fixtures/script-indent/ts-function-type-01.vue b/tests/fixtures/script-indent/ts-function-type-01.vue
index be51a6404..1cd005f49 100644
--- a/tests/fixtures/script-indent/ts-function-type-01.vue
+++ b/tests/fixtures/script-indent/ts-function-type-01.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 type Foo = (
   arg: T
diff --git a/tests/fixtures/script-indent/ts-function-type-02.vue b/tests/fixtures/script-indent/ts-function-type-02.vue
index bd976af7c..bd5c27cb3 100644
--- a/tests/fixtures/script-indent/ts-function-type-02.vue
+++ b/tests/fixtures/script-indent/ts-function-type-02.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 const Hoo =
   (
diff --git a/tests/fixtures/script-indent/ts-import-assertion-01.vue b/tests/fixtures/script-indent/ts-import-assertion-01.vue
index f14761841..04cd9c99b 100644
--- a/tests/fixtures/script-indent/ts-import-assertion-01.vue
+++ b/tests/fixtures/script-indent/ts-import-assertion-01.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}, "requirements": { "@typescript-eslint/parser": ">=5.4.1 || ^5.4.1-0" } }-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}, "requirements": { "@typescript-eslint/parser": ">=5.4.1 || ^5.4.1-0" } }-->
 <script lang="ts">
 import foo from "./foo.json" assert
   {
diff --git a/tests/fixtures/script-indent/ts-import-assertion-02.vue b/tests/fixtures/script-indent/ts-import-assertion-02.vue
index 86fe80b4e..c6e0cb866 100644
--- a/tests/fixtures/script-indent/ts-import-assertion-02.vue
+++ b/tests/fixtures/script-indent/ts-import-assertion-02.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}, "requirements": { "@typescript-eslint/parser": ">=5.4.1 || ^5.4.1-0" } }-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}, "requirements": { "@typescript-eslint/parser": ">=5.4.1 || ^5.4.1-0" } }-->
 <script lang="ts">
 import(
   "./foo.json",
diff --git a/tests/fixtures/script-indent/ts-import-assertion-03.vue b/tests/fixtures/script-indent/ts-import-assertion-03.vue
index ee88e92ce..7cdf02501 100644
--- a/tests/fixtures/script-indent/ts-import-assertion-03.vue
+++ b/tests/fixtures/script-indent/ts-import-assertion-03.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}, "requirements": { "@typescript-eslint/parser": ">=5.4.1 || ^5.4.1-0" } }-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}, "requirements": { "@typescript-eslint/parser": ">=5.4.1 || ^5.4.1-0" } }-->
 <script lang="ts">
 export * from "mod" assert
   {
diff --git a/tests/fixtures/script-indent/ts-import-assertion-04.vue b/tests/fixtures/script-indent/ts-import-assertion-04.vue
index 76d2f2860..fc1bee6ee 100644
--- a/tests/fixtures/script-indent/ts-import-assertion-04.vue
+++ b/tests/fixtures/script-indent/ts-import-assertion-04.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}, "requirements": { "@typescript-eslint/parser": ">=5.4.1 || ^5.4.1-0" } }-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}, "requirements": { "@typescript-eslint/parser": ">=5.4.1 || ^5.4.1-0" } }-->
 <script lang="ts">
 export { foo } from "mod" assert
   {
diff --git a/tests/fixtures/script-indent/ts-import-equal-01.vue b/tests/fixtures/script-indent/ts-import-equal-01.vue
index e2136f100..b35c28cd0 100644
--- a/tests/fixtures/script-indent/ts-import-equal-01.vue
+++ b/tests/fixtures/script-indent/ts-import-equal-01.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 import foo = require(
   'asdf'
diff --git a/tests/fixtures/script-indent/ts-import-equal-02.vue b/tests/fixtures/script-indent/ts-import-equal-02.vue
index b4a7146c4..5d55cab24 100644
--- a/tests/fixtures/script-indent/ts-import-equal-02.vue
+++ b/tests/fixtures/script-indent/ts-import-equal-02.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 const
   foo
diff --git a/tests/fixtures/script-indent/ts-import-equal-03.vue b/tests/fixtures/script-indent/ts-import-equal-03.vue
index 066306f07..d532454be 100644
--- a/tests/fixtures/script-indent/ts-import-equal-03.vue
+++ b/tests/fixtures/script-indent/ts-import-equal-03.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 const
   foo
diff --git a/tests/fixtures/script-indent/ts-import-type-01.vue b/tests/fixtures/script-indent/ts-import-type-01.vue
index 8c224b3c9..d8790ed57 100644
--- a/tests/fixtures/script-indent/ts-import-type-01.vue
+++ b/tests/fixtures/script-indent/ts-import-type-01.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 const foo
   :
diff --git a/tests/fixtures/script-indent/ts-import-type-02.vue b/tests/fixtures/script-indent/ts-import-type-02.vue
index c869a5be3..f19a97d89 100644
--- a/tests/fixtures/script-indent/ts-import-type-02.vue
+++ b/tests/fixtures/script-indent/ts-import-type-02.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 const foo
   =
diff --git a/tests/fixtures/script-indent/ts-import-type-03.vue b/tests/fixtures/script-indent/ts-import-type-03.vue
index cdbba7a14..2724f2911 100644
--- a/tests/fixtures/script-indent/ts-import-type-03.vue
+++ b/tests/fixtures/script-indent/ts-import-type-03.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 const foo
   :
diff --git a/tests/fixtures/script-indent/ts-indexed-access-type-01.vue b/tests/fixtures/script-indent/ts-indexed-access-type-01.vue
index 4cb163bdf..f95b266fd 100644
--- a/tests/fixtures/script-indent/ts-indexed-access-type-01.vue
+++ b/tests/fixtures/script-indent/ts-indexed-access-type-01.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 const Foo = Bar[
   'asdf'
diff --git a/tests/fixtures/script-indent/ts-indexed-access-type-02.vue b/tests/fixtures/script-indent/ts-indexed-access-type-02.vue
index 8c6e9381e..6c641d0bf 100644
--- a/tests/fixtures/script-indent/ts-indexed-access-type-02.vue
+++ b/tests/fixtures/script-indent/ts-indexed-access-type-02.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 {
   const Foo = Bar[
diff --git a/tests/fixtures/script-indent/ts-infer-01.vue b/tests/fixtures/script-indent/ts-infer-01.vue
index d7818834c..7cd8cb660 100644
--- a/tests/fixtures/script-indent/ts-infer-01.vue
+++ b/tests/fixtures/script-indent/ts-infer-01.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 type Foo<T> = T extends Bar<
   infer
diff --git a/tests/fixtures/script-indent/ts-instantiation-expression-01.vue b/tests/fixtures/script-indent/ts-instantiation-expression-01.vue
new file mode 100644
index 000000000..64e1d1073
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-instantiation-expression-01.vue
@@ -0,0 +1,8 @@
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}, "requirements": { "@typescript-eslint/parser": ">=5.44.0"}}-->
+<script lang="ts">
+const ErrorMap = Map
+  <
+    string,
+    Error
+  >;
+</script>
diff --git a/tests/fixtures/script-indent/ts-interface-declaration-01.vue b/tests/fixtures/script-indent/ts-interface-declaration-01.vue
index f3584b7f8..6dc683226 100644
--- a/tests/fixtures/script-indent/ts-interface-declaration-01.vue
+++ b/tests/fixtures/script-indent/ts-interface-declaration-01.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 interface Foo
 {
diff --git a/tests/fixtures/script-indent/ts-interface-declaration-02.vue b/tests/fixtures/script-indent/ts-interface-declaration-02.vue
index 0ffa8677c..99d53c153 100644
--- a/tests/fixtures/script-indent/ts-interface-declaration-02.vue
+++ b/tests/fixtures/script-indent/ts-interface-declaration-02.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 interface Foo
   <
diff --git a/tests/fixtures/script-indent/ts-interface-declaration-03.vue b/tests/fixtures/script-indent/ts-interface-declaration-03.vue
index 9aaabb813..6490c79ec 100644
--- a/tests/fixtures/script-indent/ts-interface-declaration-03.vue
+++ b/tests/fixtures/script-indent/ts-interface-declaration-03.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 function fn() {
   interface Foo
diff --git a/tests/fixtures/script-indent/ts-interface-declaration-04.vue b/tests/fixtures/script-indent/ts-interface-declaration-04.vue
index 3d99d6614..bb770b382 100644
--- a/tests/fixtures/script-indent/ts-interface-declaration-04.vue
+++ b/tests/fixtures/script-indent/ts-interface-declaration-04.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 interface Foo
   <
diff --git a/tests/fixtures/script-indent/ts-interface-declaration-05.vue b/tests/fixtures/script-indent/ts-interface-declaration-05.vue
index 2e14604b6..1c00cab83 100644
--- a/tests/fixtures/script-indent/ts-interface-declaration-05.vue
+++ b/tests/fixtures/script-indent/ts-interface-declaration-05.vue
@@ -1,13 +1,13 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 interface Foo
   <
     T
   >
-implements // visitor key is not provided
-Bar
-<
-T
->
+// implements // parsing error
+// Bar
+// <
+// T
+// >
 { }
 </script>
diff --git a/tests/fixtures/script-indent/ts-interface-declaration-06.vue b/tests/fixtures/script-indent/ts-interface-declaration-06.vue
index 1bf582d42..3390cb963 100644
--- a/tests/fixtures/script-indent/ts-interface-declaration-06.vue
+++ b/tests/fixtures/script-indent/ts-interface-declaration-06.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 interface Foo
 {
diff --git a/tests/fixtures/script-indent/ts-interface-declaration-07.vue b/tests/fixtures/script-indent/ts-interface-declaration-07.vue
index 4828a8832..3dbcc88d3 100644
--- a/tests/fixtures/script-indent/ts-interface-declaration-07.vue
+++ b/tests/fixtures/script-indent/ts-interface-declaration-07.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 interface Foo
 {
diff --git a/tests/fixtures/script-indent/ts-interface-declaration-08.vue b/tests/fixtures/script-indent/ts-interface-declaration-08.vue
index d15b76449..0048fe129 100644
--- a/tests/fixtures/script-indent/ts-interface-declaration-08.vue
+++ b/tests/fixtures/script-indent/ts-interface-declaration-08.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 interface Foo
 {
diff --git a/tests/fixtures/script-indent/ts-mapped-type-01.vue b/tests/fixtures/script-indent/ts-mapped-type-01.vue
index 93f718e4d..6f7016231 100644
--- a/tests/fixtures/script-indent/ts-mapped-type-01.vue
+++ b/tests/fixtures/script-indent/ts-mapped-type-01.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 type a = {
   [
diff --git a/tests/fixtures/script-indent/ts-module-declaration-01.vue b/tests/fixtures/script-indent/ts-module-declaration-01.vue
index dffd2ca48..ef89078fc 100644
--- a/tests/fixtures/script-indent/ts-module-declaration-01.vue
+++ b/tests/fixtures/script-indent/ts-module-declaration-01.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 declare global
 {
diff --git a/tests/fixtures/script-indent/ts-new-expression-01.vue b/tests/fixtures/script-indent/ts-new-expression-01.vue
new file mode 100644
index 000000000..3dd190fa0
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-new-expression-01.vue
@@ -0,0 +1,13 @@
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
+<script lang="ts">
+const foo = new
+  Foo
+    <
+      T
+      ,
+      U
+    >
+    (
+      arg
+    )
+</script>
diff --git a/tests/fixtures/script-indent/ts-qualified-name-01.vue b/tests/fixtures/script-indent/ts-qualified-name-01.vue
index 5c5668a23..aa8fa0a0f 100644
--- a/tests/fixtures/script-indent/ts-qualified-name-01.vue
+++ b/tests/fixtures/script-indent/ts-qualified-name-01.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 type a =
   a
diff --git a/tests/fixtures/script-indent/ts-satisfies-operators-01.vue b/tests/fixtures/script-indent/ts-satisfies-operators-01.vue
new file mode 100644
index 000000000..858834115
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-satisfies-operators-01.vue
@@ -0,0 +1,8 @@
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}, "requirements": { "@typescript-eslint/parser": ">=5.44.0" } }-->
+<script lang="ts">
+var a =
+  {} satisfies
+    Foo
+var b =
+  {} satisfies Bar
+</script>
diff --git a/tests/fixtures/script-indent/ts-static-block-01.vue b/tests/fixtures/script-indent/ts-static-block-01.vue
index 522271628..5d585d6d0 100644
--- a/tests/fixtures/script-indent/ts-static-block-01.vue
+++ b/tests/fixtures/script-indent/ts-static-block-01.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}, "requirements": { "@typescript-eslint/parser": ">=4.30.0 || ^5.0.0-0" } }-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}, "requirements": { "@typescript-eslint/parser": ">=4.30.0 || ^5.0.0-0" } }-->
 <script lang="ts">
 class Foo {
   static {
diff --git a/tests/fixtures/script-indent/ts-template-literal-type-01.vue b/tests/fixtures/script-indent/ts-template-literal-type-01.vue
index a97381ffe..a260ecdae 100644
--- a/tests/fixtures/script-indent/ts-template-literal-type-01.vue
+++ b/tests/fixtures/script-indent/ts-template-literal-type-01.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}, "requirements": { "@typescript-eslint/parser": ">=4.1.0" } }-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}, "requirements": { "@typescript-eslint/parser": ">=4.1.0" } }-->
 <script lang="ts">
 type T =
   `foo`
diff --git a/tests/fixtures/script-indent/ts-tuple-01.vue b/tests/fixtures/script-indent/ts-tuple-01.vue
index ed94a9258..d5d1bfdb0 100644
--- a/tests/fixtures/script-indent/ts-tuple-01.vue
+++ b/tests/fixtures/script-indent/ts-tuple-01.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 type a = [
   number
diff --git a/tests/fixtures/script-indent/ts-tuple-02.vue b/tests/fixtures/script-indent/ts-tuple-02.vue
index ea65a6488..526755f48 100644
--- a/tests/fixtures/script-indent/ts-tuple-02.vue
+++ b/tests/fixtures/script-indent/ts-tuple-02.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 let y:
   [
diff --git a/tests/fixtures/script-indent/ts-type-alias-seclaration-01.vue b/tests/fixtures/script-indent/ts-type-alias-seclaration-01.vue
index 29c696859..92037fb4c 100644
--- a/tests/fixtures/script-indent/ts-type-alias-seclaration-01.vue
+++ b/tests/fixtures/script-indent/ts-type-alias-seclaration-01.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 type Foo
   <
diff --git a/tests/fixtures/script-indent/ts-type-annotation-01.vue b/tests/fixtures/script-indent/ts-type-annotation-01.vue
index 66981525e..8d7ac5958 100644
--- a/tests/fixtures/script-indent/ts-type-annotation-01.vue
+++ b/tests/fixtures/script-indent/ts-type-annotation-01.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 var
   foo
diff --git a/tests/fixtures/script-indent/ts-type-annotation-02.vue b/tests/fixtures/script-indent/ts-type-annotation-02.vue
index 8f5a3b84c..5769cfd40 100644
--- a/tests/fixtures/script-indent/ts-type-annotation-02.vue
+++ b/tests/fixtures/script-indent/ts-type-annotation-02.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 var foo = function
   (
diff --git a/tests/fixtures/script-indent/ts-type-annotation-03.vue b/tests/fixtures/script-indent/ts-type-annotation-03.vue
index 6569f4e53..2d18debaf 100644
--- a/tests/fixtures/script-indent/ts-type-annotation-03.vue
+++ b/tests/fixtures/script-indent/ts-type-annotation-03.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 class Foo {
   prop
diff --git a/tests/fixtures/script-indent/ts-type-annotation-04.vue b/tests/fixtures/script-indent/ts-type-annotation-04.vue
index 1450696bb..015bfb0bb 100644
--- a/tests/fixtures/script-indent/ts-type-annotation-04.vue
+++ b/tests/fixtures/script-indent/ts-type-annotation-04.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 var
   {
diff --git a/tests/fixtures/script-indent/ts-type-annotation-05.vue b/tests/fixtures/script-indent/ts-type-annotation-05.vue
index aeb3b7bc3..7bdec085b 100644
--- a/tests/fixtures/script-indent/ts-type-annotation-05.vue
+++ b/tests/fixtures/script-indent/ts-type-annotation-05.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 var
   [
diff --git a/tests/fixtures/script-indent/ts-type-annotation-06.vue b/tests/fixtures/script-indent/ts-type-annotation-06.vue
index 11ca0c386..79cbf15d7 100644
--- a/tests/fixtures/script-indent/ts-type-annotation-06.vue
+++ b/tests/fixtures/script-indent/ts-type-annotation-06.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 function foo(
   ...args
diff --git a/tests/fixtures/script-indent/ts-type-assertion-01.vue b/tests/fixtures/script-indent/ts-type-assertion-01.vue
index e2a753173..80f9aa78b 100644
--- a/tests/fixtures/script-indent/ts-type-assertion-01.vue
+++ b/tests/fixtures/script-indent/ts-type-assertion-01.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 const a
   =
diff --git a/tests/fixtures/script-indent/ts-type-literal-01.vue b/tests/fixtures/script-indent/ts-type-literal-01.vue
index 04bf8f2f0..61f481f9c 100644
--- a/tests/fixtures/script-indent/ts-type-literal-01.vue
+++ b/tests/fixtures/script-indent/ts-type-literal-01.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 type a = {
   a
diff --git a/tests/fixtures/script-indent/ts-type-only-import-export-01.vue b/tests/fixtures/script-indent/ts-type-only-import-export-01.vue
index 97c6dc192..dea1377e9 100644
--- a/tests/fixtures/script-indent/ts-type-only-import-export-01.vue
+++ b/tests/fixtures/script-indent/ts-type-only-import-export-01.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}, "requirements": { "@typescript-eslint/parser": ">=5.4.0 || ^5.4.1-0" } }-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}, "requirements": { "@typescript-eslint/parser": ">=5.4.0 || ^5.4.1-0" } }-->
 <script lang="ts">
 import
   type
diff --git a/tests/fixtures/script-indent/ts-type-only-import-export-02.vue b/tests/fixtures/script-indent/ts-type-only-import-export-02.vue
index 0ef5f1106..b2bad678e 100644
--- a/tests/fixtures/script-indent/ts-type-only-import-export-02.vue
+++ b/tests/fixtures/script-indent/ts-type-only-import-export-02.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}, "requirements": { "@typescript-eslint/parser": ">=5.4.0 || ^5.4.1-0" } }-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}, "requirements": { "@typescript-eslint/parser": ">=5.4.0 || ^5.4.1-0" } }-->
 <script lang="ts">
 import
 {
diff --git a/tests/fixtures/script-indent/ts-type-only-import-export-03.vue b/tests/fixtures/script-indent/ts-type-only-import-export-03.vue
index ca280f03c..4c9238dc9 100644
--- a/tests/fixtures/script-indent/ts-type-only-import-export-03.vue
+++ b/tests/fixtures/script-indent/ts-type-only-import-export-03.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}, "requirements": { "@typescript-eslint/parser": ">=5.4.0 || ^5.4.1-0" } }-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}, "requirements": { "@typescript-eslint/parser": ">=5.4.0 || ^5.4.1-0" } }-->
 <script lang="ts">
 import
 {
diff --git a/tests/fixtures/script-indent/ts-type-paramater-01.vue b/tests/fixtures/script-indent/ts-type-paramater-01.vue
index 6b307c740..cbdd01bcf 100644
--- a/tests/fixtures/script-indent/ts-type-paramater-01.vue
+++ b/tests/fixtures/script-indent/ts-type-paramater-01.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 type Foo
   <
diff --git a/tests/fixtures/script-indent/ts-type-parameter-seclaration-01.vue b/tests/fixtures/script-indent/ts-type-parameter-seclaration-01.vue
index 8b216f458..71ca145ab 100644
--- a/tests/fixtures/script-indent/ts-type-parameter-seclaration-01.vue
+++ b/tests/fixtures/script-indent/ts-type-parameter-seclaration-01.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 type Foo
   <
diff --git a/tests/fixtures/script-indent/ts-union-intersection-01.vue b/tests/fixtures/script-indent/ts-union-intersection-01.vue
index 06548dec9..a808493e8 100644
--- a/tests/fixtures/script-indent/ts-union-intersection-01.vue
+++ b/tests/fixtures/script-indent/ts-union-intersection-01.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 type T =
   a
diff --git a/tests/fixtures/script-indent/ts-union-intersection-02.vue b/tests/fixtures/script-indent/ts-union-intersection-02.vue
index 04b722218..62673b0a9 100644
--- a/tests/fixtures/script-indent/ts-union-intersection-02.vue
+++ b/tests/fixtures/script-indent/ts-union-intersection-02.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 type T =
   a
diff --git a/tests/fixtures/script-indent/ts-union-intersection-03.vue b/tests/fixtures/script-indent/ts-union-intersection-03.vue
index 78928f2e5..022d2f1da 100644
--- a/tests/fixtures/script-indent/ts-union-intersection-03.vue
+++ b/tests/fixtures/script-indent/ts-union-intersection-03.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 type T = a
   | b
diff --git a/tests/fixtures/script-indent/ts-union-intersection-04.vue b/tests/fixtures/script-indent/ts-union-intersection-04.vue
index 7396edc48..378c95cdb 100644
--- a/tests/fixtures/script-indent/ts-union-intersection-04.vue
+++ b/tests/fixtures/script-indent/ts-union-intersection-04.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 type T = U< a
   | b
diff --git a/tests/fixtures/script-indent/ts-union-intersection-05.vue b/tests/fixtures/script-indent/ts-union-intersection-05.vue
index d6013535a..f12da960e 100644
--- a/tests/fixtures/script-indent/ts-union-intersection-05.vue
+++ b/tests/fixtures/script-indent/ts-union-intersection-05.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 type T = U<
   a
diff --git a/tests/fixtures/script-indent/ts-union-intersection-06.vue b/tests/fixtures/script-indent/ts-union-intersection-06.vue
index a363a2847..8241ae123 100644
--- a/tests/fixtures/script-indent/ts-union-intersection-06.vue
+++ b/tests/fixtures/script-indent/ts-union-intersection-06.vue
@@ -1,4 +1,4 @@
-<!--{"parserOptions": {"parser":"@typescript-eslint/parser"}}-->
+<!--{"languageOptions": {"parserOptions": {"parser":"@typescript-eslint/parser"}}}-->
 <script lang="ts">
 type T = [
   a
diff --git a/tests/fixtures/typescript/src/test.vue b/tests/fixtures/typescript/src/test.vue
new file mode 100644
index 000000000..5bf03f4a7
--- /dev/null
+++ b/tests/fixtures/typescript/src/test.vue
@@ -0,0 +1 @@
+<script lang="ts"></script>
diff --git a/tests/fixtures/typescript/src/test01.ts b/tests/fixtures/typescript/src/test01.ts
new file mode 100644
index 000000000..3d2e059e5
--- /dev/null
+++ b/tests/fixtures/typescript/src/test01.ts
@@ -0,0 +1,32 @@
+export type Props1 = {
+  foo: string
+  bar?: number
+  baz?: boolean
+}
+export type Emits1 = {
+  (e: 'foo' | 'bar', payload: string): void
+  (e: 'baz', payload: number): void
+}
+export type Props2 = {
+  a: string
+  b?: number
+  c?: boolean
+  d?: boolean
+  e?: number | string
+  f?: () => number
+  g?: { foo?: string }
+  h?: string[]
+  i?: readonly string[]
+}
+export type Props3 = {
+  snake_case: string
+  'kebab-case': number
+  camelCase: boolean
+  PascalCase?: string
+  foo: number
+}
+
+export type Slots1 = {
+  default(props: { msg: string }): any
+  foo(props: { msg: string }): any
+}
diff --git a/tests/fixtures/typescript/tsconfig.json b/tests/fixtures/typescript/tsconfig.json
new file mode 100644
index 000000000..c13ef64e3
--- /dev/null
+++ b/tests/fixtures/typescript/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "skipLibCheck": true
+  }
+}
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$-with-destructuring/result.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$-with-destructuring/result.js
new file mode 100644
index 000000000..805890a33
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$-with-destructuring/result.js
@@ -0,0 +1,16 @@
+let { a, b: c, d: [,f], g: [...h], ...i } = $(foo)
+let [ x, y = 42 ] = $(bar)
+
+console.log(
+  /*>*/a/*<{"escape":false,"method":"$"}*/,
+  b,
+  /*>*/c/*<{"escape":false,"method":"$"}*/,
+  d,
+  e,
+  /*>*/f/*<{"escape":false,"method":"$"}*/,
+  g,
+  /*>*/h/*<{"escape":false,"method":"$"}*/,
+  /*>*/i/*<{"escape":false,"method":"$"}*/,
+  /*>*/x/*<{"escape":false,"method":"$"}*/,
+  /*>*/y/*<{"escape":false,"method":"$"}*/
+)
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$-with-destructuring/source.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$-with-destructuring/source.js
new file mode 100644
index 000000000..bfb92574f
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$-with-destructuring/source.js
@@ -0,0 +1,16 @@
+let { a, b: c, d: [,f], g: [...h], ...i } = $(foo)
+let [ x, y = 42 ] = $(bar)
+
+console.log(
+  a,
+  b,
+  c,
+  d,
+  e,
+  f,
+  g,
+  h,
+  i,
+  x,
+  y
+)
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$/result.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$/result.js
new file mode 100644
index 000000000..80d709dee
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$/result.js
@@ -0,0 +1,6 @@
+let v = $(foo)
+let { x, y } = $(bar)
+console.log(/*>*/v/*<{"escape":false,"method":"$"}*/, /*>*/x/*<{"escape":false,"method":"$"}*/, /*>*/y/*<{"escape":false,"method":"$"}*/)
+let a = /*>*/v/*<{"escape":false,"method":"$"}*/
+console.log(a)
+console.log($$({ /*>*/v/*<{"escape":true,"method":"$"}*/, /*>*/x/*<{"escape":true,"method":"$"}*/ }))
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$/source.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$/source.js
new file mode 100644
index 000000000..28c98cbc9
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$/source.js
@@ -0,0 +1,6 @@
+let v = $(foo)
+let { x, y } = $(bar)
+console.log(v, x, y)
+let a = v
+console.log(a)
+console.log($$({ v, x }))
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$computed/result.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$computed/result.js
new file mode 100644
index 000000000..a45a0ae6f
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$computed/result.js
@@ -0,0 +1,5 @@
+let v = $computed(() => 42)
+console.log(/*>*/v/*<{"escape":false,"method":"$computed"}*/)
+let a = /*>*/v/*<{"escape":false,"method":"$computed"}*/
+console.log(a)
+console.log($$(/*>*/v/*<{"escape":true,"method":"$computed"}*/))
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$computed/source.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$computed/source.js
new file mode 100644
index 000000000..ff0f34766
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$computed/source.js
@@ -0,0 +1,5 @@
+let v = $computed(() => 42)
+console.log(v)
+let a = v
+console.log(a)
+console.log($$(v))
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$customRef/result.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$customRef/result.js
new file mode 100644
index 000000000..a8a3ae90a
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$customRef/result.js
@@ -0,0 +1,10 @@
+let v = $customRef((track, trigger) => {
+  return {
+    get() { return count },
+    set(newValue) { count = newValue }
+  }
+})
+console.log(/*>*/v/*<{"escape":false,"method":"$customRef"}*/)
+let a = /*>*/v/*<{"escape":false,"method":"$customRef"}*/
+console.log(a)
+console.log($$(/*>*/v/*<{"escape":true,"method":"$customRef"}*/))
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$customRef/source.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$customRef/source.js
new file mode 100644
index 000000000..dd62754bc
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$customRef/source.js
@@ -0,0 +1,10 @@
+let v = $customRef((track, trigger) => {
+  return {
+    get() { return count },
+    set(newValue) { count = newValue }
+  }
+})
+console.log(v)
+let a = v
+console.log(a)
+console.log($$(v))
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$ref/result.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$ref/result.js
new file mode 100644
index 000000000..518f0c56b
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$ref/result.js
@@ -0,0 +1,5 @@
+let v = $ref(0)
+console.log(/*>*/v/*<{"escape":false,"method":"$ref"}*/)
+let a = /*>*/v/*<{"escape":false,"method":"$ref"}*/
+console.log(a)
+console.log($$(/*>*/v/*<{"escape":true,"method":"$ref"}*/))
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$ref/source.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$ref/source.js
new file mode 100644
index 000000000..5c8d7248e
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$ref/source.js
@@ -0,0 +1,5 @@
+let v = $ref(0)
+console.log(v)
+let a = v
+console.log(a)
+console.log($$(v))
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$shallowRef/result.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$shallowRef/result.js
new file mode 100644
index 000000000..dbe345a19
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$shallowRef/result.js
@@ -0,0 +1,5 @@
+let v = $shallowRef({ count: 0 })
+console.log(/*>*/v/*<{"escape":false,"method":"$shallowRef"}*/)
+let a = /*>*/v/*<{"escape":false,"method":"$shallowRef"}*/
+console.log(a)
+console.log($$(/*>*/v/*<{"escape":true,"method":"$shallowRef"}*/))
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$shallowRef/source.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$shallowRef/source.js
new file mode 100644
index 000000000..da4c19320
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$shallowRef/source.js
@@ -0,0 +1,5 @@
+let v = $shallowRef({ count: 0 })
+console.log(v)
+let a = v
+console.log(a)
+console.log($$(v))
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$toRef/result.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$toRef/result.js
new file mode 100644
index 000000000..a7bff1219
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$toRef/result.js
@@ -0,0 +1,5 @@
+let v = $toRef(foo, 'bar')
+console.log(/*>*/v/*<{"escape":false,"method":"$toRef"}*/)
+let a = /*>*/v/*<{"escape":false,"method":"$toRef"}*/
+console.log(a)
+console.log($$(/*>*/v/*<{"escape":true,"method":"$toRef"}*/))
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$toRef/source.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$toRef/source.js
new file mode 100644
index 000000000..b94ddea93
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$toRef/source.js
@@ -0,0 +1,5 @@
+let v = $toRef(foo, 'bar')
+console.log(v)
+let a = v
+console.log(a)
+console.log($$(v))
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/computed/result.js b/tests/fixtures/utils/ref-object-references/ref-objects/computed/result.js
new file mode 100644
index 000000000..2217a8182
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/computed/result.js
@@ -0,0 +1,5 @@
+import { computed } from 'vue'
+let v = computed(() => 42)
+console.log(/*>*/v/*<{"type":"expression","method":"computed"}*/.value)
+let a = v
+console.log(/*>*/a/*<{"type":"expression","method":"computed"}*/.value)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/computed/source.js b/tests/fixtures/utils/ref-object-references/ref-objects/computed/source.js
new file mode 100644
index 000000000..2b4a6412d
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/computed/source.js
@@ -0,0 +1,5 @@
+import { computed } from 'vue'
+let v = computed(() => 42)
+console.log(v.value)
+let a = v
+console.log(a.value)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/customRef/result.js b/tests/fixtures/utils/ref-object-references/ref-objects/customRef/result.js
new file mode 100644
index 000000000..e7af0774e
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/customRef/result.js
@@ -0,0 +1,10 @@
+import { customRef } from 'vue'
+let v = customRef((track, trigger) => {
+  return {
+    get() { return count },
+    set(newValue) { count = newValue }
+  }
+})
+console.log(/*>*/v/*<{"type":"expression","method":"customRef"}*/.value)
+let a = v
+console.log(/*>*/a/*<{"type":"expression","method":"customRef"}*/.value)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/customRef/source.js b/tests/fixtures/utils/ref-object-references/ref-objects/customRef/source.js
new file mode 100644
index 000000000..c94db730f
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/customRef/source.js
@@ -0,0 +1,10 @@
+import { customRef } from 'vue'
+let v = customRef((track, trigger) => {
+  return {
+    get() { return count },
+    set(newValue) { count = newValue }
+  }
+})
+console.log(v.value)
+let a = v
+console.log(a.value)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/defineModel01/result.vue b/tests/fixtures/utils/ref-object-references/ref-objects/defineModel01/result.vue
new file mode 100644
index 000000000..a5d4293d8
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/defineModel01/result.vue
@@ -0,0 +1,24 @@
+<script setup>
+// declares "modelValue" prop, consumed by parent via v-model
+const model1 = defineModel()
+// OR: declares "modelValue" prop with options
+const model2 = defineModel({ type: String })
+
+// emits "update:modelValue" when mutated
+/*>*/model1/*<{"type":"expression","method":"defineModel"}*/.value = 'hello'
+
+// declares "count" prop, consumed by parent via v-model:count
+const count1 = defineModel('count')
+// OR: declares "count" prop with options
+const count2 = defineModel('count', { type: Number, default: 0 })
+
+function inc() {
+  // emits "update:count" when mutated
+  /*>*/count1/*<{"type":"expression","method":"defineModel"}*/.value++
+}
+
+console.log(/*>*/model1/*<{"type":"expression","method":"defineModel"}*/.value)
+console.log(/*>*/model2/*<{"type":"expression","method":"defineModel"}*/.value)
+console.log(/*>*/count1/*<{"type":"expression","method":"defineModel"}*/.value)
+console.log(/*>*/count2/*<{"type":"expression","method":"defineModel"}*/.value)
+</script>
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/defineModel01/source.vue b/tests/fixtures/utils/ref-object-references/ref-objects/defineModel01/source.vue
new file mode 100644
index 000000000..7cca9156c
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/defineModel01/source.vue
@@ -0,0 +1,24 @@
+<script setup>
+// declares "modelValue" prop, consumed by parent via v-model
+const model1 = defineModel()
+// OR: declares "modelValue" prop with options
+const model2 = defineModel({ type: String })
+
+// emits "update:modelValue" when mutated
+model1.value = 'hello'
+
+// declares "count" prop, consumed by parent via v-model:count
+const count1 = defineModel('count')
+// OR: declares "count" prop with options
+const count2 = defineModel('count', { type: Number, default: 0 })
+
+function inc() {
+  // emits "update:count" when mutated
+  count1.value++
+}
+
+console.log(model1.value)
+console.log(model2.value)
+console.log(count1.value)
+console.log(count2.value)
+</script>
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/defineModel02/result.vue b/tests/fixtures/utils/ref-object-references/ref-objects/defineModel02/result.vue
new file mode 100644
index 000000000..c2903d01f
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/defineModel02/result.vue
@@ -0,0 +1,16 @@
+<script setup>
+const [modelValue, modelModifiers] = defineModel({
+  // get() omitted as it is not needed here
+  set(value) {
+    // if the .trim modifier is used, return trimmed value
+    if (modelModifiers.trim) {
+      return value.trim()
+    }
+    // otherwise, return the value as-is
+    return value
+  }
+})
+
+console.log(/*>*/modelValue/*<{"type":"expression","method":"defineModel"}*/.value)
+console.log(modelModifiers.value)
+</script>
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/defineModel02/source.vue b/tests/fixtures/utils/ref-object-references/ref-objects/defineModel02/source.vue
new file mode 100644
index 000000000..012cb9349
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/defineModel02/source.vue
@@ -0,0 +1,16 @@
+<script setup>
+const [modelValue, modelModifiers] = defineModel({
+  // get() omitted as it is not needed here
+  set(value) {
+    // if the .trim modifier is used, return trimmed value
+    if (modelModifiers.trim) {
+      return value.trim()
+    }
+    // otherwise, return the value as-is
+    return value
+  }
+})
+
+console.log(modelValue.value)
+console.log(modelModifiers.value)
+</script>
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/ref-to-pattern/result.js b/tests/fixtures/utils/ref-object-references/ref-objects/ref-to-pattern/result.js
new file mode 100644
index 000000000..a0681af4a
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/ref-to-pattern/result.js
@@ -0,0 +1,9 @@
+import { ref } from 'vue'
+let v = ref(0)
+const /*>*/{ value: a }/*<{"type":"pattern","method":"ref"}*/ = v
+const /*>*/{ value = 42 }/*<{"type":"pattern","method":"ref"}*/ = v
+console.log(a)
+console.log(value)
+
+const [x] = v
+console.log(x)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/ref-to-pattern/source.js b/tests/fixtures/utils/ref-object-references/ref-objects/ref-to-pattern/source.js
new file mode 100644
index 000000000..3a2c5c330
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/ref-to-pattern/source.js
@@ -0,0 +1,9 @@
+import { ref } from 'vue'
+let v = ref(0)
+const { value: a } = v
+const { value = 42 } = v
+console.log(a)
+console.log(value)
+
+const [x] = v
+console.log(x)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/ref/result.js b/tests/fixtures/utils/ref-object-references/ref-objects/ref/result.js
new file mode 100644
index 000000000..c356f2c2b
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/ref/result.js
@@ -0,0 +1,5 @@
+import { ref } from 'vue'
+let v = ref(0)
+console.log(/*>*/v/*<{"type":"expression","method":"ref"}*/.value)
+let a = v
+console.log(/*>*/a/*<{"type":"expression","method":"ref"}*/.value)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/ref/source.js b/tests/fixtures/utils/ref-object-references/ref-objects/ref/source.js
new file mode 100644
index 000000000..836b45777
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/ref/source.js
@@ -0,0 +1,5 @@
+import { ref } from 'vue'
+let v = ref(0)
+console.log(v.value)
+let a = v
+console.log(a.value)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/shallowRef/result.js b/tests/fixtures/utils/ref-object-references/ref-objects/shallowRef/result.js
new file mode 100644
index 000000000..206f3e88d
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/shallowRef/result.js
@@ -0,0 +1,5 @@
+import { shallowRef } from 'vue'
+let v = shallowRef({ count: 0 })
+console.log(/*>*/v/*<{"type":"expression","method":"shallowRef"}*/.value)
+let a = v
+console.log(/*>*/a/*<{"type":"expression","method":"shallowRef"}*/.value)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/shallowRef/source.js b/tests/fixtures/utils/ref-object-references/ref-objects/shallowRef/source.js
new file mode 100644
index 000000000..98496ae7f
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/shallowRef/source.js
@@ -0,0 +1,5 @@
+import { shallowRef } from 'vue'
+let v = shallowRef({ count: 0 })
+console.log(v.value)
+let a = v
+console.log(a.value)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/toRef/result.js b/tests/fixtures/utils/ref-object-references/ref-objects/toRef/result.js
new file mode 100644
index 000000000..28bea16dc
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/toRef/result.js
@@ -0,0 +1,5 @@
+import { toRef } from 'vue'
+let v = toRef(foo, 'bar')
+console.log(/*>*/v/*<{"type":"expression","method":"toRef"}*/.value)
+let a = v
+console.log(/*>*/a/*<{"type":"expression","method":"toRef"}*/.value)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/toRef/source.js b/tests/fixtures/utils/ref-object-references/ref-objects/toRef/source.js
new file mode 100644
index 000000000..df884f003
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/toRef/source.js
@@ -0,0 +1,5 @@
+import { toRef } from 'vue'
+let v = toRef(foo, 'bar')
+console.log(v.value)
+let a = v
+console.log(a.value)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/toRefs-to-pattern/result.js b/tests/fixtures/utils/ref-object-references/ref-objects/toRefs-to-pattern/result.js
new file mode 100644
index 000000000..527acdc78
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/toRefs-to-pattern/result.js
@@ -0,0 +1,5 @@
+import { toRefs } from 'vue'
+let bar = toRefs(foo)
+const { x, y = 42 } = bar
+console.log(/*>*/x/*<{"type":"expression","method":"toRefs"}*/.value)
+console.log(/*>*/y/*<{"type":"expression","method":"toRefs"}*/.value)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/toRefs-to-pattern/source.js b/tests/fixtures/utils/ref-object-references/ref-objects/toRefs-to-pattern/source.js
new file mode 100644
index 000000000..b2c39b4a9
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/toRefs-to-pattern/source.js
@@ -0,0 +1,5 @@
+import { toRefs } from 'vue'
+let bar = toRefs(foo)
+const { x, y = 42 } = bar
+console.log(x.value)
+console.log(y.value)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/toRefs/result.js b/tests/fixtures/utils/ref-object-references/ref-objects/toRefs/result.js
new file mode 100644
index 000000000..809dfc902
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/toRefs/result.js
@@ -0,0 +1,18 @@
+import { toRefs } from 'vue'
+let { x, y } = toRefs(foo)
+console.log(/*>*/x/*<{"type":"expression","method":"toRefs"}*/.value)
+let a = y
+console.log(/*>*/a/*<{"type":"expression","method":"toRefs"}*/.value)
+console.log(/*>*/y/*<{"type":"expression","method":"toRefs"}*/.value)
+
+let bar = toRefs(foo)
+console.log(bar)
+console.log(/*>*/bar.x/*<{"type":"expression","method":"toRefs"}*/.value)
+console.log(/*>*/bar.y/*<{"type":"expression","method":"toRefs"}*/.value)
+
+const z = bar.z
+console.log(/*>*/z/*<{"type":"expression","method":"toRefs"}*/.value)
+
+let b;
+/*>*/b/*<{"type":"pattern","method":"toRefs"}*/ = bar.b
+console.log(/*>*/b/*<{"type":"expression","method":"toRefs"}*/.value)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/toRefs/source.js b/tests/fixtures/utils/ref-object-references/ref-objects/toRefs/source.js
new file mode 100644
index 000000000..638e69296
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/toRefs/source.js
@@ -0,0 +1,18 @@
+import { toRefs } from 'vue'
+let { x, y } = toRefs(foo)
+console.log(x.value)
+let a = y
+console.log(a.value)
+console.log(y.value)
+
+let bar = toRefs(foo)
+console.log(bar)
+console.log(bar.x.value)
+console.log(bar.y.value)
+
+const z = bar.z
+console.log(z.value)
+
+let b;
+b = bar.b
+console.log(b.value)
diff --git a/tests/fixtures/utils/ts-utils/src/test.ts b/tests/fixtures/utils/ts-utils/src/test.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/tests/fixtures/utils/ts-utils/src/test.vue b/tests/fixtures/utils/ts-utils/src/test.vue
new file mode 100644
index 000000000..5bf03f4a7
--- /dev/null
+++ b/tests/fixtures/utils/ts-utils/src/test.vue
@@ -0,0 +1 @@
+<script lang="ts"></script>
diff --git a/tests/fixtures/utils/ts-utils/tsconfig.json b/tests/fixtures/utils/ts-utils/tsconfig.json
new file mode 100644
index 000000000..f35717b90
--- /dev/null
+++ b/tests/fixtures/utils/ts-utils/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "skipLibCheck": true,
+    "module": "Node16",
+    "moduleResolution": "Node16",
+  },
+  "include": ["./src/*.ts","./src/*.vue"],
+}
diff --git a/tests/integrations/eslint-plugin-import.js b/tests/integrations/eslint-plugin-import.js
index cdac4abe4..26b2a5140 100644
--- a/tests/integrations/eslint-plugin-import.js
+++ b/tests/integrations/eslint-plugin-import.js
@@ -5,30 +5,16 @@
  */
 'use strict'
 
-// -----------------------------------------------------------------------------
-// Requirements
-// -----------------------------------------------------------------------------
-
 const cp = require('child_process')
 const path = require('path')
 const semver = require('semver')
 
-// -----------------------------------------------------------------------------
-// Tests
-// -----------------------------------------------------------------------------
-
+const PLUGIN_DIR = path.join(__dirname, 'eslint-plugin-import')
 const ESLINT = `.${path.sep}node_modules${path.sep}.bin${path.sep}eslint`
 
 describe('Integration with eslint-plugin-import', () => {
-  let originalCwd
-
-  before(() => {
-    originalCwd = process.cwd()
-    process.chdir(path.join(__dirname, 'eslint-plugin-import'))
-    cp.execSync('npm i', { stdio: 'inherit' })
-  })
-  after(() => {
-    process.chdir(originalCwd)
+  beforeAll(() => {
+    cp.execSync('npm i', { cwd: PLUGIN_DIR, stdio: 'inherit' })
   })
 
   // https://github.com/vuejs/eslint-plugin-vue/issues/21#issuecomment-308957697
@@ -38,15 +24,20 @@ describe('Integration with eslint-plugin-import', () => {
     if (
       !semver.satisfies(
         process.version,
-        require(path.join(
-          __dirname,
-          'eslint-plugin-import/node_modules/eslint/package.json'
-        )).engines.node
+        require(
+          path.join(
+            __dirname,
+            'eslint-plugin-import/node_modules/eslint/package.json'
+          )
+        ).engines.node
       )
     ) {
       return
     }
 
-    cp.execSync(`${ESLINT} a.vue`, { stdio: 'inherit' })
+    cp.execSync(`${ESLINT} --config eslint.config.mjs a.vue`, {
+      cwd: PLUGIN_DIR,
+      stdio: 'inherit'
+    })
   })
 })
diff --git a/tests/integrations/eslint-plugin-import/.eslintrc.json b/tests/integrations/eslint-plugin-import/.eslintrc.json
deleted file mode 100644
index bd240b24b..000000000
--- a/tests/integrations/eslint-plugin-import/.eslintrc.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-    "root": true,
-    "parserOptions": {
-        "sourceType": "module",
-        "ecmaVersion": 2015
-    },
-    "parser": "vue-eslint-parser",
-    "plugins": [
-        "import",
-        "vue"
-    ],
-    "rules": {
-        "import/default": "warn",
-        "import/namespace": "warn"
-    },
-    "settings": {
-        "import/extensions": [
-            ".js",
-            ".vue"
-        ]
-    }
-}
diff --git a/tests/integrations/eslint-plugin-import/a.vue b/tests/integrations/eslint-plugin-import/a.vue
index ce4b66e14..58a29d388 100644
--- a/tests/integrations/eslint-plugin-import/a.vue
+++ b/tests/integrations/eslint-plugin-import/a.vue
@@ -1,10 +1,10 @@
 <template>
-    <b></b>
+  <b></b>
 </template>
 
 <script>
-import B from "./b.vue"
+import B from './b.vue'
 export default {
-    components: {B}
+  components: { B }
 }
 </script>
diff --git a/tests/integrations/eslint-plugin-import/b.vue b/tests/integrations/eslint-plugin-import/b.vue
index 488aa4466..9cd9ffff4 100644
--- a/tests/integrations/eslint-plugin-import/b.vue
+++ b/tests/integrations/eslint-plugin-import/b.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>Hello</div>
+  <div>Hello</div>
 </template>
 
 <script>
diff --git a/tests/integrations/eslint-plugin-import/eslint.config.mjs b/tests/integrations/eslint-plugin-import/eslint.config.mjs
new file mode 100644
index 000000000..ff8eaac7a
--- /dev/null
+++ b/tests/integrations/eslint-plugin-import/eslint.config.mjs
@@ -0,0 +1,27 @@
+import vueEslintParser from 'vue-eslint-parser'
+import eslintPluginImport from 'eslint-plugin-import'
+import eslintPluginVue from 'eslint-plugin-vue'
+
+export default [
+  {
+    files: ['*.vue'],
+    languageOptions: {
+      parser: vueEslintParser,
+      parserOptions: {
+        sourceType: 'module',
+        ecmaVersion: 2015
+      }
+    },
+    plugins: {
+      import: eslintPluginImport,
+      vue: eslintPluginVue
+    },
+    rules: {
+      'import/default': 'warn',
+      'import/namespace': 'warn'
+    },
+    settings: {
+      'import/extensions': ['.js', '.vue']
+    }
+  }
+]
diff --git a/tests/integrations/eslint-plugin-import/package.json b/tests/integrations/eslint-plugin-import/package.json
index 6de5b12e5..41d7ec4b6 100644
--- a/tests/integrations/eslint-plugin-import/package.json
+++ b/tests/integrations/eslint-plugin-import/package.json
@@ -8,8 +8,8 @@
   "author": "Toru Nagashima (https://github.com/mysticatea)",
   "license": "MIT",
   "dependencies": {
-    "eslint": "^7.0.0",
-    "eslint-plugin-import": "~2.23.4",
+    "eslint": "^9.0.0",
+    "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-vue": "file:../../.."
   }
 }
diff --git a/tests/integrations/flat-config.js b/tests/integrations/flat-config.js
new file mode 100644
index 000000000..9dd2f2ad8
--- /dev/null
+++ b/tests/integrations/flat-config.js
@@ -0,0 +1,37 @@
+'use strict'
+
+const { strict: assert } = require('assert')
+const cp = require('child_process')
+const path = require('path')
+const semver = require('semver')
+
+const TARGET_DIR = path.join(__dirname, 'flat-config')
+const ESLINT = `.${path.sep}node_modules${path.sep}.bin${path.sep}eslint`
+
+describe('Integration with flat config', () => {
+  beforeAll(() => {
+    cp.execSync('npm i -f', { cwd: TARGET_DIR, stdio: 'inherit' })
+  })
+
+  it('should lint without errors', () => {
+    if (
+      !semver.satisfies(
+        process.version,
+        require(
+          path.join(__dirname, 'flat-config/node_modules/eslint/package.json')
+        ).engines.node
+      )
+    ) {
+      return
+    }
+
+    const result = JSON.parse(
+      cp.execSync(`${ESLINT} a.vue --format=json`, {
+        cwd: TARGET_DIR,
+        encoding: 'utf8'
+      })
+    )
+    assert.strictEqual(result.length, 1)
+    assert.deepStrictEqual(result[0].messages, [])
+  })
+})
diff --git a/tests/integrations/flat-config/.npmrc b/tests/integrations/flat-config/.npmrc
new file mode 100644
index 000000000..43c97e719
--- /dev/null
+++ b/tests/integrations/flat-config/.npmrc
@@ -0,0 +1 @@
+package-lock=false
diff --git a/tests/integrations/flat-config/a.vue b/tests/integrations/flat-config/a.vue
new file mode 100644
index 000000000..03610f638
--- /dev/null
+++ b/tests/integrations/flat-config/a.vue
@@ -0,0 +1,11 @@
+<template>
+  <!-- eslint-disable -->
+  <div id id="a">Hello</div>
+</template>
+
+<script>
+import B from './b.vue'
+export default {
+  components: { B }
+}
+</script>
diff --git a/tests/integrations/flat-config/eslint.config.js b/tests/integrations/flat-config/eslint.config.js
new file mode 100644
index 000000000..9fed1e61d
--- /dev/null
+++ b/tests/integrations/flat-config/eslint.config.js
@@ -0,0 +1,9 @@
+const plugin = require('eslint-plugin-vue')
+module.exports = [
+  ...plugin.configs['flat/base'],
+  {
+    rules: {
+      'vue/no-duplicate-attributes': 'error'
+    }
+  }
+]
diff --git a/tests/integrations/flat-config/package.json b/tests/integrations/flat-config/package.json
new file mode 100644
index 000000000..e46b5e1b6
--- /dev/null
+++ b/tests/integrations/flat-config/package.json
@@ -0,0 +1,13 @@
+{
+  "private": true,
+  "name": "integration-test-for-flat-config",
+  "version": "1.0.0",
+  "description": "Integration test for flat config",
+  "scripts": {},
+  "keywords": [],
+  "license": "MIT",
+  "dependencies": {
+    "eslint": "^9.0.0-0",
+    "eslint-plugin-vue": "file:../../.."
+  }
+}
diff --git a/tests/lib/autofix.js b/tests/lib/autofix.js
index bb08d0f36..0711b931c 100644
--- a/tests/lib/autofix.js
+++ b/tests/lib/autofix.js
@@ -4,30 +4,29 @@
  */
 'use strict'
 
-const Linter = require('eslint').Linter
+const Linter = require('../eslint-compat').Linter
 const parser = require('vue-eslint-parser')
 const assert = require('assert')
 
 const rules = require('../..').rules
 
 const baseConfig = {
-  parser: 'vue-eslint-parser',
-  parserOptions: {
+  files: ['*.vue'],
+  plugins: { vue: { rules } },
+  languageOptions: {
+    parser,
     ecmaVersion: 2018,
     sourceType: 'module',
-    ecmaFeatures: {
-      jsx: true
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true
+      }
     }
   }
 }
 
 describe('Complex autofix test cases', () => {
   const linter = new Linter()
-  linter.defineParser('vue-eslint-parser', parser)
-  for (const key of Object.keys(rules)) {
-    const ruleId = `vue/${key}`
-    linter.defineRule(ruleId, rules[key])
-  }
 
   // https://github.com/vuejs/eslint-plugin-vue/issues/566
   describe('Autofix of `vue/order-in-components` and `comma-dangle` should not conflict.', () => {
diff --git a/tests/lib/configs/eslintrc.ts b/tests/lib/configs/eslintrc.ts
new file mode 100644
index 000000000..85d25022c
--- /dev/null
+++ b/tests/lib/configs/eslintrc.ts
@@ -0,0 +1,27 @@
+import { ESLint } from '../../eslint-compat'
+import plugin from '../../../lib'
+
+describe('eslintrc configs', () => {
+  for (const name of Object.keys(plugin.configs)) {
+    if (name.startsWith('flat/')) {
+      continue
+    }
+
+    const configName = `plugin:vue/${name}`
+    const eslint = new ESLint({
+      overrideConfigFile: true,
+      overrideConfig: {
+        extends: [configName]
+      },
+      plugins: { vue: plugin },
+      fix: true
+    })
+    describe(`test for ${configName}`, () => {
+      it('without error', async () => {
+        await eslint.lintText('', {
+          filePath: 'test.vue'
+        })
+      })
+    })
+  }
+})
diff --git a/tests/lib/configs/flat.ts b/tests/lib/configs/flat.ts
new file mode 100644
index 000000000..ed9e282b1
--- /dev/null
+++ b/tests/lib/configs/flat.ts
@@ -0,0 +1,293 @@
+/**
+ * @fileoverview flat configs test
+ * @author 唯然<weiran.zsd@outlook.com>
+ */
+
+import { Linter } from 'eslint'
+import plugin from '../../../lib'
+import { strict as assert } from 'assert'
+import { FlatESLint } from '../../eslint-compat'
+
+function mergeConfig(configs: Linter.FlatConfig[]): Linter.FlatConfig {
+  let config: Linter.FlatConfig = { rules: {}, plugins: {} }
+  for (const item of configs) {
+    config = {
+      ...config,
+      ...item,
+      plugins: {
+        ...config.plugins,
+        ...item?.plugins
+      },
+      rules: {
+        ...config.rules,
+        ...item?.rules
+      }
+    }
+  }
+  return config
+}
+
+describe('flat configs', () => {
+  it('should export base config', () => {
+    const base = plugin.configs['flat/base']
+    assert.ok(base)
+    assert.equal(typeof base, 'object')
+
+    const forVue = mergeConfig(
+      base.filter((config) => config.files?.includes('*.vue') || !config.files)
+    )
+    assert.strictEqual(forVue.plugins!.vue, plugin)
+    assert.strictEqual(forVue.processor, 'vue/vue')
+    assert.strictEqual(forVue.rules!['vue/comment-directive'], 'error')
+
+    const forOtherThanVue = mergeConfig(
+      base.filter((config) => !config.files?.includes('*.vue'))
+    )
+    assert.strictEqual(forOtherThanVue.plugins!.vue, plugin)
+    assert.strictEqual(
+      forOtherThanVue.rules!['vue/comment-directive'],
+      undefined
+    )
+  })
+
+  it('should export essential config', () => {
+    const essential = plugin.configs['flat/essential']
+    assert.ok(essential)
+    assert.equal(typeof essential, 'object')
+
+    const forVue = mergeConfig(
+      essential.filter(
+        (config) => config.files?.includes('*.vue') || !config.files
+      )
+    )
+    assert.strictEqual(forVue.plugins!.vue, plugin)
+    assert.strictEqual(forVue.rules!['vue/comment-directive'], 'error')
+    assert.strictEqual(forVue.rules!['vue/multi-word-component-names'], 'error')
+
+    const forOtherThanVue = mergeConfig(
+      essential.filter((config) => !config.files?.includes('*.vue'))
+    )
+    assert.strictEqual(forOtherThanVue.plugins!.vue, plugin)
+    assert.strictEqual(
+      forOtherThanVue.rules!['vue/comment-directive'],
+      undefined
+    )
+    assert.strictEqual(
+      forOtherThanVue.rules!['vue/multi-word-component-names'],
+      'error'
+    )
+  })
+
+  it('should export strongly-recommended config', () => {
+    const stronglyRecommended = plugin.configs['flat/vue2-strongly-recommended']
+    assert.ok(stronglyRecommended)
+    assert.equal(typeof stronglyRecommended, 'object')
+
+    const forVue = mergeConfig(
+      stronglyRecommended.filter(
+        (config) => config.files?.includes('*.vue') || !config.files
+      )
+    )
+    assert.strictEqual(forVue.plugins!.vue, plugin)
+    assert.strictEqual(forVue.rules!['vue/comment-directive'], 'error')
+    assert.strictEqual(forVue.rules!['vue/multi-word-component-names'], 'error')
+
+    const forOtherThanVue = mergeConfig(
+      stronglyRecommended.filter((config) => !config.files?.includes('*.vue'))
+    )
+    assert.strictEqual(forOtherThanVue.plugins!.vue, plugin)
+    assert.strictEqual(
+      forOtherThanVue.rules!['vue/comment-directive'],
+      undefined
+    )
+    assert.strictEqual(
+      forOtherThanVue.rules!['vue/multi-word-component-names'],
+      'error'
+    )
+  })
+
+  it('should export recommended config', () => {
+    const recommended = plugin.configs['flat/recommended']
+    assert.ok(recommended)
+    assert.equal(typeof recommended, 'object')
+
+    const forVue = mergeConfig(
+      recommended.filter(
+        (config) => config.files?.includes('*.vue') || !config.files
+      )
+    )
+    assert.strictEqual(forVue.plugins!.vue, plugin)
+    assert.strictEqual(forVue.rules!['vue/comment-directive'], 'error')
+    assert.strictEqual(forVue.rules!['vue/multi-word-component-names'], 'error')
+    assert.strictEqual(forVue.rules!['vue/attributes-order'], 'warn')
+
+    const forOtherThanVue = mergeConfig(
+      recommended.filter((config) => !config.files?.includes('*.vue'))
+    )
+    assert.strictEqual(forOtherThanVue.plugins!.vue, plugin)
+    assert.strictEqual(
+      forOtherThanVue.rules!['vue/comment-directive'],
+      undefined
+    )
+    assert.strictEqual(
+      forOtherThanVue.rules!['vue/multi-word-component-names'],
+      'error'
+    )
+    assert.strictEqual(forOtherThanVue.rules!['vue/attributes-order'], 'warn')
+  })
+
+  it('should export vue2-essential config', () => {
+    const essential = plugin.configs['flat/vue2-essential']
+    assert.ok(essential)
+    assert.equal(typeof essential, 'object')
+
+    const forVue = mergeConfig(
+      essential.filter(
+        (config) => config.files?.includes('*.vue') || !config.files
+      )
+    )
+    assert.strictEqual(forVue.plugins!.vue, plugin)
+    assert.strictEqual(forVue.rules!['vue/comment-directive'], 'error')
+    assert.strictEqual(forVue.rules!['vue/multi-word-component-names'], 'error')
+
+    const forOtherThanVue = mergeConfig(
+      essential.filter((config) => !config.files?.includes('*.vue'))
+    )
+    assert.strictEqual(forOtherThanVue.plugins!.vue, plugin)
+    assert.strictEqual(
+      forOtherThanVue.rules!['vue/comment-directive'],
+      undefined
+    )
+    assert.strictEqual(
+      forOtherThanVue.rules!['vue/multi-word-component-names'],
+      'error'
+    )
+  })
+
+  it('should export vue2-strongly-recommended config', () => {
+    const stronglyRecommended = plugin.configs['flat/vue2-strongly-recommended']
+    assert.ok(stronglyRecommended)
+    assert.equal(typeof stronglyRecommended, 'object')
+
+    const forVue = mergeConfig(
+      stronglyRecommended.filter(
+        (config) => config.files?.includes('*.vue') || !config.files
+      )
+    )
+    assert.strictEqual(forVue.plugins!.vue, plugin)
+    assert.strictEqual(forVue.rules!['vue/comment-directive'], 'error')
+    assert.strictEqual(forVue.rules!['vue/multi-word-component-names'], 'error')
+
+    const forOtherThanVue = mergeConfig(
+      stronglyRecommended.filter((config) => !config.files?.includes('*.vue'))
+    )
+    assert.strictEqual(forOtherThanVue.plugins!.vue, plugin)
+    assert.strictEqual(
+      forOtherThanVue.rules!['vue/comment-directive'],
+      undefined
+    )
+    assert.strictEqual(
+      forOtherThanVue.rules!['vue/multi-word-component-names'],
+      'error'
+    )
+  })
+
+  it('should export vue2-recommended config', () => {
+    const recommended = plugin.configs['flat/vue2-recommended']
+    assert.ok(recommended)
+    assert.equal(typeof recommended, 'object')
+
+    const forVue = mergeConfig(
+      recommended.filter(
+        (config) => config.files?.includes('*.vue') || !config.files
+      )
+    )
+    assert.strictEqual(forVue.plugins!.vue, plugin)
+    assert.strictEqual(forVue.rules!['vue/comment-directive'], 'error')
+    assert.strictEqual(forVue.rules!['vue/multi-word-component-names'], 'error')
+    assert.strictEqual(forVue.rules!['vue/attributes-order'], 'warn')
+
+    const forOtherThanVue = mergeConfig(
+      recommended.filter((config) => !config.files?.includes('*.vue'))
+    )
+    assert.strictEqual(forOtherThanVue.plugins!.vue, plugin)
+    assert.strictEqual(
+      forOtherThanVue.rules!['vue/comment-directive'],
+      undefined
+    )
+    assert.strictEqual(
+      forOtherThanVue.rules!['vue/multi-word-component-names'],
+      'error'
+    )
+    assert.strictEqual(forOtherThanVue.rules!['vue/attributes-order'], 'warn')
+  })
+
+  it('should work the suppress comments with base config', async () => {
+    if (!FlatESLint) return
+    const base = plugin.configs['flat/base']
+    const eslint = new FlatESLint({
+      overrideConfigFile: true,
+      overrideConfig: [
+        ...base,
+        {
+          rules: {
+            'vue/no-duplicate-attributes': 'error'
+          }
+        }
+      ]
+    })
+    const code = `
+      <template>
+        <!-- eslint-disable -->
+        <div id id="a">Hello</div>
+      </template>
+    `
+    const result = await eslint.lintText(code, { filePath: 'test.vue' })
+
+    assert.deepStrictEqual(result[0].messages, [])
+  })
+
+  it('should work the suppress comments with recommended config', async () => {
+    if (!FlatESLint) return
+    const recommended = plugin.configs['flat/recommended']
+    const eslint = new FlatESLint({
+      overrideConfigFile: true,
+      overrideConfig: recommended
+    })
+    const code = `
+<template>
+  <!-- eslint-disable -->
+  <div id id="a">Hello</div>
+</template>
+`
+    const result = await eslint.lintText(code, { filePath: 'MyComponent.vue' })
+
+    assert.deepStrictEqual(result[0].messages, [])
+  })
+
+  it('should error with recommended config', async () => {
+    if (!FlatESLint) return
+    const recommended = plugin.configs['flat/recommended']
+    const eslint = new FlatESLint({
+      overrideConfigFile: true,
+      overrideConfig: recommended
+    })
+    const code = `
+<template>
+  <div id id="a">Hello</div>
+</template>
+`
+    const result = await eslint.lintText(code, { filePath: 'MyComponent.vue' })
+
+    assert.deepStrictEqual(
+      result[0].messages.map((message: Linter.LintMessage) => message.ruleId),
+      [
+        'vue/no-parsing-error',
+        'vue/max-attributes-per-line',
+        'vue/no-duplicate-attributes',
+        'vue/singleline-html-element-content-newline',
+        'vue/singleline-html-element-content-newline'
+      ]
+    )
+  })
+})
diff --git a/tests/lib/meta.js b/tests/lib/meta.js
new file mode 100644
index 000000000..f9012ce03
--- /dev/null
+++ b/tests/lib/meta.js
@@ -0,0 +1,20 @@
+'use strict'
+
+const assert = require('assert')
+const plugin = require('../..')
+const expectedMeta = {
+  name: 'eslint-plugin-vue',
+  version: require('../../package.json').version
+}
+
+describe('Test for meta object', () => {
+  it('A plugin should have a meta object.', () => {
+    assert.deepStrictEqual(plugin.meta, expectedMeta)
+  })
+
+  for (const [name, processor] of Object.entries(plugin.processors)) {
+    it(`"${name}" processor should have a meta object.`, () => {
+      assert.deepStrictEqual(processor.meta, expectedMeta)
+    })
+  }
+})
diff --git a/tests/lib/rules-without-vue-eslint-parser.js b/tests/lib/rules-without-vue-eslint-parser.js
index a0c8a80a0..e5977f1e2 100644
--- a/tests/lib/rules-without-vue-eslint-parser.js
+++ b/tests/lib/rules-without-vue-eslint-parser.js
@@ -4,7 +4,7 @@
  */
 'use strict'
 
-const Linter = require('eslint').Linter
+const Linter = require('../eslint-compat').Linter
 const rules = require('../..').rules
 const assert = require('assert')
 
@@ -17,12 +17,22 @@ describe("Don't crash even if without vue-eslint-parser.", () => {
     it(ruleId, () => {
       const linter = new Linter()
       const config = {
-        parserOptions: { ecmaVersion: 2015, ecmaFeatures: { jsx: true } },
+        files: ['*.vue', '*.js'],
+        languageOptions: {
+          ecmaVersion: 2015,
+          parserOptions: { ecmaFeatures: { jsx: true } }
+        },
+        plugins: {
+          vue: {
+            rules: {
+              [key]: rules[key]
+            }
+          }
+        },
         rules: {
           [ruleId]: 'error'
         }
       }
-      linter.defineRule(ruleId, rules[key])
       const resultVue = linter.verifyAndFix(code, config, 'test.vue')
       for (const { message } of resultVue.messages) {
         assert.strictEqual(
diff --git a/tests/lib/rules-without-vue-sfc.js b/tests/lib/rules-without-vue-sfc.js
index c1d5eb2be..7a8b668a9 100644
--- a/tests/lib/rules-without-vue-sfc.js
+++ b/tests/lib/rules-without-vue-sfc.js
@@ -4,7 +4,7 @@
  */
 'use strict'
 
-const Linter = require('eslint').Linter
+const { Linter } = require('../eslint-compat')
 const parser = require('vue-eslint-parser')
 const rules = require('../..').rules
 
@@ -17,14 +17,21 @@ describe("Don't crash even if without vue SFC.", () => {
     it(ruleId, () => {
       const linter = new Linter()
       const config = {
-        parser: 'vue-eslint-parser',
-        parserOptions: { ecmaVersion: 2015 },
+        languageOptions: {
+          parser,
+          ecmaVersion: 2015
+        },
+        plugins: {
+          vue: {
+            rules: {
+              [key]: rules[key]
+            }
+          }
+        },
         rules: {
           [ruleId]: 'error'
         }
       }
-      linter.defineParser('vue-eslint-parser', parser)
-      linter.defineRule(ruleId, rules[key])
       linter.verifyAndFix(code, config, 'test.js')
     })
   }
diff --git a/tests/lib/rules/array-bracket-newline.js b/tests/lib/rules/array-bracket-newline.js
index 06e1890ca..0334d2942 100644
--- a/tests/lib/rules/array-bracket-newline.js
+++ b/tests/lib/rules/array-bracket-newline.js
@@ -3,12 +3,14 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/array-bracket-newline')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2015
+  }
 })
 
 tester.run('array-bracket-newline', rule, {
@@ -38,70 +40,166 @@ tester.run('array-bracket-newline', rule, {
     {
       code: '<template><div :attr="[\na]" /></template>',
       output: '<template><div :attr="[a]" /></template>',
-      errors: ["There should be no linebreak after '['."]
+      errors: [
+        {
+          message: "There should be no linebreak after '['.",
+          line: 1,
+          column: 23,
+          endLine: 1,
+          endColumn: 24
+        }
+      ]
     },
     {
       code: '<template><div :attr="[a\n]" /></template>',
       output: '<template><div :attr="[a]" /></template>',
-      errors: ["There should be no linebreak before ']'."]
+      errors: [
+        {
+          message: "There should be no linebreak before ']'.",
+          line: 2,
+          column: 1,
+          endLine: 2,
+          endColumn: 2
+        }
+      ]
     },
     {
       code: '<template><div :attr="[\na\n]" /></template>',
       output: '<template><div :attr="[a]" /></template>',
       errors: [
-        "There should be no linebreak after '['.",
-        "There should be no linebreak before ']'."
+        {
+          message: "There should be no linebreak after '['.",
+          line: 1,
+          column: 23,
+          endLine: 1,
+          endColumn: 24
+        },
+        {
+          message: "There should be no linebreak before ']'.",
+          line: 3,
+          column: 1,
+          endLine: 3,
+          endColumn: 2
+        }
       ]
     },
     {
       code: '<template><div :attr="[\na]" /></template>',
-      options: ['never'],
       output: '<template><div :attr="[a]" /></template>',
-      errors: ["There should be no linebreak after '['."]
+      options: ['never'],
+      errors: [
+        {
+          message: "There should be no linebreak after '['.",
+          line: 1,
+          column: 23,
+          endLine: 1,
+          endColumn: 24
+        }
+      ]
     },
     {
       code: '<template><div :attr="[a\n]" /></template>',
-      options: ['never'],
       output: '<template><div :attr="[a]" /></template>',
-      errors: ["There should be no linebreak before ']'."]
+      options: ['never'],
+      errors: [
+        {
+          message: "There should be no linebreak before ']'.",
+          line: 2,
+          column: 1,
+          endLine: 2,
+          endColumn: 2
+        }
+      ]
     },
     {
       code: '<template><div :attr="[\na\n]" /></template>',
-      options: ['never'],
       output: '<template><div :attr="[a]" /></template>',
+      options: ['never'],
       errors: [
-        "There should be no linebreak after '['.",
-        "There should be no linebreak before ']'."
+        {
+          message: "There should be no linebreak after '['.",
+          line: 1,
+          column: 23,
+          endLine: 1,
+          endColumn: 24
+        },
+        {
+          message: "There should be no linebreak before ']'.",
+          line: 3,
+          column: 1,
+          endLine: 3,
+          endColumn: 2
+        }
       ]
     },
     {
       code: '<template><div :attr="[\na]" /></template>',
-      options: ['always'],
       output: '<template><div :attr="[\na\n]" /></template>',
-      errors: ["A linebreak is required before ']'."]
+      options: ['always'],
+      errors: [
+        {
+          message: "A linebreak is required before ']'.",
+          line: 2,
+          column: 2,
+          endLine: 2,
+          endColumn: 3
+        }
+      ]
     },
     {
       code: '<template><div :attr="[a\n]" /></template>',
-      options: ['always'],
       output: '<template><div :attr="[\na\n]" /></template>',
-      errors: ["A linebreak is required after '['."]
+      options: ['always'],
+      errors: [
+        {
+          message: "A linebreak is required after '['.",
+          line: 1,
+          column: 23,
+          endLine: 1,
+          endColumn: 24
+        }
+      ]
     },
     {
       code: '<template><div :attr="[a]" /></template>',
-      options: ['always'],
       output: '<template><div :attr="[\na\n]" /></template>',
+      options: ['always'],
       errors: [
-        "A linebreak is required after '['.",
-        "A linebreak is required before ']'."
+        {
+          message: "A linebreak is required after '['.",
+          line: 1,
+          column: 23,
+          endLine: 1,
+          endColumn: 24
+        },
+        {
+          message: "A linebreak is required before ']'.",
+          line: 1,
+          column: 25,
+          endLine: 1,
+          endColumn: 26
+        }
       ]
     },
     {
       code: '<template><div :[[attr]]="[a]" /></template>',
-      options: ['always'],
       output: '<template><div :[[attr]]="[\na\n]" /></template>',
+      options: ['always'],
       errors: [
-        "A linebreak is required after '['.",
-        "A linebreak is required before ']'."
+        {
+          message: "A linebreak is required after '['.",
+          line: 1,
+          column: 27,
+          endLine: 1,
+          endColumn: 28
+        },
+        {
+          message: "A linebreak is required before ']'.",
+          line: 1,
+          column: 29,
+          endLine: 1,
+          endColumn: 30
+        }
       ]
     }
   ]
diff --git a/tests/lib/rules/array-bracket-spacing.js b/tests/lib/rules/array-bracket-spacing.js
index 8e437d88e..6218d232e 100644
--- a/tests/lib/rules/array-bracket-spacing.js
+++ b/tests/lib/rules/array-bracket-spacing.js
@@ -3,12 +3,14 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/array-bracket-spacing')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2015
+  }
 })
 
 tester.run('array-bracket-spacing', rule, {
@@ -37,70 +39,166 @@ tester.run('array-bracket-spacing', rule, {
     {
       code: '<template><div :attr="[ a]" /></template>',
       output: '<template><div :attr="[a]" /></template>',
-      errors: ["There should be no space after '['."]
+      errors: [
+        {
+          message: "There should be no space after '['.",
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 25
+        }
+      ]
     },
     {
       code: '<template><div :attr="[a ]" /></template>',
       output: '<template><div :attr="[a]" /></template>',
-      errors: ["There should be no space before ']'."]
+      errors: [
+        {
+          message: "There should be no space before ']'.",
+          line: 1,
+          column: 25,
+          endLine: 1,
+          endColumn: 26
+        }
+      ]
     },
     {
       code: '<template><div :attr="[ a ]" /></template>',
       output: '<template><div :attr="[a]" /></template>',
       errors: [
-        "There should be no space after '['.",
-        "There should be no space before ']'."
+        {
+          message: "There should be no space after '['.",
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 25
+        },
+        {
+          message: "There should be no space before ']'.",
+          line: 1,
+          column: 26,
+          endLine: 1,
+          endColumn: 27
+        }
       ]
     },
     {
       code: '<template><div :attr="[ a]" /></template>',
-      options: ['never'],
       output: '<template><div :attr="[a]" /></template>',
-      errors: ["There should be no space after '['."]
+      options: ['never'],
+      errors: [
+        {
+          message: "There should be no space after '['.",
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 25
+        }
+      ]
     },
     {
       code: '<template><div :attr="[a ]" /></template>',
-      options: ['never'],
       output: '<template><div :attr="[a]" /></template>',
-      errors: ["There should be no space before ']'."]
+      options: ['never'],
+      errors: [
+        {
+          message: "There should be no space before ']'.",
+          line: 1,
+          column: 25,
+          endLine: 1,
+          endColumn: 26
+        }
+      ]
     },
     {
       code: '<template><div :attr="[ a ]" /></template>',
-      options: ['never'],
       output: '<template><div :attr="[a]" /></template>',
+      options: ['never'],
       errors: [
-        "There should be no space after '['.",
-        "There should be no space before ']'."
+        {
+          message: "There should be no space after '['.",
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 25
+        },
+        {
+          message: "There should be no space before ']'.",
+          line: 1,
+          column: 26,
+          endLine: 1,
+          endColumn: 27
+        }
       ]
     },
     {
       code: '<template><div :attr="[ a]" /></template>',
-      options: ['always'],
       output: '<template><div :attr="[ a ]" /></template>',
-      errors: ["A space is required before ']'."]
+      options: ['always'],
+      errors: [
+        {
+          message: "A space is required before ']'.",
+          line: 1,
+          column: 26,
+          endLine: 1,
+          endColumn: 27
+        }
+      ]
     },
     {
       code: '<template><div :attr="[a ]" /></template>',
-      options: ['always'],
       output: '<template><div :attr="[ a ]" /></template>',
-      errors: ["A space is required after '['."]
+      options: ['always'],
+      errors: [
+        {
+          message: "A space is required after '['.",
+          line: 1,
+          column: 23,
+          endLine: 1,
+          endColumn: 24
+        }
+      ]
     },
     {
       code: '<template><div :attr="[a]" /></template>',
-      options: ['always'],
       output: '<template><div :attr="[ a ]" /></template>',
+      options: ['always'],
       errors: [
-        "A space is required after '['.",
-        "A space is required before ']'."
+        {
+          message: "A space is required after '['.",
+          line: 1,
+          column: 23,
+          endLine: 1,
+          endColumn: 24
+        },
+        {
+          message: "A space is required before ']'.",
+          line: 1,
+          column: 25,
+          endLine: 1,
+          endColumn: 26
+        }
       ]
     },
     {
       code: '<template><div :[[attr]]="[a]" /></template>',
-      options: ['always'],
       output: '<template><div :[[attr]]="[ a ]" /></template>',
+      options: ['always'],
       errors: [
-        "A space is required after '['.",
-        "A space is required before ']'."
+        {
+          message: "A space is required after '['.",
+          line: 1,
+          column: 27,
+          endLine: 1,
+          endColumn: 28
+        },
+        {
+          message: "A space is required before ']'.",
+          line: 1,
+          column: 29,
+          endLine: 1,
+          endColumn: 30
+        }
       ]
     }
   ]
diff --git a/tests/lib/rules/array-element-newline.js b/tests/lib/rules/array-element-newline.js
new file mode 100644
index 000000000..537052aeb
--- /dev/null
+++ b/tests/lib/rules/array-element-newline.js
@@ -0,0 +1,270 @@
+/**
+ * @author alshyra
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/array-element-newline')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('array-element-newline', rule, {
+  valid: [
+    '<template><div :attr="[]" /></template>',
+    '<template><div :attr="[a]" /></template>',
+    `
+      <template>
+        <div :attr="[a,
+                     b,
+                     c]" />
+      </template>`,
+    `<template>
+      <div :attr="[a,
+                   b,
+                   c
+                  ]" />
+    </template>`,
+    '<template><div :[attr]="a" /></template>',
+    '<template><div :[[attr]]="a" /></template>',
+    `<template>
+      <div :attr="[
+                   a,
+                   b,
+                   c
+                  ]" />
+    </template>`,
+    `
+      <template>
+        <div :attr="[a
+                     b]" />
+      </template>`,
+    {
+      code: `
+        <template>
+          <div :attr="[a,
+                       b,
+                       c]" />
+        </template>`,
+      options: ['always']
+    },
+    {
+      code: '<template><div :attr="[a]" /></template>',
+      options: ['never']
+    },
+    {
+      code: '<template><div :attr="[a,b,c]" /></template>',
+      options: ['never']
+    },
+    {
+      code: '<template><div :attr="[a, b, c]" /></template>',
+      options: [{ multiline: true }]
+    },
+    {
+      code: `
+        <template>
+          <div :attr="[a,
+                      {
+                        b:c
+                      }]" />
+        </template>`,
+      options: [{ multiline: true }]
+    },
+    {
+      code: '<template><div :attr="[a, b, c]" /></template>',
+      options: ['consistent']
+    },
+    {
+      code: `
+        <template>
+          <div :attr="[a,
+                       b,
+                       c
+                      ]" />
+        </template>`,
+      options: ['consistent']
+    },
+    {
+      code: '<template><div :attr="[a,b]" /></template>',
+      options: [{ minItems: 3 }]
+    }
+  ],
+  invalid: [
+    {
+      code: `
+        <template>
+          <div :attr="[a, b]" />
+        </template>`,
+      output: `
+        <template>
+          <div :attr="[a,
+b]" />
+        </template>`,
+      errors: [
+        {
+          message: 'There should be a linebreak after this element.',
+          line: 3,
+          column: 26,
+          endLine: 3,
+          endColumn: 27
+        }
+      ]
+    },
+    {
+      code: `
+        <template>
+          <div :attr="[a,b,c]" />
+        </template>`,
+      output: `
+        <template>
+          <div :attr="[a,
+b,
+c]" />
+        </template>`,
+      options: ['always'],
+      errors: [
+        {
+          message: 'There should be a linebreak after this element.',
+          line: 3,
+          column: 26,
+          endLine: 3,
+          endColumn: 26
+        },
+        {
+          message: 'There should be a linebreak after this element.',
+          line: 3,
+          column: 28,
+          endLine: 3,
+          endColumn: 28
+        }
+      ]
+    },
+    {
+      code: `
+        <template>
+          <div :attr="[a,
+                      b,c]" />
+        </template>`,
+      output: `
+        <template>
+          <div :attr="[a,
+                      b,
+c]" />
+        </template>`,
+      options: ['always'],
+      errors: [
+        {
+          message: 'There should be a linebreak after this element.',
+          line: 4,
+          column: 25,
+          endLine: 4,
+          endColumn: 25
+        }
+      ]
+    },
+    {
+      code: `
+        <template>
+          <div :attr="[a,
+                       b,c]" />
+        </template>`,
+      output: `
+        <template>
+          <div :attr="[a,
+                       b,
+c]" />
+        </template>`,
+      options: ['consistent'],
+      errors: [
+        {
+          message: 'There should be a linebreak after this element.',
+          line: 4,
+          column: 26,
+          endLine: 4,
+          endColumn: 26
+        }
+      ]
+    },
+    {
+      code: `
+        <template>
+          <div :attr="[a,
+                       b, c]" />
+        </template>`,
+      output: `
+        <template>
+          <div :attr="[a, b, c]" />
+        </template>`,
+      options: [{ multiline: true }],
+      errors: [
+        {
+          message: 'There should be no linebreak here.',
+          line: 3,
+          column: 26,
+          endLine: 4,
+          endColumn: 24
+        }
+      ]
+    },
+    {
+      code: `
+        <template>
+          <div :attr="[a, {
+                            b:c
+                          }]" />
+        </template>`,
+      output: `
+        <template>
+          <div :attr="[a,
+{
+                            b:c
+                          }]" />
+        </template>`,
+      options: [{ multiline: true }],
+      errors: [
+        {
+          message: 'There should be a linebreak after this element.',
+          line: 3,
+          column: 26,
+          endLine: 3,
+          endColumn: 27
+        }
+      ]
+    },
+    {
+      code: `
+        <template>
+          <div :attr="[a,b,c]" />
+        </template>`,
+      output: `
+        <template>
+          <div :attr="[a,
+b,
+c]" />
+        </template>`,
+      options: [{ minItems: 2 }],
+      errors: [
+        {
+          message: 'There should be a linebreak after this element.',
+          line: 3,
+          column: 26,
+          endLine: 3,
+          endColumn: 26
+        },
+        {
+          message: 'There should be a linebreak after this element.',
+          line: 3,
+          column: 28,
+          endLine: 3,
+          endColumn: 28
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/arrow-spacing.js b/tests/lib/rules/arrow-spacing.js
index 7d64f88f1..d05c9f269 100644
--- a/tests/lib/rules/arrow-spacing.js
+++ b/tests/lib/rules/arrow-spacing.js
@@ -3,12 +3,14 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/arrow-spacing')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2015
+  }
 })
 
 tester.run('arrow-spacing', rule, {
@@ -46,11 +48,17 @@ tester.run('arrow-spacing', rule, {
       errors: [
         {
           message: 'Missing space before =>.',
-          line: 3
+          line: 3,
+          column: 24,
+          endLine: 3,
+          endColumn: 25
         },
         {
           message: 'Missing space after =>.',
-          line: 3
+          line: 3,
+          column: 27,
+          endLine: 3,
+          endColumn: 28
         }
       ]
     },
@@ -66,11 +74,17 @@ tester.run('arrow-spacing', rule, {
       errors: [
         {
           message: 'Missing space before =>.',
-          line: 3
+          line: 3,
+          column: 25,
+          endLine: 3,
+          endColumn: 26
         },
         {
           message: 'Missing space after =>.',
-          line: 3
+          line: 3,
+          column: 28,
+          endLine: 3,
+          endColumn: 29
         }
       ]
     },
@@ -92,11 +106,17 @@ tester.run('arrow-spacing', rule, {
       errors: [
         {
           message: 'Missing space before =>.',
-          line: 4
+          line: 4,
+          column: 25,
+          endLine: 4,
+          endColumn: 26
         },
         {
           message: 'Missing space after =>.',
-          line: 4
+          line: 4,
+          column: 28,
+          endLine: 4,
+          endColumn: 29
         }
       ]
     },
@@ -105,19 +125,25 @@ tester.run('arrow-spacing', rule, {
         <template>
           <div :attr="() => a" />
         </template>`,
-      options: [{ before: false, after: false }],
       output: `
         <template>
           <div :attr="()=>a" />
         </template>`,
+      options: [{ before: false, after: false }],
       errors: [
         {
           message: 'Unexpected space before =>.',
-          line: 3
+          line: 3,
+          column: 24,
+          endLine: 3,
+          endColumn: 25
         },
         {
           message: 'Unexpected space after =>.',
-          line: 3
+          line: 3,
+          column: 29,
+          endLine: 3,
+          endColumn: 30
         }
       ]
     }
diff --git a/tests/lib/rules/attribute-hyphenation.js b/tests/lib/rules/attribute-hyphenation.js
index 26f9531cb..08c1fb695 100644
--- a/tests/lib/rules/attribute-hyphenation.js
+++ b/tests/lib/rules/attribute-hyphenation.js
@@ -4,21 +4,15 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/attribute-hyphenation')
 
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2015
+  }
 })
 
 ruleTester.run('attribute-hyphenation', rule, {
@@ -32,6 +26,11 @@ ruleTester.run('attribute-hyphenation', rule, {
       code: '<template><div><custom data-id="foo" aria-test="bar" slot-scope="{ data }" my-prop="prop"></custom></div></template>',
       options: ['always']
     },
+    {
+      filename: 'test.vue',
+      code: '<template><div><custom :my-prop="prop" v-model:foo-bar="fooBar"></custom></div></template>',
+      options: ['always']
+    },
     {
       filename: 'test.vue',
       code: '<template><div><custom data-id="foo" aria-test="bar" slot-scope="{ data }" myProp="prop"></custom></div></template>',
@@ -66,6 +65,46 @@ ruleTester.run('attribute-hyphenation', rule, {
       filename: 'test.vue',
       code: '<template><div><slot myProp></slot></div></template>',
       options: ['never']
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><custom :attr_ff="prop"></custom></div></template>',
+      options: ['always']
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><custom :attr_ff="prop"></custom></div></template>',
+      options: ['never']
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><custom :my-name.sync="prop"></custom></div></template>',
+      options: ['always']
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><custom :myName.sync="prop"></custom></div></template>',
+      options: ['never']
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <VueComponent my-prop></VueComponent>
+        <custom-component my-prop></custom-component>
+      </template>
+      `,
+      options: ['never', { ignoreTags: ['VueComponent', '/^custom-/'] }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <VueComponent myProp="prop"></VueComponent>
+        <custom-component myProp="prop"></custom-component>
+      </template>
+      `,
+      options: ['always', { ignoreTags: ['VueComponent', '/^custom-/'] }]
     }
   ],
 
@@ -78,21 +117,25 @@ ruleTester.run('attribute-hyphenation', rule, {
       errors: [
         {
           message: "Attribute 'my-prop' can't be hyphenated.",
-          type: 'VIdentifier',
-          line: 1
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 37
         }
       ]
     },
     {
       filename: 'test.vue',
       code: '<template><div><custom MyProp="Bar"></custom></div></template>',
-      output: '<template><div><custom my-prop="Bar"></custom></div></template>',
+      output: null,
       options: ['always'],
       errors: [
         {
           message: "Attribute 'MyProp' must be hyphenated.",
-          type: 'VIdentifier',
-          line: 1
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 36
         }
       ]
     },
@@ -105,22 +148,25 @@ ruleTester.run('attribute-hyphenation', rule, {
       errors: [
         {
           message: "Attribute ':my-prop' can't be hyphenated.",
-          type: 'VDirectiveKey',
-          line: 1
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 39
         }
       ]
     },
     {
       filename: 'test.vue',
       code: '<template><div><custom :MyProp="prop"></custom></div></template>',
-      output:
-        '<template><div><custom :my-prop="prop"></custom></div></template>',
+      output: null,
       options: ['always'],
       errors: [
         {
           message: "Attribute ':MyProp' must be hyphenated.",
-          type: 'VDirectiveKey',
-          line: 1
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 38
         }
       ]
     },
@@ -133,36 +179,40 @@ ruleTester.run('attribute-hyphenation', rule, {
       errors: [
         {
           message: "Attribute 'v-bind:my-prop' can't be hyphenated.",
-          type: 'VDirectiveKey',
-          line: 1
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 45
         }
       ]
     },
     {
       filename: 'test.vue',
       code: '<template><div><custom v-bind:MyProp="prop"></custom></div></template>',
-      output:
-        '<template><div><custom v-bind:my-prop="prop"></custom></div></template>',
+      output: null,
       options: ['always'],
       errors: [
         {
           message: "Attribute 'v-bind:MyProp' must be hyphenated.",
-          type: 'VDirectiveKey',
-          line: 1
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 44
         }
       ]
     },
     {
       filename: 'test.vue',
       code: '<template><div><custom v-bind:MyProp="prop"></custom></div></template>',
-      output:
-        '<template><div><custom v-bind:my-prop="prop"></custom></div></template>',
+      output: null,
       options: ['always', { ignore: [] }],
       errors: [
         {
           message: "Attribute 'v-bind:MyProp' must be hyphenated.",
-          type: 'VDirectiveKey',
-          line: 1
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 44
         }
       ]
     },
@@ -175,8 +225,10 @@ ruleTester.run('attribute-hyphenation', rule, {
       errors: [
         {
           message: "Attribute ':second-prop' can't be hyphenated.",
-          type: 'VDirectiveKey',
-          line: 1
+          line: 1,
+          column: 46,
+          endLine: 1,
+          endColumn: 65
         }
       ]
     },
@@ -189,8 +241,10 @@ ruleTester.run('attribute-hyphenation', rule, {
       errors: [
         {
           message: "Attribute 'v-bind:myProp' must be hyphenated.",
-          type: 'VDirectiveKey',
-          line: 1
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 44
         }
       ]
     },
@@ -203,8 +257,58 @@ ruleTester.run('attribute-hyphenation', rule, {
       errors: [
         {
           message: "Attribute 'v-bind:propID' must be hyphenated.",
-          type: 'VDirectiveKey',
-          line: 1
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 44
+        }
+      ]
+    },
+    {
+      // https://github.com/vuejs/eslint-plugin-vue/issues/2510
+      filename: 'test.vue',
+      code: '<template><div><custom v-model:my-prop="prop"></custom></div></template>',
+      output:
+        '<template><div><custom v-model:myProp="prop"></custom></div></template>',
+      options: ['never'],
+      errors: [
+        {
+          message: "Attribute 'v-model:my-prop' can't be hyphenated.",
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 46
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><custom v-model:myProp="prop"></custom></div></template>',
+      output:
+        '<template><div><custom v-model:my-prop="prop"></custom></div></template>',
+      options: ['always'],
+      errors: [
+        {
+          message: "Attribute 'v-model:myProp' must be hyphenated.",
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 45
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><custom v-model:MyProp="prop"></custom></div></template>',
+      output: null,
+      options: ['always'],
+      errors: [
+        {
+          message: "Attribute 'v-model:MyProp' must be hyphenated.",
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 45
         }
       ]
     },
@@ -228,8 +332,10 @@ ruleTester.run('attribute-hyphenation', rule, {
       errors: [
         {
           message: "Attribute 'third-custom' can't be hyphenated.",
-          type: 'VIdentifier',
-          line: 3
+          line: 3,
+          column: 111,
+          endLine: 3,
+          endColumn: 129
         }
       ]
     },
@@ -253,13 +359,17 @@ ruleTester.run('attribute-hyphenation', rule, {
       errors: [
         {
           message: "Attribute 'custom-hyphen' can't be hyphenated.",
-          type: 'VIdentifier',
-          line: 3
+          line: 3,
+          column: 71,
+          endLine: 3,
+          endColumn: 90
         },
         {
           message: "Attribute 'second-custom' can't be hyphenated.",
-          type: 'VIdentifier',
-          line: 3
+          line: 3,
+          column: 91,
+          endLine: 3,
+          endColumn: 110
         }
       ]
     },
@@ -271,21 +381,193 @@ ruleTester.run('attribute-hyphenation', rule, {
       errors: [
         {
           message: "Attribute 'my-prop' can't be hyphenated.",
-          type: 'VIdentifier',
-          line: 1
+          line: 1,
+          column: 22,
+          endLine: 1,
+          endColumn: 35
         }
       ]
     },
     {
       filename: 'test.vue',
       code: '<template><div><slot MyProp="Bar"></slot></div></template>',
-      output: '<template><div><slot my-prop="Bar"></slot></div></template>',
+      output: null,
       options: ['always'],
       errors: [
         {
           message: "Attribute 'MyProp' must be hyphenated.",
-          type: 'VIdentifier',
-          line: 1
+          line: 1,
+          column: 22,
+          endLine: 1,
+          endColumn: 34
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><custom :attr_Gg="prop"></custom></div></template>',
+      output: null,
+      options: ['always'],
+      errors: [
+        {
+          message: "Attribute ':attr_Gg' must be hyphenated.",
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 39
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><custom :Attr_Hh="prop"></custom></div></template>',
+      output: null,
+      options: ['always'],
+      errors: [
+        {
+          message: "Attribute ':Attr_Hh' must be hyphenated.",
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 39
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><custom :_attr_Jj="prop"></custom></div></template>',
+      output: null,
+      options: ['always'],
+      errors: [
+        {
+          message: "Attribute ':_attr_Jj' must be hyphenated.",
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 40
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><custom :_attrKk="prop"></custom></div></template>',
+      output: null,
+      options: ['always'],
+      errors: [
+        {
+          message: "Attribute ':_attrKk' must be hyphenated.",
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 39
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><custom :_AttrLl="prop"></custom></div></template>',
+      output: null,
+      options: ['always'],
+      errors: [
+        {
+          message: "Attribute ':_AttrLl' must be hyphenated.",
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 39
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><custom :my-custom_prop="prop"></custom></div></template>',
+      output: null,
+      options: ['never'],
+      errors: [
+        {
+          message: "Attribute ':my-custom_prop' can't be hyphenated.",
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 46
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><custom :myAge.sync="prop"></custom></div></template>',
+      output: null,
+      options: ['always'],
+      errors: [
+        {
+          message: "Attribute ':myAge.sync' must be hyphenated.",
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 42
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><custom :my-age.sync="prop"></custom></div></template>',
+      output: null,
+      options: ['never'],
+      errors: [
+        {
+          message: "Attribute ':my-age.sync' can't be hyphenated.",
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 43
+        }
+      ]
+    },
+    {
+      code: `
+      <template>
+        <custom my-prop/>
+        <CustomComponent my-prop/>
+      </template>
+      `,
+      output: `
+      <template>
+        <custom myProp/>
+        <CustomComponent my-prop/>
+      </template>
+      `,
+      options: ['never', { ignoreTags: ['CustomComponent'] }],
+      errors: [
+        {
+          message: "Attribute 'my-prop' can't be hyphenated.",
+          line: 3,
+          column: 17,
+          endLine: 3,
+          endColumn: 24
+        }
+      ]
+    },
+    {
+      code: `
+      <template>
+        <custom myProp/>
+        <CustomComponent myProp/>
+      </template>
+      `,
+      output: `
+      <template>
+        <custom my-prop/>
+        <CustomComponent myProp/>
+      </template>
+      `,
+      options: ['always', { ignoreTags: ['CustomComponent'] }],
+      errors: [
+        {
+          message: "Attribute 'myProp' must be hyphenated.",
+          line: 3,
+          column: 17,
+          endLine: 3,
+          endColumn: 23
         }
       ]
     }
diff --git a/tests/lib/rules/attributes-order.js b/tests/lib/rules/attributes-order.js
index 3797b9181..b5d73977e 100644
--- a/tests/lib/rules/attributes-order.js
+++ b/tests/lib/rules/attributes-order.js
@@ -4,20 +4,14 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/attributes-order')
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2015
+  }
 })
 tester.run('attributes-order', rule, {
   valid: [
@@ -491,6 +485,203 @@ tester.run('attributes-order', rule, {
         </div>
       </template>`,
       options: [{ order: ['LIST_RENDERING', 'CONDITIONALS'] }]
+    },
+
+    // https://github.com/vuejs/eslint-plugin-vue/issues/1728
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div
+          :prop-bind="prop"
+          prop-one="prop"
+          prop-two="prop">
+        </div>
+      </template>`,
+      options: [
+        {
+          order: ['ATTR_DYNAMIC', 'ATTR_STATIC'],
+          alphabetical: false
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div
+          v-model="a
+          :class="b"
+          :is="c"
+          prop-one="d"
+          class="e"
+          prop-two="f">
+        </div>
+      </template>`,
+      options: [
+        {
+          order: ['TWO_WAY_BINDING', 'ATTR_DYNAMIC', 'ATTR_STATIC'],
+          alphabetical: false
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div
+          prop-one="a"
+          prop-three="b"
+          :prop-two="c">
+        </div>
+      </template>`,
+      options: [
+        {
+          order: [
+            'DEFINITION',
+            'LIST_RENDERING',
+            'CONDITIONALS',
+            'RENDER_MODIFIERS',
+            'GLOBAL',
+            ['UNIQUE', 'SLOT'],
+            'TWO_WAY_BINDING',
+            'OTHER_DIRECTIVES',
+            'ATTR_STATIC',
+            'ATTR_DYNAMIC',
+            'EVENTS',
+            'CONTENT'
+          ],
+          alphabetical: false
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div
+          prop-one="a"
+          :prop-two="b"
+          prop-three="c">
+        </div>
+      </template>`,
+      options: [
+        {
+          order: [
+            'DEFINITION',
+            'LIST_RENDERING',
+            'CONDITIONALS',
+            'RENDER_MODIFIERS',
+            'GLOBAL',
+            ['UNIQUE', 'SLOT'],
+            'TWO_WAY_BINDING',
+            'OTHER_DIRECTIVES',
+            ['ATTR_STATIC', 'ATTR_DYNAMIC'],
+            'EVENTS',
+            'CONTENT'
+          ],
+          alphabetical: false
+        }
+      ]
+    },
+
+    // https://github.com/vuejs/eslint-plugin-vue/issues/1870
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div
+          boolean-prop
+          prop-one="a"
+          prop-two="b"
+          :prop-three="c">
+        </div>
+      </template>`,
+      options: [
+        {
+          order: [
+            'DEFINITION',
+            'LIST_RENDERING',
+            'CONDITIONALS',
+            'RENDER_MODIFIERS',
+            'GLOBAL',
+            ['UNIQUE', 'SLOT'],
+            'TWO_WAY_BINDING',
+            'OTHER_DIRECTIVES',
+            'ATTR_SHORTHAND_BOOL',
+            'ATTR_STATIC',
+            'ATTR_DYNAMIC',
+            'EVENTS',
+            'CONTENT'
+          ],
+          alphabetical: false
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div
+          short="val"
+          medium-attr="value"
+          very-long-attribute-name="value">
+        </div>
+      </template>`,
+      options: [{ sortLineLength: true }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div
+          v-if="condition"
+          v-show="show"
+          short="val"
+          medium-attr="value"
+          very-long-attribute-name="value">
+        </div>
+      </template>`,
+      options: [{ sortLineLength: false }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div
+          @click="fn"
+          @input="handleInput"
+          @mouseover="handleMouseover">
+        </div>
+      </template>`,
+      options: [{ sortLineLength: true }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div
+          :a="value"
+          :ab="value"
+          :abc="value">
+        </div>
+      </template>`,
+      options: [{ sortLineLength: true }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div
+          bb="v"
+          zz="v"
+          aaa="v"
+          @click="fn"
+          @keyup="fn"
+          @submit="fn"
+        ></div>
+      </template>`,
+      options: [{ sortLineLength: true, alphabetical: true }]
     }
   ],
 
@@ -502,7 +693,10 @@ tester.run('attributes-order', rule, {
       errors: [
         {
           message: 'Attribute "is" should go before "v-cloak".',
-          type: 'VAttribute'
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 35
         }
       ]
     },
@@ -513,7 +707,10 @@ tester.run('attributes-order', rule, {
       errors: [
         {
           message: 'Attribute "v-cloak" should go before "id".',
-          type: 'VAttribute'
+          line: 1,
+          column: 30,
+          endLine: 1,
+          endColumn: 37
         }
       ]
     },
@@ -538,11 +735,17 @@ tester.run('attributes-order', rule, {
       errors: [
         {
           message: 'Attribute "v-model" should go before "model".',
-          type: 'VAttribute'
+          line: 4,
+          column: 15,
+          endLine: 4,
+          endColumn: 31
         },
         {
           message: 'Attribute ":id" should go before "propOne".',
-          type: 'VAttribute'
+          line: 6,
+          column: 15,
+          endLine: 6,
+          endColumn: 24
         }
       ]
     },
@@ -569,11 +772,17 @@ tester.run('attributes-order', rule, {
       errors: [
         {
           message: 'Attribute "v-model" should go before "v-on".',
-          type: 'VAttribute'
+          line: 6,
+          column: 15,
+          endLine: 6,
+          endColumn: 31
         },
         {
           message: 'Attribute "propOne" should go before "v-on".',
-          type: 'VAttribute'
+          line: 7,
+          column: 15,
+          endLine: 7,
+          endColumn: 28
         }
       ]
     },
@@ -585,13 +794,18 @@ tester.run('attributes-order', rule, {
       errors: [
         {
           message: 'Attribute "is" should go before "aria-test".',
-          type: 'VAttribute'
+          line: 1,
+          column: 46,
+          endLine: 1,
+          endColumn: 57
         }
       ]
     },
     {
       filename: 'test.vue',
       code: '<template><div ref="header" propone="prop" is="header" ></div></template>',
+      output:
+        '<template><div ref="header" is="header" propone="prop" ></div></template>',
       options: [
         {
           order: [
@@ -609,12 +823,13 @@ tester.run('attributes-order', rule, {
           ]
         }
       ],
-      output:
-        '<template><div ref="header" is="header" propone="prop" ></div></template>',
       errors: [
         {
           message: 'Attribute "is" should go before "propone".',
-          type: 'VAttribute'
+          line: 1,
+          column: 44,
+          endLine: 1,
+          endColumn: 55
         }
       ]
     },
@@ -633,7 +848,10 @@ tester.run('attributes-order', rule, {
       errors: [
         {
           message: 'Attribute "is" should go before "v-cloak".',
-          type: 'VAttribute'
+          line: 3,
+          column: 15,
+          endLine: 3,
+          endColumn: 26
         }
       ]
     },
@@ -672,27 +890,45 @@ tester.run('attributes-order', rule, {
       errors: [
         {
           message: 'Attribute "v-for" should go before "v-if".',
-          type: 'VAttribute'
+          line: 4,
+          column: 15,
+          endLine: 4,
+          endColumn: 36
         },
         {
           message: 'Attribute "is" should go before "v-once".',
-          type: 'VAttribute'
+          line: 6,
+          column: 15,
+          endLine: 6,
+          endColumn: 26
         },
         {
           message: 'Attribute "ref" should go before "v-on:click".',
-          type: 'VAttribute'
+          line: 8,
+          column: 15,
+          endLine: 8,
+          endColumn: 27
         },
         {
           message: 'Attribute ":prop" should go before "v-on:click".',
-          type: 'VAttribute'
+          line: 9,
+          column: 15,
+          endLine: 9,
+          endColumn: 33
         },
         {
           message: 'Attribute "id" should go before "v-text".',
-          type: 'VAttribute'
+          line: 11,
+          column: 15,
+          endLine: 11,
+          endColumn: 28
         },
         {
           message: 'Attribute "myProp" should go before "v-text".',
-          type: 'VAttribute'
+          line: 12,
+          column: 15,
+          endLine: 12,
+          endColumn: 28
         }
       ]
     },
@@ -713,6 +949,21 @@ tester.run('attributes-order', rule, {
               >
             </div>
           </template>`,
+      output: `<template>
+            <div
+              v-if="!visible"
+              v-for="item in items"
+              is="header"
+              v-once
+              v-on:click="functionCall"
+              ref="header"
+              :prop="headerData"
+              id="uniqueID"
+              v-text="textContent"
+              myProp="prop"
+              >
+            </div>
+          </template>`,
       options: [
         {
           order: [
@@ -730,41 +981,41 @@ tester.run('attributes-order', rule, {
           ]
         }
       ],
-      output: `<template>
-            <div
-              v-if="!visible"
-              v-for="item in items"
-              is="header"
-              v-once
-              v-on:click="functionCall"
-              ref="header"
-              :prop="headerData"
-              id="uniqueID"
-              v-text="textContent"
-              myProp="prop"
-              >
-            </div>
-          </template>`,
       errors: [
         {
           message: 'Attribute "is" should go before "v-once".',
-          type: 'VAttribute'
+          line: 6,
+          column: 15,
+          endLine: 6,
+          endColumn: 26
         },
         {
           message: 'Attribute "v-on:click" should go before "v-once".',
-          type: 'VAttribute'
+          line: 7,
+          column: 15,
+          endLine: 7,
+          endColumn: 40
         },
         {
           message: 'Attribute "ref" should go before "v-once".',
-          type: 'VAttribute'
+          line: 8,
+          column: 15,
+          endLine: 8,
+          endColumn: 27
         },
         {
           message: 'Attribute "id" should go before "v-text".',
-          type: 'VAttribute'
+          line: 11,
+          column: 15,
+          endLine: 11,
+          endColumn: 28
         },
         {
           message: 'Attribute "myProp" should go before "v-text".',
-          type: 'VAttribute'
+          line: 12,
+          column: 15,
+          endLine: 12,
+          endColumn: 28
         }
       ]
     },
@@ -778,6 +1029,15 @@ tester.run('attributes-order', rule, {
               >
             </div>
           </template>`,
+      output: `<template>
+            <div
+              v-if="!visible"
+              class="content"
+              v-model="foo"
+              v-text="textContent"
+              >
+            </div>
+          </template>`,
       options: [
         {
           order: [
@@ -793,19 +1053,13 @@ tester.run('attributes-order', rule, {
           ]
         }
       ],
-      output: `<template>
-            <div
-              v-if="!visible"
-              class="content"
-              v-model="foo"
-              v-text="textContent"
-              >
-            </div>
-          </template>`,
       errors: [
         {
           message: 'Attribute "v-if" should go before "class".',
-          type: 'VAttribute'
+          line: 4,
+          column: 15,
+          endLine: 4,
+          endColumn: 30
         }
       ]
     },
@@ -829,7 +1083,10 @@ tester.run('attributes-order', rule, {
       errors: [
         {
           message: 'Attribute "v-slot" should go before "v-model".',
-          type: 'VAttribute'
+          line: 5,
+          column: 15,
+          endLine: 5,
+          endColumn: 35
         }
       ]
     },
@@ -841,17 +1098,20 @@ tester.run('attributes-order', rule, {
             a-prop="A">
           </div>
         </template>`,
-      options: [{ alphabetical: true }],
       output: `<template>
           <div
             a-prop="A"
             z-prop="Z">
           </div>
         </template>`,
+      options: [{ alphabetical: true }],
       errors: [
         {
           message: 'Attribute "a-prop" should go before "z-prop".',
-          type: 'VAttribute'
+          line: 4,
+          column: 13,
+          endLine: 4,
+          endColumn: 23
         }
       ]
     },
@@ -863,17 +1123,20 @@ tester.run('attributes-order', rule, {
             :a-prop="A">
           </div>
         </template>`,
-      options: [{ alphabetical: true }],
       output: `<template>
           <div
             :a-prop="A"
             :z-prop="Z">
           </div>
         </template>`,
+      options: [{ alphabetical: true }],
       errors: [
         {
           message: 'Attribute ":a-prop" should go before ":z-prop".',
-          type: 'VAttribute'
+          line: 4,
+          column: 13,
+          endLine: 4,
+          endColumn: 24
         }
       ]
     },
@@ -885,17 +1148,20 @@ tester.run('attributes-order', rule, {
             @change="foo">
           </div>
         </template>`,
-      options: [{ alphabetical: true }],
       output: `<template>
           <div
             @change="foo"
             @input="bar">
           </div>
         </template>`,
+      options: [{ alphabetical: true }],
       errors: [
         {
           message: 'Attribute "@change" should go before "@input".',
-          type: 'VAttribute'
+          line: 4,
+          column: 13,
+          endLine: 4,
+          endColumn: 26
         }
       ]
     },
@@ -907,17 +1173,20 @@ tester.run('attributes-order', rule, {
             boolean-prop>
           </div>
         </template>`,
-      options: [{ alphabetical: true }],
       output: `<template>
           <div
             boolean-prop
             z-prop="value">
           </div>
         </template>`,
+      options: [{ alphabetical: true }],
       errors: [
         {
           message: 'Attribute "boolean-prop" should go before "z-prop".',
-          type: 'VAttribute'
+          line: 4,
+          column: 13,
+          endLine: 4,
+          endColumn: 25
         }
       ]
     },
@@ -929,17 +1198,20 @@ tester.run('attributes-order', rule, {
             v-on:[c]="functionCall">
           </div>
         </template>`,
-      options: [{ alphabetical: true }],
       output: `<template>
           <div
             v-on:[c]="functionCall"
             v-on:click="functionCall">
           </div>
         </template>`,
+      options: [{ alphabetical: true }],
       errors: [
         {
           message: 'Attribute "v-on:[c]" should go before "v-on:click".',
-          type: 'VAttribute'
+          line: 4,
+          column: 13,
+          endLine: 4,
+          endColumn: 36
         }
       ]
     },
@@ -951,17 +1223,20 @@ tester.run('attributes-order', rule, {
             v-on:click="functionCall">
           </div>
         </template>`,
-      options: [{ alphabetical: true }],
       output: `<template>
           <div
             v-on:click="functionCall"
             v-text="textContent">
           </div>
         </template>`,
+      options: [{ alphabetical: true }],
       errors: [
         {
           message: 'Attribute "v-on:click" should go before "v-text".',
-          type: 'VAttribute'
+          line: 4,
+          column: 13,
+          endLine: 4,
+          endColumn: 38
         }
       ]
     },
@@ -973,16 +1248,20 @@ tester.run('attributes-order', rule, {
             class="bar">
           </div>
         </template>`,
-      options: [{ alphabetical: true }],
       output: `<template>
           <div
             class="bar"
             :class="foo">
           </div>
         </template>`,
+      options: [{ alphabetical: true }],
       errors: [
         {
-          message: 'Attribute "class" should go before ":class".'
+          message: 'Attribute "class" should go before ":class".',
+          line: 4,
+          column: 13,
+          endLine: 4,
+          endColumn: 24
         }
       ]
     },
@@ -994,16 +1273,20 @@ tester.run('attributes-order', rule, {
             v-if="bar">
           </div>
         </template>`,
-      options: [{ alphabetical: true }],
       output: `<template>
           <div
             v-if="bar"
             v-show="foo">
           </div>
         </template>`,
+      options: [{ alphabetical: true }],
       errors: [
         {
-          message: 'Attribute "v-if" should go before "v-show".'
+          message: 'Attribute "v-if" should go before "v-show".',
+          line: 4,
+          column: 13,
+          endLine: 4,
+          endColumn: 23
         }
       ]
     },
@@ -1015,16 +1298,20 @@ tester.run('attributes-order', rule, {
             v-bar="bar">
           </div>
         </template>`,
-      options: [{ alphabetical: true }],
       output: `<template>
           <div
             v-bar="bar"
             v-foo="foo">
           </div>
         </template>`,
+      options: [{ alphabetical: true }],
       errors: [
         {
-          message: 'Attribute "v-bar" should go before "v-foo".'
+          message: 'Attribute "v-bar" should go before "v-foo".',
+          line: 4,
+          column: 13,
+          endLine: 4,
+          endColumn: 24
         }
       ]
     },
@@ -1036,16 +1323,20 @@ tester.run('attributes-order', rule, {
             v-foo.a="a">
           </div>
         </template>`,
-      options: [{ alphabetical: true }],
       output: `<template>
           <div
             v-foo.a="a"
             v-foo.b="b">
           </div>
         </template>`,
+      options: [{ alphabetical: true }],
       errors: [
         {
-          message: 'Attribute "v-foo.a" should go before "v-foo.b".'
+          message: 'Attribute "v-foo.a" should go before "v-foo.b".',
+          line: 4,
+          column: 13,
+          endLine: 4,
+          endColumn: 24
         }
       ]
     },
@@ -1056,7 +1347,11 @@ tester.run('attributes-order', rule, {
       output: '<template><div v-is="foo" v-cloak></div></template>',
       errors: [
         {
-          message: 'Attribute "v-is" should go before "v-cloak".'
+          message: 'Attribute "v-is" should go before "v-cloak".',
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 34
         }
       ]
     },
@@ -1080,7 +1375,15 @@ tester.run('attributes-order', rule, {
           v-bind="b">
         </div>
       </template>`,
-      errors: ['Attribute "v-if" should go before "v-bind:id".']
+      errors: [
+        {
+          message: 'Attribute "v-if" should go before "v-bind:id".',
+          line: 6,
+          column: 11,
+          endLine: 6,
+          endColumn: 19
+        }
+      ]
     },
     {
       filename: 'test.vue',
@@ -1100,7 +1403,15 @@ tester.run('attributes-order', rule, {
           v-bind="b">
         </div>
       </template>`,
-      errors: ['Attribute "v-if" should go before "v-bind:id".']
+      errors: [
+        {
+          message: 'Attribute "v-if" should go before "v-bind:id".',
+          line: 5,
+          column: 11,
+          endLine: 5,
+          endColumn: 19
+        }
+      ]
     },
     {
       filename: 'test.vue',
@@ -1120,7 +1431,15 @@ tester.run('attributes-order', rule, {
           v-bind:id="a">
         </div>
       </template>`,
-      errors: ['Attribute "v-if" should go before "v-bind:id".']
+      errors: [
+        {
+          message: 'Attribute "v-if" should go before "v-bind:id".',
+          line: 6,
+          column: 11,
+          endLine: 6,
+          endColumn: 19
+        }
+      ]
     },
     {
       filename: 'test.vue',
@@ -1132,7 +1451,6 @@ tester.run('attributes-order', rule, {
           v-bind="b">
         </div>
       </template>`,
-      options: [{ alphabetical: true }],
       output: `
       <template>
         <div
@@ -1141,7 +1459,16 @@ tester.run('attributes-order', rule, {
           v-bind="b">
         </div>
       </template>`,
-      errors: ['Attribute "v-bind:id" should go before "v-on:click".']
+      options: [{ alphabetical: true }],
+      errors: [
+        {
+          message: 'Attribute "v-bind:id" should go before "v-on:click".',
+          line: 5,
+          column: 11,
+          endLine: 5,
+          endColumn: 24
+        }
+      ]
     },
     {
       filename: 'test.vue',
@@ -1153,7 +1480,6 @@ tester.run('attributes-order', rule, {
           v-bind="b">
         </div>
       </template>`,
-      options: [{ alphabetical: true }],
       output: `
       <template>
         <div
@@ -1162,7 +1488,16 @@ tester.run('attributes-order', rule, {
           v-on:click="x">
         </div>
       </template>`,
-      errors: ['Attribute "v-bind" should go before "v-on:click".']
+      options: [{ alphabetical: true }],
+      errors: [
+        {
+          message: 'Attribute "v-bind" should go before "v-on:click".',
+          line: 6,
+          column: 11,
+          endLine: 6,
+          endColumn: 21
+        }
+      ]
     },
     {
       filename: 'test.vue',
@@ -1174,7 +1509,6 @@ tester.run('attributes-order', rule, {
           v-bind:id="a">
         </div>
       </template>`,
-      options: [{ alphabetical: true }],
       output: `
       <template>
         <div
@@ -1183,7 +1517,16 @@ tester.run('attributes-order', rule, {
           v-on:click="x">
         </div>
       </template>`,
-      errors: ['Attribute "v-bind:id" should go before "v-on:click".']
+      options: [{ alphabetical: true }],
+      errors: [
+        {
+          message: 'Attribute "v-bind:id" should go before "v-on:click".',
+          line: 6,
+          column: 11,
+          endLine: 6,
+          endColumn: 24
+        }
+      ]
     },
     {
       filename: 'test.vue',
@@ -1196,7 +1539,6 @@ tester.run('attributes-order', rule, {
           v-if="x">
         </div>
       </template>`,
-      options: [{ alphabetical: true }],
       output: `
       <template>
         <div
@@ -1206,9 +1548,22 @@ tester.run('attributes-order', rule, {
           v-if="x">
         </div>
       </template>`,
+      options: [{ alphabetical: true }],
       errors: [
-        'Attribute "v-bind:a" should go before "v-on:click".',
-        'Attribute "v-if" should go before "v-on:click".'
+        {
+          message: 'Attribute "v-bind:a" should go before "v-on:click".',
+          line: 5,
+          column: 11,
+          endLine: 5,
+          endColumn: 23
+        },
+        {
+          message: 'Attribute "v-if" should go before "v-on:click".',
+          line: 7,
+          column: 11,
+          endLine: 7,
+          endColumn: 19
+        }
       ]
     },
     {
@@ -1222,7 +1577,6 @@ tester.run('attributes-order', rule, {
           v-if="x">
         </div>
       </template>`,
-      options: [{ alphabetical: true }],
       output: `
       <template>
         <div
@@ -1232,9 +1586,22 @@ tester.run('attributes-order', rule, {
           v-if="x">
         </div>
       </template>`,
+      options: [{ alphabetical: true }],
       errors: [
-        'Attribute "v-bind" should go before "v-on:click".',
-        'Attribute "v-if" should go before "v-on:click".'
+        {
+          message: 'Attribute "v-bind" should go before "v-on:click".',
+          line: 6,
+          column: 11,
+          endLine: 6,
+          endColumn: 21
+        },
+        {
+          message: 'Attribute "v-if" should go before "v-on:click".',
+          line: 7,
+          column: 11,
+          endLine: 7,
+          endColumn: 19
+        }
       ]
     },
     {
@@ -1247,7 +1614,6 @@ tester.run('attributes-order', rule, {
           v-if="x">
         </div>
       </template>`,
-      options: [{ alphabetical: true }],
       output: `
       <template>
         <div
@@ -1256,7 +1622,16 @@ tester.run('attributes-order', rule, {
           v-bind="x">
         </div>
       </template>`,
-      errors: ['Attribute "v-if" should go before "a".']
+      options: [{ alphabetical: true }],
+      errors: [
+        {
+          message: 'Attribute "v-if" should go before "a".',
+          line: 6,
+          column: 11,
+          endLine: 6,
+          endColumn: 19
+        }
+      ]
     },
     {
       filename: 'test.vue',
@@ -1268,7 +1643,6 @@ tester.run('attributes-order', rule, {
           v-if="x">
         </div>
       </template>`,
-      options: [{ alphabetical: true }],
       output: `
       <template>
         <div
@@ -1277,9 +1651,22 @@ tester.run('attributes-order', rule, {
           v-if="x">
         </div>
       </template>`,
+      options: [{ alphabetical: true }],
       errors: [
-        'Attribute "v-bind" should go before "v-on:click".',
-        'Attribute "v-if" should go before "v-on:click".'
+        {
+          message: 'Attribute "v-bind" should go before "v-on:click".',
+          line: 5,
+          column: 11,
+          endLine: 5,
+          endColumn: 21
+        },
+        {
+          message: 'Attribute "v-if" should go before "v-on:click".',
+          line: 6,
+          column: 11,
+          endLine: 6,
+          endColumn: 19
+        }
       ]
     },
     {
@@ -1302,7 +1689,15 @@ tester.run('attributes-order', rule, {
           v-bind:value="a">
         </div>
       </template>`,
-      errors: ['Attribute "v-model" should go before "v-custom-directive".']
+      errors: [
+        {
+          message: 'Attribute "v-model" should go before "v-custom-directive".',
+          line: 6,
+          column: 11,
+          endLine: 6,
+          endColumn: 22
+        }
+      ]
     },
     {
       filename: 'test.vue',
@@ -1324,7 +1719,15 @@ tester.run('attributes-order', rule, {
           v-model="c">
         </div>
       </template>`,
-      errors: ['Attribute "v-bind:id" should go before "v-model".']
+      errors: [
+        {
+          message: 'Attribute "v-bind:id" should go before "v-model".',
+          line: 7,
+          column: 11,
+          endLine: 7,
+          endColumn: 24
+        }
+      ]
     },
 
     // omit order
@@ -1338,7 +1741,6 @@ tester.run('attributes-order', rule, {
           v-for="a in items">
         </div>
       </template>`,
-      options: [{ order: ['LIST_RENDERING', 'CONDITIONALS'] }],
       output: `
       <template>
         <div
@@ -1347,7 +1749,16 @@ tester.run('attributes-order', rule, {
           attr="a">
         </div>
       </template>`,
-      errors: ['Attribute "v-for" should go before "v-if".']
+      options: [{ order: ['LIST_RENDERING', 'CONDITIONALS'] }],
+      errors: [
+        {
+          message: 'Attribute "v-for" should go before "v-if".',
+          line: 6,
+          column: 11,
+          endLine: 6,
+          endColumn: 29
+        }
+      ]
     },
     {
       filename: 'test.vue',
@@ -1359,7 +1770,6 @@ tester.run('attributes-order', rule, {
           v-for="a in items">
         </div>
       </template>`,
-      options: [{ order: ['LIST_RENDERING', 'CONDITIONALS'] }],
       output: `
       <template>
         <div
@@ -1368,12 +1778,24 @@ tester.run('attributes-order', rule, {
           v-if="a">
         </div>
       </template>`,
-      errors: ['Attribute "v-for" should go before "v-if".']
+      options: [{ order: ['LIST_RENDERING', 'CONDITIONALS'] }],
+      errors: [
+        {
+          message: 'Attribute "v-for" should go before "v-if".',
+          line: 6,
+          column: 11,
+          endLine: 6,
+          endColumn: 29
+        }
+      ]
     },
 
     // slot
     {
       filename: 'test.vue',
+      code: '<template><div ref="foo" v-slot="{ qux }" bar="baz"></div></template>',
+      output:
+        '<template><div ref="foo" bar="baz" v-slot="{ qux }"></div></template>',
       options: [
         {
           order: [
@@ -1392,18 +1814,22 @@ tester.run('attributes-order', rule, {
           ]
         }
       ],
-      code: '<template><div ref="foo" v-slot="{ qux }" bar="baz"></div></template>',
-      output:
-        '<template><div ref="foo" bar="baz" v-slot="{ qux }"></div></template>',
       errors: [
         {
-          message: 'Attribute "bar" should go before "v-slot".'
+          message: 'Attribute "bar" should go before "v-slot".',
+          line: 1,
+          column: 43,
+          endLine: 1,
+          endColumn: 52
         }
       ]
     },
 
     {
       filename: 'test.vue',
+      code: '<template><div bar="baz" ref="foo" v-slot="{ qux }"></div></template>',
+      output:
+        '<template><div ref="foo" bar="baz" v-slot="{ qux }"></div></template>',
       options: [
         {
           order: [
@@ -1422,12 +1848,13 @@ tester.run('attributes-order', rule, {
           ]
         }
       ],
-      code: '<template><div bar="baz" ref="foo" v-slot="{ qux }"></div></template>',
-      output:
-        '<template><div ref="foo" bar="baz" v-slot="{ qux }"></div></template>',
       errors: [
         {
-          message: 'Attribute "ref" should go before "bar".'
+          message: 'Attribute "ref" should go before "bar".',
+          line: 1,
+          column: 26,
+          endLine: 1,
+          endColumn: 35
         }
       ]
     },
@@ -1453,8 +1880,20 @@ tester.run('attributes-order', rule, {
           @click="handleClick"/>
       </template>`,
       errors: [
-        'Attribute "v-if" should go before "v-bind".',
-        'Attribute "ref" should go before "v-model".'
+        {
+          message: 'Attribute "v-if" should go before "v-bind".',
+          line: 5,
+          column: 11,
+          endLine: 5,
+          endColumn: 22
+        },
+        {
+          message: 'Attribute "ref" should go before "v-model".',
+          line: 7,
+          column: 11,
+          endLine: 7,
+          endColumn: 20
+        }
       ]
     },
 
@@ -1472,7 +1911,15 @@ tester.run('attributes-order', rule, {
           v-bind="object"
           @click="handleClick"/>
       </template>`,
-      errors: ['Attribute "v-bind" should go before "@click".']
+      errors: [
+        {
+          message: 'Attribute "v-bind" should go before "@click".',
+          line: 5,
+          column: 11,
+          endLine: 5,
+          endColumn: 26
+        }
+      ]
     },
 
     {
@@ -1493,7 +1940,15 @@ tester.run('attributes-order', rule, {
           @click="handleClick"
           @input="handleInput"/>
       </template>`,
-      errors: ['Attribute "v-bind" should go before "@click".']
+      errors: [
+        {
+          message: 'Attribute "v-bind" should go before "@click".',
+          line: 6,
+          column: 11,
+          endLine: 6,
+          endColumn: 26
+        }
+      ]
     },
 
     {
@@ -1506,7 +1961,6 @@ tester.run('attributes-order', rule, {
           v-bind="object"
           @input="handleInput"/>
       </template>`,
-      options: [{ order: ['UNIQUE', 'EVENTS', 'OTHER_ATTR'] }],
       output: `
       <template>
         <div
@@ -1515,7 +1969,16 @@ tester.run('attributes-order', rule, {
           @input="handleInput"
           v-bind="object"/>
       </template>`,
-      errors: ['Attribute "@input" should go before "v-bind".']
+      options: [{ order: ['UNIQUE', 'EVENTS', 'OTHER_ATTR'] }],
+      errors: [
+        {
+          message: 'Attribute "@input" should go before "v-bind".',
+          line: 7,
+          column: 11,
+          endLine: 7,
+          endColumn: 31
+        }
+      ]
     },
 
     {
@@ -1527,7 +1990,6 @@ tester.run('attributes-order', rule, {
           @click="handleClick"
           attr="foo"/>
       </template>`,
-      options: [{ order: ['UNIQUE', 'EVENTS', 'OTHER_ATTR'] }],
       output: `
       <template>
         <div
@@ -1535,7 +1997,325 @@ tester.run('attributes-order', rule, {
           v-bind="object"
           attr="foo"/>
       </template>`,
-      errors: ['Attribute "@click" should go before "v-bind".']
+      options: [{ order: ['UNIQUE', 'EVENTS', 'OTHER_ATTR'] }],
+      errors: [
+        {
+          message: 'Attribute "@click" should go before "v-bind".',
+          line: 5,
+          column: 11,
+          endLine: 5,
+          endColumn: 31
+        }
+      ]
+    },
+
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div
+          v-bind:prop-one="a"
+          prop-two="b"
+          :prop-three="c"/>
+      </template>`,
+      output: `
+      <template>
+        <div
+          prop-two="b"
+          v-bind:prop-one="a"
+          :prop-three="c"/>
+      </template>`,
+      options: [{ order: ['ATTR_STATIC', 'ATTR_DYNAMIC'] }],
+      errors: [
+        {
+          message: 'Attribute "prop-two" should go before "v-bind:prop-one".',
+          line: 5,
+          column: 11,
+          endLine: 5,
+          endColumn: 23
+        }
+      ]
+    },
+
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div
+          :prop-one="a"
+          v-model="value"
+          prop-two="b"
+          :prop-three="c"
+          class="class"
+          boolean-prop/>
+      </template>`,
+      output: `
+      <template>
+        <div
+          v-model="value"
+          :prop-one="a"
+          :prop-three="c"
+          prop-two="b"
+          class="class"
+          boolean-prop/>
+      </template>`,
+      options: [
+        {
+          order: [
+            'LIST_RENDERING',
+            'CONDITIONALS',
+            'RENDER_MODIFIERS',
+            'TWO_WAY_BINDING',
+            'OTHER_DIRECTIVES',
+            'ATTR_DYNAMIC',
+            'ATTR_STATIC',
+            'ATTR_SHORTHAND_BOOL',
+            'EVENTS'
+          ]
+        }
+      ],
+      errors: [
+        {
+          message: 'Attribute "v-model" should go before ":prop-one".',
+          line: 5,
+          column: 11,
+          endLine: 5,
+          endColumn: 26
+        },
+        {
+          message: 'Attribute ":prop-three" should go before "prop-two".',
+          line: 7,
+          column: 11,
+          endLine: 7,
+          endColumn: 26
+        }
+      ]
+    },
+
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div
+          :prop-one="a"
+          v-model="value"
+          boolean-prop
+          prop-two="b"
+          :prop-three="c"/>
+      </template>`,
+      output: `
+      <template>
+        <div
+          v-model="value"
+          :prop-one="a"
+          boolean-prop
+          prop-two="b"
+          :prop-three="c"/>
+      </template>`,
+      options: [
+        {
+          order: [
+            'UNIQUE',
+            'LIST_RENDERING',
+            'CONDITIONALS',
+            'RENDER_MODIFIERS',
+            'GLOBAL',
+            'TWO_WAY_BINDING',
+            'OTHER_DIRECTIVES',
+            ['ATTR_STATIC', 'ATTR_DYNAMIC', 'ATTR_SHORTHAND_BOOL'],
+            'EVENTS',
+            'CONTENT',
+            'DEFINITION',
+            'SLOT'
+          ]
+        }
+      ],
+      errors: [
+        {
+          message: 'Attribute "v-model" should go before ":prop-one".',
+          line: 5,
+          column: 11,
+          endLine: 5,
+          endColumn: 26
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div
+          medium-attr="value"
+          short="val"
+          very-long-attribute-name="value">
+        </div>
+      </template>`,
+      output: `
+      <template>
+        <div
+          short="val"
+          medium-attr="value"
+          very-long-attribute-name="value">
+        </div>
+      </template>`,
+      options: [{ sortLineLength: true }],
+      errors: ['Attribute "short" should go before "medium-attr".']
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div
+          very-long-attribute-name="value"
+          short="val">
+        </div>
+      </template>`,
+      output: `
+      <template>
+        <div
+          short="val"
+          very-long-attribute-name="value">
+        </div>
+      </template>`,
+      options: [{ sortLineLength: true }],
+      errors: ['Attribute "short" should go before "very-long-attribute-name".']
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div
+          id="id"
+          v-model="foo"
+          very-long-attribute-name="value"
+          short="val">
+        </div>
+      </template>`,
+      output: `
+      <template>
+        <div
+          id="id"
+          v-model="foo"
+          short="val"
+          very-long-attribute-name="value">
+        </div>
+      </template>`,
+      options: [{ sortLineLength: true }],
+      errors: ['Attribute "short" should go before "very-long-attribute-name".']
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div
+          @mouseover="handleMouseover"
+          @click="fn"
+          @input="handleInput">
+        </div>
+      </template>`,
+      output: `
+      <template>
+        <div
+          @click="fn"
+          @mouseover="handleMouseover"
+          @input="handleInput">
+        </div>
+      </template>`,
+      options: [{ sortLineLength: true }],
+      errors: [
+        'Attribute "@click" should go before "@mouseover".',
+        'Attribute "@input" should go before "@mouseover".'
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div
+          :abc="value"
+          :a="value"
+          :ab="value">
+        </div>
+      </template>`,
+      output: `
+      <template>
+        <div
+          :a="value"
+          :abc="value"
+          :ab="value">
+        </div>
+      </template>`,
+      options: [{ sortLineLength: true }],
+      errors: [
+        'Attribute ":a" should go before ":abc".',
+        'Attribute ":ab" should go before ":abc".'
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div
+          very-long-binding="longerValue"
+          short="obj"
+          @click="fn">
+        </div>
+      </template>`,
+      output: `
+      <template>
+        <div
+          short="obj"
+          very-long-binding="longerValue"
+          @click="fn">
+        </div>
+      </template>`,
+      options: [{ sortLineLength: true }],
+      errors: ['Attribute "short" should go before "very-long-binding".']
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div
+          aa="v"
+          z="v"
+        ></div>
+      </template>`,
+      output: `
+      <template>
+        <div
+          z="v"
+          aa="v"
+        ></div>
+      </template>`,
+      options: [{ sortLineLength: true, alphabetical: true }],
+      errors: [{ message: 'Attribute "z" should go before "aa".' }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div
+          zz="v"
+          bb="v"
+          @keyup="fn"
+          @click="fn"
+        ></div>
+      </template>`,
+      output: `
+      <template>
+        <div
+          bb="v"
+          zz="v"
+          @click="fn"
+          @keyup="fn"
+        ></div>
+      </template>`,
+      options: [{ sortLineLength: true, alphabetical: true }],
+      errors: [
+        { message: 'Attribute "bb" should go before "zz".' },
+        { message: 'Attribute "@click" should go before "@keyup".' }
+      ]
     }
   ]
 })
diff --git a/tests/lib/rules/block-lang.js b/tests/lib/rules/block-lang.js
index 235ea7783..af8b837d6 100644
--- a/tests/lib/rules/block-lang.js
+++ b/tests/lib/rules/block-lang.js
@@ -3,12 +3,14 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/block-lang')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2015
+  }
 })
 
 tester.run('block-lang', rule, {
@@ -27,11 +29,11 @@ tester.run('block-lang', rule, {
       code: '<i18n></i18n><i18n lang="json"></i18n>',
       options: [{ i18n: { lang: 'json', allowNoLang: true } }]
     },
-    {
-      code: `<template></template>
+    `
+      <template></template>
       <script></script>
-      <style></style>`
-    }
+      <style></style>
+    `
   ],
   invalid: [
     {
@@ -40,9 +42,12 @@ tester.run('block-lang', rule, {
       options: [{ script: { lang: 'ts' } }],
       errors: [
         {
-          message: `Only "ts" can be used for the 'lang' attribute of '<script>'.`,
+          message:
+            "Only 'ts' can be used for the 'lang' attribute of '<script>'.",
           line: 2,
-          column: 15
+          column: 15,
+          endLine: 2,
+          endColumn: 24
         }
       ]
     },
@@ -52,9 +57,12 @@ tester.run('block-lang', rule, {
       options: [{ script: { lang: ['ts'] } }],
       errors: [
         {
-          message: `Only "ts" can be used for the 'lang' attribute of '<script>'.`,
+          message:
+            "Only 'ts' can be used for the 'lang' attribute of '<script>'.",
           line: 2,
-          column: 15
+          column: 15,
+          endLine: 2,
+          endColumn: 24
         }
       ]
     },
@@ -66,7 +74,9 @@ tester.run('block-lang', rule, {
         {
           message: "The 'lang' attribute of '<script>' is missing.",
           line: 2,
-          column: 7
+          column: 7,
+          endLine: 2,
+          endColumn: 15
         }
       ]
     },
@@ -76,9 +86,12 @@ tester.run('block-lang', rule, {
       options: [{ script: { lang: 'ts' } }],
       errors: [
         {
-          message: `Only "ts" can be used for the 'lang' attribute of '<script>'.`,
+          message:
+            "Only 'ts' can be used for the 'lang' attribute of '<script>'.",
           line: 2,
-          column: 15
+          column: 15,
+          endLine: 2,
+          endColumn: 22
         }
       ]
     },
@@ -89,7 +102,9 @@ tester.run('block-lang', rule, {
         {
           message: "Do not specify the 'lang' attribute of '<script>'.",
           line: 1,
-          column: 30
+          column: 30,
+          endLine: 1,
+          endColumn: 39
         }
       ]
     },
@@ -101,7 +116,9 @@ tester.run('block-lang', rule, {
           message:
             "Do not explicitly specify the default language for the 'lang' attribute of '<script>'.",
           line: 1,
-          column: 30
+          column: 30,
+          endLine: 1,
+          endColumn: 39
         }
       ]
     },
@@ -112,7 +129,9 @@ tester.run('block-lang', rule, {
         {
           message: "Do not specify the 'lang' attribute of '<script>'.",
           line: 1,
-          column: 30
+          column: 30,
+          endLine: 1,
+          endColumn: 39
         }
       ]
     },
@@ -124,7 +143,9 @@ tester.run('block-lang', rule, {
         {
           message: "The 'lang' attribute of '<i18n>' is missing.",
           line: 1,
-          column: 1
+          column: 1,
+          endLine: 1,
+          endColumn: 7
         }
       ]
     },
@@ -135,9 +156,11 @@ tester.run('block-lang', rule, {
       errors: [
         {
           message:
-            "Only \"json\" can be used for the 'lang' attribute of '<i18n>'. Or, not specifying the `lang` attribute is allowed.",
+            "Only 'json' can be used for the 'lang' attribute of '<i18n>'. Or, not specifying the 'lang' attribute is allowed.",
           line: 2,
-          column: 13
+          column: 13,
+          endLine: 2,
+          endColumn: 24
         }
       ]
     },
@@ -148,9 +171,11 @@ tester.run('block-lang', rule, {
       errors: [
         {
           message:
-            'Only "json", and "yaml" can be used for the \'lang\' attribute of \'<i18n>\'. Or, not specifying the `lang` attribute is allowed.',
+            "Only 'json', and 'yaml' can be used for the 'lang' attribute of '<i18n>'. Or, not specifying the 'lang' attribute is allowed.",
           line: 2,
-          column: 13
+          column: 13,
+          endLine: 2,
+          endColumn: 24
         }
       ]
     },
@@ -163,17 +188,23 @@ tester.run('block-lang', rule, {
         {
           message: "Do not specify the 'lang' attribute of '<template>'.",
           line: 1,
-          column: 11
+          column: 11,
+          endLine: 1,
+          endColumn: 21
         },
         {
           message: "Do not specify the 'lang' attribute of '<script>'.",
           line: 2,
-          column: 15
+          column: 15,
+          endLine: 2,
+          endColumn: 24
         },
         {
           message: "Do not specify the 'lang' attribute of '<style>'.",
           line: 3,
-          column: 14
+          column: 14,
+          endLine: 3,
+          endColumn: 27
         }
       ]
     }
diff --git a/tests/lib/rules/component-tags-order.js b/tests/lib/rules/block-order.ts
similarity index 82%
rename from tests/lib/rules/component-tags-order.js
rename to tests/lib/rules/block-order.ts
index 94ba7a1b4..659522cb6 100644
--- a/tests/lib/rules/component-tags-order.js
+++ b/tests/lib/rules/block-order.ts
@@ -1,44 +1,40 @@
 /**
  * @author Yosuke Ota
  */
-'use strict'
-
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const rule = require('../../../lib/rules/component-tags-order')
-const RuleTester = require('eslint').RuleTester
-const assert = require('assert')
-const { ESLint } = require('../../eslint-compat')
+import { Rule } from '../../../node_modules/@types/eslint'
+import assert from 'assert'
+import parserVue from 'vue-eslint-parser'
+import rule from '../../../lib/rules/block-order'
+import { ESLint, RuleTester } from '../../eslint-compat'
+import pluginVue from '../../../lib'
+import processor from '../../../lib/processor'
 
 // Initialize linter.
 const eslint = new ESLint({
+  overrideConfigFile: true,
   overrideConfig: {
-    parser: require.resolve('vue-eslint-parser'),
-    parserOptions: {
+    files: ['**/*.vue'],
+    languageOptions: {
+      parser: parserVue,
       ecmaVersion: 2015
     },
-    plugins: ['vue'],
+    plugins: { vue: pluginVue },
     rules: {
       'vue/comment-directive': 'error',
-      'vue/component-tags-order': 'error'
-    }
+      'vue/block-order': 'error'
+    },
+    processor
   },
-  useEslintrc: false,
-  plugins: { vue: require('../../../lib/index') },
   fix: true
 })
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser')
+  languageOptions: {
+    parser: parserVue
+  }
 })
 
-tester.run('component-tags-order', rule, {
+tester.run('block-order', rule as unknown as Rule.RuleModule, {
   valid: [
     // default
     '<script></script><template></template><style></style>',
@@ -76,44 +72,36 @@ tester.run('component-tags-order', rule, {
     // order
     {
       code: '<script></script><template></template><style></style>',
-      output: null,
       options: [{ order: ['script', 'template', 'style'] }]
     },
     {
       code: '<template></template><script></script><style></style>',
-      output: null,
       options: [{ order: ['template', 'script', 'style'] }]
     },
     {
       code: '<style></style><template></template><script></script>',
-      output: null,
       options: [{ order: ['style', 'template', 'script'] }]
     },
     {
       code: '<template></template><script></script><style></style>',
-      output: null,
       options: [{ order: ['template', 'docs', 'script', 'style'] }]
     },
     {
       code: '<template></template><docs></docs><script></script><style></style>',
-      output: null,
       options: [{ order: ['template', 'script', 'style'] }]
     },
     {
       code: '<docs><div id="id">text <!--comment--> </div><br></docs><script></script><template></template><style></style>',
-      output: null,
       options: [{ order: ['docs', 'script', 'template', 'style'] }]
     },
     {
       code: '<script setup></script><script></script><template></template><style></style>',
-      output: null,
       options: [
         { order: ['script[setup]', 'script:not([setup])', 'template', 'style'] }
       ]
     },
     {
       code: '<template></template><script setup></script><script></script><style></style>',
-      output: null,
       options: [
         {
           order: [['script[setup]', 'script:not([setup])', 'template'], 'style']
@@ -122,24 +110,20 @@ tester.run('component-tags-order', rule, {
     },
     {
       code: '<script></script><script setup></script><template></template><style></style>',
-      output: null,
       options: [{ order: ['script', 'template', 'style'] }]
     },
     {
       code: '<template></template><script></script><script setup></script><style></style>',
-      output: null,
       options: [{ order: [['script', 'template'], 'style'] }]
     },
     {
       code: '<script></script><script setup></script><template></template><style></style>',
-      output: null,
       options: [
         { order: ['script:not([setup])', 'script[setup]', 'template', 'style'] }
       ]
     },
     {
       code: '<template></template><script></script><script setup></script><style></style>',
-      output: null,
       options: [
         {
           order: [['script:not([setup])', 'script[setup]', 'template'], 'style']
@@ -148,7 +132,6 @@ tester.run('component-tags-order', rule, {
     },
     {
       code: '<template></template><script></script><script setup></script><style scoped></style><style></style><i18n locale="ja"></i18n><i18n locale="en"></i18n>',
-      output: null,
       options: [
         {
           order: [
@@ -163,7 +146,6 @@ tester.run('component-tags-order', rule, {
     },
     {
       code: '<template></template><script></script><script setup></script><style scoped></style><style></style><i18n locale="en"></i18n><i18n locale="ja"></i18n>',
-      output: null,
       options: [
         {
           order: [
@@ -180,17 +162,14 @@ tester.run('component-tags-order', rule, {
     },
     {
       code: '<template></template><docs></docs><script></script><style></style>',
-      output: null,
       options: [{ order: [['docs', 'script', 'template'], 'style'] }]
     },
     {
       code: '<i18n locale="en"></i18n><i18n locale="ja"></i18n>',
-      output: null,
       options: [{ order: ['i18n[locale=en]', 'i18n[locale=ja]'] }]
     },
     {
       code: '<style></style><style scoped></style>',
-      output: null,
       options: [{ order: ['style:not([scoped])', 'style[scoped]'] }]
     },
 
@@ -203,31 +182,37 @@ tester.run('component-tags-order', rule, {
   invalid: [
     {
       code: '<style></style><template></template><script></script>',
+      output: '<template></template><style></style><script></script>',
       errors: [
         {
           message: "'<template>' should be above '<style>' on line 1.",
           line: 1,
-          column: 16
+          column: 16,
+          endLine: 1,
+          endColumn: 37
         },
         {
           message: "'<script>' should be above '<style>' on line 1.",
           line: 1,
-          column: 37
+          column: 37,
+          endLine: 1,
+          endColumn: 54
         }
-      ],
-      output: '<template></template><style></style><script></script>'
+      ]
     },
     {
       code: '<template></template><script></script><style></style>',
+      output: '<script></script><template></template><style></style>',
       options: [{ order: ['script', 'template', 'style'] }],
       errors: [
         {
           message: "'<script>' should be above '<template>' on line 1.",
           line: 1,
-          column: 22
+          column: 22,
+          endLine: 1,
+          endColumn: 39
         }
-      ],
-      output: '<script></script><template></template><style></style>'
+      ]
     },
     {
       code: `
@@ -236,19 +221,22 @@ tester.run('component-tags-order', rule, {
         <style></style>
 
         <script></script>`,
-      errors: [
-        {
-          message: "'<script>' should be above '<style>' on line 4.",
-          line: 6
-        }
-      ],
       output:
         '\n' +
         '        <template></template>\n' +
         '\n' +
         '        <script></script>\n' +
         '\n' +
-        '        <style></style>'
+        '        <style></style>',
+      errors: [
+        {
+          message: "'<script>' should be above '<style>' on line 4.",
+          line: 6,
+          column: 9,
+          endLine: 6,
+          endColumn: 26
+        }
+      ]
     },
     {
       code: `
@@ -256,19 +244,22 @@ tester.run('component-tags-order', rule, {
         <script></script>
         <style></style>
       `,
-      options: [{ order: ['script', 'template', 'style'] }],
-      errors: [
-        {
-          message: "'<script>' should be above '<template>' on line 2.",
-          line: 3
-        }
-      ],
       output:
         '\n' +
         '        <script></script>\n' +
         '        <template></template>\n' +
         '        <style></style>\n' +
-        '      '
+        '      ',
+      options: [{ order: ['script', 'template', 'style'] }],
+      errors: [
+        {
+          message: "'<script>' should be above '<template>' on line 2.",
+          line: 3,
+          column: 9,
+          endLine: 3,
+          endColumn: 26
+        }
+      ]
     },
     {
       code: `
@@ -276,19 +267,22 @@ tester.run('component-tags-order', rule, {
         <template></template>
         <style></style>
       `,
-      options: [{ order: ['template', 'script', 'style'] }],
-      errors: [
-        {
-          message: "'<template>' should be above '<script>' on line 2.",
-          line: 3
-        }
-      ],
       output:
         '\n' +
         '        <template></template>\n' +
         '        <script></script>\n' +
         '        <style></style>\n' +
-        '      '
+        '      ',
+      options: [{ order: ['template', 'script', 'style'] }],
+      errors: [
+        {
+          message: "'<template>' should be above '<script>' on line 2.",
+          line: 3,
+          column: 9,
+          endLine: 3,
+          endColumn: 30
+        }
+      ]
     },
     {
       code: `
@@ -297,20 +291,23 @@ tester.run('component-tags-order', rule, {
         <script></script>
         <style></style>
       `,
-      options: [{ order: ['docs', 'template', 'script', 'style'] }],
-      errors: [
-        {
-          message: "'<docs>' should be above '<template>' on line 2.",
-          line: 3
-        }
-      ],
       output:
         '\n' +
         '        <docs></docs>\n' +
         '        <template></template>\n' +
         '        <script></script>\n' +
         '        <style></style>\n' +
-        '      '
+        '      ',
+      options: [{ order: ['docs', 'template', 'script', 'style'] }],
+      errors: [
+        {
+          message: "'<docs>' should be above '<template>' on line 2.",
+          line: 3,
+          column: 9,
+          endLine: 3,
+          endColumn: 22
+        }
+      ]
     },
     {
       code: `
@@ -319,20 +316,23 @@ tester.run('component-tags-order', rule, {
         <script></script>
         <style></style>
       `,
-      options: [{ order: ['script', 'template', 'style'] }],
-      errors: [
-        {
-          message: "'<script>' should be above '<template>' on line 2.",
-          line: 4
-        }
-      ],
       output:
         '\n' +
         '        <script></script>\n' +
         '        <template></template>\n' +
         '        <docs></docs>\n' +
         '        <style></style>\n' +
-        '      '
+        '      ',
+      options: [{ order: ['script', 'template', 'style'] }],
+      errors: [
+        {
+          message: "'<script>' should be above '<template>' on line 2.",
+          line: 4,
+          column: 9,
+          endLine: 4,
+          endColumn: 26
+        }
+      ]
     },
     {
       code: `
@@ -342,13 +342,6 @@ tester.run('component-tags-order', rule, {
         <script></script>
         <style></style>
       `,
-      options: [{ order: ['script', 'template', 'style'] }],
-      errors: [
-        {
-          message: "'<script>' should be above '<template>' on line 2.",
-          line: 5
-        }
-      ],
       output:
         '\n' +
         '        <script></script>\n' +
@@ -356,22 +349,35 @@ tester.run('component-tags-order', rule, {
         '        <docs>\n' +
         '        </docs>\n' +
         '        <style></style>\n' +
-        '      '
+        '      ',
+      options: [{ order: ['script', 'template', 'style'] }],
+      errors: [
+        {
+          message: "'<script>' should be above '<template>' on line 2.",
+          line: 5,
+          column: 9,
+          endLine: 5,
+          endColumn: 26
+        }
+      ]
     },
     {
       code: `
         <script></script>
         <template></template>
       `,
+      output:
+        '\n        <template></template>\n        <script></script>\n      ',
       options: [{ order: ['template', 'script'] }],
       errors: [
         {
           message: "'<template>' should be above '<script>' on line 2.",
-          line: 3
+          line: 3,
+          column: 9,
+          endLine: 3,
+          endColumn: 30
         }
-      ],
-      output:
-        '\n        <template></template>\n        <script></script>\n      '
+      ]
     },
     {
       code: `
@@ -379,22 +385,28 @@ tester.run('component-tags-order', rule, {
         <template></template>
         <script></script>
       `,
+      output:
+        '\n' +
+        '        <template></template>\n' +
+        '        <style></style>\n' +
+        '        <script></script>\n' +
+        '      ',
       errors: [
         {
           message: "'<template>' should be above '<style>' on line 2.",
-          line: 3
+          line: 3,
+          column: 9,
+          endLine: 3,
+          endColumn: 30
         },
         {
           message: "'<script>' should be above '<style>' on line 2.",
-          line: 4
+          line: 4,
+          column: 9,
+          endLine: 4,
+          endColumn: 26
         }
-      ],
-      output:
-        '\n' +
-        '        <template></template>\n' +
-        '        <style></style>\n' +
-        '        <script></script>\n' +
-        '      '
+      ]
     },
     {
       code: `
@@ -403,23 +415,29 @@ tester.run('component-tags-order', rule, {
         <template></template>
         <script></script>
       `,
+      output:
+        '\n' +
+        '        <template></template>\n' +
+        '        <style></style>\n' +
+        '        <docs></docs>\n' +
+        '        <script></script>\n' +
+        '      ',
       errors: [
         {
           message: "'<template>' should be above '<style>' on line 2.",
-          line: 4
+          line: 4,
+          column: 9,
+          endLine: 4,
+          endColumn: 30
         },
         {
           message: "'<script>' should be above '<style>' on line 2.",
-          line: 5
+          line: 5,
+          column: 9,
+          endLine: 5,
+          endColumn: 26
         }
-      ],
-      output:
-        '\n' +
-        '        <template></template>\n' +
-        '        <style></style>\n' +
-        '        <docs></docs>\n' +
-        '        <script></script>\n' +
-        '      '
+      ]
     },
     // no <template>
     {
@@ -427,13 +445,16 @@ tester.run('component-tags-order', rule, {
         <style></style>
         <script></script>
       `,
+      output: '\n        <script></script>\n        <style></style>\n      ',
       errors: [
         {
           message: "'<script>' should be above '<style>' on line 2.",
-          line: 3
+          line: 3,
+          column: 9,
+          endLine: 3,
+          endColumn: 26
         }
-      ],
-      output: '\n        <script></script>\n        <style></style>\n      '
+      ]
     },
     {
       code: '<i18n locale="ja"></i18n><i18n locale="en"></i18n>',
@@ -443,7 +464,10 @@ tester.run('component-tags-order', rule, {
         {
           message:
             "'<i18n locale=en>' should be above '<i18n locale=ja>' on line 1.",
-          line: 1
+          line: 1,
+          column: 26,
+          endLine: 1,
+          endColumn: 51
         }
       ]
     },
@@ -454,7 +478,10 @@ tester.run('component-tags-order', rule, {
       errors: [
         {
           message: "'<style>' should be above '<style scoped>' on line 1.",
-          line: 1
+          line: 1,
+          column: 23,
+          endLine: 1,
+          endColumn: 38
         }
       ]
     },
@@ -465,7 +492,10 @@ tester.run('component-tags-order', rule, {
       errors: [
         {
           message: "'<style scoped>' should be above '<style>' on line 1.",
-          line: 1
+          line: 1,
+          column: 16,
+          endLine: 1,
+          endColumn: 38
         }
       ]
     },
@@ -476,7 +506,10 @@ tester.run('component-tags-order', rule, {
       errors: [
         {
           message: "'<script>' should be above '<style>' on line 1.",
-          line: 1
+          line: 1,
+          column: 16,
+          endLine: 1,
+          endColumn: 33
         }
       ]
     }
@@ -486,7 +519,7 @@ tester.run('component-tags-order', rule, {
 describe('suppress reporting with eslint-disable-next-line', () => {
   it('do not report if <!-- eslint-disable-next-line -->', async () => {
     const code = `<style></style><template></template>
-    <!-- eslint-disable-next-line vue/component-tags-order -->
+    <!-- eslint-disable-next-line vue/block-order -->
     <script></script>`
     const [{ messages, output }] = await eslint.lintText(code, {
       filePath: 'test.vue'
@@ -496,7 +529,7 @@ describe('suppress reporting with eslint-disable-next-line', () => {
     assert.strictEqual(
       output,
       `<template></template><style></style>
-    <!-- eslint-disable-next-line vue/component-tags-order -->
+    <!-- eslint-disable-next-line vue/block-order -->
     <script></script>`
     )
   })
diff --git a/tests/lib/rules/block-spacing.js b/tests/lib/rules/block-spacing.js
index c06d54ec9..a0a5a6723 100644
--- a/tests/lib/rules/block-spacing.js
+++ b/tests/lib/rules/block-spacing.js
@@ -3,12 +3,11 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/block-spacing')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('block-spacing', rule, {
@@ -38,7 +37,10 @@ tester.run('block-spacing', rule, {
             token: '{'
           },
           // message: 'Requires a space after \'{\'',
-          line: 3
+          line: 3,
+          column: 38,
+          endLine: 3,
+          endColumn: 39
         },
         {
           messageId: 'missing',
@@ -47,7 +49,10 @@ tester.run('block-spacing', rule, {
             token: '}'
           },
           // message: 'Requires a space before \'}\'',
-          line: 3
+          line: 3,
+          column: 51,
+          endLine: 3,
+          endColumn: 52
         }
       ]
     },
@@ -68,7 +73,10 @@ tester.run('block-spacing', rule, {
             token: '{'
           },
           // message: 'Requires a space after \'{\'',
-          line: 3
+          line: 3,
+          column: 33,
+          endLine: 3,
+          endColumn: 34
         },
         {
           messageId: 'missing',
@@ -77,7 +85,10 @@ tester.run('block-spacing', rule, {
             token: '}'
           },
           // message: 'Requires a space before \'}\'',
-          line: 3
+          line: 3,
+          column: 46,
+          endLine: 3,
+          endColumn: 47
         }
       ]
     },
@@ -86,11 +97,11 @@ tester.run('block-spacing', rule, {
         <template>
           <div :attr="function foo() { return true; }" />
         </template>`,
-      options: ['never'],
       output: `
         <template>
           <div :attr="function foo() {return true;}" />
         </template>`,
+      options: ['never'],
       errors: [
         {
           messageId: 'extra',
@@ -99,7 +110,10 @@ tester.run('block-spacing', rule, {
             token: '{'
           },
           // message: 'Unexpected space(s) after \'{\'',
-          line: 3
+          line: 3,
+          column: 39,
+          endLine: 3,
+          endColumn: 40
         },
         {
           messageId: 'extra',
@@ -108,7 +122,10 @@ tester.run('block-spacing', rule, {
             token: '}'
           },
           // message: 'Unexpected space(s) before \'}\'',
-          line: 3
+          line: 3,
+          column: 52,
+          endLine: 3,
+          endColumn: 53
         }
       ]
     },
@@ -122,16 +139,24 @@ tester.run('block-spacing', rule, {
           data: {
             location: 'after',
             token: '{'
-          }
+          },
           // message: 'Requires a space after \'{\'',
+          line: 1,
+          column: 57,
+          endLine: 1,
+          endColumn: 58
         },
         {
           messageId: 'missing',
           data: {
             location: 'before',
             token: '}'
-          }
+          },
           // message: 'Requires a space before \'}\'',
+          line: 1,
+          column: 67,
+          endLine: 1,
+          endColumn: 68
         }
       ]
     }
diff --git a/tests/lib/rules/block-tag-newline.js b/tests/lib/rules/block-tag-newline.js
index a727b0b98..107e9158e 100644
--- a/tests/lib/rules/block-tag-newline.js
+++ b/tests/lib/rules/block-tag-newline.js
@@ -3,12 +3,11 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/block-tag-newline')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('block-tag-newline', rule, {
@@ -54,12 +53,16 @@ tester.run('block-tag-newline', rule, {
         {
           message: "A line break is required after '<template>'.",
           line: 1,
-          column: 11
+          column: 11,
+          endLine: 1,
+          endColumn: 11
         },
         {
           message: "A line break is required after '<script>'.",
           line: 3,
-          column: 9
+          column: 9,
+          endLine: 3,
+          endColumn: 9
         }
       ]
     },
@@ -70,12 +73,16 @@ tester.run('block-tag-newline', rule, {
         {
           message: "A line break is required before '</template>'.",
           line: 2,
-          column: 8
+          column: 8,
+          endLine: 2,
+          endColumn: 8
         },
         {
           message: "A line break is required before '</script>'.",
           line: 4,
-          column: 6
+          column: 6,
+          endLine: 4,
+          endColumn: 6
         }
       ]
     },
@@ -87,22 +94,30 @@ tester.run('block-tag-newline', rule, {
         {
           message: "A line break is required after '<template>'.",
           line: 1,
-          column: 11
+          column: 11,
+          endLine: 1,
+          endColumn: 11
         },
         {
           message: "A line break is required before '</template>'.",
           line: 2,
-          column: 7
+          column: 7,
+          endLine: 2,
+          endColumn: 7
         },
         {
           message: "A line break is required after '<script>'.",
           line: 3,
-          column: 9
+          column: 9,
+          endLine: 3,
+          endColumn: 9
         },
         {
           message: "A line break is required before '</script>'.",
           line: 4,
-          column: 6
+          column: 6,
+          endLine: 4,
+          endColumn: 6
         }
       ]
     },
@@ -114,22 +129,30 @@ tester.run('block-tag-newline', rule, {
         {
           message: "There should be no line break after '<template>'.",
           line: 1,
-          column: 11
+          column: 11,
+          endLine: 2,
+          endColumn: 1
         },
         {
           message: "There should be no line break after '<template>'.",
           line: 3,
-          column: 7
+          column: 7,
+          endLine: 4,
+          endColumn: 1
         },
         {
           message: "There should be no line break after '<script>'.",
           line: 5,
-          column: 9
+          column: 9,
+          endLine: 6,
+          endColumn: 1
         },
         {
           message: "There should be no line break after '<script>'.",
           line: 6,
-          column: 6
+          column: 6,
+          endLine: 7,
+          endColumn: 1
         }
       ]
     },
@@ -142,22 +165,30 @@ tester.run('block-tag-newline', rule, {
         {
           message: "A line break is required after '<template>'.",
           line: 1,
-          column: 11
+          column: 11,
+          endLine: 1,
+          endColumn: 11
         },
         {
           message: "A line break is required before '</template>'.",
           line: 2,
-          column: 7
+          column: 7,
+          endLine: 2,
+          endColumn: 7
         },
         {
           message: "A line break is required after '<script>'.",
           line: 3,
-          column: 9
+          column: 9,
+          endLine: 3,
+          endColumn: 9
         },
         {
           message: "A line break is required before '</script>'.",
           line: 3,
-          column: 14
+          column: 14,
+          endLine: 3,
+          endColumn: 14
         }
       ]
     },
@@ -171,25 +202,33 @@ tester.run('block-tag-newline', rule, {
           message:
             "Expected 1 line break after '<template>', but 2 line breaks found.",
           line: 1,
-          column: 11
+          column: 11,
+          endLine: 3,
+          endColumn: 1
         },
         {
           message:
             "Expected 1 line break  before '</template>', but 2 line breaks found.",
           line: 3,
-          column: 8
+          column: 8,
+          endLine: 5,
+          endColumn: 1
         },
         {
           message:
             "Expected 1 line break after '<script>', but 2 line breaks found.",
           line: 6,
-          column: 9
+          column: 9,
+          endLine: 8,
+          endColumn: 1
         },
         {
           message:
             "Expected 1 line break  before '</script>', but 2 line breaks found.",
           line: 9,
-          column: 6
+          column: 6,
+          endLine: 11,
+          endColumn: 1
         }
       ]
     },
@@ -205,13 +244,17 @@ tester.run('block-tag-newline', rule, {
           message:
             "Expected 2 line breaks after '<template>', but 3 line breaks found.",
           line: 1,
-          column: 11
+          column: 11,
+          endLine: 4,
+          endColumn: 1
         },
         {
           message:
             "Expected 2 line breaks  before '</script>', but 3 line breaks found.",
           line: 10,
-          column: 6
+          column: 6,
+          endLine: 13,
+          endColumn: 1
         }
       ]
     },
@@ -232,8 +275,20 @@ tester.run('block-tag-newline', rule, {
         }
       ],
       errors: [
-        "There should be no line break after '<script>'.",
-        "A line break is required before '</docs>'."
+        {
+          message: "There should be no line break after '<script>'.",
+          line: 5,
+          column: 6,
+          endLine: 8,
+          endColumn: 1
+        },
+        {
+          message: "A line break is required before '</docs>'.",
+          line: 9,
+          column: 2,
+          endLine: 9,
+          endColumn: 2
+        }
       ]
     }
   ]
diff --git a/tests/lib/rules/brace-style.js b/tests/lib/rules/brace-style.js
index cfea73591..abf8d5a58 100644
--- a/tests/lib/rules/brace-style.js
+++ b/tests/lib/rules/brace-style.js
@@ -3,12 +3,11 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/brace-style')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('brace-style', rule, {
@@ -41,7 +40,10 @@ tester.run('brace-style', rule, {
         {
           message:
             'Opening curly brace does not appear on the same line as controlling statement.',
-          line: 4
+          line: 4,
+          column: 11,
+          endLine: 4,
+          endColumn: 12
         }
       ]
     },
@@ -59,12 +61,18 @@ tester.run('brace-style', rule, {
       errors: [
         {
           message: 'Statement inside of curly braces should be on next line.',
-          line: 3
+          line: 3,
+          column: 38,
+          endLine: 3,
+          endColumn: 39
         },
         {
           message:
             'Closing curly brace should be on the same line as opening curly brace or on the line after the previous block.',
-          line: 3
+          line: 3,
+          column: 53,
+          endLine: 3,
+          endColumn: 54
         }
       ]
     },
@@ -75,11 +83,19 @@ return(1)
 })()" /></template>`,
       errors: [
         {
-          message: 'Statement inside of curly braces should be on next line.'
+          message: 'Statement inside of curly braces should be on next line.',
+          line: 1,
+          column: 57,
+          endLine: 1,
+          endColumn: 58
         },
         {
           message:
-            'Closing curly brace should be on the same line as opening curly brace or on the line after the previous block.'
+            'Closing curly brace should be on the same line as opening curly brace or on the line after the previous block.',
+          line: 1,
+          column: 67,
+          endLine: 1,
+          endColumn: 68
         }
       ]
     }
diff --git a/tests/lib/rules/camelcase.js b/tests/lib/rules/camelcase.js
index 2470f63f1..be3583dc8 100644
--- a/tests/lib/rules/camelcase.js
+++ b/tests/lib/rules/camelcase.js
@@ -3,12 +3,11 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/camelcase')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('camelcase', rule, {
@@ -35,7 +34,10 @@ tester.run('camelcase', rule, {
       errors: [
         {
           message: "Identifier 'my_pref' is not in camel case.",
-          line: 3
+          line: 3,
+          column: 25,
+          endLine: 3,
+          endColumn: 32
         }
       ]
     },
@@ -49,7 +51,10 @@ tester.run('camelcase', rule, {
       errors: [
         {
           message: "Identifier 'my_pref' is not in camel case.",
-          line: 4
+          line: 4,
+          column: 21,
+          endLine: 4,
+          endColumn: 28
         }
       ]
     },
@@ -63,7 +68,10 @@ tester.run('camelcase', rule, {
       errors: [
         {
           message: "Identifier 'my_pref' is not in camel case.",
-          line: 4
+          line: 4,
+          column: 21,
+          endLine: 4,
+          endColumn: 28
         }
       ]
     }
diff --git a/tests/lib/rules/comma-dangle.js b/tests/lib/rules/comma-dangle.js
index bbfdbfe01..61c649dce 100644
--- a/tests/lib/rules/comma-dangle.js
+++ b/tests/lib/rules/comma-dangle.js
@@ -3,12 +3,11 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/comma-dangle')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2018 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2018 }
 })
 
 tester.run('comma-dangle', rule, {
@@ -38,12 +37,11 @@ tester.run('comma-dangle', rule, {
         }
       ]
     },
-    {
-      code: `
+    `
       <template>
         <button :[[a,b][1]]="a" ></button>
-      </template>`
-    },
+      </template>
+    `,
     {
       code: `
       <template>
@@ -65,7 +63,10 @@ tester.run('comma-dangle', rule, {
       errors: [
         {
           message: 'Unexpected trailing comma.',
-          line: 3
+          line: 3,
+          column: 41,
+          endLine: 3,
+          endColumn: 42
         }
       ]
     },
@@ -74,19 +75,22 @@ tester.run('comma-dangle', rule, {
         <template>
           <CustomButton @click="($event, ) => fn()" />
         </template>`,
+      output: `
+        <template>
+          <CustomButton @click="($event ) => fn()" />
+        </template>`,
       options: [
         {
           functions: 'never'
         }
       ],
-      output: `
-        <template>
-          <CustomButton @click="($event ) => fn()" />
-        </template>`,
       errors: [
         {
           message: 'Unexpected trailing comma.',
-          line: 3
+          line: 3,
+          column: 40,
+          endLine: 3,
+          endColumn: 41
         }
       ]
     },
@@ -101,7 +105,6 @@ tester.run('comma-dangle', rule, {
             ])
           }"></button>
         </template>`,
-      options: ['always-multiline'],
       output: `
         <template>
           <button @click="() => {
@@ -112,14 +115,21 @@ tester.run('comma-dangle', rule, {
             ])
           }"></button>
         </template>`,
+      options: ['always-multiline'],
       errors: [
         {
           message: 'Unexpected trailing comma.',
-          line: 4
+          line: 4,
+          column: 21,
+          endLine: 4,
+          endColumn: 22
         },
         {
           message: 'Missing trailing comma.',
-          line: 7
+          line: 7,
+          column: 16,
+          endLine: 8,
+          endColumn: 1
         }
       ]
     },
@@ -134,7 +144,11 @@ tester.run('comma-dangle', rule, {
       </template>`,
       errors: [
         {
-          message: 'Unexpected trailing comma.'
+          message: 'Unexpected trailing comma.',
+          line: 3,
+          column: 23,
+          endLine: 3,
+          endColumn: 24
         }
       ]
     },
@@ -150,7 +164,11 @@ tester.run('comma-dangle', rule, {
       options: ['always'],
       errors: [
         {
-          message: 'Missing trailing comma.'
+          message: 'Missing trailing comma.',
+          line: 3,
+          column: 23,
+          endLine: 3,
+          endColumn: 24
         }
       ]
     }
diff --git a/tests/lib/rules/comma-spacing.js b/tests/lib/rules/comma-spacing.js
index 68b70b324..58b334f34 100644
--- a/tests/lib/rules/comma-spacing.js
+++ b/tests/lib/rules/comma-spacing.js
@@ -3,12 +3,11 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/comma-spacing')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2020 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2020 }
 })
 
 tester.run('comma-spacing', rule, {
@@ -92,12 +91,16 @@ tester.run('comma-spacing', rule, {
         {
           message: "There should be no space before ','.",
           line: 4,
-          column: 25
+          column: 25,
+          endLine: 4,
+          endColumn: 26
         },
         {
           message: "A space is required after ','.",
           line: 4,
-          column: 25
+          column: 25,
+          endLine: 4,
+          endColumn: 26
         }
       ]
     },
@@ -113,19 +116,31 @@ tester.run('comma-spacing', rule, {
       errors: [
         {
           message: "There should be no space before ','.",
-          line: 3
+          line: 3,
+          column: 36,
+          endLine: 3,
+          endColumn: 37
         },
         {
           message: "A space is required after ','.",
-          line: 3
+          line: 3,
+          column: 36,
+          endLine: 3,
+          endColumn: 37
         },
         {
           message: "There should be no space before ','.",
-          line: 3
+          line: 3,
+          column: 40,
+          endLine: 3,
+          endColumn: 41
         },
         {
           message: "A space is required after ','.",
-          line: 3
+          line: 3,
+          column: 40,
+          endLine: 3,
+          endColumn: 41
         }
       ]
     },
@@ -141,19 +156,31 @@ tester.run('comma-spacing', rule, {
       errors: [
         {
           message: "There should be no space before ','.",
-          line: 3
+          line: 3,
+          column: 39,
+          endLine: 3,
+          endColumn: 40
         },
         {
           message: "A space is required after ','.",
-          line: 3
+          line: 3,
+          column: 39,
+          endLine: 3,
+          endColumn: 40
         },
         {
           message: "There should be no space before ','.",
-          line: 3
+          line: 3,
+          column: 46,
+          endLine: 3,
+          endColumn: 47
         },
         {
           message: "A space is required after ','.",
-          line: 3
+          line: 3,
+          column: 46,
+          endLine: 3,
+          endColumn: 47
         }
       ]
     },
@@ -169,11 +196,17 @@ tester.run('comma-spacing', rule, {
       errors: [
         {
           message: "There should be no space before ','.",
-          line: 3
+          line: 3,
+          column: 33,
+          endLine: 3,
+          endColumn: 34
         },
         {
           message: "A space is required after ','.",
-          line: 3
+          line: 3,
+          column: 33,
+          endLine: 3,
+          endColumn: 34
         }
       ]
     },
@@ -189,11 +222,17 @@ tester.run('comma-spacing', rule, {
       errors: [
         {
           message: "There should be no space before ','.",
-          line: 3
+          line: 3,
+          column: 30,
+          endLine: 3,
+          endColumn: 31
         },
         {
           message: "A space is required after ','.",
-          line: 3
+          line: 3,
+          column: 30,
+          endLine: 3,
+          endColumn: 31
         }
       ]
     },
@@ -209,11 +248,17 @@ tester.run('comma-spacing', rule, {
       errors: [
         {
           message: "There should be no space before ','.",
-          line: 3
+          line: 3,
+          column: 39,
+          endLine: 3,
+          endColumn: 40
         },
         {
           message: "A space is required after ','.",
-          line: 3
+          line: 3,
+          column: 39,
+          endLine: 3,
+          endColumn: 40
         }
       ]
     },
@@ -233,11 +278,17 @@ tester.run('comma-spacing', rule, {
       errors: [
         {
           message: "There should be no space before ','.",
-          line: 4
+          line: 4,
+          column: 31,
+          endLine: 4,
+          endColumn: 32
         },
         {
           message: "A space is required after ','.",
-          line: 4
+          line: 4,
+          column: 31,
+          endLine: 4,
+          endColumn: 32
         }
       ]
     },
@@ -253,11 +304,17 @@ tester.run('comma-spacing', rule, {
       errors: [
         {
           message: "There should be no space before ','.",
-          line: 3
+          line: 3,
+          column: 29,
+          endLine: 3,
+          endColumn: 30
         },
         {
           message: "A space is required after ','.",
-          line: 3
+          line: 3,
+          column: 29,
+          endLine: 3,
+          endColumn: 30
         }
       ]
     },
@@ -268,21 +325,27 @@ tester.run('comma-spacing', rule, {
             fn(a, b)
           "/>
         </template>`,
-      options: [{ before: true, after: false }],
       output: `
         <template>
           <button @click="
             fn(a ,b)
           "/>
         </template>`,
+      options: [{ before: true, after: false }],
       errors: [
         {
           message: "A space is required before ','.",
-          line: 4
+          line: 4,
+          column: 17,
+          endLine: 4,
+          endColumn: 18
         },
         {
           message: "There should be no space after ','.",
-          line: 4
+          line: 4,
+          column: 17,
+          endLine: 4,
+          endColumn: 18
         }
       ]
     },
@@ -302,7 +365,10 @@ tester.run('comma-spacing', rule, {
       errors: [
         {
           message: "A space is required after ','.",
-          line: 4
+          line: 4,
+          column: 29,
+          endLine: 4,
+          endColumn: 30
         }
       ]
     }
diff --git a/tests/lib/rules/comma-style.js b/tests/lib/rules/comma-style.js
index f02c3e6d9..e41ba9b44 100644
--- a/tests/lib/rules/comma-style.js
+++ b/tests/lib/rules/comma-style.js
@@ -3,12 +3,13 @@
  */
 'use strict'
 
-const { RuleTester } = require('eslint')
+const semver = require('semver')
+const { RuleTester } = require('../../eslint-compat')
 const rule = require('../../../lib/rules/comma-style')
+const { eslintStylisticVersion } = require('../../test-utils/eslint-stylistic')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2018 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2018 }
 })
 
 tester.run('comma-style', rule, {
@@ -35,14 +36,6 @@ tester.run('comma-style', rule, {
         </template>`,
       options: ['first', { exceptions: { ArrowFunctionExpression: false } }]
     },
-    {
-      code: `
-        <template>
-          <CustomButton v-slot="a,
-            b
-            ,c" />
-        </template>`
-    },
     {
       code: `
         <template>
@@ -72,7 +65,10 @@ tester.run('comma-style', rule, {
       errors: [
         {
           message: "',' should be placed last.",
-          line: 5
+          line: 5,
+          column: 13,
+          endLine: 5,
+          endColumn: 14
         }
       ]
     },
@@ -82,16 +78,19 @@ tester.run('comma-style', rule, {
           <CustomButton @click="($event
             , data) => fn()" />
         </template>`,
-      options: ['last', { exceptions: { ArrowFunctionExpression: false } }],
       output: `
         <template>
           <CustomButton @click="($event,
              data) => fn()" />
         </template>`,
+      options: ['last', { exceptions: { ArrowFunctionExpression: false } }],
       errors: [
         {
           message: "',' should be placed last.",
-          line: 4
+          line: 4,
+          column: 13,
+          endLine: 4,
+          endColumn: 14
         }
       ]
     },
@@ -101,16 +100,19 @@ tester.run('comma-style', rule, {
           <CustomButton @click="($event,
             data) => fn()" />
         </template>`,
-      options: ['first', { exceptions: { ArrowFunctionExpression: false } }],
       output: `
         <template>
           <CustomButton @click="($event
             ,data) => fn()" />
         </template>`,
+      options: ['first', { exceptions: { ArrowFunctionExpression: false } }],
       errors: [
         {
-          message: "',' should be placed first."
-          // line: 3 // eslint v7.0
+          message: "',' should be placed first.",
+          line: 3,
+          column: 40,
+          endLine: 3,
+          endColumn: 41
         }
       ]
     },
@@ -122,7 +124,6 @@ tester.run('comma-style', rule, {
             <div/>
           </CustomButton>
         </template>`,
-      options: ['first', { exceptions: { FunctionExpression: false } }],
       output: `
         <template>
           <CustomButton v-slot="foo
@@ -130,10 +131,14 @@ tester.run('comma-style', rule, {
             <div/>
           </CustomButton>
         </template>`,
+      options: ['first', { exceptions: { FunctionExpression: false } }],
       errors: [
         {
-          message: "',' should be placed first."
-          // line: 3 // eslint v7.0
+          message: "',' should be placed first.",
+          line: 3,
+          column: 36,
+          endLine: 3,
+          endColumn: 37
         }
       ]
     },
@@ -144,19 +149,72 @@ tester.run('comma-style', rule, {
             b
             ,c" />
         </template>`,
-      options: ['last', { exceptions: { FunctionExpression: false } }],
       output: `
         <template>
           <CustomButton v-slot="a,
             b,
             c" />
         </template>`,
+      options: ['last', { exceptions: { FunctionExpression: false } }],
       errors: [
         {
-          message: "',' should be placed last."
-          // line: 3 // eslint v7.0
+          message: "',' should be placed last.",
+          line: 5,
+          column: 13,
+          endLine: 5,
+          endColumn: 14
         }
       ]
     }
   ]
 })
+
+if (
+  eslintStylisticVersion === undefined ||
+  semver.lt(eslintStylisticVersion, '3.0.0') ||
+  semver.satisfies(process.version, '<19.0.0 || ^21.0.0')
+) {
+  tester.run('comma-style', rule, {
+    valid: [
+      `
+      <template>
+        <CustomButton v-slot="a,
+          b
+          ,c" />
+      </template>
+    `
+    ],
+    invalid: []
+  })
+} else {
+  tester.run('comma-style', rule, {
+    valid: [],
+    invalid: [
+      {
+        code: `
+        <template>
+          <CustomButton v-slot="a,
+            b
+            ,c" />
+        </template>
+      `,
+        output: `
+        <template>
+          <CustomButton v-slot="a,
+            b,
+            c" />
+        </template>
+      `,
+        errors: [
+          {
+            message: "',' should be placed last.",
+            line: 5,
+            column: 13,
+            endLine: 5,
+            endColumn: 14
+          }
+        ]
+      }
+    ]
+  })
+}
diff --git a/tests/lib/rules/comment-directive.js b/tests/lib/rules/comment-directive.ts
similarity index 94%
rename from tests/lib/rules/comment-directive.js
rename to tests/lib/rules/comment-directive.ts
index 7b93ea754..2a7efdab6 100644
--- a/tests/lib/rules/comment-directive.js
+++ b/tests/lib/rules/comment-directive.ts
@@ -3,39 +3,33 @@
  * @author Toru Nagashima
  */
 
-'use strict'
-
-// -----------------------------------------------------------------------------
-// Requirements
-// -----------------------------------------------------------------------------
-
-const assert = require('assert')
-const { ESLint } = require('../../eslint-compat')
-
-// -----------------------------------------------------------------------------
-// Tests
-// -----------------------------------------------------------------------------
+import assert from 'assert'
+import parserVue from 'vue-eslint-parser'
+import { ESLint } from '../../eslint-compat'
+import pluginVue from '../../../lib'
+import processor from '../../../lib/processor'
 
 // Initialize linter.
 const eslint = new ESLint({
+  overrideConfigFile: true,
   overrideConfig: {
-    parser: require.resolve('vue-eslint-parser'),
-    parserOptions: {
+    files: ['*.*'],
+    languageOptions: {
+      parser: parserVue,
       ecmaVersion: 2015
     },
-    plugins: ['vue'],
+    plugins: { vue: pluginVue },
     rules: {
       'no-unused-vars': 'error',
       'vue/comment-directive': 'error',
       'vue/no-parsing-error': 'error',
       'vue/no-duplicate-attributes': 'error'
-    }
-  },
-  useEslintrc: false,
-  plugins: { vue: require('../../../lib/index') }
+    },
+    processor
+  }
 })
 
-async function lintMessages(code) {
+async function lintMessages(code: string) {
   const result = await eslint.lintText(code, { filePath: 'test.vue' })
   return result[0].messages
 }
@@ -51,7 +45,7 @@ describe('comment-directive', () => {
       `
       const messages = await lintMessages(code)
 
-      assert.deepEqual(messages.length, 0)
+      assert.deepStrictEqual(messages, [])
     })
 
     it('disable specific rules if <!-- eslint-disable vue/no-duplicate-attributes -->', async () => {
@@ -360,12 +354,14 @@ describe('comment-directive', () => {
 
   describe('reportUnusedDisableDirectives', () => {
     const eslint = new ESLint({
+      overrideConfigFile: true,
       overrideConfig: {
-        parser: require.resolve('vue-eslint-parser'),
-        parserOptions: {
+        files: ['**/*.vue'],
+        languageOptions: {
+          parser: parserVue,
           ecmaVersion: 2015
         },
-        plugins: ['vue'],
+        plugins: { vue: pluginVue },
         rules: {
           'no-unused-vars': 'error',
           'vue/comment-directive': [
@@ -374,12 +370,12 @@ describe('comment-directive', () => {
           ],
           'vue/no-parsing-error': 'error',
           'vue/no-duplicate-attributes': 'error'
-        }
-      },
-      useEslintrc: false
+        },
+        processor
+      }
     })
 
-    async function lintMessages(code) {
+    async function lintMessages(code: string) {
       const result = await eslint.lintText(code, { filePath: 'test.vue' })
       return result[0].messages
     }
@@ -414,7 +410,7 @@ describe('comment-directive', () => {
 
       const messages = await lintMessages(code)
 
-      assert.deepEqual(messages.length, 0)
+      assert.deepStrictEqual(messages, [])
     })
     it('disable and report unused <!-- eslint-disable -->', async () => {
       const code = `
@@ -513,7 +509,7 @@ describe('comment-directive', () => {
 
       const messages = await lintMessages(code)
 
-      assert.deepEqual(messages.length, 0)
+      assert.deepStrictEqual(messages, [])
     })
 
     it('dont report used, with duplicate eslint-disable', async () => {
@@ -527,7 +523,7 @@ describe('comment-directive', () => {
 
       const messages = await lintMessages(code)
 
-      assert.deepEqual(messages.length, 0)
+      assert.deepStrictEqual(messages, [])
     })
   })
 })
diff --git a/tests/lib/rules/component-api-style.js b/tests/lib/rules/component-api-style.js
index 6d4257533..e55570339 100644
--- a/tests/lib/rules/component-api-style.js
+++ b/tests/lib/rules/component-api-style.js
@@ -4,20 +4,15 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/component-api-style')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015, sourceType: 'module' }
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2015,
+    sourceType: 'module'
+  }
 })
 
 tester.run('component-api-style', rule, {
@@ -51,7 +46,6 @@ tester.run('component-api-style', rule, {
     },
     {
       filename: 'test.vue',
-      options: [['options']],
       code: `
       <script>
       export default {
@@ -64,7 +58,8 @@ tester.run('component-api-style', rule, {
         // ...
       }
       </script>
-      `
+      `,
+      options: [['options']]
     },
     {
       filename: 'test.js',
@@ -84,7 +79,6 @@ tester.run('component-api-style', rule, {
     },
     {
       filename: 'test.js',
-      options: [['options']],
       code: `
       import { defineComponent } from 'vue'
       defineComponent({
@@ -96,21 +90,21 @@ tester.run('component-api-style', rule, {
         },
         // ...
       })
-      `
+      `,
+      options: [['options']]
     },
     {
       filename: 'test.vue',
-      options: [['script-setup']],
       code: `
       <script setup>
       import { ref } from 'vue'
       const msg = ref('Hello World!')
       </script>
-      `
+      `,
+      options: [['script-setup']]
     },
     {
       filename: 'test.js',
-      options: [['script-setup']],
       code: `
       import { ref, defineComponent } from 'vue'
       defineComponent({
@@ -123,11 +117,11 @@ tester.run('component-api-style', rule, {
           }
         }
       })
-      `
+      `,
+      options: [['script-setup']]
     },
     {
       filename: 'test.js',
-      options: [['script-setup']],
       code: `
       import { defineComponent } from 'vue'
       defineComponent({
@@ -139,11 +133,11 @@ tester.run('component-api-style', rule, {
         },
         // ...
       })
-      `
+      `,
+      options: [['script-setup']]
     },
     {
       filename: 'test.vue',
-      options: [['composition']],
       code: `
       <script>
       import { ref } from 'vue'
@@ -158,11 +152,11 @@ tester.run('component-api-style', rule, {
         }
       }
       </script>
-      `
+      `,
+      options: [['composition']]
     },
     {
       filename: 'test.vue',
-      options: [['composition-vue2']],
       code: `
       <script>
       import { ref } from 'vue'
@@ -180,12 +174,12 @@ tester.run('component-api-style', rule, {
         }
       }
       </script>
-      `
+      `,
+      options: [['composition-vue2']]
     },
     {
       // https://github.com/vuejs/eslint-plugin-vue/issues/1720
       filename: 'test.vue',
-      options: [['composition']],
       code: `
       <template>
         <div id="app">
@@ -209,7 +203,8 @@ tester.run('component-api-style', rule, {
           Navigation,
         },
       })
-      </script>`
+      </script>`,
+      options: [['composition']]
     }
   ],
   invalid: [
@@ -233,7 +228,9 @@ tester.run('component-api-style', rule, {
           message:
             'Options API is not allowed in your project. `data` option is part of the Options API. Use `<script setup>` or Composition API instead.',
           line: 4,
-          column: 9
+          column: 9,
+          endLine: 4,
+          endColumn: 13
         }
       ]
     },
@@ -251,7 +248,9 @@ tester.run('component-api-style', rule, {
           message:
             '`<script setup>` is not allowed in your project. Use Options API instead.',
           line: 2,
-          column: 7
+          column: 7,
+          endLine: 2,
+          endColumn: 21
         }
       ]
     },
@@ -278,7 +277,9 @@ tester.run('component-api-style', rule, {
           message:
             'Composition API is not allowed in your project. `setup` function is part of the Composition API. Use Options API instead.',
           line: 5,
-          column: 9
+          column: 9,
+          endLine: 5,
+          endColumn: 14
         }
       ]
     },
@@ -301,7 +302,9 @@ tester.run('component-api-style', rule, {
           message:
             'Options API is not allowed in your project. `data` option is part of the Options API. Use Composition API instead.',
           line: 4,
-          column: 9
+          column: 9,
+          endLine: 4,
+          endColumn: 13
         }
       ]
     },
@@ -326,7 +329,9 @@ tester.run('component-api-style', rule, {
           message:
             'Composition API is not allowed in your project. `setup` function is part of the Composition API. Use Options API instead.',
           line: 4,
-          column: 9
+          column: 9,
+          endLine: 4,
+          endColumn: 14
         }
       ]
     },
@@ -353,13 +358,14 @@ tester.run('component-api-style', rule, {
           message:
             'Composition API is not allowed in your project. Use `<script setup>` instead.',
           line: 5,
-          column: 9
+          column: 9,
+          endLine: 5,
+          endColumn: 14
         }
       ]
     },
     {
       filename: 'test.vue',
-      options: [['script-setup']],
       code: `
       <script>
       export default {
@@ -373,12 +379,15 @@ tester.run('component-api-style', rule, {
       }
       </script>
       `,
+      options: [['script-setup']],
       errors: [
         {
           message:
             'Options API is not allowed in your project. Use `<script setup>` instead.',
           line: 4,
-          column: 9
+          column: 9,
+          endLine: 4,
+          endColumn: 13
         }
       ]
     },
@@ -394,13 +403,14 @@ tester.run('component-api-style', rule, {
           message:
             '`<script setup>` is not allowed in your project. Use Composition API instead.',
           line: 2,
-          column: 7
+          column: 7,
+          endLine: 2,
+          endColumn: 21
         }
       ]
     },
     {
       filename: 'test.vue',
-      options: [['composition']],
       code: `
       <script>
       export default {
@@ -414,18 +424,20 @@ tester.run('component-api-style', rule, {
       }
       </script>
       `,
+      options: [['composition']],
       errors: [
         {
           message:
             'Options API is not allowed in your project. `data` option is part of the Options API. Use Composition API instead.',
           line: 4,
-          column: 9
+          column: 9,
+          endLine: 4,
+          endColumn: 13
         }
       ]
     },
     {
       filename: 'test.vue',
-      options: [['composition']],
       code: `
       <script>
       export default {
@@ -460,156 +472,207 @@ tester.run('component-api-style', rule, {
       }
       </script>
       `,
+      options: [['composition']],
       errors: [
         {
           message:
             'Options API is not allowed in your project. `mixins` option is part of the Options API. Use Composition API instead.',
           line: 4,
-          column: 9
+          column: 9,
+          endLine: 4,
+          endColumn: 15
         },
         {
           message:
             'Options API is not allowed in your project. `extends` option is part of the Options API. Use Composition API instead.',
           line: 5,
-          column: 9
+          column: 9,
+          endLine: 5,
+          endColumn: 16
         },
         {
           message:
             'Options API is not allowed in your project. `data` option is part of the Options API. Use Composition API instead.',
           line: 7,
-          column: 9
+          column: 9,
+          endLine: 7,
+          endColumn: 13
         },
         {
           message:
             'Options API is not allowed in your project. `computed` option is part of the Options API. Use Composition API instead.',
           line: 8,
-          column: 9
+          column: 9,
+          endLine: 8,
+          endColumn: 17
         },
         {
           message:
             'Options API is not allowed in your project. `methods` option is part of the Options API. Use Composition API instead.',
           line: 9,
-          column: 9
+          column: 9,
+          endLine: 9,
+          endColumn: 16
         },
         {
           message:
             'Options API is not allowed in your project. `watch` option is part of the Options API. Use Composition API instead.',
           line: 10,
-          column: 9
+          column: 9,
+          endLine: 10,
+          endColumn: 14
         },
         {
           message:
             'Options API is not allowed in your project. `provide` option is part of the Options API. Use Composition API instead.',
           line: 11,
-          column: 9
+          column: 9,
+          endLine: 11,
+          endColumn: 16
         },
         {
           message:
             'Options API is not allowed in your project. `inject` option is part of the Options API. Use Composition API instead.',
           line: 12,
-          column: 9
+          column: 9,
+          endLine: 12,
+          endColumn: 15
         },
         {
           message:
             'Options API is not allowed in your project. `beforeCreate` lifecycle hook is part of the Options API. Use Composition API instead.',
           line: 14,
-          column: 9
+          column: 9,
+          endLine: 14,
+          endColumn: 21
         },
         {
           message:
             'Options API is not allowed in your project. `created` lifecycle hook is part of the Options API. Use Composition API instead.',
           line: 15,
-          column: 9
+          column: 9,
+          endLine: 15,
+          endColumn: 16
         },
         {
           message:
             'Options API is not allowed in your project. `beforeMount` lifecycle hook is part of the Options API. Use Composition API instead.',
           line: 16,
-          column: 9
+          column: 9,
+          endLine: 16,
+          endColumn: 20
         },
         {
           message:
             'Options API is not allowed in your project. `mounted` lifecycle hook is part of the Options API. Use Composition API instead.',
           line: 17,
-          column: 9
+          column: 9,
+          endLine: 17,
+          endColumn: 16
         },
         {
           message:
             'Options API is not allowed in your project. `beforeUpdate` lifecycle hook is part of the Options API. Use Composition API instead.',
           line: 18,
-          column: 9
+          column: 9,
+          endLine: 18,
+          endColumn: 21
         },
         {
           message:
             'Options API is not allowed in your project. `updated` lifecycle hook is part of the Options API. Use Composition API instead.',
           line: 19,
-          column: 9
+          column: 9,
+          endLine: 19,
+          endColumn: 16
         },
         {
           message:
             'Options API is not allowed in your project. `activated` lifecycle hook is part of the Options API. Use Composition API instead.',
           line: 20,
-          column: 9
+          column: 9,
+          endLine: 20,
+          endColumn: 18
         },
         {
           message:
             'Options API is not allowed in your project. `deactivated` lifecycle hook is part of the Options API. Use Composition API instead.',
           line: 21,
-          column: 9
+          column: 9,
+          endLine: 21,
+          endColumn: 20
         },
         {
           message:
             'Options API is not allowed in your project. `beforeDestroy` lifecycle hook is part of the Options API. Use Composition API instead.',
           line: 22,
-          column: 9
+          column: 9,
+          endLine: 22,
+          endColumn: 22
         },
         {
           message:
             'Options API is not allowed in your project. `beforeUnmount` lifecycle hook is part of the Options API. Use Composition API instead.',
           line: 23,
-          column: 9
+          column: 9,
+          endLine: 23,
+          endColumn: 22
         },
         {
           message:
             'Options API is not allowed in your project. `destroyed` lifecycle hook is part of the Options API. Use Composition API instead.',
           line: 24,
-          column: 9
+          column: 9,
+          endLine: 24,
+          endColumn: 18
         },
         {
           message:
             'Options API is not allowed in your project. `unmounted` lifecycle hook is part of the Options API. Use Composition API instead.',
           line: 25,
-          column: 9
+          column: 9,
+          endLine: 25,
+          endColumn: 18
         },
         {
           message:
             'Options API is not allowed in your project. `render` function is part of the Options API. Use Composition API instead.',
           line: 26,
-          column: 9
+          column: 9,
+          endLine: 26,
+          endColumn: 15
         },
         {
           message:
             'Options API is not allowed in your project. `renderTracked` lifecycle hook is part of the Options API. Use Composition API instead.',
           line: 27,
-          column: 9
+          column: 9,
+          endLine: 27,
+          endColumn: 22
         },
         {
           message:
             'Options API is not allowed in your project. `renderTriggered` lifecycle hook is part of the Options API. Use Composition API instead.',
           line: 28,
-          column: 9
+          column: 9,
+          endLine: 28,
+          endColumn: 24
         },
         {
           message:
             'Options API is not allowed in your project. `errorCaptured` lifecycle hook is part of the Options API. Use Composition API instead.',
           line: 29,
-          column: 9
+          column: 9,
+          endLine: 29,
+          endColumn: 22
         },
         {
           message:
             'Options API is not allowed in your project. `expose` option is part of the Options API. Use Composition API instead.',
           line: 31,
-          column: 9
+          column: 9,
+          endLine: 31,
+          endColumn: 15
         }
       ]
     },
@@ -625,13 +688,14 @@ tester.run('component-api-style', rule, {
           message:
             '`<script setup>` is not allowed in your project. Use Composition API (Vue 2) instead.',
           line: 2,
-          column: 7
+          column: 7,
+          endLine: 2,
+          endColumn: 21
         }
       ]
     },
     {
       filename: 'test.vue',
-      options: [['composition-vue2']],
       code: `
       <script>
       export default {
@@ -645,18 +709,20 @@ tester.run('component-api-style', rule, {
       }
       </script>
       `,
+      options: [['composition-vue2']],
       errors: [
         {
           message:
             'Options API is not allowed in your project. `data` option is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 4,
-          column: 9
+          column: 9,
+          endLine: 4,
+          endColumn: 13
         }
       ]
     },
     {
       filename: 'test.vue',
-      options: [['composition-vue2']],
       code: `
       <script>
       export default {
@@ -691,138 +757,210 @@ tester.run('component-api-style', rule, {
       }
       </script>
       `,
+      options: [['composition-vue2']],
       errors: [
         {
           message:
             'Options API is not allowed in your project. `mixins` option is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 4,
-          column: 9
+          column: 9,
+          endLine: 4,
+          endColumn: 15
         },
         {
           message:
             'Options API is not allowed in your project. `extends` option is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 5,
-          column: 9
+          column: 9,
+          endLine: 5,
+          endColumn: 16
         },
         {
           message:
             'Options API is not allowed in your project. `data` option is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 7,
-          column: 9
+          column: 9,
+          endLine: 7,
+          endColumn: 13
         },
         {
           message:
             'Options API is not allowed in your project. `computed` option is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 8,
-          column: 9
+          column: 9,
+          endLine: 8,
+          endColumn: 17
         },
         {
           message:
             'Options API is not allowed in your project. `methods` option is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 9,
-          column: 9
+          column: 9,
+          endLine: 9,
+          endColumn: 16
         },
         {
           message:
             'Options API is not allowed in your project. `watch` option is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 10,
-          column: 9
+          column: 9,
+          endLine: 10,
+          endColumn: 14
         },
         {
           message:
             'Options API is not allowed in your project. `provide` option is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 11,
-          column: 9
+          column: 9,
+          endLine: 11,
+          endColumn: 16
         },
         {
           message:
             'Options API is not allowed in your project. `inject` option is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 12,
-          column: 9
+          column: 9,
+          endLine: 12,
+          endColumn: 15
         },
         {
           message:
             'Options API is not allowed in your project. `beforeCreate` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 14,
-          column: 9
+          column: 9,
+          endLine: 14,
+          endColumn: 21
         },
         {
           message:
             'Options API is not allowed in your project. `created` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 15,
-          column: 9
+          column: 9,
+          endLine: 15,
+          endColumn: 16
         },
         {
           message:
             'Options API is not allowed in your project. `beforeMount` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 16,
-          column: 9
+          column: 9,
+          endLine: 16,
+          endColumn: 20
         },
         {
           message:
             'Options API is not allowed in your project. `mounted` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 17,
-          column: 9
+          column: 9,
+          endLine: 17,
+          endColumn: 16
         },
         {
           message:
             'Options API is not allowed in your project. `beforeUpdate` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 18,
-          column: 9
+          column: 9,
+          endLine: 18,
+          endColumn: 21
         },
         {
           message:
             'Options API is not allowed in your project. `updated` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 19,
-          column: 9
+          column: 9,
+          endLine: 19,
+          endColumn: 16
         },
         {
           message:
             'Options API is not allowed in your project. `activated` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 20,
-          column: 9
+          column: 9,
+          endLine: 20,
+          endColumn: 18
         },
         {
           message:
             'Options API is not allowed in your project. `deactivated` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 21,
-          column: 9
+          column: 9,
+          endLine: 21,
+          endColumn: 20
         },
         {
           message:
             'Options API is not allowed in your project. `beforeDestroy` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 22,
-          column: 9
+          column: 9,
+          endLine: 22,
+          endColumn: 22
         },
         {
           message:
             'Options API is not allowed in your project. `beforeUnmount` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 23,
-          column: 9
+          column: 9,
+          endLine: 23,
+          endColumn: 22
         },
         {
           message:
             'Options API is not allowed in your project. `destroyed` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 24,
-          column: 9
+          column: 9,
+          endLine: 24,
+          endColumn: 18
         },
         {
           message:
             'Options API is not allowed in your project. `unmounted` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 25,
-          column: 9
+          column: 9,
+          endLine: 25,
+          endColumn: 18
         },
         {
           message:
             'Options API is not allowed in your project. `errorCaptured` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 29,
-          column: 9
+          column: 9,
+          endLine: 29,
+          endColumn: 22
         },
         {
           message:
             'Options API is not allowed in your project. `expose` option is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 31,
-          column: 9
+          column: 9,
+          endLine: 31,
+          endColumn: 15
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        data () {
+          return {
+            msg: 'Hello World!',
+            // ...
+          }
+        },
+        // ...
+      }
+      </script>
+      `,
+      options: [['script-setup', 'composition', 'composition-vue2']],
+      errors: [
+        {
+          message:
+            'Options API is not allowed in your project. `data` option is part of the Options API. Use `<script setup>`, Composition API or Composition API (Vue 2) instead.',
+          line: 4,
+          column: 9,
+          endLine: 4,
+          endColumn: 13
         }
       ]
     }
diff --git a/tests/lib/rules/component-definition-name-casing.js b/tests/lib/rules/component-definition-name-casing.js
index f62b7183b..94d5347d8 100644
--- a/tests/lib/rules/component-definition-name-casing.js
+++ b/tests/lib/rules/component-definition-name-casing.js
@@ -4,18 +4,10 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/component-definition-name-casing')
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
-const parserOptions = {
+const languageOptions = {
   ecmaVersion: 2018,
   sourceType: 'module'
 }
@@ -29,7 +21,7 @@ ruleTester.run('component-definition-name-casing', rule, {
         export default {
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -38,7 +30,7 @@ ruleTester.run('component-definition-name-casing', rule, {
           ...name
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -47,7 +39,7 @@ ruleTester.run('component-definition-name-casing', rule, {
           name: 'FooBar'
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -57,7 +49,7 @@ ruleTester.run('component-definition-name-casing', rule, {
         }
       `,
       options: ['PascalCase'],
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -67,92 +59,118 @@ ruleTester.run('component-definition-name-casing', rule, {
         }
       `,
       options: ['kebab-case'],
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
       code: `Vue.component('FooBar', {})`,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
       code: `Vue.component('FooBar', {})`,
       options: ['PascalCase'],
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
       code: `Vue.component('foo-bar', {})`,
       options: ['kebab-case'],
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
       code: `Vue.component(fooBar, {})`,
       options: ['kebab-case'],
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
       code: `Vue.component('FooBar', component)`,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
       code: `Vue.component('FooBar', component)`,
       options: ['PascalCase'],
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
       code: `Vue.component('foo-bar', component)`,
       options: ['kebab-case'],
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
       code: `Vue.component(fooBar, component)`,
       options: ['kebab-case'],
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
       code: `app.component('FooBar', component)`,
       options: ['PascalCase'],
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
       code: `Vue.mixin({})`,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
       code: `foo({})`,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
       code: `foo('foo-bar', {})`,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
       code: `Vue.component(\`fooBar\${foo}\`, component)`,
       options: ['kebab-case'],
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
       code: `app.component(\`fooBar\${foo}\`, component)`,
       options: ['kebab-case'],
-      parserOptions
+      languageOptions
     },
     // https://github.com/vuejs/eslint-plugin-vue/issues/1018
     {
       filename: 'test.js',
       code: `fn1(component.data)`,
-      parserOptions
+      languageOptions
+    },
+    {
+      filename: 'test.vue',
+      code: `<script setup> defineOptions({}) </script>`,
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `<script setup> defineOptions({name: 'FooBar'}) </script>`,
+      options: ['PascalCase'],
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `<script setup> defineOptions({name: 'foo-bar'}) </script>`,
+      options: ['kebab-case'],
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      }
     }
   ],
 
@@ -169,12 +187,14 @@ ruleTester.run('component-definition-name-casing', rule, {
           name: 'FooBar'
         }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Property name "foo-bar" is not PascalCase.',
-          type: 'Literal',
-          line: 3
+          line: 3,
+          column: 17,
+          endLine: 3,
+          endColumn: 26
         }
       ]
     },
@@ -186,12 +206,14 @@ ruleTester.run('component-definition-name-casing', rule, {
         }
       `,
       output: null,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Property name "foo  bar" is not PascalCase.',
-          type: 'Literal',
-          line: 3
+          line: 3,
+          column: 17,
+          endLine: 3,
+          endColumn: 27
         }
       ]
     },
@@ -203,12 +225,14 @@ ruleTester.run('component-definition-name-casing', rule, {
         }
       `,
       output: null,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Property name "foo!bar" is not PascalCase.',
-          type: 'Literal',
-          line: 3
+          line: 3,
+          column: 17,
+          endLine: 3,
+          endColumn: 26
         }
       ]
     },
@@ -220,12 +244,14 @@ ruleTester.run('component-definition-name-casing', rule, {
         })
       `,
       output: null,
-      parserOptions: { ecmaVersion: 6 },
+      languageOptions: { ecmaVersion: 6 },
       errors: [
         {
           message: 'Property name "foo!bar" is not PascalCase.',
-          type: 'Literal',
-          line: 3
+          line: 3,
+          column: 17,
+          endLine: 3,
+          endColumn: 26
         }
       ]
     },
@@ -241,12 +267,14 @@ ruleTester.run('component-definition-name-casing', rule, {
           name: 'FooBar'
         }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Property name "foo_bar" is not PascalCase.',
-          type: 'Literal',
-          line: 3
+          line: 3,
+          column: 17,
+          endLine: 3,
+          endColumn: 26
         }
       ]
     },
@@ -263,12 +291,14 @@ ruleTester.run('component-definition-name-casing', rule, {
         }
       `,
       options: ['PascalCase'],
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Property name "foo_bar" is not PascalCase.',
-          type: 'Literal',
-          line: 3
+          line: 3,
+          column: 17,
+          endLine: 3,
+          endColumn: 26
         }
       ]
     },
@@ -285,12 +315,14 @@ ruleTester.run('component-definition-name-casing', rule, {
         }
       `,
       options: ['kebab-case'],
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Property name "foo_bar" is not kebab-case.',
-          type: 'Literal',
-          line: 3
+          line: 3,
+          column: 17,
+          endLine: 3,
+          endColumn: 26
         }
       ]
     },
@@ -298,12 +330,14 @@ ruleTester.run('component-definition-name-casing', rule, {
       filename: 'test.vue',
       code: `Vue.component('foo-bar', component)`,
       output: `Vue.component('FooBar', component)`,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Property name "foo-bar" is not PascalCase.',
-          type: 'Literal',
-          line: 1
+          line: 1,
+          column: 15,
+          endLine: 1,
+          endColumn: 24
         }
       ]
     },
@@ -311,12 +345,14 @@ ruleTester.run('component-definition-name-casing', rule, {
       filename: 'test.vue',
       code: `app.component('foo-bar', component)`,
       output: `app.component('FooBar', component)`,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Property name "foo-bar" is not PascalCase.',
-          type: 'Literal',
-          line: 1
+          line: 1,
+          column: 15,
+          endLine: 1,
+          endColumn: 24
         }
       ]
     },
@@ -324,13 +360,17 @@ ruleTester.run('component-definition-name-casing', rule, {
       filename: 'test.vue',
       code: `(Vue as VueConstructor<Vue>).component('foo-bar', component)`,
       output: `(Vue as VueConstructor<Vue>).component('FooBar', component)`,
-      parserOptions,
-      parser: require.resolve('@typescript-eslint/parser'),
+      languageOptions: {
+        parser: require('@typescript-eslint/parser'),
+        ...languageOptions
+      },
       errors: [
         {
           message: 'Property name "foo-bar" is not PascalCase.',
-          type: 'Literal',
-          line: 1
+          line: 1,
+          column: 40,
+          endLine: 1,
+          endColumn: 49
         }
       ]
     },
@@ -338,12 +378,14 @@ ruleTester.run('component-definition-name-casing', rule, {
       filename: 'test.vue',
       code: `Vue.component('foo-bar', {})`,
       output: `Vue.component('FooBar', {})`,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Property name "foo-bar" is not PascalCase.',
-          type: 'Literal',
-          line: 1
+          line: 1,
+          column: 15,
+          endLine: 1,
+          endColumn: 24
         }
       ]
     },
@@ -351,12 +393,14 @@ ruleTester.run('component-definition-name-casing', rule, {
       filename: 'test.vue',
       code: `app.component('foo-bar', {})`,
       output: `app.component('FooBar', {})`,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Property name "foo-bar" is not PascalCase.',
-          type: 'Literal',
-          line: 1
+          line: 1,
+          column: 15,
+          endLine: 1,
+          endColumn: 24
         }
       ]
     },
@@ -365,12 +409,14 @@ ruleTester.run('component-definition-name-casing', rule, {
       code: `Vue.component('foo_bar', {})`,
       output: `Vue.component('FooBar', {})`,
       options: ['PascalCase'],
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Property name "foo_bar" is not PascalCase.',
-          type: 'Literal',
-          line: 1
+          line: 1,
+          column: 15,
+          endLine: 1,
+          endColumn: 24
         }
       ]
     },
@@ -379,12 +425,14 @@ ruleTester.run('component-definition-name-casing', rule, {
       code: `Vue.component('foo_bar', {})`,
       output: `Vue.component('foo-bar', {})`,
       options: ['kebab-case'],
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Property name "foo_bar" is not kebab-case.',
-          type: 'Literal',
-          line: 1
+          line: 1,
+          column: 15,
+          endLine: 1,
+          endColumn: 24
         }
       ]
     },
@@ -393,12 +441,52 @@ ruleTester.run('component-definition-name-casing', rule, {
       code: `Vue.component(\`foo_bar\`, {})`,
       output: `Vue.component(\`foo-bar\`, {})`,
       options: ['kebab-case'],
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Property name "foo_bar" is not kebab-case.',
-          type: 'TemplateLiteral',
-          line: 1
+          line: 1,
+          column: 15,
+          endLine: 1,
+          endColumn: 24
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<script setup> defineOptions({name: 'foo-bar'}) </script>`,
+      output: `<script setup> defineOptions({name: 'FooBar'}) </script>`,
+      options: ['PascalCase'],
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      },
+      errors: [
+        {
+          message: 'Property name "foo-bar" is not PascalCase.',
+          line: 1,
+          column: 37,
+          endLine: 1,
+          endColumn: 46
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<script setup> defineOptions({name: 'FooBar'}) </script>`,
+      output: `<script setup> defineOptions({name: 'foo-bar'}) </script>`,
+      options: ['kebab-case'],
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      },
+      errors: [
+        {
+          message: 'Property name "FooBar" is not kebab-case.',
+          line: 1,
+          column: 37,
+          endLine: 1,
+          endColumn: 45
         }
       ]
     }
diff --git a/tests/lib/rules/component-name-in-template-casing.js b/tests/lib/rules/component-name-in-template-casing.js
index 4c4d9f5cb..9ad24fad3 100644
--- a/tests/lib/rules/component-name-in-template-casing.js
+++ b/tests/lib/rules/component-name-in-template-casing.js
@@ -3,20 +3,12 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/component-name-in-template-casing')
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
     ecmaVersion: 2018,
     sourceType: 'module'
   }
@@ -26,6 +18,7 @@ tester.run('component-name-in-template-casing', rule, {
   valid: [
     // default
     {
+      filename: 'test.vue',
       code: `
         <template>
           <!-- ✓ GOOD -->
@@ -40,8 +33,7 @@ tester.run('component-name-in-template-casing', rule, {
           }
         }
         </script>
-      `,
-      filename: 'test.vue'
+      `
     },
 
     // element types test
@@ -93,6 +85,10 @@ tester.run('component-name-in-template-casing', rule, {
       code: '<template><circle cx="0" cy="0" :d="radius"></template>',
       options: ['PascalCase', { registeredComponentsOnly: false }]
     },
+    {
+      code: '<template><component is="div" /></template>',
+      options: ['PascalCase', { registeredComponentsOnly: false }]
+    },
 
     // kebab-case
     {
@@ -115,6 +111,10 @@ tester.run('component-name-in-template-casing', rule, {
       code: '<template><math><mspace/></math></template>',
       options: ['kebab-case', { registeredComponentsOnly: false }]
     },
+    {
+      code: '<template><component is="div" /></template>',
+      options: ['kebab-case', { registeredComponentsOnly: false }]
+    },
 
     // ignores
     {
@@ -133,6 +133,7 @@ tester.run('component-name-in-template-casing', rule, {
     },
     // regexp ignores
     {
+      filename: 'test.vue',
       code: `
         <template>
           <global-button />
@@ -140,7 +141,6 @@ tester.run('component-name-in-template-casing', rule, {
           <global-grid />
         </template>
       `,
-      filename: 'test.vue',
       options: [
         'PascalCase',
         { registeredComponentsOnly: false, ignores: ['/^global/'] }
@@ -158,20 +158,99 @@ tester.run('component-name-in-template-casing', rule, {
     },
 
     // built-in components (behave the same way as other components)
+    `
+      <template>
+        <component />
+        <suspense />
+        <teleport />
+        <client-only />
+        <keep-alive />
+      </template>
+    `,
+
+    {
+      filename: 'test.vue',
+      code: `
+        <template><div/></template>
+        <script setup>const Div = 0</script>
+      `,
+      options: ['PascalCase']
+    },
+
+    // globals
     {
       code: `
         <template>
+          <div>
+            <RouterView />
+            <RouterLink />
+          </div>
+        </template>
+      `,
+      options: ['PascalCase', { globals: ['RouterView', 'router-link'] }]
+    },
+    {
+      code: `
+        <template>
+          <div>
+            <router-view />
+            <router-link />
+          </div>
+        </template>
+      `,
+      options: ['kebab-case', { globals: ['RouterView', 'router-link'] }]
+    },
+
+    // globals with regex patterns
+    {
+      code: `
+        <template>
+          <div>
+            <c-button />
+            <c-card />
+            <c-input />
+            <other-component />
+          </div>
+        </template>
+      `,
+      options: ['kebab-case', { globals: ['/^c-/', 'other-component'] }]
+    },
+
+    // type-only imports
+
+    {
+      code: `
+        <script setup lang="ts">
+          import type Foo from './Foo.vue'
+          import type { HelloWorld1 } from './components/HelloWorld'
+          import { type HelloWorld2 } from './components/HelloWorld2'
+          import type { HelloWorld as HelloWorld3 } from './components/HelloWorld3'
+          import { type HelloWorld as HelloWorld4 } from './components/HelloWorld4';
+          import { type default as HelloWorld5 } from './components/HelloWorld5';
+          import { type Component } from 'vue';
+        </script>
+
+        <template>
+          <foo />
+          <hello-world1 />
+          <hello-world2 />
+          <hello-world3 />
+          <hello-world4 />
+          <hello-world5 />
           <component />
-          <suspense />
-          <teleport />
-          <client-only />
-          <keep-alive />
         </template>
-      `
+      `,
+      options: ['PascalCase', { registeredComponentsOnly: true }],
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
     }
   ],
   invalid: [
     {
+      filename: 'test.vue',
       code: `
         <template>
           <!-- ✗ BAD -->
@@ -187,7 +266,6 @@ tester.run('component-name-in-template-casing', rule, {
         }
         </script>
       `,
-      filename: 'test.vue',
       output: `
         <template>
           <!-- ✗ BAD -->
@@ -228,6 +306,7 @@ tester.run('component-name-in-template-casing', rule, {
       ]
     },
     {
+      filename: 'test.vue',
       code: `
         <template>
           <!-- ✗ BAD -->
@@ -243,8 +322,6 @@ tester.run('component-name-in-template-casing', rule, {
         }
         </script>
       `,
-      filename: 'test.vue',
-      options: ['kebab-case'],
       output: `
         <template>
           <!-- ✗ BAD -->
@@ -260,22 +337,33 @@ tester.run('component-name-in-template-casing', rule, {
         }
         </script>
       `,
+      options: ['kebab-case'],
       errors: [
         {
           message: 'Component name "CoolComponent" is not kebab-case.',
-          line: 4
+          line: 4,
+          column: 11,
+          endLine: 4,
+          endColumn: 25
         },
         {
           message: 'Component name "coolComponent" is not kebab-case.',
-          line: 5
+          line: 5,
+          column: 11,
+          endLine: 5,
+          endColumn: 25
         },
         {
           message: 'Component name "Cool-component" is not kebab-case.',
-          line: 6
+          line: 6,
+          column: 11,
+          endLine: 6,
+          endColumn: 26
         }
       ]
     },
     {
+      filename: 'test.vue',
       code: `
       <template>
         <svg>
@@ -288,8 +376,6 @@ tester.run('component-name-in-template-casing', rule, {
       }
       </script>
       `,
-      filename: 'test.vue',
-      options: ['PascalCase'],
       output: `
       <template>
         <svg>
@@ -302,9 +388,19 @@ tester.run('component-name-in-template-casing', rule, {
       }
       </script>
       `,
-      errors: ['Component name "the-component" is not PascalCase.']
+      options: ['PascalCase'],
+      errors: [
+        {
+          message: 'Component name "the-component" is not PascalCase.',
+          line: 4,
+          column: 11,
+          endLine: 4,
+          endColumn: 25
+        }
+      ]
     },
     {
+      filename: 'test.vue',
       code: `
       <template>
         <the-component id="id">
@@ -317,8 +413,6 @@ tester.run('component-name-in-template-casing', rule, {
       }
       </script>
       `,
-      filename: 'test.vue',
-      options: ['PascalCase'],
       output: `
       <template>
         <TheComponent id="id">
@@ -331,9 +425,19 @@ tester.run('component-name-in-template-casing', rule, {
       }
       </script>
       `,
-      errors: ['Component name "the-component" is not PascalCase.']
+      options: ['PascalCase'],
+      errors: [
+        {
+          message: 'Component name "the-component" is not PascalCase.',
+          line: 3,
+          column: 9,
+          endLine: 3,
+          endColumn: 23
+        }
+      ]
     },
     {
+      filename: 'test.vue',
       code: `
       <template>
         <the-component :is="componentName">
@@ -346,8 +450,6 @@ tester.run('component-name-in-template-casing', rule, {
       }
       </script>
       `,
-      filename: 'test.vue',
-      options: ['PascalCase'],
       output: `
       <template>
         <TheComponent :is="componentName">
@@ -360,9 +462,19 @@ tester.run('component-name-in-template-casing', rule, {
       }
       </script>
       `,
-      errors: ['Component name "the-component" is not PascalCase.']
+      options: ['PascalCase'],
+      errors: [
+        {
+          message: 'Component name "the-component" is not PascalCase.',
+          line: 3,
+          column: 9,
+          endLine: 3,
+          endColumn: 23
+        }
+      ]
     },
     {
+      filename: 'test.vue',
       code: `
       <template>
         <the-component id="id"/>
@@ -373,8 +485,6 @@ tester.run('component-name-in-template-casing', rule, {
       }
       </script>
       `,
-      filename: 'test.vue',
-      options: ['PascalCase'],
       output: `
       <template>
         <TheComponent id="id"/>
@@ -385,9 +495,19 @@ tester.run('component-name-in-template-casing', rule, {
       }
       </script>
       `,
-      errors: ['Component name "the-component" is not PascalCase.']
+      options: ['PascalCase'],
+      errors: [
+        {
+          message: 'Component name "the-component" is not PascalCase.',
+          line: 3,
+          column: 9,
+          endLine: 3,
+          endColumn: 23
+        }
+      ]
     },
     {
+      filename: 'test.vue',
       code: `
       <template>
         <TheComponent id="id">
@@ -400,8 +520,6 @@ tester.run('component-name-in-template-casing', rule, {
       }
       </script>
       `,
-      filename: 'test.vue',
-      options: ['kebab-case'],
       output: `
       <template>
         <the-component id="id">
@@ -414,7 +532,16 @@ tester.run('component-name-in-template-casing', rule, {
       }
       </script>
       `,
-      errors: ['Component name "TheComponent" is not kebab-case.']
+      options: ['kebab-case'],
+      errors: [
+        {
+          message: 'Component name "TheComponent" is not kebab-case.',
+          line: 3,
+          column: 9,
+          endLine: 3,
+          endColumn: 22
+        }
+      ]
     },
     {
       code: `
@@ -422,15 +549,24 @@ tester.run('component-name-in-template-casing', rule, {
         <TheComponent id="id"/>
       </template>
       `,
-      options: ['kebab-case', { registeredComponentsOnly: false }],
       output: `
       <template>
         <the-component id="id"/>
       </template>
       `,
-      errors: ['Component name "TheComponent" is not kebab-case.']
+      options: ['kebab-case', { registeredComponentsOnly: false }],
+      errors: [
+        {
+          message: 'Component name "TheComponent" is not kebab-case.',
+          line: 3,
+          column: 9,
+          endLine: 3,
+          endColumn: 22
+        }
+      ]
     },
     {
+      filename: 'test.vue',
       code: `
       <template>
         <the-component
@@ -442,8 +578,6 @@ tester.run('component-name-in-template-casing', rule, {
       }
       </script>
       `,
-      filename: 'test.vue',
-      options: ['PascalCase'],
       output: `
       <template>
         <TheComponent
@@ -455,9 +589,19 @@ tester.run('component-name-in-template-casing', rule, {
       }
       </script>
       `,
-      errors: ['Component name "the-component" is not PascalCase.']
+      options: ['PascalCase'],
+      errors: [
+        {
+          message: 'Component name "the-component" is not PascalCase.',
+          line: 3,
+          column: 9,
+          endLine: 3,
+          endColumn: 23
+        }
+      ]
     },
     {
+      filename: 'test.vue',
       code: `
       <template>
         <the-component/>
@@ -468,8 +612,6 @@ tester.run('component-name-in-template-casing', rule, {
       }
       </script>
       `,
-      filename: 'test.vue',
-      options: ['PascalCase'],
       output: `
       <template>
         <TheComponent/>
@@ -480,9 +622,19 @@ tester.run('component-name-in-template-casing', rule, {
       }
       </script>
       `,
-      errors: ['Component name "the-component" is not PascalCase.']
+      options: ['PascalCase'],
+      errors: [
+        {
+          message: 'Component name "the-component" is not PascalCase.',
+          line: 3,
+          column: 9,
+          endLine: 3,
+          endColumn: 23
+        }
+      ]
     },
     {
+      filename: 'test.vue',
       code: `
       <template>
         <the-component></the-component>
@@ -493,8 +645,6 @@ tester.run('component-name-in-template-casing', rule, {
       }
       </script>
       `,
-      filename: 'test.vue',
-      options: ['PascalCase'],
       output: `
       <template>
         <TheComponent></TheComponent>
@@ -505,9 +655,19 @@ tester.run('component-name-in-template-casing', rule, {
       }
       </script>
       `,
-      errors: ['Component name "the-component" is not PascalCase.']
+      options: ['PascalCase'],
+      errors: [
+        {
+          message: 'Component name "the-component" is not PascalCase.',
+          line: 3,
+          column: 9,
+          endLine: 3,
+          endColumn: 23
+        }
+      ]
     },
     {
+      filename: 'test.vue',
       code: `
       <template>
         <theComponent/>
@@ -518,8 +678,6 @@ tester.run('component-name-in-template-casing', rule, {
       }
       </script>
       `,
-      filename: 'test.vue',
-      options: ['PascalCase'],
       output: `
       <template>
         <TheComponent/>
@@ -530,9 +688,19 @@ tester.run('component-name-in-template-casing', rule, {
       }
       </script>
       `,
-      errors: ['Component name "theComponent" is not PascalCase.']
+      options: ['PascalCase'],
+      errors: [
+        {
+          message: 'Component name "theComponent" is not PascalCase.',
+          line: 3,
+          column: 9,
+          endLine: 3,
+          endColumn: 22
+        }
+      ]
     },
     {
+      filename: 'test.vue',
       code: `
       <template>
         <theComponent/>
@@ -543,8 +711,6 @@ tester.run('component-name-in-template-casing', rule, {
       }
       </script>
       `,
-      filename: 'test.vue',
-      options: ['kebab-case'],
       output: `
       <template>
         <the-component/>
@@ -555,9 +721,19 @@ tester.run('component-name-in-template-casing', rule, {
       }
       </script>
       `,
-      errors: ['Component name "theComponent" is not kebab-case.']
+      options: ['kebab-case'],
+      errors: [
+        {
+          message: 'Component name "theComponent" is not kebab-case.',
+          line: 3,
+          column: 9,
+          endLine: 3,
+          endColumn: 22
+        }
+      ]
     },
     {
+      filename: 'test.vue',
       code: `
       <template>
         <The-component/>
@@ -568,8 +744,6 @@ tester.run('component-name-in-template-casing', rule, {
       }
       </script>
       `,
-      filename: 'test.vue',
-      options: ['PascalCase'],
       output: `
       <template>
         <TheComponent/>
@@ -580,9 +754,19 @@ tester.run('component-name-in-template-casing', rule, {
       }
       </script>
       `,
-      errors: ['Component name "The-component" is not PascalCase.']
+      options: ['PascalCase'],
+      errors: [
+        {
+          message: 'Component name "The-component" is not PascalCase.',
+          line: 3,
+          column: 9,
+          endLine: 3,
+          endColumn: 23
+        }
+      ]
     },
     {
+      filename: 'test.vue',
       code: `
       <template>
         <The-component/>
@@ -593,8 +777,6 @@ tester.run('component-name-in-template-casing', rule, {
       }
       </script>
       `,
-      filename: 'test.vue',
-      options: ['kebab-case'],
       output: `
       <template>
         <the-component/>
@@ -605,7 +787,16 @@ tester.run('component-name-in-template-casing', rule, {
       }
       </script>
       `,
-      errors: ['Component name "The-component" is not kebab-case.']
+      options: ['kebab-case'],
+      errors: [
+        {
+          message: 'Component name "The-component" is not kebab-case.',
+          line: 3,
+          column: 9,
+          endLine: 3,
+          endColumn: 23
+        }
+      ]
     },
     {
       code: `
@@ -613,15 +804,24 @@ tester.run('component-name-in-template-casing', rule, {
         <Thecomponent/>
       </template>
       `,
-      options: ['kebab-case', { registeredComponentsOnly: false }],
       output: `
       <template>
         <thecomponent/>
       </template>
       `,
-      errors: ['Component name "Thecomponent" is not kebab-case.']
+      options: ['kebab-case', { registeredComponentsOnly: false }],
+      errors: [
+        {
+          message: 'Component name "Thecomponent" is not kebab-case.',
+          line: 3,
+          column: 9,
+          endLine: 3,
+          endColumn: 22
+        }
+      ]
     },
     {
+      filename: 'test.vue',
       code: `
       <template>
         <the-component></the-component  >
@@ -632,8 +832,6 @@ tester.run('component-name-in-template-casing', rule, {
       }
       </script>
       `,
-      filename: 'test.vue',
-      options: ['PascalCase'],
       output: `
       <template>
         <TheComponent></TheComponent  >
@@ -644,9 +842,19 @@ tester.run('component-name-in-template-casing', rule, {
       }
       </script>
       `,
-      errors: ['Component name "the-component" is not PascalCase.']
+      options: ['PascalCase'],
+      errors: [
+        {
+          message: 'Component name "the-component" is not PascalCase.',
+          line: 3,
+          column: 9,
+          endLine: 3,
+          endColumn: 23
+        }
+      ]
     },
     {
+      filename: 'test.vue',
       code: `
       <template>
         <the-component></the-component
@@ -658,8 +866,6 @@ tester.run('component-name-in-template-casing', rule, {
       }
       </script>
       `,
-      filename: 'test.vue',
-      options: ['PascalCase'],
       output: `
       <template>
         <TheComponent></TheComponent
@@ -671,9 +877,19 @@ tester.run('component-name-in-template-casing', rule, {
       }
       </script>
       `,
-      errors: ['Component name "the-component" is not PascalCase.']
+      options: ['PascalCase'],
+      errors: [
+        {
+          message: 'Component name "the-component" is not PascalCase.',
+          line: 3,
+          column: 9,
+          endLine: 3,
+          endColumn: 23
+        }
+      ]
     },
     {
+      filename: 'test.vue',
       code: `
       <template>
         <the-component></the-component end-tag-attr="attr" >
@@ -684,8 +900,6 @@ tester.run('component-name-in-template-casing', rule, {
       }
       </script>
       `,
-      filename: 'test.vue',
-      options: ['PascalCase'],
       output: `
       <template>
         <TheComponent></TheComponent end-tag-attr="attr" >
@@ -696,7 +910,16 @@ tester.run('component-name-in-template-casing', rule, {
       }
       </script>
       `,
-      errors: ['Component name "the-component" is not PascalCase.']
+      options: ['PascalCase'],
+      errors: [
+        {
+          message: 'Component name "the-component" is not PascalCase.',
+          line: 3,
+          column: 9,
+          endLine: 3,
+          endColumn: 23
+        }
+      ]
     },
 
     // ignores
@@ -725,8 +948,20 @@ tester.run('component-name-in-template-casing', rule, {
         }
       ],
       errors: [
-        'Component name "the-component" is not PascalCase.',
-        'Component name "the-component" is not PascalCase.'
+        {
+          message: 'Component name "the-component" is not PascalCase.',
+          line: 4,
+          column: 11,
+          endLine: 4,
+          endColumn: 25
+        },
+        {
+          message: 'Component name "the-component" is not PascalCase.',
+          line: 7,
+          column: 9,
+          endLine: 7,
+          endColumn: 23
+        }
       ]
     },
     {
@@ -754,8 +989,20 @@ tester.run('component-name-in-template-casing', rule, {
         }
       ],
       errors: [
-        'Component name "the-component" is not PascalCase.',
-        'Component name "the-component" is not PascalCase.'
+        {
+          message: 'Component name "the-component" is not PascalCase.',
+          line: 4,
+          column: 11,
+          endLine: 4,
+          endColumn: 25
+        },
+        {
+          message: 'Component name "the-component" is not PascalCase.',
+          line: 7,
+          column: 9,
+          endLine: 7,
+          endColumn: 23
+        }
       ]
     },
     {
@@ -780,10 +1027,34 @@ tester.run('component-name-in-template-casing', rule, {
         }
       ],
       errors: [
-        'Component name "foo--bar" is not kebab-case.',
-        'Component name "Foo--Bar" is not kebab-case.',
-        'Component name "FooBar" is not kebab-case.',
-        'Component name "FooBar_Baz-qux" is not kebab-case.'
+        {
+          message: 'Component name "foo--bar" is not kebab-case.',
+          line: 3,
+          column: 9,
+          endLine: 3,
+          endColumn: 18
+        },
+        {
+          message: 'Component name "Foo--Bar" is not kebab-case.',
+          line: 4,
+          column: 9,
+          endLine: 4,
+          endColumn: 18
+        },
+        {
+          message: 'Component name "FooBar" is not kebab-case.',
+          line: 5,
+          column: 9,
+          endLine: 5,
+          endColumn: 16
+        },
+        {
+          message: 'Component name "FooBar_Baz-qux" is not kebab-case.',
+          line: 6,
+          column: 9,
+          endLine: 6,
+          endColumn: 24
+        }
       ]
     },
     {
@@ -799,7 +1070,7 @@ tester.run('component-name-in-template-casing', rule, {
       `,
       output: `
         <template>
-          <Component />
+          <component />
           <Suspense />
           <Teleport />
           <ClientOnly />
@@ -808,11 +1079,317 @@ tester.run('component-name-in-template-casing', rule, {
       `,
       options: ['PascalCase', { registeredComponentsOnly: false }],
       errors: [
-        'Component name "component" is not PascalCase.',
-        'Component name "suspense" is not PascalCase.',
-        'Component name "teleport" is not PascalCase.',
-        'Component name "client-only" is not PascalCase.',
-        'Component name "keep-alive" is not PascalCase.'
+        {
+          message: 'Component name "suspense" is not PascalCase.',
+          line: 4,
+          column: 11,
+          endLine: 4,
+          endColumn: 20
+        },
+        {
+          message: 'Component name "teleport" is not PascalCase.',
+          line: 5,
+          column: 11,
+          endLine: 5,
+          endColumn: 20
+        },
+        {
+          message: 'Component name "client-only" is not PascalCase.',
+          line: 6,
+          column: 11,
+          endLine: 6,
+          endColumn: 23
+        },
+        {
+          message: 'Component name "keep-alive" is not PascalCase.',
+          line: 7,
+          column: 11,
+          endLine: 7,
+          endColumn: 22
+        }
+      ]
+    },
+    {
+      code: `
+        <template>
+          <the-component />
+        </template>
+        <script setup>
+          import TheComponent from '@/components/theComponent.vue'
+        </script>
+      `,
+      output: `
+        <template>
+          <TheComponent />
+        </template>
+        <script setup>
+          import TheComponent from '@/components/theComponent.vue'
+        </script>
+      `,
+      options: ['PascalCase'],
+      errors: [
+        {
+          message: 'Component name "the-component" is not PascalCase.',
+          line: 3,
+          column: 11,
+          endLine: 3,
+          endColumn: 25
+        }
+      ]
+    },
+    {
+      code: `
+        <template>
+          <TheComponent />
+        </template>
+        <script setup>
+          import TheComponent from '@/components/theComponent.vue'
+        </script>
+      `,
+      output: `
+        <template>
+          <the-component />
+        </template>
+        <script setup>
+          import TheComponent from '@/components/theComponent.vue'
+        </script>
+      `,
+      options: ['kebab-case'],
+      errors: [
+        {
+          message: 'Component name "TheComponent" is not kebab-case.',
+          line: 3,
+          column: 11,
+          endLine: 3,
+          endColumn: 24
+        }
+      ]
+    },
+    {
+      code: `
+        <template>
+          <router-view />
+        </template>
+      `,
+      output: `
+        <template>
+          <RouterView />
+        </template>
+      `,
+      options: ['PascalCase', { globals: ['RouterView'] }],
+      errors: [
+        {
+          message: 'Component name "router-view" is not PascalCase.',
+          line: 3,
+          column: 11,
+          endLine: 3,
+          endColumn: 23
+        }
+      ]
+    },
+    {
+      code: `
+        <template>
+          <RouterView />
+        </template>
+      `,
+      output: `
+        <template>
+          <router-view />
+        </template>
+      `,
+      options: ['kebab-case', { globals: ['RouterView'] }],
+      errors: [
+        {
+          message: 'Component name "RouterView" is not kebab-case.',
+          line: 3,
+          column: 11,
+          endLine: 3,
+          endColumn: 22
+        }
+      ]
+    },
+    {
+      code: `
+        <template>
+          <RouterView />
+        </template>
+      `,
+      output: `
+        <template>
+          <router-view />
+        </template>
+      `,
+      options: ['kebab-case', { globals: ['router-view'] }],
+      errors: [
+        {
+          message: 'Component name "RouterView" is not kebab-case.',
+          line: 3,
+          column: 11,
+          endLine: 3,
+          endColumn: 22
+        }
+      ]
+    },
+    {
+      code: `
+        <template>
+          <c-button />
+          <c-card />
+          <CInput />
+        </template>
+      `,
+      output: `
+        <template>
+          <CButton />
+          <CCard />
+          <CInput />
+        </template>
+      `,
+      options: ['PascalCase', { globals: ['/^c-/'] }],
+      errors: [
+        {
+          message: 'Component name "c-button" is not PascalCase.',
+          line: 3,
+          column: 11,
+          endLine: 3,
+          endColumn: 20
+        },
+        {
+          message: 'Component name "c-card" is not PascalCase.',
+          line: 4,
+          column: 11,
+          endLine: 4,
+          endColumn: 18
+        }
+      ]
+    },
+    {
+      code: `
+        <template>
+          <CButton />
+          <CCard />
+          <c-input />
+        </template>
+      `,
+      output: `
+        <template>
+          <c-button />
+          <c-card />
+          <c-input />
+        </template>
+      `,
+      options: ['kebab-case', { globals: ['/^C[A-Z]/', '/^c-/'] }],
+      errors: [
+        {
+          message: 'Component name "CButton" is not kebab-case.',
+          line: 3,
+          column: 11,
+          endLine: 3,
+          endColumn: 19
+        },
+        {
+          message: 'Component name "CCard" is not kebab-case.',
+          line: 4,
+          column: 11,
+          endLine: 4,
+          endColumn: 17
+        }
+      ]
+    },
+    // type-only imports
+    {
+      code: `
+        <script setup lang="ts">
+          import type Foo from './Foo.vue'
+          import type { HelloWorld1 } from './components/HelloWorld'
+          import { type HelloWorld2 } from './components/HelloWorld2'
+          import type { HelloWorld as HelloWorld3 } from './components/HelloWorld3'
+          import { type HelloWorld as HelloWorld4 } from './components/HelloWorld4';
+          import { type default as HelloWorld5 } from './components/HelloWorld5';
+          import { type Component } from 'vue';
+        </script>
+
+        <template>
+          <foo />
+          <hello-world1 />
+          <hello-world2 />
+          <hello-world3 />
+          <hello-world4 />
+          <hello-world5 />
+          <component />
+        </template>
+      `,
+      output: `
+        <script setup lang="ts">
+          import type Foo from './Foo.vue'
+          import type { HelloWorld1 } from './components/HelloWorld'
+          import { type HelloWorld2 } from './components/HelloWorld2'
+          import type { HelloWorld as HelloWorld3 } from './components/HelloWorld3'
+          import { type HelloWorld as HelloWorld4 } from './components/HelloWorld4';
+          import { type default as HelloWorld5 } from './components/HelloWorld5';
+          import { type Component } from 'vue';
+        </script>
+
+        <template>
+          <Foo />
+          <HelloWorld1 />
+          <HelloWorld2 />
+          <HelloWorld3 />
+          <HelloWorld4 />
+          <HelloWorld5 />
+          <component />
+        </template>
+      `,
+      options: ['PascalCase', { registeredComponentsOnly: false }],
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          message: 'Component name "foo" is not PascalCase.',
+          line: 13,
+          column: 11,
+          endLine: 13,
+          endColumn: 15
+        },
+        {
+          message: 'Component name "hello-world1" is not PascalCase.',
+          line: 14,
+          column: 11,
+          endLine: 14,
+          endColumn: 24
+        },
+        {
+          message: 'Component name "hello-world2" is not PascalCase.',
+          line: 15,
+          column: 11,
+          endLine: 15,
+          endColumn: 24
+        },
+        {
+          message: 'Component name "hello-world3" is not PascalCase.',
+          line: 16,
+          column: 11,
+          endLine: 16,
+          endColumn: 24
+        },
+        {
+          message: 'Component name "hello-world4" is not PascalCase.',
+          line: 17,
+          column: 11,
+          endLine: 17,
+          endColumn: 24
+        },
+        {
+          message: 'Component name "hello-world5" is not PascalCase.',
+          line: 18,
+          column: 11,
+          endLine: 18,
+          endColumn: 24
+        }
       ]
     }
   ]
diff --git a/tests/lib/rules/component-options-name-casing.js b/tests/lib/rules/component-options-name-casing.js
index 504d98b0c..da1eccf07 100644
--- a/tests/lib/rules/component-options-name-casing.js
+++ b/tests/lib/rules/component-options-name-casing.js
@@ -4,11 +4,11 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/component-options-name-casing')
 
 const tester = new RuleTester({
-  parserOptions: {
+  languageOptions: {
     ecmaVersion: 2020,
     sourceType: 'module'
   }
@@ -117,6 +117,13 @@ tester.run('component-options-name-casing', rule, {
           }
         }
       `,
+      output: `
+        export default {
+          components: {
+            FooBar: fooBar
+          }
+        }
+      `,
       errors: [
         {
           messageId: 'caseNotMatched',
@@ -126,16 +133,10 @@ tester.run('component-options-name-casing', rule, {
           },
           line: 4,
           column: 13,
+          endLine: 4,
           endColumn: 19
         }
-      ],
-      output: `
-        export default {
-          components: {
-            FooBar: fooBar
-          }
-        }
-      `
+      ]
     },
     {
       filename: 'test.vue',
@@ -146,6 +147,13 @@ tester.run('component-options-name-casing', rule, {
           }
         }
       `,
+      output: `
+        export default {
+          components: {
+            FooBar: FooBar
+          }
+        }
+      `,
       errors: [
         {
           messageId: 'caseNotMatched',
@@ -155,16 +163,10 @@ tester.run('component-options-name-casing', rule, {
           },
           line: 4,
           column: 13,
+          endLine: 4,
           endColumn: 19
         }
-      ],
-      output: `
-        export default {
-          components: {
-            FooBar: FooBar
-          }
-        }
-      `
+      ]
     },
     {
       filename: 'test.vue',
@@ -175,6 +177,13 @@ tester.run('component-options-name-casing', rule, {
           }
         }
       `,
+      output: `
+        export default {
+          components: {
+            FooBar: fooBar
+          }
+        }
+      `,
       options: ['PascalCase'],
       errors: [
         {
@@ -185,16 +194,10 @@ tester.run('component-options-name-casing', rule, {
           },
           line: 4,
           column: 13,
+          endLine: 4,
           endColumn: 19
         }
-      ],
-      output: `
-        export default {
-          components: {
-            FooBar: fooBar
-          }
-        }
-      `
+      ]
     },
     {
       filename: 'test.vue',
@@ -205,6 +208,13 @@ tester.run('component-options-name-casing', rule, {
           }
         }
       `,
+      output: `
+        export default {
+          components: {
+            FooBar: FooBar
+          }
+        }
+      `,
       options: ['PascalCase'],
       errors: [
         {
@@ -215,16 +225,10 @@ tester.run('component-options-name-casing', rule, {
           },
           line: 4,
           column: 13,
+          endLine: 4,
           endColumn: 19
         }
-      ],
-      output: `
-        export default {
-          components: {
-            FooBar: FooBar
-          }
-        }
-      `
+      ]
     },
     {
       filename: 'test.vue',
@@ -235,6 +239,13 @@ tester.run('component-options-name-casing', rule, {
           }
         }
       `,
+      output: `
+        export default {
+          components: {
+            FooBar: FooBar
+          }
+        }
+      `,
       options: ['PascalCase'],
       errors: [
         {
@@ -245,16 +256,10 @@ tester.run('component-options-name-casing', rule, {
           },
           line: 4,
           column: 13,
+          endLine: 4,
           endColumn: 22
         }
-      ],
-      output: `
-        export default {
-          components: {
-            FooBar: FooBar
-          }
-        }
-      `
+      ]
     },
     {
       filename: 'test.vue',
@@ -265,6 +270,7 @@ tester.run('component-options-name-casing', rule, {
           }
         }
       `,
+      output: null,
       options: ['camelCase'],
       errors: [
         {
@@ -275,6 +281,7 @@ tester.run('component-options-name-casing', rule, {
           },
           line: 4,
           column: 13,
+          endLine: 4,
           endColumn: 19,
           suggestions: [
             {
@@ -290,8 +297,7 @@ tester.run('component-options-name-casing', rule, {
             }
           ]
         }
-      ],
-      output: null
+      ]
     },
     {
       filename: 'test.vue',
@@ -302,6 +308,7 @@ tester.run('component-options-name-casing', rule, {
           }
         }
       `,
+      output: null,
       options: ['camelCase'],
       errors: [
         {
@@ -312,6 +319,7 @@ tester.run('component-options-name-casing', rule, {
           },
           line: 4,
           column: 13,
+          endLine: 4,
           endColumn: 19,
           suggestions: [
             {
@@ -327,8 +335,7 @@ tester.run('component-options-name-casing', rule, {
             }
           ]
         }
-      ],
-      output: null
+      ]
     },
     {
       filename: 'test.vue',
@@ -339,6 +346,7 @@ tester.run('component-options-name-casing', rule, {
           }
         }
       `,
+      output: null,
       options: ['camelCase'],
       errors: [
         {
@@ -349,6 +357,7 @@ tester.run('component-options-name-casing', rule, {
           },
           line: 4,
           column: 13,
+          endLine: 4,
           endColumn: 22,
           suggestions: [
             {
@@ -364,8 +373,7 @@ tester.run('component-options-name-casing', rule, {
             }
           ]
         }
-      ],
-      output: null
+      ]
     },
     {
       filename: 'test.vue',
@@ -376,6 +384,7 @@ tester.run('component-options-name-casing', rule, {
           }
         }
       `,
+      output: null,
       options: ['kebab-case'],
       errors: [
         {
@@ -386,6 +395,7 @@ tester.run('component-options-name-casing', rule, {
           },
           line: 4,
           column: 13,
+          endLine: 4,
           endColumn: 19,
           suggestions: [
             {
@@ -401,8 +411,7 @@ tester.run('component-options-name-casing', rule, {
             }
           ]
         }
-      ],
-      output: null
+      ]
     },
     {
       filename: 'test.vue',
@@ -413,6 +422,7 @@ tester.run('component-options-name-casing', rule, {
           }
         }
       `,
+      output: null,
       options: ['kebab-case'],
       errors: [
         {
@@ -423,6 +433,7 @@ tester.run('component-options-name-casing', rule, {
           },
           line: 4,
           column: 13,
+          endLine: 4,
           endColumn: 19,
           suggestions: [
             {
@@ -438,8 +449,7 @@ tester.run('component-options-name-casing', rule, {
             }
           ]
         }
-      ],
-      output: null
+      ]
     },
     {
       filename: 'test.vue',
@@ -450,6 +460,7 @@ tester.run('component-options-name-casing', rule, {
           }
         }
       `,
+      output: null,
       options: ['kebab-case'],
       errors: [
         {
@@ -460,6 +471,7 @@ tester.run('component-options-name-casing', rule, {
           },
           line: 4,
           column: 13,
+          endLine: 4,
           endColumn: 19,
           suggestions: [
             {
@@ -475,8 +487,7 @@ tester.run('component-options-name-casing', rule, {
             }
           ]
         }
-      ],
-      output: null
+      ]
     },
     {
       filename: 'test.vue',
@@ -487,6 +498,7 @@ tester.run('component-options-name-casing', rule, {
           }
         }
       `,
+      output: null,
       options: ['kebab-case'],
       errors: [
         {
@@ -497,6 +509,7 @@ tester.run('component-options-name-casing', rule, {
           },
           line: 4,
           column: 13,
+          endLine: 4,
           endColumn: 19,
           suggestions: [
             {
@@ -512,8 +525,7 @@ tester.run('component-options-name-casing', rule, {
             }
           ]
         }
-      ],
-      output: null
+      ]
     },
     {
       filename: 'test.vue',
@@ -525,6 +537,7 @@ tester.run('component-options-name-casing', rule, {
           }
         }
       `,
+      output: null,
       options: ['kebab-case'],
       errors: [
         {
@@ -535,6 +548,7 @@ tester.run('component-options-name-casing', rule, {
           },
           line: 4,
           column: 13,
+          endLine: 4,
           endColumn: 19,
           suggestions: [
             {
@@ -551,8 +565,7 @@ tester.run('component-options-name-casing', rule, {
             }
           ]
         }
-      ],
-      output: null
+      ]
     }
   ]
 })
diff --git a/tests/lib/rules/custom-event-name-casing.js b/tests/lib/rules/custom-event-name-casing.js
index 8ad20377e..9a0668206 100644
--- a/tests/lib/rules/custom-event-name-casing.js
+++ b/tests/lib/rules/custom-event-name-casing.js
@@ -4,12 +4,12 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/custom-event-name-casing')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
     ecmaVersion: 2020,
     sourceType: 'module'
   }
@@ -237,18 +237,6 @@ tester.run('custom-event-name-casing', rule, {
       ]
     },
 
-    // For backward compatibility
-    {
-      filename: 'test.vue',
-      code: `
-      <template>
-        <input
-          @click="$emit('fooBar')">
-      </template>
-      `,
-      options: [{ ignores: ['fooBar'] }]
-    },
-
     // camelCase
     {
       filename: 'test.vue',
@@ -329,6 +317,22 @@ tester.run('custom-event-name-casing', rule, {
       </script>
       `,
       options: ['kebab-case']
+    },
+    // setup defineEmits
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const emit = defineEmits({})
+      emit('foo-bar')
+      </script>
+
+      <template>
+      <button @click="emit('foo-bar')">Foo</button>
+      <button @click="$emit('foo-bar')">Foo</button>
+      </template>
+      `,
+      options: ['kebab-case']
     }
   ],
   invalid: [
@@ -407,9 +411,27 @@ tester.run('custom-event-name-casing', rule, {
       `,
       options: ['kebab-case'],
       errors: [
-        "Custom event name 'fooBar' must be kebab-case.",
-        "Custom event name 'barBaz' must be kebab-case.",
-        "Custom event name 'bazQux' must be kebab-case."
+        {
+          message: "Custom event name 'fooBar' must be kebab-case.",
+          line: 4,
+          column: 27,
+          endLine: 4,
+          endColumn: 35
+        },
+        {
+          message: "Custom event name 'barBaz' must be kebab-case.",
+          line: 11,
+          column: 31,
+          endLine: 11,
+          endColumn: 39
+        },
+        {
+          message: "Custom event name 'bazQux' must be kebab-case.",
+          line: 17,
+          column: 27,
+          endLine: 17,
+          endColumn: 35
+        }
       ]
     },
     {
@@ -438,9 +460,27 @@ tester.run('custom-event-name-casing', rule, {
       `,
       options: ['kebab-case'],
       errors: [
-        "Custom event name 'fooBar' must be kebab-case.",
-        "Custom event name 'barBaz' must be kebab-case.",
-        "Custom event name 'bazQux' must be kebab-case."
+        {
+          message: "Custom event name 'fooBar' must be kebab-case.",
+          line: 4,
+          column: 27,
+          endLine: 4,
+          endColumn: 35
+        },
+        {
+          message: "Custom event name 'barBaz' must be kebab-case.",
+          line: 11,
+          column: 33,
+          endLine: 11,
+          endColumn: 41
+        },
+        {
+          message: "Custom event name 'bazQux' must be kebab-case.",
+          line: 17,
+          column: 29,
+          endLine: 17,
+          endColumn: 37
+        }
       ]
     },
     {
@@ -472,9 +512,27 @@ tester.run('custom-event-name-casing', rule, {
         { ignores: ['/^[a-z]+(?:-[a-z]+)*:[a-z]+(?:-[a-z]+)*$/u'] }
       ],
       errors: [
-        "Custom event name 'input/update' must be kebab-case.",
-        "Custom event name 'search/update' must be kebab-case.",
-        "Custom event name 'click/row' must be kebab-case."
+        {
+          message: "Custom event name 'input/update' must be kebab-case.",
+          line: 4,
+          column: 25,
+          endLine: 4,
+          endColumn: 39
+        },
+        {
+          message: "Custom event name 'search/update' must be kebab-case.",
+          line: 11,
+          column: 28,
+          endLine: 11,
+          endColumn: 43
+        },
+        {
+          message: "Custom event name 'click/row' must be kebab-case.",
+          line: 17,
+          column: 24,
+          endLine: 17,
+          endColumn: 35
+        }
       ]
     },
     {
@@ -506,9 +564,27 @@ tester.run('custom-event-name-casing', rule, {
         { ignores: ['input:update', 'search:update', 'click:row'] }
       ],
       errors: [
-        "Custom event name 'input/update' must be kebab-case.",
-        "Custom event name 'search/update' must be kebab-case.",
-        "Custom event name 'click/row' must be kebab-case."
+        {
+          message: "Custom event name 'input/update' must be kebab-case.",
+          line: 4,
+          column: 25,
+          endLine: 4,
+          endColumn: 39
+        },
+        {
+          message: "Custom event name 'search/update' must be kebab-case.",
+          line: 11,
+          column: 28,
+          endLine: 11,
+          endColumn: 43
+        },
+        {
+          message: "Custom event name 'click/row' must be kebab-case.",
+          line: 17,
+          column: 24,
+          endLine: 17,
+          endColumn: 35
+        }
       ]
     },
     // camelCase
@@ -538,9 +614,27 @@ tester.run('custom-event-name-casing', rule, {
       `,
       options: ['camelCase'],
       errors: [
-        "Custom event name 'foo-bar' must be camelCase.",
-        "Custom event name 'bar-baz' must be camelCase.",
-        "Custom event name 'baz-qux' must be camelCase."
+        {
+          message: "Custom event name 'foo-bar' must be camelCase.",
+          line: 4,
+          column: 25,
+          endLine: 4,
+          endColumn: 34
+        },
+        {
+          message: "Custom event name 'bar-baz' must be camelCase.",
+          line: 11,
+          column: 28,
+          endLine: 11,
+          endColumn: 37
+        },
+        {
+          message: "Custom event name 'baz-qux' must be camelCase.",
+          line: 17,
+          column: 24,
+          endLine: 17,
+          endColumn: 33
+        }
       ]
     },
     // Default
@@ -569,56 +663,102 @@ tester.run('custom-event-name-casing', rule, {
       </script>
       `,
       errors: [
-        "Custom event name 'foo-bar' must be camelCase.",
-        "Custom event name 'bar-baz' must be camelCase.",
-        "Custom event name 'baz-qux' must be camelCase."
+        {
+          message: "Custom event name 'foo-bar' must be camelCase.",
+          line: 4,
+          column: 25,
+          endLine: 4,
+          endColumn: 34
+        },
+        {
+          message: "Custom event name 'bar-baz' must be camelCase.",
+          line: 11,
+          column: 28,
+          endLine: 11,
+          endColumn: 37
+        },
+        {
+          message: "Custom event name 'baz-qux' must be camelCase.",
+          line: 17,
+          column: 24,
+          endLine: 17,
+          endColumn: 33
+        }
       ]
     },
     // kebab-case
     {
       filename: 'test.vue',
       code: `
-      <template>
-        <input
-          @click="$emit('fooBar')">
-      </template>
-      <script>
-      export default {
-        setup(props, context) {
-          return {
-            onInput(value) {
-              context.emit('barBaz')
-            }
-          }
-        },
-        methods: {
-          onClick() {
-            this.$emit('bazQux')
-          }
+      <script setup>
+      const emit = defineEmits({})
+      emit('fooBar')
+      emit('foo-bar')
+      </script>
+      `,
+      errors: [
+        {
+          message: "Custom event name 'foo-bar' must be camelCase.",
+          line: 5,
+          column: 12,
+          endLine: 5,
+          endColumn: 21
         }
-      }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const emit = defineEmits({})
+      emit(\`foo-bar\`) // template literal
       </script>
       `,
-      options: ['kebab-case'],
       errors: [
-        "Custom event name 'fooBar' must be kebab-case.",
-        "Custom event name 'barBaz' must be kebab-case.",
-        "Custom event name 'bazQux' must be kebab-case."
+        {
+          message: "Custom event name 'foo-bar' must be camelCase.",
+          line: 4,
+          column: 12,
+          endLine: 4,
+          endColumn: 21
+        }
       ]
     },
     {
+      // https://github.com/vuejs/eslint-plugin-vue/issues/2577
       filename: 'test.vue',
       code: `
       <script setup>
       const emit = defineEmits({})
-      emit('fooBar')
       emit('foo-bar')
       </script>
+
+      <template>
+      <button @click="emit('foo-bar')">Foo</button>
+      <button @click="$emit('foo-bar')">Foo</button>
+      </template>
       `,
       errors: [
         {
           message: "Custom event name 'foo-bar' must be camelCase.",
-          line: 5
+          line: 4,
+          column: 12,
+          endLine: 4,
+          endColumn: 21
+        },
+        {
+          message: "Custom event name 'foo-bar' must be camelCase.",
+          line: 8,
+          column: 28,
+          endLine: 8,
+          endColumn: 37
+        },
+        {
+          message: "Custom event name 'foo-bar' must be camelCase.",
+          line: 9,
+          column: 29,
+          endLine: 9,
+          endColumn: 38
         }
       ]
     }
diff --git a/tests/lib/rules/define-emits-declaration.js b/tests/lib/rules/define-emits-declaration.js
new file mode 100644
index 000000000..417ac8944
--- /dev/null
+++ b/tests/lib/rules/define-emits-declaration.js
@@ -0,0 +1,313 @@
+/**
+ * @author Amorites
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/define-emits-declaration')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('define-emits-declaration', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>
+          const emit = defineEmits(['change', 'update'])
+        </script>
+       `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+        const emit = defineEmits<{
+          (e: 'change', id: number): void
+          (e: 'update', value: string): void
+        }>()
+        </script>
+       `,
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+        const emit = defineEmits<{
+          (e: 'change', id: number): void
+          (e: 'update', value: string): void
+        }>()
+        </script>
+       `,
+      options: ['type-based'],
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+       <script setup lang="ts">
+       const emit = defineEmits(['change', 'update'])
+       </script>
+       `,
+      options: ['runtime']
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+        const emit = defineEmits<{
+          change: [id: number]
+          update: [value: string]
+        }>()
+        </script>
+       `,
+      options: ['type-based'],
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+        const emit = defineEmits<{
+          change: [id: number]
+          update: [value: string]
+        }>()
+        </script>
+       `,
+      options: ['type-literal'],
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
+    },
+    {
+      filename: 'test.vue',
+      // ignore code without defineEmits
+      code: `
+        <script setup lang="ts">
+        const props = defineProps({
+          kind: { type: String },
+        })
+        </script>
+       `,
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+         <script lang="ts">
+         import { PropType } from 'vue'
+
+         export default {
+           props: {
+             kind: { type: String as PropType<'primary' | 'secondary'> },
+           },
+           emits: ['check']
+         }
+         </script>
+       `,
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+       <script setup lang="ts">
+       const emit = defineEmits(['change', 'update'])
+       </script>
+       `,
+      errors: [
+        {
+          message: 'Use type based declaration instead of runtime declaration.',
+          line: 3,
+          column: 21,
+          endLine: 3,
+          endColumn: 54
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+       <script setup lang="ts">
+       const emit = defineEmits(['change', 'update'])
+       </script>
+       `,
+      options: ['type-based'],
+      errors: [
+        {
+          message: 'Use type based declaration instead of runtime declaration.',
+          line: 3,
+          column: 21,
+          endLine: 3,
+          endColumn: 54
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+       <script setup lang="ts">
+       const emit = defineEmits(['change', 'update'])
+       </script>
+       `,
+      options: ['type-literal'],
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          message: 'Use type based declaration instead of runtime declaration.',
+          line: 3,
+          column: 21,
+          endLine: 3,
+          endColumn: 54
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+        const emit = defineEmits<{
+          (e: 'change', id: number): void
+          (e: 'update', value: string): void
+        }>()
+        </script>
+       `,
+      options: ['runtime'],
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          message: 'Use runtime declaration instead of type based declaration.',
+          line: 3,
+          column: 22,
+          endLine: 6,
+          endColumn: 13
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+        const emit = defineEmits<{
+          (e: 'change', id: number): void
+          (e: 'update', value: string): void
+        }>()
+        </script>
+       `,
+      options: ['type-literal'],
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          message:
+            'Use new type literal declaration instead of the old call signature declaration.',
+          line: 4,
+          column: 11,
+          endLine: 4,
+          endColumn: 42
+        },
+        {
+          message:
+            'Use new type literal declaration instead of the old call signature declaration.',
+          line: 5,
+          column: 11,
+          endLine: 5,
+          endColumn: 45
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+        const emit = defineEmits<{
+          'change': [id: number]
+          (e: 'update', value: string): void
+        }>()
+        </script>
+       `,
+      options: ['type-literal'],
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          message:
+            'Use new type literal declaration instead of the old call signature declaration.',
+          line: 5,
+          column: 11,
+          endLine: 5,
+          endColumn: 45
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+        const emit = defineEmits<(e: 'change', id: number) => void>()
+        </script>
+        `,
+      options: ['type-literal'],
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          message:
+            'Use new type literal declaration instead of the old call signature declaration.',
+          line: 3,
+          column: 34,
+          endLine: 3,
+          endColumn: 67
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/define-macros-order.js b/tests/lib/rules/define-macros-order.js
index 90e6748d6..886acd68c 100644
--- a/tests/lib/rules/define-macros-order.js
+++ b/tests/lib/rules/define-macros-order.js
@@ -4,12 +4,12 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/define-macros-order')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
     ecmaVersion: 2020,
     sourceType: 'module'
   }
@@ -27,10 +27,26 @@ const optionsPropsFirst = [
   }
 ]
 
-function message(macro) {
-  return `${macro} should be the first statement in \`<script setup>\` (after any potential import statements or type definitions).`
+const optionsExposeLast = [
+  {
+    defineExposeLast: true
+  }
+]
+
+function notAtTopMessage(macro) {
+  return `${macro} should be placed at the top of \`<script setup>\` (after any potential import statements or type definitions).`
 }
 
+function unorderedMessage(macro, before) {
+  return `${macro} should be above ${before}.`
+}
+
+const defineExposeNotTheLast =
+  '`defineExpose` should be the last statement in `<script setup>`.'
+
+const putExposeAtBottom =
+  'Put `defineExpose` as the last statement in `<script setup>`.'
+
 tester.run('define-macros-order', rule, {
   valid: [
     {
@@ -58,8 +74,10 @@ tester.run('define-macros-order', rule, {
           console.log('test')
         </script>
       `,
-      parserOptions: {
-        parser: require.resolve('@typescript-eslint/parser')
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
       }
     },
     {
@@ -106,6 +124,219 @@ tester.run('define-macros-order', rule, {
         </script>
       `,
       options: optionsEmitsFirst
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+          import { bar } from 'foo'
+          declare global {}
+          declare namespace Namespace {}
+          declare const foo: string
+          declare function bar(): void
+          export interface Props {
+            msg?: string
+            labels?: string[]
+          }
+          defineEmits(['update:test'])
+          const props = withDefaults(defineProps<Props>(), {
+            msg: 'hello',
+            labels: () => ['one', 'two']
+          })
+          console.log('test')
+        </script>
+      `,
+      options: optionsEmitsFirst,
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>
+          'use strict';
+          defineProps({
+            test: Boolean
+          })
+          defineEmits(['update:test'])
+        </script>
+      `,
+      options: optionsPropsFirst
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>
+          import Foo from 'foo'
+          /** options */
+          defineOptions({})
+          /** model */
+          const model = defineModel()
+          /** emits */
+          defineEmits(['update:foo'])
+          /** props */
+          const props = defineProps(['foo'])
+          /** slots */
+          const slots = defineSlots()
+          console.log('test1')
+        </script>
+      `,
+      options: [
+        {
+          order: [
+            'defineOptions',
+            'defineModel',
+            'defineEmits',
+            'defineProps',
+            'defineSlots'
+          ]
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>
+          import Foo from 'foo'
+          /** Page */
+          definePage()
+          /** model */
+          const model = defineModel()
+          /** emits */
+          defineEmits(['update:foo'])
+        </script>
+      `,
+      options: [
+        {
+          order: ['definePage', 'defineModel', 'defineEmits']
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>
+          import Foo from 'foo'
+          /** model */
+          const model = defineModel()
+          /** emits */
+          defineEmits(['update:foo'])
+
+          function fn() {
+            definePage()
+          }
+        </script>
+      `,
+      options: [
+        {
+          order: ['definePage', 'defineModel', 'defineEmits']
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>
+          import Foo from 'foo'
+          /** model */
+          const model = defineModel()
+          /** emits */
+          defineEmits(['update:foo'])
+
+          const val = () => definePage()
+        </script>
+      `,
+      options: [
+        {
+          order: ['definePage', 'defineModel', 'defineEmits']
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>
+          import Foo from 'foo'
+          /** props */
+          defineProps(['foo'])
+          /** options */
+          defineOptions({})
+          /** expose */
+          defineExpose({})
+        </script>
+      `,
+      options: optionsExposeLast
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+          import Foo from 'foo'
+          /** props */
+          const props = defineProps({
+            test: Boolean
+          })
+          /** emits */
+          defineEmits(['update:foo'])
+          /** slots */
+          const slots = defineSlots()
+          /** expose */
+          defineExpose({})
+        </script>
+      `,
+      options: [
+        {
+          order: ['defineProps', 'defineEmits'],
+          defineExposeLast: true
+        }
+      ],
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>
+          const first = defineModel('first')
+          const second = defineModel('second')
+
+          const slots = defineSlots()
+        </script>
+      `,
+      options: [
+        {
+          order: ['defineModel', 'defineSlots']
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>
+        const page = definePage()
+
+        const first = defineModel('first')
+        const second = defineModel('second')
+        </script>
+      `,
+      options: [
+        {
+          order: ['definePage', 'defineModel']
+        }
+      ]
     }
   ],
   invalid: [
@@ -128,8 +359,11 @@ tester.run('define-macros-order', rule, {
       options: optionsEmitsFirst,
       errors: [
         {
-          message: message('defineEmits'),
-          line: 5
+          message: notAtTopMessage('defineEmits'),
+          line: 5,
+          column: 11,
+          endLine: 5,
+          endColumn: 39
         }
       ]
     },
@@ -164,8 +398,11 @@ tester.run('define-macros-order', rule, {
       options: optionsPropsFirst,
       errors: [
         {
-          message: message('defineProps'),
-          line: 8
+          message: notAtTopMessage('defineProps'),
+          line: 8,
+          column: 11,
+          endLine: 10,
+          endColumn: 13
         }
       ]
     },
@@ -197,8 +434,11 @@ tester.run('define-macros-order', rule, {
       options: optionsPropsFirst,
       errors: [
         {
-          message: message('defineProps'),
-          line: 6
+          message: unorderedMessage('defineProps', 'defineEmits'),
+          line: 6,
+          column: 11,
+          endLine: 8,
+          endColumn: 13
         }
       ]
     },
@@ -229,8 +469,48 @@ tester.run('define-macros-order', rule, {
       options: optionsEmitsFirst,
       errors: [
         {
-          message: message('defineEmits'),
-          line: 8
+          message: notAtTopMessage('defineEmits'),
+          line: 8,
+          column: 11,
+          endLine: 8,
+          endColumn: 52
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>
+          console.log('test1')
+          const props = defineProps({
+            test: Boolean
+          })
+          console.log('test2')
+          const page = definePage({
+            name: 'hello'
+          })
+        </script>
+      `,
+      output: `
+        <script setup>
+          const page = definePage({
+            name: 'hello'
+          })
+          const props = defineProps({
+            test: Boolean
+          })
+          console.log('test1')
+          console.log('test2')
+        </script>
+      `,
+      options: [{ order: ['definePage', 'defineProps'] }],
+      errors: [
+        {
+          message: notAtTopMessage('definePage'),
+          line: 8,
+          column: 11,
+          endLine: 10,
+          endColumn: 13
         }
       ]
     },
@@ -264,14 +544,77 @@ tester.run('define-macros-order', rule, {
           })
         </script>
       `,
-      parserOptions: {
-        parser: require.resolve('@typescript-eslint/parser')
-      },
       options: optionsEmitsFirst,
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          message: unorderedMessage('defineEmits', 'defineProps'),
+          line: 12,
+          column: 11,
+          endLine: 12,
+          endColumn: 65
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script lang="ts" setup>
+          interface Props {
+            msg?: string
+            labels?: string[]
+          }
+
+          const props = defineProps<{
+            msg?: string
+            labels?: string[]
+          }>()
+          defineCustom()
+          const emit = defineEmits<{(e: 'update:test'): void}>()
+
+          const page = definePage({
+            name: 'hello'
+          })
+        </script>
+      `,
+      output: `
+        <script lang="ts" setup>
+          interface Props {
+            msg?: string
+            labels?: string[]
+          }
+
+          const page = definePage({
+            name: 'hello'
+          })
+          defineCustom()
+          const props = defineProps<{
+            msg?: string
+            labels?: string[]
+          }>()
+          const emit = defineEmits<{(e: 'update:test'): void}>()
+
+        </script>
+      `,
+      options: [
+        { order: ['definePage', 'defineCustom', 'defineProps', 'defineEmits'] }
+      ],
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
       errors: [
         {
-          message: message('defineEmits'),
-          line: 12
+          message: unorderedMessage('definePage', 'defineProps'),
+          line: 15,
+          column: 11,
+          endLine: 17,
+          endColumn: 13
         }
       ]
     },
@@ -301,13 +644,18 @@ tester.run('define-macros-order', rule, {
           interface SomeOtherInterface {};
         </script>
       `,
-      parserOptions: {
-        parser: require.resolve('@typescript-eslint/parser')
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
       },
       errors: [
         {
-          message: message('defineProps'),
-          line: 10
+          message: notAtTopMessage('defineProps'),
+          line: 10,
+          column: 11,
+          endLine: 10,
+          endColumn: 42
         }
       ]
     },
@@ -353,14 +701,19 @@ tester.run('define-macros-order', rule, {
           console.log('test3')
         </script>
       `,
-      parserOptions: {
-        parser: require.resolve('@typescript-eslint/parser')
-      },
       options: optionsEmitsFirst,
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
       errors: [
         {
-          message: message('defineEmits'),
-          line: 16
+          message: notAtTopMessage('defineEmits'),
+          line: 16,
+          column: 11,
+          endLine: 16,
+          endColumn: 59
         }
       ]
     },
@@ -378,8 +731,33 @@ tester.run('define-macros-order', rule, {
       options: optionsEmitsFirst,
       errors: [
         {
-          message: message('defineEmits'),
-          line: 3
+          message: unorderedMessage('defineEmits', 'defineProps'),
+          line: 3,
+          column: 56,
+          endLine: 3,
+          endColumn: 84
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>
+          const props = defineProps({ test: Boolean });definePage({name: 'hello'})
+        </script>
+      `,
+      output: `
+        <script setup>
+          definePage({name: 'hello'});const props = defineProps({ test: Boolean });        </script>
+      `,
+      options: [{ order: ['definePage', 'defineProps'] }],
+      errors: [
+        {
+          message: unorderedMessage('definePage', 'defineProps'),
+          line: 3,
+          column: 56,
+          endLine: 3,
+          endColumn: 83
         }
       ]
     },
@@ -413,8 +791,11 @@ tester.run('define-macros-order', rule, {
       `,
       errors: [
         {
-          message: message('defineProps'),
-          line: 11
+          message: unorderedMessage('defineProps', 'defineEmits'),
+          line: 11,
+          column: 11,
+          endLine: 11,
+          endColumn: 56
         }
       ]
     },
@@ -428,8 +809,498 @@ tester.run('define-macros-order', rule, {
       `,
       errors: [
         {
-          message: message('defineProps'),
-          line: 2
+          message: unorderedMessage('defineProps', 'defineEmits'),
+          line: 2,
+          column: 52,
+          endLine: 2,
+          endColumn: 82
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>
+          console.log('test1')
+          defineProps({ test: Boolean })
+        </script>
+      `,
+      output: `
+        <script setup>
+          defineProps({ test: Boolean })
+          console.log('test1')
+        </script>
+      `,
+      options: optionsEmitsFirst,
+      errors: [
+        {
+          message: notAtTopMessage('defineProps'),
+          line: 4,
+          column: 11,
+          endLine: 4,
+          endColumn: 41
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>
+          defineEmits(['update:test'])
+          console.log('test1')
+          defineProps({ test: Boolean })
+        </script>
+      `,
+      output: `
+        <script setup>
+          defineEmits(['update:test'])
+          defineProps({ test: Boolean })
+          console.log('test1')
+        </script>
+      `,
+      options: optionsEmitsFirst,
+      errors: [
+        {
+          message: notAtTopMessage('defineProps'),
+          line: 5,
+          column: 11,
+          endLine: 5,
+          endColumn: 41
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>
+          definePage({name: 'hello'})
+          console.log('test1')
+          defineCustom({ test: Boolean })
+        </script>
+      `,
+      output: `
+        <script setup>
+          defineCustom({ test: Boolean })
+          definePage({name: 'hello'})
+          console.log('test1')
+        </script>
+      `,
+      options: [{ order: ['defineCustom', 'definePage'] }],
+      errors: [
+        {
+          message: unorderedMessage('defineCustom', 'definePage'),
+          line: 5,
+          column: 11,
+          endLine: 5,
+          endColumn: 42
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>
+          definePage({name: 'hello'})
+          console.log('test1')
+          const custom = defineCustom({ test: Boolean })
+        </script>
+      `,
+      output: `
+        <script setup>
+          const custom = defineCustom({ test: Boolean })
+          definePage({name: 'hello'})
+          console.log('test1')
+        </script>
+      `,
+      options: [{ order: ['defineCustom', 'definePage'] }],
+      errors: [
+        {
+          message: unorderedMessage('defineCustom', 'definePage'),
+          line: 5,
+          column: 11,
+          endLine: 5,
+          endColumn: 57
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>
+          import Foo from 'foo'
+          console.log('test1')
+          /** emits */
+          defineEmits(['update:foo'])
+          /** props */
+          const props = defineProps(['foo'])
+          /** slots */
+          const slots = defineSlots()
+          /** options */
+          defineOptions({})
+          /** model */
+          const model = defineModel()
+        </script>
+      `,
+      output: `
+        <script setup>
+          import Foo from 'foo'
+          /** options */
+          defineOptions({})
+          /** model */
+          const model = defineModel()
+          /** emits */
+          defineEmits(['update:foo'])
+          /** props */
+          const props = defineProps(['foo'])
+          /** slots */
+          const slots = defineSlots()
+          console.log('test1')
+        </script>
+      `,
+      options: [
+        {
+          order: [
+            'defineOptions',
+            'defineModel',
+            'defineEmits',
+            'defineProps',
+            'defineSlots'
+          ]
+        }
+      ],
+      errors: [
+        {
+          message: notAtTopMessage('defineOptions'),
+          line: 12,
+          column: 11,
+          endLine: 12,
+          endColumn: 28
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>
+          /** slots */
+          const slots = defineSlots()
+          /** options */
+          defineOptions({})
+          /** emits */
+          defineEmits(['update:foo'])
+          /** props */
+          const props = defineProps(['foo'])
+          /** model */
+          const model = defineModel()
+        </script>
+      `,
+      output: `
+        <script setup>
+          /** options */
+          defineOptions({})
+          /** model */
+          const model = defineModel()
+          /** emits */
+          defineEmits(['update:foo'])
+          /** props */
+          const props = defineProps(['foo'])
+          /** slots */
+          const slots = defineSlots()
+        </script>
+      `,
+      options: [
+        {
+          order: [
+            'defineOptions',
+            'defineModel',
+            'defineEmits',
+            'defineProps',
+            'defineSlots'
+          ]
+        }
+      ],
+      errors: [
+        {
+          message: unorderedMessage('defineOptions', 'defineSlots'),
+          line: 6,
+          column: 11,
+          endLine: 6,
+          endColumn: 28
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>
+          /** emits */
+          defineEmits(['update:foo'])
+          /** expose */
+          defineExpose({})
+          /** slots */
+          const slots = defineSlots()
+        </script>
+      `,
+      output: null,
+      options: optionsExposeLast,
+      errors: [
+        {
+          message: defineExposeNotTheLast,
+          line: 6,
+          column: 11,
+          endLine: 6,
+          endColumn: 27,
+          suggestions: [
+            {
+              desc: putExposeAtBottom,
+              output: `
+        <script setup>
+          /** emits */
+          defineEmits(['update:foo'])
+          /** slots */
+          const slots = defineSlots()
+          /** expose */
+          defineExpose({})
+        </script>
+      `
+            }
+          ]
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>
+          /** emits */
+          defineEmits(['update:foo'])
+          /** expose */
+          defineExpose({})
+          /** options */
+          defineOptions({})
+          /** props */
+          const props = defineProps(['foo'])
+          /** slots */
+          const slots = defineSlots()
+        </script>
+      `,
+      output: `
+        <script setup>
+          /** options */
+          defineOptions({})
+          /** emits */
+          defineEmits(['update:foo'])
+          /** expose */
+          defineExpose({})
+          /** props */
+          const props = defineProps(['foo'])
+          /** slots */
+          const slots = defineSlots()
+        </script>
+      `,
+      options: [
+        {
+          order: ['defineOptions', 'defineEmits', 'defineProps'],
+          defineExposeLast: true
+        }
+      ],
+      errors: [
+        {
+          message: defineExposeNotTheLast,
+          line: 6,
+          column: 11,
+          endLine: 6,
+          endColumn: 27,
+          suggestions: [
+            {
+              desc: putExposeAtBottom,
+              output: `
+        <script setup>
+          /** emits */
+          defineEmits(['update:foo'])
+          /** options */
+          defineOptions({})
+          /** props */
+          const props = defineProps(['foo'])
+          /** slots */
+          const slots = defineSlots()
+          /** expose */
+          defineExpose({})
+        </script>
+      `
+            }
+          ]
+        },
+        {
+          message: unorderedMessage('defineOptions', 'defineEmits'),
+          line: 8,
+          column: 11,
+          endLine: 8,
+          endColumn: 28
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>
+          /** options */
+          defineOptions({})
+          /** model */
+          const first = defineModel('first')
+          const second = defineModel('second')
+        </script>
+      `,
+      output: `
+        <script setup>
+          /** model */
+          const first = defineModel('first')
+          const second = defineModel('second')
+          /** options */
+          defineOptions({})
+        </script>
+      `,
+      options: [
+        {
+          order: ['defineModel', 'defineOptions']
+        }
+      ],
+      errors: [
+        {
+          message: unorderedMessage('defineModel', 'defineOptions'),
+          line: 6,
+          column: 11,
+          endLine: 6,
+          endColumn: 45
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>
+          const first = defineModel('first')
+          defineOptions({})
+          const second = defineModel('second')
+        </script>
+      `,
+      output: `
+        <script setup>
+          const first = defineModel('first')
+          const second = defineModel('second')
+          defineOptions({})
+        </script>
+      `,
+      options: [
+        {
+          order: ['defineModel', 'defineOptions']
+        }
+      ],
+      errors: [
+        {
+          message: unorderedMessage('defineModel', 'defineOptions'),
+          line: 5,
+          column: 11,
+          endLine: 5,
+          endColumn: 47
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>
+          defineOptions({})
+          defineCustom('second')
+          const something = defineSomething('first')
+          definePage()
+          const model = defineModel('second')
+        </script>
+      `,
+      output: `
+        <script setup>
+          const something = defineSomething('first')
+          defineCustom('second')
+          const model = defineModel('second')
+          defineOptions({})
+          definePage()
+        </script>
+      `,
+      options: [
+        {
+          order: [
+            'defineSomething',
+            'defineCustom',
+            'defineModel',
+            'defineOptions',
+            'definePage'
+          ]
+        }
+      ],
+      errors: [
+        {
+          message: unorderedMessage('defineSomething', 'defineOptions'),
+          line: 5,
+          column: 11,
+          endLine: 5,
+          endColumn: 53
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>
+          const a = defineModel('a')
+          defineOptions({})
+          const c = defineModel('c')
+          defineExpose({})
+          const b = defineModel('b')
+        </script>
+      `,
+      output: `
+        <script setup>
+          const a = defineModel('a')
+          const c = defineModel('c')
+          const b = defineModel('b')
+          defineOptions({})
+          defineExpose({})
+        </script>
+      `,
+      options: [
+        {
+          order: ['defineModel', 'defineOptions'],
+          defineExposeLast: true
+        }
+      ],
+      errors: [
+        {
+          message: unorderedMessage('defineModel', 'defineOptions'),
+          line: 5,
+          column: 11,
+          endLine: 5,
+          endColumn: 37
+        },
+        {
+          message: defineExposeNotTheLast,
+          line: 6,
+          column: 11,
+          endLine: 6,
+          endColumn: 27,
+          suggestions: [
+            {
+              messageId: 'putExposeAtTheLast',
+              output: `
+        <script setup>
+          const a = defineModel('a')
+          defineOptions({})
+          const c = defineModel('c')
+          const b = defineModel('b')
+          defineExpose({})
+        </script>
+      `
+            }
+          ]
         }
       ]
     }
diff --git a/tests/lib/rules/define-props-declaration.js b/tests/lib/rules/define-props-declaration.js
new file mode 100644
index 000000000..ff9e3e1b6
--- /dev/null
+++ b/tests/lib/rules/define-props-declaration.js
@@ -0,0 +1,176 @@
+/**
+ * @author Amorites
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/define-props-declaration')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('define-props-declaration', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      const props = defineProps<{
+        kind: string;
+      }>()
+      </script>
+      `,
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      const props = defineProps<{
+        kind: string;
+      }>()
+      </script>
+      `,
+      options: ['type-based'],
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      const props = defineProps({
+        kind: { type: String },
+      })
+      </script>
+      `,
+      options: ['runtime']
+    },
+    {
+      filename: 'test.vue',
+      // ignore script without lang="ts"
+      code: `
+      <script setup>
+      const props = defineProps({
+        kind: { type: String },
+      })
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      const emit = defineEmits({
+        click: (event: PointerEvent) => !!event
+      })
+      </script>
+      `,
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
+    },
+    {
+      filename: 'test.vue',
+      // ignore non-setup script
+      code: `
+        <script lang="ts">
+        import { PropType } from 'vue'
+
+        export default {
+          props: {
+            kind: { type: String as PropType<'primary' | 'secondary'> },
+          },
+          emits: ['check']
+        }
+        </script>
+      `,
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      const props = defineProps({
+        kind: { type: String },
+      })
+      </script>
+      `,
+      errors: [
+        {
+          message: 'Use type-based declaration instead of runtime declaration.',
+          line: 3,
+          column: 21,
+          endLine: 5,
+          endColumn: 9
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      const props = defineProps({
+        kind: { type: String },
+      })
+      </script>
+      `,
+      options: ['type-based'],
+      errors: [
+        {
+          message: 'Use type-based declaration instead of runtime declaration.',
+          line: 3,
+          column: 21,
+          endLine: 5,
+          endColumn: 9
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      const props = defineProps<{
+        kind: string;
+      }>()
+      </script>
+      `,
+      options: ['runtime'],
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          message: 'Use runtime declaration instead of type-based declaration.',
+          line: 3,
+          column: 21,
+          endLine: 5,
+          endColumn: 11
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/define-props-destructuring.js b/tests/lib/rules/define-props-destructuring.js
new file mode 100644
index 000000000..ce8f3db97
--- /dev/null
+++ b/tests/lib/rules/define-props-destructuring.js
@@ -0,0 +1,228 @@
+/**
+ * @author Wayne Zhang
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/define-props-destructuring')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2015,
+    sourceType: 'module'
+  }
+})
+
+tester.run('define-props-destructuring', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const props = defineProps()
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const { foo = 'default' } = defineProps(['foo'])
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      const { foo = 'default' } = defineProps<{ foo?: string }>()
+      </script>
+      `,
+      languageOptions: {
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const props = defineProps(['foo'])
+      </script>
+      `,
+      options: [{ destructure: 'never' }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const props = withDefaults(defineProps(['foo']), { foo: 'default' })
+      </script>
+      `,
+      options: [{ destructure: 'never' }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      const props = defineProps<{ foo?: string }>()
+      </script>
+      `,
+      options: [{ destructure: 'never' }],
+      languageOptions: {
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      }
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const props = defineProps(['foo'])
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'preferDestructuring',
+          line: 3,
+          column: 21,
+          endLine: 3,
+          endColumn: 41
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const props = withDefaults(defineProps(['foo']), { foo: 'default' })
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'preferDestructuring',
+          line: 3,
+          column: 34,
+          endLine: 3,
+          endColumn: 54
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const { foo } = withDefaults(defineProps(['foo']), { foo: 'default' })
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'avoidWithDefaults',
+          line: 3,
+          column: 23,
+          endLine: 3,
+          endColumn: 35
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      const props = withDefaults(defineProps<{ foo?: string }>(), { foo: 'default' })
+      </script>
+      `,
+      languageOptions: {
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      },
+      errors: [
+        {
+          messageId: 'preferDestructuring',
+          line: 3,
+          column: 34,
+          endLine: 3,
+          endColumn: 65
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      const { foo } = withDefaults(defineProps<{ foo?: string }>(), { foo: 'default' })
+      </script>
+      `,
+      languageOptions: {
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      },
+      errors: [
+        {
+          messageId: 'avoidWithDefaults',
+          line: 3,
+          column: 23,
+          endLine: 3,
+          endColumn: 35
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const { foo } = defineProps(['foo'])
+      </script>
+      `,
+      options: [{ destructure: 'never' }],
+      errors: [
+        {
+          messageId: 'avoidDestructuring',
+          line: 3,
+          column: 23,
+          endLine: 3,
+          endColumn: 43
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const { foo } = withDefaults(defineProps(['foo']), { foo: 'default' })
+      </script>
+      `,
+      options: [{ destructure: 'never' }],
+      errors: [
+        {
+          messageId: 'avoidDestructuring',
+          line: 3,
+          column: 36,
+          endLine: 3,
+          endColumn: 56
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      const { foo } = defineProps<{ foo?: string }>()
+      </script>
+      `,
+      options: [{ destructure: 'never' }],
+      languageOptions: {
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      },
+      errors: [
+        {
+          messageId: 'avoidDestructuring',
+          line: 3,
+          column: 23,
+          endLine: 3,
+          endColumn: 54
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/dot-location.js b/tests/lib/rules/dot-location.js
index 75c4e07c7..fada8d3ef 100644
--- a/tests/lib/rules/dot-location.js
+++ b/tests/lib/rules/dot-location.js
@@ -3,12 +3,11 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/dot-location')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('dot-location', rule, {
@@ -49,7 +48,10 @@ tester.run('dot-location', rule, {
       errors: [
         {
           message: 'Expected dot to be on same line as object.',
-          line: 5
+          line: 5,
+          column: 13,
+          endLine: 5,
+          endColumn: 14
         }
       ]
     },
@@ -61,7 +63,6 @@ tester.run('dot-location', rule, {
             bar"
         />
       </template>`,
-      options: ['property'],
       output: `
       <template>
         <div
@@ -69,10 +70,14 @@ tester.run('dot-location', rule, {
             .bar"
         />
       </template>`,
+      options: ['property'],
       errors: [
         {
           message: 'Expected dot to be on same line as property.',
-          line: 4
+          line: 4,
+          column: 21,
+          endLine: 4,
+          endColumn: 22
         }
       ]
     }
diff --git a/tests/lib/rules/dot-notation.js b/tests/lib/rules/dot-notation.js
index ff32b85ef..58626395d 100644
--- a/tests/lib/rules/dot-notation.js
+++ b/tests/lib/rules/dot-notation.js
@@ -3,12 +3,11 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/dot-notation')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('dot-notation', rule, {
@@ -30,12 +29,28 @@ tester.run('dot-notation', rule, {
     {
       code: `<template><div :attr="foo['bar']" /></template>`,
       output: `<template><div :attr="foo.bar" /></template>`,
-      errors: ['["bar"] is better written in dot notation.']
+      errors: [
+        {
+          message: '["bar"] is better written in dot notation.',
+          line: 1,
+          column: 27,
+          endLine: 1,
+          endColumn: 32
+        }
+      ]
     },
     {
       code: `<template><div :[foo[\`bar\`]]="a" /></template>`,
       output: `<template><div :[foo.bar]="a" /></template>`,
-      errors: ['[`bar`] is better written in dot notation.']
+      errors: [
+        {
+          message: '[`bar`] is better written in dot notation.',
+          line: 1,
+          column: 22,
+          endLine: 1,
+          endColumn: 27
+        }
+      ]
     },
     // CSS vars injection
     {
@@ -51,7 +66,15 @@ tester.run('dot-notation', rule, {
         color: v-bind(foo.bar)
       }
       </style>`,
-      errors: ['[`bar`] is better written in dot notation.']
+      errors: [
+        {
+          message: '[`bar`] is better written in dot notation.',
+          line: 4,
+          column: 27,
+          endLine: 4,
+          endColumn: 32
+        }
+      ]
     },
     {
       code: `
@@ -66,7 +89,15 @@ tester.run('dot-notation', rule, {
         color: v-bind("foo.bar")
       }
       </style>`,
-      errors: ['[`bar`] is better written in dot notation.']
+      errors: [
+        {
+          message: '[`bar`] is better written in dot notation.',
+          line: 4,
+          column: 28,
+          endLine: 4,
+          endColumn: 33
+        }
+      ]
     }
   ]
 })
diff --git a/tests/lib/rules/enforce-style-attribute.js b/tests/lib/rules/enforce-style-attribute.js
new file mode 100644
index 000000000..1a269ab06
--- /dev/null
+++ b/tests/lib/rules/enforce-style-attribute.js
@@ -0,0 +1,184 @@
+/**
+ * @author Mussin Benarbia
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/enforce-style-attribute')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('enforce-style-attribute', rule, {
+  valid: [
+    // Default (scoped)
+    {
+      filename: 'test.vue',
+      code: '<template></template><script></script><style scoped></style>'
+    },
+    // With scoped option
+    {
+      filename: 'test.vue',
+      code: '<template></template><script></script><style scoped></style>',
+      options: [{ allow: ['scoped'] }]
+    },
+    // With module option
+    {
+      filename: 'test.vue',
+      code: '<template></template><script></script><style module></style>',
+      options: [{ allow: ['module'] }]
+    },
+    // With plain option
+    {
+      filename: 'test.vue',
+      code: '<template></template><script></script><style></style>',
+      options: [{ allow: ['plain'] }]
+    },
+    // With all options
+    {
+      filename: 'test.vue',
+      code: '<template></template><script></script><style scoped></style>',
+      options: [{ allow: ['scoped', 'module', 'plain'] }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template></template><script></script><style module></style>',
+      options: [{ allow: ['scoped', 'module', 'plain'] }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template></template><script></script><style></style>',
+      options: [{ allow: ['scoped', 'module', 'plain'] }]
+    }
+  ],
+  invalid: [
+    // With default (scoped)
+    {
+      code: `<template></template><script></script><style></style>`,
+      errors: [
+        {
+          message: 'Plain <style> tags are not allowed. Allowed: scoped.',
+          line: 1,
+          column: 39,
+          endLine: 1,
+          endColumn: 54
+        }
+      ]
+    },
+    {
+      code: `<template></template><script></script><style module></style>`,
+      errors: [
+        {
+          message: 'The module attribute is not allowed. Allowed: scoped.',
+          line: 1,
+          column: 39,
+          endLine: 1,
+          endColumn: 61
+        }
+      ]
+    },
+    // With scoped option
+    {
+      code: `<template></template><script></script><style></style>`,
+      options: [{ allow: ['scoped'] }],
+      errors: [
+        {
+          message: 'Plain <style> tags are not allowed. Allowed: scoped.',
+          line: 1,
+          column: 39,
+          endLine: 1,
+          endColumn: 54
+        }
+      ]
+    },
+    {
+      code: `<template></template><script></script><style module></style>`,
+      options: [{ allow: ['scoped'] }],
+      errors: [
+        {
+          message: 'The module attribute is not allowed. Allowed: scoped.',
+          line: 1,
+          column: 39,
+          endLine: 1,
+          endColumn: 61
+        }
+      ]
+    },
+    // With module option
+    {
+      code: `<template></template><script></script><style></style>`,
+      options: [{ allow: ['module'] }],
+      errors: [
+        {
+          message: 'Plain <style> tags are not allowed. Allowed: module.',
+          line: 1,
+          column: 39,
+          endLine: 1,
+          endColumn: 54
+        }
+      ]
+    },
+    {
+      code: `<template></template><script></script><style scoped></style>`,
+      options: [{ allow: ['module'] }],
+      errors: [
+        {
+          message: 'The scoped attribute is not allowed. Allowed: module.',
+          line: 1,
+          column: 39,
+          endLine: 1,
+          endColumn: 61
+        }
+      ]
+    },
+    // With different combinations of two options
+    {
+      code: `<template></template><script></script><style></style>`,
+      options: [{ allow: ['module', 'scoped'] }],
+      errors: [
+        {
+          message:
+            'Plain <style> tags are not allowed. Allowed: module, scoped.',
+          line: 1,
+          column: 39,
+          endLine: 1,
+          endColumn: 54
+        }
+      ]
+    },
+    {
+      code: `<template></template><script></script><style module></style>`,
+      options: [{ allow: ['scoped', 'plain'] }],
+      errors: [
+        {
+          message:
+            'The module attribute is not allowed. Allowed: plain, scoped.',
+          line: 1,
+          column: 39,
+          endLine: 1,
+          endColumn: 61
+        }
+      ]
+    },
+    {
+      code: `<template></template><script></script><style scoped></style>`,
+      options: [{ allow: ['module', 'plain'] }],
+      errors: [
+        {
+          message:
+            'The scoped attribute is not allowed. Allowed: module, plain.',
+          line: 1,
+          column: 39,
+          endLine: 1,
+          endColumn: 61
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/eqeqeq.js b/tests/lib/rules/eqeqeq.js
index 092c6f0d5..d5e484aae 100644
--- a/tests/lib/rules/eqeqeq.js
+++ b/tests/lib/rules/eqeqeq.js
@@ -3,12 +3,12 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const semver = require('semver')
+const { RuleTester, ESLint } = require('../../eslint-compat')
 const rule = require('../../../lib/rules/eqeqeq')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('eqeqeq', rule, {
@@ -25,7 +25,23 @@ tester.run('eqeqeq', rule, {
   invalid: [
     {
       code: '<template><div :attr="a == 1" /></template>',
-      errors: ["Expected '===' and instead saw '=='."]
+      errors: [
+        {
+          message: "Expected '===' and instead saw '=='.",
+          suggestions: semver.gte(ESLint.version, '9.26.0')
+            ? [
+                {
+                  desc: "Use '===' instead of '=='.",
+                  output: `<template><div :attr="a === 1" /></template>`
+                }
+              ]
+            : null,
+          line: 1,
+          column: 25,
+          endLine: 1,
+          endColumn: 27
+        }
+      ]
     },
     // CSS vars injection
     {
@@ -35,7 +51,28 @@ tester.run('eqeqeq', rule, {
         color: v-bind(a == 1 ? 'red' : 'blue')
       }
       </style>`,
-      errors: ["Expected '===' and instead saw '=='."]
+      errors: [
+        {
+          message: "Expected '===' and instead saw '=='.",
+          suggestions: semver.gte(ESLint.version, '9.26.0')
+            ? [
+                {
+                  desc: "Use '===' instead of '=='.",
+                  output: `
+      <style>
+      .text {
+        color: v-bind(a === 1 ? 'red' : 'blue')
+      }
+      </style>`
+                }
+              ]
+            : null,
+          line: 4,
+          column: 25,
+          endLine: 4,
+          endColumn: 27
+        }
+      ]
     }
   ]
 })
diff --git a/tests/lib/rules/first-attribute-linebreak.js b/tests/lib/rules/first-attribute-linebreak.js
index 61cbb2ed9..23dd84cf4 100644
--- a/tests/lib/rules/first-attribute-linebreak.js
+++ b/tests/lib/rules/first-attribute-linebreak.js
@@ -4,32 +4,21 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/first-attribute-linebreak')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 ruleTester.run('first-attribute-linebreak', rule, {
   valid: [
-    {
-      code: `
+    `
       <template>
         <component></component>
-      </template>`
-    },
-    {
-      code: `
+      </template>
+    `,
+    `
       <template>
         <component
           name="John Doe"
@@ -41,8 +30,8 @@ ruleTester.run('first-attribute-linebreak', rule, {
         ></component>
         <component name="John Doe"
         ></component>
-      </template>`
-    },
+      </template>
+    `,
     {
       code: `
       <template>
@@ -172,7 +161,9 @@ name="John Doe"
         {
           message: 'Expected a linebreak before this attribute.',
           line: 8,
-          column: 20
+          column: 20,
+          endLine: 8,
+          endColumn: 35
         }
       ]
     },
@@ -214,12 +205,16 @@ name="John Doe"
         {
           message: 'Expected no linebreak before this attribute.',
           line: 4,
-          column: 11
+          column: 11,
+          endLine: 4,
+          endColumn: 26
         },
         {
           message: 'Expected no linebreak before this attribute.',
           line: 13,
-          column: 11
+          column: 11,
+          endLine: 13,
+          endColumn: 26
         }
       ]
     },
@@ -265,12 +260,16 @@ name="John Doe"
         {
           message: 'Expected a linebreak before this attribute.',
           line: 8,
-          column: 20
+          column: 20,
+          endLine: 8,
+          endColumn: 35
         },
         {
           message: 'Expected a linebreak before this attribute.',
           line: 15,
-          column: 20
+          column: 20,
+          endLine: 15,
+          endColumn: 35
         }
       ]
     }
diff --git a/tests/lib/rules/func-call-spacing.js b/tests/lib/rules/func-call-spacing.js
index 74fa4cb88..6dfd86837 100644
--- a/tests/lib/rules/func-call-spacing.js
+++ b/tests/lib/rules/func-call-spacing.js
@@ -3,15 +3,54 @@
  */
 'use strict'
 
-const { RuleTester, ESLint } = require('../../eslint-compat')
 const semver = require('semver')
+const { RuleTester } = require('../../eslint-compat')
 const rule = require('../../../lib/rules/func-call-spacing')
+const { eslintStylisticVersion } = require('../../test-utils/eslint-stylistic')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2020 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2020 }
 })
 
+/**
+ * @param {number} line
+ * @param {number} column
+ * @param {'unexpected' | 'missing'} errorType
+ * @returns {{line: number, column: number, endLine: number, endColumn: number}}
+ */
+function getErrorPosition(line, column, errorType) {
+  if (
+    eslintStylisticVersion !== undefined &&
+    semver.lt(eslintStylisticVersion, '3.0.0')
+  ) {
+    return {
+      line,
+      column: column - 3,
+      endLine: undefined,
+      endColumn: undefined
+    }
+  }
+
+  if (
+    eslintStylisticVersion === undefined ||
+    semver.satisfies(process.version, '<19.0.0 || ^21.0.0')
+  ) {
+    return {
+      line,
+      column: errorType === 'unexpected' ? column : column - 1,
+      endLine: line,
+      endColumn: column
+    }
+  }
+
+  return {
+    line,
+    column,
+    endLine: line,
+    endColumn: errorType === 'unexpected' ? column + 1 : column
+  }
+}
+
 tester.run('func-call-spacing', rule, {
   valid: [
     `
@@ -62,10 +101,8 @@ tester.run('func-call-spacing', rule, {
       `,
       errors: [
         {
-          message: semver.lt(ESLint.version, '7.0.0')
-            ? 'Unexpected newline between function name and paren.'
-            : 'Unexpected whitespace between function name and paren.',
-          line: 3
+          message: 'Unexpected whitespace between function name and paren.',
+          ...getErrorPosition(3, 23, 'unexpected')
         }
       ]
     },
@@ -75,16 +112,16 @@ tester.run('func-call-spacing', rule, {
         <div :foo="foo()" />
       </template>
       `,
-      options: ['always'],
       output: `
       <template>
         <div :foo="foo ()" />
       </template>
       `,
+      options: ['always'],
       errors: [
         {
           message: 'Missing space between function name and paren.',
-          line: 3
+          ...getErrorPosition(3, 23, 'missing')
         }
       ]
     },
@@ -105,10 +142,8 @@ tester.run('func-call-spacing', rule, {
       </style>`,
       errors: [
         {
-          message: semver.lt(ESLint.version, '7.0.0')
-            ? 'Unexpected newline between function name and paren.'
-            : 'Unexpected whitespace between function name and paren.',
-          line: 4
+          message: 'Unexpected whitespace between function name and paren.',
+          ...getErrorPosition(4, 27, 'unexpected')
         }
       ]
     }
diff --git a/tests/lib/rules/html-button-has-type.js b/tests/lib/rules/html-button-has-type.js
index cdf8abff7..e39185395 100644
--- a/tests/lib/rules/html-button-has-type.js
+++ b/tests/lib/rules/html-button-has-type.js
@@ -4,21 +4,12 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/html-button-has-type')
 
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 ruleTester.run('html-button-has-type', rule, {
   valid: [
@@ -67,7 +58,10 @@ ruleTester.run('html-button-has-type', rule, {
       errors: [
         {
           message: 'Missing an explicit type attribute for button.',
-          column: 11
+          column: 11,
+          line: 1,
+          endLine: 1,
+          endColumn: 19
         }
       ]
     },
@@ -77,7 +71,10 @@ ruleTester.run('html-button-has-type', rule, {
       errors: [
         {
           message: 'A value must be set for button type attribute.',
-          column: 24
+          column: 24,
+          line: 1,
+          endLine: 1,
+          endColumn: 26
         }
       ]
     },
@@ -87,7 +84,10 @@ ruleTester.run('html-button-has-type', rule, {
       errors: [
         {
           message: 'A value must be set for button type attribute.',
-          column: 19
+          column: 19,
+          line: 1,
+          endLine: 1,
+          endColumn: 23
         }
       ]
     },
@@ -97,72 +97,89 @@ ruleTester.run('html-button-has-type', rule, {
       errors: [
         {
           message: 'foo is an invalid value for button type attribute.',
-          column: 24
+          column: 24,
+          line: 1,
+          endLine: 1,
+          endColumn: 29
         }
       ]
     },
     {
       filename: 'test.vue',
-      options: [{ button: false }],
       code: '<template><button type="button">Hello World</button></template>',
+      options: [{ button: false }],
       errors: [
         {
           message: 'button is a forbidden value for button type attribute.',
-          column: 24
+          column: 24,
+          line: 1,
+          endLine: 1,
+          endColumn: 32
         }
       ]
     },
     {
       filename: 'test.vue',
-      options: [{ submit: false }],
       code: '<template><button type="submit">Hello World</button></template>',
+      options: [{ submit: false }],
       errors: [
         {
           message: 'submit is a forbidden value for button type attribute.',
-          column: 24
+          column: 24,
+          line: 1,
+          endLine: 1,
+          endColumn: 32
         }
       ]
     },
     {
       filename: 'test.vue',
-      options: [{ reset: false }],
       code: '<template><button type="reset">Hello World</button></template>',
+      options: [{ reset: false }],
       errors: [
         {
           message: 'reset is a forbidden value for button type attribute.',
-          column: 24
+          column: 24,
+          line: 1,
+          endLine: 1,
+          endColumn: 31
         }
       ]
     },
     {
       filename: 'test.vue',
-      options: [{ button: false, submit: false, reset: false }],
       code: `<template>
                 <button type="button">Hello World</button>
                 <button type="submit">Hello World</button>
                 <button type="reset">Hello World</button>
              </template>`,
+      options: [{ button: false, submit: false, reset: false }],
       errors: [
         {
           message: 'button is a forbidden value for button type attribute.',
           line: 2,
-          column: 30
+          column: 30,
+          endLine: 2,
+          endColumn: 38
         },
         {
           message: 'submit is a forbidden value for button type attribute.',
           line: 3,
-          column: 30
+          column: 30,
+          endLine: 3,
+          endColumn: 38
         },
         {
           message: 'reset is a forbidden value for button type attribute.',
           line: 4,
-          column: 30
+          column: 30,
+          endLine: 4,
+          endColumn: 37
         }
       ]
     },
     {
       filename: 'test.vue',
-      options: [{ button: true, submit: true, reset: false }],
       code: `<template>
                 <button type="button">Hello World</button>
                 <button type="submit">Hello World</button>
@@ -170,21 +187,28 @@ ruleTester.run('html-button-has-type', rule, {
                 <button type="">Hello World</button>
                 <button type="foo">Hello World</button>
              </template>`,
+      options: [{ button: true, submit: true, reset: false }],
       errors: [
         {
           message: 'reset is a forbidden value for button type attribute.',
           line: 4,
-          column: 30
+          column: 30,
+          endLine: 4,
+          endColumn: 37
         },
         {
           message: 'A value must be set for button type attribute.',
           line: 5,
-          column: 30
+          column: 30,
+          endLine: 5,
+          endColumn: 32
         },
         {
           message: 'foo is an invalid value for button type attribute.',
           line: 6,
-          column: 30
+          column: 30,
+          endLine: 6,
+          endColumn: 35
         }
       ]
     },
@@ -194,11 +218,17 @@ ruleTester.run('html-button-has-type', rule, {
       errors: [
         {
           message: 'Missing an explicit type attribute for button.',
-          column: 11
+          column: 11,
+          line: 1,
+          endLine: 1,
+          endColumn: 19
         },
         {
           message: 'Missing an explicit type attribute for button.',
-          column: 39
+          column: 39,
+          line: 1,
+          endLine: 1,
+          endColumn: 47
         }
       ]
     },
@@ -208,17 +238,10 @@ ruleTester.run('html-button-has-type', rule, {
       errors: [
         {
           message: 'A value must be set for button type attribute.',
-          column: 25
-        }
-      ]
-    },
-    {
-      filename: 'test.vue',
-      code: `<template><button v-bind:type>Hello World</button></template>`,
-      errors: [
-        {
-          message: 'A value must be set for button type attribute.',
-          column: 19
+          column: 25,
+          line: 1,
+          endLine: 1,
+          endColumn: 27
         }
       ]
     }
diff --git a/tests/lib/rules/html-closing-bracket-newline.js b/tests/lib/rules/html-closing-bracket-newline.js
index b72c46b97..37aaa41d2 100644
--- a/tests/lib/rules/html-closing-bracket-newline.js
+++ b/tests/lib/rules/html-closing-bracket-newline.js
@@ -5,22 +5,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/html-closing-bracket-newline')
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
-    ecmaVersion: 2015
-  }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('html-closing-bracket-newline', rule, {
@@ -124,6 +113,42 @@ tester.run('html-closing-bracket-newline', rule, {
         }
       ]
     },
+    {
+      code: `
+        <template>
+          <MyComp
+            :foo="foo"
+          />
+          <MyComp :foo="foo" />
+        </template>
+      `,
+      options: [
+        {
+          selfClosingTag: {
+            singleline: 'never',
+            multiline: 'always'
+          }
+        }
+      ]
+    },
+    {
+      code: `
+        <template>
+          <MyComp :foo="foo"
+          />
+          <MyComp
+            :foo="foo" />
+        </template>
+      `,
+      options: [
+        {
+          selfClosingTag: {
+            singleline: 'always',
+            multiline: 'never'
+          }
+        }
+      ]
+    },
 
     // Ignore if no closing brackets
     `
@@ -149,8 +174,22 @@ tester.run('html-closing-bracket-newline', rule, {
         </template>
       `,
       errors: [
-        'Expected no line breaks before closing bracket, but 1 line break found.',
-        'Expected no line breaks before closing bracket, but 2 line breaks found.'
+        {
+          message:
+            'Expected no line breaks before closing bracket, but 1 line break found.',
+          line: 3,
+          column: 15,
+          endLine: 4,
+          endColumn: 11
+        },
+        {
+          message:
+            'Expected no line breaks before closing bracket, but 2 line breaks found.',
+          line: 4,
+          column: 17,
+          endLine: 6,
+          endColumn: 11
+        }
       ]
     },
     {
@@ -170,7 +209,14 @@ tester.run('html-closing-bracket-newline', rule, {
         </template>
       `,
       errors: [
-        'Expected 1 line break before closing bracket, but no line breaks found.'
+        {
+          message:
+            'Expected 1 line break before closing bracket, but no line breaks found.',
+          line: 4,
+          column: 18,
+          endLine: 4,
+          endColumn: 18
+        }
       ]
     },
     {
@@ -194,8 +240,22 @@ tester.run('html-closing-bracket-newline', rule, {
         }
       ],
       errors: [
-        'Expected no line breaks before closing bracket, but 1 line break found.',
-        'Expected no line breaks before closing bracket, but 2 line breaks found.'
+        {
+          message:
+            'Expected no line breaks before closing bracket, but 1 line break found.',
+          line: 3,
+          column: 15,
+          endLine: 4,
+          endColumn: 11
+        },
+        {
+          message:
+            'Expected no line breaks before closing bracket, but 2 line breaks found.',
+          line: 4,
+          column: 17,
+          endLine: 6,
+          endColumn: 11
+        }
       ]
     },
     {
@@ -221,7 +281,14 @@ tester.run('html-closing-bracket-newline', rule, {
         }
       ],
       errors: [
-        'Expected no line breaks before closing bracket, but 1 line break found.'
+        {
+          message:
+            'Expected no line breaks before closing bracket, but 1 line break found.',
+          line: 4,
+          column: 18,
+          endLine: 5,
+          endColumn: 13
+        }
       ]
     },
     {
@@ -247,7 +314,14 @@ tester.run('html-closing-bracket-newline', rule, {
         }
       ],
       errors: [
-        'Expected 1 line break before closing bracket, but no line breaks found.'
+        {
+          message:
+            'Expected 1 line break before closing bracket, but no line breaks found.',
+          line: 4,
+          column: 18,
+          endLine: 4,
+          endColumn: 18
+        }
       ]
     },
     {
@@ -272,8 +346,22 @@ tester.run('html-closing-bracket-newline', rule, {
         }
       ],
       errors: [
-        'Expected no line breaks before closing bracket, but 1 line break found.',
-        'Expected no line breaks before closing bracket, but 1 line break found.'
+        {
+          message:
+            'Expected no line breaks before closing bracket, but 1 line break found.',
+          line: 3,
+          column: 21,
+          endLine: 4,
+          endColumn: 11
+        },
+        {
+          message:
+            'Expected no line breaks before closing bracket, but 1 line break found.',
+          line: 5,
+          column: 16,
+          endLine: 6,
+          endColumn: 11
+        }
       ]
     },
     {
@@ -304,8 +392,22 @@ tester.run('html-closing-bracket-newline', rule, {
         }
       ],
       errors: [
-        'Expected no line breaks before closing bracket, but 1 line break found.',
-        'Expected 1 line break before closing bracket, but no line breaks found.'
+        {
+          message:
+            'Expected no line breaks before closing bracket, but 1 line break found.',
+          line: 5,
+          column: 18,
+          endLine: 6,
+          endColumn: 13
+        },
+        {
+          message:
+            'Expected 1 line break before closing bracket, but no line breaks found.',
+          line: 7,
+          column: 16,
+          endLine: 7,
+          endColumn: 16
+        }
       ]
     },
     {
@@ -334,8 +436,22 @@ tester.run('html-closing-bracket-newline', rule, {
         }
       ],
       errors: [
-        'Expected 1 line break before closing bracket, but no line breaks found.',
-        'Expected 1 line break before closing bracket, but no line breaks found.'
+        {
+          message:
+            'Expected 1 line break before closing bracket, but no line breaks found.',
+          line: 4,
+          column: 21,
+          endLine: 4,
+          endColumn: 21
+        },
+        {
+          message:
+            'Expected 1 line break before closing bracket, but no line breaks found.',
+          line: 5,
+          column: 16,
+          endLine: 5,
+          endColumn: 16
+        }
       ]
     },
     {
@@ -449,44 +565,178 @@ tester.run('html-closing-bracket-newline', rule, {
             'Expected 1 line break before closing bracket, but no line breaks found.',
           line: 2,
           column: 18,
-          endColumn: 18
+          endColumn: 18,
+          endLine: 2
         },
         {
           message:
             'Expected 1 line break before closing bracket, but no line breaks found.',
           line: 3,
           column: 19,
-          endColumn: 19
+          endColumn: 19,
+          endLine: 3
         },
         {
           message:
             'Expected 1 line break before closing bracket, but no line breaks found.',
           line: 4,
           column: 16,
-          endColumn: 16
+          endColumn: 16,
+          endLine: 4
         },
         {
           message:
             'Expected 1 line break before closing bracket, but no line breaks found.',
           line: 5,
           column: 17,
-          endColumn: 17
+          endColumn: 17,
+          endLine: 5
         },
         {
           message:
             'Expected 1 line break before closing bracket, but no line breaks found.',
           line: 6,
           column: 15,
-          endColumn: 15
+          endColumn: 15,
+          endLine: 6
         },
         {
           message:
             'Expected 1 line break before closing bracket, but no line breaks found.',
           line: 6,
           column: 23,
+          endColumn: 23,
+          endLine: 6
+        }
+      ]
+    },
+    {
+      code: `
+        <template>
+          <MyComp
+          />
+        </template>
+      `,
+      output: `
+        <template>
+          <MyComp/>
+        </template>
+      `,
+      options: [
+        {
+          selfClosingTag: {
+            singleline: 'never',
+            multiline: 'always'
+          }
+        }
+      ],
+      errors: [
+        {
+          message:
+            'Expected no line breaks before closing bracket, but 1 line break found.',
+          line: 3,
+          column: 18,
+          endLine: 4,
+          endColumn: 11
+        }
+      ]
+    },
+    {
+      code: `
+        <template>
+          <MyComp
+            :foo="foo"/>
+        </template>
+      `,
+      output: `
+        <template>
+          <MyComp
+            :foo="foo"
+/>
+        </template>
+      `,
+      options: [
+        {
+          selfClosingTag: {
+            singleline: 'never',
+            multiline: 'always'
+          }
+        }
+      ],
+      errors: [
+        {
+          message:
+            'Expected 1 line break before closing bracket, but no line breaks found.',
+          line: 4,
+          column: 23,
+          endLine: 4,
           endColumn: 23
         }
       ]
+    },
+    {
+      code: `
+        <template>
+          <MyComp :foo="foo"/>
+        </template>
+      `,
+      output: `
+        <template>
+          <MyComp :foo="foo"
+/>
+        </template>
+      `,
+      options: [
+        {
+          selfClosingTag: {
+            singleline: 'always',
+            multiline: 'never'
+          }
+        }
+      ],
+      errors: [
+        {
+          message:
+            'Expected 1 line break before closing bracket, but no line breaks found.',
+          line: 3,
+          column: 29,
+          endLine: 3,
+          endColumn: 29
+        }
+      ]
+    },
+    {
+      code: `
+        <template>
+          <MyComp
+            :foo="foo"
+          />
+        </template>
+      `,
+      output: `
+        <template>
+          <MyComp
+            :foo="foo"/>
+        </template>
+      `,
+      options: [
+        {
+          selfClosingTag: {
+            singleline: 'always',
+            multiline: 'never'
+          }
+        }
+      ],
+      errors: [
+        {
+          message:
+            'Expected no line breaks before closing bracket, but 1 line break found.',
+          line: 4,
+          column: 23,
+          endLine: 5,
+          endColumn: 11
+        }
+      ]
     }
   ]
 })
diff --git a/tests/lib/rules/html-closing-bracket-spacing.js b/tests/lib/rules/html-closing-bracket-spacing.js
index af03d0bfd..26139b225 100644
--- a/tests/lib/rules/html-closing-bracket-spacing.js
+++ b/tests/lib/rules/html-closing-bracket-spacing.js
@@ -4,22 +4,11 @@
 
 'use strict'
 
-// -----------------------------------------------------------------------------
-// Requirements
-// -----------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/html-closing-bracket-spacing')
 
-// -----------------------------------------------------------------------------
-// Tests
-// -----------------------------------------------------------------------------
-
 const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
-    ecmaVersion: 2015
-  }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 ruleTester.run('html-closing-bracket-spacing', rule, {
@@ -61,19 +50,22 @@ ruleTester.run('html-closing-bracket-spacing', rule, {
           message: "Expected no space before '>', but found.",
           line: 2,
           column: 7,
-          endColumn: 9
+          endColumn: 9,
+          endLine: 2
         },
         {
           message: "Expected no space before '>', but found.",
           line: 3,
           column: 8,
-          endColumn: 10
+          endColumn: 10,
+          endLine: 3
         },
         {
           message: "Expected a space before '/>', but not found.",
           line: 4,
           column: 7,
-          endColumn: 9
+          endColumn: 9,
+          endLine: 4
         }
       ]
     },
@@ -85,13 +77,15 @@ ruleTester.run('html-closing-bracket-spacing', rule, {
           message: "Expected no space before '>', but found.",
           line: 2,
           column: 11,
-          endColumn: 13
+          endColumn: 13,
+          endLine: 2
         },
         {
           message: "Expected a space before '/>', but not found.",
           line: 3,
           column: 11,
-          endColumn: 13
+          endColumn: 13,
+          endLine: 3
         }
       ]
     },
@@ -104,13 +98,15 @@ ruleTester.run('html-closing-bracket-spacing', rule, {
           message: "Expected no space before '>', but found.",
           line: 2,
           column: 15,
-          endColumn: 17
+          endColumn: 17,
+          endLine: 2
         },
         {
           message: "Expected a space before '/>', but not found.",
           line: 3,
           column: 15,
-          endColumn: 17
+          endColumn: 17,
+          endLine: 3
         }
       ]
     },
@@ -130,37 +126,43 @@ ruleTester.run('html-closing-bracket-spacing', rule, {
           message: "Expected no space before '>', but found.",
           line: 2,
           column: 18,
-          endColumn: 20
+          endColumn: 20,
+          endLine: 2
         },
         {
           message: "Expected no space before '>', but found.",
           line: 2,
           column: 30,
-          endColumn: 32
+          endColumn: 32,
+          endLine: 2
         },
         {
           message: "Expected no space before '>', but found.",
           line: 3,
           column: 16,
-          endColumn: 18
+          endColumn: 18,
+          endLine: 3
         },
         {
           message: "Expected no space before '>', but found.",
           line: 3,
           column: 26,
-          endColumn: 28
+          endColumn: 28,
+          endLine: 3
         },
         {
           message: "Expected no space before '>', but found.",
           line: 4,
           column: 15,
-          endColumn: 17
+          endColumn: 17,
+          endLine: 4
         },
         {
           message: "Expected no space before '>', but found.",
           line: 4,
           column: 24,
-          endColumn: 26
+          endColumn: 26,
+          endLine: 4
         }
       ]
     },
@@ -179,19 +181,22 @@ ruleTester.run('html-closing-bracket-spacing', rule, {
           message: "Expected a space before '>', but not found.",
           line: 2,
           column: 7,
-          endColumn: 8
+          endColumn: 8,
+          endLine: 2
         },
         {
           message: "Expected a space before '>', but not found.",
           line: 3,
           column: 8,
-          endColumn: 9
+          endColumn: 9,
+          endLine: 3
         },
         {
           message: "Expected no space before '/>', but found.",
           line: 4,
           column: 7,
-          endColumn: 10
+          endColumn: 10,
+          endLine: 4
         }
       ]
     },
@@ -218,37 +223,43 @@ ruleTester.run('html-closing-bracket-spacing', rule, {
           message: "Expected a space before '>', but not found.",
           line: 2,
           column: 18,
-          endColumn: 19
+          endColumn: 19,
+          endLine: 2
         },
         {
           message: "Expected a space before '>', but not found.",
           line: 2,
           column: 29,
-          endColumn: 30
+          endColumn: 30,
+          endLine: 2
         },
         {
           message: "Expected a space before '>', but not found.",
           line: 3,
           column: 16,
-          endColumn: 17
+          endColumn: 17,
+          endLine: 3
         },
         {
           message: "Expected a space before '>', but not found.",
           line: 3,
           column: 25,
-          endColumn: 26
+          endColumn: 26,
+          endLine: 3
         },
         {
           message: "Expected a space before '>', but not found.",
           line: 4,
           column: 15,
-          endColumn: 16
+          endColumn: 16,
+          endLine: 4
         },
         {
           message: "Expected a space before '>', but not found.",
           line: 4,
           column: 23,
-          endColumn: 24
+          endColumn: 24,
+          endLine: 4
         }
       ]
     }
diff --git a/tests/lib/rules/html-comment-content-newline.js b/tests/lib/rules/html-comment-content-newline.js
index 3755a5425..6d1c28279 100644
--- a/tests/lib/rules/html-comment-content-newline.js
+++ b/tests/lib/rules/html-comment-content-newline.js
@@ -6,27 +6,22 @@
 
 const rule = require('../../../lib/rules/html-comment-content-newline')
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
-    ecmaVersion: 2015
-  }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 tester.run('html-comment-content-newline', rule, {
   valid: [
-    {
-      code: `
-        <template>
-          <!-- comment -->
-          <!--
-            multiline
-            comment
-          -->
-        </template>
-        `
-    },
+    `
+      <template>
+        <!-- comment -->
+        <!--
+          multiline
+          comment
+        -->
+      </template>
+    `,
     {
       code: `
         <template>
@@ -216,24 +211,20 @@ tester.run('html-comment-content-newline', rule, {
     },
 
     // IE conditional comments
-    {
-      code: `
-        <template>
-          <!--[if IE 8]>
-          <div>IE8 only</div>
-          <![endif]-->
-        </template>
-        `
-    },
-    {
-      code: `
-        <template>
-          <!--[if !IE]><!-->
-          <div>not IE only</div>
-          <!--<![endif]-->
-        </template>
-        `
-    }
+    `
+      <template>
+        <!--[if IE 8]>
+        <div>IE8 only</div>
+        <![endif]-->
+      </template>
+    `,
+    `
+      <template>
+        <!--[if !IE]><!-->
+        <div>not IE only</div>
+        <!--<![endif]-->
+      </template>
+    `
   ],
 
   invalid: [
@@ -273,13 +264,15 @@ tester.run('html-comment-content-newline', rule, {
           message: "Expected line break after '<!--'.",
           line: 6,
           column: 15,
-          endColumn: 16
+          endColumn: 16,
+          endLine: 6
         },
         {
           message: "Expected line break before '-->'.",
           line: 7,
           column: 20,
-          endColumn: 21
+          endColumn: 21,
+          endLine: 7
         }
       ]
     },
@@ -290,37 +283,41 @@ tester.run('html-comment-content-newline', rule, {
           <!--  comment  -->
         </template>
         `,
-      options: ['always'],
       output: `
         <template>
           <!--\ncomment\n-->
           <!--\n  comment  \n-->
         </template>
         `,
+      options: ['always'],
       errors: [
         {
           message: "Expected line break after '<!--'.",
           line: 3,
           column: 15,
-          endColumn: 15
+          endColumn: 15,
+          endLine: 3
         },
         {
           message: "Expected line break before '-->'.",
           line: 3,
           column: 22,
-          endColumn: 22
+          endColumn: 22,
+          endLine: 3
         },
         {
           message: "Expected line break after '<!--'.",
           line: 4,
           column: 15,
-          endColumn: 17
+          endColumn: 17,
+          endLine: 4
         },
         {
           message: "Expected line break before '-->'.",
           line: 4,
           column: 24,
-          endColumn: 26
+          endColumn: 26,
+          endLine: 4
         }
       ]
     },
@@ -332,12 +329,12 @@ comment
 -->
         </template>
         `,
-      options: ['never'],
       output: `
         <template>
           <!-- comment -->
         </template>
         `,
+      options: ['never'],
       errors: [
         {
           message: "Unexpected line breaks after '<!--'.",
@@ -361,24 +358,26 @@ comment
           <!-- \t \t  \t\tcomment \t \t  \t\t-->
         </template>
         `,
-      options: ['always'],
       output: `
         <template>
           <!--\n \t \t  \t\tcomment \t \t  \t\t\n-->
         </template>
         `,
+      options: ['always'],
       errors: [
         {
           message: "Expected line break after '<!--'.",
           line: 3,
           column: 15,
-          endColumn: 23
+          endColumn: 23,
+          endLine: 3
         },
         {
           message: "Expected line break before '-->'.",
           line: 3,
           column: 30,
-          endColumn: 38
+          endColumn: 38,
+          endLine: 3
         }
       ]
     },
@@ -389,11 +388,23 @@ comment
           <!--++++++++++++++++comment++++++++++++++++-->
         </template>
         `,
-      options: ['always', { exceptions: ['+'] }],
       output: null,
+      options: ['always', { exceptions: ['+'] }],
       errors: [
-        'Expected line break after exception block.',
-        'Expected line break before exception block.'
+        {
+          message: 'Expected line break after exception block.',
+          line: 3,
+          column: 31,
+          endLine: 3,
+          endColumn: 31
+        },
+        {
+          message: 'Expected line break before exception block.',
+          line: 3,
+          column: 38,
+          endLine: 3,
+          endColumn: 38
+        }
       ]
     },
     {
@@ -402,11 +413,23 @@ comment
           <!--*****comment**-->
         </template>
         `,
-      options: ['always', { exceptions: ['*'] }],
       output: null,
+      options: ['always', { exceptions: ['*'] }],
       errors: [
-        'Expected line break after exception block.',
-        'Expected line break before exception block.'
+        {
+          message: 'Expected line break after exception block.',
+          line: 3,
+          column: 20,
+          endLine: 3,
+          endColumn: 20
+        },
+        {
+          message: 'Expected line break before exception block.',
+          line: 3,
+          column: 27,
+          endLine: 3,
+          endColumn: 27
+        }
       ]
     },
     {
@@ -415,15 +438,27 @@ comment
           <!--#+#-#+#-#+#-comment #+#-->
         </template>
         `,
-      options: ['always', { exceptions: ['#+#-'] }],
       output: `
         <template>
           <!--#+#-#+#-#+#-comment #+#\n-->
         </template>
         `,
+      options: ['always', { exceptions: ['#+#-'] }],
       errors: [
-        'Expected line break after exception block.',
-        "Expected line break before '-->'."
+        {
+          message: 'Expected line break after exception block.',
+          line: 3,
+          column: 27,
+          endLine: 3,
+          endColumn: 27
+        },
+        {
+          message: "Expected line break before '-->'.",
+          line: 3,
+          column: 38,
+          endLine: 3,
+          endColumn: 38
+        }
       ]
     },
     {
@@ -432,14 +467,22 @@ comment
           <!--*****comment++++-->
         </template>
         `,
-      options: ['always', { exceptions: ['*', '++'] }],
       output: null,
+      options: ['always', { exceptions: ['*', '++'] }],
       errors: [
-        'Expected line break after exception block.',
+        {
+          message: 'Expected line break after exception block.',
+          line: 3,
+          column: 20,
+          endLine: 3,
+          endColumn: 20
+        },
         {
           message: 'Expected line break before exception block.',
           line: 3,
-          column: 27
+          column: 27,
+          endLine: 3,
+          endColumn: 27
         }
       ]
     },
@@ -449,14 +492,22 @@ comment
           <!--*****comment+++++-->
         </template>
         `,
-      options: ['always', { exceptions: ['*', '++'] }],
       output: null,
+      options: ['always', { exceptions: ['*', '++'] }],
       errors: [
-        'Expected line break after exception block.',
+        {
+          message: 'Expected line break after exception block.',
+          line: 3,
+          column: 20,
+          endLine: 3,
+          endColumn: 20
+        },
         {
           message: 'Expected line break before exception block.',
           line: 3,
-          column: 28
+          column: 28,
+          endLine: 3,
+          endColumn: 28
         }
       ]
     }
diff --git a/tests/lib/rules/html-comment-content-spacing.js b/tests/lib/rules/html-comment-content-spacing.js
index b29c1a960..754271d10 100644
--- a/tests/lib/rules/html-comment-content-spacing.js
+++ b/tests/lib/rules/html-comment-content-spacing.js
@@ -6,23 +6,18 @@
 
 const rule = require('../../../lib/rules/html-comment-content-spacing')
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
-    ecmaVersion: 2015
-  }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 tester.run('html-comment-content-spacing', rule, {
   valid: [
-    {
-      code: `
-        <template>
-          <!-- comment -->
-        </template>
-        `
-    },
+    `
+      <template>
+        <!-- comment -->
+      </template>
+    `,
     {
       code: `
         <template>
@@ -178,24 +173,20 @@ tester.run('html-comment-content-spacing', rule, {
     },
 
     // IE conditional comments
-    {
-      code: `
-        <template>
-          <!--[if IE 8]>
-          <div>IE8 only</div>
-          <![endif]-->
-        </template>
-        `
-    },
-    {
-      code: `
-        <template>
-          <!--[if !IE]><!-->
-          <div>not IE only</div>
-          <!--<![endif]-->
-        </template>
-        `
-    }
+    `
+      <template>
+        <!--[if IE 8]>
+        <div>IE8 only</div>
+        <![endif]-->
+      </template>
+    `,
+    `
+      <template>
+        <!--[if !IE]><!-->
+        <div>not IE only</div>
+        <!--<![endif]-->
+      </template>
+    `
   ],
 
   invalid: [
@@ -205,24 +196,26 @@ tester.run('html-comment-content-spacing', rule, {
           <!--comment-->
         </template>
         `,
-      options: ['always'],
       output: `
         <template>
           <!-- comment -->
         </template>
         `,
+      options: ['always'],
       errors: [
         {
           message: "Expected space after '<!--'.",
           line: 3,
           column: 15,
-          endColumn: 15
+          endColumn: 15,
+          endLine: 3
         },
         {
           message: "Expected space before '-->'.",
           line: 3,
           column: 22,
-          endColumn: 22
+          endColumn: 22,
+          endLine: 3
         }
       ]
     },
@@ -232,24 +225,26 @@ tester.run('html-comment-content-spacing', rule, {
           <!-- comment -->
         </template>
         `,
-      options: ['never'],
       output: `
         <template>
           <!--comment-->
         </template>
         `,
+      options: ['never'],
       errors: [
         {
           message: "Unexpected space after '<!--'.",
           line: 3,
           column: 15,
-          endColumn: 16
+          endColumn: 16,
+          endLine: 3
         },
         {
           message: "Unexpected space before '-->'.",
           line: 3,
           column: 23,
-          endColumn: 24
+          endColumn: 24,
+          endLine: 3
         }
       ]
     },
@@ -259,24 +254,26 @@ tester.run('html-comment-content-spacing', rule, {
           <!-- \t \t  \t\tcomment \t \t  \t\t-->
         </template>
         `,
-      options: ['never'],
       output: `
         <template>
           <!--comment-->
         </template>
         `,
+      options: ['never'],
       errors: [
         {
           message: "Unexpected space after '<!--'.",
           line: 3,
           column: 15,
-          endColumn: 23
+          endColumn: 23,
+          endLine: 3
         },
         {
           message: "Unexpected space before '-->'.",
           line: 3,
           column: 30,
-          endColumn: 38
+          endColumn: 38,
+          endLine: 3
         }
       ]
     },
@@ -287,11 +284,23 @@ tester.run('html-comment-content-spacing', rule, {
           <!--++++++++++++++++comment++++++++++++++++-->
         </template>
         `,
-      options: ['always', { exceptions: ['+'] }],
       output: null,
+      options: ['always', { exceptions: ['+'] }],
       errors: [
-        'Expected space after exception block.',
-        'Expected space before exception block.'
+        {
+          message: 'Expected space after exception block.',
+          line: 3,
+          column: 31,
+          endLine: 3,
+          endColumn: 31
+        },
+        {
+          message: 'Expected space before exception block.',
+          line: 3,
+          column: 38,
+          endLine: 3,
+          endColumn: 38
+        }
       ]
     },
     {
@@ -300,11 +309,23 @@ tester.run('html-comment-content-spacing', rule, {
           <!--*****comment**-->
         </template>
         `,
-      options: ['always', { exceptions: ['*'] }],
       output: null,
+      options: ['always', { exceptions: ['*'] }],
       errors: [
-        'Expected space after exception block.',
-        'Expected space before exception block.'
+        {
+          message: 'Expected space after exception block.',
+          line: 3,
+          column: 20,
+          endLine: 3,
+          endColumn: 20
+        },
+        {
+          message: 'Expected space before exception block.',
+          line: 3,
+          column: 27,
+          endLine: 3,
+          endColumn: 27
+        }
       ]
     },
     {
@@ -313,15 +334,27 @@ tester.run('html-comment-content-spacing', rule, {
           <!--#+#-#+#-#+#-comment #+#-->
         </template>
         `,
-      options: ['always', { exceptions: ['#+#-'] }],
       output: `
         <template>
           <!--#+#-#+#-#+#-comment #+# -->
         </template>
         `,
+      options: ['always', { exceptions: ['#+#-'] }],
       errors: [
-        'Expected space after exception block.',
-        "Expected space before '-->'."
+        {
+          message: 'Expected space after exception block.',
+          line: 3,
+          column: 27,
+          endLine: 3,
+          endColumn: 27
+        },
+        {
+          message: "Expected space before '-->'.",
+          line: 3,
+          column: 38,
+          endLine: 3,
+          endColumn: 38
+        }
       ]
     },
     {
@@ -330,14 +363,22 @@ tester.run('html-comment-content-spacing', rule, {
           <!--*****comment++++-->
         </template>
         `,
-      options: ['always', { exceptions: ['*', '++'] }],
       output: null,
+      options: ['always', { exceptions: ['*', '++'] }],
       errors: [
-        'Expected space after exception block.',
+        {
+          message: 'Expected space after exception block.',
+          line: 3,
+          column: 20,
+          endLine: 3,
+          endColumn: 20
+        },
         {
           message: 'Expected space before exception block.',
           line: 3,
-          column: 27
+          column: 27,
+          endLine: 3,
+          endColumn: 27
         }
       ]
     },
@@ -347,14 +388,22 @@ tester.run('html-comment-content-spacing', rule, {
           <!--*****comment+++++-->
         </template>
         `,
-      options: ['always', { exceptions: ['*', '++'] }],
       output: null,
+      options: ['always', { exceptions: ['*', '++'] }],
       errors: [
-        'Expected space after exception block.',
+        {
+          message: 'Expected space after exception block.',
+          line: 3,
+          column: 20,
+          endLine: 3,
+          endColumn: 20
+        },
         {
           message: 'Expected space before exception block.',
           line: 3,
-          column: 28
+          column: 28,
+          endLine: 3,
+          endColumn: 28
         }
       ]
     }
diff --git a/tests/lib/rules/html-comment-indent.js b/tests/lib/rules/html-comment-indent.js
index 4ec5c6ee2..f90f2cf4c 100644
--- a/tests/lib/rules/html-comment-indent.js
+++ b/tests/lib/rules/html-comment-indent.js
@@ -6,33 +6,28 @@
 
 const rule = require('../../../lib/rules/html-comment-indent')
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
-    ecmaVersion: 2015
-  }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 tester.run('html-comment-indent', rule, {
   valid: [
-    {
-      code: `
-        <template>
-          <!-- comment
-            comment
-          -->
+    `
+      <template>
+        <!-- comment
+          comment
+        -->
+        <!--
+          comment
+          comment
+        -->
           <!--
             comment
             comment
           -->
-            <!--
-              comment
-              comment
-            -->
-        </template>
-        `
-    },
+      </template>
+    `,
     {
       code: `
         <template>
@@ -87,44 +82,38 @@ tester.run('html-comment-indent', rule, {
         `,
       options: [0]
     },
-    {
-      code: `
-        <template>
-          <!-- comment
-        \t
-            comment
-            \t
-            comment
+    `
+      <template>
+        <!-- comment
+      \t
+          comment
           \t
-          -->
-          <!--
+          comment
         \t
-          -->
-          <!--
-          -->
-        </template>
-        `
-    },
+        -->
+        <!--
+      \t
+        -->
+        <!--
+        -->
+      </template>
+    `,
 
     // IE conditional comments
-    {
-      code: `
-        <template>
-          <!--[if IE 8]>
-          <div>IE8 only</div>
-          <![endif]-->
-        </template>
-        `
-    },
-    {
-      code: `
-        <template>
-          <!--[if !IE]><!-->
-          <div>not IE only</div>
-          <!--<![endif]-->
-        </template>
-        `
-    }
+    `
+      <template>
+        <!--[if IE 8]>
+        <div>IE8 only</div>
+        <![endif]-->
+      </template>
+    `,
+    `
+      <template>
+        <!--[if !IE]><!-->
+        <div>not IE only</div>
+        <!--<![endif]-->
+      </template>
+    `
   ],
 
   invalid: [
@@ -232,7 +221,6 @@ tester.run('html-comment-indent', rule, {
            -->
         </template>
         `,
-      options: ['tab'],
       output: `
         <template>
           <!-- comment
@@ -248,6 +236,7 @@ tester.run('html-comment-indent', rule, {
             -->
         </template>
         `,
+      options: ['tab'],
       errors: [
         {
           message: 'Expected relative indentation of 1 tab but found 0 tabs.',
@@ -257,8 +246,7 @@ tester.run('html-comment-indent', rule, {
           endColumn: 11
         },
         {
-          message:
-            'Expected base point indentation of 10 spaces, but found "        \\t".',
+          message: String.raw`Expected base point indentation of 10 spaces, but found "        \t".`,
           line: 7,
           column: 1,
           endLine: 7,
@@ -318,7 +306,6 @@ tester.run('html-comment-indent', rule, {
           -->
         </template>
         `,
-      options: [4],
       output: `
         <template>
           <!-- comment
@@ -334,6 +321,7 @@ tester.run('html-comment-indent', rule, {
             -->
         </template>
         `,
+      options: [4],
       errors: [
         {
           message:
@@ -407,7 +395,6 @@ tester.run('html-comment-indent', rule, {
           -->
         </template>
         `,
-      options: [0],
       output: `
         <template>
           <!--
@@ -423,6 +410,7 @@ tester.run('html-comment-indent', rule, {
             -->
         </template>
         `,
+      options: [0],
       errors: [
         {
           message:
@@ -463,8 +451,7 @@ tester.run('html-comment-indent', rule, {
           endColumn: 14
         },
         {
-          message:
-            'Expected base point indentation of 12 spaces, but found "          \\t".',
+          message: String.raw`Expected base point indentation of 12 spaces, but found "          \t".`,
           line: 12,
           column: 1,
           endLine: 12,
@@ -517,22 +504,34 @@ tester.run('html-comment-indent', rule, {
         {
           message:
             'Expected relative indentation of 2 spaces but found 0 spaces.',
-          line: 5
+          line: 5,
+          column: 11,
+          endLine: 5,
+          endColumn: 11
         },
         {
           message:
             'Expected relative indentation of 2 spaces but found 4 spaces.',
-          line: 7
+          line: 7,
+          column: 11,
+          endLine: 7,
+          endColumn: 15
         },
         {
           message:
             'Expected relative indentation of 0 spaces but found 2 spaces.',
-          line: 12
+          line: 12,
+          column: 11,
+          endLine: 12,
+          endColumn: 13
         },
         {
           message:
             'Expected base point indentation of 10 spaces, but found 8 spaces.',
-          line: 14
+          line: 14,
+          column: 1,
+          endLine: 14,
+          endColumn: 9
         }
       ]
     },
@@ -557,12 +556,18 @@ tester.run('html-comment-indent', rule, {
         {
           message:
             'Expected relative indentation of 2 spaces but found 0 spaces.',
-          line: 4
+          line: 4,
+          column: 11,
+          endLine: 4,
+          endColumn: 11
         },
         {
           message:
             'Expected relative indentation of 2 spaces but found 4 spaces.',
-          line: 6
+          line: 6,
+          column: 11,
+          endLine: 6,
+          endColumn: 15
         }
       ]
     },
@@ -588,15 +593,24 @@ comment -->
       errors: [
         {
           message: 'Expected indentation of 2 spaces but found 0 spaces.',
-          line: 4
+          line: 4,
+          column: 1,
+          endLine: 4,
+          endColumn: 1
         },
         {
           message: 'Expected indentation of 2 spaces but found 0 spaces.',
-          line: 5
+          line: 5,
+          column: 1,
+          endLine: 5,
+          endColumn: 1
         },
         {
           message: 'Expected indentation of 0 spaces but found 2 spaces.',
-          line: 7
+          line: 7,
+          column: 1,
+          endLine: 7,
+          endColumn: 3
         }
       ]
     },
@@ -623,17 +637,26 @@ comment -->
         {
           message:
             'Expected base point indentation of 2 spaces, but not found.',
-          line: 4
+          line: 4,
+          column: 1,
+          endLine: 4,
+          endColumn: 1
         },
         {
           message:
             'Expected base point indentation of 2 spaces, but not found.',
-          line: 5
+          line: 5,
+          column: 1,
+          endLine: 5,
+          endColumn: 1
         },
         {
           message:
             'Expected base point indentation of 2 spaces, but not found.',
-          line: 7
+          line: 7,
+          column: 1,
+          endLine: 7,
+          endColumn: 1
         }
       ]
     },
@@ -656,12 +679,18 @@ comment -->
         {
           message:
             'Expected relative indentation of 2 spaces but found 1 space.',
-          line: 4
+          line: 4,
+          column: 11,
+          endLine: 4,
+          endColumn: 12
         },
         {
           message:
             'Expected relative indentation of 0 spaces but found 1 space.',
-          line: 5
+          line: 5,
+          column: 11,
+          endLine: 5,
+          endColumn: 12
         }
       ]
     },
@@ -682,14 +711,18 @@ comment -->
         `,
       errors: [
         {
-          message:
-            'Expected base point indentation of " \\t \\t \\t ", but found 7 spaces.',
-          line: 4
+          message: String.raw`Expected base point indentation of " \t \t \t ", but found 7 spaces.`,
+          line: 4,
+          column: 1,
+          endLine: 4,
+          endColumn: 13
         },
         {
-          message:
-            'Expected base point indentation of " \\t \\t \\t ", but found 7 spaces.',
-          line: 5
+          message: String.raw`Expected base point indentation of " \t \t \t ", but found 7 spaces.`,
+          line: 5,
+          column: 1,
+          endLine: 5,
+          endColumn: 11
         }
       ]
     }
diff --git a/tests/lib/rules/html-end-tags.js b/tests/lib/rules/html-end-tags.js
index 76c250c0a..42e13dc99 100644
--- a/tests/lib/rules/html-end-tags.js
+++ b/tests/lib/rules/html-end-tags.js
@@ -5,20 +5,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/html-end-tags')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('html-end-tags', rule, {
@@ -70,6 +61,7 @@ tester.run('html-end-tags', rule, {
 
     // https://github.com/vuejs/eslint-plugin-vue/issues/1403
     {
+      filename: 'test.vue',
       code: `
       <template>
         <div>
@@ -80,8 +72,7 @@ tester.run('html-end-tags', rule, {
           </p>
         </div>
       </template>
-      `,
-      filename: 'test.vue'
+      `
     }
   ],
   invalid: [
@@ -89,13 +80,29 @@ tester.run('html-end-tags', rule, {
       filename: 'test.vue',
       code: '<template><div><div></div></template>',
       output: '<template><div><div></div></div></template>',
-      errors: ["'<div>' should have end tag."]
+      errors: [
+        {
+          message: "'<div>' should have end tag.",
+          line: 1,
+          column: 11,
+          endLine: 1,
+          endColumn: 16
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div><p></div></template>',
       output: '<template><div><p></p></div></template>',
-      errors: ["'<p>' should have end tag."]
+      errors: [
+        {
+          message: "'<p>' should have end tag.",
+          line: 1,
+          column: 16,
+          endLine: 1,
+          endColumn: 19
+        }
+      ]
     }
   ]
 })
diff --git a/tests/lib/rules/html-indent.js b/tests/lib/rules/html-indent.js
index 1c817f1a3..78c233f51 100644
--- a/tests/lib/rules/html-indent.js
+++ b/tests/lib/rules/html-indent.js
@@ -5,19 +5,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const fs = require('fs')
 const path = require('path')
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/html-indent')
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 const FIXTURE_ROOT = path.resolve(__dirname, '../../fixtures/html-indent/')
 
 /**
@@ -71,7 +63,10 @@ function loadPatterns(additionalValid, additionalInvalid) {
                 message: `Expected indentation of ${line.indentSize} ${kind}${
                   line.indentSize === 1 ? '' : 's'
                 } but found 0 ${kind}s.`,
-                line: line.number + 1
+                line: line.number + 1,
+                column: 1,
+                endLine: line.number + 1,
+                endColumn: 1
               }
         )
         .filter(Boolean)
@@ -106,16 +101,14 @@ function unIndent(strings) {
   return lines.map((line) => line.slice(minLineIndent)).join('\n')
 }
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
     ecmaVersion: 2020,
-    ecmaFeatures: {
-      globalReturn: true
+    parserOptions: {
+      ecmaFeatures: {
+        globalReturn: true
+      }
     }
   }
 })
@@ -457,7 +450,10 @@ tester.run(
         errors: [
           {
             message: 'Expected indentation of 12 spaces but found 10 spaces.',
-            line: 4
+            line: 4,
+            column: 1,
+            endLine: 4,
+            endColumn: 11
           }
         ]
       },
@@ -481,8 +477,11 @@ tester.run(
       `,
         errors: [
           {
-            message: 'Expected " " character, but found "\\t" character.',
-            line: 3
+            message: String.raw`Expected " " character, but found "\t" character.`,
+            line: 3,
+            column: 3,
+            endLine: 3,
+            endColumn: 4
           }
         ]
       },
@@ -505,8 +504,11 @@ tester.run(
         options: ['tab'],
         errors: [
           {
-            message: 'Expected "\\t" character, but found " " character.',
-            line: 3
+            message: String.raw`Expected "\t" character, but found " " character.`,
+            line: 3,
+            column: 2,
+            endLine: 3,
+            endColumn: 3
           }
         ]
       },
@@ -537,27 +539,45 @@ tester.run(
         errors: [
           {
             message: 'Expected indentation of 2 spaces but found 0 spaces.',
-            line: 2
+            line: 2,
+            column: 1,
+            endLine: 2,
+            endColumn: 1
           },
           {
             message: 'Expected indentation of 2 spaces but found 0 spaces.',
-            line: 3
+            line: 3,
+            column: 1,
+            endLine: 3,
+            endColumn: 1
           },
           {
             message: 'Expected indentation of 4 spaces but found 0 spaces.',
-            line: 4
+            line: 4,
+            column: 1,
+            endLine: 4,
+            endColumn: 1
           },
           {
             message: 'Expected indentation of 4 spaces but found 0 spaces.',
-            line: 5
+            line: 5,
+            column: 1,
+            endLine: 5,
+            endColumn: 1
           },
           {
             message: 'Expected indentation of 4 spaces but found 0 spaces.',
-            line: 6
+            line: 6,
+            column: 1,
+            endLine: 6,
+            endColumn: 1
           },
           {
             message: 'Expected indentation of 2 spaces but found 0 spaces.',
-            line: 7
+            line: 7,
+            column: 1,
+            endLine: 7,
+            endColumn: 1
           }
         ]
       },
@@ -586,11 +606,17 @@ tester.run(
         errors: [
           {
             message: 'Expected indentation of 4 spaces but found 2 spaces.',
-            line: 3
+            line: 3,
+            column: 1,
+            endLine: 3,
+            endColumn: 3
           },
           {
             message: 'Expected indentation of 4 spaces but found 2 spaces.',
-            line: 6
+            line: 6,
+            column: 1,
+            endLine: 6,
+            endColumn: 3
           }
         ]
       },
@@ -619,23 +645,38 @@ tester.run(
         errors: [
           {
             message: 'Expected indentation of 2 spaces but found 0 spaces.',
-            line: 2
+            line: 2,
+            column: 1,
+            endLine: 2,
+            endColumn: 1
           },
           {
             message: 'Expected indentation of 4 spaces but found 0 spaces.',
-            line: 3
+            line: 3,
+            column: 1,
+            endLine: 3,
+            endColumn: 1
           },
           {
             message: 'Expected indentation of 4 spaces but found 0 spaces.',
-            line: 4
+            line: 4,
+            column: 1,
+            endLine: 4,
+            endColumn: 1
           },
           {
             message: 'Expected indentation of 4 spaces but found 0 spaces.',
-            line: 5
+            line: 5,
+            column: 1,
+            endLine: 5,
+            endColumn: 1
           },
           {
             message: 'Expected indentation of 2 spaces but found 0 spaces.',
-            line: 6
+            line: 6,
+            column: 1,
+            endLine: 6,
+            endColumn: 1
           }
         ]
       },
@@ -664,19 +705,31 @@ tester.run(
         errors: [
           {
             message: 'Expected indentation of 2 spaces but found 0 spaces.',
-            line: 2
+            line: 2,
+            column: 1,
+            endLine: 2,
+            endColumn: 1
           },
           {
             message: 'Expected indentation of 4 spaces but found 0 spaces.',
-            line: 3
+            line: 3,
+            column: 1,
+            endLine: 3,
+            endColumn: 1
           },
           {
             message: 'Expected indentation of 4 spaces but found 0 spaces.',
-            line: 4
+            line: 4,
+            column: 1,
+            endLine: 4,
+            endColumn: 1
           },
           {
             message: 'Expected indentation of 2 spaces but found 0 spaces.',
-            line: 7
+            line: 7,
+            column: 1,
+            endLine: 7,
+            endColumn: 1
           }
         ]
       },
@@ -709,7 +762,10 @@ tester.run(
         errors: [
           {
             message: 'Expected indentation of 4 spaces but found 8 spaces.',
-            line: 5
+            line: 5,
+            column: 1,
+            endLine: 5,
+            endColumn: 9
           }
         ]
       },
@@ -745,15 +801,24 @@ tester.run(
         errors: [
           {
             message: 'Expected indentation of 8 spaces but found 6 spaces.',
-            line: 3
+            line: 3,
+            column: 1,
+            endLine: 3,
+            endColumn: 7
           },
           {
             message: 'Expected indentation of 12 spaces but found 8 spaces.',
-            line: 4
+            line: 4,
+            column: 1,
+            endLine: 4,
+            endColumn: 9
           },
           {
             message: 'Expected indentation of 12 spaces but found 8 spaces.',
-            line: 6
+            line: 6,
+            column: 1,
+            endLine: 6,
+            endColumn: 9
           }
         ]
       },
@@ -786,15 +851,24 @@ tester.run(
         errors: [
           {
             message: 'Expected indentation of 2 spaces but found 0 spaces.',
-            line: 2
+            line: 2,
+            column: 1,
+            endLine: 2,
+            endColumn: 1
           },
           {
             message: 'Expected indentation of 4 spaces but found 0 spaces.',
-            line: 3
+            line: 3,
+            column: 1,
+            endLine: 3,
+            endColumn: 1
           },
           {
             message: 'Expected indentation of 2 spaces but found 0 spaces.',
-            line: 4
+            line: 4,
+            column: 1,
+            endLine: 4,
+            endColumn: 1
           }
         ]
       },
@@ -833,31 +907,52 @@ tester.run(
         errors: [
           {
             message: 'Expected indentation of 2 spaces but found 0 spaces.',
-            line: 2
+            line: 2,
+            column: 1,
+            endLine: 2,
+            endColumn: 1
           },
           {
             message: 'Expected indentation of 4 spaces but found 0 spaces.',
-            line: 3
+            line: 3,
+            column: 1,
+            endLine: 3,
+            endColumn: 1
           },
           {
             message: 'Expected indentation of 6 spaces but found 0 spaces.',
-            line: 4
+            line: 4,
+            column: 1,
+            endLine: 4,
+            endColumn: 1
           },
           {
             message: 'Expected indentation of 6 spaces but found 0 spaces.',
-            line: 5
+            line: 5,
+            column: 1,
+            endLine: 5,
+            endColumn: 1
           },
           {
             message: 'Expected indentation of 6 spaces but found 0 spaces.',
-            line: 6
+            line: 6,
+            column: 1,
+            endLine: 6,
+            endColumn: 1
           },
           {
             message: 'Expected indentation of 4 spaces but found 0 spaces.',
-            line: 7
+            line: 7,
+            column: 1,
+            endLine: 7,
+            endColumn: 1
           },
           {
             message: 'Expected indentation of 2 spaces but found 0 spaces.',
-            line: 8
+            line: 8,
+            column: 1,
+            endLine: 8,
+            endColumn: 1
           }
         ]
       },
@@ -896,31 +991,52 @@ tester.run(
         errors: [
           {
             message: 'Expected indentation of 2 spaces but found 0 spaces.',
-            line: 2
+            line: 2,
+            column: 1,
+            endLine: 2,
+            endColumn: 1
           },
           {
             message: 'Expected indentation of 4 spaces but found 0 spaces.',
-            line: 3
+            line: 3,
+            column: 1,
+            endLine: 3,
+            endColumn: 1
           },
           {
             message: 'Expected indentation of 6 spaces but found 0 spaces.',
-            line: 4
+            line: 4,
+            column: 1,
+            endLine: 4,
+            endColumn: 1
           },
           {
             message: 'Expected indentation of 6 spaces but found 0 spaces.',
-            line: 5
+            line: 5,
+            column: 1,
+            endLine: 5,
+            endColumn: 1
           },
           {
             message: 'Expected indentation of 6 spaces but found 0 spaces.',
-            line: 6
+            line: 6,
+            column: 1,
+            endLine: 6,
+            endColumn: 1
           },
           {
             message: 'Expected indentation of 4 spaces but found 0 spaces.',
-            line: 7
+            line: 7,
+            column: 1,
+            endLine: 7,
+            endColumn: 1
           },
           {
             message: 'Expected indentation of 2 spaces but found 0 spaces.',
-            line: 8
+            line: 8,
+            column: 1,
+            endLine: 8,
+            endColumn: 1
           }
         ]
       },
@@ -941,8 +1057,11 @@ tester.run(
         options: ['tab', { ignores: ['VAttribute'] }],
         errors: [
           {
-            message: 'Expected "\\t" character, but found " " character.',
-            line: 2
+            message: String.raw`Expected "\t" character, but found " " character.`,
+            line: 2,
+            column: 2,
+            endLine: 2,
+            endColumn: 3
           }
         ]
       },
@@ -961,7 +1080,10 @@ tester.run(
         errors: [
           {
             message: 'Expected indentation of 2 spaces but found 4 spaces.',
-            line: 2
+            line: 2,
+            column: 1,
+            endLine: 2,
+            endColumn: 5
           }
         ]
       }
diff --git a/tests/lib/rules/html-quotes.js b/tests/lib/rules/html-quotes.js
index dd250054a..f6931f552 100644
--- a/tests/lib/rules/html-quotes.js
+++ b/tests/lib/rules/html-quotes.js
@@ -5,20 +5,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/html-quotes')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('html-quotes', rule, {
@@ -66,6 +57,15 @@ tester.run('html-quotes', rule, {
       code: '<template><div attr="foo\'bar"></div></template>',
       options: ['single', { avoidEscape: true }]
     },
+    // v-bind same-name shorthand (Vue 3.4+)
+    {
+      code: '<template><div :foo /></template>',
+      options: ['double']
+    },
+    {
+      code: '<template><div :foo /></template>',
+      options: ['single']
+    },
 
     // Invalid EOF
     {
@@ -82,101 +82,221 @@ tester.run('html-quotes', rule, {
       filename: 'test.vue',
       code: '<template><div class=foo></div></template>',
       output: '<template><div class="foo"></div></template>',
-      errors: ['Expected to be enclosed by double quotes.']
+      errors: [
+        {
+          message: 'Expected to be enclosed by double quotes.',
+          line: 1,
+          column: 22,
+          endLine: 1,
+          endColumn: 25
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: "<template><div class='foo'></div></template>",
       output: '<template><div class="foo"></div></template>',
-      errors: ['Expected to be enclosed by double quotes.']
+      errors: [
+        {
+          message: 'Expected to be enclosed by double quotes.',
+          line: 1,
+          column: 22,
+          endLine: 1,
+          endColumn: 27
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div :class=foo></div></template>',
       output: '<template><div :class="foo"></div></template>',
-      errors: ['Expected to be enclosed by double quotes.']
+      errors: [
+        {
+          message: 'Expected to be enclosed by double quotes.',
+          line: 1,
+          column: 23,
+          endLine: 1,
+          endColumn: 26
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: "<template><div :class='foo'></div></template>",
       output: '<template><div :class="foo"></div></template>',
-      errors: ['Expected to be enclosed by double quotes.']
+      errors: [
+        {
+          message: 'Expected to be enclosed by double quotes.',
+          line: 1,
+          column: 23,
+          endLine: 1,
+          endColumn: 28
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div :class=foo+"bar"></div></template>',
       output: '<template><div :class="foo+&quot;bar&quot;"></div></template>',
-      errors: ['Expected to be enclosed by double quotes.']
+      errors: [
+        {
+          message: 'Expected to be enclosed by double quotes.',
+          line: 1,
+          column: 23,
+          endLine: 1,
+          endColumn: 32
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div class=foo></div></template>',
       output: '<template><div class="foo"></div></template>',
       options: ['double'],
-      errors: ['Expected to be enclosed by double quotes.']
+      errors: [
+        {
+          message: 'Expected to be enclosed by double quotes.',
+          line: 1,
+          column: 22,
+          endLine: 1,
+          endColumn: 25
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: "<template><div class='foo'></div></template>",
       output: '<template><div class="foo"></div></template>',
       options: ['double'],
-      errors: ['Expected to be enclosed by double quotes.']
+      errors: [
+        {
+          message: 'Expected to be enclosed by double quotes.',
+          line: 1,
+          column: 22,
+          endLine: 1,
+          endColumn: 27
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div :class=foo></div></template>',
       output: '<template><div :class="foo"></div></template>',
       options: ['double'],
-      errors: ['Expected to be enclosed by double quotes.']
+      errors: [
+        {
+          message: 'Expected to be enclosed by double quotes.',
+          line: 1,
+          column: 23,
+          endLine: 1,
+          endColumn: 26
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: "<template><div :class='foo'></div></template>",
       output: '<template><div :class="foo"></div></template>',
       options: ['double'],
-      errors: ['Expected to be enclosed by double quotes.']
+      errors: [
+        {
+          message: 'Expected to be enclosed by double quotes.',
+          line: 1,
+          column: 23,
+          endLine: 1,
+          endColumn: 28
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div :class=foo+"bar"></div></template>',
       output: '<template><div :class="foo+&quot;bar&quot;"></div></template>',
       options: ['double'],
-      errors: ['Expected to be enclosed by double quotes.']
+      errors: [
+        {
+          message: 'Expected to be enclosed by double quotes.',
+          line: 1,
+          column: 23,
+          endLine: 1,
+          endColumn: 32
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div class=foo></div></template>',
       output: "<template><div class='foo'></div></template>",
       options: ['single'],
-      errors: ['Expected to be enclosed by single quotes.']
+      errors: [
+        {
+          message: 'Expected to be enclosed by single quotes.',
+          line: 1,
+          column: 22,
+          endLine: 1,
+          endColumn: 25
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div class="foo"></div></template>',
       output: "<template><div class='foo'></div></template>",
       options: ['single'],
-      errors: ['Expected to be enclosed by single quotes.']
+      errors: [
+        {
+          message: 'Expected to be enclosed by single quotes.',
+          line: 1,
+          column: 22,
+          endLine: 1,
+          endColumn: 27
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div :class=foo></div></template>',
       output: "<template><div :class='foo'></div></template>",
       options: ['single'],
-      errors: ['Expected to be enclosed by single quotes.']
+      errors: [
+        {
+          message: 'Expected to be enclosed by single quotes.',
+          line: 1,
+          column: 23,
+          endLine: 1,
+          endColumn: 26
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div :class="foo"></div></template>',
       output: "<template><div :class='foo'></div></template>",
       options: ['single'],
-      errors: ['Expected to be enclosed by single quotes.']
+      errors: [
+        {
+          message: 'Expected to be enclosed by single quotes.',
+          line: 1,
+          column: 23,
+          endLine: 1,
+          endColumn: 28
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: "<template><div :class=foo+'bar'></div></template>",
       output: "<template><div :class='foo+&apos;bar&apos;'></div></template>",
       options: ['single'],
-      errors: ['Expected to be enclosed by single quotes.']
+      errors: [
+        {
+          message: 'Expected to be enclosed by single quotes.',
+          line: 1,
+          column: 23,
+          endLine: 1,
+          endColumn: 32
+        }
+      ]
     },
     // avoidEscape
     {
@@ -184,42 +304,90 @@ tester.run('html-quotes', rule, {
       code: "<template><div attr='foo'></div></template>",
       output: '<template><div attr="foo"></div></template>',
       options: ['double', { avoidEscape: true }],
-      errors: ['Expected to be enclosed by double quotes.']
+      errors: [
+        {
+          message: 'Expected to be enclosed by double quotes.',
+          line: 1,
+          column: 21,
+          endLine: 1,
+          endColumn: 26
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div attr="bar"></div></template>',
       output: "<template><div attr='bar'></div></template>",
       options: ['single', { avoidEscape: true }],
-      errors: ['Expected to be enclosed by single quotes.']
+      errors: [
+        {
+          message: 'Expected to be enclosed by single quotes.',
+          line: 1,
+          column: 21,
+          endLine: 1,
+          endColumn: 26
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div attr=foo"bar></div></template>',
       output: "<template><div attr='foo\"bar'></div></template>",
       options: ['double', { avoidEscape: true }],
-      errors: ['Expected to be enclosed by double quotes.']
+      errors: [
+        {
+          message: 'Expected to be enclosed by double quotes.',
+          line: 1,
+          column: 21,
+          endLine: 1,
+          endColumn: 28
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: "<template><div attr=foo'bar></div></template>",
       output: '<template><div attr="foo\'bar"></div></template>',
       options: ['single', { avoidEscape: true }],
-      errors: ['Expected to be enclosed by single quotes.']
+      errors: [
+        {
+          message: 'Expected to be enclosed by single quotes.',
+          line: 1,
+          column: 21,
+          endLine: 1,
+          endColumn: 28
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div attr=foo"bar\'baz></div></template>',
       output: '<template><div attr="foo&quot;bar\'baz"></div></template>',
       options: ['double', { avoidEscape: true }],
-      errors: ['Expected to be enclosed by double quotes.']
+      errors: [
+        {
+          message: 'Expected to be enclosed by double quotes.',
+          line: 1,
+          column: 21,
+          endLine: 1,
+          endColumn: 32
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div attr=foo"bar\'baz></div></template>',
       output: "<template><div attr='foo\"bar&apos;baz'></div></template>",
       options: ['single', { avoidEscape: true }],
-      errors: ['Expected to be enclosed by single quotes.']
+      errors: [
+        {
+          message: 'Expected to be enclosed by single quotes.',
+          line: 1,
+          column: 21,
+          endLine: 1,
+          endColumn: 32
+        }
+      ]
     }
   ]
 })
diff --git a/tests/lib/rules/html-self-closing.js b/tests/lib/rules/html-self-closing.js
index a93844739..37991580a 100644
--- a/tests/lib/rules/html-self-closing.js
+++ b/tests/lib/rules/html-self-closing.js
@@ -5,19 +5,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/html-self-closing')
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser')
+  languageOptions: { parser: require('vue-eslint-parser') }
 })
 
 const ALL_CODE = `<template>
@@ -72,8 +64,12 @@ tester.run('html-self-closing', rule, {
     '<template><div a=">test</div></template>',
     '<template><div><!--test</div></template>',
 
+    // Empty top-level tags
+    '<template></template><script></script><docs></docs>',
+
     // https://github.com/vuejs/eslint-plugin-vue/issues/1403
     {
+      filename: 'test.vue',
       code: `
       <template>
         <div>
@@ -84,8 +80,7 @@ tester.run('html-self-closing', rule, {
           </p>
         </div>
       </template>
-      `,
-      filename: 'test.vue'
+      `
     }
 
     // other cases are in `invalid` tests.
@@ -95,27 +90,68 @@ tester.run('html-self-closing', rule, {
     {
       code: '<template><div></div></template>',
       output: '<template><div/></template>',
-      errors: ['Require self-closing on HTML elements (<div>).']
+      errors: [
+        {
+          message: 'Require self-closing on HTML elements (<div>).',
+          line: 1,
+          column: 16,
+          endLine: 1,
+          endColumn: 22
+        }
+      ]
     },
     {
       code: '<template><img/></template>',
       output: '<template><img></template>',
-      errors: ['Disallow self-closing on HTML void elements (<img/>).']
+      errors: [
+        {
+          message: 'Disallow self-closing on HTML void elements (<img/>).',
+          line: 1,
+          column: 15,
+          endLine: 1,
+          endColumn: 17
+        }
+      ]
     },
     {
       code: '<template><x-test></x-test></template>',
       output: '<template><x-test/></template>',
-      errors: ['Require self-closing on Vue.js custom components (<x-test>).']
+      errors: [
+        {
+          message:
+            'Require self-closing on Vue.js custom components (<x-test>).',
+          line: 1,
+          column: 19,
+          endLine: 1,
+          endColumn: 28
+        }
+      ]
     },
     {
       code: '<template><svg><path></path></svg></template>',
       output: '<template><svg><path/></svg></template>',
-      errors: ['Require self-closing on SVG elements (<path>).']
+      errors: [
+        {
+          message: 'Require self-closing on SVG elements (<path>).',
+          line: 1,
+          column: 22,
+          endLine: 1,
+          endColumn: 29
+        }
+      ]
     },
     {
       code: '<template><math><mspace></mspace></math></template>',
       output: '<template><math><mspace/></math></template>',
-      errors: ['Require self-closing on MathML elements (<mspace>).']
+      errors: [
+        {
+          message: 'Require self-closing on MathML elements (<mspace>).',
+          line: 1,
+          column: 25,
+          endLine: 1,
+          endColumn: 34
+        }
+      ]
     },
 
     // others
@@ -135,7 +171,13 @@ tester.run('html-self-closing', rule, {
 </template>`,
       options: [anyWith({ html: { normal: 'always' } })],
       errors: [
-        { message: 'Require self-closing on HTML elements (<div>).', line: 2 }
+        {
+          message: 'Require self-closing on HTML elements (<div>).',
+          line: 2,
+          column: 8,
+          endLine: 2,
+          endColumn: 14
+        }
       ]
     },
     {
@@ -154,7 +196,13 @@ tester.run('html-self-closing', rule, {
 </template>`,
       options: [anyWith({ html: { normal: 'never' } })],
       errors: [
-        { message: 'Disallow self-closing on HTML elements (<div/>).', line: 3 }
+        {
+          message: 'Disallow self-closing on HTML elements (<div/>).',
+          line: 3,
+          column: 7,
+          endLine: 3,
+          endColumn: 9
+        }
       ]
     },
     {
@@ -175,7 +223,10 @@ tester.run('html-self-closing', rule, {
       errors: [
         {
           message: 'Require self-closing on HTML void elements (<img>).',
-          line: 4
+          line: 4,
+          column: 3,
+          endLine: 4,
+          endColumn: 8
         }
       ]
     },
@@ -197,7 +248,10 @@ tester.run('html-self-closing', rule, {
       errors: [
         {
           message: 'Disallow self-closing on HTML void elements (<img/>).',
-          line: 5
+          line: 5,
+          column: 7,
+          endLine: 5,
+          endColumn: 9
         }
       ]
     },
@@ -220,7 +274,10 @@ tester.run('html-self-closing', rule, {
         {
           message:
             'Require self-closing on Vue.js custom components (<x-test>).',
-          line: 6
+          line: 6,
+          column: 11,
+          endLine: 6,
+          endColumn: 20
         }
       ]
     },
@@ -243,7 +300,10 @@ tester.run('html-self-closing', rule, {
         {
           message:
             'Disallow self-closing on Vue.js custom components (<x-test/>).',
-          line: 7
+          line: 7,
+          column: 10,
+          endLine: 7,
+          endColumn: 12
         }
       ]
     },
@@ -263,7 +323,13 @@ tester.run('html-self-closing', rule, {
 </template>`,
       options: [anyWith({ svg: 'always' })],
       errors: [
-        { message: 'Require self-closing on SVG elements (<path>).', line: 8 }
+        {
+          message: 'Require self-closing on SVG elements (<path>).',
+          line: 8,
+          column: 14,
+          endLine: 8,
+          endColumn: 21
+        }
       ]
     },
     {
@@ -282,7 +348,13 @@ tester.run('html-self-closing', rule, {
 </template>`,
       options: [anyWith({ svg: 'never' })],
       errors: [
-        { message: 'Disallow self-closing on SVG elements (<path/>).', line: 9 }
+        {
+          message: 'Disallow self-closing on SVG elements (<path/>).',
+          line: 9,
+          column: 13,
+          endLine: 9,
+          endColumn: 15
+        }
       ]
     },
     {
@@ -303,7 +375,10 @@ tester.run('html-self-closing', rule, {
       errors: [
         {
           message: 'Require self-closing on MathML elements (<mspace>).',
-          line: 10
+          line: 10,
+          column: 17,
+          endLine: 10,
+          endColumn: 26
         }
       ]
     },
@@ -325,7 +400,10 @@ tester.run('html-self-closing', rule, {
       errors: [
         {
           message: 'Disallow self-closing on MathML elements (<mspace/>).',
-          line: 11
+          line: 11,
+          column: 16,
+          endLine: 11,
+          endColumn: 18
         }
       ]
     }
diff --git a/tests/lib/rules/jsx-uses-vars.js b/tests/lib/rules/jsx-uses-vars.js
index f8b700bd6..0f7c71146 100644
--- a/tests/lib/rules/jsx-uses-vars.js
+++ b/tests/lib/rules/jsx-uses-vars.js
@@ -4,40 +4,53 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const eslint = require('eslint')
+const semver = require('semver')
+const { RuleTester, ESLint } = require('../../eslint-compat')
 const rule = require('../../../lib/rules/jsx-uses-vars')
-const ruleNoUnusedVars = new (require('eslint').Linter)()
-  .getRules()
-  .get('no-unused-vars')
+const { getCoreRule } = require('../../../lib/utils')
+const ruleNoUnusedVars = getCoreRule('no-unused-vars')
 
-const RuleTester = eslint.RuleTester
 const ruleTester = new RuleTester({
-  parserOptions: {
+  languageOptions: {
     ecmaVersion: 6,
     sourceType: 'module',
-    ecmaFeatures: {
-      jsx: true
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true
+      }
+    }
+  },
+  plugins: {
+    vue: {
+      rules: {
+        'jsx-uses-vars': rule
+      }
     }
   }
 })
 
-const linter = ruleTester.linter || eslint.linter
-linter.defineRule('jsx-uses-vars', rule)
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+ruleTester.run('jsx-uses-vars', rule, {
+  // Visually check that there are no warnings in the console.
+  valid: [
+    `
+      import SomeComponent from './SomeComponent.jsx';
+      export default {
+        render () {
+          return (
+            <SomeComponent msg="Hello world"></SomeComponent>
+          )
+        },
+      };
+    `
+  ],
+  invalid: []
+})
 
 describe('jsx-uses-vars', () => {
   ruleTester.run('no-unused-vars', ruleNoUnusedVars, {
     valid: [
-      {
-        code: `
-        /* eslint jsx-uses-vars: 1 */
+      `
+        /* eslint vue/jsx-uses-vars: 1 */
         import SomeComponent from './SomeComponent.jsx';
         export default {
           render () {
@@ -46,11 +59,9 @@ describe('jsx-uses-vars', () => {
             )
           },
         };
+      `,
       `
-      },
-      {
-        code: `
-        /* eslint jsx-uses-vars: 1 */
+        /* eslint vue/jsx-uses-vars: 1 */
         import SomeComponent from './SomeComponent.vue';
         import OtherComponent from './OtherComponent.vue';
 
@@ -71,11 +82,9 @@ describe('jsx-uses-vars', () => {
             )
           }
         }
+      `,
       `
-      },
-      {
-        code: `
-        /* eslint jsx-uses-vars: 1 */
+        /* eslint vue/jsx-uses-vars: 1 */
         export default {
           render () {
             return (
@@ -84,13 +93,12 @@ describe('jsx-uses-vars', () => {
           }
         }
       `
-      }
     ],
 
     invalid: [
       {
         code: `
-        /* eslint jsx-uses-vars: 1 */
+        /* eslint vue/jsx-uses-vars: 1 */
         import SomeComponent from './SomeComponent.jsx';
         export default {
           render () {
@@ -100,13 +108,33 @@ describe('jsx-uses-vars', () => {
       `,
         errors: [
           {
-            message: "'SomeComponent' is defined but never used."
+            message: "'SomeComponent' is defined but never used.",
+            suggestions: semver.gte(ESLint.version, '9.17.0')
+              ? [
+                  {
+                    desc: "Remove unused variable 'SomeComponent'.",
+                    output: `
+        /* eslint vue/jsx-uses-vars: 1 */
+        import './SomeComponent.jsx';
+        export default {
+          render () {
+            return <div></div>;
+          },
+        };
+      `
+                  }
+                ]
+              : null,
+            line: 3,
+            column: 16,
+            endLine: 3,
+            endColumn: 29
           }
         ]
       },
       {
         code: `
-        /* eslint jsx-uses-vars: 1 */
+        /* eslint vue/jsx-uses-vars: 1 */
         import SomeComponent from './SomeComponent.jsx';
         const wrapper = {
           something: SomeComponent,
@@ -120,7 +148,29 @@ describe('jsx-uses-vars', () => {
       `,
         errors: [
           {
-            message: "'wrapper' is assigned a value but never used."
+            message: "'wrapper' is assigned a value but never used.",
+            suggestions: semver.gte(ESLint.version, '9.17.0')
+              ? [
+                  {
+                    desc: "Remove unused variable 'wrapper'.",
+                    output: `
+        /* eslint vue/jsx-uses-vars: 1 */
+        import SomeComponent from './SomeComponent.jsx';
+        
+
+        export default {
+          render () {
+            return <div></div>;
+          },
+        };
+      `
+                  }
+                ]
+              : null,
+            line: 4,
+            column: 15,
+            endLine: 4,
+            endColumn: 22
           }
         ]
       }
diff --git a/tests/lib/rules/key-spacing.js b/tests/lib/rules/key-spacing.js
index 519230e23..c8a5a9ddd 100644
--- a/tests/lib/rules/key-spacing.js
+++ b/tests/lib/rules/key-spacing.js
@@ -3,12 +3,11 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/key-spacing')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('key-spacing', rule, {
@@ -25,17 +24,41 @@ tester.run('key-spacing', rule, {
       code: '<template><div :attr="{a :1}" /></template>',
       output: '<template><div :attr="{a: 1}" /></template>',
       errors: [
-        "Extra space after key 'a'.",
-        "Missing space before value for key 'a'."
+        {
+          message: "Extra space after key 'a'.",
+          line: 1,
+          column: 25,
+          endLine: 1,
+          endColumn: 26
+        },
+        {
+          message: "Missing space before value for key 'a'.",
+          line: 1,
+          column: 27,
+          endLine: 1,
+          endColumn: 28
+        }
       ]
     },
     {
       code: '<template><div :[{a:1}[`a`]]="{a:1}[`a`]" /></template>',
-      options: [{ beforeColon: true }],
       output: '<template><div :[{a:1}[`a`]]="{a : 1}[`a`]" /></template>',
+      options: [{ beforeColon: true }],
       errors: [
-        "Missing space after key 'a'.",
-        "Missing space before value for key 'a'."
+        {
+          message: "Missing space after key 'a'.",
+          line: 1,
+          column: 32,
+          endLine: 1,
+          endColumn: 33
+        },
+        {
+          message: "Missing space before value for key 'a'.",
+          line: 1,
+          column: 34,
+          endLine: 1,
+          endColumn: 35
+        }
       ]
     }
   ]
diff --git a/tests/lib/rules/keyword-spacing.js b/tests/lib/rules/keyword-spacing.js
index dad5574e5..3236a1fa1 100644
--- a/tests/lib/rules/keyword-spacing.js
+++ b/tests/lib/rules/keyword-spacing.js
@@ -3,12 +3,11 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/keyword-spacing')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('keyword-spacing', rule, {
@@ -69,23 +68,38 @@ tester.run('keyword-spacing', rule, {
       errors: [
         {
           message: 'Expected space(s) after "if".',
-          line: 3
+          line: 3,
+          column: 11,
+          endLine: 3,
+          endColumn: 13
         },
         {
           message: 'Expected space(s) before "else".',
-          line: 5
+          line: 5,
+          column: 12,
+          endLine: 5,
+          endColumn: 16
         },
         {
           message: 'Expected space(s) after "if".',
-          line: 5
+          line: 5,
+          column: 17,
+          endLine: 5,
+          endColumn: 19
         },
         {
           message: 'Expected space(s) before "else".',
-          line: 7
+          line: 7,
+          column: 12,
+          endLine: 7,
+          endColumn: 16
         },
         {
           message: 'Expected space(s) after "else".',
-          line: 7
+          line: 7,
+          column: 12,
+          endLine: 7,
+          endColumn: 16
         }
       ]
     },
@@ -101,7 +115,6 @@ tester.run('keyword-spacing', rule, {
           }
         " />
       </template>`,
-      options: [{ before: false, after: false }],
       output: `<template>
         <div @event="
           if(foo) {
@@ -113,26 +126,42 @@ tester.run('keyword-spacing', rule, {
           }
         " />
       </template>`,
+      options: [{ before: false, after: false }],
       errors: [
         {
           message: 'Unexpected space(s) after "if".',
-          line: 3
+          line: 3,
+          column: 13,
+          endLine: 3,
+          endColumn: 14
         },
         {
           message: 'Unexpected space(s) before "else".',
-          line: 5
+          line: 5,
+          column: 12,
+          endLine: 5,
+          endColumn: 13
         },
         {
           message: 'Unexpected space(s) after "if".',
-          line: 5
+          line: 5,
+          column: 20,
+          endLine: 5,
+          endColumn: 21
         },
         {
           message: 'Unexpected space(s) before "else".',
-          line: 7
+          line: 7,
+          column: 12,
+          endLine: 7,
+          endColumn: 13
         },
         {
           message: 'Unexpected space(s) after "else".',
-          line: 7
+          line: 7,
+          column: 17,
+          endLine: 7,
+          endColumn: 18
         }
       ]
     },
@@ -146,7 +175,10 @@ tester.run('keyword-spacing', rule, {
       errors: [
         {
           message: 'Expected space(s) after "return".',
-          line: 2
+          line: 2,
+          column: 56,
+          endLine: 2,
+          endColumn: 62
         }
       ]
     }
diff --git a/tests/lib/rules/match-component-file-name.js b/tests/lib/rules/match-component-file-name.js
index 83610962c..494c8455a 100644
--- a/tests/lib/rules/match-component-file-name.js
+++ b/tests/lib/rules/match-component-file-name.js
@@ -4,30 +4,24 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/match-component-file-name')
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 
-const jsxParserOptions = {
+const jsxLanguageOptions = {
   ecmaVersion: 2018,
   sourceType: 'module',
-  ecmaFeatures: { jsx: true }
+  parserOptions: {
+    ecmaFeatures: { jsx: true }
+  }
 }
 
-const parserOptions = {
+const languageOptions = {
   ecmaVersion: 2018,
   sourceType: 'module'
 }
 
 const ruleTester = new RuleTester()
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 ruleTester.run('match-component-file-name', rule, {
   valid: [
     // .jsx
@@ -38,7 +32,7 @@ ruleTester.run('match-component-file-name', rule, {
           render() { return <div /> }
         }
       `,
-      parserOptions: jsxParserOptions
+      languageOptions: jsxLanguageOptions
     },
     {
       filename: 'MyComponent.jsx',
@@ -48,7 +42,7 @@ ruleTester.run('match-component-file-name', rule, {
           render() { return <div /> }
         }
       `,
-      parserOptions: jsxParserOptions
+      languageOptions: jsxLanguageOptions
     },
     {
       filename: 'MyComponent.jsx',
@@ -59,7 +53,7 @@ ruleTester.run('match-component-file-name', rule, {
         }
       `,
       options: [{ extensions: ['jsx'] }],
-      parserOptions: jsxParserOptions
+      languageOptions: jsxLanguageOptions
     },
     {
       filename: 'MyComponent.jsx',
@@ -70,7 +64,7 @@ ruleTester.run('match-component-file-name', rule, {
         }
       `,
       options: [{ extensions: ['jsx'] }],
-      parserOptions: jsxParserOptions
+      languageOptions: jsxLanguageOptions
     },
     {
       filename: 'MyComponent.jsx',
@@ -81,7 +75,7 @@ ruleTester.run('match-component-file-name', rule, {
         }
       `,
       options: [{ extensions: ['jsx'] }],
-      parserOptions: jsxParserOptions
+      languageOptions: jsxLanguageOptions
     },
     {
       filename: 'MyComponent.jsx',
@@ -92,7 +86,7 @@ ruleTester.run('match-component-file-name', rule, {
         }
       `,
       options: [{ extensions: ['jsx'] }],
-      parserOptions: jsxParserOptions
+      languageOptions: jsxLanguageOptions
     },
     {
       filename: 'MyComponent.jsx',
@@ -103,7 +97,7 @@ ruleTester.run('match-component-file-name', rule, {
         }
       `,
       options: [{ extensions: ['jsx'] }],
-      parserOptions: jsxParserOptions
+      languageOptions: jsxLanguageOptions
     },
     {
       filename: 'MyComponent.jsx',
@@ -114,7 +108,7 @@ ruleTester.run('match-component-file-name', rule, {
         }
       `,
       options: [{ extensions: ['vue'] }], // missing jsx in options
-      parserOptions: jsxParserOptions
+      languageOptions: jsxLanguageOptions
     },
 
     // .vue
@@ -128,8 +122,10 @@ ruleTester.run('match-component-file-name', rule, {
           }
         </script>
       `,
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions // options default to [['jsx']]
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      }
     },
     {
       filename: 'MyComponent.vue',
@@ -142,8 +138,10 @@ ruleTester.run('match-component-file-name', rule, {
         </script>
       `,
       options: [{ extensions: ['jsx'] }], // missing jsx in options
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      }
     },
     {
       filename: 'MyComponent.vue',
@@ -155,8 +153,10 @@ ruleTester.run('match-component-file-name', rule, {
         </script>
       `,
       options: [{ extensions: ['vue'] }],
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      }
     },
     {
       filename: 'MyComponent.vue',
@@ -166,8 +166,10 @@ ruleTester.run('match-component-file-name', rule, {
         </template>
       `,
       options: [{ extensions: ['vue'] }],
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      }
     },
     {
       filename: 'MyComponent.vue',
@@ -180,8 +182,10 @@ ruleTester.run('match-component-file-name', rule, {
         </script>
       `,
       options: [{ extensions: ['vue'] }],
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      }
     },
     {
       filename: 'MyComponent.vue',
@@ -194,8 +198,10 @@ ruleTester.run('match-component-file-name', rule, {
         </script>
       `,
       options: [{ extensions: ['vue'] }],
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      }
     },
     {
       filename: 'MyComponent.vue',
@@ -208,8 +214,10 @@ ruleTester.run('match-component-file-name', rule, {
         </script>
       `,
       options: [{ extensions: ['vue'] }],
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      }
     },
     {
       filename: 'MyComponent.vue',
@@ -222,8 +230,10 @@ ruleTester.run('match-component-file-name', rule, {
         </script>
       `,
       options: [{ extensions: ['vue'] }],
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      }
     },
     {
       filename: 'MyComponent.vue',
@@ -236,8 +246,10 @@ ruleTester.run('match-component-file-name', rule, {
         </script>
       `,
       options: [{ extensions: ['vue'] }],
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      }
     },
 
     // .js
@@ -249,14 +261,14 @@ ruleTester.run('match-component-file-name', rule, {
           template: '<div />'
         })
       `,
-      parserOptions // options default to [['jsx']]
+      languageOptions // options default to [['jsx']]
     },
     {
       filename: 'MyComponent.js',
       code: `
         Vue.mixin({})
       `,
-      parserOptions // options default to [['jsx']]
+      languageOptions // options default to [['jsx']]
     },
     {
       filename: 'MyComponent.js',
@@ -265,7 +277,7 @@ ruleTester.run('match-component-file-name', rule, {
           template: '<div />'
         })
       `,
-      parserOptions // options default to [['jsx']]
+      languageOptions // options default to [['jsx']]
     },
     {
       filename: 'MyComponent.js',
@@ -276,7 +288,7 @@ ruleTester.run('match-component-file-name', rule, {
         })
       `,
       options: [{ extensions: ['vue'] }], // missing 'js' in options
-      parserOptions
+      languageOptions
     },
     {
       filename: 'MyComponent.js',
@@ -284,7 +296,7 @@ ruleTester.run('match-component-file-name', rule, {
         Vue.mixin({})
       `,
       options: [{ extensions: ['vue'] }], // missing 'js' in options
-      parserOptions
+      languageOptions
     },
     {
       filename: 'MyComponent.js',
@@ -294,7 +306,7 @@ ruleTester.run('match-component-file-name', rule, {
         })
       `,
       options: [{ extensions: ['vue'] }], // missing 'js' in options
-      parserOptions
+      languageOptions
     },
     {
       filename: 'MyComponent.js',
@@ -304,7 +316,7 @@ ruleTester.run('match-component-file-name', rule, {
         })
       `,
       options: [{ extensions: ['js'] }],
-      parserOptions
+      languageOptions
     },
     {
       filename: 'MyComponent.js',
@@ -315,7 +327,7 @@ ruleTester.run('match-component-file-name', rule, {
         })
       `,
       options: [{ extensions: ['js'] }],
-      parserOptions
+      languageOptions
     },
     {
       filename: 'MyComponent.js',
@@ -326,7 +338,7 @@ ruleTester.run('match-component-file-name', rule, {
         })
       `,
       options: [{ extensions: ['js'] }],
-      parserOptions
+      languageOptions
     },
     {
       filename: 'MyComponent.js',
@@ -337,7 +349,7 @@ ruleTester.run('match-component-file-name', rule, {
         })
       `,
       options: [{ extensions: ['js'] }],
-      parserOptions
+      languageOptions
     },
     {
       filename: 'MyComponent.js',
@@ -348,7 +360,7 @@ ruleTester.run('match-component-file-name', rule, {
         })
       `,
       options: [{ extensions: ['js'] }],
-      parserOptions
+      languageOptions
     },
     {
       filename: 'MyComponent.js',
@@ -359,7 +371,7 @@ ruleTester.run('match-component-file-name', rule, {
         })
       `,
       options: [{ extensions: ['js'] }],
-      parserOptions
+      languageOptions
     },
     {
       filename: 'MyComponent.js',
@@ -367,7 +379,7 @@ ruleTester.run('match-component-file-name', rule, {
         Vue.mixin({})
       `,
       options: [{ extensions: ['js'] }],
-      parserOptions
+      languageOptions
     },
     {
       filename: 'MyComponent.js',
@@ -377,7 +389,7 @@ ruleTester.run('match-component-file-name', rule, {
         })
       `,
       options: [{ extensions: ['js'] }],
-      parserOptions
+      languageOptions
     },
     {
       filename: 'MyComponent.js',
@@ -387,7 +399,7 @@ ruleTester.run('match-component-file-name', rule, {
         })
       `,
       options: [{ extensions: ['js'] }],
-      parserOptions
+      languageOptions
     },
     {
       filename: 'MyComponent.js',
@@ -397,7 +409,7 @@ ruleTester.run('match-component-file-name', rule, {
         })
       `,
       options: [{ extensions: ['js'] }],
-      parserOptions
+      languageOptions
     },
     {
       filename: 'MyComponent.js',
@@ -407,7 +419,7 @@ ruleTester.run('match-component-file-name', rule, {
         })
       `,
       options: [{ extensions: ['js'] }],
-      parserOptions
+      languageOptions
     },
     {
       filename: 'MyComponent.js',
@@ -417,7 +429,7 @@ ruleTester.run('match-component-file-name', rule, {
         })
       `,
       options: [{ extensions: ['js'] }],
-      parserOptions
+      languageOptions
     },
     {
       filename: 'MyComponent.js',
@@ -427,7 +439,7 @@ ruleTester.run('match-component-file-name', rule, {
         })
       `,
       options: [{ extensions: ['js'] }],
-      parserOptions
+      languageOptions
     },
     {
       filename: 'MyComponent.js',
@@ -437,7 +449,7 @@ ruleTester.run('match-component-file-name', rule, {
         })
       `,
       options: [{ extensions: ['js'] }],
-      parserOptions
+      languageOptions
     },
     {
       filename: 'MyComponent.js',
@@ -447,7 +459,7 @@ ruleTester.run('match-component-file-name', rule, {
         })
       `,
       options: [{ extensions: ['js'] }],
-      parserOptions
+      languageOptions
     },
     {
       filename: 'MyComponent.js',
@@ -457,7 +469,7 @@ ruleTester.run('match-component-file-name', rule, {
         })
       `,
       options: [{ extensions: ['js'] }],
-      parserOptions
+      languageOptions
     },
     {
       filename: 'MyComponent.js',
@@ -467,7 +479,7 @@ ruleTester.run('match-component-file-name', rule, {
         })
       `,
       options: [{ extensions: ['js'] }],
-      parserOptions
+      languageOptions
     },
     {
       filename: 'index.js',
@@ -486,7 +498,7 @@ ruleTester.run('match-component-file-name', rule, {
         })
       `,
       options: [{ extensions: ['js'] }],
-      parserOptions
+      languageOptions
     },
 
     // casing
@@ -498,7 +510,7 @@ ruleTester.run('match-component-file-name', rule, {
           render() { return <div /> }
         }
       `,
-      parserOptions: jsxParserOptions
+      languageOptions: jsxLanguageOptions
     },
     {
       filename: 'my-component.jsx',
@@ -508,7 +520,7 @@ ruleTester.run('match-component-file-name', rule, {
           render() { return <div /> }
         }
       `,
-      parserOptions: jsxParserOptions
+      languageOptions: jsxLanguageOptions
     },
     {
       filename: 'MyComponent.jsx',
@@ -518,7 +530,7 @@ ruleTester.run('match-component-file-name', rule, {
           render() { return <div /> }
         }
       `,
-      parserOptions: jsxParserOptions
+      languageOptions: jsxLanguageOptions
     },
     {
       filename: 'my-component.jsx',
@@ -529,7 +541,7 @@ ruleTester.run('match-component-file-name', rule, {
         }
       `,
       options: [{ shouldMatchCase: true }],
-      parserOptions: jsxParserOptions
+      languageOptions: jsxLanguageOptions
     },
     {
       filename: 'MyComponent.jsx',
@@ -540,13 +552,22 @@ ruleTester.run('match-component-file-name', rule, {
         }
       `,
       options: [{ shouldMatchCase: true }],
-      parserOptions: jsxParserOptions
+      languageOptions: jsxLanguageOptions
     },
     // https://github.com/vuejs/eslint-plugin-vue/issues/1018
     {
       filename: 'test.jsx',
       code: `fn1(component.data)`,
-      parserOptions
+      languageOptions
+    },
+    {
+      filename: 'MyComponent.vue',
+      code: `<script setup> defineOptions({name: 'MyComponent'}) </script>`,
+      options: [{ extensions: ['vue'] }],
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      }
     }
   ],
 
@@ -560,7 +581,7 @@ ruleTester.run('match-component-file-name', rule, {
           render() { return <div /> }
         }
       `,
-      parserOptions: jsxParserOptions,
+      languageOptions: jsxLanguageOptions,
       errors: [
         {
           message:
@@ -575,7 +596,11 @@ ruleTester.run('match-component-file-name', rule, {
         }
       `
             }
-          ]
+          ],
+          line: 3,
+          column: 17,
+          endLine: 3,
+          endColumn: 29
         }
       ]
     },
@@ -588,7 +613,7 @@ ruleTester.run('match-component-file-name', rule, {
         }
       `,
       options: [{ extensions: ['jsx'] }],
-      parserOptions: jsxParserOptions,
+      languageOptions: jsxLanguageOptions,
       errors: [
         {
           message:
@@ -603,7 +628,11 @@ ruleTester.run('match-component-file-name', rule, {
         }
       `
             }
-          ]
+          ],
+          line: 3,
+          column: 17,
+          endLine: 3,
+          endColumn: 29
         }
       ]
     },
@@ -616,7 +645,7 @@ ruleTester.run('match-component-file-name', rule, {
         }
       `,
       options: [{ extensions: ['jsx'] }],
-      parserOptions: jsxParserOptions,
+      languageOptions: jsxLanguageOptions,
       errors: [
         {
           message:
@@ -631,7 +660,11 @@ ruleTester.run('match-component-file-name', rule, {
         }
       `
             }
-          ]
+          ],
+          line: 3,
+          column: 17,
+          endLine: 3,
+          endColumn: 29
         }
       ]
     },
@@ -644,7 +677,7 @@ ruleTester.run('match-component-file-name', rule, {
         }
       `,
       options: [{ extensions: ['jsx'] }],
-      parserOptions: jsxParserOptions,
+      languageOptions: jsxLanguageOptions,
       errors: [
         {
           message:
@@ -659,7 +692,11 @@ ruleTester.run('match-component-file-name', rule, {
         }
       `
             }
-          ]
+          ],
+          line: 3,
+          column: 17,
+          endLine: 3,
+          endColumn: 29
         }
       ]
     },
@@ -676,8 +713,10 @@ ruleTester.run('match-component-file-name', rule, {
         </script>
       `,
       options: [{ extensions: ['vue'] }],
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions,
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      },
       errors: [
         {
           message:
@@ -694,7 +733,11 @@ ruleTester.run('match-component-file-name', rule, {
         </script>
       `
             }
-          ]
+          ],
+          line: 4,
+          column: 19,
+          endLine: 4,
+          endColumn: 31
         }
       ]
     },
@@ -709,8 +752,10 @@ ruleTester.run('match-component-file-name', rule, {
         </script>
       `,
       options: [{ extensions: ['vue'] }],
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions,
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      },
       errors: [
         {
           message:
@@ -727,7 +772,11 @@ ruleTester.run('match-component-file-name', rule, {
         </script>
       `
             }
-          ]
+          ],
+          line: 4,
+          column: 19,
+          endLine: 4,
+          endColumn: 31
         }
       ]
     },
@@ -742,8 +791,10 @@ ruleTester.run('match-component-file-name', rule, {
         </script>
       `,
       options: [{ extensions: ['vue'] }],
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions,
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      },
       errors: [
         {
           message:
@@ -760,7 +811,11 @@ ruleTester.run('match-component-file-name', rule, {
         </script>
       `
             }
-          ]
+          ],
+          line: 4,
+          column: 19,
+          endLine: 4,
+          endColumn: 31
         }
       ]
     },
@@ -775,7 +830,7 @@ ruleTester.run('match-component-file-name', rule, {
         })
       `,
       options: [{ extensions: ['js'] }],
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message:
@@ -790,7 +845,11 @@ ruleTester.run('match-component-file-name', rule, {
         })
       `
             }
-          ]
+          ],
+          line: 3,
+          column: 17,
+          endLine: 3,
+          endColumn: 29
         }
       ]
     },
@@ -803,7 +862,7 @@ ruleTester.run('match-component-file-name', rule, {
         })
       `,
       options: [{ extensions: ['js'] }],
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message:
@@ -818,7 +877,11 @@ ruleTester.run('match-component-file-name', rule, {
         })
       `
             }
-          ]
+          ],
+          line: 3,
+          column: 17,
+          endLine: 3,
+          endColumn: 29
         }
       ]
     },
@@ -831,7 +894,7 @@ ruleTester.run('match-component-file-name', rule, {
         })
       `,
       options: [{ extensions: ['js'] }],
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message:
@@ -846,7 +909,11 @@ ruleTester.run('match-component-file-name', rule, {
         })
       `
             }
-          ]
+          ],
+          line: 3,
+          column: 17,
+          endLine: 3,
+          endColumn: 29
         }
       ]
     },
@@ -858,7 +925,7 @@ ruleTester.run('match-component-file-name', rule, {
         })
       `,
       options: [{ extensions: ['js'] }],
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message:
@@ -872,7 +939,11 @@ ruleTester.run('match-component-file-name', rule, {
         })
       `
             }
-          ]
+          ],
+          line: 3,
+          column: 17,
+          endLine: 3,
+          endColumn: 29
         }
       ]
     },
@@ -884,7 +955,7 @@ ruleTester.run('match-component-file-name', rule, {
         })
       `,
       options: [{ extensions: ['js'] }],
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message:
@@ -898,7 +969,11 @@ ruleTester.run('match-component-file-name', rule, {
         })
       `
             }
-          ]
+          ],
+          line: 3,
+          column: 17,
+          endLine: 3,
+          endColumn: 29
         }
       ]
     },
@@ -910,7 +985,7 @@ ruleTester.run('match-component-file-name', rule, {
         })
       `,
       options: [{ extensions: ['js'] }],
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message:
@@ -924,7 +999,11 @@ ruleTester.run('match-component-file-name', rule, {
         })
       `
             }
-          ]
+          ],
+          line: 3,
+          column: 17,
+          endLine: 3,
+          endColumn: 29
         }
       ]
     },
@@ -936,7 +1015,7 @@ ruleTester.run('match-component-file-name', rule, {
         })
       `,
       options: [{ extensions: ['js'] }],
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message:
@@ -950,7 +1029,11 @@ ruleTester.run('match-component-file-name', rule, {
         })
       `
             }
-          ]
+          ],
+          line: 2,
+          column: 23,
+          endLine: 2,
+          endColumn: 35
         }
       ]
     },
@@ -962,7 +1045,7 @@ ruleTester.run('match-component-file-name', rule, {
         })
       `,
       options: [{ extensions: ['js'] }],
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message:
@@ -976,7 +1059,11 @@ ruleTester.run('match-component-file-name', rule, {
         })
       `
             }
-          ]
+          ],
+          line: 2,
+          column: 23,
+          endLine: 2,
+          endColumn: 35
         }
       ]
     },
@@ -988,7 +1075,7 @@ ruleTester.run('match-component-file-name', rule, {
         })
       `,
       options: [{ extensions: ['js'] }],
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message:
@@ -1002,7 +1089,11 @@ ruleTester.run('match-component-file-name', rule, {
         })
       `
             }
-          ]
+          ],
+          line: 2,
+          column: 23,
+          endLine: 2,
+          endColumn: 35
         }
       ]
     },
@@ -1014,7 +1105,7 @@ ruleTester.run('match-component-file-name', rule, {
         })
       `,
       options: [{ extensions: ['js'] }],
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message:
@@ -1028,7 +1119,11 @@ ruleTester.run('match-component-file-name', rule, {
         })
       `
             }
-          ]
+          ],
+          line: 2,
+          column: 23,
+          endLine: 2,
+          endColumn: 35
         }
       ]
     },
@@ -1043,7 +1138,7 @@ ruleTester.run('match-component-file-name', rule, {
         }
       `,
       options: [{ shouldMatchCase: true }],
-      parserOptions: jsxParserOptions,
+      languageOptions: jsxLanguageOptions,
       errors: [
         {
           message:
@@ -1058,7 +1153,11 @@ ruleTester.run('match-component-file-name', rule, {
         }
       `
             }
-          ]
+          ],
+          line: 3,
+          column: 17,
+          endLine: 3,
+          endColumn: 31
         }
       ]
     },
@@ -1071,7 +1170,7 @@ ruleTester.run('match-component-file-name', rule, {
         }
       `,
       options: [{ shouldMatchCase: true }],
-      parserOptions: jsxParserOptions,
+      languageOptions: jsxLanguageOptions,
       errors: [
         {
           message:
@@ -1086,7 +1185,36 @@ ruleTester.run('match-component-file-name', rule, {
         }
       `
             }
-          ]
+          ],
+          line: 3,
+          column: 17,
+          endLine: 3,
+          endColumn: 30
+        }
+      ]
+    },
+    {
+      filename: 'MyComponent.vue',
+      code: `<script setup> defineOptions({name: 'CoolComponent'}) </script>`,
+      options: [{ extensions: ['vue'] }],
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      },
+      errors: [
+        {
+          message:
+            'Component name `CoolComponent` should match file name `MyComponent`.',
+          suggestions: [
+            {
+              desc: 'Rename component to match file name.',
+              output: `<script setup> defineOptions({name: 'MyComponent'}) </script>`
+            }
+          ],
+          line: 1,
+          column: 37,
+          endLine: 1,
+          endColumn: 52
         }
       ]
     }
diff --git a/tests/lib/rules/match-component-import-name.js b/tests/lib/rules/match-component-import-name.js
index a05bfec1a..be6f0a1aa 100644
--- a/tests/lib/rules/match-component-import-name.js
+++ b/tests/lib/rules/match-component-import-name.js
@@ -4,12 +4,12 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/match-component-import-name')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
     ecmaVersion: 2020,
     sourceType: 'module'
   }
@@ -65,7 +65,9 @@ tester.run('match-component-import-name', rule, {
           message:
             'Component alias InvalidExport should be one of: SomeRandomName, some-random-name.',
           line: 2,
-          column: 47
+          column: 47,
+          endLine: 2,
+          endColumn: 76
         }
       ]
     }
diff --git a/tests/lib/rules/max-attributes-per-line.js b/tests/lib/rules/max-attributes-per-line.js
index 9e14495a2..8fd176be2 100644
--- a/tests/lib/rules/max-attributes-per-line.js
+++ b/tests/lib/rules/max-attributes-per-line.js
@@ -4,41 +4,26 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/max-attributes-per-line')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 ruleTester.run('max-attributes-per-line', rule, {
   valid: [
-    {
-      code: `<template><component></component></template>`
-    },
-    {
-      code: `<template><component
+    `<template><component></component></template>`,
+    `<template><component
         name="John Doe"
         age="30"
         job="Vet"
-      ></component></template>`
-    },
-    {
-      code: `<template><component
+      ></component></template>`,
+    `<template><component
         name="John Doe"
         age="30"
       >
-      </component></template>`
-    },
+      </component></template>`,
     {
       code: `<template><component
         name="John Doe"
@@ -47,13 +32,11 @@ ruleTester.run('max-attributes-per-line', rule, {
       </template>`,
       options: [{ singleline: 1 }]
     },
-    {
-      code: `<template><component job="Vet"
+    `<template><component job="Vet"
         name="John Doe"
         age="30">
         </component>
       </template>`
-    }
   ],
 
   invalid: [
@@ -61,54 +44,112 @@ ruleTester.run('max-attributes-per-line', rule, {
       code: `<template><component name="John Doe" age="30"></component></template>`,
       output: `<template><component name="John Doe"
 age="30"></component></template>`,
-      errors: ["'age' should be on a new line."]
+      errors: [
+        {
+          message: "'age' should be on a new line.",
+          line: 1,
+          column: 38,
+          endLine: 1,
+          endColumn: 46
+        }
+      ]
     },
     {
       code: `<template><component :name="user.name" :age="user.age"></component></template>`,
       output: `<template><component :name="user.name"
 :age="user.age"></component></template>`,
-      errors: ["':age' should be on a new line."]
+      errors: [
+        {
+          message: "':age' should be on a new line.",
+          line: 1,
+          column: 40,
+          endLine: 1,
+          endColumn: 55
+        }
+      ]
     },
     {
       code: `<template><component :is="test" v-bind="user"></component></template>`,
       output: `<template><component :is="test"
 v-bind="user"></component></template>`,
-      errors: ["'v-bind' should be on a new line."]
+      errors: [
+        {
+          message: "'v-bind' should be on a new line.",
+          line: 1,
+          column: 33,
+          endLine: 1,
+          endColumn: 46
+        }
+      ]
     },
     {
       code: `<template><component :name="user.name" @buy="buyProduct"></component></template>`,
       output: `<template><component :name="user.name"
 @buy="buyProduct"></component></template>`,
-      errors: ["'@buy' should be on a new line."]
+      errors: [
+        {
+          message: "'@buy' should be on a new line.",
+          line: 1,
+          column: 40,
+          endLine: 1,
+          endColumn: 57
+        }
+      ]
     },
     {
       code: `<template><component :name="user.name" @click.stop></component></template>`,
       output: `<template><component :name="user.name"
 @click.stop></component></template>`,
-      errors: ["'@click.stop' should be on a new line."]
+      errors: [
+        {
+          message: "'@click.stop' should be on a new line.",
+          line: 1,
+          column: 40,
+          endLine: 1,
+          endColumn: 51
+        }
+      ]
     },
     {
       code: `<template><component :name="user.name" v-if="something"></component></template>`,
       output: `<template><component :name="user.name"
 v-if="something"></component></template>`,
-      errors: ["'v-if' should be on a new line."]
+      errors: [
+        {
+          message: "'v-if' should be on a new line.",
+          line: 1,
+          column: 40,
+          endLine: 1,
+          endColumn: 56
+        }
+      ]
     },
     {
       code: `<template><component name="John Doe"    v-bind:age="user.age"></component></template>`,
       output: `<template><component name="John Doe"
 v-bind:age="user.age"></component></template>`,
-      errors: ["'v-bind:age' should be on a new line."]
+      errors: [
+        {
+          message: "'v-bind:age' should be on a new line.",
+          line: 1,
+          column: 41,
+          endLine: 1,
+          endColumn: 62
+        }
+      ]
     },
     {
       code: `<template><component name="John Doe" age="30" job="Vet"></component></template>`,
-      options: [{ singleline: { max: 2 } }],
       output: `<template><component name="John Doe" age="30"
 job="Vet"></component></template>`,
+      options: [{ singleline: { max: 2 } }],
       errors: [
         {
           message: "'job' should be on a new line.",
-          type: 'VAttribute',
-          line: 1
+          line: 1,
+          column: 47,
+          endLine: 1,
+          endColumn: 56
         }
       ]
     },
@@ -118,18 +159,43 @@ job="Vet"></component></template>`,
         job="Vet">
         </component>
       </template>`,
+      output: `<template><component
+        name="John Doe"
+age="30"
+        job="Vet">
+        </component>
+      </template>`,
       options: [{ singleline: 3, multiline: 1 }],
+      errors: [
+        {
+          message: "'age' should be on a new line.",
+          line: 2,
+          column: 25,
+          endLine: 2,
+          endColumn: 33
+        }
+      ]
+    },
+    {
+      code: `<template><component
+        name="John Doe" age="30"
+        job="Vet">
+        </component>
+      </template>`,
       output: `<template><component
         name="John Doe"
 age="30"
         job="Vet">
         </component>
       </template>`,
+      options: [{ multiline: { max: 1 } }],
       errors: [
         {
           message: "'age' should be on a new line.",
-          type: 'VAttribute',
-          line: 2
+          line: 2,
+          column: 25,
+          endLine: 2,
+          endColumn: 33
         }
       ]
     }
diff --git a/tests/lib/rules/max-len.js b/tests/lib/rules/max-len.js
index 8734d775d..d2df6e62a 100644
--- a/tests/lib/rules/max-len.js
+++ b/tests/lib/rules/max-len.js
@@ -3,20 +3,15 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/max-len')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2017, sourceType: 'module' }
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2017,
+    sourceType: 'module'
+  }
 })
 
 tester.run('max-len', rule, {
@@ -316,11 +311,13 @@ var a = /regexploooooooooooooooooooooooooooooooooooooooooooooooooooooong/.test(b
       errors: [
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 2
+          line: 2,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 3
+          line: 3,
+          column: 1
         }
       ]
     },
@@ -333,11 +330,13 @@ var a = /regexploooooooooooooooooooooooooooooooooooooooooooooooooooooong/.test(b
       errors: [
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 2
+          line: 2,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 3
+          line: 3,
+          column: 1
         }
       ]
     },
@@ -351,11 +350,13 @@ var a = /regexploooooooooooooooooooooooooooooooooooooooooooooooooooooong/.test(b
       errors: [
         {
           message: 'This line has a length of 121. Maximum allowed is 120.',
-          line: 2
+          line: 2,
+          column: 1
         },
         {
           message: 'This line has a length of 121. Maximum allowed is 120.',
-          line: 3
+          line: 3,
+          column: 1
         }
       ]
     },
@@ -369,11 +370,13 @@ var a = /regexploooooooooooooooooooooooooooooooooooooooooooooooooooooong/.test(b
       errors: [
         {
           message: 'This line has a length of 121. Maximum allowed is 120.',
-          line: 2
+          line: 2,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 3
+          line: 3,
+          column: 1
         }
       ]
     },
@@ -386,7 +389,8 @@ var a = /regexploooooooooooooooooooooooooooooooooooooooooooooooooooooong/.test(b
       errors: [
         {
           message: 'This line has a length of 121. Maximum allowed is 120.',
-          line: 2
+          line: 2,
+          column: 1
         }
       ]
     },
@@ -399,7 +403,8 @@ var a = /regexploooooooooooooooooooooooooooooooooooooooooooooooooooooong/.test(b
       errors: [
         {
           message: 'This line has a length of 121. Maximum allowed is 120.',
-          line: 2
+          line: 2,
+          column: 1
         }
       ]
     },
@@ -422,15 +427,18 @@ export default { name: 'fooooooooooooooooooooooooooooooooooooooooooooooooooooooo
       errors: [
         {
           message: 'This line has a length of 82. Maximum allowed is 80.',
-          line: 3
+          line: 3,
+          column: 1
         },
         {
           message: 'This line has a length of 84. Maximum allowed is 80.',
-          line: 5
+          line: 5,
+          column: 1
         },
         {
           message: 'This line has a length of 94. Maximum allowed is 80.',
-          line: 10
+          line: 10,
+          column: 1
         }
       ]
     },
@@ -458,43 +466,53 @@ var b /* comment */ // trailing comments .......................................
       errors: [
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 3
+          line: 3,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 6
+          line: 6,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 7
+          line: 7,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 8
+          line: 8,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 9
+          line: 9,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 10
+          line: 10,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 11
+          line: 11,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 14
+          line: 14,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 15
+          line: 15,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 16
+          line: 16,
+          column: 1
         }
       ]
     },
@@ -521,43 +539,53 @@ var b /* comment */ // trailing comments .......................................
       errors: [
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 3
+          line: 3,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 4
+          line: 4,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 5
+          line: 5,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 8
+          line: 8,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 11
+          line: 11,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 12
+          line: 12,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 13
+          line: 13,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 14
+          line: 14,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 15
+          line: 15,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 16
+          line: 16,
+          column: 1
         }
       ]
     },
@@ -586,7 +614,8 @@ var b /* comment */ // trailing comments .......................................
       errors: [
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 10
+          line: 10,
+          column: 1
         }
       ]
     },
@@ -614,7 +643,8 @@ var b /* comment */ // trailing comments .......................................
       errors: [
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 15
+          line: 15,
+          column: 1
         }
       ]
     },
@@ -643,19 +673,23 @@ var b /* comment */ // trailing comments .......................................
       errors: [
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 3
+          line: 3,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 8
+          line: 8,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 10
+          line: 10,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 16
+          line: 16,
+          column: 1
         }
       ]
     },
@@ -683,19 +717,23 @@ var b /* comment */ // trailing comments .......................................
       errors: [
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 5
+          line: 5,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 8
+          line: 8,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 13
+          line: 13,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 15
+          line: 15,
+          column: 1
         }
       ]
     },
@@ -714,11 +752,13 @@ var a = 'https://www.example.com/long/long/long/long/long/long/long/long/long/lo
       errors: [
         {
           message: 'This line has a length of 89. Maximum allowed is 80.',
-          line: 3
+          line: 3,
+          column: 1
         },
         {
           message: 'This line has a length of 83. Maximum allowed is 80.',
-          line: 7
+          line: 7,
+          column: 1
         }
       ]
     },
@@ -736,11 +776,13 @@ var a = 'https://www.example.com/long/long/long/long/long/long/long/long/long/lo
       errors: [
         {
           message: 'This line has a length of 83. Maximum allowed is 80.',
-          line: 3
+          line: 3,
+          column: 1
         },
         {
           message: 'This line has a length of 89. Maximum allowed is 80.',
-          line: 6
+          line: 6,
+          column: 1
         }
       ]
     },
@@ -765,19 +807,23 @@ var a = 'str-loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong
       errors: [
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 3
+          line: 3,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 6
+          line: 6,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 8
+          line: 8,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 13
+          line: 13,
+          column: 1
         }
       ]
     },
@@ -801,19 +847,23 @@ var a = 'str-loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong
       errors: [
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 3
+          line: 3,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 6
+          line: 6,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 9
+          line: 9,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 11
+          line: 11,
+          column: 1
         }
       ]
     },
@@ -839,7 +889,8 @@ var a = 'str-loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong
       errors: [
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 3
+          line: 3,
+          column: 1
         }
       ]
     },
@@ -864,7 +915,8 @@ var a = 'str-loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong
       errors: [
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 6
+          line: 6,
+          column: 1
         }
       ]
     },
@@ -887,19 +939,23 @@ var b = \`template-looooooooooooooooooooooooooooooooooooooooooooooooooooooooooon
       errors: [
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 4
+          line: 4,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 5
+          line: 5,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 10
+          line: 10,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 11
+          line: 11,
+          column: 1
         }
       ]
     },
@@ -921,19 +977,23 @@ var b = \`template-looooooooooooooooooooooooooooooooooooooooooooooooooooooooooon
       errors: [
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 3
+          line: 3,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 4
+          line: 4,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 8
+          line: 8,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 9
+          line: 9,
+          column: 1
         }
       ]
     },
@@ -957,11 +1017,13 @@ var b = \`template-looooooooooooooooooooooooooooooooooooooooooooooooooooooooooon
       errors: [
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 4
+          line: 4,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 10
+          line: 10,
+          column: 1
         }
       ]
     },
@@ -984,11 +1046,13 @@ var b = \`template-looooooooooooooooooooooooooooooooooooooooooooooooooooooooooon
       errors: [
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 3
+          line: 3,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 8
+          line: 8,
+          column: 1
         }
       ]
     },
@@ -1009,11 +1073,13 @@ var a = /regexploooooooooooooooooooooooooooooooooooooooooooooooooooooong/.test(b
       errors: [
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 4
+          line: 4,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 9
+          line: 9,
+          column: 1
         }
       ]
     },
@@ -1033,11 +1099,13 @@ var a = /regexploooooooooooooooooooooooooooooooooooooooooooooooooooooong/.test(b
       errors: [
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 3
+          line: 3,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 7
+          line: 7,
+          column: 1
         }
       ]
     },
@@ -1053,7 +1121,8 @@ var a = /regexploooooooooooooooooooooooooooooooooooooooooooooooooooooong/.test(b
       errors: [
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 3
+          line: 3,
+          column: 1
         }
       ]
     },
@@ -1071,11 +1140,13 @@ var a = /regexploooooooooooooooooooooooooooooooooooooooooooooooooooooong/.test(b
       errors: [
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 4
+          line: 4,
+          column: 1
         },
         {
           message: 'This line has a length of 88. Maximum allowed is 80.',
-          line: 5
+          line: 5,
+          column: 1
         }
       ]
     },
@@ -1083,33 +1154,63 @@ var a = /regexploooooooooooooooooooooooooooooooooooooooooooooooooooooong/.test(b
     {
       filename: 'test.vue',
       code: `<template><div> 41 cols </div></template>`,
-      errors: ['This line has a length of 41. Maximum allowed is 40.'],
-      options: [40]
+      options: [40],
+      errors: [
+        {
+          message: 'This line has a length of 41. Maximum allowed is 40.',
+          line: 1,
+          column: 1
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: `<template><div> 41 cols </div></template>`,
-      errors: ['This line has a length of 41. Maximum allowed is 40.'],
-      options: [{ code: 40 }]
+      options: [{ code: 40 }],
+      errors: [
+        {
+          message: 'This line has a length of 41. Maximum allowed is 40.',
+          line: 1,
+          column: 1
+        }
+      ]
     },
     // tabWidth
     {
       filename: 'test.vue',
       code: `<template><div>\t41\tcols\t</div></template>`,
-      errors: ['This line has a length of 45. Maximum allowed is 40.'],
-      options: [40, 4]
+      options: [40, 4],
+      errors: [
+        {
+          message: 'This line has a length of 45. Maximum allowed is 40.',
+          line: 1,
+          column: 1
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: `<template><div>\t41\tcols\t</div></template>`,
-      errors: ['This line has a length of 45. Maximum allowed is 40.'],
-      options: [{ code: 40, tabWidth: 4 }]
+      options: [{ code: 40, tabWidth: 4 }],
+      errors: [
+        {
+          message: 'This line has a length of 45. Maximum allowed is 40.',
+          line: 1,
+          column: 1
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: `<template><div>\t41\tcols\t</div></template>`,
-      errors: ['This line has a length of 44. Maximum allowed is 40.'],
-      options: [{ code: 40, tabWidth: 3 }]
+      options: [{ code: 40, tabWidth: 3 }],
+      errors: [
+        {
+          message: 'This line has a length of 44. Maximum allowed is 40.',
+          line: 1,
+          column: 1
+        }
+      ]
     },
     // comments
     {
@@ -1130,34 +1231,39 @@ var a;  // 41 cols comment                      *
 */
 </script>
 `,
+      options: [{ comments: 40 }],
       errors: [
         {
           message:
             'This line has a comment length of 41. Maximum allowed is 40.',
-          line: 3
+          line: 3,
+          column: 1
         },
         {
           message:
             'This line has a comment length of 41. Maximum allowed is 40.',
-          line: 4
+          line: 4,
+          column: 1
         },
         {
           message:
             'This line has a comment length of 41. Maximum allowed is 40.',
-          line: 9
+          line: 9,
+          column: 1
         },
         {
           message:
             'This line has a comment length of 41. Maximum allowed is 40.',
-          line: 12
+          line: 12,
+          column: 1
         },
         {
           message:
             'This line has a comment length of 41. Maximum allowed is 40.',
-          line: 13
+          line: 13,
+          column: 1
         }
-      ],
-      options: [{ comments: 40 }]
+      ]
     },
     // .js
     {
@@ -1167,21 +1273,24 @@ var a = '81 columns                                                            '
 var b = \`81 columns                                                            \`;
 /* 81 columns                                                                  */
       `,
+      options: [],
       errors: [
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 2
+          line: 2,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 3
+          line: 3,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 4
+          line: 4,
+          column: 1
         }
-      ],
-      options: []
+      ]
     },
     {
       filename: 'test.js',
@@ -1190,17 +1299,19 @@ var a = '81 columns          ignoreStrings                                     '
 var b = \`81 columns                                                            \`;
 /* 81 columns                                                                  */
       `,
+      options: [{ ignoreStrings: true }],
       errors: [
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 3
+          line: 3,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 4
+          line: 4,
+          column: 1
         }
-      ],
-      options: [{ ignoreStrings: true }]
+      ]
     },
     {
       filename: 'test.js',
@@ -1209,17 +1320,19 @@ var a = '81 columns                                                            '
 var b = \`81 columns                                                            \`;
 /* 81 columns                                                                  */
       `,
+      options: [{ ignoreComments: true }],
       errors: [
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 2
+          line: 2,
+          column: 1
         },
         {
           message: 'This line has a length of 81. Maximum allowed is 80.',
-          line: 3
+          line: 3,
+          column: 1
         }
-      ],
-      options: [{ ignoreComments: true }]
+      ]
     },
     // only script comment
     {
@@ -1230,24 +1343,27 @@ var b = \`81 columns
 41 cols                                 *
 */
 `,
+      options: [{ comments: 40 }],
       errors: [
         {
           message:
             'This line has a comment length of 41. Maximum allowed is 40.',
-          line: 2
+          line: 2,
+          column: 1
         },
         {
           message:
             'This line has a comment length of 41. Maximum allowed is 40.',
-          line: 3
+          line: 3,
+          column: 1
         },
         {
           message:
             'This line has a comment length of 41. Maximum allowed is 40.',
-          line: 4
+          line: 4,
+          column: 1
         }
-      ],
-      options: [{ comments: 40 }]
+      ]
     }
   ]
 })
diff --git a/tests/lib/rules/max-lines-per-block.js b/tests/lib/rules/max-lines-per-block.js
new file mode 100644
index 000000000..415e0197f
--- /dev/null
+++ b/tests/lib/rules/max-lines-per-block.js
@@ -0,0 +1,88 @@
+/**
+ * @author lsdsjy
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/max-lines-per-block')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('max-lines-per-block', rule, {
+  valid: [
+    {
+      code: `
+      <script>
+        console.log(1)
+      </script>
+      <template>
+        <div></div>
+      </template>
+      `,
+      options: [{ template: 1 }]
+    },
+    {
+      code: `
+      <template>
+
+        <div></div>
+      </template>
+      `,
+      options: [{ template: 1, skipBlankLines: true }]
+    },
+    {
+      code: `
+      <template>
+        <div>
+        </div>
+      </template>
+      `,
+      options: [{ script: 1, style: 1 }]
+    }
+  ],
+  invalid: [
+    {
+      code: `
+      <template>
+
+        <div></div>
+      </template>
+      `,
+      options: [{ template: 1 }],
+      errors: [
+        {
+          message: 'Block has too many lines (2). Maximum allowed is 1.',
+          line: 2,
+          column: 7,
+          endLine: 5,
+          endColumn: 18
+        }
+      ]
+    },
+    {
+      code: `
+      <script>
+
+        const a = 1
+        console.log(a)
+      </script>
+      `,
+      options: [{ script: 1, skipBlankLines: true }],
+      errors: [
+        {
+          message: 'Block has too many lines (2). Maximum allowed is 1.',
+          line: 2,
+          column: 7,
+          endLine: 6,
+          endColumn: 16
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/max-props.js b/tests/lib/rules/max-props.js
new file mode 100644
index 000000000..041a53f4c
--- /dev/null
+++ b/tests/lib/rules/max-props.js
@@ -0,0 +1,248 @@
+/**
+ * @author kevsommer Kevin Sommer
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/max-props')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('max-props', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      defineProps({ prop1: '', prop2: '' })
+      </script>
+      `,
+      options: [{ maxProps: 5 }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      defineProps(['prop1', 'prop2'])
+      </script>
+      `,
+      options: [{ maxProps: 5 }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        props: {
+          prop1: String,
+          prop2: String
+        }
+      }
+      </script>
+      `,
+      options: [{ maxProps: 5 }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        props: {
+          prop1: String,
+          prop2: String,
+          prop3: String,
+          prop4: String,
+          prop5: String
+        }
+      }
+      </script>
+      `,
+      options: [{ maxProps: 5 }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        props: {}
+      }
+      </script>
+      `,
+      options: [{ maxProps: 5 }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      defineProps({})
+      </script>
+      `,
+      options: [{ maxProps: 5 }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      </script>
+      `,
+      options: [{ maxProps: 5 }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      defineProps<{ prop1: string, prop2: string }>();
+      </script>
+      `,
+      options: [{ maxProps: 5 }],
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      defineProps<{prop1: string, prop2: string} | {prop1: number}>()
+      </script>
+      `,
+      options: [{ maxProps: 2 }],
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      defineProps({ prop1: '', prop2: '' })
+      </script>
+      `,
+      options: [{ maxProps: 1 }],
+      errors: [
+        {
+          message: 'Component has too many props (2). Maximum allowed is 1.',
+          line: 3,
+          endLine: 3,
+          column: 7,
+          endColumn: 44
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        props: {
+          prop1: String,
+          prop2: String
+        }
+      }
+      </script>
+      `,
+      options: [{ maxProps: 1 }],
+      errors: [
+        {
+          message: 'Component has too many props (2). Maximum allowed is 1.',
+          line: 4,
+          endLine: 7,
+          column: 9,
+          endColumn: 10
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      defineProps<{ prop1: string, prop2: string, prop3: string }>();
+      </script>
+      `,
+      options: [{ maxProps: 2 }],
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          message: 'Component has too many props (3). Maximum allowed is 2.',
+          line: 3,
+          endLine: 3,
+          column: 7,
+          endColumn: 69
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      defineProps<{prop1: string, prop2: string} | {prop1: number, prop3: string}>()
+      </script>
+      `,
+      options: [{ maxProps: 2 }],
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          message: 'Component has too many props (3). Maximum allowed is 2.',
+          line: 3,
+          endLine: 3,
+          column: 7,
+          endColumn: 85
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      defineProps<{
+        prop1: string
+      } & {
+        prop2?: true;
+        prop3?: never;
+      } | {
+        prop2?: false;
+        prop3?: boolean;
+      }>()
+      </script>
+      `,
+      options: [{ maxProps: 2 }],
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          message: 'Component has too many props (3). Maximum allowed is 2.',
+          line: 3,
+          endLine: 11,
+          column: 7,
+          endColumn: 11
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/max-template-depth.js b/tests/lib/rules/max-template-depth.js
new file mode 100644
index 000000000..b5fc4cb91
--- /dev/null
+++ b/tests/lib/rules/max-template-depth.js
@@ -0,0 +1,180 @@
+/**
+ * @author kevsommer Kevin Sommer
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/max-template-depth')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('max-template-depth', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+      <main-container>
+        <child-component>
+          <div />
+        </child-component>
+      </main-container>
+      </template>
+      `,
+      options: [{ maxDepth: 3 }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+      <main-container>
+        <ul>
+          <li>Item 1</li>
+        </ul>
+      </main-container>
+      </template>
+      `,
+      options: [{ maxDepth: 4 }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+      <main-container>
+        <child-component>
+          <sub-child-component>
+            <div />
+          </sub-child-component>
+        </child-component>
+      </main-container>
+      </template>
+      `,
+      options: [{ maxDepth: 4 }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+      <div>
+      </div>
+      <main-container>
+        <child-component>
+          <ul>
+            <li />
+          </ul>
+        </child-component>
+      </main-container>
+      </template>
+      `,
+      options: [{ maxDepth: 4 }]
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+      <div>
+        <div>
+          <div>
+            <div />
+          </div>
+        </div>
+      </div>
+      </template>
+      `,
+      options: [{ maxDepth: 3 }],
+      errors: [
+        {
+          message:
+            'Element is nested too deeply (depth of 4, maximum allowed is 3).',
+          line: 6,
+          column: 13,
+          endLine: 6,
+          endColumn: 20
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+      <side-container>
+        <child-component />
+      </side-container>
+      <main-container>
+        <child-component>
+          <nested-component>
+            <h1 />
+          </nested-component>
+        </child-component>
+      </main-container>
+      </template>
+      `,
+      options: [{ maxDepth: 3 }],
+      errors: [
+        {
+          message:
+            'Element is nested too deeply (depth of 4, maximum allowed is 3).',
+          line: 9,
+          column: 13,
+          endLine: 9,
+          endColumn: 19
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+      <main-container>
+        <nav-bar>
+          <div />
+        </nav-bar>
+        <child-component>
+          <nested-component>
+            <div>
+              <div />
+            <div>
+          </nested-component>
+        </child-component>
+      </main-container>
+      </template>
+      `,
+      options: [{ maxDepth: 3 }],
+      errors: [
+        {
+          message:
+            'Element is nested too deeply (depth of 4, maximum allowed is 3).',
+          line: 9,
+          endLine: 12,
+          column: 13,
+          endColumn: 11
+        },
+        {
+          message:
+            'Element is nested too deeply (depth of 5, maximum allowed is 3).',
+          line: 10,
+          endLine: 10,
+          column: 15,
+          endColumn: 22
+        },
+        {
+          message:
+            'Element is nested too deeply (depth of 5, maximum allowed is 3).',
+          line: 11,
+          endLine: 12,
+          column: 13,
+          endColumn: 11
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/multi-word-component-names.js b/tests/lib/rules/multi-word-component-names.js
index d11b11d3f..8ad8865d8 100644
--- a/tests/lib/rules/multi-word-component-names.js
+++ b/tests/lib/rules/multi-word-component-names.js
@@ -4,12 +4,12 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/multi-word-component-names')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
     ecmaVersion: 2020,
     sourceType: 'module'
   }
@@ -165,14 +165,14 @@ tester.run('multi-word-component-names', rule, {
     },
     {
       filename: 'test.vue',
-      options: [{ ignores: ['Todo'] }],
       code: `
       <script>
       export default {
         name: 'Todo'
       }
       </script>
-      `
+      `,
+      options: [{ ignores: ['Todo'] }]
     },
     {
       filename: 'test.js',
@@ -209,10 +209,18 @@ tester.run('multi-word-component-names', rule, {
       <template>
         <AppButton />
       </template>
-      
+
       <script setup lang="ts">
       import AppButton from "@/components/AppButton.vue";
       </script>`
+    },
+    {
+      filename: 'Single.vue',
+      code: `
+      <script setup>
+      defineOptions({name: 'MultiWord'})
+      </script>
+      `
     }
   ],
   invalid: [
@@ -222,7 +230,8 @@ tester.run('multi-word-component-names', rule, {
       errors: [
         {
           message: 'Component name "test" should always be multi-word.',
-          line: 1
+          line: 1,
+          column: 1
         }
       ]
     },
@@ -235,7 +244,10 @@ tester.run('multi-word-component-names', rule, {
       errors: [
         {
           message: 'Component name "test" should always be multi-word.',
-          line: 3
+          line: 3,
+          column: 32,
+          endLine: 3,
+          endColumn: 38
         }
       ]
     },
@@ -248,7 +260,10 @@ tester.run('multi-word-component-names', rule, {
       errors: [
         {
           message: 'Component name "test" should always be multi-word.',
-          line: 3
+          line: 3,
+          column: 23,
+          endLine: 3,
+          endColumn: 29
         }
       ]
     },
@@ -261,7 +276,10 @@ tester.run('multi-word-component-names', rule, {
       errors: [
         {
           message: 'Component name "invalid" should always be multi-word.',
-          line: 3
+          line: 3,
+          column: 32,
+          endLine: 3,
+          endColumn: 41
         }
       ]
     },
@@ -274,7 +292,10 @@ tester.run('multi-word-component-names', rule, {
       errors: [
         {
           message: 'Component name "invalid" should always be multi-word.',
-          line: 3
+          line: 3,
+          column: 23,
+          endLine: 3,
+          endColumn: 32
         }
       ]
     },
@@ -287,7 +308,8 @@ tester.run('multi-word-component-names', rule, {
       errors: [
         {
           message: 'Component name "invalid" should always be multi-word.',
-          line: 1
+          line: 1,
+          column: 1
         }
       ]
     },
@@ -300,13 +322,15 @@ tester.run('multi-word-component-names', rule, {
       errors: [
         {
           message: 'Component name "" should always be multi-word.',
-          line: 3
+          line: 3,
+          column: 23,
+          endLine: 3,
+          endColumn: 25
         }
       ]
     },
     {
       filename: 'test.vue',
-      options: [{ ignores: ['Todo'] }],
       code: `
       <script>
       export default {
@@ -314,10 +338,14 @@ tester.run('multi-word-component-names', rule, {
       }
       </script>
       `,
+      options: [{ ignores: ['Todo'] }],
       errors: [
         {
           message: 'Component name "Item" should always be multi-word.',
-          line: 4
+          line: 4,
+          column: 15,
+          endLine: 4,
+          endColumn: 21
         }
       ]
     },
@@ -330,7 +358,25 @@ tester.run('multi-word-component-names', rule, {
       errors: [
         {
           message: 'Component name "test" should always be multi-word.',
-          line: 1
+          line: 1,
+          column: 1
+        }
+      ]
+    },
+    {
+      filename: 'MultiWord.vue',
+      code: `
+      <script setup>
+      defineOptions({name: 'Single'})
+      </script>
+      `,
+      errors: [
+        {
+          message: 'Component name "Single" should always be multi-word.',
+          line: 3,
+          column: 28,
+          endLine: 3,
+          endColumn: 36
         }
       ]
     }
diff --git a/tests/lib/rules/multiline-html-element-content-newline.js b/tests/lib/rules/multiline-html-element-content-newline.js
index d566707d3..8d7d648c4 100644
--- a/tests/lib/rules/multiline-html-element-content-newline.js
+++ b/tests/lib/rules/multiline-html-element-content-newline.js
@@ -3,22 +3,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/multiline-html-element-content-newline')
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
-    ecmaVersion: 2015
-  }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('multiline-html-element-content-newline', rule, {
@@ -293,7 +282,6 @@ content
             'Expected 1 line break after opening tag (`<div>`), but no line breaks found.',
           line: 5,
           column: 12,
-          type: 'HTMLTagClose',
           endLine: 5,
           endColumn: 12
         },
@@ -302,7 +290,6 @@ content
             'Expected 1 line break before closing tag (`</div>`), but no line breaks found.',
           line: 5,
           column: 19,
-          type: 'HTMLEndTagOpen',
           endLine: 5,
           endColumn: 19
         }
@@ -395,8 +382,22 @@ multiline
 </div>
         </template>`,
       errors: [
-        'Expected 1 line break after opening tag (`<div>`), but no line breaks found.',
-        'Expected 1 line break before closing tag (`</div>`), but no line breaks found.'
+        {
+          message:
+            'Expected 1 line break after opening tag (`<div>`), but no line breaks found.',
+          line: 3,
+          column: 16,
+          endLine: 3,
+          endColumn: 16
+        },
+        {
+          message:
+            'Expected 1 line break before closing tag (`</div>`), but no line breaks found.',
+          line: 4,
+          column: 20,
+          endLine: 4,
+          endColumn: 20
+        }
       ]
     },
     {
@@ -412,7 +413,14 @@ multiline content
           </div>
         </template>`,
       errors: [
-        'Expected 1 line break after opening tag (`<div>`), but no line breaks found.'
+        {
+          message:
+            'Expected 1 line break after opening tag (`<div>`), but no line breaks found.',
+          line: 3,
+          column: 16,
+          endLine: 3,
+          endColumn: 16
+        }
       ]
     },
     {
@@ -428,7 +436,14 @@ multiline content
 </div>
         </template>`,
       errors: [
-        'Expected 1 line break before closing tag (`</div>`), but no line breaks found.'
+        {
+          message:
+            'Expected 1 line break before closing tag (`</div>`), but no line breaks found.',
+          line: 4,
+          column: 30,
+          endLine: 4,
+          endColumn: 30
+        }
       ]
     },
     // comments
@@ -448,8 +463,22 @@ multiline content
         </template>
       `,
       errors: [
-        'Expected 1 line break after opening tag (`<div>`), but no line breaks found.',
-        'Expected 1 line break before closing tag (`</div>`), but no line breaks found.'
+        {
+          message:
+            'Expected 1 line break after opening tag (`<div>`), but no line breaks found.',
+          line: 3,
+          column: 16,
+          endLine: 3,
+          endColumn: 16
+        },
+        {
+          message:
+            'Expected 1 line break before closing tag (`</div>`), but no line breaks found.',
+          line: 4,
+          column: 25,
+          endLine: 4,
+          endColumn: 25
+        }
       ]
     },
     {
@@ -468,8 +497,22 @@ multiline content
         </template>
       `,
       errors: [
-        'Expected 1 line break after opening tag (`<div>`), but no line breaks found.',
-        'Expected 1 line break before closing tag (`</div>`), but no line breaks found.'
+        {
+          message:
+            'Expected 1 line break after opening tag (`<div>`), but no line breaks found.',
+          line: 3,
+          column: 16,
+          endLine: 3,
+          endColumn: 16
+        },
+        {
+          message:
+            'Expected 1 line break before closing tag (`</div>`), but no line breaks found.',
+          line: 4,
+          column: 23,
+          endLine: 4,
+          endColumn: 23
+        }
       ]
     },
     // one error
@@ -490,7 +533,14 @@ content
         </template>
       `,
       errors: [
-        'Expected 1 line break after opening tag (`<div>`), but no line breaks found.'
+        {
+          message:
+            'Expected 1 line break after opening tag (`<div>`), but no line breaks found.',
+          line: 3,
+          column: 16,
+          endLine: 3,
+          endColumn: 16
+        }
       ]
     },
     {
@@ -510,7 +560,14 @@ content
         </template>
       `,
       errors: [
-        'Expected 1 line break before closing tag (`</div>`), but no line breaks found.'
+        {
+          message:
+            'Expected 1 line break before closing tag (`</div>`), but no line breaks found.',
+          line: 5,
+          column: 18,
+          endLine: 5,
+          endColumn: 18
+        }
       ]
     },
     // multi
@@ -530,12 +587,54 @@ content
 </template>
       `,
       errors: [
-        'Expected 1 line break after opening tag (`<template>`), but no line breaks found.',
-        'Expected 1 line break after opening tag (`<div>`), but no line breaks found.',
-        'Expected 1 line break after opening tag (`<div>`), but no line breaks found.',
-        'Expected 1 line break before closing tag (`</div>`), but no line breaks found.',
-        'Expected 1 line break before closing tag (`</div>`), but no line breaks found.',
-        'Expected 1 line break before closing tag (`</template>`), but no line breaks found.'
+        {
+          message:
+            'Expected 1 line break after opening tag (`<template>`), but no line breaks found.',
+          line: 2,
+          column: 19,
+          endLine: 2,
+          endColumn: 19
+        },
+        {
+          message:
+            'Expected 1 line break after opening tag (`<div>`), but no line breaks found.',
+          line: 2,
+          column: 24,
+          endLine: 2,
+          endColumn: 24
+        },
+        {
+          message:
+            'Expected 1 line break after opening tag (`<div>`), but no line breaks found.',
+          line: 2,
+          column: 36,
+          endLine: 2,
+          endColumn: 36
+        },
+        {
+          message:
+            'Expected 1 line break before closing tag (`</div>`), but no line breaks found.',
+          line: 3,
+          column: 16,
+          endLine: 3,
+          endColumn: 16
+        },
+        {
+          message:
+            'Expected 1 line break before closing tag (`</div>`), but no line breaks found.',
+          line: 3,
+          column: 29,
+          endLine: 3,
+          endColumn: 29
+        },
+        {
+          message:
+            'Expected 1 line break before closing tag (`</template>`), but no line breaks found.',
+          line: 3,
+          column: 35,
+          endLine: 3,
+          endColumn: 35
+        }
       ]
     },
     // multi line breaks
@@ -559,8 +658,22 @@ content
         </template>
       `,
       errors: [
-        'Expected 1 line break after opening tag (`<div>`), but 2 line breaks found.',
-        'Expected 1 line break before closing tag (`</div>`), but 2 line breaks found.'
+        {
+          message:
+            'Expected 1 line break after opening tag (`<div>`), but 2 line breaks found.',
+          line: 3,
+          column: 16,
+          endLine: 5,
+          endColumn: 13
+        },
+        {
+          message:
+            'Expected 1 line break before closing tag (`</div>`), but 2 line breaks found.',
+          line: 6,
+          column: 20,
+          endLine: 8,
+          endColumn: 11
+        }
       ]
     },
     // allowEmptyLines
@@ -574,7 +687,6 @@ content
           <div
             class="panel"></div>
         </template>`,
-      options: [{ allowEmptyLines: true, ignoreWhenEmpty: false }],
       output: `
         <template>
           <div
@@ -585,8 +697,16 @@ content
             class="panel">
 </div>
         </template>`,
+      options: [{ allowEmptyLines: true, ignoreWhenEmpty: false }],
       errors: [
-        'Expected 1 line break after opening tag (`<div>`), but no line breaks found.'
+        {
+          message:
+            'Expected 1 line break after opening tag (`<div>`), but no line breaks found.',
+          line: 8,
+          column: 27,
+          endLine: 8,
+          endColumn: 27
+        }
       ]
     },
     {
@@ -602,7 +722,6 @@ content
             content</div>
         </template>
       `,
-      options: [{ allowEmptyLines: true }],
       output: `
         <template>
           <div>
@@ -617,9 +736,24 @@ content
 </div>
         </template>
       `,
+      options: [{ allowEmptyLines: true }],
       errors: [
-        'Expected 1 line break after opening tag (`<div>`), but no line breaks found.',
-        'Expected 1 line break before closing tag (`</div>`), but no line breaks found.'
+        {
+          message:
+            'Expected 1 line break after opening tag (`<div>`), but no line breaks found.',
+          line: 9,
+          column: 16,
+          endLine: 9,
+          endColumn: 16
+        },
+        {
+          message:
+            'Expected 1 line break before closing tag (`</div>`), but no line breaks found.',
+          line: 10,
+          column: 20,
+          endLine: 10,
+          endColumn: 20
+        }
       ]
     },
     // mustache
@@ -639,8 +773,22 @@ content
         </template>
       `,
       errors: [
-        'Expected 1 line break after opening tag (`<div>`), but no line breaks found.',
-        'Expected 1 line break before closing tag (`</div>`), but no line breaks found.'
+        {
+          message:
+            'Expected 1 line break after opening tag (`<div>`), but no line breaks found.',
+          line: 3,
+          column: 16,
+          endLine: 3,
+          endColumn: 16
+        },
+        {
+          message:
+            'Expected 1 line break before closing tag (`</div>`), but no line breaks found.',
+          line: 4,
+          column: 23,
+          endLine: 4,
+          endColumn: 23
+        }
       ]
     },
     // mix
@@ -662,8 +810,22 @@ content
         </template>
       `,
       errors: [
-        'Expected 1 line break after opening tag (`<div>`), but no line breaks found.',
-        'Expected 1 line break before closing tag (`</div>`), but no line breaks found.'
+        {
+          message:
+            'Expected 1 line break after opening tag (`<div>`), but no line breaks found.',
+          line: 3,
+          column: 16,
+          endLine: 3,
+          endColumn: 16
+        },
+        {
+          message:
+            'Expected 1 line break before closing tag (`</div>`), but no line breaks found.',
+          line: 5,
+          column: 27,
+          endLine: 5,
+          endColumn: 27
+        }
       ]
     },
     // start tag
@@ -683,8 +845,22 @@ content
         </template>
       `,
       errors: [
-        'Expected 1 line break after opening tag (`<div>`), but no line breaks found.',
-        'Expected 1 line break before closing tag (`</div>`), but no line breaks found.'
+        {
+          message:
+            'Expected 1 line break after opening tag (`<div>`), but no line breaks found.',
+          line: 4,
+          column: 14,
+          endLine: 4,
+          endColumn: 14
+        },
+        {
+          message:
+            'Expected 1 line break before closing tag (`</div>`), but no line breaks found.',
+          line: 4,
+          column: 21,
+          endLine: 4,
+          endColumn: 21
+        }
       ]
     },
     {
@@ -703,8 +879,22 @@ content
         </template>
       `,
       errors: [
-        'Expected 1 line break after opening tag (`<div>`), but no line breaks found.',
-        'Expected 1 line break before closing tag (`</div>`), but no line breaks found.'
+        {
+          message:
+            'Expected 1 line break after opening tag (`<div>`), but no line breaks found.',
+          line: 4,
+          column: 18,
+          endLine: 4,
+          endColumn: 18
+        },
+        {
+          message:
+            'Expected 1 line break before closing tag (`</div>`), but no line breaks found.',
+          line: 4,
+          column: 25,
+          endLine: 4,
+          endColumn: 25
+        }
       ]
     },
     {
@@ -723,7 +913,14 @@ content
       `,
       options: [{ ignoreWhenEmpty: false }],
       errors: [
-        'Expected 1 line break after opening tag (`<div>`), but no line breaks found.'
+        {
+          message:
+            'Expected 1 line break after opening tag (`<div>`), but no line breaks found.',
+          line: 4,
+          column: 14,
+          endLine: 4,
+          endColumn: 14
+        }
       ]
     }
   ]
diff --git a/tests/lib/rules/multiline-ternary.js b/tests/lib/rules/multiline-ternary.js
new file mode 100644
index 000000000..118cf6353
--- /dev/null
+++ b/tests/lib/rules/multiline-ternary.js
@@ -0,0 +1,304 @@
+/**
+ * @author dev1437
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const { RuleTester } = require('../../eslint-compat')
+const rule = require('../../../lib/rules/multiline-ternary')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('multiline-ternary', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div :class="{
+          'test': someReallyLongCondition ?
+            aVeryLongOutput :
+            thisCantFitOnASingleLine
+        }">
+        </div>
+      </template>
+      `
+    },
+    {
+      // doesn't check ternary statements in <script> block
+      filename: 'test.vue',
+      code: `
+      <script>
+        let test = someReallyLongCondition ? aVeryLongOutput : thisCantFitOnASingleLine
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div :class="{
+          'test': someReallyLongCondition ? aVeryLongOutput : thisCantFitOnASingleLine
+        }">
+        </div>
+      </template>
+      `,
+      options: ['never']
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+          <div class="test">
+          </div>
+      </template>
+      <style>
+        .test {
+            color: v-bind('someReallyLongCondition ? aVeryLongOutput : thisCantFitOnASingleLine')
+        }
+      </style>
+      `,
+      options: ['never']
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div :class="{
+            'test': someReallyLongCondition ?
+              aVeryLongOutput : thisCantFitOnASingleLine
+          }">
+          </div>
+        </template>
+        `,
+      output: `
+        <template>
+          <div :class="{
+            'test': someReallyLongCondition ?
+              aVeryLongOutput
+: thisCantFitOnASingleLine
+          }">
+          </div>
+        </template>
+        `,
+      options: ['always-multiline'],
+      errors: [
+        {
+          message:
+            'Expected newline between consequent and alternate of ternary expression.',
+          line: 5,
+          column: 15,
+          endLine: 5,
+          endColumn: 30
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div :class="{
+            'test': someReallyLongCondition ?
+              aVeryLongOutput : thisCantFitOnASingleLine
+          }">
+          </div>
+        </template>
+        `,
+      output: `
+        <template>
+          <div :class="{
+            'test': someReallyLongCondition ?aVeryLongOutput : thisCantFitOnASingleLine
+          }">
+          </div>
+        </template>
+        `,
+      options: ['never'],
+      errors: [
+        {
+          message:
+            'Unexpected newline between test and consequent of ternary expression.',
+          line: 4,
+          column: 21,
+          endLine: 4,
+          endColumn: 44
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div :class="{
+            'test': someReallyLongCondition ? aVeryLongOutput : thisCantFitOnASingleLine
+          }">
+          </div>
+        </template>
+        `,
+      output: `
+        <template>
+          <div :class="{
+            'test': someReallyLongCondition
+? aVeryLongOutput
+: thisCantFitOnASingleLine
+          }">
+          </div>
+        </template>
+        `,
+      errors: [
+        {
+          message:
+            'Expected newline between test and consequent of ternary expression.',
+          line: 4,
+          column: 21,
+          endLine: 4,
+          endColumn: 44
+        },
+        {
+          message:
+            'Expected newline between consequent and alternate of ternary expression.',
+          line: 4,
+          column: 47,
+          endLine: 4,
+          endColumn: 62
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div :style="{
+            'test': someReallyLongCondition ? aVeryLongOutput : thisCantFitOnASingleLine
+          }">
+          </div>
+        </template>
+        `,
+      output: `
+        <template>
+          <div :style="{
+            'test': someReallyLongCondition
+? aVeryLongOutput
+: thisCantFitOnASingleLine
+          }">
+          </div>
+        </template>
+        `,
+      errors: [
+        {
+          message:
+            'Expected newline between test and consequent of ternary expression.',
+          line: 4,
+          column: 21,
+          endLine: 4,
+          endColumn: 44
+        },
+        {
+          message:
+            'Expected newline between consequent and alternate of ternary expression.',
+          line: 4,
+          column: 47,
+          endLine: 4,
+          endColumn: 62
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div class="test">
+          </div>
+        </template>
+        <style>
+          .test {
+              color: v-bind('someReallyLongCondition ? aVeryLongOutput : thisCantFitOnASingleLine')
+          }
+        </style>
+        `,
+      output: `
+        <template>
+          <div class="test">
+          </div>
+        </template>
+        <style>
+          .test {
+              color: v-bind('someReallyLongCondition
+? aVeryLongOutput
+: thisCantFitOnASingleLine')
+          }
+        </style>
+        `,
+      errors: [
+        {
+          message:
+            'Expected newline between test and consequent of ternary expression.',
+          line: 8,
+          column: 30,
+          endLine: 8,
+          endColumn: 53
+        },
+        {
+          message:
+            'Expected newline between consequent and alternate of ternary expression.',
+          line: 8,
+          column: 56,
+          endLine: 8,
+          endColumn: 71
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div :class="{
+          'test': someReallyLongCondition ? aVeryLongOutput : thisCantFitOnASingleLine
+        }">
+        </div>
+      </template>
+      <script>
+        let test = someReallyLongCondition ? aVeryLongOutput : thisCantFitOnASingleLine
+      </script>
+      `,
+      output: `
+      <template>
+        <div :class="{
+          'test': someReallyLongCondition
+? aVeryLongOutput
+: thisCantFitOnASingleLine
+        }">
+        </div>
+      </template>
+      <script>
+        let test = someReallyLongCondition ? aVeryLongOutput : thisCantFitOnASingleLine
+      </script>
+      `,
+      errors: [
+        {
+          message:
+            'Expected newline between test and consequent of ternary expression.',
+          line: 4,
+          column: 19,
+          endLine: 4,
+          endColumn: 42
+        },
+        {
+          message:
+            'Expected newline between consequent and alternate of ternary expression.',
+          line: 4,
+          column: 45,
+          endLine: 4,
+          endColumn: 60
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/mustache-interpolation-spacing.js b/tests/lib/rules/mustache-interpolation-spacing.js
index f010fce4d..6f390b1ae 100644
--- a/tests/lib/rules/mustache-interpolation-spacing.js
+++ b/tests/lib/rules/mustache-interpolation-spacing.js
@@ -4,20 +4,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/mustache-interpolation-spacing')
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 ruleTester.run('mustache-interpolation-spacing', rule, {
@@ -89,28 +80,60 @@ ruleTester.run('mustache-interpolation-spacing', rule, {
       code: '<template><div>{{ text}}</div></template>',
       output: '<template><div>{{ text }}</div></template>',
       options: ['always'],
-      errors: ["Expected 1 space before '}}', but not found."]
+      errors: [
+        {
+          message: "Expected 1 space before '}}', but not found.",
+          line: 1,
+          column: 23,
+          endLine: 1,
+          endColumn: 25
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div>{{text }}</div></template>',
       output: '<template><div>{{ text }}</div></template>',
       options: ['always'],
-      errors: ["Expected 1 space after '{{', but not found."]
+      errors: [
+        {
+          message: "Expected 1 space after '{{', but not found.",
+          line: 1,
+          column: 16,
+          endLine: 1,
+          endColumn: 18
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div>{{ text}}</div></template>',
       output: '<template><div>{{text}}</div></template>',
       options: ['never'],
-      errors: ["Expected no space after '{{', but found."]
+      errors: [
+        {
+          message: "Expected no space after '{{', but found.",
+          line: 1,
+          column: 16,
+          endLine: 1,
+          endColumn: 19
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div>{{text }}</div></template>',
       output: '<template><div>{{text}}</div></template>',
       options: ['never'],
-      errors: ["Expected no space before '}}', but found."]
+      errors: [
+        {
+          message: "Expected no space before '}}', but found.",
+          line: 1,
+          column: 22,
+          endLine: 1,
+          endColumn: 25
+        }
+      ]
     },
     {
       filename: 'test.vue',
@@ -118,8 +141,20 @@ ruleTester.run('mustache-interpolation-spacing', rule, {
       output: '<template><div>{{ text }}</div></template>',
       options: ['always'],
       errors: [
-        "Expected 1 space after '{{', but not found.",
-        "Expected 1 space before '}}', but not found."
+        {
+          message: "Expected 1 space after '{{', but not found.",
+          line: 1,
+          column: 16,
+          endLine: 1,
+          endColumn: 18
+        },
+        {
+          message: "Expected 1 space before '}}', but not found.",
+          line: 1,
+          column: 22,
+          endLine: 1,
+          endColumn: 24
+        }
       ]
     },
     {
@@ -128,8 +163,20 @@ ruleTester.run('mustache-interpolation-spacing', rule, {
       output: '<template><div>{{text}}</div></template>',
       options: ['never'],
       errors: [
-        "Expected no space after '{{', but found.",
-        "Expected no space before '}}', but found."
+        {
+          message: "Expected no space after '{{', but found.",
+          line: 1,
+          column: 16,
+          endLine: 1,
+          endColumn: 19
+        },
+        {
+          message: "Expected no space before '}}', but found.",
+          line: 1,
+          column: 23,
+          endLine: 1,
+          endColumn: 26
+        }
       ]
     },
     {
@@ -138,8 +185,20 @@ ruleTester.run('mustache-interpolation-spacing', rule, {
       output: '<template><div>{{text}}</div></template>',
       options: ['never'],
       errors: [
-        "Expected no space after '{{', but found.",
-        "Expected no space before '}}', but found."
+        {
+          message: "Expected no space after '{{', but found.",
+          line: 1,
+          column: 16,
+          endLine: 1,
+          endColumn: 21
+        },
+        {
+          message: "Expected no space before '}}', but found.",
+          line: 1,
+          column: 25,
+          endLine: 1,
+          endColumn: 30
+        }
       ]
     }
   ]
diff --git a/tests/lib/rules/new-line-between-multi-line-property.js b/tests/lib/rules/new-line-between-multi-line-property.js
index 41dce3434..4377cf397 100644
--- a/tests/lib/rules/new-line-between-multi-line-property.js
+++ b/tests/lib/rules/new-line-between-multi-line-property.js
@@ -4,21 +4,16 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/new-line-between-multi-line-property')
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015, sourceType: 'module' }
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2015,
+    sourceType: 'module'
+  }
 })
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 ruleTester.run('new-line-between-multi-line-property', rule, {
   valid: [
     // test good example of proposal https://github.com/vuejs/eslint-plugin-vue/issues/391
@@ -165,7 +160,10 @@ ruleTester.run('new-line-between-multi-line-property', rule, {
         {
           message:
             'Enforce new lines between multi-line properties in Vue components.',
-          line: 13
+          line: 13,
+          column: 12,
+          endLine: 14,
+          endColumn: 11
         }
       ]
     },
@@ -276,19 +274,24 @@ ruleTester.run('new-line-between-multi-line-property', rule, {
         {
           message:
             'Enforce new lines between multi-line properties in Vue components.',
-          line: 18
+          line: 18,
+          column: 10,
+          endLine: 19,
+          endColumn: 9
         },
         {
           message:
             'Enforce new lines between multi-line properties in Vue components.',
-          line: 33
+          line: 33,
+          column: 10,
+          endLine: 34,
+          endColumn: 9
         }
       ]
     },
     // test set insertLine and minLineOfMultilineProperty to 5
     {
       filename: 'test.vue',
-      options: [{ minLineOfMultilineProperty: 5 }],
       code: `
       <script>
       export default {
@@ -328,18 +331,21 @@ ruleTester.run('new-line-between-multi-line-property', rule, {
       }
       </script>
       `,
+      options: [{ minLineOfMultilineProperty: 5 }],
       errors: [
         {
           message:
             'Enforce new lines between multi-line properties in Vue components.',
-          line: 13
+          line: 13,
+          column: 12,
+          endLine: 14,
+          endColumn: 11
         }
       ]
     },
     // test js comments
     {
       filename: 'test.vue',
-      options: [{ minLineOfMultilineProperty: 5 }],
       code: `
       <script>
       export default {
@@ -381,18 +387,21 @@ ruleTester.run('new-line-between-multi-line-property', rule, {
       }
       </script>
       `,
+      options: [{ minLineOfMultilineProperty: 5 }],
       errors: [
         {
           message:
             'Enforce new lines between multi-line properties in Vue components.',
-          line: 13
+          line: 13,
+          column: 12,
+          endLine: 15,
+          endColumn: 11
         }
       ]
     },
     // test js doc
     {
       filename: 'test.vue',
-      options: [],
       code: `
       <script>
       export default {
@@ -444,11 +453,15 @@ ruleTester.run('new-line-between-multi-line-property', rule, {
       }
       </script>
       `,
+      options: [],
       errors: [
         {
           message:
             'Enforce new lines between multi-line properties in Vue components.',
-          line: 14
+          line: 14,
+          column: 12,
+          endLine: 19,
+          endColumn: 11
         }
       ]
     },
@@ -527,17 +540,26 @@ ruleTester.run('new-line-between-multi-line-property', rule, {
         {
           message:
             'Enforce new lines between multi-line properties in Vue components.',
-          line: 8
+          line: 8,
+          column: 12,
+          endLine: 9,
+          endColumn: 11
         },
         {
           message:
             'Enforce new lines between multi-line properties in Vue components.',
-          line: 12
+          line: 12,
+          column: 12,
+          endLine: 13,
+          endColumn: 11
         },
         {
           message:
             'Enforce new lines between multi-line properties in Vue components.',
-          line: 15
+          line: 15,
+          column: 10,
+          endLine: 16,
+          endColumn: 9
         }
       ]
     },
@@ -619,17 +641,26 @@ ruleTester.run('new-line-between-multi-line-property', rule, {
         {
           message:
             'Enforce new lines between multi-line properties in Vue components.',
-          line: 8
+          line: 8,
+          column: 12,
+          endLine: 10,
+          endColumn: 11
         },
         {
           message:
             'Enforce new lines between multi-line properties in Vue components.',
-          line: 13
+          line: 13,
+          column: 12,
+          endLine: 14,
+          endColumn: 11
         },
         {
           message:
             'Enforce new lines between multi-line properties in Vue components.',
-          line: 16
+          line: 16,
+          column: 10,
+          endLine: 17,
+          endColumn: 9
         }
       ]
     },
@@ -657,7 +688,10 @@ emits: {
         {
           message:
             'Enforce new lines between multi-line properties in Vue components.',
-          line: 5
+          line: 5,
+          column: 10,
+          endLine: 5,
+          endColumn: 11
         }
       ]
     },
@@ -686,7 +720,10 @@ emits: {
         {
           message:
             'Enforce new lines between multi-line properties in Vue components.',
-          line: 5
+          line: 5,
+          column: 10,
+          endLine: 6,
+          endColumn: 10
         }
       ]
     },
@@ -736,17 +773,26 @@ emits: {
         {
           message:
             'Enforce new lines between multi-line properties in Vue components.',
-          line: 5
+          line: 5,
+          column: 10,
+          endLine: 6,
+          endColumn: 15
         },
         {
           message:
             'Enforce new lines between multi-line properties in Vue components.',
-          line: 10
+          line: 10,
+          column: 10,
+          endLine: 10,
+          endColumn: 21
         },
         {
           message:
             'Enforce new lines between multi-line properties in Vue components.',
-          line: 14
+          line: 14,
+          column: 10,
+          endLine: 15,
+          endColumn: 14
         }
       ]
     },
@@ -777,7 +823,10 @@ emits: {
         {
           message:
             'Enforce new lines between multi-line properties in Vue components.',
-          line: 5
+          line: 5,
+          column: 10,
+          endLine: 7,
+          endColumn: 9
         }
       ]
     }
diff --git a/tests/lib/rules/next-tick-style.js b/tests/lib/rules/next-tick-style.js
index 9f2d0ae5b..1ad3b7669 100644
--- a/tests/lib/rules/next-tick-style.js
+++ b/tests/lib/rules/next-tick-style.js
@@ -6,20 +6,12 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/next-tick-style')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
     ecmaVersion: 2017,
     sourceType: 'module'
   }
@@ -48,7 +40,6 @@ tester.run('next-tick-style', rule, {
     },
     {
       filename: 'test.vue',
-      options: ['promise'],
       code: `<script>import { nextTick as nt } from 'vue';
       export default {
         async mounted() {
@@ -60,11 +51,11 @@ tester.run('next-tick-style', rule, {
           await Vue.nextTick(); callback();
           await nt(); callback();
         }
-      }</script>`
+      }</script>`,
+      options: ['promise']
     },
     {
       filename: 'test.vue',
-      options: ['callback'],
       code: `<script>import { nextTick as nt } from 'vue';
       export default {
         mounted() {
@@ -76,13 +67,13 @@ tester.run('next-tick-style', rule, {
           Vue.nextTick(callback);
           nt(callback);
         }
-      }</script>`
+      }</script>`,
+      options: ['callback']
     },
 
     // https://github.com/vuejs/eslint-plugin-vue/pull/1400#discussion_r550937977
     {
       filename: 'test.vue',
-      options: ['promise'],
       code: `<script>import { nextTick as nt } from 'vue';
       export default {
         mounted() {
@@ -94,11 +85,11 @@ tester.run('next-tick-style', rule, {
           foo.then(Vue.nextTick, catchHandler);
           foo.then(this.$nextTick, catchHandler);
         }
-      }</script>`
+      }</script>`,
+      options: ['promise']
     },
     {
       filename: 'test.vue',
-      options: ['callback'],
       code: `<script>import { nextTick as nt } from 'vue';
       export default {
         mounted() {
@@ -110,7 +101,8 @@ tester.run('next-tick-style', rule, {
           foo.then(Vue.nextTick, catchHandler);
           foo.then(this.$nextTick, catchHandler);
         }
-      }</script>`
+      }</script>`,
+      options: ['callback']
     }
   ],
   invalid: [
@@ -145,43 +137,54 @@ tester.run('next-tick-style', rule, {
           message:
             'Use the Promise returned by `nextTick` instead of passing a callback function.',
           line: 4,
-          column: 16
+          column: 16,
+          endLine: 4,
+          endColumn: 25
         },
         {
           message:
             'Use the Promise returned by `nextTick` instead of passing a callback function.',
           line: 5,
-          column: 15
+          column: 15,
+          endLine: 5,
+          endColumn: 23
         },
         {
           message:
             'Use the Promise returned by `nextTick` instead of passing a callback function.',
           line: 6,
-          column: 11
+          column: 11,
+          endLine: 6,
+          endColumn: 13
         },
         {
           message:
             'Use the Promise returned by `nextTick` instead of passing a callback function.',
           line: 8,
-          column: 16
+          column: 16,
+          endLine: 8,
+          endColumn: 25
         },
         {
           message:
             'Use the Promise returned by `nextTick` instead of passing a callback function.',
           line: 9,
-          column: 15
+          column: 15,
+          endLine: 9,
+          endColumn: 23
         },
         {
           message:
             'Use the Promise returned by `nextTick` instead of passing a callback function.',
           line: 10,
-          column: 11
+          column: 11,
+          endLine: 10,
+          endColumn: 13
         }
       ]
     },
     {
       filename: 'test.vue',
-      options: ['promise'],
       code: `<script>import { nextTick as nt } from 'vue';
       export default {
         mounted() {
@@ -206,48 +209,60 @@ tester.run('next-tick-style', rule, {
           nt().then(callback);
         }
       }</script>`,
+      options: ['promise'],
       errors: [
         {
           message:
             'Use the Promise returned by `nextTick` instead of passing a callback function.',
           line: 4,
-          column: 16
+          column: 16,
+          endLine: 4,
+          endColumn: 25
         },
         {
           message:
             'Use the Promise returned by `nextTick` instead of passing a callback function.',
           line: 5,
-          column: 15
+          column: 15,
+          endLine: 5,
+          endColumn: 23
         },
         {
           message:
             'Use the Promise returned by `nextTick` instead of passing a callback function.',
           line: 6,
-          column: 11
+          column: 11,
+          endLine: 6,
+          endColumn: 13
         },
         {
           message:
             'Use the Promise returned by `nextTick` instead of passing a callback function.',
           line: 8,
-          column: 16
+          column: 16,
+          endLine: 8,
+          endColumn: 25
         },
         {
           message:
             'Use the Promise returned by `nextTick` instead of passing a callback function.',
           line: 9,
-          column: 15
+          column: 15,
+          endLine: 9,
+          endColumn: 23
         },
         {
           message:
             'Use the Promise returned by `nextTick` instead of passing a callback function.',
           line: 10,
-          column: 11
+          column: 11,
+          endLine: 10,
+          endColumn: 13
         }
       ]
     },
     {
       filename: 'test.vue',
-      options: ['callback'],
       code: `<script>import { nextTick as nt } from 'vue';
       export default {
         async mounted() {
@@ -261,42 +276,55 @@ tester.run('next-tick-style', rule, {
         }
       }</script>`,
       output: null,
+      options: ['callback'],
       errors: [
         {
           message:
             'Pass a callback function to `nextTick` instead of using the returned Promise.',
           line: 4,
-          column: 16
+          column: 16,
+          endLine: 4,
+          endColumn: 25
         },
         {
           message:
             'Pass a callback function to `nextTick` instead of using the returned Promise.',
           line: 5,
-          column: 15
+          column: 15,
+          endLine: 5,
+          endColumn: 23
         },
         {
           message:
             'Pass a callback function to `nextTick` instead of using the returned Promise.',
           line: 6,
-          column: 11
+          column: 11,
+          endLine: 6,
+          endColumn: 13
         },
         {
           message:
             'Pass a callback function to `nextTick` instead of using the returned Promise.',
           line: 8,
-          column: 22
+          column: 22,
+          endLine: 8,
+          endColumn: 31
         },
         {
           message:
             'Pass a callback function to `nextTick` instead of using the returned Promise.',
           line: 9,
-          column: 21
+          column: 21,
+          endLine: 9,
+          endColumn: 29
         },
         {
           message:
             'Pass a callback function to `nextTick` instead of using the returned Promise.',
           line: 10,
-          column: 17
+          column: 17,
+          endLine: 10,
+          endColumn: 19
         }
       ]
     }
diff --git a/tests/lib/rules/no-arrow-functions-in-watch.js b/tests/lib/rules/no-arrow-functions-in-watch.js
index 0e137c193..454926e89 100644
--- a/tests/lib/rules/no-arrow-functions-in-watch.js
+++ b/tests/lib/rules/no-arrow-functions-in-watch.js
@@ -2,19 +2,11 @@
  * @author Sosuke Suzuki
  */
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/no-arrow-functions-in-watch')
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const ruleTester = new RuleTester({
-  parserOptions: {
+  languageOptions: {
     ecmaVersion: 2018,
     sourceType: 'module'
   }
@@ -139,7 +131,15 @@ ruleTester.run('no-arrow-functions-in-watch', rule, {
           foo: () => {}
         },
       }`,
-      errors: ['You should not use an arrow function to define a watcher.']
+      errors: [
+        {
+          message: 'You should not use an arrow function to define a watcher.',
+          line: 4,
+          column: 16,
+          endLine: 4,
+          endColumn: 24
+        }
+      ]
     },
     {
       filename: 'test.vue',
@@ -153,7 +153,10 @@ ruleTester.run('no-arrow-functions-in-watch', rule, {
       errors: [
         {
           message: 'You should not use an arrow function to define a watcher.',
-          line: 5
+          line: 5,
+          column: 16,
+          endLine: 5,
+          endColumn: 24
         }
       ]
     },
@@ -169,7 +172,10 @@ ruleTester.run('no-arrow-functions-in-watch', rule, {
       errors: [
         {
           message: 'You should not use an arrow function to define a watcher.',
-          line: 5
+          line: 5,
+          column: 16,
+          endLine: 5,
+          endColumn: 24
         }
       ]
     },
@@ -215,7 +221,10 @@ ruleTester.run('no-arrow-functions-in-watch', rule, {
       errors: [
         {
           message: 'You should not use an arrow function to define a watcher.',
-          line: 15
+          line: 15,
+          column: 14,
+          endLine: 17,
+          endColumn: 12
         }
       ]
     },
@@ -235,7 +244,10 @@ ruleTester.run('no-arrow-functions-in-watch', rule, {
       errors: [
         {
           message: 'You should not use an arrow function to define a watcher.',
-          line: 8
+          line: 8,
+          column: 22,
+          endLine: 8,
+          endColumn: 30
         }
       ]
     },
@@ -256,11 +268,17 @@ ruleTester.run('no-arrow-functions-in-watch', rule, {
       errors: [
         {
           message: 'You should not use an arrow function to define a watcher.',
-          line: 6
+          line: 6,
+          column: 13,
+          endLine: 6,
+          endColumn: 43
         },
         {
           message: 'You should not use an arrow function to define a watcher.',
-          line: 8
+          line: 8,
+          column: 24,
+          endLine: 8,
+          endColumn: 54
         }
       ]
     }
diff --git a/tests/lib/rules/no-async-in-computed-properties.js b/tests/lib/rules/no-async-in-computed-properties.js
index ba6c0cd02..2c2e29c72 100644
--- a/tests/lib/rules/no-async-in-computed-properties.js
+++ b/tests/lib/rules/no-async-in-computed-properties.js
@@ -4,22 +4,14 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/no-async-in-computed-properties')
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 
-const parserOptions = {
+const parser = require('vue-eslint-parser')
+const languageOptions = {
   ecmaVersion: 2020,
   sourceType: 'module'
 }
-const parser = require.resolve('vue-eslint-parser')
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
 
 const ruleTester = new RuleTester()
 
@@ -36,7 +28,7 @@ ruleTester.run('no-async-in-computed-properties', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -69,7 +61,7 @@ ruleTester.run('no-async-in-computed-properties', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -83,7 +75,7 @@ ruleTester.run('no-async-in-computed-properties', rule, {
           }));
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -101,7 +93,7 @@ ruleTester.run('no-async-in-computed-properties', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -122,7 +114,7 @@ ruleTester.run('no-async-in-computed-properties', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -137,7 +129,7 @@ ruleTester.run('no-async-in-computed-properties', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -150,7 +142,7 @@ ruleTester.run('no-async-in-computed-properties', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -163,7 +155,7 @@ ruleTester.run('no-async-in-computed-properties', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -180,7 +172,7 @@ ruleTester.run('no-async-in-computed-properties', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -197,7 +189,7 @@ ruleTester.run('no-async-in-computed-properties', rule, {
             }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -210,7 +202,7 @@ ruleTester.run('no-async-in-computed-properties', rule, {
             }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -223,7 +215,7 @@ ruleTester.run('no-async-in-computed-properties', rule, {
             }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       code: `
@@ -231,7 +223,7 @@ ruleTester.run('no-async-in-computed-properties', rule, {
           data1: new Promise(),
           data2: Promise.resolve(),
         })`,
-      parserOptions
+      languageOptions
     },
     {
       code: `
@@ -306,16 +298,11 @@ ruleTester.run('no-async-in-computed-properties', rule, {
           }
         }
         `,
-      parserOptions
+      languageOptions
     },
     {
       // https://github.com/vuejs/eslint-plugin-vue/issues/1690
       filename: 'test.vue',
-      parser,
-      parserOptions: {
-        sourceType: 'module',
-        ecmaVersion: 2020
-      },
       code: `
       <template>
         <div class="f-c" style="height: 100%;">
@@ -331,7 +318,79 @@ ruleTester.run('no-async-in-computed-properties', rule, {
         components: {
         },
       }
-      </script>`
+      </script>`,
+      languageOptions: {
+        parser,
+        sourceType: 'module',
+        ecmaVersion: 2020
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        export default {
+          computed: {
+            foo: function () {
+              return z.catch(
+                z.string().check(z.minLength(2)),
+                'default'
+              ).then(val => val).finally(() => {})
+            }
+          }
+        }
+      `,
+      options: [{ ignoredObjectNames: ['z'] }],
+      languageOptions
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      import { computed } from 'vue'
+
+      const numberWithCatch = computed(() => z.number().catch(42))
+      </script>`,
+      options: [{ ignoredObjectNames: ['z'] }],
+      languageOptions: {
+        parser,
+        sourceType: 'module',
+        ecmaVersion: 2020
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        export default {
+          computed: {
+            foo: function () {
+              return z.a?.['b'].[c].d.method().catch(err => err).finally(() => {})
+            }
+          }
+        }
+      `,
+      options: [{ ignoredObjectNames: ['z'] }],
+      languageOptions: {
+        parser,
+        sourceType: 'module',
+        ecmaVersion: 2020
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      import { computed } from 'vue'
+      import { z } from 'zod'
+
+      const foo = computed(() => z.a?.['b'].c!.d.method().catch(err => err).finally(() => {}))
+      </script>`,
+      options: [{ ignoredObjectNames: ['z'] }],
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
     }
   ],
 
@@ -347,16 +406,22 @@ ruleTester.run('no-async-in-computed-properties', rule, {
           }
         }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message:
             'Unexpected async function declaration in "foo" computed property.',
-          line: 4
+          line: 4,
+          column: 18,
+          endLine: 6,
+          endColumn: 14
         },
         {
           message: 'Unexpected await operator in "foo" computed property.',
-          line: 5
+          line: 5,
+          column: 22,
+          endLine: 5,
+          endColumn: 38
         }
       ]
     },
@@ -371,16 +436,22 @@ ruleTester.run('no-async-in-computed-properties', rule, {
           }
         }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message:
             'Unexpected async function declaration in "foo" computed property.',
-          line: 4
+          line: 4,
+          column: 18,
+          endLine: 6,
+          endColumn: 14
         },
         {
           message: 'Unexpected Promise object in "foo" computed property.',
-          line: 5
+          line: 5,
+          column: 22,
+          endLine: 5,
+          endColumn: 58
         }
       ]
     },
@@ -395,11 +466,14 @@ ruleTester.run('no-async-in-computed-properties', rule, {
           }
         }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Unexpected asynchronous action in "foo" computed property.',
-          line: 5
+          line: 5,
+          column: 22,
+          endLine: 5,
+          endColumn: 46
         }
       ]
     },
@@ -414,8 +488,16 @@ ruleTester.run('no-async-in-computed-properties', rule, {
           }
         }
       `,
-      parserOptions,
-      errors: ['Unexpected asynchronous action in "foo" computed property.']
+      languageOptions,
+      errors: [
+        {
+          message: 'Unexpected asynchronous action in "foo" computed property.',
+          line: 5,
+          column: 22,
+          endLine: 5,
+          endColumn: 49
+        }
+      ]
     },
     {
       filename: 'test.vue',
@@ -428,8 +510,16 @@ ruleTester.run('no-async-in-computed-properties', rule, {
           }
         }
       `,
-      parserOptions,
-      errors: ['Unexpected asynchronous action in "foo" computed property.']
+      languageOptions,
+      errors: [
+        {
+          message: 'Unexpected asynchronous action in "foo" computed property.',
+          line: 5,
+          column: 22,
+          endLine: 5,
+          endColumn: 51
+        }
+      ]
     },
     {
       filename: 'test.vue',
@@ -442,11 +532,14 @@ ruleTester.run('no-async-in-computed-properties', rule, {
           }
         }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Unexpected asynchronous action in "foo" computed property.',
-          line: 5
+          line: 5,
+          column: 22,
+          endLine: 5,
+          endColumn: 40
         }
       ]
     },
@@ -461,11 +554,14 @@ ruleTester.run('no-async-in-computed-properties', rule, {
           }
         }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Unexpected asynchronous action in "foo" computed property.',
-          line: 5
+          line: 5,
+          column: 22,
+          endLine: 5,
+          endColumn: 37
         }
       ]
     },
@@ -480,11 +576,14 @@ ruleTester.run('no-async-in-computed-properties', rule, {
           }
         }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Unexpected asynchronous action in "foo" computed property.',
-          line: 5
+          line: 5,
+          column: 22,
+          endLine: 5,
+          endColumn: 44
         }
       ]
     },
@@ -499,11 +598,14 @@ ruleTester.run('no-async-in-computed-properties', rule, {
         }
       }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Unexpected asynchronous action in "foo" computed property.',
-          line: 5
+          line: 5,
+          column: 20,
+          endLine: 5,
+          endColumn: 36
         }
       ]
     },
@@ -518,11 +620,14 @@ ruleTester.run('no-async-in-computed-properties', rule, {
         }
       }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Unexpected asynchronous action in "foo" computed property.',
-          line: 5
+          line: 5,
+          column: 20,
+          endLine: 5,
+          endColumn: 38
         }
       ]
     },
@@ -537,11 +642,14 @@ ruleTester.run('no-async-in-computed-properties', rule, {
         }
       }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Unexpected asynchronous action in "foo" computed property.',
-          line: 5
+          line: 5,
+          column: 20,
+          endLine: 5,
+          endColumn: 39
         }
       ]
     },
@@ -556,11 +664,14 @@ ruleTester.run('no-async-in-computed-properties', rule, {
         }
       }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Unexpected asynchronous action in "foo" computed property.',
-          line: 5
+          line: 5,
+          column: 20,
+          endLine: 5,
+          endColumn: 39
         }
       ]
     },
@@ -577,11 +688,14 @@ ruleTester.run('no-async-in-computed-properties', rule, {
         }
       }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Unexpected asynchronous action in "foo" computed property.',
-          line: 6
+          line: 6,
+          column: 22,
+          endLine: 6,
+          endColumn: 41
         }
       ]
     },
@@ -598,11 +712,14 @@ ruleTester.run('no-async-in-computed-properties', rule, {
         }
       })
       `,
-      parserOptions: { ecmaVersion: 6 },
+      languageOptions: { ecmaVersion: 6 },
       errors: [
         {
           message: 'Unexpected asynchronous action in "foo" computed property.',
-          line: 6
+          line: 6,
+          column: 22,
+          endLine: 6,
+          endColumn: 41
         }
       ]
     },
@@ -619,11 +736,14 @@ ruleTester.run('no-async-in-computed-properties', rule, {
         }
       })
       `,
-      parserOptions: { ecmaVersion: 6 },
+      languageOptions: { ecmaVersion: 6 },
       errors: [
         {
           message: 'Unexpected asynchronous action in "foo" computed property.',
-          line: 6
+          line: 6,
+          column: 22,
+          endLine: 6,
+          endColumn: 42
         }
       ]
     },
@@ -640,15 +760,21 @@ ruleTester.run('no-async-in-computed-properties', rule, {
         }
       })
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Unexpected asynchronous action in "foo" computed property.',
-          line: 5
+          line: 5,
+          column: 13,
+          endLine: 5,
+          endColumn: 37
         },
         {
           message: 'Unexpected asynchronous action in "foo" computed property.',
-          line: 6
+          line: 6,
+          column: 13,
+          endLine: 6,
+          endColumn: 35
         }
       ]
     },
@@ -665,28 +791,43 @@ ruleTester.run('no-async-in-computed-properties', rule, {
         }
       })
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message:
             'Unexpected async function declaration in "foo" computed property.',
-          line: 4
+          line: 4,
+          column: 21,
+          endLine: 8,
+          endColumn: 12
         },
         {
           message: 'Unexpected await operator in "foo" computed property.',
-          line: 5
+          line: 5,
+          column: 13,
+          endLine: 5,
+          endColumn: 35
         },
         {
           message: 'Unexpected asynchronous action in "foo" computed property.',
-          line: 5
+          line: 5,
+          column: 19,
+          endLine: 5,
+          endColumn: 35
         },
         {
           message: 'Unexpected await operator in "foo" computed property.',
-          line: 6
+          line: 6,
+          column: 13,
+          endLine: 6,
+          endColumn: 33
         },
         {
           message: 'Unexpected asynchronous action in "foo" computed property.',
-          line: 6
+          line: 6,
+          column: 19,
+          endLine: 6,
+          endColumn: 33
         }
       ]
     },
@@ -708,39 +849,63 @@ ruleTester.run('no-async-in-computed-properties', rule, {
         }
       }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Unexpected timed function in "foo" computed property.',
-          line: 5
+          line: 5,
+          column: 13,
+          endLine: 5,
+          endColumn: 37
         },
         {
           message: 'Unexpected timed function in "foo" computed property.',
-          line: 6
+          line: 6,
+          column: 13,
+          endLine: 6,
+          endColumn: 44
         },
         {
           message: 'Unexpected timed function in "foo" computed property.',
-          line: 7
+          line: 7,
+          column: 13,
+          endLine: 7,
+          endColumn: 38
         },
         {
           message: 'Unexpected timed function in "foo" computed property.',
-          line: 8
+          line: 8,
+          column: 13,
+          endLine: 8,
+          endColumn: 45
         },
         {
           message: 'Unexpected timed function in "foo" computed property.',
-          line: 9
+          line: 9,
+          column: 13,
+          endLine: 9,
+          endColumn: 36
         },
         {
           message: 'Unexpected timed function in "foo" computed property.',
-          line: 10
+          line: 10,
+          column: 13,
+          endLine: 10,
+          endColumn: 43
         },
         {
           message: 'Unexpected timed function in "foo" computed property.',
-          line: 11
+          line: 11,
+          column: 13,
+          endLine: 11,
+          endColumn: 44
         },
         {
           message: 'Unexpected timed function in "foo" computed property.',
-          line: 12
+          line: 12,
+          column: 13,
+          endLine: 12,
+          endColumn: 51
         }
       ]
     },
@@ -762,16 +927,64 @@ ruleTester.run('no-async-in-computed-properties', rule, {
         }
       }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
-        'Unexpected timed function in "foo" computed property.',
-        'Unexpected timed function in "foo" computed property.',
-        'Unexpected timed function in "foo" computed property.',
-        'Unexpected timed function in "foo" computed property.',
-        'Unexpected timed function in "foo" computed property.',
-        'Unexpected timed function in "foo" computed property.',
-        'Unexpected timed function in "foo" computed property.',
-        'Unexpected timed function in "foo" computed property.'
+        {
+          message: 'Unexpected timed function in "foo" computed property.',
+          line: 5,
+          column: 13,
+          endLine: 5,
+          endColumn: 39
+        },
+        {
+          message: 'Unexpected timed function in "foo" computed property.',
+          line: 6,
+          column: 13,
+          endLine: 6,
+          endColumn: 47
+        },
+        {
+          message: 'Unexpected timed function in "foo" computed property.',
+          line: 7,
+          column: 13,
+          endLine: 7,
+          endColumn: 38
+        },
+        {
+          message: 'Unexpected timed function in "foo" computed property.',
+          line: 8,
+          column: 13,
+          endLine: 8,
+          endColumn: 48
+        },
+        {
+          message: 'Unexpected timed function in "foo" computed property.',
+          line: 9,
+          column: 13,
+          endLine: 9,
+          endColumn: 38
+        },
+        {
+          message: 'Unexpected timed function in "foo" computed property.',
+          line: 10,
+          column: 13,
+          endLine: 10,
+          endColumn: 46
+        },
+        {
+          message: 'Unexpected timed function in "foo" computed property.',
+          line: 11,
+          column: 13,
+          endLine: 11,
+          endColumn: 46
+        },
+        {
+          message: 'Unexpected timed function in "foo" computed property.',
+          line: 12,
+          column: 13,
+          endLine: 12,
+          endColumn: 54
+        }
       ]
     },
     {
@@ -792,16 +1005,64 @@ ruleTester.run('no-async-in-computed-properties', rule, {
         }
       }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
-        'Unexpected timed function in "foo" computed property.',
-        'Unexpected timed function in "foo" computed property.',
-        'Unexpected timed function in "foo" computed property.',
-        'Unexpected timed function in "foo" computed property.',
-        'Unexpected timed function in "foo" computed property.',
-        'Unexpected timed function in "foo" computed property.',
-        'Unexpected timed function in "foo" computed property.',
-        'Unexpected timed function in "foo" computed property.'
+        {
+          message: 'Unexpected timed function in "foo" computed property.',
+          line: 5,
+          column: 13,
+          endLine: 5,
+          endColumn: 39
+        },
+        {
+          message: 'Unexpected timed function in "foo" computed property.',
+          line: 6,
+          column: 14,
+          endLine: 6,
+          endColumn: 50
+        },
+        {
+          message: 'Unexpected timed function in "foo" computed property.',
+          line: 7,
+          column: 13,
+          endLine: 7,
+          endColumn: 38
+        },
+        {
+          message: 'Unexpected timed function in "foo" computed property.',
+          line: 8,
+          column: 14,
+          endLine: 8,
+          endColumn: 51
+        },
+        {
+          message: 'Unexpected timed function in "foo" computed property.',
+          line: 9,
+          column: 13,
+          endLine: 9,
+          endColumn: 38
+        },
+        {
+          message: 'Unexpected timed function in "foo" computed property.',
+          line: 10,
+          column: 14,
+          endLine: 10,
+          endColumn: 49
+        },
+        {
+          message: 'Unexpected timed function in "foo" computed property.',
+          line: 11,
+          column: 13,
+          endLine: 11,
+          endColumn: 46
+        },
+        {
+          message: 'Unexpected timed function in "foo" computed property.',
+          line: 12,
+          column: 14,
+          endLine: 12,
+          endColumn: 57
+        }
       ]
     },
     {
@@ -820,34 +1081,52 @@ ruleTester.run('no-async-in-computed-properties', rule, {
         }
       }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message:
             'Unexpected async function declaration in computed function.',
-          line: 5
+          line: 5,
+          column: 34,
+          endLine: 7,
+          endColumn: 12
         },
         {
           message: 'Unexpected await operator in computed function.',
-          line: 6
+          line: 6,
+          column: 20,
+          endLine: 6,
+          endColumn: 36
         },
         {
           message:
             'Unexpected async function declaration in computed function.',
-          line: 8
+          line: 8,
+          column: 34,
+          endLine: 8,
+          endColumn: 62
         },
         {
           message: 'Unexpected await operator in computed function.',
-          line: 8
+          line: 8,
+          column: 46,
+          endLine: 8,
+          endColumn: 62
         },
         {
           message:
             'Unexpected async function declaration in computed function.',
-          line: 9
+          line: 9,
+          column: 34,
+          endLine: 11,
+          endColumn: 12
         },
         {
           message: 'Unexpected await operator in computed function.',
-          line: 10
+          line: 10,
+          column: 20,
+          endLine: 10,
+          endColumn: 36
         }
       ]
     },
@@ -863,16 +1142,22 @@ ruleTester.run('no-async-in-computed-properties', rule, {
         }
       }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message:
             'Unexpected async function declaration in computed function.',
-          line: 5
+          line: 5,
+          column: 33,
+          endLine: 7,
+          endColumn: 12
         },
         {
           message: 'Unexpected Promise object in computed function.',
-          line: 6
+          line: 6,
+          column: 20,
+          endLine: 6,
+          endColumn: 56
         }
       ]
     },
@@ -891,15 +1176,21 @@ ruleTester.run('no-async-in-computed-properties', rule, {
         }
       }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Unexpected asynchronous action in computed function.',
-          line: 6
+          line: 6,
+          column: 20,
+          endLine: 6,
+          endColumn: 44
         },
         {
           message: 'Unexpected asynchronous action in computed function.',
-          line: 9
+          line: 9,
+          column: 20,
+          endLine: 9,
+          endColumn: 35
         }
       ]
     },
@@ -922,15 +1213,21 @@ ruleTester.run('no-async-in-computed-properties', rule, {
         }
       }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Unexpected asynchronous action in computed function.',
-          line: 7
+          line: 7,
+          column: 22,
+          endLine: 7,
+          endColumn: 41
         },
         {
           message: 'Unexpected asynchronous action in computed function.',
-          line: 12
+          line: 12,
+          column: 22,
+          endLine: 12,
+          endColumn: 41
         }
       ]
     },
@@ -953,39 +1250,63 @@ ruleTester.run('no-async-in-computed-properties', rule, {
         }
       }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Unexpected timed function in computed function.',
-          line: 6
+          line: 6,
+          column: 13,
+          endLine: 6,
+          endColumn: 37
         },
         {
           message: 'Unexpected timed function in computed function.',
-          line: 7
+          line: 7,
+          column: 13,
+          endLine: 7,
+          endColumn: 44
         },
         {
           message: 'Unexpected timed function in computed function.',
-          line: 8
+          line: 8,
+          column: 13,
+          endLine: 8,
+          endColumn: 38
         },
         {
           message: 'Unexpected timed function in computed function.',
-          line: 9
+          line: 9,
+          column: 13,
+          endLine: 9,
+          endColumn: 45
         },
         {
           message: 'Unexpected timed function in computed function.',
-          line: 10
+          line: 10,
+          column: 13,
+          endLine: 10,
+          endColumn: 36
         },
         {
           message: 'Unexpected timed function in computed function.',
-          line: 11
+          line: 11,
+          column: 13,
+          endLine: 11,
+          endColumn: 43
         },
         {
           message: 'Unexpected timed function in computed function.',
-          line: 12
+          line: 12,
+          column: 13,
+          endLine: 12,
+          endColumn: 44
         },
         {
           message: 'Unexpected timed function in computed function.',
-          line: 13
+          line: 13,
+          column: 13,
+          endLine: 13,
+          endColumn: 51
         }
       ]
     },
@@ -1001,12 +1322,15 @@ ruleTester.run('no-async-in-computed-properties', rule, {
         }
       }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message:
             'Unexpected async function declaration in computed function.',
-          line: 5
+          line: 5,
+          column: 33,
+          endLine: 7,
+          endColumn: 12
         }
       ]
     },
@@ -1025,35 +1349,55 @@ ruleTester.run('no-async-in-computed-properties', rule, {
       })
       </script>
       `,
-      parser,
-      parserOptions,
+      languageOptions: {
+        parser,
+        ...languageOptions
+      },
       errors: [
         {
           message:
             'Unexpected async function declaration in computed function.',
-          line: 4
+          line: 4,
+          column: 30,
+          endLine: 6,
+          endColumn: 8
         },
         {
           message: 'Unexpected await operator in computed function.',
-          line: 5
+          line: 5,
+          column: 16,
+          endLine: 5,
+          endColumn: 32
         },
         {
           message:
             'Unexpected async function declaration in computed function.',
-          line: 7
+          line: 7,
+          column: 30,
+          endLine: 7,
+          endColumn: 58
         },
         {
           message: 'Unexpected await operator in computed function.',
-          line: 7
+          line: 7,
+          column: 42,
+          endLine: 7,
+          endColumn: 58
         },
         {
           message:
             'Unexpected async function declaration in computed function.',
-          line: 8
+          line: 8,
+          column: 30,
+          endLine: 10,
+          endColumn: 8
         },
         {
           message: 'Unexpected await operator in computed function.',
-          line: 9
+          line: 9,
+          column: 16,
+          endLine: 9,
+          endColumn: 32
         }
       ]
     },
@@ -1067,17 +1411,25 @@ ruleTester.run('no-async-in-computed-properties', rule, {
       })
       </script>
       `,
-      parser,
-      parserOptions,
+      languageOptions: {
+        parser,
+        ...languageOptions
+      },
       errors: [
         {
           message:
             'Unexpected async function declaration in computed function.',
-          line: 4
+          line: 4,
+          column: 29,
+          endLine: 6,
+          endColumn: 8
         },
         {
           message: 'Unexpected Promise object in computed function.',
-          line: 5
+          line: 5,
+          column: 16,
+          endLine: 5,
+          endColumn: 52
         }
       ]
     },
@@ -1094,16 +1446,24 @@ ruleTester.run('no-async-in-computed-properties', rule, {
       })
       </script>
       `,
-      parser,
-      parserOptions,
+      languageOptions: {
+        parser,
+        ...languageOptions
+      },
       errors: [
         {
           message: 'Unexpected asynchronous action in computed function.',
-          line: 5
+          line: 5,
+          column: 16,
+          endLine: 5,
+          endColumn: 40
         },
         {
           message: 'Unexpected asynchronous action in computed function.',
-          line: 8
+          line: 8,
+          column: 16,
+          endLine: 8,
+          endColumn: 31
         }
       ]
     },
@@ -1124,16 +1484,24 @@ ruleTester.run('no-async-in-computed-properties', rule, {
       })
       </script>
       `,
-      parser,
-      parserOptions,
+      languageOptions: {
+        parser,
+        ...languageOptions
+      },
       errors: [
         {
           message: 'Unexpected asynchronous action in computed function.',
-          line: 6
+          line: 6,
+          column: 18,
+          endLine: 6,
+          endColumn: 37
         },
         {
           message: 'Unexpected asynchronous action in computed function.',
-          line: 11
+          line: 11,
+          column: 18,
+          endLine: 11,
+          endColumn: 37
         }
       ]
     },
@@ -1154,40 +1522,66 @@ ruleTester.run('no-async-in-computed-properties', rule, {
       })
       </script>
       `,
-      parser,
-      parserOptions,
+      languageOptions: {
+        parser,
+        ...languageOptions
+      },
       errors: [
         {
           message: 'Unexpected timed function in computed function.',
-          line: 5
+          line: 5,
+          column: 9,
+          endLine: 5,
+          endColumn: 33
         },
         {
           message: 'Unexpected timed function in computed function.',
-          line: 6
+          line: 6,
+          column: 9,
+          endLine: 6,
+          endColumn: 40
         },
         {
           message: 'Unexpected timed function in computed function.',
-          line: 7
+          line: 7,
+          column: 9,
+          endLine: 7,
+          endColumn: 34
         },
         {
           message: 'Unexpected timed function in computed function.',
-          line: 8
+          line: 8,
+          column: 9,
+          endLine: 8,
+          endColumn: 41
         },
         {
           message: 'Unexpected timed function in computed function.',
-          line: 9
+          line: 9,
+          column: 9,
+          endLine: 9,
+          endColumn: 32
         },
         {
           message: 'Unexpected timed function in computed function.',
-          line: 10
+          line: 10,
+          column: 9,
+          endLine: 10,
+          endColumn: 39
         },
         {
           message: 'Unexpected timed function in computed function.',
-          line: 11
+          line: 11,
+          column: 9,
+          endLine: 11,
+          endColumn: 40
         },
         {
           message: 'Unexpected timed function in computed function.',
-          line: 12
+          line: 12,
+          column: 9,
+          endLine: 12,
+          endColumn: 47
         }
       ]
     },
@@ -1201,13 +1595,110 @@ ruleTester.run('no-async-in-computed-properties', rule, {
       })
       </script>
       `,
-      parser,
-      parserOptions,
+      languageOptions: {
+        parser,
+        ...languageOptions
+      },
       errors: [
         {
           message:
             'Unexpected async function declaration in computed function.',
-          line: 4
+          line: 4,
+          column: 29,
+          endLine: 6,
+          endColumn: 8
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        export default {
+          computed: {
+            foo: function () {
+              return myFunc().catch('default')
+            }
+          }
+        }
+      `,
+      languageOptions,
+      errors: [
+        {
+          message: 'Unexpected asynchronous action in "foo" computed property.',
+          line: 5,
+          column: 22,
+          endLine: 5,
+          endColumn: 47
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        export default {
+          computed: {
+            foo: function () {
+              return z.number().catch(42)
+            }
+          }
+        }
+      `,
+      languageOptions,
+      errors: [
+        {
+          message: 'Unexpected asynchronous action in "foo" computed property.',
+          line: 5,
+          column: 22,
+          endLine: 5,
+          endColumn: 42
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        export default {
+          computed: {
+            foo: function () {
+              return someLib.string().catch(42)
+            }
+          }
+        }
+      `,
+      options: [{ ignoredObjectNames: ['z'] }],
+      languageOptions,
+      errors: [
+        {
+          message: 'Unexpected asynchronous action in "foo" computed property.',
+          line: 5,
+          column: 22,
+          endLine: 5,
+          endColumn: 48
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>
+        import {computed} from 'vue'
+
+        const deepCall = computed(() => z.a.b.c.d().e().f().catch())
+        </script>
+      `,
+      options: [{ ignoredObjectNames: ['a'] }],
+      languageOptions: {
+        parser,
+        sourceType: 'module',
+        ecmaVersion: 2020
+      },
+      errors: [
+        {
+          message: 'Unexpected asynchronous action in computed function.',
+          line: 5,
+          column: 41,
+          endLine: 5,
+          endColumn: 68
         }
       ]
     }
diff --git a/tests/lib/rules/no-bare-strings-in-template.js b/tests/lib/rules/no-bare-strings-in-template.js
index 8856ab962..6706aaae0 100644
--- a/tests/lib/rules/no-bare-strings-in-template.js
+++ b/tests/lib/rules/no-bare-strings-in-template.js
@@ -3,20 +3,15 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-bare-strings-in-template')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2020, sourceType: 'module' }
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
 })
 
 tester.run('no-bare-strings-in-template', rule, {
@@ -119,7 +114,51 @@ tester.run('no-bare-strings-in-template', rule, {
         title="( ) , . & + - = * / # % ! ? : [ ] { } < > • —   | &lpar; &rpar; &comma; &period; &amp; &AMP; &plus; &minus; &equals; &ast; &midast; &sol; &num; &percnt; &excl; &quest; &colon; &lsqb; &lbrack; &rsqb; &rbrack; &lcub; &lbrace; &rcub; &rbrace; &lt; &LT; &gt; &GT; &bull; &bullet; &mdash; &ndash; &nbsp; &Tab; &NewLine; &verbar; &vert; &VerticalLine;"
       />
     </template>
-    `
+    `,
+    {
+      // https://github.com/vuejs/eslint-plugin-vue/issues/2681
+      code: `
+      <template>
+        <h1> foo </h1>
+        <h1> foo_bar </h1>
+      </template>
+      `,
+      options: [{ allowlist: ['foo', 'foo_bar'] }]
+    },
+    {
+      code: `
+      <template>
+        <h1>@@</h1>
+      </template>
+      `,
+      options: [{ allowlist: ['@@'] }]
+    },
+    // regex
+    {
+      code: `
+      <template>
+        <h1>123 321</h1>
+      </template>
+      `,
+      options: [{ allowlist: [String.raw`/\d+/g`] }]
+    },
+    {
+      code: `
+      <template>
+        <h1>$foo</h1>
+        <h1>$bar</h1>
+      </template>
+      `,
+      options: [{ allowlist: [String.raw`/\$\w+/`] }]
+    },
+    {
+      code: `
+      <template>
+        <h1>foo123foo</h1>
+      </template>
+      `,
+      options: [{ allowlist: [String.raw`/\d+/`, 'foo'] }]
+    }
   ],
   invalid: [
     {
@@ -232,6 +271,24 @@ tester.run('no-bare-strings-in-template', rule, {
         }
       ]
     },
+    {
+      code: `
+      <template>
+        <h1>foo</h1>
+        <h1>foo_bar</h1>
+      </template>
+      `,
+      options: [{ allowlist: ['foo'] }],
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 4,
+          column: 13,
+          endLine: 4,
+          endColumn: 20
+        }
+      ]
+    },
     {
       code: `
       <template>
@@ -285,6 +342,40 @@ tester.run('no-bare-strings-in-template', rule, {
           endColumn: 34
         }
       ]
+    },
+    {
+      code: `
+      <template>
+        <h1>123, foo is invalid, 321</h1>
+      </template>
+      `,
+      options: [{ allowlist: [String.raw`/^\d+$/g`] }],
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 3,
+          column: 13,
+          endLine: 3,
+          endColumn: 37
+        }
+      ]
+    },
+    {
+      code: `
+      <template>
+        <h1>foo123bar</h1>
+      </template>
+      `,
+      options: [{ allowlist: [String.raw`/\d+/`, 'foo'] }],
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 3,
+          column: 13,
+          endLine: 3,
+          endColumn: 22
+        }
+      ]
     }
   ]
 })
diff --git a/tests/lib/rules/no-boolean-default.js b/tests/lib/rules/no-boolean-default.js
index ef1af7925..56e9cd1cc 100644
--- a/tests/lib/rules/no-boolean-default.js
+++ b/tests/lib/rules/no-boolean-default.js
@@ -4,21 +4,12 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const semver = require('semver')
 const rule = require('../../../lib/rules/no-boolean-default')
 
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const ruleTester = new RuleTester({
-  parserOptions: {
+  languageOptions: {
     ecmaVersion: 2018,
     sourceType: 'module'
   }
@@ -242,7 +233,7 @@ ruleTester.run('no-boolean-default', rule, {
       })
       </script>
       `,
-      parser: require.resolve('vue-eslint-parser')
+      languageOptions: { parser: require('vue-eslint-parser') }
     },
     {
       filename: 'test.vue',
@@ -256,8 +247,8 @@ ruleTester.run('no-boolean-default', rule, {
       })
       </script>
       `,
-      parser: require.resolve('vue-eslint-parser'),
-      options: ['default-false']
+      options: ['default-false'],
+      languageOptions: { parser: require('vue-eslint-parser') }
     },
     {
       filename: 'test.vue',
@@ -270,9 +261,11 @@ ruleTester.run('no-boolean-default', rule, {
       })
       </script>
       `,
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions: {
-        parser: require.resolve('@typescript-eslint/parser')
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
       }
     },
     {
@@ -287,11 +280,13 @@ ruleTester.run('no-boolean-default', rule, {
       })
       </script>
       `,
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions: {
-        parser: require.resolve('@typescript-eslint/parser')
-      },
-      options: ['default-false']
+      options: ['default-false'],
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
     },
     {
       filename: 'test.vue',
@@ -305,9 +300,11 @@ ruleTester.run('no-boolean-default', rule, {
       })
       </script>
       `,
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions: {
-        parser: require.resolve('@typescript-eslint/parser')
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
       }
     },
     {
@@ -322,9 +319,23 @@ ruleTester.run('no-boolean-default', rule, {
       })
       </script>
       `,
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions: {
-        parser: require.resolve('@typescript-eslint/parser')
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const {foo = false} = defineProps({foo: Boolean})
+      </script>
+      `,
+      options: ['default-false'],
+      languageOptions: {
+        parser: require('vue-eslint-parser')
       }
     }
   ],
@@ -346,7 +357,10 @@ ruleTester.run('no-boolean-default', rule, {
       errors: [
         {
           message: 'Boolean prop should only be defaulted to false.',
-          line: 6
+          line: 6,
+          column: 24,
+          endLine: 6,
+          endColumn: 28
         }
       ]
     },
@@ -366,7 +380,10 @@ ruleTester.run('no-boolean-default', rule, {
       errors: [
         {
           message: 'Boolean prop should only be defaulted to false.',
-          line: 6
+          line: 6,
+          column: 24,
+          endLine: 6,
+          endColumn: 28
         }
       ]
     },
@@ -387,7 +404,10 @@ ruleTester.run('no-boolean-default', rule, {
         {
           message:
             'Boolean prop should not set a default (Vue defaults it to false).',
-          line: 6
+          line: 6,
+          column: 24,
+          endLine: 6,
+          endColumn: 29
         }
       ]
     },
@@ -408,7 +428,10 @@ ruleTester.run('no-boolean-default', rule, {
         {
           message:
             'Boolean prop should not set a default (Vue defaults it to false).',
-          line: 6
+          line: 6,
+          column: 24,
+          endLine: 6,
+          endColumn: 28
         }
       ]
     },
@@ -424,12 +447,15 @@ ruleTester.run('no-boolean-default', rule, {
       })
       </script>
       `,
-      parser: require.resolve('vue-eslint-parser'),
+      languageOptions: { parser: require('vue-eslint-parser') },
       errors: [
         {
           message:
             'Boolean prop should not set a default (Vue defaults it to false).',
-          line: 6
+          line: 6,
+          column: 20,
+          endLine: 6,
+          endColumn: 25
         }
       ]
     },
@@ -445,24 +471,21 @@ ruleTester.run('no-boolean-default', rule, {
       })
       </script>
       `,
-      parser: require.resolve('vue-eslint-parser'),
       options: ['default-false'],
+      languageOptions: { parser: require('vue-eslint-parser') },
       errors: [
         {
           message: 'Boolean prop should only be defaulted to false.',
-          line: 6
+          line: 6,
+          column: 20,
+          endLine: 6,
+          endColumn: 24
         }
       ]
     },
-    ...(semver.lt(
-      require('@typescript-eslint/parser/package.json').version,
-      '4.0.0'
-    )
-      ? []
-      : [
-          {
-            filename: 'test.vue',
-            code: `
+    {
+      filename: 'test.vue',
+      code: `
       <script setup lang="ts">
       interface Props {
         foo: boolean
@@ -472,21 +495,26 @@ ruleTester.run('no-boolean-default', rule, {
       })
       </script>
       `,
-            parser: require.resolve('vue-eslint-parser'),
-            parserOptions: {
-              parser: require.resolve('@typescript-eslint/parser')
-            },
-            errors: [
-              {
-                message:
-                  'Boolean prop should not set a default (Vue defaults it to false).',
-                line: 7
-              }
-            ]
-          },
-          {
-            filename: 'test.vue',
-            code: `
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          message:
+            'Boolean prop should not set a default (Vue defaults it to false).',
+          line: 7,
+          column: 14,
+          endLine: 7,
+          endColumn: 19
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
       <script setup lang="ts">
       interface Props {
         foo: boolean
@@ -496,18 +524,64 @@ ruleTester.run('no-boolean-default', rule, {
       })
       </script>
       `,
-            parser: require.resolve('vue-eslint-parser'),
-            parserOptions: {
-              parser: require.resolve('@typescript-eslint/parser')
-            },
-            options: ['default-false'],
-            errors: [
-              {
-                message: 'Boolean prop should only be defaulted to false.',
-                line: 7
-              }
-            ]
-          }
-        ])
+      options: ['default-false'],
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          message: 'Boolean prop should only be defaulted to false.',
+          line: 7,
+          column: 14,
+          endLine: 7,
+          endColumn: 18
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const {foo = false} = defineProps({foo: Boolean})
+      </script>
+      `,
+      languageOptions: {
+        parser: require('vue-eslint-parser')
+      },
+      errors: [
+        {
+          message:
+            'Boolean prop should not set a default (Vue defaults it to false).',
+          line: 3,
+          column: 20,
+          endLine: 3,
+          endColumn: 25
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const {foo = true} = defineProps({foo: Boolean})
+      </script>
+      `,
+      options: ['default-false'],
+      languageOptions: {
+        parser: require('vue-eslint-parser')
+      },
+      errors: [
+        {
+          message: 'Boolean prop should only be defaulted to false.',
+          line: 3,
+          column: 20,
+          endLine: 3,
+          endColumn: 24
+        }
+      ]
+    }
   ]
 })
diff --git a/tests/lib/rules/no-child-content.js b/tests/lib/rules/no-child-content.js
index 320b7ade2..d991559b3 100644
--- a/tests/lib/rules/no-child-content.js
+++ b/tests/lib/rules/no-child-content.js
@@ -4,19 +4,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-child-content')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
 const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 ruleTester.run('no-child-content', rule, {
@@ -64,8 +56,8 @@ ruleTester.run('no-child-content', rule, {
     {
       // self-closing element with v-t directive
       filename: 'test.vue',
-      options: [{ additionalDirectives: ['t'] }],
-      code: '<template><div v-t="foo" /></template>'
+      code: '<template><div v-t="foo" /></template>',
+      options: [{ additionalDirectives: ['t'] }]
     },
     {
       // self-closing element with v-html directive and sibling comment element
@@ -82,10 +74,15 @@ ruleTester.run('no-child-content', rule, {
         {
           message:
             'Child content is disallowed because it will be overwritten by the v-html directive.',
+          line: 1,
           column: 29,
+          endLine: 1,
           endColumn: 32,
           suggestions: [
-            { output: '<template><div v-html="foo"></div></template>' }
+            {
+              messageId: 'removeChildContent',
+              output: '<template><div v-html="foo"></div></template>'
+            }
           ]
         }
       ]
@@ -98,10 +95,15 @@ ruleTester.run('no-child-content', rule, {
         {
           message:
             'Child content is disallowed because it will be overwritten by the v-html directive.',
+          line: 1,
           column: 29,
+          endLine: 1,
           endColumn: 38,
           suggestions: [
-            { output: '<template><div v-html="foo"></div></template>' }
+            {
+              messageId: 'removeChildContent',
+              output: '<template><div v-html="foo"></div></template>'
+            }
           ]
         }
       ]
@@ -114,10 +116,15 @@ ruleTester.run('no-child-content', rule, {
         {
           message:
             'Child content is disallowed because it will be overwritten by the v-html directive.',
+          line: 1,
           column: 29,
+          endLine: 1,
           endColumn: 37,
           suggestions: [
-            { output: '<template><div v-html="foo"></div></template>' }
+            {
+              messageId: 'removeChildContent',
+              output: '<template><div v-html="foo"></div></template>'
+            }
           ]
         }
       ]
@@ -130,10 +137,15 @@ ruleTester.run('no-child-content', rule, {
         {
           message:
             'Child content is disallowed because it will be overwritten by the v-html directive.',
+          line: 1,
           column: 29,
+          endLine: 1,
           endColumn: 41,
           suggestions: [
-            { output: '<template><div v-html="foo"></div></template>' }
+            {
+              messageId: 'removeChildContent',
+              output: '<template><div v-html="foo"></div></template>'
+            }
           ]
         }
       ]
@@ -160,6 +172,7 @@ ruleTester.run('no-child-content', rule, {
           endColumn: 11,
           suggestions: [
             {
+              messageId: 'removeChildContent',
               output: `
         <template>
           <div v-html="foo"></div>
@@ -178,10 +191,15 @@ ruleTester.run('no-child-content', rule, {
         {
           message:
             'Child content is disallowed because it will be overwritten by the v-text directive.',
+          line: 1,
           column: 29,
+          endLine: 1,
           endColumn: 32,
           suggestions: [
-            { output: '<template><div v-text="foo"></div></template>' }
+            {
+              messageId: 'removeChildContent',
+              output: '<template><div v-text="foo"></div></template>'
+            }
           ]
         }
       ]
@@ -189,16 +207,21 @@ ruleTester.run('no-child-content', rule, {
     {
       // v-t directive and text content
       filename: 'test.vue',
-      options: [{ additionalDirectives: ['t'] }],
       code: '<template><div v-t="foo">bar</div></template>',
+      options: [{ additionalDirectives: ['t'] }],
       errors: [
         {
           message:
             'Child content is disallowed because it will be overwritten by the v-t directive.',
+          line: 1,
           column: 26,
+          endLine: 1,
           endColumn: 29,
           suggestions: [
-            { output: '<template><div v-t="foo"></div></template>' }
+            {
+              messageId: 'removeChildContent',
+              output: '<template><div v-t="foo"></div></template>'
+            }
           ]
         }
       ]
@@ -206,16 +229,21 @@ ruleTester.run('no-child-content', rule, {
     {
       // v-html directive and text content while v-t directive is configured
       filename: 'test.vue',
-      options: [{ additionalDirectives: ['t'] }],
       code: '<template><div v-html="foo">baz</div></template>',
+      options: [{ additionalDirectives: ['t'] }],
       errors: [
         {
           message:
             'Child content is disallowed because it will be overwritten by the v-html directive.',
+          line: 1,
           column: 29,
+          endLine: 1,
           endColumn: 32,
           suggestions: [
-            { output: '<template><div v-html="foo"></div></template>' }
+            {
+              messageId: 'removeChildContent',
+              output: '<template><div v-html="foo"></div></template>'
+            }
           ]
         }
       ]
diff --git a/tests/lib/rules/no-computed-properties-in-data.js b/tests/lib/rules/no-computed-properties-in-data.js
index a352d4419..9eb32e973 100644
--- a/tests/lib/rules/no-computed-properties-in-data.js
+++ b/tests/lib/rules/no-computed-properties-in-data.js
@@ -4,12 +4,12 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-computed-properties-in-data')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
     ecmaVersion: 2020,
     sourceType: 'module'
   }
@@ -97,7 +97,9 @@ tester.run('no-computed-properties-in-data', rule, {
           message:
             'The computed property cannot be used in `data()` because it is before initialization.',
           line: 5,
-          column: 23
+          column: 23,
+          endLine: 5,
+          endColumn: 31
         }
       ]
     },
@@ -122,7 +124,9 @@ tester.run('no-computed-properties-in-data', rule, {
           message:
             'The computed property cannot be used in `data()` because it is before initialization.',
           line: 6,
-          column: 23
+          column: 23,
+          endLine: 6,
+          endColumn: 29
         }
       ]
     }
diff --git a/tests/lib/rules/no-console.js b/tests/lib/rules/no-console.js
new file mode 100644
index 000000000..f9df6ede7
--- /dev/null
+++ b/tests/lib/rules/no-console.js
@@ -0,0 +1,146 @@
+/**
+ * @author ItMaga <https://github.com/ItMaga>
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/no-console')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('no-console', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <button @click="Console.log">button</button>
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <button>{{ console.warn('warn') }}</button>
+      </template>
+      `,
+      options: [{ allow: ['warn'] }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <button :foo="console.error">button</button>
+      </template>
+      `,
+      options: [{ allow: ['error'] }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <button :foo="console.log">{{ console.log('test') }}</button>
+        {{ console.warn('test') }}
+        {{ console.info('test') }}
+      </template>
+      `,
+      options: [{ allow: ['log', 'warn', 'info'] }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template><div /></template>
+      <script setup>
+        console.log('test')
+      </script>
+      `
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <button @click="console.log">button</button>
+      </template>
+      `,
+      errors: [
+        {
+          message: 'Unexpected console statement.',
+          line: 3,
+          column: 25,
+          endLine: 3,
+          endColumn: 32
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <button :foo="console.log">{{ console.log('test') }}</button>
+      </template>
+      `,
+      errors: [
+        {
+          message: 'Unexpected console statement.',
+          line: 3,
+          column: 23,
+          endLine: 3,
+          endColumn: 30
+        },
+        {
+          message: 'Unexpected console statement.',
+          line: 3,
+          column: 39,
+          endLine: 3,
+          endColumn: 46
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <button @click="() => console.log">button</button>
+      </template>
+      `,
+      errors: [
+        {
+          message: 'Unexpected console statement.',
+          line: 3,
+          column: 31,
+          endLine: 3,
+          endColumn: 38
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <button @click="console.log">button</button>
+        {{ console.error('test') }}
+      </template>
+      `,
+      options: [{ allow: ['error'] }],
+      errors: [
+        {
+          message: 'Unexpected console statement.',
+          line: 3,
+          column: 25,
+          endLine: 3,
+          endColumn: 32
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/no-constant-condition.js b/tests/lib/rules/no-constant-condition.js
index 312a6ee05..38b2f94f7 100644
--- a/tests/lib/rules/no-constant-condition.js
+++ b/tests/lib/rules/no-constant-condition.js
@@ -3,12 +3,11 @@
  */
 'use strict'
 
-const { RuleTester } = require('eslint')
+const { RuleTester } = require('../../eslint-compat')
 const rule = require('../../../lib/rules/no-constant-condition.js')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 6 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 6 }
 })
 
 tester.run('no-constant-condition', rule, {
@@ -24,8 +23,9 @@ tester.run('no-constant-condition', rule, {
       errors: [
         {
           messageId: 'unexpected',
-          type: 'UnaryExpression',
+          line: 1,
           column: 31,
+          endLine: 1,
           endColumn: 33
         }
       ]
@@ -35,8 +35,9 @@ tester.run('no-constant-condition', rule, {
       errors: [
         {
           messageId: 'unexpected',
-          type: 'Literal',
+          line: 1,
           column: 36,
+          endLine: 1,
           endColumn: 40
         }
       ]
@@ -46,8 +47,9 @@ tester.run('no-constant-condition', rule, {
       errors: [
         {
           messageId: 'unexpected',
-          type: 'Literal',
+          line: 1,
           column: 31,
+          endLine: 1,
           endColumn: 32
         }
       ]
@@ -57,8 +59,9 @@ tester.run('no-constant-condition', rule, {
       errors: [
         {
           messageId: 'unexpected',
-          type: 'ObjectExpression',
+          line: 1,
           column: 33,
+          endLine: 1,
           endColumn: 35
         }
       ]
@@ -68,8 +71,9 @@ tester.run('no-constant-condition', rule, {
       errors: [
         {
           messageId: 'unexpected',
-          type: 'BinaryExpression',
+          line: 1,
           column: 31,
+          endLine: 1,
           endColumn: 36
         }
       ]
@@ -79,35 +83,33 @@ tester.run('no-constant-condition', rule, {
       errors: [
         {
           messageId: 'unexpected',
-          type: 'LogicalExpression',
+          line: 1,
           column: 31,
+          endLine: 1,
           endColumn: 37
         }
       ]
-    }
+    },
 
-    // failing in Node.js v8, because template literals are not supported there:
-    // {
-    //   code: '<template><CustomButton v-if="`foo`" /></template>',
-    //   errors: [
-    //     {
-    //       messageId: 'unexpected',
-    //       type: 'TemplateLiteral',
-    //       column: 31,
-    //       endColumn: 36
-    //     }
-    //   ]
-    // },
-    // {
-    //   code: '<template><CustomButton v-if="``" /></template>',
-    //   errors: [
-    //     {
-    //       messageId: 'unexpected',
-    //       type: 'TemplateLiteral',
-    //       column: 31,
-    //       endColumn: 33
-    //     }
-    //   ]
-    // }
+    {
+      code: '<template><CustomButton v-if="`foo`" /></template>',
+      errors: [
+        {
+          messageId: 'unexpected',
+          column: 31,
+          endColumn: 36
+        }
+      ]
+    },
+    {
+      code: '<template><CustomButton v-if="``" /></template>',
+      errors: [
+        {
+          messageId: 'unexpected',
+          column: 31,
+          endColumn: 33
+        }
+      ]
+    }
   ]
 })
diff --git a/tests/lib/rules/no-custom-modifiers-on-v-model.js b/tests/lib/rules/no-custom-modifiers-on-v-model.js
index 03b0459a4..156f42e4e 100644
--- a/tests/lib/rules/no-custom-modifiers-on-v-model.js
+++ b/tests/lib/rules/no-custom-modifiers-on-v-model.js
@@ -4,20 +4,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/no-custom-modifiers-on-v-model')
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 ruleTester.run('no-custom-modifiers-on-v-model', rule, {
@@ -60,12 +51,28 @@ ruleTester.run('no-custom-modifiers-on-v-model', rule, {
     {
       filename: 'test.vue',
       code: '<template><MyComponent v-model:propName.aaa="foo"></template>',
-      errors: ["'v-model' directives don't support the modifier 'aaa'."]
+      errors: [
+        {
+          message: "'v-model' directives don't support the modifier 'aaa'.",
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 50
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><MyComponent v-model.aaa="foo"></template>',
-      errors: ["'v-model' directives don't support the modifier 'aaa'."]
+      errors: [
+        {
+          message: "'v-model' directives don't support the modifier 'aaa'.",
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 41
+        }
+      ]
     }
   ]
 })
diff --git a/tests/lib/rules/no-deprecated-data-object-declaration.js b/tests/lib/rules/no-deprecated-data-object-declaration.js
index 22aa31160..b7395304d 100644
--- a/tests/lib/rules/no-deprecated-data-object-declaration.js
+++ b/tests/lib/rules/no-deprecated-data-object-declaration.js
@@ -4,23 +4,15 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/no-deprecated-data-object-declaration')
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 
-const parserOptions = {
+const languageOptions = {
   ecmaVersion: 2018,
   sourceType: 'module'
 }
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const ruleTester = new RuleTester()
 ruleTester.run('no-deprecated-data-object-declaration', rule, {
   valid: [
@@ -35,7 +27,7 @@ ruleTester.run('no-deprecated-data-object-declaration', rule, {
           }
         }).mount('#app')
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.js',
@@ -49,7 +41,7 @@ ruleTester.run('no-deprecated-data-object-declaration', rule, {
           }
         }).mount('#app')
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.js',
@@ -63,7 +55,7 @@ ruleTester.run('no-deprecated-data-object-declaration', rule, {
           }
         })
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -76,7 +68,7 @@ ruleTester.run('no-deprecated-data-object-declaration', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -85,7 +77,7 @@ ruleTester.run('no-deprecated-data-object-declaration', rule, {
           ...foo
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -94,7 +86,7 @@ ruleTester.run('no-deprecated-data-object-declaration', rule, {
           data
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -105,7 +97,7 @@ ruleTester.run('no-deprecated-data-object-declaration', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -119,7 +111,7 @@ ruleTester.run('no-deprecated-data-object-declaration', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -133,7 +125,7 @@ ruleTester.run('no-deprecated-data-object-declaration', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     }
   ],
 
@@ -158,12 +150,15 @@ return {
 }
         })
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message:
             "Object declaration on 'data' property is deprecated. Using function declaration instead.",
-          line: 4
+          line: 4,
+          column: 11,
+          endLine: 6,
+          endColumn: 12
         }
       ]
     },
@@ -185,12 +180,15 @@ return {
 }
         })
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message:
             "Object declaration on 'data' property is deprecated. Using function declaration instead.",
-          line: 3
+          line: 3,
+          column: 11,
+          endLine: 5,
+          endColumn: 12
         }
       ]
     },
@@ -212,12 +210,15 @@ return {
 }
         }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message:
             "Object declaration on 'data' property is deprecated. Using function declaration instead.",
-          line: 3
+          line: 3,
+          column: 11,
+          endLine: 5,
+          endColumn: 12
         }
       ]
     },
@@ -239,12 +240,15 @@ return (/*b*/{
 }
         }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message:
             "Object declaration on 'data' property is deprecated. Using function declaration instead.",
-          line: 3
+          line: 3,
+          column: 11,
+          endLine: 5,
+          endColumn: 13
         }
       ]
     },
@@ -266,12 +270,15 @@ return {
 }
         })
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message:
             "Object declaration on 'data' property is deprecated. Using function declaration instead.",
-          line: 3
+          line: 3,
+          column: 11,
+          endLine: 5,
+          endColumn: 12
         }
       ]
     },
@@ -293,12 +300,15 @@ return {
 }
         }).mount('#app')
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message:
             "Object declaration on 'data' property is deprecated. Using function declaration instead.",
-          line: 3
+          line: 3,
+          column: 11,
+          endLine: 5,
+          endColumn: 12
         }
       ]
     }
diff --git a/tests/lib/rules/no-deprecated-delete-set.js b/tests/lib/rules/no-deprecated-delete-set.js
new file mode 100644
index 000000000..a2dae8fa7
--- /dev/null
+++ b/tests/lib/rules/no-deprecated-delete-set.js
@@ -0,0 +1,463 @@
+/**
+ * @author Wayne Zhang
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/no-deprecated-delete-set')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    globals: {
+      require: 'readonly'
+    }
+  }
+})
+
+tester.run('no-deprecated-delete-set', rule, {
+  valid: [
+    {
+      filename: 'test.js',
+      code: `
+        const another = function () {
+          this.$set(obj, key, value)
+          this.$delete(obj, key)
+        }
+
+        createApp({
+          mounted () {
+            this.$emit('start')
+          },
+          methods: {
+            click () {
+              this.$emit('click')
+            }
+          }
+        })
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            mounted () {
+              this.$nextTick()
+            }
+          }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            mounted () {
+              a(this.$set)
+              a(this.$delete)
+            }
+          }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+        function set(obj, key, value) {}
+        function del(obj, key) {}
+        export default {
+          mounted () {
+            set(obj, key, value)
+            del(obj, key)
+          }
+        }
+        </script>
+      `
+    },
+    // from vue
+    {
+      filename: 'test.js',
+      code: `
+        app.component('some-comp', {
+          mounted () {
+            Vue.nextTick()
+          }
+        })
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          import { nextTick as nt, provide } from 'vue'
+          export default {
+            mounted () {
+              nt()
+              provide(key, value)
+            }
+          }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          const { nextTick: set, provide: del } = require('vue')
+          export default {
+            mounted () {
+              set()
+              del(key, value)
+            }
+          }
+        </script>
+      `
+    }
+  ],
+
+  invalid: [
+    {
+      filename: 'test.js',
+      code: `
+        app.component('some-comp', {
+          mounted () {
+            this.$set(obj, key, value)
+            this.$delete(obj, key)
+          }
+        })
+      `,
+      errors: [
+        {
+          messageId: 'deprecated',
+          line: 4,
+          column: 18,
+          endLine: 4,
+          endColumn: 22
+        },
+        {
+          messageId: 'deprecated',
+          line: 5,
+          column: 18,
+          endLine: 5,
+          endColumn: 25
+        }
+      ]
+    },
+    {
+      filename: 'test.js',
+      code: `
+        app.component('some-comp', {
+          mounted () {
+            const vm = this
+            vm.$set(obj, key, value)
+            vm.$delete(obj, key)
+          }
+        })
+      `,
+      errors: [
+        {
+          messageId: 'deprecated',
+          line: 5,
+          column: 16,
+          endLine: 5,
+          endColumn: 20
+        },
+        {
+          messageId: 'deprecated',
+          line: 6,
+          column: 16,
+          endLine: 6,
+          endColumn: 23
+        }
+      ]
+    },
+    {
+      filename: 'test.js',
+      code: `
+        app.component('some-comp', {
+          mounted () {
+            this?.$set(obj, key, value)
+            this?.$delete(obj, key)
+          }
+        })
+      `,
+      errors: [
+        {
+          messageId: 'deprecated',
+          line: 4,
+          column: 19,
+          endLine: 4,
+          endColumn: 23
+        },
+        {
+          messageId: 'deprecated',
+          line: 5,
+          column: 19,
+          endLine: 5,
+          endColumn: 26
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            mounted () {
+              this.$set(obj, key, value)
+              this.$delete(obj, key)
+            }
+          }
+        </script>
+      `,
+      errors: [
+        {
+          messageId: 'deprecated',
+          line: 5,
+          column: 20,
+          endLine: 5,
+          endColumn: 24
+        },
+        {
+          messageId: 'deprecated',
+          line: 6,
+          column: 20,
+          endLine: 6,
+          endColumn: 27
+        }
+      ]
+    },
+    // from vue
+    {
+      filename: 'test.js',
+      code: `
+        app.component('some-comp', {
+          mounted () {
+            Vue.set(obj, key, value)
+            Vue.delete(obj, key)
+          }
+        })
+      `,
+      errors: [
+        {
+          messageId: 'deprecated',
+          line: 4,
+          column: 17,
+          endLine: 4,
+          endColumn: 20
+        },
+        {
+          messageId: 'deprecated',
+          line: 5,
+          column: 17,
+          endLine: 5,
+          endColumn: 23
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          import { set, del } from 'vue'
+          export default {
+            mounted () {
+              set(obj, key, value)
+              del(obj, key)
+            }
+          }
+        </script>
+      `,
+      errors: [
+        {
+          messageId: 'deprecated',
+          line: 6,
+          column: 15,
+          endLine: 6,
+          endColumn: 18
+        },
+        {
+          messageId: 'deprecated',
+          line: 7,
+          column: 15,
+          endLine: 7,
+          endColumn: 18
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>
+          import { set, del } from 'vue'
+
+          set(obj, key, value)
+          del(obj, key)
+        </script>
+      `,
+      errors: [
+        {
+          messageId: 'deprecated',
+          line: 5,
+          column: 11,
+          endLine: 5,
+          endColumn: 14
+        },
+        {
+          messageId: 'deprecated',
+          line: 6,
+          column: 11,
+          endLine: 6,
+          endColumn: 14
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>
+          import { set as s, del as d } from 'vue'
+
+          s(obj, key, value)
+          d(obj, key)
+        </script>
+      `,
+      errors: [
+        {
+          messageId: 'deprecated',
+          line: 5,
+          column: 11,
+          endLine: 5,
+          endColumn: 12
+        },
+        {
+          messageId: 'deprecated',
+          line: 6,
+          column: 11,
+          endLine: 6,
+          endColumn: 12
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          const { set, del } = require('vue')
+          export default {
+            mounted () {
+              set(obj, key, value)
+              del(obj, key)
+            }
+          }
+        </script>
+      `,
+      errors: [
+        {
+          messageId: 'deprecated',
+          line: 6,
+          column: 15,
+          endLine: 6,
+          endColumn: 18
+        },
+        {
+          messageId: 'deprecated',
+          line: 7,
+          column: 15,
+          endLine: 7,
+          endColumn: 18
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          const { set: s, del: d } = require('vue')
+          export default {
+            mounted () {
+              s(obj, key, value)
+              d(obj, key)
+            }
+          }
+        </script>
+      `,
+      errors: [
+        {
+          messageId: 'deprecated',
+          line: 6,
+          column: 15,
+          endLine: 6,
+          endColumn: 16
+        },
+        {
+          messageId: 'deprecated',
+          line: 7,
+          column: 15,
+          endLine: 7,
+          endColumn: 16
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>
+          const { set, del } = require('vue')
+
+          set(obj, key, value)
+          del(obj, key)
+        </script>
+      `,
+      errors: [
+        {
+          messageId: 'deprecated',
+          line: 5,
+          column: 11,
+          endLine: 5,
+          endColumn: 14
+        },
+        {
+          messageId: 'deprecated',
+          line: 6,
+          column: 11,
+          endLine: 6,
+          endColumn: 14
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>
+          const v = require('vue')
+
+          v.set(obj, key, value)
+          v.del(obj, key)
+        </script>
+      `,
+      errors: [
+        {
+          messageId: 'deprecated',
+          line: 5,
+          column: 11,
+          endLine: 5,
+          endColumn: 16
+        },
+        {
+          messageId: 'deprecated',
+          line: 6,
+          column: 11,
+          endLine: 6,
+          endColumn: 16
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/no-deprecated-destroyed-lifecycle.js b/tests/lib/rules/no-deprecated-destroyed-lifecycle.js
index c8c6774d6..5f7e93dc1 100644
--- a/tests/lib/rules/no-deprecated-destroyed-lifecycle.js
+++ b/tests/lib/rules/no-deprecated-destroyed-lifecycle.js
@@ -4,21 +4,16 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/no-deprecated-destroyed-lifecycle')
 
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2020, sourceType: 'module' }
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
 })
 ruleTester.run('no-deprecated-destroyed-lifecycle', rule, {
   valid: [
@@ -123,12 +118,18 @@ ruleTester.run('no-deprecated-destroyed-lifecycle', rule, {
         {
           message:
             'The `beforeDestroy` lifecycle hook is deprecated. Use `beforeUnmount` instead.',
-          line: 4
+          line: 4,
+          column: 9,
+          endLine: 4,
+          endColumn: 22
         },
         {
           message:
             'The `destroyed` lifecycle hook is deprecated. Use `unmounted` instead.',
-          line: 5
+          line: 5,
+          column: 9,
+          endLine: 5,
+          endColumn: 18
         }
       ]
     },
@@ -154,12 +155,18 @@ ruleTester.run('no-deprecated-destroyed-lifecycle', rule, {
         {
           message:
             'The `beforeDestroy` lifecycle hook is deprecated. Use `beforeUnmount` instead.',
-          line: 4
+          line: 4,
+          column: 9,
+          endLine: 4,
+          endColumn: 22
         },
         {
           message:
             'The `destroyed` lifecycle hook is deprecated. Use `unmounted` instead.',
-          line: 5
+          line: 5,
+          column: 9,
+          endLine: 5,
+          endColumn: 18
         }
       ]
     },
@@ -203,12 +210,18 @@ ruleTester.run('no-deprecated-destroyed-lifecycle', rule, {
         {
           message:
             'The `beforeDestroy` lifecycle hook is deprecated. Use `beforeUnmount` instead.',
-          line: 12
+          line: 12,
+          column: 9,
+          endLine: 12,
+          endColumn: 22
         },
         {
           message:
             'The `destroyed` lifecycle hook is deprecated. Use `unmounted` instead.',
-          line: 13
+          line: 13,
+          column: 9,
+          endLine: 13,
+          endColumn: 18
         }
       ]
     },
@@ -234,12 +247,18 @@ ruleTester.run('no-deprecated-destroyed-lifecycle', rule, {
         {
           message:
             'The `beforeDestroy` lifecycle hook is deprecated. Use `beforeUnmount` instead.',
-          line: 4
+          line: 4,
+          column: 10,
+          endLine: 4,
+          endColumn: 25
         },
         {
           message:
             'The `destroyed` lifecycle hook is deprecated. Use `unmounted` instead.',
-          line: 5
+          line: 5,
+          column: 10,
+          endLine: 5,
+          endColumn: 21
         }
       ]
     },
@@ -265,12 +284,18 @@ ruleTester.run('no-deprecated-destroyed-lifecycle', rule, {
         {
           message:
             'The `beforeDestroy` lifecycle hook is deprecated. Use `beforeUnmount` instead.',
-          line: 4
+          line: 4,
+          column: 10,
+          endLine: 4,
+          endColumn: 25
         },
         {
           message:
             'The `destroyed` lifecycle hook is deprecated. Use `unmounted` instead.',
-          line: 5
+          line: 5,
+          column: 10,
+          endLine: 5,
+          endColumn: 21
         }
       ]
     }
diff --git a/tests/lib/rules/no-deprecated-dollar-listeners-api.js b/tests/lib/rules/no-deprecated-dollar-listeners-api.js
index 8644d13aa..2a4e72eb3 100644
--- a/tests/lib/rules/no-deprecated-dollar-listeners-api.js
+++ b/tests/lib/rules/no-deprecated-dollar-listeners-api.js
@@ -4,21 +4,16 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/no-deprecated-dollar-listeners-api')
 
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2020, sourceType: 'module' }
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
 })
 ruleTester.run('no-deprecated-dollar-listeners-api', rule, {
   valid: [
@@ -137,16 +132,16 @@ ruleTester.run('no-deprecated-dollar-listeners-api', rule, {
       `,
       errors: [
         {
+          messageId: 'deprecated',
           line: 3,
           column: 22,
-          messageId: 'deprecated',
           endLine: 3,
           endColumn: 32
         },
         {
+          messageId: 'deprecated',
           line: 9,
           column: 27,
-          messageId: 'deprecated',
           endLine: 9,
           endColumn: 37
         }
@@ -172,23 +167,23 @@ ruleTester.run('no-deprecated-dollar-listeners-api', rule, {
       `,
       errors: [
         {
+          messageId: 'deprecated',
           line: 3,
           column: 35,
-          messageId: 'deprecated',
           endLine: 3,
           endColumn: 45
         },
         {
+          messageId: 'deprecated',
           line: 4,
           column: 22,
-          messageId: 'deprecated',
           endLine: 4,
           endColumn: 32
         },
         {
+          messageId: 'deprecated',
           line: 10,
           column: 23,
-          messageId: 'deprecated',
           endLine: 10,
           endColumn: 33
         }
@@ -210,9 +205,11 @@ ruleTester.run('no-deprecated-dollar-listeners-api', rule, {
       `,
       errors: [
         {
+          messageId: 'deprecated',
           line: 7,
           column: 25,
-          messageId: 'deprecated'
+          endLine: 7,
+          endColumn: 35
         }
       ]
     },
@@ -235,9 +232,11 @@ ruleTester.run('no-deprecated-dollar-listeners-api', rule, {
       `,
       errors: [
         {
+          messageId: 'deprecated',
           line: 8,
           column: 27,
-          messageId: 'deprecated'
+          endLine: 8,
+          endColumn: 37
         }
       ]
     },
@@ -258,10 +257,18 @@ ruleTester.run('no-deprecated-dollar-listeners-api', rule, {
       `,
       errors: [
         {
-          messageId: 'deprecated'
+          messageId: 'deprecated',
+          line: 7,
+          column: 29,
+          endLine: 7,
+          endColumn: 39
         },
         {
-          messageId: 'deprecated'
+          messageId: 'deprecated',
+          line: 8,
+          column: 31,
+          endLine: 8,
+          endColumn: 41
         }
       ]
     }
diff --git a/tests/lib/rules/no-deprecated-dollar-scopedslots-api.js b/tests/lib/rules/no-deprecated-dollar-scopedslots-api.js
index a29211a22..c235698f8 100644
--- a/tests/lib/rules/no-deprecated-dollar-scopedslots-api.js
+++ b/tests/lib/rules/no-deprecated-dollar-scopedslots-api.js
@@ -4,21 +4,16 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/no-deprecated-dollar-scopedslots-api')
 
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2020, sourceType: 'module' }
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
 })
 ruleTester.run('no-deprecated-dollar-scopedslots-api', rule, {
   valid: [
@@ -147,16 +142,16 @@ ruleTester.run('no-deprecated-dollar-scopedslots-api', rule, {
       `,
       errors: [
         {
+          messageId: 'deprecated',
           line: 3,
           column: 22,
-          messageId: 'deprecated',
           endLine: 3,
           endColumn: 34
         },
         {
+          messageId: 'deprecated',
           line: 8,
           column: 25,
-          messageId: 'deprecated',
           endLine: 8,
           endColumn: 37
         }
@@ -196,23 +191,23 @@ ruleTester.run('no-deprecated-dollar-scopedslots-api', rule, {
       `,
       errors: [
         {
+          messageId: 'deprecated',
           line: 3,
           column: 31,
-          messageId: 'deprecated',
           endLine: 3,
           endColumn: 43
         },
         {
+          messageId: 'deprecated',
           line: 4,
           column: 22,
-          messageId: 'deprecated',
           endLine: 4,
           endColumn: 34
         },
         {
+          messageId: 'deprecated',
           line: 10,
           column: 23,
-          messageId: 'deprecated',
           endLine: 10,
           endColumn: 35
         }
@@ -242,9 +237,11 @@ ruleTester.run('no-deprecated-dollar-scopedslots-api', rule, {
       `,
       errors: [
         {
+          messageId: 'deprecated',
           line: 6,
           column: 23,
-          messageId: 'deprecated'
+          endLine: 6,
+          endColumn: 35
         }
       ]
     },
@@ -278,9 +275,11 @@ ruleTester.run('no-deprecated-dollar-scopedslots-api', rule, {
       `,
       errors: [
         {
+          messageId: 'deprecated',
           line: 7,
           column: 25,
-          messageId: 'deprecated'
+          endLine: 7,
+          endColumn: 37
         }
       ]
     },
@@ -312,10 +311,18 @@ ruleTester.run('no-deprecated-dollar-scopedslots-api', rule, {
       `,
       errors: [
         {
-          messageId: 'deprecated'
+          messageId: 'deprecated',
+          line: 6,
+          column: 27,
+          endLine: 6,
+          endColumn: 39
         },
         {
-          messageId: 'deprecated'
+          messageId: 'deprecated',
+          line: 7,
+          column: 29,
+          endLine: 7,
+          endColumn: 41
         }
       ]
     }
diff --git a/tests/lib/rules/no-deprecated-events-api.js b/tests/lib/rules/no-deprecated-events-api.js
index 3022690b1..75c8b7d91 100644
--- a/tests/lib/rules/no-deprecated-events-api.js
+++ b/tests/lib/rules/no-deprecated-events-api.js
@@ -4,23 +4,15 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/no-deprecated-events-api')
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 
-const parserOptions = {
+const languageOptions = {
   ecmaVersion: 2020,
   sourceType: 'module'
 }
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const ruleTester = new RuleTester()
 ruleTester.run('no-deprecated-events-api', rule, {
   valid: [
@@ -33,7 +25,7 @@ ruleTester.run('no-deprecated-events-api', rule, {
           }
         })
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.js',
@@ -46,7 +38,7 @@ ruleTester.run('no-deprecated-events-api', rule, {
           }
         })
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.js',
@@ -63,7 +55,7 @@ ruleTester.run('no-deprecated-events-api', rule, {
           }
         })
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.js',
@@ -74,7 +66,7 @@ ruleTester.run('no-deprecated-events-api', rule, {
           }
         })
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -85,7 +77,7 @@ ruleTester.run('no-deprecated-events-api', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -101,7 +93,7 @@ ruleTester.run('no-deprecated-events-api', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -112,7 +104,7 @@ ruleTester.run('no-deprecated-events-api', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.js',
@@ -126,7 +118,7 @@ ruleTester.run('no-deprecated-events-api', rule, {
           }
         })
       `,
-      parserOptions
+      languageOptions
     }
   ],
 
@@ -142,12 +134,15 @@ ruleTester.run('no-deprecated-events-api', rule, {
           }
         })
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message:
             'The Events api `$on`, `$off` `$once` is deprecated. Using external library instead, for example mitt.',
-          line: 4
+          line: 4,
+          column: 18,
+          endLine: 4,
+          endColumn: 21
         }
       ]
     },
@@ -160,12 +155,15 @@ ruleTester.run('no-deprecated-events-api', rule, {
           }
         })
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message:
             'The Events api `$on`, `$off` `$once` is deprecated. Using external library instead, for example mitt.',
-          line: 4
+          line: 4,
+          column: 18,
+          endLine: 4,
+          endColumn: 22
         }
       ]
     },
@@ -180,12 +178,15 @@ ruleTester.run('no-deprecated-events-api', rule, {
           }
         }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message:
             'The Events api `$on`, `$off` `$once` is deprecated. Using external library instead, for example mitt.',
-          line: 4
+          line: 4,
+          column: 18,
+          endLine: 4,
+          endColumn: 23
         }
       ]
     },
@@ -201,12 +202,15 @@ ruleTester.run('no-deprecated-events-api', rule, {
           }
         })
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message:
             'The Events api `$on`, `$off` `$once` is deprecated. Using external library instead, for example mitt.',
-          line: 5
+          line: 5,
+          column: 16,
+          endLine: 5,
+          endColumn: 19
         }
       ]
     },
@@ -221,11 +225,32 @@ ruleTester.run('no-deprecated-events-api', rule, {
           }
         })
       `,
-      parserOptions,
+      languageOptions,
       errors: [
-        'The Events api `$on`, `$off` `$once` is deprecated. Using external library instead, for example mitt.',
-        'The Events api `$on`, `$off` `$once` is deprecated. Using external library instead, for example mitt.',
-        'The Events api `$on`, `$off` `$once` is deprecated. Using external library instead, for example mitt.'
+        {
+          message:
+            'The Events api `$on`, `$off` `$once` is deprecated. Using external library instead, for example mitt.',
+          line: 4,
+          column: 19,
+          endLine: 4,
+          endColumn: 22
+        },
+        {
+          message:
+            'The Events api `$on`, `$off` `$once` is deprecated. Using external library instead, for example mitt.',
+          line: 5,
+          column: 19,
+          endLine: 5,
+          endColumn: 23
+        },
+        {
+          message:
+            'The Events api `$on`, `$off` `$once` is deprecated. Using external library instead, for example mitt.',
+          line: 6,
+          column: 19,
+          endLine: 6,
+          endColumn: 24
+        }
       ]
     },
     {
@@ -239,11 +264,32 @@ ruleTester.run('no-deprecated-events-api', rule, {
           }
         })
       `,
-      parserOptions,
+      languageOptions,
       errors: [
-        'The Events api `$on`, `$off` `$once` is deprecated. Using external library instead, for example mitt.',
-        'The Events api `$on`, `$off` `$once` is deprecated. Using external library instead, for example mitt.',
-        'The Events api `$on`, `$off` `$once` is deprecated. Using external library instead, for example mitt.'
+        {
+          message:
+            'The Events api `$on`, `$off` `$once` is deprecated. Using external library instead, for example mitt.',
+          line: 4,
+          column: 21,
+          endLine: 4,
+          endColumn: 24
+        },
+        {
+          message:
+            'The Events api `$on`, `$off` `$once` is deprecated. Using external library instead, for example mitt.',
+          line: 5,
+          column: 21,
+          endLine: 5,
+          endColumn: 25
+        },
+        {
+          message:
+            'The Events api `$on`, `$off` `$once` is deprecated. Using external library instead, for example mitt.',
+          line: 6,
+          column: 21,
+          endLine: 6,
+          endColumn: 26
+        }
       ]
     }
   ]
diff --git a/tests/lib/rules/no-deprecated-filter.js b/tests/lib/rules/no-deprecated-filter.js
index e21d2b619..54eb4b4f1 100644
--- a/tests/lib/rules/no-deprecated-filter.js
+++ b/tests/lib/rules/no-deprecated-filter.js
@@ -4,20 +4,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/no-deprecated-filter')
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 ruleTester.run('no-deprecated-filter', rule, {
@@ -33,8 +24,10 @@ ruleTester.run('no-deprecated-filter', rule, {
     {
       filename: 'test.vue',
       code: '<template>{{ msg | filter }}</template>',
-      parserOptions: {
-        vueFeatures: { filter: false }
+      languageOptions: {
+        parserOptions: {
+          vueFeatures: { filter: false }
+        }
       }
     }
   ],
@@ -43,37 +36,93 @@ ruleTester.run('no-deprecated-filter', rule, {
     {
       filename: 'test.vue',
       code: '<template>{{ msg | filter }}</template>',
-      errors: ['Filters are deprecated.']
+      errors: [
+        {
+          message: 'Filters are deprecated.',
+          line: 1,
+          column: 14,
+          endLine: 1,
+          endColumn: 26
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template>{{ msg | filter(x) }}</template>',
-      errors: ['Filters are deprecated.']
+      errors: [
+        {
+          message: 'Filters are deprecated.',
+          line: 1,
+          column: 14,
+          endLine: 1,
+          endColumn: 29
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template>{{ msg | filterA | filterB }}</template>',
-      errors: ['Filters are deprecated.']
+      errors: [
+        {
+          message: 'Filters are deprecated.',
+          line: 1,
+          column: 14,
+          endLine: 1,
+          endColumn: 37
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-for="msg in messages">{{ msg | filter }}</div></template>',
-      errors: ['Filters are deprecated.']
+      errors: [
+        {
+          message: 'Filters are deprecated.',
+          line: 1,
+          column: 43,
+          endLine: 1,
+          endColumn: 55
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-bind:id="msg | filter"></div></template>',
-      errors: ['Filters are deprecated.']
+      errors: [
+        {
+          message: 'Filters are deprecated.',
+          line: 1,
+          column: 27,
+          endLine: 1,
+          endColumn: 39
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-bind:id="msg | filter(aaa)"></div></template>',
-      errors: ['Filters are deprecated.']
+      errors: [
+        {
+          message: 'Filters are deprecated.',
+          line: 1,
+          column: 27,
+          endLine: 1,
+          endColumn: 44
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-bind:id="msg | filterA | filterB"></div></template>',
-      errors: ['Filters are deprecated.']
+      errors: [
+        {
+          message: 'Filters are deprecated.',
+          line: 1,
+          column: 27,
+          endLine: 1,
+          endColumn: 50
+        }
+      ]
     }
   ]
 })
diff --git a/tests/lib/rules/no-deprecated-functional-template.js b/tests/lib/rules/no-deprecated-functional-template.js
index 9b031cf22..fae03fdb7 100644
--- a/tests/lib/rules/no-deprecated-functional-template.js
+++ b/tests/lib/rules/no-deprecated-functional-template.js
@@ -4,20 +4,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/no-deprecated-functional-template')
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2019 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2019 }
 })
 
 ruleTester.run('no-deprecated-functional-template', rule, {
@@ -42,9 +33,9 @@ ruleTester.run('no-deprecated-functional-template', rule, {
       code: '<template functional></template>',
       errors: [
         {
+          messageId: 'unexpected',
           line: 1,
           column: 11,
-          messageId: 'unexpected',
           endLine: 1,
           endColumn: 21
         }
@@ -55,9 +46,11 @@ ruleTester.run('no-deprecated-functional-template', rule, {
       code: '<template functional><div /></template>',
       errors: [
         {
+          messageId: 'unexpected',
           line: 1,
           column: 11,
-          messageId: 'unexpected'
+          endLine: 1,
+          endColumn: 21
         }
       ]
     }
diff --git a/tests/lib/rules/no-deprecated-html-element-is.js b/tests/lib/rules/no-deprecated-html-element-is.js
index 9b7cfdb23..a108f224f 100644
--- a/tests/lib/rules/no-deprecated-html-element-is.js
+++ b/tests/lib/rules/no-deprecated-html-element-is.js
@@ -4,20 +4,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/no-deprecated-html-element-is')
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2019 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2019 }
 })
 
 ruleTester.run('no-deprecated-html-element-is', rule, {
@@ -52,9 +43,9 @@ ruleTester.run('no-deprecated-html-element-is', rule, {
       code: '<template><div is="foo" /></template>',
       errors: [
         {
+          messageId: 'unexpected',
           line: 1,
           column: 16,
-          messageId: 'unexpected',
           endLine: 1,
           endColumn: 24
         }
@@ -65,9 +56,11 @@ ruleTester.run('no-deprecated-html-element-is', rule, {
       code: '<template><div :is="foo" /></template>',
       errors: [
         {
+          messageId: 'unexpected',
           line: 1,
           column: 16,
-          messageId: 'unexpected'
+          endLine: 1,
+          endColumn: 25
         }
       ]
     }
diff --git a/tests/lib/rules/no-deprecated-inline-template.js b/tests/lib/rules/no-deprecated-inline-template.js
index e64511acd..4c278d5a1 100644
--- a/tests/lib/rules/no-deprecated-inline-template.js
+++ b/tests/lib/rules/no-deprecated-inline-template.js
@@ -4,20 +4,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/no-deprecated-inline-template')
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2019 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2019 }
 })
 
 ruleTester.run('no-deprecated-inline-template', rule, {
@@ -57,12 +48,28 @@ ruleTester.run('no-deprecated-inline-template', rule, {
     {
       filename: 'test.vue',
       code: '<template><my-component inline-template=""><div /></my-component></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 25,
+          endLine: 1,
+          endColumn: 40
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><my-component inline-template="foo"><div /></my-component></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 25,
+          endLine: 1,
+          endColumn: 40
+        }
+      ]
     }
   ]
 })
diff --git a/tests/lib/rules/no-deprecated-model-definition.js b/tests/lib/rules/no-deprecated-model-definition.js
new file mode 100644
index 000000000..ae4e56b3a
--- /dev/null
+++ b/tests/lib/rules/no-deprecated-model-definition.js
@@ -0,0 +1,391 @@
+/**
+ * @author Flo Edelmann
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/no-deprecated-model-definition')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('no-deprecated-model-definition', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+        export default { name: 'test' }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+        export default {
+          model: {
+            prop: 'modelValue',
+            event: 'update:modelValue'
+          }
+        }
+        </script>
+      `,
+      options: [{ allowVue3Compat: true }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+        export default defineComponent({
+          model: {
+            prop: 'model-value',
+            event: 'update:model-value'
+          }
+        })
+        </script>
+      `,
+      options: [{ allowVue3Compat: true }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+        export default defineComponent({
+          model: {
+            prop: \`model-value\`,
+            event: \`update:model-value\`
+          }
+        })
+        </script>
+      `,
+      options: [{ allowVue3Compat: true }]
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+        export default {
+          model: {
+            prop: 'foo',
+          }
+        }
+        </script>
+      `,
+      errors: [
+        {
+          message: '`model` definition is deprecated.',
+          line: 4,
+          column: 11,
+          endLine: 6,
+          endColumn: 12
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+        export default Vue.extend({
+          model: {
+            event: 'update'
+          }
+        })
+        </script>
+      `,
+      errors: [
+        {
+          message: '`model` definition is deprecated.',
+          line: 4,
+          column: 11,
+          endLine: 6,
+          endColumn: 12
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+        export default defineComponent({
+          model: {
+            prop: 'foo',
+            event: 'update'
+          }
+        })
+        </script>
+      `,
+      errors: [
+        {
+          message: '`model` definition is deprecated.',
+          line: 4,
+          column: 11,
+          endLine: 7,
+          endColumn: 12
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+        export default {
+          model: {
+            prop: 'foo',
+          }
+        }
+        </script>
+      `,
+      options: [{ allowVue3Compat: true }],
+      errors: [
+        {
+          message:
+            '`model` definition is deprecated. You may use the Vue 3-compatible `modelValue`/`update:modelValue` though.',
+          line: 4,
+          column: 11,
+          endLine: 6,
+          endColumn: 12
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+        export default Vue.extend({
+          model: {
+            event: 'update'
+          }
+        })
+        </script>
+      `,
+      options: [{ allowVue3Compat: true }],
+      errors: [
+        {
+          message:
+            '`model` definition is deprecated. You may use the Vue 3-compatible `modelValue`/`update:modelValue` though.',
+          line: 4,
+          column: 11,
+          endLine: 6,
+          endColumn: 12
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+        export default defineComponent({
+          model: {
+            prop: 'foo',
+            event: 'update'
+          }
+        })
+        </script>
+      `,
+      options: [{ allowVue3Compat: true }],
+      errors: [
+        {
+          message:
+            '`model` definition is deprecated. You may use the Vue 3-compatible `modelValue`/`update:modelValue` though.',
+          line: 4,
+          column: 11,
+          endLine: 7,
+          endColumn: 12,
+          suggestions: [
+            {
+              desc: 'Change to `modelValue`/`update:modelValue`.',
+              output: `
+        <script>
+        export default defineComponent({
+          model: {
+            prop: 'modelValue',
+            event: 'update:modelValue'
+          }
+        })
+        </script>
+      `
+            },
+            {
+              desc: 'Change to `model-value`/`update:model-value`.',
+              output: `
+        <script>
+        export default defineComponent({
+          model: {
+            prop: 'model-value',
+            event: 'update:model-value'
+          }
+        })
+        </script>
+      `
+            }
+          ]
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+        export default {
+          model: {
+            prop: "fooBar",
+            event: "update:fooBar"
+          }
+        }
+        </script>
+      `,
+      options: [{ allowVue3Compat: true }],
+      errors: [
+        {
+          message:
+            '`model` definition is deprecated. You may use the Vue 3-compatible `modelValue`/`update:modelValue` though.',
+          line: 4,
+          column: 11,
+          endLine: 7,
+          endColumn: 12,
+          suggestions: [
+            {
+              desc: 'Change to `modelValue`/`update:modelValue`.',
+              output: `
+        <script>
+        export default {
+          model: {
+            prop: "modelValue",
+            event: "update:modelValue"
+          }
+        }
+        </script>
+      `
+            },
+            {
+              desc: 'Change to `model-value`/`update:model-value`.',
+              output: `
+        <script>
+        export default {
+          model: {
+            prop: "model-value",
+            event: "update:model-value"
+          }
+        }
+        </script>
+      `
+            }
+          ]
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+        export default defineComponent({
+          model: {
+            prop: 'foo-bar',
+            event: 'update:foo-bar'
+          }
+        })
+        </script>
+      `,
+      options: [{ allowVue3Compat: true }],
+      errors: [
+        {
+          message:
+            '`model` definition is deprecated. You may use the Vue 3-compatible `modelValue`/`update:modelValue` though.',
+          line: 4,
+          column: 11,
+          endLine: 7,
+          endColumn: 12,
+          suggestions: [
+            {
+              desc: 'Change to `modelValue`/`update:modelValue`.',
+              output: `
+        <script>
+        export default defineComponent({
+          model: {
+            prop: 'modelValue',
+            event: 'update:modelValue'
+          }
+        })
+        </script>
+      `
+            },
+            {
+              desc: 'Change to `model-value`/`update:model-value`.',
+              output: `
+        <script>
+        export default defineComponent({
+          model: {
+            prop: 'model-value',
+            event: 'update:model-value'
+          }
+        })
+        </script>
+      `
+            }
+          ]
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+        export default defineComponent({
+          model: {
+            prop: \`foo-bar\`,
+            event: \`update:foo-bar\`
+          }
+        })
+        </script>
+      `,
+      options: [{ allowVue3Compat: true }],
+      errors: [
+        {
+          message:
+            '`model` definition is deprecated. You may use the Vue 3-compatible `modelValue`/`update:modelValue` though.',
+          line: 4,
+          column: 11,
+          endLine: 7,
+          endColumn: 12,
+          suggestions: [
+            {
+              desc: 'Change to `modelValue`/`update:modelValue`.',
+              output: `
+        <script>
+        export default defineComponent({
+          model: {
+            prop: \`modelValue\`,
+            event: \`update:modelValue\`
+          }
+        })
+        </script>
+      `
+            },
+            {
+              desc: 'Change to `model-value`/`update:model-value`.',
+              output: `
+        <script>
+        export default defineComponent({
+          model: {
+            prop: \`model-value\`,
+            event: \`update:model-value\`
+          }
+        })
+        </script>
+      `
+            }
+          ]
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/no-deprecated-props-default-this.js b/tests/lib/rules/no-deprecated-props-default-this.js
index 0d5f8ff24..ed0b2005d 100644
--- a/tests/lib/rules/no-deprecated-props-default-this.js
+++ b/tests/lib/rules/no-deprecated-props-default-this.js
@@ -4,20 +4,15 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/no-deprecated-props-default-this')
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2020, sourceType: 'module' }
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
 })
 
 ruleTester.run('no-deprecated-props-default-this', rule, {
@@ -204,8 +199,22 @@ ruleTester.run('no-deprecated-props-default-this', rule, {
         </script>
       `,
       errors: [
-        'Props default value factory functions no longer have access to `this`.',
-        'Props default value factory functions no longer have access to `this`.'
+        {
+          message:
+            'Props default value factory functions no longer have access to `this`.',
+          line: 9,
+          column: 24,
+          endLine: 9,
+          endColumn: 28
+        },
+        {
+          message:
+            'Props default value factory functions no longer have access to `this`.',
+          line: 14,
+          column: 24,
+          endLine: 14,
+          endColumn: 28
+        }
       ]
     }
   ]
diff --git a/tests/lib/rules/no-deprecated-router-link-tag-prop.js b/tests/lib/rules/no-deprecated-router-link-tag-prop.js
index 9154cf31c..c95345486 100644
--- a/tests/lib/rules/no-deprecated-router-link-tag-prop.js
+++ b/tests/lib/rules/no-deprecated-router-link-tag-prop.js
@@ -4,12 +4,12 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-deprecated-router-link-tag-prop')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
     ecmaVersion: 2020,
     sourceType: 'module'
   }
@@ -103,7 +103,9 @@ tester.run('no-deprecated-router-link-tag-prop', rule, {
           message:
             "'tag' property on 'RouterLink' component is deprecated. Use scoped slots instead.",
           line: 3,
-          column: 21
+          column: 21,
+          endLine: 3,
+          endColumn: 24
         }
       ]
     },
@@ -119,7 +121,9 @@ tester.run('no-deprecated-router-link-tag-prop', rule, {
           message:
             "'tag' property on 'router-link' component is deprecated. Use scoped slots instead.",
           line: 3,
-          column: 22
+          column: 22,
+          endLine: 3,
+          endColumn: 25
         }
       ]
     },
@@ -136,7 +140,9 @@ tester.run('no-deprecated-router-link-tag-prop', rule, {
           message:
             "'tag' property on 'RouterLink' component is deprecated. Use scoped slots instead.",
           line: 3,
-          column: 21
+          column: 21,
+          endLine: 3,
+          endColumn: 24
         }
       ]
     },
@@ -153,7 +159,9 @@ tester.run('no-deprecated-router-link-tag-prop', rule, {
           message:
             "'tag' property on 'RouterLink' component is deprecated. Use scoped slots instead.",
           line: 3,
-          column: 21
+          column: 21,
+          endLine: 3,
+          endColumn: 24
         }
       ]
     },
@@ -170,7 +178,9 @@ tester.run('no-deprecated-router-link-tag-prop', rule, {
           message:
             "'tag' property on 'router-link' component is deprecated. Use scoped slots instead.",
           line: 3,
-          column: 22
+          column: 22,
+          endLine: 3,
+          endColumn: 25
         }
       ]
     },
@@ -186,7 +196,9 @@ tester.run('no-deprecated-router-link-tag-prop', rule, {
           message:
             "'tag' property on 'RouterLink' component is deprecated. Use scoped slots instead.",
           line: 3,
-          column: 22
+          column: 22,
+          endLine: 3,
+          endColumn: 25
         }
       ]
     },
@@ -202,7 +214,9 @@ tester.run('no-deprecated-router-link-tag-prop', rule, {
           message:
             "'tag' property on 'router-link' component is deprecated. Use scoped slots instead.",
           line: 3,
-          column: 23
+          column: 23,
+          endLine: 3,
+          endColumn: 26
         }
       ]
     },
@@ -219,7 +233,9 @@ tester.run('no-deprecated-router-link-tag-prop', rule, {
           message:
             "'tag' property on 'RouterLink' component is deprecated. Use scoped slots instead.",
           line: 3,
-          column: 22
+          column: 22,
+          endLine: 3,
+          endColumn: 25
         }
       ]
     },
@@ -236,7 +252,9 @@ tester.run('no-deprecated-router-link-tag-prop', rule, {
           message:
             "'tag' property on 'router-link' component is deprecated. Use scoped slots instead.",
           line: 3,
-          column: 23
+          column: 23,
+          endLine: 3,
+          endColumn: 26
         }
       ]
     },
@@ -253,7 +271,9 @@ tester.run('no-deprecated-router-link-tag-prop', rule, {
           message:
             "'tag' property on 'NuxtLink' component is deprecated. Use scoped slots instead.",
           line: 3,
-          column: 19
+          column: 19,
+          endLine: 3,
+          endColumn: 22
         }
       ]
     },
@@ -270,7 +290,9 @@ tester.run('no-deprecated-router-link-tag-prop', rule, {
           message:
             "'tag' property on 'nuxt-link' component is deprecated. Use scoped slots instead.",
           line: 3,
-          column: 20
+          column: 20,
+          endLine: 3,
+          endColumn: 23
         }
       ]
     },
@@ -287,7 +309,9 @@ tester.run('no-deprecated-router-link-tag-prop', rule, {
           message:
             "'tag' property on 'NuxtLink' component is deprecated. Use scoped slots instead.",
           line: 3,
-          column: 20
+          column: 20,
+          endLine: 3,
+          endColumn: 23
         }
       ]
     },
@@ -304,7 +328,9 @@ tester.run('no-deprecated-router-link-tag-prop', rule, {
           message:
             "'tag' property on 'nuxt-link' component is deprecated. Use scoped slots instead.",
           line: 3,
-          column: 21
+          column: 21,
+          endLine: 3,
+          endColumn: 24
         }
       ]
     }
diff --git a/tests/lib/rules/no-deprecated-scope-attribute.js b/tests/lib/rules/no-deprecated-scope-attribute.js
index 9cc8b92d4..845447cf6 100644
--- a/tests/lib/rules/no-deprecated-scope-attribute.js
+++ b/tests/lib/rules/no-deprecated-scope-attribute.js
@@ -1,13 +1,10 @@
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-deprecated-scope-attribute')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
-    ecmaVersion: 2015
-  }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('no-deprecated-scope-attribute', rule, {
@@ -69,7 +66,10 @@ tester.run('no-deprecated-scope-attribute', rule, {
       errors: [
         {
           message: '`scope` attributes are deprecated.',
-          line: 4
+          line: 4,
+          column: 21,
+          endLine: 4,
+          endColumn: 26
         }
       ]
     },
@@ -93,7 +93,10 @@ tester.run('no-deprecated-scope-attribute', rule, {
       errors: [
         {
           message: '`scope` attributes are deprecated.',
-          line: 4
+          line: 4,
+          column: 33,
+          endLine: 4,
+          endColumn: 38
         }
       ]
     }
diff --git a/tests/lib/rules/no-deprecated-slot-attribute.js b/tests/lib/rules/no-deprecated-slot-attribute.js
index 0db5e5898..61f8f25d7 100644
--- a/tests/lib/rules/no-deprecated-slot-attribute.js
+++ b/tests/lib/rules/no-deprecated-slot-attribute.js
@@ -1,13 +1,10 @@
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-deprecated-slot-attribute.js')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
-    ecmaVersion: 2015
-  }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('no-deprecated-slot-attribute', rule, {
@@ -46,7 +43,55 @@ tester.run('no-deprecated-slot-attribute', rule, {
       <LinkList>
         <a />
       </LinkList>
-    </template>`
+    </template>`,
+    {
+      code: `<template>
+      <LinkList>
+        <one slot="one" />
+        <two slot="two" />
+        <my-component slot="my-component-slot" />
+        <myComponent slot="myComponent-slot" />
+        <MyComponent slot="MyComponent-slot" />
+      </LinkList>
+    </template>`,
+      options: [{ ignore: ['one', 'two', 'my-component'] }]
+    },
+    {
+      code: `<template>
+      <LinkList>
+        <one slot="one" />
+        <two slot="two" />
+        <my-component slot="my-component-slot" />
+        <myComponent slot="myComponent-slot" />
+        <MyComponent slot="MyComponent-slot" />
+      </LinkList>
+    </template>`,
+      options: [{ ignore: ['/one/', '/^Two$/i', '/^my-.*/i'] }]
+    },
+    {
+      code: `<template>
+      <LinkList>
+        <one slot="one" />
+        <two slot="two" />
+        <my-component slot="my-component-slot" />
+        <myComponent slot="myComponent-slot" />
+        <MyComponent slot="MyComponent-slot" />
+      </LinkList>
+    </template>`,
+      options: [{ ignoreParents: ['LinkList'] }]
+    },
+    {
+      code: `<template>
+      <LinkList>
+        <one slot="one" />
+        <two slot="two" />
+        <my-component slot="my-component-slot" />
+        <myComponent slot="myComponent-slot" />
+        <MyComponent slot="MyComponent-slot" />
+      </LinkList>
+    </template>`,
+      options: [{ ignoreParents: ['/^Link/'] }]
+    }
   ],
   invalid: [
     {
@@ -65,7 +110,10 @@ tester.run('no-deprecated-slot-attribute', rule, {
       errors: [
         {
           message: '`slot` attributes are deprecated.',
-          line: 4
+          line: 4,
+          column: 21,
+          endLine: 4,
+          endColumn: 25
         }
       ]
     },
@@ -85,7 +133,10 @@ tester.run('no-deprecated-slot-attribute', rule, {
       errors: [
         {
           message: '`slot` attributes are deprecated.',
-          line: 4
+          line: 4,
+          column: 21,
+          endLine: 4,
+          endColumn: 25
         }
       ]
     },
@@ -105,7 +156,10 @@ tester.run('no-deprecated-slot-attribute', rule, {
       errors: [
         {
           message: '`slot` attributes are deprecated.',
-          line: 4
+          line: 4,
+          column: 21,
+          endLine: 4,
+          endColumn: 25
         }
       ]
     },
@@ -125,7 +179,10 @@ tester.run('no-deprecated-slot-attribute', rule, {
       errors: [
         {
           message: '`slot` attributes are deprecated.',
-          line: 4
+          line: 4,
+          column: 21,
+          endLine: 4,
+          endColumn: 25
         }
       ]
     },
@@ -145,7 +202,10 @@ tester.run('no-deprecated-slot-attribute', rule, {
       errors: [
         {
           message: '`slot` attributes are deprecated.',
-          line: 4
+          line: 4,
+          column: 21,
+          endLine: 4,
+          endColumn: 25
         }
       ]
     },
@@ -164,23 +224,38 @@ tester.run('no-deprecated-slot-attribute', rule, {
       errors: [
         {
           message: '`slot` attributes are deprecated.',
-          line: 4
+          line: 4,
+          column: 21,
+          endLine: 4,
+          endColumn: 25
         },
         {
           message: '`slot` attributes are deprecated.',
-          line: 5
+          line: 5,
+          column: 21,
+          endLine: 5,
+          endColumn: 25
         },
         {
           message: '`slot` attributes are deprecated.',
-          line: 6
+          line: 6,
+          column: 21,
+          endLine: 6,
+          endColumn: 25
         },
         {
           message: '`slot` attributes are deprecated.',
-          line: 7
+          line: 7,
+          column: 21,
+          endLine: 7,
+          endColumn: 25
         },
         {
           message: '`slot` attributes are deprecated.',
-          line: 8
+          line: 8,
+          column: 21,
+          endLine: 8,
+          endColumn: 25
         }
       ]
     },
@@ -200,7 +275,10 @@ tester.run('no-deprecated-slot-attribute', rule, {
       errors: [
         {
           message: '`slot` attributes are deprecated.',
-          line: 4
+          line: 4,
+          column: 21,
+          endLine: 4,
+          endColumn: 32
         }
       ]
     },
@@ -215,7 +293,10 @@ tester.run('no-deprecated-slot-attribute', rule, {
       errors: [
         {
           message: '`slot` attributes are deprecated.',
-          line: 4
+          line: 4,
+          column: 21,
+          endLine: 4,
+          endColumn: 26
         }
       ]
     },
@@ -235,7 +316,10 @@ tester.run('no-deprecated-slot-attribute', rule, {
       errors: [
         {
           message: '`slot` attributes are deprecated.',
-          line: 4
+          line: 4,
+          column: 21,
+          endLine: 4,
+          endColumn: 26
         }
       ]
     },
@@ -250,7 +334,10 @@ tester.run('no-deprecated-slot-attribute', rule, {
       errors: [
         {
           message: '`slot` attributes are deprecated.',
-          line: 4
+          line: 4,
+          column: 21,
+          endLine: 4,
+          endColumn: 26
         }
       ]
     },
@@ -265,7 +352,10 @@ tester.run('no-deprecated-slot-attribute', rule, {
       errors: [
         {
           message: '`slot` attributes are deprecated.',
-          line: 4
+          line: 4,
+          column: 21,
+          endLine: 4,
+          endColumn: 26
         }
       ]
     },
@@ -280,7 +370,10 @@ tester.run('no-deprecated-slot-attribute', rule, {
       errors: [
         {
           message: '`slot` attributes are deprecated.',
-          line: 4
+          line: 4,
+          column: 21,
+          endLine: 4,
+          endColumn: 26
         }
       ]
     },
@@ -295,7 +388,10 @@ tester.run('no-deprecated-slot-attribute', rule, {
       errors: [
         {
           message: '`slot` attributes are deprecated.',
-          line: 4
+          line: 4,
+          column: 21,
+          endLine: 4,
+          endColumn: 26
         }
       ]
     },
@@ -309,13 +405,16 @@ tester.run('no-deprecated-slot-attribute', rule, {
       output: `
       <template>
         <LinkList>
-          <template v-slot><a /></template>
+          <template v-slot:[slot]><a /></template>
         </LinkList>
       </template>`,
       errors: [
         {
           message: '`slot` attributes are deprecated.',
-          line: 4
+          line: 4,
+          column: 21,
+          endLine: 4,
+          endColumn: 26
         }
       ]
     },
@@ -326,11 +425,19 @@ tester.run('no-deprecated-slot-attribute', rule, {
           <a slot="name" />
         </LinkList>
       </template>`,
-      output: null,
+      output: `
+      <template>
+        <LinkList>
+          <template v-slot:name>\n<a  />\n</template>
+        </LinkList>
+      </template>`,
       errors: [
         {
           message: '`slot` attributes are deprecated.',
-          line: 4
+          line: 4,
+          column: 14,
+          endLine: 4,
+          endColumn: 18
         }
       ]
     },
@@ -341,11 +448,19 @@ tester.run('no-deprecated-slot-attribute', rule, {
           <a :slot="name" />
         </LinkList>
       </template>`,
-      output: null,
+      output: `
+      <template>
+        <LinkList>
+          <template v-slot:[name]>\n<a  />\n</template>
+        </LinkList>
+      </template>`,
       errors: [
         {
           message: '`slot` attributes are deprecated.',
-          line: 4
+          line: 4,
+          column: 14,
+          endLine: 4,
+          endColumn: 19
         }
       ]
     },
@@ -366,7 +481,15 @@ tester.run('no-deprecated-slot-attribute', rule, {
           </template>
         </MyComponent>
       </template>`,
-      errors: ['`slot` attributes are deprecated.']
+      errors: [
+        {
+          message: '`slot` attributes are deprecated.',
+          line: 4,
+          column: 21,
+          endLine: 4,
+          endColumn: 25
+        }
+      ]
     },
     {
       code: `
@@ -385,7 +508,15 @@ tester.run('no-deprecated-slot-attribute', rule, {
           </template>
         </MyComponent>
       </template>`,
-      errors: ['`slot` attributes are deprecated.']
+      errors: [
+        {
+          message: '`slot` attributes are deprecated.',
+          line: 4,
+          column: 21,
+          endLine: 4,
+          endColumn: 25
+        }
+      ]
     },
     {
       code: `
@@ -404,7 +535,15 @@ tester.run('no-deprecated-slot-attribute', rule, {
           </template>
         </MyComponent>
       </template>`,
-      errors: ['`slot` attributes are deprecated.']
+      errors: [
+        {
+          message: '`slot` attributes are deprecated.',
+          line: 4,
+          column: 21,
+          endLine: 4,
+          endColumn: 25
+        }
+      ]
     },
     {
       // https://github.com/vuejs/eslint-plugin-vue/issues/1499
@@ -439,11 +578,17 @@ tester.run('no-deprecated-slot-attribute', rule, {
       errors: [
         {
           message: '`slot` attributes are deprecated.',
-          line: 4
+          line: 4,
+          column: 21,
+          endLine: 4,
+          endColumn: 25
         },
         {
           message: '`slot` attributes are deprecated.',
-          line: 9
+          line: 9,
+          column: 23,
+          endLine: 9,
+          endColumn: 27
         }
       ]
     },
@@ -471,8 +616,20 @@ tester.run('no-deprecated-slot-attribute', rule, {
         </my-component>
       </template>`,
       errors: [
-        '`slot` attributes are deprecated.',
-        '`slot` attributes are deprecated.'
+        {
+          message: '`slot` attributes are deprecated.',
+          line: 4,
+          column: 37,
+          endLine: 4,
+          endColumn: 41
+        },
+        {
+          message: '`slot` attributes are deprecated.',
+          line: 7,
+          column: 37,
+          endLine: 7,
+          endColumn: 42
+        }
       ]
     },
     {
@@ -487,20 +644,22 @@ tester.run('no-deprecated-slot-attribute', rule, {
           </template>
         </my-component>
       </template>`,
-      output: `
-      <template>
-        <my-component>
-          <template slot="one">
-            A
-          </template>
-          <template slot="one">
-            B
-          </template>
-        </my-component>
-      </template>`,
+      output: null,
       errors: [
-        '`slot` attributes are deprecated.',
-        '`slot` attributes are deprecated.'
+        {
+          message: '`slot` attributes are deprecated.',
+          line: 4,
+          column: 21,
+          endLine: 4,
+          endColumn: 25
+        },
+        {
+          message: '`slot` attributes are deprecated.',
+          line: 7,
+          column: 21,
+          endLine: 7,
+          endColumn: 25
+        }
       ]
     },
     {
@@ -527,8 +686,20 @@ tester.run('no-deprecated-slot-attribute', rule, {
         </my-component>
       </template>`,
       errors: [
-        '`slot` attributes are deprecated.',
-        '`slot` attributes are deprecated.'
+        {
+          message: '`slot` attributes are deprecated.',
+          line: 4,
+          column: 30,
+          endLine: 4,
+          endColumn: 34
+        },
+        {
+          message: '`slot` attributes are deprecated.',
+          line: 7,
+          column: 28,
+          endLine: 7,
+          endColumn: 32
+        }
       ]
     },
     {
@@ -545,8 +716,20 @@ tester.run('no-deprecated-slot-attribute', rule, {
       </template>`,
       output: null,
       errors: [
-        '`slot` attributes are deprecated.',
-        '`slot` attributes are deprecated.'
+        {
+          message: '`slot` attributes are deprecated.',
+          line: 4,
+          column: 37,
+          endLine: 4,
+          endColumn: 42
+        },
+        {
+          message: '`slot` attributes are deprecated.',
+          line: 7,
+          column: 37,
+          endLine: 7,
+          endColumn: 42
+        }
       ]
     },
     {
@@ -573,8 +756,20 @@ tester.run('no-deprecated-slot-attribute', rule, {
         </my-component>
       </template>`,
       errors: [
-        '`slot` attributes are deprecated.',
-        '`slot` attributes are deprecated.'
+        {
+          message: '`slot` attributes are deprecated.',
+          line: 4,
+          column: 37,
+          endLine: 4,
+          endColumn: 42
+        },
+        {
+          message: '`slot` attributes are deprecated.',
+          line: 7,
+          column: 37,
+          endLine: 7,
+          endColumn: 42
+        }
       ]
     },
     {
@@ -601,8 +796,272 @@ tester.run('no-deprecated-slot-attribute', rule, {
         </my-component>
       </template>`,
       errors: [
-        '`slot` attributes are deprecated.',
-        '`slot` attributes are deprecated.'
+        {
+          message: '`slot` attributes are deprecated.',
+          line: 4,
+          column: 41,
+          endLine: 4,
+          endColumn: 46
+        },
+        {
+          message: '`slot` attributes are deprecated.',
+          line: 7,
+          column: 37,
+          endLine: 7,
+          endColumn: 42
+        }
+      ]
+    },
+    {
+      code: `
+      <template>
+        <my-component>
+          <one slot="one">
+            A
+          </one>
+          <two slot="two">
+            B
+          </two>
+        </my-component>
+      </template>`,
+      output: `
+      <template>
+        <my-component>
+          <one slot="one">
+            A
+          </one>
+          <template v-slot:two>\n<two >
+            B
+          </two>\n</template>
+        </my-component>
+      </template>`,
+      options: [
+        {
+          ignore: ['one']
+        }
+      ],
+      errors: [
+        {
+          message: '`slot` attributes are deprecated.',
+          line: 7,
+          column: 16,
+          endLine: 7,
+          endColumn: 20
+        }
+      ]
+    },
+    {
+      code: `
+      <template>
+        <my-component>
+          <one slot="one">
+            A
+          </one>
+          <two slot="two">
+            B
+          </two>
+        </my-component>
+      </template>`,
+      output: `
+      <template>
+        <my-component>
+          <one slot="one">
+            A
+          </one>
+          <template v-slot:two>\n<two >
+            B
+          </two>\n</template>
+        </my-component>
+      </template>`,
+      options: [
+        {
+          ignore: ['/one/']
+        }
+      ],
+      errors: [
+        {
+          message: '`slot` attributes are deprecated.',
+          line: 7,
+          endLine: 7,
+          column: 16,
+          endColumn: 20
+        }
+      ]
+    },
+    {
+      code: `
+      <template>
+        <my-component>
+          <one slot="one">
+            A
+          </one>
+          <two slot="two">
+            B
+          </two>
+        </my-component>
+      </template>`,
+      output: `
+      <template>
+        <my-component>
+          <one slot="one">
+            A
+          </one>
+          <template v-slot:two>\n<two >
+            B
+          </two>\n</template>
+        </my-component>
+      </template>`,
+      options: [
+        {
+          ignore: ['/^one$/']
+        }
+      ],
+      errors: [
+        {
+          message: '`slot` attributes are deprecated.',
+          line: 7,
+          endLine: 7,
+          column: 16,
+          endColumn: 20
+        }
+      ]
+    },
+    {
+      code: `
+      <template>
+        <my-component>
+          <one slot="one">
+            A
+          </one>
+        </my-component>
+        <my-component2>
+          <two slot="two">
+            B
+          </two>
+        </my-component2>
+      </template>`,
+      output: `
+      <template>
+        <my-component>
+          <one slot="one">
+            A
+          </one>
+        </my-component>
+        <my-component2>
+          <template v-slot:two>\n<two >
+            B
+          </two>\n</template>
+        </my-component2>
+      </template>`,
+      options: [
+        {
+          ignoreParents: ['my-component']
+        }
+      ],
+      errors: [
+        {
+          message: '`slot` attributes are deprecated.',
+          line: 9,
+          column: 16,
+          endLine: 9,
+          endColumn: 20
+        }
+      ]
+    },
+    {
+      code: `
+      <template>
+        <my-component>
+          <one slot="one">
+            A
+          </one>
+        </my-component>
+        <my-component2>
+          <two slot="two">
+            B
+          </two>
+        </my-component2>
+      </template>`,
+      output: `
+      <template>
+        <my-component>
+          <one slot="one">
+            A
+          </one>
+        </my-component>
+        <my-component2>
+          <template v-slot:two>\n<two >
+            B
+          </two>\n</template>
+        </my-component2>
+      </template>`,
+      options: [
+        {
+          ignoreParents: ['/component$/']
+        }
+      ],
+      errors: [
+        {
+          message: '`slot` attributes are deprecated.',
+          line: 9,
+          column: 16,
+          endLine: 9,
+          endColumn: 20
+        }
+      ]
+    },
+    {
+      code: `
+      <template>
+        <my-component>
+          <slot
+            v-for="slot in Object.keys($slots)"
+            :slot="slot"
+            :name="slot"
+          ></slot>
+        </my-component>
+      </template>`,
+      output: `
+      <template>
+        <my-component>
+          <template v-for="slot in Object.keys($slots)" v-slot:[slot]>
+<slot
+            
+            
+            :name="slot"
+          ></slot>
+</template>
+        </my-component>
+      </template>`,
+      errors: [
+        {
+          message: '`slot` attributes are deprecated.',
+          line: 6,
+          column: 13,
+          endLine: 6,
+          endColumn: 18
+        }
+      ]
+    },
+    {
+      code: `
+      <template>
+        <component :is="toggle ? 'my-component' : 'div'">
+          <div slot="named">
+            Passing in a named slot to a div worked with old syntax
+            But not with new syntax
+          </div>
+        </component>
+      </template>`,
+      output: null,
+      errors: [
+        {
+          message: '`slot` attributes are deprecated.',
+          line: 4,
+          column: 16,
+          endLine: 4,
+          endColumn: 20
+        }
       ]
     }
   ]
diff --git a/tests/lib/rules/no-deprecated-slot-scope-attribute.js b/tests/lib/rules/no-deprecated-slot-scope-attribute.js
index 728aaccd3..7b9eb870b 100644
--- a/tests/lib/rules/no-deprecated-slot-scope-attribute.js
+++ b/tests/lib/rules/no-deprecated-slot-scope-attribute.js
@@ -1,13 +1,10 @@
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-deprecated-slot-scope-attribute')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
-    ecmaVersion: 2015
-  }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('no-deprecated-slot-scope-attribute', rule, {
@@ -69,7 +66,10 @@ tester.run('no-deprecated-slot-scope-attribute', rule, {
       errors: [
         {
           message: '`slot-scope` are deprecated.',
-          line: 4
+          line: 4,
+          column: 21,
+          endLine: 4,
+          endColumn: 31
         }
       ]
     },
@@ -89,11 +89,13 @@ tester.run('no-deprecated-slot-scope-attribute', rule, {
       errors: [
         {
           message: '`slot-scope` are deprecated.',
-          line: 4
+          line: 4,
+          column: 21,
+          endLine: 4,
+          endColumn: 31
         }
       ]
     },
-    // cannot fix
     {
       code: `
       <template>
@@ -101,11 +103,19 @@ tester.run('no-deprecated-slot-scope-attribute', rule, {
           <a slot-scope="{a}" />
         </LinkList>
       </template>`,
-      output: null,
+      output: `
+      <template>
+        <LinkList>
+          <template v-slot="{a}">\n<a />\n</template>
+        </LinkList>
+      </template>`,
       errors: [
         {
           message: '`slot-scope` are deprecated.',
-          line: 4
+          line: 4,
+          column: 14,
+          endLine: 4,
+          endColumn: 24
         }
       ]
     },
@@ -120,7 +130,10 @@ tester.run('no-deprecated-slot-scope-attribute', rule, {
       errors: [
         {
           message: '`slot-scope` are deprecated.',
-          line: 4
+          line: 4,
+          column: 21,
+          endLine: 4,
+          endColumn: 31
         }
       ]
     },
@@ -135,7 +148,10 @@ tester.run('no-deprecated-slot-scope-attribute', rule, {
       errors: [
         {
           message: '`slot-scope` are deprecated.',
-          line: 4
+          line: 4,
+          column: 21,
+          endLine: 4,
+          endColumn: 31
         }
       ]
     },
@@ -149,7 +165,15 @@ tester.run('no-deprecated-slot-scope-attribute', rule, {
         </my-component>
       </template>`,
       output: null,
-      errors: ['`slot-scope` are deprecated.']
+      errors: [
+        {
+          message: '`slot-scope` are deprecated.',
+          line: 4,
+          column: 37,
+          endLine: 4,
+          endColumn: 47
+        }
+      ]
     },
     {
       code: `
@@ -162,7 +186,15 @@ tester.run('no-deprecated-slot-scope-attribute', rule, {
         </my-component>
       </template>`,
       output: null,
-      errors: ['`slot-scope` are deprecated.']
+      errors: [
+        {
+          message: '`slot-scope` are deprecated.',
+          line: 4,
+          column: 21,
+          endLine: 4,
+          endColumn: 31
+        }
+      ]
     }
   ]
 })
diff --git a/tests/lib/rules/no-deprecated-v-bind-sync.js b/tests/lib/rules/no-deprecated-v-bind-sync.js
index 6f9d6860d..355d1a86c 100644
--- a/tests/lib/rules/no-deprecated-v-bind-sync.js
+++ b/tests/lib/rules/no-deprecated-v-bind-sync.js
@@ -4,20 +4,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/no-deprecated-v-bind-sync')
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 ruleTester.run('no-deprecated-v-bind-sync', rule, {
@@ -46,7 +37,14 @@ ruleTester.run('no-deprecated-v-bind-sync', rule, {
       code: "<template><MyComponent v-bind:foo.sync='bar'/></template>",
       output: "<template><MyComponent v-model:foo='bar'/></template>",
       errors: [
-        "'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead."
+        {
+          message:
+            "'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead.",
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 45
+        }
       ]
     },
     {
@@ -54,7 +52,14 @@ ruleTester.run('no-deprecated-v-bind-sync', rule, {
       code: "<template><MyComponent :foo.sync='bar'/></template>",
       output: "<template><MyComponent v-model:foo='bar'/></template>",
       errors: [
-        "'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead."
+        {
+          message:
+            "'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead.",
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 39
+        }
       ]
     },
     {
@@ -62,7 +67,14 @@ ruleTester.run('no-deprecated-v-bind-sync', rule, {
       code: "<template><MyComponent v-bind:[dynamicArg].sync='bar'/></template>",
       output: "<template><MyComponent v-model:[dynamicArg]='bar'/></template>",
       errors: [
-        "'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead."
+        {
+          message:
+            "'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead.",
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 54
+        }
       ]
     },
     {
@@ -70,32 +82,59 @@ ruleTester.run('no-deprecated-v-bind-sync', rule, {
       code: "<template><MyComponent :[dynamicArg].sync='bar'/></template>",
       output: "<template><MyComponent v-model:[dynamicArg]='bar'/></template>",
       errors: [
-        "'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead."
+        {
+          message:
+            "'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead.",
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 48
+        }
       ]
     },
     {
       filename: 'test.vue',
       code: "<template><MyComponent v-bind.sync='bar'/></template>",
-      output: "<template><MyComponent v-bind.sync='bar'/></template>",
+      output: null,
       errors: [
-        "'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead."
+        {
+          message:
+            "'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead.",
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 41
+        }
       ]
     },
     {
       filename: 'test.vue',
       code: '<template><MyComponent :foo.sync.unknown="foo" /></template>',
-      output: '<template><MyComponent :foo.sync.unknown="foo" /></template>',
+      output: null,
       errors: [
-        "'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead."
+        {
+          message:
+            "'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead.",
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 47
+        }
       ]
     },
     {
       filename: 'test.vue',
       code: '<template><MyComponent :[dynamicArg].sync.unknown="foo" /></template>',
-      output:
-        '<template><MyComponent :[dynamicArg].sync.unknown="foo" /></template>',
+      output: null,
       errors: [
-        "'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead."
+        {
+          message:
+            "'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead.",
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 56
+        }
       ]
     },
     {
@@ -104,7 +143,14 @@ ruleTester.run('no-deprecated-v-bind-sync', rule, {
       output:
         '<template><div><div v-for="x in list"><MyComponent v-model:foo="x.foo" /></div></div></template>',
       errors: [
-        "'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead."
+        {
+          message:
+            "'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead.",
+          line: 1,
+          column: 52,
+          endLine: 1,
+          endColumn: 69
+        }
       ]
     },
     {
@@ -113,7 +159,14 @@ ruleTester.run('no-deprecated-v-bind-sync', rule, {
       output:
         '<template><div><div v-for="x in list"><MyComponent v-model:foo="foo[x]" /></div></div></template>',
       errors: [
-        "'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead."
+        {
+          message:
+            "'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead.",
+          line: 1,
+          column: 52,
+          endLine: 1,
+          endColumn: 70
+        }
       ]
     },
     {
@@ -122,7 +175,14 @@ ruleTester.run('no-deprecated-v-bind-sync', rule, {
       output:
         '<template><div><div v-for="x in list"><MyComponent v-model:foo="foo[x - 1]" /></div></div></template>',
       errors: [
-        "'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead."
+        {
+          message:
+            "'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead.",
+          line: 1,
+          column: 52,
+          endLine: 1,
+          endColumn: 74
+        }
       ]
     },
     {
@@ -131,7 +191,14 @@ ruleTester.run('no-deprecated-v-bind-sync', rule, {
       output:
         '<template><div><div v-for="x in list"><MyComponent v-model:foo="foo[`${x}`]" /></div></div></template>',
       errors: [
-        "'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead."
+        {
+          message:
+            "'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead.",
+          line: 1,
+          column: 52,
+          endLine: 1,
+          endColumn: 75
+        }
       ]
     },
     {
@@ -140,7 +207,14 @@ ruleTester.run('no-deprecated-v-bind-sync', rule, {
       output:
         '<template><div><div v-for="x in list"><MyComponent v-model:foo="foo[`prefix_${x}`]" /></div></div></template>',
       errors: [
-        "'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead."
+        {
+          message:
+            "'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead.",
+          line: 1,
+          column: 52,
+          endLine: 1,
+          endColumn: 82
+        }
       ]
     },
     {
@@ -149,7 +223,14 @@ ruleTester.run('no-deprecated-v-bind-sync', rule, {
       output:
         '<template><div><div v-for="x in list"><MyComponent v-model:foo="foo[x ? x : \'_\']" /></div></div></template>',
       errors: [
-        "'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead."
+        {
+          message:
+            "'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead.",
+          line: 1,
+          column: 52,
+          endLine: 1,
+          endColumn: 80
+        }
       ]
     },
     {
@@ -158,7 +239,14 @@ ruleTester.run('no-deprecated-v-bind-sync', rule, {
       output:
         '<template><div><div v-for="x in list"><MyComponent v-model:foo="foo[x || \'_\']" /></div></div></template>',
       errors: [
-        "'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead."
+        {
+          message:
+            "'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead.",
+          line: 1,
+          column: 52,
+          endLine: 1,
+          endColumn: 77
+        }
       ]
     },
     {
@@ -167,7 +255,14 @@ ruleTester.run('no-deprecated-v-bind-sync', rule, {
       output:
         '<template><div><div v-for="x in list"><MyComponent v-model:foo="foo[x()]" /></div></div></template>',
       errors: [
-        "'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead."
+        {
+          message:
+            "'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead.",
+          line: 1,
+          column: 52,
+          endLine: 1,
+          endColumn: 72
+        }
       ]
     },
     {
@@ -176,7 +271,14 @@ ruleTester.run('no-deprecated-v-bind-sync', rule, {
       output:
         '<template><div><div v-for="x in list"><MyComponent v-model:foo="foo[/r/.match(x) ? 0 : 1]" /></div></div></template>',
       errors: [
-        "'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead."
+        {
+          message:
+            "'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead.",
+          line: 1,
+          column: 52,
+          endLine: 1,
+          endColumn: 89
+        }
       ]
     },
     {
@@ -185,7 +287,14 @@ ruleTester.run('no-deprecated-v-bind-sync', rule, {
       output:
         '<template><div><div v-for="x in list"><MyComponent v-model:foo="foo[typeof x]" /></div></div></template>',
       errors: [
-        "'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead."
+        {
+          message:
+            "'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead.",
+          line: 1,
+          column: 52,
+          endLine: 1,
+          endColumn: 77
+        }
       ]
     },
     {
@@ -194,7 +303,14 @@ ruleTester.run('no-deprecated-v-bind-sync', rule, {
       output:
         '<template><div><div v-for="x in list"><MyComponent v-model:foo="foo[tag`${x}`]" /></div></div></template>',
       errors: [
-        "'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead."
+        {
+          message:
+            "'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead.",
+          line: 1,
+          column: 52,
+          endLine: 1,
+          endColumn: 78
+        }
       ]
     }
   ]
diff --git a/tests/lib/rules/no-deprecated-v-is.js b/tests/lib/rules/no-deprecated-v-is.js
index cdc47b9aa..3935c9b39 100644
--- a/tests/lib/rules/no-deprecated-v-is.js
+++ b/tests/lib/rules/no-deprecated-v-is.js
@@ -1,13 +1,10 @@
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-deprecated-v-is')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
-    ecmaVersion: 2015
-  }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('no-deprecated-v-is', rule, {
@@ -28,7 +25,10 @@ tester.run('no-deprecated-v-is', rule, {
       errors: [
         {
           message: '`v-is` directive is deprecated.',
-          line: 3
+          line: 3,
+          column: 14,
+          endLine: 3,
+          endColumn: 18
         }
       ]
     }
diff --git a/tests/lib/rules/no-deprecated-v-on-native-modifier.js b/tests/lib/rules/no-deprecated-v-on-native-modifier.js
index d201cd478..b9863d9ed 100644
--- a/tests/lib/rules/no-deprecated-v-on-native-modifier.js
+++ b/tests/lib/rules/no-deprecated-v-on-native-modifier.js
@@ -4,20 +4,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/no-deprecated-v-on-native-modifier')
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 ruleTester.run('no-deprecated-v-on-native-modifier', rule, {
diff --git a/tests/lib/rules/no-deprecated-v-on-number-modifiers.js b/tests/lib/rules/no-deprecated-v-on-number-modifiers.js
index dc7ae6500..f039d1162 100644
--- a/tests/lib/rules/no-deprecated-v-on-number-modifiers.js
+++ b/tests/lib/rules/no-deprecated-v-on-number-modifiers.js
@@ -4,20 +4,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/no-deprecated-v-on-number-modifiers')
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 ruleTester.run('no-deprecated-v-on-number-modifiers', rule, {
@@ -78,7 +69,14 @@ ruleTester.run('no-deprecated-v-on-number-modifiers', rule, {
       code: "<template><input v-on:keyup.34='onArrowUp'></template>",
       output: "<template><input v-on:keyup.page-down='onArrowUp'></template>",
       errors: [
-        "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead."
+        {
+          message:
+            "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead.",
+          line: 1,
+          column: 29,
+          endLine: 1,
+          endColumn: 31
+        }
       ]
     },
     {
@@ -87,7 +85,14 @@ ruleTester.run('no-deprecated-v-on-number-modifiers', rule, {
       output:
         "<template><input v-on:keyup.page-down.native='onArrowUp'></template>",
       errors: [
-        "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead."
+        {
+          message:
+            "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead.",
+          line: 1,
+          column: 29,
+          endLine: 1,
+          endColumn: 31
+        }
       ]
     },
     {
@@ -96,7 +101,14 @@ ruleTester.run('no-deprecated-v-on-number-modifiers', rule, {
       output:
         "<template><input v-on:keyup.unknown.page-down='onArrowUp'></template>",
       errors: [
-        "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead."
+        {
+          message:
+            "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead.",
+          line: 1,
+          column: 37,
+          endLine: 1,
+          endColumn: 39
+        }
       ]
     },
     {
@@ -105,7 +117,14 @@ ruleTester.run('no-deprecated-v-on-number-modifiers', rule, {
       output:
         "<template><input v-on:[dynamicArg].page-down='onArrowUp'></template>",
       errors: [
-        "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead."
+        {
+          message:
+            "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead.",
+          line: 1,
+          column: 36,
+          endLine: 1,
+          endColumn: 38
+        }
       ]
     },
     {
@@ -114,7 +133,14 @@ ruleTester.run('no-deprecated-v-on-number-modifiers', rule, {
       output:
         "<template><input v-on:[dynamicArg].unknown.page-down='onArrowUp'></template>",
       errors: [
-        "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead."
+        {
+          message:
+            "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead.",
+          line: 1,
+          column: 44,
+          endLine: 1,
+          endColumn: 46
+        }
       ]
     },
     {
@@ -123,7 +149,14 @@ ruleTester.run('no-deprecated-v-on-number-modifiers', rule, {
       output:
         "<template><input v-on:[dynamicArg].page-down.unknown='onArrowUp'></template>",
       errors: [
-        "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead."
+        {
+          message:
+            "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead.",
+          line: 1,
+          column: 36,
+          endLine: 1,
+          endColumn: 38
+        }
       ]
     },
     {
@@ -131,7 +164,14 @@ ruleTester.run('no-deprecated-v-on-number-modifiers', rule, {
       code: "<template><input @keyup.34='onArrowUp'></template>",
       output: "<template><input @keyup.page-down='onArrowUp'></template>",
       errors: [
-        "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead."
+        {
+          message:
+            "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead.",
+          line: 1,
+          column: 25,
+          endLine: 1,
+          endColumn: 27
+        }
       ]
     },
     {
@@ -140,7 +180,14 @@ ruleTester.run('no-deprecated-v-on-number-modifiers', rule, {
       output:
         "<template><input @keyup.page-down.native='onArrowUp'></template>",
       errors: [
-        "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead."
+        {
+          message:
+            "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead.",
+          line: 1,
+          column: 25,
+          endLine: 1,
+          endColumn: 27
+        }
       ]
     },
     {
@@ -149,7 +196,14 @@ ruleTester.run('no-deprecated-v-on-number-modifiers', rule, {
       output:
         "<template><input @keyup.unknown.page-down='onArrowUp'></template>",
       errors: [
-        "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead."
+        {
+          message:
+            "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead.",
+          line: 1,
+          column: 33,
+          endLine: 1,
+          endColumn: 35
+        }
       ]
     },
     {
@@ -158,7 +212,14 @@ ruleTester.run('no-deprecated-v-on-number-modifiers', rule, {
       output:
         "<template><input @[dynamicArg].page-down='onArrowUp'></template>",
       errors: [
-        "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead."
+        {
+          message:
+            "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead.",
+          line: 1,
+          column: 32,
+          endLine: 1,
+          endColumn: 34
+        }
       ]
     },
     {
@@ -167,7 +228,14 @@ ruleTester.run('no-deprecated-v-on-number-modifiers', rule, {
       output:
         "<template><input @[dynamicArg].unknown.page-down='onArrowUp'></template>",
       errors: [
-        "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead."
+        {
+          message:
+            "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead.",
+          line: 1,
+          column: 40,
+          endLine: 1,
+          endColumn: 42
+        }
       ]
     },
     {
@@ -176,7 +244,14 @@ ruleTester.run('no-deprecated-v-on-number-modifiers', rule, {
       output:
         "<template><input @[dynamicArg].page-down.unknown='onArrowUp'></template>",
       errors: [
-        "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead."
+        {
+          message:
+            "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead.",
+          line: 1,
+          column: 32,
+          endLine: 1,
+          endColumn: 34
+        }
       ]
     },
     {
@@ -184,7 +259,14 @@ ruleTester.run('no-deprecated-v-on-number-modifiers', rule, {
       code: "<template><input @keyup.10='onArrowUp'></template>",
       output: null,
       errors: [
-        "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead."
+        {
+          message:
+            "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead.",
+          line: 1,
+          column: 25,
+          endLine: 1,
+          endColumn: 27
+        }
       ]
     },
     {
@@ -192,7 +274,14 @@ ruleTester.run('no-deprecated-v-on-number-modifiers', rule, {
       code: "<template><input @keyup.10.native='onArrowUp'></template>",
       output: null,
       errors: [
-        "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead."
+        {
+          message:
+            "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead.",
+          line: 1,
+          column: 25,
+          endLine: 1,
+          endColumn: 27
+        }
       ]
     },
     {
@@ -200,7 +289,14 @@ ruleTester.run('no-deprecated-v-on-number-modifiers', rule, {
       code: "<template><input @keyup.unknown.10='onArrowUp'></template>",
       output: null,
       errors: [
-        "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead."
+        {
+          message:
+            "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead.",
+          line: 1,
+          column: 33,
+          endLine: 1,
+          endColumn: 35
+        }
       ]
     },
     {
@@ -208,7 +304,14 @@ ruleTester.run('no-deprecated-v-on-number-modifiers', rule, {
       code: "<template><input @[dynamicArg].unknown.10='onArrowUp'></template>",
       output: null,
       errors: [
-        "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead."
+        {
+          message:
+            "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead.",
+          line: 1,
+          column: 40,
+          endLine: 1,
+          endColumn: 42
+        }
       ]
     },
     {
@@ -225,13 +328,62 @@ ruleTester.run('no-deprecated-v-on-number-modifiers', rule, {
       </template>`,
       output: null,
       errors: [
-        "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead.",
-        "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead.",
-        "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead.",
-        "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead.",
-        "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead.",
-        "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead.",
-        "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead."
+        {
+          message:
+            "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead.",
+          line: 3,
+          column: 25,
+          endLine: 3,
+          endColumn: 27
+        },
+        {
+          message:
+            "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead.",
+          line: 4,
+          column: 25,
+          endLine: 4,
+          endColumn: 27
+        },
+        {
+          message:
+            "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead.",
+          line: 5,
+          column: 25,
+          endLine: 5,
+          endColumn: 27
+        },
+        {
+          message:
+            "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead.",
+          line: 6,
+          column: 25,
+          endLine: 6,
+          endColumn: 27
+        },
+        {
+          message:
+            "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead.",
+          line: 7,
+          column: 25,
+          endLine: 7,
+          endColumn: 27
+        },
+        {
+          message:
+            "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead.",
+          line: 8,
+          column: 25,
+          endLine: 8,
+          endColumn: 27
+        },
+        {
+          message:
+            "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead.",
+          line: 9,
+          column: 25,
+          endLine: 9,
+          endColumn: 28
+        }
       ]
     },
     {
@@ -253,11 +405,46 @@ ruleTester.run('no-deprecated-v-on-number-modifiers', rule, {
         <input @keydown.arrow-down='onKeydown'>
       </template>`,
       errors: [
-        "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead.",
-        "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead.",
-        "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead.",
-        "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead.",
-        "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead."
+        {
+          message:
+            "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead.",
+          line: 3,
+          column: 25,
+          endLine: 3,
+          endColumn: 27
+        },
+        {
+          message:
+            "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead.",
+          line: 4,
+          column: 25,
+          endLine: 4,
+          endColumn: 27
+        },
+        {
+          message:
+            "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead.",
+          line: 5,
+          column: 25,
+          endLine: 5,
+          endColumn: 27
+        },
+        {
+          message:
+            "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead.",
+          line: 6,
+          column: 25,
+          endLine: 6,
+          endColumn: 27
+        },
+        {
+          message:
+            "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead.",
+          line: 7,
+          column: 25,
+          endLine: 7,
+          endColumn: 27
+        }
       ]
     }
   ]
diff --git a/tests/lib/rules/no-deprecated-vue-config-keycodes.js b/tests/lib/rules/no-deprecated-vue-config-keycodes.js
index dae0ec800..b0494f24d 100644
--- a/tests/lib/rules/no-deprecated-vue-config-keycodes.js
+++ b/tests/lib/rules/no-deprecated-vue-config-keycodes.js
@@ -4,20 +4,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/no-deprecated-vue-config-keycodes')
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2020 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2020 }
 })
 
 ruleTester.run('no-deprecated-vue-config-keycodes', rule, {
@@ -45,7 +36,6 @@ ruleTester.run('no-deprecated-vue-config-keycodes', rule, {
           message: '`Vue.config.keyCodes` are deprecated.',
           line: 1,
           column: 1,
-          type: 'MemberExpression',
           // messageId: 'unexpected',
           endLine: 1,
           endColumn: 20
@@ -55,12 +45,28 @@ ruleTester.run('no-deprecated-vue-config-keycodes', rule, {
     {
       filename: 'test.js',
       code: 'Vue?.config?.keyCodes',
-      errors: ['`Vue.config.keyCodes` are deprecated.']
+      errors: [
+        {
+          message: '`Vue.config.keyCodes` are deprecated.',
+          line: 1,
+          column: 1,
+          endLine: 1,
+          endColumn: 22
+        }
+      ]
     },
     {
       filename: 'test.js',
       code: '(Vue?.config)?.keyCodes',
-      errors: ['`Vue.config.keyCodes` are deprecated.']
+      errors: [
+        {
+          message: '`Vue.config.keyCodes` are deprecated.',
+          line: 1,
+          column: 1,
+          endLine: 1,
+          endColumn: 24
+        }
+      ]
     }
   ]
 })
diff --git a/tests/lib/rules/no-dupe-keys.js b/tests/lib/rules/no-dupe-keys.js
index 2abae46d0..e4ca1e8ec 100644
--- a/tests/lib/rules/no-dupe-keys.js
+++ b/tests/lib/rules/no-dupe-keys.js
@@ -4,19 +4,14 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/no-dupe-keys')
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
+const {
+  getTypeScriptFixtureTestOptions
+} = require('../../test-utils/typescript')
 
 const ruleTester = new RuleTester({
-  parserOptions: {
+  languageOptions: {
     ecmaVersion: 2018,
     sourceType: 'module'
   }
@@ -398,6 +393,141 @@ ruleTester.run('no-dupe-keys', rule, {
           },
         }
       `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+        defineProps({
+          foo: String,
+        })
+        const bar = 0
+      </script>
+      `,
+      languageOptions: { parser: require('vue-eslint-parser') }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+        defineProps<{
+          foo: string;
+        }>();
+
+        const bar = 0
+      </script>
+      `,
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const props = defineProps(['foo', 'bar'])
+      const { foo, bar } = props
+      </script>
+      `,
+      languageOptions: { parser: require('vue-eslint-parser') }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const props = defineProps(['foo', 'bar'])
+      const foo = props.foo
+      const bar = props.bar
+      </script>
+      `,
+      languageOptions: { parser: require('vue-eslint-parser') }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      import {toRefs} from 'vue'
+      const props = defineProps(['foo', 'bar'])
+      const { foo, bar } = toRefs(props)
+      </script>
+      `,
+      languageOptions: { parser: require('vue-eslint-parser') }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      import {toRef} from 'vue'
+      const props = defineProps(['foo', 'bar'])
+      const foo = toRef(props, 'foo')
+      const bar = toRef(props, 'bar')
+      </script>
+      `,
+      languageOptions: { parser: require('vue-eslint-parser') }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const {foo,bar} = defineProps(['foo', 'bar'])
+      </script>
+      `,
+      languageOptions: { parser: require('vue-eslint-parser') }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const {foo=42,bar='abc'} = defineProps(['foo', 'bar'])
+      </script>
+      `,
+      languageOptions: { parser: require('vue-eslint-parser') }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      const props = withDefaults(
+        defineProps<{
+          foo?: string | number
+        }>(),
+        {
+          foo: "Foo",
+        }
+      );
+      const foo = props.foo
+      </script>
+      `,
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const { foo: renamedFoo, bar: renamedBar } = defineProps(['foo', 'bar'])
+      const foo = 42
+      const bar = 'hello'
+      </script>
+      `,
+      languageOptions: { parser: require('vue-eslint-parser') }
+    },
+    {
+      code: `
+      <script setup lang="ts">
+      import {Props2 as Props} from './test01'
+
+      defineProps<Props>()
+
+      const bar = computed(() => {
+        return "hello";
+      });
+      </script>
+      `,
+      ...getTypeScriptFixtureTestOptions()
     }
   ],
 
@@ -431,20 +561,36 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
-          line: 5
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
+          line: 5,
+          column: 13,
+          endLine: 5,
+          endColumn: 16
         },
         {
-          message: "Duplicated key 'foo'.",
-          line: 10
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
+          line: 10,
+          column: 15,
+          endLine: 10,
+          endColumn: 18
         },
         {
-          message: "Duplicated key 'foo'.",
-          line: 14
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
+          line: 14,
+          column: 13,
+          endLine: 14,
+          endColumn: 16
         },
         {
-          message: "Duplicated key 'foo'.",
-          line: 21
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
+          line: 21,
+          column: 15,
+          endLine: 21,
+          endColumn: 18
         }
       ]
     },
@@ -477,20 +623,36 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
-          line: 5
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
+          line: 5,
+          column: 13,
+          endLine: 5,
+          endColumn: 16
         },
         {
-          message: "Duplicated key 'foo'.",
-          line: 10
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
+          line: 10,
+          column: 15,
+          endLine: 10,
+          endColumn: 18
         },
         {
-          message: "Duplicated key 'foo'.",
-          line: 14
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
+          line: 14,
+          column: 13,
+          endLine: 14,
+          endColumn: 16
         },
         {
-          message: "Duplicated key 'foo'.",
-          line: 21
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
+          line: 21,
+          column: 15,
+          endLine: 21,
+          endColumn: 18
         }
       ]
     },
@@ -514,16 +676,28 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
-          line: 5
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
+          line: 5,
+          column: 13,
+          endLine: 5,
+          endColumn: 16
         },
         {
-          message: "Duplicated key 'foo'.",
-          line: 9
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
+          line: 9,
+          column: 13,
+          endLine: 9,
+          endColumn: 16
         },
         {
-          message: "Duplicated key 'foo'.",
-          line: 12
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
+          line: 12,
+          column: 13,
+          endLine: 12,
+          endColumn: 16
         }
       ]
     },
@@ -558,20 +732,36 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
-          line: 7
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
+          line: 7,
+          column: 13,
+          endLine: 7,
+          endColumn: 16
         },
         {
-          message: "Duplicated key 'foo'.",
-          line: 13
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
+          line: 13,
+          column: 13,
+          endLine: 13,
+          endColumn: 16
         },
         {
-          message: "Duplicated key 'foo'.",
-          line: 16
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
+          line: 16,
+          column: 13,
+          endLine: 16,
+          endColumn: 16
         },
         {
-          message: "Duplicated key 'foo'.",
-          line: 23
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
+          line: 23,
+          column: 15,
+          endLine: 23,
+          endColumn: 18
         }
       ]
     },
@@ -590,8 +780,12 @@ ruleTester.run('no-dupe-keys', rule, {
       options: [{ groups: ['foo'] }],
       errors: [
         {
-          message: "Duplicated key 'bar'.",
-          line: 7
+          message:
+            "Duplicate key 'bar'. May cause name collision in script or template tag.",
+          line: 7,
+          column: 13,
+          endLine: 7,
+          endColumn: 16
         }
       ]
     },
@@ -615,8 +809,12 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
-          line: 12
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
+          line: 12,
+          column: 15,
+          endLine: 12,
+          endColumn: 18
         }
       ]
     },
@@ -638,8 +836,12 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
-          line: 10
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
+          line: 10,
+          column: 15,
+          endLine: 10,
+          endColumn: 18
         }
       ]
     },
@@ -659,8 +861,12 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
-          line: 9
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
+          line: 9,
+          column: 13,
+          endLine: 9,
+          endColumn: 16
         }
       ]
     },
@@ -680,8 +886,12 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
-          line: 9
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
+          line: 9,
+          column: 13,
+          endLine: 9,
+          endColumn: 16
         }
       ]
     },
@@ -701,8 +911,12 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
-          line: 9
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
+          line: 9,
+          column: 13,
+          endLine: 9,
+          endColumn: 16
         }
       ]
     },
@@ -722,8 +936,12 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
-          line: 9
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
+          line: 9,
+          column: 13,
+          endLine: 9,
+          endColumn: 16
         }
       ]
     },
@@ -742,8 +960,12 @@ ruleTester.run('no-dupe-keys', rule, {
       options: [{ groups: ['foo'] }],
       errors: [
         {
-          message: "Duplicated key 'bar'.",
-          line: 7
+          message:
+            "Duplicate key 'bar'. May cause name collision in script or template tag.",
+          line: 7,
+          column: 13,
+          endLine: 7,
+          endColumn: 16
         }
       ]
     },
@@ -762,8 +984,12 @@ ruleTester.run('no-dupe-keys', rule, {
       options: [{ groups: ['foo'] }],
       errors: [
         {
-          message: "Duplicated key 'bar'.",
-          line: 7
+          message:
+            "Duplicate key 'bar'. May cause name collision in script or template tag.",
+          line: 7,
+          column: 13,
+          endLine: 7,
+          endColumn: 16
         }
       ]
     },
@@ -786,8 +1012,12 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
-          line: 6
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
+          line: 6,
+          column: 17,
+          endLine: 6,
+          endColumn: 20
         }
       ]
     },
@@ -806,8 +1036,12 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
-          line: 7
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
+          line: 7,
+          column: 17,
+          endLine: 7,
+          endColumn: 20
         }
       ]
     },
@@ -825,8 +1059,12 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
-          line: 6
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
+          line: 6,
+          column: 17,
+          endLine: 6,
+          endColumn: 20
         }
       ]
     },
@@ -845,8 +1083,12 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
-          line: 7
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
+          line: 7,
+          column: 17,
+          endLine: 7,
+          endColumn: 20
         }
       ]
     },
@@ -865,10 +1107,185 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
-          line: 7
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
+          line: 7,
+          column: 17,
+          endLine: 7,
+          endColumn: 20
         }
       ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+        defineProps({
+          foo: String,
+        })
+        const foo = 0
+      </script>
+      `,
+      languageOptions: { parser: require('vue-eslint-parser') },
+      errors: [
+        {
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
+          line: 6,
+          column: 15,
+          endLine: 6,
+          endColumn: 22
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+        import { Foo } from './Foo.vue';
+        import baz from './baz';
+
+        defineProps({
+          foo: String,
+          bar: String,
+          baz: String,
+        });
+
+        function foo() {
+          const baz = 'baz';
+        }
+        const bar = () => 'bar';
+      </script>
+      `,
+      languageOptions: { parser: require('vue-eslint-parser') },
+      errors: [
+        {
+          message:
+            "Duplicate key 'baz'. May cause name collision in script or template tag.",
+          line: 4,
+          column: 16,
+          endLine: 4,
+          endColumn: 19
+        },
+        {
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
+          line: 12,
+          column: 9,
+          endLine: 14,
+          endColumn: 10
+        },
+        {
+          message:
+            "Duplicate key 'bar'. May cause name collision in script or template tag.",
+          line: 15,
+          column: 15,
+          endLine: 15,
+          endColumn: 32
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      defineProps<{
+        foo: string;
+        bar: string;
+      }>();
+
+      const foo = 'foo';
+      const bar = 'bar';
+      </script>
+      `,
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      },
+      errors: [
+        {
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
+          line: 8,
+          column: 13,
+          endLine: 8,
+          endColumn: 24
+        },
+        {
+          message:
+            "Duplicate key 'bar'. May cause name collision in script or template tag.",
+          line: 9,
+          column: 13,
+          endLine: 9,
+          endColumn: 24
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const props = defineProps(['foo', 'bar'])
+      const { foo } = props
+      const bar = 42
+      </script>
+      `,
+      languageOptions: { parser: require('vue-eslint-parser') },
+      errors: [
+        {
+          message:
+            "Duplicate key 'bar'. May cause name collision in script or template tag.",
+          line: 5,
+          column: 13,
+          endLine: 5,
+          endColumn: 21
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const { foo: renamedFoo } = defineProps(['foo', 'bar'])
+      const foo = 'foo'
+      const bar = 'bar'
+      </script>
+      `,
+      languageOptions: { parser: require('vue-eslint-parser') },
+      errors: [
+        {
+          message:
+            "Duplicate key 'bar'. May cause name collision in script or template tag.",
+          line: 5,
+          column: 13,
+          endLine: 5,
+          endColumn: 24
+        }
+      ]
+    },
+    {
+      code: `
+      <script setup lang="ts">
+      import {Props1 as Props} from './test01'
+
+      defineProps<Props>()
+
+      const foo = computed(() => {
+        return "hello";
+      });
+      </script>
+      `,
+      errors: [
+        {
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
+          line: 7,
+          column: 13,
+          endLine: 9,
+          endColumn: 9
+        }
+      ],
+      ...getTypeScriptFixtureTestOptions()
     }
   ]
 })
diff --git a/tests/lib/rules/no-dupe-v-else-if.js b/tests/lib/rules/no-dupe-v-else-if.js
index 214657a9c..0d65ddf31 100644
--- a/tests/lib/rules/no-dupe-v-else-if.js
+++ b/tests/lib/rules/no-dupe-v-else-if.js
@@ -4,12 +4,12 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-dupe-v-else-if')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
     ecmaVersion: 2019,
     sourceType: 'module'
   }
@@ -165,7 +165,10 @@ tester.run('no-dupe-v-else-if', rule, {
       errors: [
         {
           messageId: 'unexpected',
-          line: 4
+          line: 4,
+          column: 25,
+          endLine: 4,
+          endColumn: 39
         }
       ]
     },
@@ -182,7 +185,10 @@ tester.run('no-dupe-v-else-if', rule, {
       errors: [
         {
           messageId: 'unexpected',
-          line: 6
+          line: 6,
+          column: 25,
+          endLine: 6,
+          endColumn: 31
         }
       ]
     },
@@ -200,7 +206,10 @@ tester.run('no-dupe-v-else-if', rule, {
       errors: [
         {
           messageId: 'unexpected',
-          line: 6
+          line: 6,
+          column: 25,
+          endLine: 6,
+          endColumn: 32
         }
       ]
     },
@@ -215,7 +224,10 @@ tester.run('no-dupe-v-else-if', rule, {
       errors: [
         {
           messageId: 'unexpected',
-          line: 4
+          line: 4,
+          column: 25,
+          endLine: 4,
+          endColumn: 26
         }
       ]
     },
@@ -231,7 +243,10 @@ tester.run('no-dupe-v-else-if', rule, {
       errors: [
         {
           messageId: 'unexpected',
-          line: 5
+          line: 5,
+          column: 25,
+          endLine: 5,
+          endColumn: 31
         }
       ]
     },
@@ -246,7 +261,10 @@ tester.run('no-dupe-v-else-if', rule, {
       errors: [
         {
           messageId: 'unexpected',
-          line: 4
+          line: 4,
+          column: 25,
+          endLine: 4,
+          endColumn: 26
         }
       ]
     },
@@ -261,7 +279,10 @@ tester.run('no-dupe-v-else-if', rule, {
       errors: [
         {
           messageId: 'unexpected',
-          line: 4
+          line: 4,
+          column: 25,
+          endLine: 4,
+          endColumn: 36
         }
       ]
     },
@@ -276,7 +297,10 @@ tester.run('no-dupe-v-else-if', rule, {
       errors: [
         {
           messageId: 'unexpected',
-          line: 4
+          line: 4,
+          column: 25,
+          endLine: 4,
+          endColumn: 26
         }
       ]
     },
@@ -292,7 +316,10 @@ tester.run('no-dupe-v-else-if', rule, {
       errors: [
         {
           messageId: 'unexpected',
-          line: 5
+          line: 5,
+          column: 31,
+          endLine: 5,
+          endColumn: 47
         }
       ]
     },
@@ -332,8 +359,20 @@ tester.run('no-dupe-v-else-if', rule, {
       </template>
       `,
       errors: [
-        { messageId: 'unexpected', line: 4 },
-        { messageId: 'unexpected', line: 5 }
+        {
+          messageId: 'unexpected',
+          line: 4,
+          column: 25,
+          endLine: 4,
+          endColumn: 36
+        },
+        {
+          messageId: 'unexpected',
+          line: 5,
+          column: 25,
+          endLine: 5,
+          endColumn: 36
+        }
       ]
     },
     {
@@ -346,8 +385,20 @@ tester.run('no-dupe-v-else-if', rule, {
       </template>
       `,
       errors: [
-        { messageId: 'unexpected', line: 4 },
-        { messageId: 'unexpected', line: 5 }
+        {
+          messageId: 'unexpected',
+          line: 4,
+          column: 25,
+          endLine: 4,
+          endColumn: 26
+        },
+        {
+          messageId: 'unexpected',
+          line: 5,
+          column: 25,
+          endLine: 5,
+          endColumn: 26
+        }
       ]
     },
     {
@@ -359,263 +410,702 @@ tester.run('no-dupe-v-else-if', rule, {
         <div v-else-if ="(a && b) || (c && (d || (e && f)))" />
       </template>
       `,
-      errors: [{ messageId: 'unexpected' }, { messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 4,
+          column: 26,
+          endLine: 4,
+          endColumn: 60
+        },
+        {
+          messageId: 'unexpected',
+          line: 5,
+          column: 26,
+          endLine: 5,
+          endColumn: 60
+        }
+      ]
     },
 
     // Referred to the ESLint core rule.
     {
       filename: 'test.vue',
       code: '<template><div v-if="a" /><div v-else-if="a" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 43,
+          endLine: 1,
+          endColumn: 44
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a" /><div v-else-if="b" /><div v-else-if="a" /><div v-else-if="c" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 64,
+          endLine: 1,
+          endColumn: 65
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a" /><div v-else-if="b" /><div v-else-if="a" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 64,
+          endLine: 1,
+          endColumn: 65
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a" /><div v-else-if="b" /><div v-else-if="c" /><div v-else-if="a" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 85,
+          endLine: 1,
+          endColumn: 86
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a" /><div v-else-if="b" /><div v-else-if="b" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 64,
+          endLine: 1,
+          endColumn: 65
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a" /><div v-else-if="b" /><div v-else-if="c" /><div v-else-if="b" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 85,
+          endLine: 1,
+          endColumn: 86
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a" /><div v-else-if="b" /><div v-else-if="c" /><div v-else-if="b" /><div v-else-if="d" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 85,
+          endLine: 1,
+          endColumn: 86
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a" /><div v-else-if="b" /><div v-else-if="c" /><div v-else-if="d" /><div v-else-if="b" /><div v-else-if="e" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 106,
+          endLine: 1,
+          endColumn: 107
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a" /><div v-else-if="a" /><div v-else-if="a" /></template>',
-      errors: [{ messageId: 'unexpected' }, { messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 43,
+          endLine: 1,
+          endColumn: 44
+        },
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 64,
+          endLine: 1,
+          endColumn: 65
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a" /><div v-else-if="b" /><div v-else-if="a" /><div v-else-if="b" /><div v-else-if="a" /></template>',
       errors: [
-        { messageId: 'unexpected' },
-        { messageId: 'unexpected' },
-        { messageId: 'unexpected' }
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 64,
+          endLine: 1,
+          endColumn: 65
+        },
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 85,
+          endLine: 1,
+          endColumn: 86
+        },
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 106,
+          endLine: 1,
+          endColumn: 107
+        }
       ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a"><div v-if="b" /></div><div v-else-if="a" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 63,
+          endLine: 1,
+          endColumn: 64
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a === 1" /><div v-else-if="a === 1" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 49,
+          endLine: 1,
+          endColumn: 56
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="1 < a" /><div v-else-if="1 < a" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 47,
+          endLine: 1,
+          endColumn: 52
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="true" /><div v-else-if="true" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 46,
+          endLine: 1,
+          endColumn: 50
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a && b" /><div v-else-if="a && b" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 48,
+          endLine: 1,
+          endColumn: 54
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a && b || c" /><div v-else-if="a && b || c" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 53,
+          endLine: 1,
+          endColumn: 64
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="f(a)" /><div v-else-if="f(a)" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 46,
+          endLine: 1,
+          endColumn: 50
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a === 1" /><div v-else-if="a===1" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 49,
+          endLine: 1,
+          endColumn: 54
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a === 1" /><div v-else-if="a === /* comment */ 1" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 49,
+          endLine: 1,
+          endColumn: 70
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a || b" /><div v-else-if="a" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 48,
+          endLine: 1,
+          endColumn: 49
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a || b" /><div v-else-if="a" /><div v-else-if="b" /></template>',
-      errors: [{ messageId: 'unexpected' }, { messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 48,
+          endLine: 1,
+          endColumn: 49
+        },
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 69,
+          endLine: 1,
+          endColumn: 70
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a || b" /><div v-else-if="b || a" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 48,
+          endLine: 1,
+          endColumn: 54
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a" /><div v-else-if="b" /><div v-else-if="a || b" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 64,
+          endLine: 1,
+          endColumn: 70
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a || b" /><div v-else-if="c || d" /><div v-else-if="a || d" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 74,
+          endLine: 1,
+          endColumn: 80
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="(a === b && fn(c)) || d" /><div v-else-if="fn(c) && a === b" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 65,
+          endLine: 1,
+          endColumn: 81
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a" /><div v-else-if="a && b" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 43,
+          endLine: 1,
+          endColumn: 44
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a && b" /><div v-else-if="a && b && c" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 48,
+          endLine: 1,
+          endColumn: 59
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a || c" /><div v-else-if="a && b || c" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 48,
+          endLine: 1,
+          endColumn: 59
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a" /><div v-else-if="b" /><div v-else-if="c && a || b" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 64,
+          endLine: 1,
+          endColumn: 75
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a" /><div v-else-if="b" /><div v-else-if="c && (a || b)" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 70,
+          endLine: 1,
+          endColumn: 76
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a" /><div v-else-if="b && c" /><div v-else-if="d && (a || e && c && b)" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 75,
+          endLine: 1,
+          endColumn: 91
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a || b && c" /><div v-else-if="b && c && d" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 53,
+          endLine: 1,
+          endColumn: 64
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a || b" /><div v-else-if="b && c" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 48,
+          endLine: 1,
+          endColumn: 49
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a" /><div v-else-if="b" /><div v-else-if="(a || b) && c" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 65,
+          endLine: 1,
+          endColumn: 71
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="(a && (b || c)) || d" /><div v-else-if="(c || b) && e && a" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 62,
+          endLine: 1,
+          endColumn: 80
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a && b || b && c" /><div v-else-if="a && b && c" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 58,
+          endLine: 1,
+          endColumn: 69
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a" /><div v-else-if="b && c" /><div v-else-if="d && (c && e && b || a)" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 75,
+          endLine: 1,
+          endColumn: 91
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a || (b && (c || d))" /><div v-else-if="(d || c) && b" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 62,
+          endLine: 1,
+          endColumn: 75
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a || b" /><div v-else-if="(b || a) && c" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 49,
+          endLine: 1,
+          endColumn: 55
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a || b" /><div v-else-if="c" /><div v-else-if="d" /><div v-else-if="b && (a || c)" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 90,
+          endLine: 1,
+          endColumn: 91
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a || b || c" /><div v-else-if="a || (b && d) || (c && e)" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 53,
+          endLine: 1,
+          endColumn: 78
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a || (b || c)" /><div v-else-if="a || (b && c)" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 55,
+          endLine: 1,
+          endColumn: 68
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a || b" /><div v-else-if="c" /><div v-else-if="d" /><div v-else-if="(a || c) && (b || d)" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 91,
+          endLine: 1,
+          endColumn: 97
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a" /><div v-else-if="b" /><div v-else-if="c && (a || d && b)" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 70,
+          endLine: 1,
+          endColumn: 81
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a" /><div v-else-if="a || a" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 43,
+          endLine: 1,
+          endColumn: 49
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a || a" /><div v-else-if="a || a" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 48,
+          endLine: 1,
+          endColumn: 54
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a || a" /><div v-else-if="a" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 48,
+          endLine: 1,
+          endColumn: 49
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a" /><div v-else-if="a && a" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 43,
+          endLine: 1,
+          endColumn: 44
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a && a" /><div v-else-if="a && a" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 48,
+          endLine: 1,
+          endColumn: 49
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-if="a && a" /><div v-else-if="a" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 48,
+          endLine: 1,
+          endColumn: 49
+        }
+      ]
     }
   ]
 })
diff --git a/tests/lib/rules/no-duplicate-attr-inheritance.js b/tests/lib/rules/no-duplicate-attr-inheritance.js
index 8c4917071..8a007b491 100644
--- a/tests/lib/rules/no-duplicate-attr-inheritance.js
+++ b/tests/lib/rules/no-duplicate-attr-inheritance.js
@@ -4,21 +4,13 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/no-duplicate-attr-inheritance')
 
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
     ecmaVersion: 2018,
     sourceType: 'module'
   }
@@ -51,6 +43,57 @@ ruleTester.run('no-duplicate-attr-inheritance', rule, {
         </script>
       `
     },
+    // ignore multi root by default
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      defineOptions({ inheritAttrs: true })
+      </script>
+      <template><div v-bind="$attrs"/><div/></template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div v-if="condition1"></div>
+        <div v-if="condition2" v-bind="$attrs"></div>
+        <div v-else></div>
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div v-if="condition1"></div>
+        <div v-else-if="condition2"></div>
+        <div v-bind="$attrs"></div>
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div v-bind="$attrs"></div>
+        <div v-if="condition1"></div>
+        <div v-else></div>
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div v-if="condition1"></div>
+        <div v-else-if="condition2"></div>
+        <div v-if="condition3" v-bind="$attrs"></div>
+      </template>
+      `,
+      options: [{ checkMultiRootNodes: false }]
+    },
     {
       filename: 'test.vue',
       code: `
@@ -87,6 +130,26 @@ ruleTester.run('no-duplicate-attr-inheritance', rule, {
         export default {  }
         </script>
       `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default { inheritAttrs: false }
+      </script>
+      <script setup>
+      </script>
+      <template><div v-bind="$attrs" /></template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      defineOptions({ inheritAttrs: false })
+      </script>
+      <template><div v-bind="$attrs" /></template>
+      `
     }
   ],
 
@@ -94,7 +157,15 @@ ruleTester.run('no-duplicate-attr-inheritance', rule, {
     {
       filename: 'test.vue',
       code: '<template><div><div v-bind="$attrs"></div></div></template>',
-      errors: ['Set "inheritAttrs" to false.']
+      errors: [
+        {
+          message: 'Set "inheritAttrs" to false.',
+          line: 1,
+          column: 29,
+          endLine: 1,
+          endColumn: 35
+        }
+      ]
     },
     {
       filename: 'test.vue',
@@ -106,7 +177,162 @@ ruleTester.run('no-duplicate-attr-inheritance', rule, {
         }
         </script>
       `,
-      errors: ['Set "inheritAttrs" to false.']
+      errors: [
+        {
+          message: 'Set "inheritAttrs" to false.',
+          line: 2,
+          column: 37,
+          endLine: 2,
+          endColumn: 43
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default { inheritAttrs: true }
+      </script>
+      <script setup>
+      </script>
+      <template><div v-bind="$attrs" /></template>
+      `,
+      errors: [
+        {
+          message: 'Set "inheritAttrs" to false.',
+          line: 7,
+          column: 30,
+          endLine: 7,
+          endColumn: 36
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      defineOptions({ inheritAttrs: true })
+      </script>
+      <template><div v-bind="$attrs" /></template>
+      `,
+      errors: [
+        {
+          message: 'Set "inheritAttrs" to false.',
+          line: 5,
+          column: 30,
+          endLine: 5,
+          endColumn: 36
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template><div v-bind="$attrs"></div><div></div></template>`,
+      options: [{ checkMultiRootNodes: true }],
+      errors: [
+        {
+          message: 'Set "inheritAttrs" to false.',
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 30
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div v-if="condition1" v-bind="$attrs"></div>
+        <div v-else></div>
+        <div v-if="condition2"></div>
+      </template>
+      `,
+      options: [{ checkMultiRootNodes: true }],
+      errors: [
+        {
+          message: 'Set "inheritAttrs" to false.',
+          line: 3,
+          column: 40,
+          endLine: 3,
+          endColumn: 46
+        }
+      ]
+    },
+    // condition group as a single root node
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div v-if="condition1" v-bind="$attrs"></div>
+        <div v-else-if="condition2"></div>
+        <div v-else></div>
+      </template>
+      `,
+      errors: [
+        {
+          message: 'Set "inheritAttrs" to false.',
+          line: 3,
+          column: 40,
+          endLine: 3,
+          endColumn: 46
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div v-if="condition1" v-bind="$attrs"></div>
+        <div v-else-if="condition2"></div>
+        <div v-else-if="condition3"></div>
+        <div v-else></div>
+      </template>
+      `,
+      errors: [
+        {
+          message: 'Set "inheritAttrs" to false.',
+          line: 3,
+          column: 40,
+          endLine: 3,
+          endColumn: 46
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div v-if="condition1" v-bind="$attrs"></div>
+        <div v-else></div>
+      </template>
+      `,
+      errors: [
+        {
+          message: 'Set "inheritAttrs" to false.',
+          line: 3,
+          column: 40,
+          endLine: 3,
+          endColumn: 46
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div v-if="condition1" v-bind="$attrs"></div>
+      </template>
+      `,
+      errors: [
+        {
+          message: 'Set "inheritAttrs" to false.',
+          line: 3,
+          column: 40,
+          endLine: 3,
+          endColumn: 46
+        }
+      ]
     }
   ]
 })
diff --git a/tests/lib/rules/no-duplicate-attributes.js b/tests/lib/rules/no-duplicate-attributes.js
index baa79dc98..48dedf509 100644
--- a/tests/lib/rules/no-duplicate-attributes.js
+++ b/tests/lib/rules/no-duplicate-attributes.js
@@ -5,20 +5,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-duplicate-attributes')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('no-duplicate-attributes', rule, {
@@ -71,36 +62,84 @@ tester.run('no-duplicate-attributes', rule, {
     {
       filename: 'test.vue',
       code: '<template><div><div foo v-bind:foo></div></div></template>',
-      errors: ["Duplicate attribute 'foo'."]
+      errors: [
+        {
+          message: "Duplicate attribute 'foo'.",
+          line: 1,
+          column: 25,
+          endLine: 1,
+          endColumn: 35
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div><div foo :foo></div></div></template>',
-      errors: ["Duplicate attribute 'foo'."]
+      errors: [
+        {
+          message: "Duplicate attribute 'foo'.",
+          line: 1,
+          column: 25,
+          endLine: 1,
+          endColumn: 29
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div><div style :style></div></div></template>',
-      errors: ["Duplicate attribute 'style'."],
-      options: [{ allowCoexistStyle: false }]
+      options: [{ allowCoexistStyle: false }],
+      errors: [
+        {
+          message: "Duplicate attribute 'style'.",
+          line: 1,
+          column: 27,
+          endLine: 1,
+          endColumn: 33
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div><div class :class></div></div></template>',
-      errors: ["Duplicate attribute 'class'."],
-      options: [{ allowCoexistClass: false }]
+      options: [{ allowCoexistClass: false }],
+      errors: [
+        {
+          message: "Duplicate attribute 'class'.",
+          line: 1,
+          column: 27,
+          endLine: 1,
+          endColumn: 33
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div><div :style style></div></div></template>',
-      errors: ["Duplicate attribute 'style'."],
-      options: [{ allowCoexistStyle: false }]
+      options: [{ allowCoexistStyle: false }],
+      errors: [
+        {
+          message: "Duplicate attribute 'style'.",
+          line: 1,
+          column: 28,
+          endLine: 1,
+          endColumn: 33
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div><div :class class></div></div></template>',
-      errors: ["Duplicate attribute 'class'."],
-      options: [{ allowCoexistClass: false }]
+      options: [{ allowCoexistClass: false }],
+      errors: [
+        {
+          message: "Duplicate attribute 'class'.",
+          line: 1,
+          column: 28,
+          endLine: 1,
+          endColumn: 33
+        }
+      ]
     }
   ]
 })
diff --git a/tests/lib/rules/no-duplicate-class-names.js b/tests/lib/rules/no-duplicate-class-names.js
new file mode 100644
index 000000000..4935bb81c
--- /dev/null
+++ b/tests/lib/rules/no-duplicate-class-names.js
@@ -0,0 +1,574 @@
+/**
+ * @author Yizack Rangel
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/no-duplicate-class-names')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('no-duplicate-class-names', rule, {
+  valid: [
+    {
+      filename: 'no-classes.vue',
+      code: '<template><div></div></template>'
+    },
+    {
+      filename: 'one-class.vue',
+      code: '<template><div class="foo"></div></template>'
+    },
+    {
+      filename: 'multiple-different-classes.vue',
+      code: '<template><div class="foo bar baz"></div></template>'
+    },
+    {
+      filename: 'no-duplicate-class-in-directive-string.vue',
+      code: `<template><div :class="'foo bar baz'"></div></template>`
+    },
+    {
+      filename: 'no-duplicate-class-in-directive-literal.vue',
+      code: '<template><div :class="`foo bar baz`"></div></template>'
+    },
+    {
+      filename: 'no-duplicate-class-in-directive-object.vue',
+      code: `<template><div :class="{ 'foo bar baz': true }"></div></template>`
+    },
+    {
+      filename: 'duplicate-class-in-different-directive-object-keys.vue',
+      code: `<template><div :class="{ 'foo': true, 'foo bar': true }"></div></template>`
+    },
+    {
+      filename: 'class-conditional-expression.vue',
+      code: `<template><div :class="isActive ? 'foo' : 'bar'"></div></template>`
+    },
+    {
+      filename: 'class-conditional-duplicate-expression-value.vue',
+      code: `<template><div :class="isActive ? 'foo' : 'foo'"></div></template>`
+    },
+    {
+      filename: 'class-object-duplicate-value.vue',
+      code: `<div :class="{ 'foo bar': isActive, 'foo': isAnotherActive }"></div>`
+    },
+    {
+      filename: 'class-non-intersecting-conditions.vue',
+      code: `<template><div :class="[isActive1 && { 'foo': isActive2, 'bar': isActive3 }, isActive4 && 'bar']"></div></template>`
+    },
+    {
+      filename: 'class-multiple-logical-non-intersecting.vue',
+      code: `<template><div :class="[isActive1 && 'foo', isActive2 && 'foo']"></div></template>`
+    },
+    {
+      filename: 'class-binary-in-logical-non-intersecting.vue',
+      code: `<template><div :class="[isActive1 && ('foo' + ' bar'), isActive2 && 'foo']"></div></template>`
+    }
+  ],
+  invalid: [
+    {
+      filename: 'duplicate-class.vue',
+      code: '<template><div class="foo foo"></div></template>',
+      output: '<template><div class="foo"></div></template>',
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          line: 1,
+          column: 22,
+          endLine: 1,
+          endColumn: 31
+        }
+      ]
+    },
+    {
+      filename: 'multiple-duplicate-classes.vue',
+      code: '<template><div class="foo bar foo baz bar"></div></template>',
+      output: '<template><div class="foo bar baz"></div></template>',
+      errors: [
+        {
+          message: "Duplicate class names 'foo', 'bar'.",
+          line: 1,
+          column: 22,
+          endLine: 1,
+          endColumn: 43
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-in-directive-string.vue',
+      code: `<template><div :class="'foo foo'"></div></template>`,
+      output: `<template><div :class="'foo'"></div></template>`,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 33
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-in-directive-literal.vue',
+      code: '<template><div :class="`foo foo`"></div></template>',
+      output: '<template><div :class="`foo`"></div></template>',
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 33
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-directive-object-key.vue',
+      code: `<template><div :class="{ 'foo foo': true }"></div></template>`,
+      output: `<template><div :class="{ 'foo': true }"></div></template>`,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          line: 1,
+          column: 26,
+          endLine: 1,
+          endColumn: 35
+        }
+      ]
+    },
+    {
+      filename: 'multiple-duplicate-class-directive-object-keys.vue',
+      code: `<template><div :class="{ 'foo foo bar': true, 'bar bar baz': true }"></div></template>`,
+      output: `<template><div :class="{ 'foo bar': true, 'bar baz': true }"></div></template>`,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          line: 1,
+          column: 26,
+          endLine: 1,
+          endColumn: 39
+        },
+        {
+          message: "Duplicate class name 'bar'.",
+          line: 1,
+          column: 47,
+          endLine: 1,
+          endColumn: 60
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-directive-array-item.vue',
+      code: `<template><div :class="['foo foo']"></div></template>`,
+      output: `<template><div :class="['foo']"></div></template>`,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          line: 1,
+          column: 25,
+          endLine: 1,
+          endColumn: 34
+        }
+      ]
+    },
+    {
+      filename: 'multiple-duplicate-classes-directive-array-items.vue',
+      code: `<template><div :class="['foo foo', 'bar bar baz']"></div></template>`,
+      output: `<template><div :class="['foo', 'bar baz']"></div></template>`,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          line: 1,
+          column: 25,
+          endLine: 1,
+          endColumn: 34
+        },
+        {
+          message: "Duplicate class name 'bar'.",
+          line: 1,
+          column: 36,
+          endLine: 1,
+          endColumn: 49
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-in-mixed-directive.vue',
+      code: `<template><div :class="['foo foo', { 'bar bar baz': true }]"></div></template>`,
+      output: `<template><div :class="['foo', { 'bar baz': true }]"></div></template>`,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          line: 1,
+          column: 25,
+          endLine: 1,
+          endColumn: 34
+        },
+        {
+          message: "Duplicate class name 'bar'.",
+          line: 1,
+          column: 38,
+          endLine: 1,
+          endColumn: 51
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-conditional-expression.vue',
+      code: `<template><div :class="isActive ? 'foo foo' : 'bar'"></div></template>`,
+      output: `<template><div :class="isActive ? 'foo' : 'bar'"></div></template>`,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          line: 1,
+          column: 35,
+          endLine: 1,
+          endColumn: 44
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-binary-expression.vue',
+      code: `<template><div :class="'foo foo ' + ' bar'"></div></template>`,
+      output: `<template><div :class="'foo ' + ' bar'"></div></template>`,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 34
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-preserved-spaces-1.vue',
+      code: `<template><div class="foo foo     bar"></div></template>`,
+      output: `<template><div class="foo     bar"></div></template>`,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          line: 1,
+          column: 22,
+          endLine: 1,
+          endColumn: 39
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-preserved-spaces-2.vue',
+      code: `<template><div class="foo bar    baz foo"></div></template>`,
+      output: `<template><div class="foo bar    baz"></div></template>`,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          line: 1,
+          column: 22,
+          endLine: 1,
+          endColumn: 42
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-preserved-spaces-3.vue',
+      code: `<template><div class="foo bar foo     baz"></div></template>`,
+      output: `<template><div class="foo bar     baz"></div></template>`,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          line: 1,
+          column: 22,
+          endLine: 1,
+          endColumn: 43
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-cross-attribute-string.vue',
+      code: `<template><div class="foo" :class="'foo'"></div></template>`,
+      output: null,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          line: 1,
+          column: 11,
+          endLine: 1,
+          endColumn: 43
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-cross-attribute-literal.vue',
+      code: '<template><div class="foo" :class="`foo`"></div></template>',
+      output: null,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          line: 1,
+          column: 11,
+          endLine: 1,
+          endColumn: 43
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-cross-attribute.vue',
+      code: `<template><div class="foo" :class="'foo bar'"></div></template>`,
+      output: null,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          line: 1,
+          column: 11,
+          endLine: 1,
+          endColumn: 47
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-cross-attribute-multiple-duplicates.vue',
+      code: `<template><div class="foo bar" :class="'foo bar'"></div></template>`,
+      output: null,
+      errors: [
+        {
+          message: "Duplicate class names 'foo', 'bar'.",
+          line: 1,
+          column: 11,
+          endLine: 1,
+          endColumn: 51
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-cross-attribute-array.vue',
+      code: `<template><div class="foo" :class="['foo', 'bar']"></div></template>`,
+      output: null,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          line: 1,
+          column: 11,
+          endLine: 1,
+          endColumn: 52
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-cross-attribute-object.vue',
+      code: `<template><div class="foo" :class="{ 'foo': true }"></div></template>`,
+      output: null,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          line: 1,
+          column: 11,
+          endLine: 1,
+          endColumn: 53
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-cross-attribute-mixed.vue',
+      code: `<template><div class="foo" :class="['foo', { 'bar': true }]"></div></template>`,
+      output: null,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          line: 1,
+          column: 11,
+          endLine: 1,
+          endColumn: 62
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-cross-attribute-binary.vue',
+      code: `<template><div class="foo" :class="'foo ' + 'bar'"></div></template>`,
+      output: null,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          line: 1,
+          column: 11,
+          endLine: 1,
+          endColumn: 52
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-cross-attribute-conditional.vue',
+      code: `<template><div class="foo" :class="isActive ? 'foo' : 'bar'"></div></template>`,
+      output: null,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          line: 1,
+          column: 11,
+          endLine: 1,
+          endColumn: 62
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-cross-node-array.vue',
+      code: `<template><div :class="['foo', 'foo']"></div></template>`,
+      output: null,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 38
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-cross-node-binary.vue',
+      code: `<template><div :class="'foo ' + 'foo'"></div></template>`,
+      output: null,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 38
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-cross-node-mixed.vue',
+      code: `<template><div :class="['foo', { 'foo': true }]"></div></template>`,
+      output: null,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 48
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-logical-expression-and.vue',
+      code: `<template><div :class="isActive && 'foo foo'"></div></template>`,
+      output: `<template><div :class="isActive && 'foo'"></div></template>`,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          line: 1,
+          column: 36,
+          endLine: 1,
+          endColumn: 45
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-logical-expression-or.vue',
+      code: `<template><div :class="isActive || 'foo foo'"></div></template>`,
+      output: `<template><div :class="isActive || 'foo'"></div></template>`,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          line: 1,
+          column: 36,
+          endLine: 1,
+          endColumn: 45
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-logical-expression-nullish-coalescing.vue',
+      code: `<template><div :class="isActive ?? 'foo foo'"></div></template>`,
+      output: `<template><div :class="isActive ?? 'foo'"></div></template>`,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          line: 1,
+          column: 36,
+          endLine: 1,
+          endColumn: 45
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-nested-logical-expression.vue',
+      code: `<template><div :class="isActive ?? isAnotherActive ?? 'foo foo'"></div></template>`,
+      output: `<template><div :class="isActive ?? isAnotherActive ?? 'foo'"></div></template>`,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          line: 1,
+          column: 55,
+          endLine: 1,
+          endColumn: 64
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-logical-expression-in-array.vue',
+      code: `<template><div :class="['foo', isActive ?? 'bar bar']"></div></template>`,
+      output: `<template><div :class="['foo', isActive ?? 'bar']"></div></template>`,
+      errors: [
+        {
+          message: "Duplicate class name 'bar'.",
+          line: 1,
+          column: 44,
+          endLine: 1,
+          endColumn: 53
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-logical-expression-in-conditional.vue',
+      code: `<template><div :class="isAnotherActive ? isActive ?? 'foo foo' : 'bar'"></div></template>`,
+      output: `<template><div :class="isAnotherActive ? isActive ?? 'foo' : 'bar'"></div></template>`,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          line: 1,
+          column: 54,
+          endLine: 1,
+          endColumn: 63
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-binary-in-logical-expression.vue',
+      code: `<template><div :class="isActive && 'bar' + ' bar'"></div></template>`,
+      output: null,
+      errors: [
+        {
+          message: "Duplicate class name 'bar'.",
+          type: 'BinaryExpression',
+          line: 1,
+          column: 36,
+          endLine: 1,
+          endColumn: 50
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-template-literal-in-logical-expression.vue',
+      code: '<template><div :class="isActive && `foo ${bar} foo`"></div></template>',
+      output: null,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          type: 'TemplateLiteral',
+          line: 1,
+          column: 36,
+          endLine: 1,
+          endColumn: 52
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/no-empty-component-block.js b/tests/lib/rules/no-empty-component-block.js
index 8ba6a2f2c..87ad2dd66 100644
--- a/tests/lib/rules/no-empty-component-block.js
+++ b/tests/lib/rules/no-empty-component-block.js
@@ -3,12 +3,11 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-empty-component-block')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2018 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2018 }
 })
 
 tester.run('no-empty-component-block', rule, {
@@ -28,117 +27,310 @@ tester.run('no-empty-component-block', rule, {
   invalid: [
     {
       code: `<template></template>`,
+      output: '',
       errors: [
         {
-          message: '`<template>` is empty. Empty block is not allowed.'
+          message: '`<template>` is empty. Empty block is not allowed.',
+          line: 1,
+          column: 1,
+          endLine: 1,
+          endColumn: 22
         }
       ]
     },
     {
       code: `<template> </template>`,
+      output: '',
       errors: [
         {
-          message: '`<template>` is empty. Empty block is not allowed.'
+          message: '`<template>` is empty. Empty block is not allowed.',
+          line: 1,
+          column: 1,
+          endLine: 1,
+          endColumn: 23
         }
       ]
     },
     {
       code: `<template>
 </template>`,
+      output: '',
       errors: [
         {
-          message: '`<template>` is empty. Empty block is not allowed.'
+          message: '`<template>` is empty. Empty block is not allowed.',
+          line: 1,
+          column: 1,
+          endLine: 2,
+          endColumn: 12
         }
       ]
     },
     {
       code: '<template />',
+      output: '',
       errors: [
         {
-          message: '`<template>` is empty. Empty block is not allowed.'
+          message: '`<template>` is empty. Empty block is not allowed.',
+          line: 1,
+          column: 1,
+          endLine: 1,
+          endColumn: 13
         }
       ]
     },
     {
       code: '<template src="" />',
+      output: '',
       errors: [
         {
-          message: '`<template>` is empty. Empty block is not allowed.'
+          message: '`<template>` is empty. Empty block is not allowed.',
+          line: 1,
+          column: 1,
+          endLine: 1,
+          endColumn: 20
         }
       ]
     },
     {
       code: '<template></template><script></script>',
+      output: '<script></script>',
       errors: [
         {
-          message: '`<template>` is empty. Empty block is not allowed.'
+          message: '`<template>` is empty. Empty block is not allowed.',
+          line: 1,
+          column: 1,
+          endLine: 1,
+          endColumn: 22
         },
         {
-          message: '`<script>` is empty. Empty block is not allowed.'
+          message: '`<script>` is empty. Empty block is not allowed.',
+          line: 1,
+          column: 22,
+          endLine: 1,
+          endColumn: 39
         }
       ]
     },
     {
       code: '<template /><script />',
+      output: '<script />',
       errors: [
         {
-          message: '`<template>` is empty. Empty block is not allowed.'
+          message: '`<template>` is empty. Empty block is not allowed.',
+          line: 1,
+          column: 1,
+          endLine: 1,
+          endColumn: 13
         },
         {
-          message: '`<script>` is empty. Empty block is not allowed.'
+          message: '`<script>` is empty. Empty block is not allowed.',
+          line: 1,
+          column: 13,
+          endLine: 1,
+          endColumn: 23
         }
       ]
     },
     {
       code: '<template src="" /><script src="" />',
+      output: '<script src="" />',
       errors: [
         {
-          message: '`<template>` is empty. Empty block is not allowed.'
+          message: '`<template>` is empty. Empty block is not allowed.',
+          line: 1,
+          column: 1,
+          endLine: 1,
+          endColumn: 20
         },
         {
-          message: '`<script>` is empty. Empty block is not allowed.'
+          message: '`<script>` is empty. Empty block is not allowed.',
+          line: 1,
+          column: 20,
+          endLine: 1,
+          endColumn: 37
         }
       ]
     },
     {
       code: '<template></template><script></script><style></style>',
+      output: '<script></script>',
       errors: [
         {
-          message: '`<template>` is empty. Empty block is not allowed.'
+          message: '`<template>` is empty. Empty block is not allowed.',
+          line: 1,
+          column: 1,
+          endLine: 1,
+          endColumn: 22
         },
         {
-          message: '`<script>` is empty. Empty block is not allowed.'
+          message: '`<script>` is empty. Empty block is not allowed.',
+          line: 1,
+          column: 22,
+          endLine: 1,
+          endColumn: 39
         },
         {
-          message: '`<style>` is empty. Empty block is not allowed.'
+          message: '`<style>` is empty. Empty block is not allowed.',
+          line: 1,
+          column: 39,
+          endLine: 1,
+          endColumn: 54
         }
       ]
     },
     {
       code: '<template /><script /><style />',
+      output: '<script />',
       errors: [
         {
-          message: '`<template>` is empty. Empty block is not allowed.'
+          message: '`<template>` is empty. Empty block is not allowed.',
+          line: 1,
+          column: 1,
+          endLine: 1,
+          endColumn: 13
         },
         {
-          message: '`<script>` is empty. Empty block is not allowed.'
+          message: '`<script>` is empty. Empty block is not allowed.',
+          line: 1,
+          column: 13,
+          endLine: 1,
+          endColumn: 23
         },
         {
-          message: '`<style>` is empty. Empty block is not allowed.'
+          message: '`<style>` is empty. Empty block is not allowed.',
+          line: 1,
+          column: 23,
+          endLine: 1,
+          endColumn: 32
         }
       ]
     },
     {
       code: '<template src="" /><script src="" /><style src="" />',
+      output: '<script src="" />',
       errors: [
         {
-          message: '`<template>` is empty. Empty block is not allowed.'
+          message: '`<template>` is empty. Empty block is not allowed.',
+          line: 1,
+          column: 1,
+          endLine: 1,
+          endColumn: 20
         },
         {
-          message: '`<script>` is empty. Empty block is not allowed.'
+          message: '`<script>` is empty. Empty block is not allowed.',
+          line: 1,
+          column: 20,
+          endLine: 1,
+          endColumn: 37
         },
         {
-          message: '`<style>` is empty. Empty block is not allowed.'
+          message: '`<style>` is empty. Empty block is not allowed.',
+          line: 1,
+          column: 37,
+          endLine: 1,
+          endColumn: 53
+        }
+      ]
+    },
+    // auto fix with whitespace
+    {
+      code: '<template></template> <script></script> <style></style>',
+      output: '  ',
+      errors: [
+        {
+          message: '`<template>` is empty. Empty block is not allowed.',
+          line: 1,
+          column: 1,
+          endLine: 1,
+          endColumn: 22
+        },
+        {
+          message: '`<script>` is empty. Empty block is not allowed.',
+          line: 1,
+          column: 23,
+          endLine: 1,
+          endColumn: 40
+        },
+        {
+          message: '`<style>` is empty. Empty block is not allowed.',
+          line: 1,
+          column: 41,
+          endLine: 1,
+          endColumn: 56
+        }
+      ]
+    },
+    {
+      code: '<template /> <script /> <style />',
+      output: '  ',
+      errors: [
+        {
+          message: '`<template>` is empty. Empty block is not allowed.',
+          line: 1,
+          column: 1,
+          endLine: 1,
+          endColumn: 13
+        },
+        {
+          message: '`<script>` is empty. Empty block is not allowed.',
+          line: 1,
+          column: 14,
+          endLine: 1,
+          endColumn: 24
+        },
+        {
+          message: '`<style>` is empty. Empty block is not allowed.',
+          line: 1,
+          column: 25,
+          endLine: 1,
+          endColumn: 34
+        }
+      ]
+    },
+    {
+      code: '<template src="" /> <script src="" /> <style src="" />',
+      output: '  ',
+      errors: [
+        {
+          message: '`<template>` is empty. Empty block is not allowed.',
+          line: 1,
+          column: 1,
+          endLine: 1,
+          endColumn: 20
+        },
+        {
+          message: '`<script>` is empty. Empty block is not allowed.',
+          line: 1,
+          column: 21,
+          endLine: 1,
+          endColumn: 38
+        },
+        {
+          message: '`<style>` is empty. Empty block is not allowed.',
+          line: 1,
+          column: 39,
+          endLine: 1,
+          endColumn: 55
+        }
+      ]
+    },
+    {
+      code: '<template><p></p></template> <script src="" /> <style src="" />',
+      output: '<template><p></p></template>  ',
+      errors: [
+        {
+          message: '`<script>` is empty. Empty block is not allowed.',
+          line: 1,
+          column: 30,
+          endLine: 1,
+          endColumn: 47
+        },
+        {
+          message: '`<style>` is empty. Empty block is not allowed.',
+          line: 1,
+          column: 48,
+          endLine: 1,
+          endColumn: 64
         }
       ]
     }
diff --git a/tests/lib/rules/no-empty-pattern.js b/tests/lib/rules/no-empty-pattern.js
index b3747965e..ea4a53790 100644
--- a/tests/lib/rules/no-empty-pattern.js
+++ b/tests/lib/rules/no-empty-pattern.js
@@ -3,12 +3,11 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-empty-pattern')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2018 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2018 }
 })
 
 tester.run('no-empty-pattern', rule, {
@@ -63,19 +62,31 @@ tester.run('no-empty-pattern', rule, {
       errors: [
         {
           message: 'Unexpected empty object pattern.',
-          line: 5
+          line: 5,
+          column: 17,
+          endLine: 5,
+          endColumn: 19
         },
         {
           message: 'Unexpected empty array pattern.',
-          line: 6
+          line: 6,
+          column: 17,
+          endLine: 6,
+          endColumn: 19
         },
         {
           message: 'Unexpected empty object pattern.',
-          line: 7
+          line: 7,
+          column: 21,
+          endLine: 7,
+          endColumn: 23
         },
         {
           message: 'Unexpected empty array pattern.',
-          line: 8
+          line: 8,
+          column: 21,
+          endLine: 8,
+          endColumn: 23
         }
       ]
     },
@@ -89,7 +100,10 @@ tester.run('no-empty-pattern', rule, {
       errors: [
         {
           message: 'Unexpected empty object pattern.',
-          line: 4
+          line: 4,
+          column: 33,
+          endLine: 4,
+          endColumn: 35
         }
       ]
     },
@@ -103,7 +117,10 @@ tester.run('no-empty-pattern', rule, {
       errors: [
         {
           message: 'Unexpected empty array pattern.',
-          line: 4
+          line: 4,
+          column: 33,
+          endLine: 4,
+          endColumn: 35
         }
       ]
     },
@@ -117,7 +134,10 @@ tester.run('no-empty-pattern', rule, {
       errors: [
         {
           message: 'Unexpected empty object pattern.',
-          line: 4
+          line: 4,
+          column: 37,
+          endLine: 4,
+          endColumn: 39
         }
       ]
     },
@@ -131,7 +151,10 @@ tester.run('no-empty-pattern', rule, {
       errors: [
         {
           message: 'Unexpected empty array pattern.',
-          line: 4
+          line: 4,
+          column: 37,
+          endLine: 4,
+          endColumn: 39
         }
       ]
     },
@@ -145,7 +168,10 @@ tester.run('no-empty-pattern', rule, {
       errors: [
         {
           message: 'Unexpected empty object pattern.',
-          line: 4
+          line: 4,
+          column: 21,
+          endLine: 4,
+          endColumn: 23
         }
       ]
     },
@@ -159,7 +185,10 @@ tester.run('no-empty-pattern', rule, {
       errors: [
         {
           message: 'Unexpected empty array pattern.',
-          line: 4
+          line: 4,
+          column: 21,
+          endLine: 4,
+          endColumn: 23
         }
       ]
     },
@@ -173,7 +202,10 @@ tester.run('no-empty-pattern', rule, {
       errors: [
         {
           message: 'Unexpected empty object pattern.',
-          line: 4
+          line: 4,
+          column: 25,
+          endLine: 4,
+          endColumn: 27
         }
       ]
     },
@@ -187,7 +219,10 @@ tester.run('no-empty-pattern', rule, {
       errors: [
         {
           message: 'Unexpected empty array pattern.',
-          line: 4
+          line: 4,
+          column: 25,
+          endLine: 4,
+          endColumn: 27
         }
       ]
     },
@@ -201,7 +236,10 @@ tester.run('no-empty-pattern', rule, {
       errors: [
         {
           message: 'Unexpected empty object pattern.',
-          line: 4
+          line: 4,
+          column: 23,
+          endLine: 4,
+          endColumn: 25
         }
       ]
     },
@@ -215,7 +253,10 @@ tester.run('no-empty-pattern', rule, {
       errors: [
         {
           message: 'Unexpected empty array pattern.',
-          line: 4
+          line: 4,
+          column: 23,
+          endLine: 4,
+          endColumn: 25
         }
       ]
     },
@@ -229,7 +270,10 @@ tester.run('no-empty-pattern', rule, {
       errors: [
         {
           message: 'Unexpected empty object pattern.',
-          line: 4
+          line: 4,
+          column: 27,
+          endLine: 4,
+          endColumn: 29
         }
       ]
     },
@@ -243,7 +287,10 @@ tester.run('no-empty-pattern', rule, {
       errors: [
         {
           message: 'Unexpected empty array pattern.',
-          line: 4
+          line: 4,
+          column: 27,
+          endLine: 4,
+          endColumn: 29
         }
       ]
     }
diff --git a/tests/lib/rules/no-export-in-script-setup.js b/tests/lib/rules/no-export-in-script-setup.js
index 3ea915401..e678d5f99 100644
--- a/tests/lib/rules/no-export-in-script-setup.js
+++ b/tests/lib/rules/no-export-in-script-setup.js
@@ -4,27 +4,19 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const semver = require('semver')
-const eslint = require('eslint')
+const eslint = require('../../eslint-compat')
 const rule = require('../../../lib/rules/no-export-in-script-setup')
 
 const RuleTester = eslint.RuleTester
 const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
     ecmaVersion: 6,
     sourceType: 'module'
   }
 })
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 ruleTester.run('no-export-in-script-setup', rule, {
   valid: [
     {
@@ -50,11 +42,10 @@ ruleTester.run('no-export-in-script-setup', rule, {
       </script>
       `
     },
-    ...(semver.gte(
-      require('@typescript-eslint/parser/package.json').version,
-      '5.4.0'
-    ) &&
-    semver.satisfies(require('typescript/package.json').version, '>=4.5.0-0')
+    ...(semver.satisfies(
+      require('typescript/package.json').version,
+      '>=4.5.0-0'
+    )
       ? [
           {
             filename: 'test.vue',
@@ -65,9 +56,11 @@ ruleTester.run('no-export-in-script-setup', rule, {
             export interface Bar {}
             </script>
             `,
-            parser: require.resolve('vue-eslint-parser'),
-            parserOptions: {
-              parser: require.resolve('@typescript-eslint/parser')
+            languageOptions: {
+              parser: require('vue-eslint-parser'),
+              parserOptions: {
+                parser: require.resolve('@typescript-eslint/parser')
+              }
             }
           }
         ]
@@ -80,9 +73,11 @@ ruleTester.run('no-export-in-script-setup', rule, {
             export interface Bar {}
             </script>
             `,
-            parser: require.resolve('vue-eslint-parser'),
-            parserOptions: {
-              parser: require.resolve('@typescript-eslint/parser')
+            languageOptions: {
+              parser: require('vue-eslint-parser'),
+              parserOptions: {
+                parser: require.resolve('@typescript-eslint/parser')
+              }
             }
           }
         ])
@@ -96,20 +91,62 @@ ruleTester.run('no-export-in-script-setup', rule, {
       export * from 'foo'
       export default {}
       export class A {}
+      export const test = '123'
+      export function foo() {}
+      const a = 1
+      export { a }
+      export { fao } from 'bar'
       </script>
       `,
       errors: [
         {
           message: '`<script setup>` cannot contain ES module exports.',
-          line: 3
+          line: 3,
+          endLine: 3,
+          column: 7,
+          endColumn: 26
+        },
+        {
+          message: '`<script setup>` cannot contain ES module exports.',
+          line: 4,
+          endLine: 4,
+          column: 7,
+          endColumn: 24
+        },
+        {
+          message: '`<script setup>` cannot contain ES module exports.',
+          line: 5,
+          endLine: 5,
+          column: 7,
+          endColumn: 13
         },
         {
           message: '`<script setup>` cannot contain ES module exports.',
-          line: 4
+          line: 6,
+          endLine: 6,
+          column: 7,
+          endColumn: 13
         },
         {
           message: '`<script setup>` cannot contain ES module exports.',
-          line: 5
+          line: 7,
+          endLine: 7,
+          column: 7,
+          endColumn: 13
+        },
+        {
+          message: '`<script setup>` cannot contain ES module exports.',
+          line: 9,
+          endLine: 9,
+          column: 7,
+          endColumn: 19
+        },
+        {
+          message: '`<script setup>` cannot contain ES module exports.',
+          line: 10,
+          endLine: 10,
+          column: 7,
+          endColumn: 32
         }
       ]
     },
@@ -128,15 +165,24 @@ ruleTester.run('no-export-in-script-setup', rule, {
       errors: [
         {
           message: '`<script setup>` cannot contain ES module exports.',
-          line: 6
+          line: 6,
+          endLine: 6,
+          column: 7,
+          endColumn: 26
         },
         {
           message: '`<script setup>` cannot contain ES module exports.',
-          line: 7
+          line: 7,
+          endLine: 7,
+          column: 7,
+          endColumn: 24
         },
         {
           message: '`<script setup>` cannot contain ES module exports.',
-          line: 8
+          line: 8,
+          endLine: 8,
+          column: 7,
+          endColumn: 13
         }
       ]
     },
@@ -149,22 +195,33 @@ ruleTester.run('no-export-in-script-setup', rule, {
       export {}
       </script>
       `,
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions: {
-        parser: require.resolve('@typescript-eslint/parser')
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
       },
       errors: [
         {
           message: '`<script setup>` cannot contain ES module exports.',
-          line: 3
+          line: 3,
+          endLine: 3,
+          column: 7,
+          endColumn: 13
         },
         {
           message: '`<script setup>` cannot contain ES module exports.',
-          line: 4
+          line: 4,
+          endLine: 4,
+          column: 7,
+          endColumn: 13
         },
         {
           message: '`<script setup>` cannot contain ES module exports.',
-          line: 5
+          line: 5,
+          endLine: 5,
+          column: 7,
+          endColumn: 16
         }
       ]
     }
diff --git a/tests/lib/rules/no-expose-after-await.js b/tests/lib/rules/no-expose-after-await.js
index cc10befa4..4f57d882e 100644
--- a/tests/lib/rules/no-expose-after-await.js
+++ b/tests/lib/rules/no-expose-after-await.js
@@ -4,12 +4,12 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-expose-after-await')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
     ecmaVersion: 2020,
     sourceType: 'module'
   }
@@ -103,7 +103,7 @@ tester.run('no-expose-after-await', rule, {
       await doSomething()
       </script>
       `,
-      parserOptions: { ecmaVersion: 2022 }
+      languageOptions: { ecmaVersion: 2022 }
     },
     {
       filename: 'test.vue',
@@ -116,7 +116,7 @@ tester.run('no-expose-after-await', rule, {
       function defineExpose() {}
       </script>
       `,
-      parserOptions: { ecmaVersion: 2022 }
+      languageOptions: { ecmaVersion: 2022 }
     },
     {
       filename: 'test.vue',
@@ -127,7 +127,7 @@ tester.run('no-expose-after-await', rule, {
       onMounted(() => {})
       </script>
       `,
-      parserOptions: { ecmaVersion: 2022 }
+      languageOptions: { ecmaVersion: 2022 }
     }
   ],
   invalid: [
@@ -147,7 +147,9 @@ tester.run('no-expose-after-await', rule, {
         {
           message: '`expose` is forbidden after an `await` expression.',
           line: 6,
-          column: 11
+          column: 11,
+          endLine: 6,
+          endColumn: 32
         }
       ]
     },
@@ -167,7 +169,9 @@ tester.run('no-expose-after-await', rule, {
         {
           message: '`expose` is forbidden after an `await` expression.',
           line: 6,
-          column: 11
+          column: 11,
+          endLine: 6,
+          endColumn: 36
         }
       ]
     },
@@ -179,12 +183,14 @@ tester.run('no-expose-after-await', rule, {
       defineExpose({ /* ... */ })
       </script>
       `,
-      parserOptions: { ecmaVersion: 2022 },
+      languageOptions: { ecmaVersion: 2022 },
       errors: [
         {
           message: '`defineExpose` is forbidden after an `await` expression.',
           line: 4,
-          column: 7
+          column: 7,
+          endLine: 4,
+          endColumn: 34
         }
       ]
     }
diff --git a/tests/lib/rules/no-extra-parens.js b/tests/lib/rules/no-extra-parens.js
index 0cf6d702c..680ecd25c 100644
--- a/tests/lib/rules/no-extra-parens.js
+++ b/tests/lib/rules/no-extra-parens.js
@@ -3,12 +3,11 @@
  */
 'use strict'
 
-const { RuleTester } = require('eslint')
+const { RuleTester } = require('../../eslint-compat')
 const rule = require('../../../lib/rules/no-extra-parens')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('no-extra-parens', rule, {
@@ -75,11 +74,17 @@ tester.run('no-extra-parens', rule, {
       errors: [
         {
           messageId: 'unexpected',
-          line: 4
+          line: 4,
+          column: 27,
+          endLine: 4,
+          endColumn: 28
         },
         {
           messageId: 'unexpected',
-          line: 5
+          line: 5,
+          column: 28,
+          endLine: 5,
+          endColumn: 29
         }
       ]
     },
@@ -89,7 +94,7 @@ tester.run('no-extra-parens', rule, {
         <button
           :class="{
             a: (b || c),
-            // [(d + e)]: f // valid in eslint v6.0
+            [(d + e)]: f
           }"
         />
       </template>`,
@@ -98,20 +103,22 @@ tester.run('no-extra-parens', rule, {
         <button
           :class="{
             a: b || c,
-            // [(d + e)]: f // valid in eslint v6.0
+            [d + e]: f
           }"
         />
       </template>`,
       errors: [
         {
           messageId: 'unexpected',
-          line: 5
+          line: 5,
+          column: 16,
+          endLine: 5,
+          endColumn: 17
+        },
+        {
+          messageId: 'unexpected',
+          line: 6
         }
-        // valid in eslint v6.0
-        // {
-        //   messageId: 'unexpected',
-        //   line: 6
-        // }
       ]
     },
     {
@@ -130,7 +137,10 @@ tester.run('no-extra-parens', rule, {
       errors: [
         {
           messageId: 'unexpected',
-          line: 4
+          line: 4,
+          column: 19,
+          endLine: 4,
+          endColumn: 20
         }
       ]
     },
@@ -140,19 +150,38 @@ tester.run('no-extra-parens', rule, {
       errors: [
         {
           messageId: 'unexpected',
-          column: 27
+          column: 27,
+          line: 1,
+          endLine: 1,
+          endColumn: 28
         }
       ]
     },
     {
       code: '<template><button :class="(a+b) | filter" /></template>',
       output: '<template><button :class="a+b | filter" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 27,
+          endLine: 1,
+          endColumn: 28
+        }
+      ]
     },
     {
       code: '<template><button :class="((a+b | bitwise))" /></template>',
       output: '<template><button :class="(a+b | bitwise)" /></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 28,
+          endLine: 1,
+          endColumn: 29
+        }
+      ]
     },
     {
       code: '<template><button>{{ (foo + bar) }}</button></template>',
@@ -160,51 +189,118 @@ tester.run('no-extra-parens', rule, {
       errors: [
         {
           messageId: 'unexpected',
-          column: 22
+          column: 22,
+          line: 1,
+          endLine: 1,
+          endColumn: 23
         }
       ]
     },
     {
       code: '<template><button>{{ (foo + bar) | filter }}</button></template>',
       output: '<template><button>{{ foo + bar | filter }}</button></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 22,
+          endLine: 1,
+          endColumn: 23
+        }
+      ]
     },
     {
       code: '<template><button>{{ ((foo + bar | bitwise)) }}</button></template>',
       output:
         '<template><button>{{ (foo + bar | bitwise) }}</button></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 23,
+          endLine: 1,
+          endColumn: 24
+        }
+      ]
     },
     {
       code: '<template><button>{{ ((foo | bitwise)) | filter }}</button></template>',
       output:
         '<template><button>{{ (foo | bitwise) | filter }}</button></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 23,
+          endLine: 1,
+          endColumn: 24
+        }
+      ]
     },
     {
       code: '<template><button>{{ (foo(bar|bitwise)) }}</button></template>',
       output: '<template><button>{{ foo(bar|bitwise) }}</button></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 22,
+          endLine: 1,
+          endColumn: 23
+        }
+      ]
     },
     {
       code: '<template><button>{{ ([foo|bitwise]) }}</button></template>',
       output: '<template><button>{{ [foo|bitwise] }}</button></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 22,
+          endLine: 1,
+          endColumn: 23
+        }
+      ]
     },
     {
       code: '<template><button>{{ ({foo:bar|bitwise}) }}</button></template>',
       output: '<template><button>{{ {foo:bar|bitwise} }}</button></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 22,
+          endLine: 1,
+          endColumn: 23
+        }
+      ]
     },
     {
       code: '<template><button>{{ ((function () {} ())) }}</button></template>',
       output: '<template><button>{{ (function () {} ()) }}</button></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 23,
+          endLine: 1,
+          endColumn: 24
+        }
+      ]
     },
     {
       code: '<template><button>{{ ((function () {})()) }}</button></template>',
       output: '<template><button>{{ (function () {})() }}</button></template>',
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 1,
+          column: 22,
+          endLine: 1,
+          endColumn: 23
+        }
+      ]
     },
     // CSS vars injection
     {
@@ -220,7 +316,15 @@ tester.run('no-extra-parens', rule, {
         color: v-bind('a')
       }
       </style>`,
-      errors: [{ messageId: 'unexpected' }]
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 4,
+          column: 24,
+          endLine: 4,
+          endColumn: 25
+        }
+      ]
     }
   ]
 })
diff --git a/tests/lib/rules/no-implicit-coercion.js b/tests/lib/rules/no-implicit-coercion.js
new file mode 100644
index 000000000..78e8ac91e
--- /dev/null
+++ b/tests/lib/rules/no-implicit-coercion.js
@@ -0,0 +1,270 @@
+/**
+ * @author lozinsky <https://github.com/lozinsky>
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const { RuleTester, ESLint } = require('../../eslint-compat')
+const semver = require('semver')
+const rule = require('../../../lib/rules/no-implicit-coercion')
+
+/**
+ * @param {string} suggestedCode
+ * @returns {string}
+ */
+function getExpectedErrorMessage(suggestedCode) {
+  return semver.gte(ESLint.version, '9.0.0')
+    ? `Unexpected implicit coercion encountered. Use \`${suggestedCode}\` instead.`
+    : `use \`${suggestedCode}\` instead.`
+}
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('no-implicit-coercion', rule, {
+  valid: [
+    `<template><div :data-foo="Boolean(foo)" /></template>`,
+    `<template><div :data-foo="foo.indexOf('.') !== -1" /></template>`,
+    {
+      filename: 'test.vue',
+      code: `<template><div :data-foo="!!foo" /></template>`,
+      options: [
+        {
+          boolean: false
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template><div :data-foo="~foo.indexOf('.')" /></template>`,
+      options: [
+        {
+          boolean: false
+        }
+      ]
+    },
+    `<template><div :data-foo="Number(foo)" /></template>`,
+    `<template><div :data-foo="foo * 1/4" /></template>`,
+    {
+      filename: 'test.vue',
+      code: `<template><div :data-foo="+foo" /></template>`,
+      options: [
+        {
+          number: false
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template><div :data-foo="1 * foo" /></template>`,
+      options: [
+        {
+          number: false
+        }
+      ]
+    },
+    `<template><div :data-foo="String(foo)" /></template>`,
+    `<template><div :data-foo="\`\${foo}\`" /></template>`,
+    {
+      filename: 'test.vue',
+      code: `<template><div :data-foo="'' + foo" /></template>`,
+      options: [
+        {
+          string: false
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template><div :data-foo="\`\` + foo" /></template>`,
+      options: [
+        {
+          string: false
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template><div :data-foo="!!foo" /></template>`,
+      options: [
+        {
+          allow: ['!!']
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template><div :data-foo="~foo.indexOf('.')" /></template>`,
+      options: [
+        {
+          allow: ['~']
+        }
+      ]
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `<template><div :data-foo="!!foo" /></template>`,
+      output: `<template><div :data-foo="Boolean(foo)" /></template>`,
+      errors: [
+        {
+          message: getExpectedErrorMessage('Boolean(foo)'),
+          line: 1,
+          column: 27,
+          endLine: 1,
+          endColumn: 32
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template><div :data-foo="~foo.indexOf('.')" /></template>`,
+      output: null,
+      errors: [
+        {
+          message: getExpectedErrorMessage("foo.indexOf('.') !== -1"),
+          line: 1,
+          column: 27,
+          endLine: 1,
+          endColumn: 44
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template><div :data-foo="+foo" /></template>`,
+      output: semver.gte(ESLint.version, '9.0.0')
+        ? null
+        : `<template><div :data-foo="Number(foo)" /></template>`,
+      errors: [
+        {
+          message: getExpectedErrorMessage('Number(foo)'),
+          line: 1,
+          column: 27,
+          endLine: 1,
+          endColumn: 31,
+          suggestions: semver.gte(ESLint.version, '9.0.0')
+            ? [
+                {
+                  messageId: 'useRecommendation',
+                  data: { recommendation: 'Number(foo)' },
+                  output: '<template><div :data-foo="Number(foo)" /></template>'
+                }
+              ]
+            : []
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template><div :data-foo="1 * foo" /></template>`,
+      output: semver.gte(ESLint.version, '9.0.0')
+        ? null
+        : `<template><div :data-foo="Number(foo)" /></template>`,
+      errors: [
+        {
+          message: getExpectedErrorMessage('Number(foo)'),
+          line: 1,
+          column: 27,
+          endLine: 1,
+          endColumn: 34,
+          suggestions: semver.gte(ESLint.version, '9.0.0')
+            ? [
+                {
+                  messageId: 'useRecommendation',
+                  data: { recommendation: 'Number(foo)' },
+                  output: '<template><div :data-foo="Number(foo)" /></template>'
+                }
+              ]
+            : []
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template><div :data-foo="'' + foo" /></template>`,
+      output: semver.gte(ESLint.version, '9.0.0')
+        ? null
+        : `<template><div :data-foo="String(foo)" /></template>`,
+      errors: [
+        {
+          message: getExpectedErrorMessage('String(foo)'),
+          line: 1,
+          column: 27,
+          endLine: 1,
+          endColumn: 35,
+          suggestions: semver.gte(ESLint.version, '9.0.0')
+            ? [
+                {
+                  messageId: 'useRecommendation',
+                  data: { recommendation: 'String(foo)' },
+                  output: '<template><div :data-foo="String(foo)" /></template>'
+                }
+              ]
+            : []
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template><div :data-foo="\`\` + foo" /></template>`,
+      output: semver.gte(ESLint.version, '9.0.0')
+        ? null
+        : `<template><div :data-foo="String(foo)" /></template>`,
+      errors: [
+        {
+          message: getExpectedErrorMessage('String(foo)'),
+          line: 1,
+          column: 27,
+          endLine: 1,
+          endColumn: 35,
+          suggestions: semver.gte(ESLint.version, '9.0.0')
+            ? [
+                {
+                  messageId: 'useRecommendation',
+                  data: { recommendation: 'String(foo)' },
+                  output: '<template><div :data-foo="String(foo)" /></template>'
+                }
+              ]
+            : []
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template><div :data-foo="\`\${foo}\`" /></template>`,
+      output: semver.gte(ESLint.version, '9.0.0')
+        ? null
+        : `<template><div :data-foo="String(foo)" /></template>`,
+      options: [
+        {
+          disallowTemplateShorthand: true
+        }
+      ],
+      errors: [
+        {
+          message: getExpectedErrorMessage('String(foo)'),
+          line: 1,
+          column: 27,
+          endLine: 1,
+          endColumn: 35,
+          suggestions: semver.gte(ESLint.version, '9.0.0')
+            ? [
+                {
+                  messageId: 'useRecommendation',
+                  data: { recommendation: 'String(foo)' },
+                  output: '<template><div :data-foo="String(foo)" /></template>'
+                }
+              ]
+            : []
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/no-import-compiler-macros.js b/tests/lib/rules/no-import-compiler-macros.js
new file mode 100644
index 000000000..96d7a61db
--- /dev/null
+++ b/tests/lib/rules/no-import-compiler-macros.js
@@ -0,0 +1,267 @@
+/**
+ * @author Wayne Zhang
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/no-import-compiler-macros')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('no-import-compiler-macros', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      import { ref, computed } from 'vue'
+      import { someFunction } from '@vue/runtime-core'
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { defineProps } from 'some-other-package'
+      </script>
+      `
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      import { defineProps } from 'vue'
+      </script>
+      `,
+      output: `
+      <script setup>
+      
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'noImportCompilerMacros',
+          data: {
+            name: 'defineProps'
+          },
+          line: 3,
+          column: 16,
+          endLine: 3,
+          endColumn: 27
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      import {
+        ref,
+        defineProps
+      } from 'vue'
+      </script>
+      `,
+      output: `
+      <script setup>
+      import {
+        ref
+      } from 'vue'
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'noImportCompilerMacros',
+          data: {
+            name: 'defineProps'
+          },
+          line: 5,
+          column: 9,
+          endLine: 5,
+          endColumn: 20
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      import { ref, defineProps } from 'vue'
+      import { defineEmits, computed } from '@vue/runtime-core'
+      import { defineExpose, watch, withDefaults } from '@vue/runtime-dom'
+      </script>
+      `,
+      output: `
+      <script setup>
+      import { ref } from 'vue'
+      import {  computed } from '@vue/runtime-core'
+      import {  watch } from '@vue/runtime-dom'
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'noImportCompilerMacros',
+          data: {
+            name: 'defineProps'
+          },
+          line: 3,
+          column: 21,
+          endLine: 3,
+          endColumn: 32
+        },
+        {
+          messageId: 'noImportCompilerMacros',
+          data: {
+            name: 'defineEmits'
+          },
+          line: 4,
+          column: 16,
+          endLine: 4,
+          endColumn: 27
+        },
+        {
+          messageId: 'noImportCompilerMacros',
+          data: {
+            name: 'defineExpose'
+          },
+          line: 5,
+          column: 16,
+          endLine: 5,
+          endColumn: 28
+        },
+        {
+          messageId: 'noImportCompilerMacros',
+          data: {
+            name: 'withDefaults'
+          },
+          line: 5,
+          column: 37,
+          endLine: 5,
+          endColumn: 49
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      import { defineModel, defineOptions } from 'vue'
+      </script>
+      `,
+      output: `
+      <script setup>
+      import {  defineOptions } from 'vue'
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'noImportCompilerMacros',
+          data: {
+            name: 'defineModel'
+          },
+          line: 3,
+          column: 16,
+          endLine: 3,
+          endColumn: 27
+        },
+        {
+          messageId: 'noImportCompilerMacros',
+          data: {
+            name: 'defineOptions'
+          },
+          line: 3,
+          column: 29,
+          endLine: 3,
+          endColumn: 42
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      import { ref as refFoo, defineSlots as defineSlotsFoo, type computed } from '@vue/runtime-core'
+      </script>
+      `,
+      output: `
+      <script setup lang="ts">
+      import { ref as refFoo,  type computed } from '@vue/runtime-core'
+      </script>
+      `,
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          messageId: 'noImportCompilerMacros',
+          data: {
+            name: 'defineSlots'
+          },
+          line: 3,
+          column: 31,
+          endLine: 3,
+          endColumn: 60
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      // not in <script setup>
+      import { defineProps } from 'vue'
+      </script>
+      `,
+      output: `
+      <script>
+      // not in <script setup>
+      
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'onlyValidInScriptSetup',
+          data: {
+            name: 'defineProps'
+          },
+          line: 4,
+          column: 16,
+          endLine: 4,
+          endColumn: 27
+        }
+      ]
+    },
+    {
+      filename: 'test.ts',
+      code: `
+      import { defineProps } from 'vue'
+      `,
+      output: `
+      
+      `,
+      errors: [
+        {
+          messageId: 'onlyValidInScriptSetup',
+          data: {
+            name: 'defineProps'
+          },
+          line: 2,
+          column: 16,
+          endLine: 2,
+          endColumn: 27
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/no-invalid-model-keys.js b/tests/lib/rules/no-invalid-model-keys.js
deleted file mode 100644
index ebe4de973..000000000
--- a/tests/lib/rules/no-invalid-model-keys.js
+++ /dev/null
@@ -1,151 +0,0 @@
-/**
- * @fileoverview Prevents invalid keys in model option.
- * @author Alex Sokolov
- */
-'use strict'
-
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const rule = require('../../../lib/rules/no-invalid-model-keys')
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
-const ruleTester = new RuleTester({
-  parserOptions: {
-    ecmaVersion: 2018,
-    sourceType: 'module'
-  }
-})
-ruleTester.run('no-invalid-model-keys', rule, {
-  valid: [
-    {
-      filename: 'test.vue',
-      code: `
-        export default {
-          model: {
-            prop: 'list'
-          }
-        }
-      `
-    },
-    {
-      filename: 'test.vue',
-      code: `
-        export default {
-          model: {
-            event: 'update'
-          }
-        }
-      `
-    },
-    {
-      filename: 'test.vue',
-      code: `
-        export default {
-          model: {
-            prop: 'list',
-            event: 'update'
-          }
-        }
-      `
-    }
-  ],
-
-  invalid: [
-    {
-      filename: 'test.vue',
-      code: `
-        export default {
-          model: {
-            props: 'list'
-          }
-        }
-      `,
-      errors: ["Invalid key 'props' in model option."]
-    },
-    {
-      filename: 'test.vue',
-      code: `
-        export default {
-          model: {
-            events: 'update'
-          }
-        }
-      `,
-      errors: ["Invalid key 'events' in model option."]
-    },
-    {
-      filename: 'test.vue',
-      code: `
-        export default {
-          model: {
-            props: 'list',
-            event: 'update'
-          }
-        }
-      `,
-      errors: ["Invalid key 'props' in model option."]
-    },
-    {
-      filename: 'test.vue',
-      code: `
-        export default {
-          model: {
-            prop: 'list',
-            events: 'update'
-          }
-        }
-      `,
-      errors: ["Invalid key 'events' in model option."]
-    },
-    {
-      filename: 'test.vue',
-      code: `
-        export default {
-          model: {
-            props: 'list',
-            events: 'update'
-          }
-        }
-      `,
-      errors: [
-        "Invalid key 'props' in model option.",
-        "Invalid key 'events' in model option."
-      ]
-    },
-    {
-      filename: 'test.vue',
-      code: `
-        export default {
-          model: {
-            prop: 'checked',
-            props: 'list',
-            event: 'update'
-          }
-        }
-      `,
-      errors: ["Invalid key 'props' in model option."]
-    },
-    {
-      filename: 'test.vue',
-      code: `
-        export default {
-          model: {
-            name: 'checked',
-            props: 'list',
-            event: 'update'
-          }
-        }
-      `,
-      errors: [
-        "Invalid key 'name' in model option.",
-        "Invalid key 'props' in model option."
-      ]
-    }
-  ]
-})
diff --git a/tests/lib/rules/no-irregular-whitespace.js b/tests/lib/rules/no-irregular-whitespace.js
index 52c6dd0e4..2dc454e1e 100644
--- a/tests/lib/rules/no-irregular-whitespace.js
+++ b/tests/lib/rules/no-irregular-whitespace.js
@@ -3,12 +3,11 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-irregular-whitespace')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2018 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2018 }
 })
 
 const IRREGULAR_WHITESPACES = [
diff --git a/tests/lib/rules/no-lifecycle-after-await.js b/tests/lib/rules/no-lifecycle-after-await.js
index e75995a5f..f08379e0e 100644
--- a/tests/lib/rules/no-lifecycle-after-await.js
+++ b/tests/lib/rules/no-lifecycle-after-await.js
@@ -3,12 +3,15 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-lifecycle-after-await')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2020, sourceType: 'module' }
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
 })
 
 tester.run('no-lifecycle-after-await', rule, {
@@ -116,7 +119,7 @@ tester.run('no-lifecycle-after-await', rule, {
       await doSomething()
       </script>
       `,
-      parserOptions: { ecmaVersion: 2022 }
+      languageOptions: { ecmaVersion: 2022 }
     },
     {
       filename: 'test.vue',
@@ -129,7 +132,7 @@ tester.run('no-lifecycle-after-await', rule, {
       onMounted(() => { /* ... */ }) // not error
       </script>
       `,
-      parserOptions: { ecmaVersion: 2022 }
+      languageOptions: { ecmaVersion: 2022 }
     },
     {
       filename: 'test.vue',
@@ -142,7 +145,7 @@ tester.run('no-lifecycle-after-await', rule, {
       onMounted(() => { /* ... */ }) // not error
       </script>
       `,
-      parserOptions: { ecmaVersion: 2022 }
+      languageOptions: { ecmaVersion: 2022 }
     },
     {
       filename: 'test.vue',
@@ -154,7 +157,7 @@ tester.run('no-lifecycle-after-await', rule, {
       onMounted(() => { /* ... */ }) // not error
       </script>
       `,
-      parserOptions: { ecmaVersion: 2022 }
+      languageOptions: { ecmaVersion: 2022 }
     }
   ],
   invalid: [
@@ -209,47 +212,80 @@ tester.run('no-lifecycle-after-await', rule, {
       errors: [
         {
           messageId: 'forbidden',
-          line: 8
+          line: 8,
+          column: 11,
+          endLine: 8,
+          endColumn: 45
         },
         {
           messageId: 'forbidden',
-          line: 9
+          line: 9,
+          column: 11,
+          endLine: 9,
+          endColumn: 47
         },
         {
           messageId: 'forbidden',
-          line: 10
+          line: 10,
+          column: 11,
+          endLine: 10,
+          endColumn: 46
         },
         {
           messageId: 'forbidden',
-          line: 11
+          line: 11,
+          column: 11,
+          endLine: 11,
+          endColumn: 47
         },
         {
           messageId: 'forbidden',
-          line: 12
+          line: 12,
+          column: 11,
+          endLine: 12,
+          endColumn: 41
         },
         {
           messageId: 'forbidden',
-          line: 13
+          line: 13,
+          column: 11,
+          endLine: 13,
+          endColumn: 47
         },
         {
           messageId: 'forbidden',
-          line: 14
+          line: 14,
+          column: 11,
+          endLine: 14,
+          endColumn: 49
         },
         {
           messageId: 'forbidden',
-          line: 15
+          line: 15,
+          column: 11,
+          endLine: 15,
+          endColumn: 43
         },
         {
           messageId: 'forbidden',
-          line: 16
+          line: 16,
+          column: 11,
+          endLine: 16,
+          endColumn: 41
         },
         {
           messageId: 'forbidden',
-          line: 17
+          line: 17,
+          column: 11,
+          endLine: 17,
+          endColumn: 43
         },
         {
           messageId: 'forbidden',
-          line: 18
+          line: 18,
+          column: 11,
+          endLine: 18,
+          endColumn: 45
         }
       ]
     },
@@ -269,7 +305,11 @@ tester.run('no-lifecycle-after-await', rule, {
       `,
       errors: [
         {
-          messageId: 'forbidden'
+          messageId: 'forbidden',
+          line: 8,
+          column: 11,
+          endLine: 8,
+          endColumn: 43
         }
       ]
     }
diff --git a/tests/lib/rules/no-lone-template.js b/tests/lib/rules/no-lone-template.js
index 947934fcd..e8ef0eaf9 100644
--- a/tests/lib/rules/no-lone-template.js
+++ b/tests/lib/rules/no-lone-template.js
@@ -4,12 +4,12 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-lone-template')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
     ecmaVersion: 2019,
     sourceType: 'module'
   }
@@ -135,7 +135,15 @@ tester.run('no-lone-template', rule, {
         <template/>
       </template>
       `,
-      errors: ['`<template>` require directive.']
+      errors: [
+        {
+          message: '`<template>` require directive.',
+          line: 3,
+          column: 9,
+          endLine: 3,
+          endColumn: 20
+        }
+      ]
     },
     {
       filename: 'test.vue',
@@ -145,7 +153,15 @@ tester.run('no-lone-template', rule, {
       </template>
       `,
       options: [{ ignoreAccessible: true }],
-      errors: ['`<template>` require directive.']
+      errors: [
+        {
+          message: '`<template>` require directive.',
+          line: 3,
+          column: 9,
+          endLine: 3,
+          endColumn: 31
+        }
+      ]
     },
     {
       filename: 'test.vue',
@@ -155,7 +171,15 @@ tester.run('no-lone-template', rule, {
       </template>
       `,
       options: [{ ignoreAccessible: true }],
-      errors: ['`<template>` require directive.']
+      errors: [
+        {
+          message: '`<template>` require directive.',
+          line: 3,
+          column: 9,
+          endLine: 3,
+          endColumn: 31
+        }
+      ]
     },
     {
       filename: 'test.vue',
@@ -165,7 +189,15 @@ tester.run('no-lone-template', rule, {
       </template>
       `,
       options: [{ ignoreAccessible: true }],
-      errors: ['`<template>` require directive.']
+      errors: [
+        {
+          message: '`<template>` require directive.',
+          line: 3,
+          column: 9,
+          endLine: 3,
+          endColumn: 37
+        }
+      ]
     },
     {
       filename: 'test.vue',
@@ -175,7 +207,15 @@ tester.run('no-lone-template', rule, {
       </template>
       `,
       options: [{ ignoreAccessible: true }],
-      errors: ['`<template>` require directive.']
+      errors: [
+        {
+          message: '`<template>` require directive.',
+          line: 3,
+          column: 9,
+          endLine: 3,
+          endColumn: 29
+        }
+      ]
     }
   ]
 })
diff --git a/tests/lib/rules/no-loss-of-precision.js b/tests/lib/rules/no-loss-of-precision.js
index 5608f8e11..1b60a33ca 100644
--- a/tests/lib/rules/no-loss-of-precision.js
+++ b/tests/lib/rules/no-loss-of-precision.js
@@ -4,90 +4,78 @@
  */
 'use strict'
 
-const { RuleTester, ESLint } = require('../../eslint-compat')
-const semver = require('semver')
+const { RuleTester } = require('../../eslint-compat')
 const rule = require('../../../lib/rules/no-loss-of-precision')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
     ecmaVersion: 2020,
     sourceType: 'module'
   }
 })
 tester.run('no-loss-of-precision', rule, {
   valid: [
-    ...(semver.gte(ESLint.version, '7.1.0')
-      ? [
-          {
-            filename: 'test.vue',
-            code: `
-            <template>
-              {{12345}}
-              {{123.45}}
-            </template>
-            `
-          },
-          {
-            filename: 'test.vue',
-            code: `
-            <template>
-              <MyComponent num="12345678901234567890" />
-            </template>
-            `
-          }
-        ]
-      : [])
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          {{12345}}
+          {{123.45}}
+        </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <MyComponent num="12345678901234567890" />
+        </template>
+      `
+    }
   ],
   invalid: [
-    ...(semver.gte(ESLint.version, '7.1.0')
-      ? [
-          {
-            filename: 'test.vue',
-            code: `
-            <template>
-              {{12345678901234567890}}
-              {{0.12345678901234567890}}
-            </template>
-            `,
-            errors: [
-              {
-                message: 'This number literal will lose precision at runtime.',
-                line: 3
-              },
-              {
-                message: 'This number literal will lose precision at runtime.',
-                line: 4
-              }
-            ]
-          },
-          {
-            filename: 'test.vue',
-            code: `
-            <template>
-              <MyComponent :num="12345678901234567890" />
-            </template>
-            `,
-            errors: [
-              {
-                message: 'This number literal will lose precision at runtime.',
-                line: 3
-              }
-            ]
-          }
-        ]
-      : [
-          {
-            filename: 'test.vue',
-            code: `
-            <template>
-              <MyComponent :num="12345678901234567890" />
-            </template>
-            `,
-            errors: [
-              'Failed to extend ESLint core rule "no-loss-of-precision". You may be able to use this rule by upgrading the version of ESLint. If you cannot upgrade it, turn off this rule.'
-            ]
-          }
-        ])
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          {{12345678901234567890}}
+          {{0.12345678901234567890}}
+        </template>
+      `,
+      errors: [
+        {
+          message: 'This number literal will lose precision at runtime.',
+          line: 3,
+          column: 13,
+          endLine: 3,
+          endColumn: 33
+        },
+        {
+          message: 'This number literal will lose precision at runtime.',
+          line: 4,
+          column: 13,
+          endLine: 4,
+          endColumn: 35
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <MyComponent :num="12345678901234567890" />
+        </template>
+      `,
+      errors: [
+        {
+          message: 'This number literal will lose precision at runtime.',
+          line: 3,
+          column: 30,
+          endLine: 3,
+          endColumn: 50
+        }
+      ]
+    }
   ]
 })
diff --git a/tests/lib/rules/no-multi-spaces.js b/tests/lib/rules/no-multi-spaces.js
index 347672706..909a5063a 100644
--- a/tests/lib/rules/no-multi-spaces.js
+++ b/tests/lib/rules/no-multi-spaces.js
@@ -4,20 +4,15 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/no-multi-spaces')
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015, sourceType: 'module' }
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2015,
+    sourceType: 'module'
+  }
 })
 
 ruleTester.run('no-multi-spaces', rule, {
@@ -87,7 +82,10 @@ ruleTester.run('no-multi-spaces', rule, {
       errors: [
         {
           message: "Multiple spaces found before '/>'.",
-          type: 'HTMLSelfClosingTagClose'
+          line: 1,
+          column: 15,
+          endLine: 1,
+          endColumn: 20
         }
       ]
     },
@@ -97,11 +95,17 @@ ruleTester.run('no-multi-spaces', rule, {
       errors: [
         {
           message: "Multiple spaces found before 'class'.",
-          type: 'HTMLIdentifier'
+          line: 1,
+          column: 15,
+          endLine: 1,
+          endColumn: 18
         },
         {
           message: "Multiple spaces found before '/>'.",
-          type: 'HTMLSelfClosingTagClose'
+          line: 1,
+          column: 29,
+          endLine: 1,
+          endColumn: 31
         }
       ]
     },
@@ -111,11 +115,17 @@ ruleTester.run('no-multi-spaces', rule, {
       errors: [
         {
           message: "Multiple spaces found before 'class'.",
-          type: 'HTMLIdentifier'
+          line: 1,
+          column: 15,
+          endLine: 1,
+          endColumn: 17
         },
         {
           message: "Multiple spaces found before '/>'.",
-          type: 'HTMLSelfClosingTagClose'
+          line: 1,
+          column: 28,
+          endLine: 1,
+          endColumn: 30
         }
       ]
     },
@@ -125,11 +135,17 @@ ruleTester.run('no-multi-spaces', rule, {
       errors: [
         {
           message: "Multiple spaces found before ':'.",
-          type: 'Punctuator'
+          line: 1,
+          column: 15,
+          endLine: 1,
+          endColumn: 18
         },
         {
           message: "Multiple spaces found before '/>'.",
-          type: 'HTMLSelfClosingTagClose'
+          line: 1,
+          column: 30,
+          endLine: 1,
+          endColumn: 32
         }
       ]
     },
@@ -139,7 +155,10 @@ ruleTester.run('no-multi-spaces', rule, {
       errors: [
         {
           message: "Multiple spaces found before '/>'.",
-          type: 'HTMLSelfClosingTagClose'
+          line: 1,
+          column: 35,
+          endLine: 1,
+          endColumn: 37
         }
       ]
     },
@@ -149,7 +168,10 @@ ruleTester.run('no-multi-spaces', rule, {
       errors: [
         {
           message: "Multiple spaces found before '/>'.",
-          type: 'HTMLSelfClosingTagClose'
+          line: 1,
+          column: 34,
+          endLine: 1,
+          endColumn: 36
         }
       ]
     },
@@ -159,7 +181,10 @@ ruleTester.run('no-multi-spaces', rule, {
       errors: [
         {
           message: "Multiple spaces found before '/>'.",
-          type: 'HTMLSelfClosingTagClose'
+          line: 1,
+          column: 36,
+          endLine: 1,
+          endColumn: 38
         }
       ]
     },
@@ -169,7 +194,10 @@ ruleTester.run('no-multi-spaces', rule, {
       errors: [
         {
           message: "Multiple spaces found before '/>'.",
-          type: 'HTMLSelfClosingTagClose'
+          line: 2,
+          column: 21,
+          endLine: 2,
+          endColumn: 25
         }
       ]
     },
@@ -179,11 +207,17 @@ ruleTester.run('no-multi-spaces', rule, {
       errors: [
         {
           message: "Multiple spaces found before 'test'.",
-          type: 'Identifier'
+          line: 1,
+          column: 18,
+          endLine: 1,
+          endColumn: 20
         },
         {
           message: "Multiple spaces found before '}}'.",
-          type: 'VExpressionEnd'
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 26
         }
       ]
     },
@@ -193,7 +227,10 @@ ruleTester.run('no-multi-spaces', rule, {
       errors: [
         {
           message: "Multiple spaces found before '>'.",
-          type: 'HTMLTagClose'
+          line: 1,
+          column: 15,
+          endLine: 1,
+          endColumn: 30
         }
       ]
     },
@@ -203,19 +240,31 @@ ruleTester.run('no-multi-spaces', rule, {
       errors: [
         {
           message: "Multiple spaces found before 'i'.",
-          type: 'Identifier'
+          line: 1,
+          column: 23,
+          endLine: 1,
+          endColumn: 29
         },
         {
           message: "Multiple spaces found before 'in'.",
-          type: 'Keyword'
+          line: 1,
+          column: 30,
+          endLine: 1,
+          endColumn: 34
         },
         {
           message: "Multiple spaces found before 'b'.",
-          type: 'Identifier'
+          line: 1,
+          column: 36,
+          endLine: 1,
+          endColumn: 40
         },
         {
           message: "Multiple spaces found before '\"'.",
-          type: 'Punctuator'
+          line: 1,
+          column: 41,
+          endLine: 1,
+          endColumn: 48
         }
       ]
     },
@@ -243,7 +292,10 @@ ruleTester.run('no-multi-spaces', rule, {
       errors: [
         {
           message: "Multiple spaces found before ':'.",
-          type: 'Punctuator'
+          line: 5,
+          column: 26,
+          endLine: 5,
+          endColumn: 29
         }
       ]
     },
@@ -271,7 +323,10 @@ ruleTester.run('no-multi-spaces', rule, {
       errors: [
         {
           message: "Multiple spaces found before 'isExpanded'.",
-          type: 'Identifier'
+          line: 5,
+          column: 27,
+          endLine: 5,
+          endColumn: 30
         }
       ]
     }
diff --git a/tests/lib/rules/no-multiple-objects-in-class.js b/tests/lib/rules/no-multiple-objects-in-class.js
index 64ce82b0a..46805fb14 100644
--- a/tests/lib/rules/no-multiple-objects-in-class.js
+++ b/tests/lib/rules/no-multiple-objects-in-class.js
@@ -3,20 +3,15 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/no-multiple-objects-in-class')
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015, sourceType: 'module' }
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2015,
+    sourceType: 'module'
+  }
 })
 
 ruleTester.run('no-multiple-objects-in-class', rule, {
@@ -31,7 +26,10 @@ ruleTester.run('no-multiple-objects-in-class', rule, {
       errors: [
         {
           message: 'Unexpected multiple objects. Merge objects.',
-          type: 'VAttribute'
+          line: 1,
+          column: 16,
+          endLine: 1,
+          endColumn: 63
         }
       ]
     },
@@ -40,7 +38,10 @@ ruleTester.run('no-multiple-objects-in-class', rule, {
       errors: [
         {
           message: 'Unexpected multiple objects. Merge objects.',
-          type: 'VAttribute'
+          line: 1,
+          column: 16,
+          endLine: 1,
+          endColumn: 57
         }
       ]
     },
@@ -51,7 +52,10 @@ ruleTester.run('no-multiple-objects-in-class', rule, {
       errors: [
         {
           message: 'Unexpected multiple objects. Merge objects.',
-          type: 'VAttribute'
+          line: 1,
+          column: 16,
+          endLine: 1,
+          endColumn: 64
         }
       ]
     }
diff --git a/tests/lib/rules/no-multiple-slot-args.js b/tests/lib/rules/no-multiple-slot-args.js
index 0720a951f..4bce33be7 100644
--- a/tests/lib/rules/no-multiple-slot-args.js
+++ b/tests/lib/rules/no-multiple-slot-args.js
@@ -4,21 +4,16 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/no-multiple-slot-args')
 
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2020, sourceType: 'module' }
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
 })
 ruleTester.run('no-multiple-slot-args', rule, {
   valid: [
@@ -125,10 +120,34 @@ ruleTester.run('no-multiple-slot-args', rule, {
       </script>
       `,
       errors: [
-        'Unexpected multiple arguments.',
-        'Unexpected multiple arguments.',
-        'Unexpected multiple arguments.',
-        'Unexpected multiple arguments.'
+        {
+          message: 'Unexpected multiple arguments.',
+          line: 5,
+          column: 46,
+          endLine: 5,
+          endColumn: 49
+        },
+        {
+          message: 'Unexpected multiple arguments.',
+          line: 6,
+          column: 42,
+          endLine: 6,
+          endColumn: 45
+        },
+        {
+          message: 'Unexpected multiple arguments.',
+          line: 8,
+          column: 44,
+          endLine: 8,
+          endColumn: 47
+        },
+        {
+          message: 'Unexpected multiple arguments.',
+          line: 9,
+          column: 40,
+          endLine: 9,
+          endColumn: 43
+        }
       ]
     },
     {
@@ -147,10 +166,34 @@ ruleTester.run('no-multiple-slot-args', rule, {
       </script>
       `,
       errors: [
-        'Unexpected multiple arguments.',
-        'Unexpected multiple arguments.',
-        'Unexpected multiple arguments.',
-        'Unexpected multiple arguments.'
+        {
+          message: 'Unexpected multiple arguments.',
+          line: 5,
+          column: 44,
+          endLine: 5,
+          endColumn: 47
+        },
+        {
+          message: 'Unexpected multiple arguments.',
+          line: 6,
+          column: 40,
+          endLine: 6,
+          endColumn: 43
+        },
+        {
+          message: 'Unexpected multiple arguments.',
+          line: 8,
+          column: 42,
+          endLine: 8,
+          endColumn: 45
+        },
+        {
+          message: 'Unexpected multiple arguments.',
+          line: 9,
+          column: 38,
+          endLine: 9,
+          endColumn: 41
+        }
       ]
     },
     {
@@ -169,8 +212,20 @@ ruleTester.run('no-multiple-slot-args', rule, {
       </script>
       `,
       errors: [
-        'Unexpected multiple arguments.',
-        'Unexpected multiple arguments.'
+        {
+          message: 'Unexpected multiple arguments.',
+          line: 5,
+          column: 49,
+          endLine: 5,
+          endColumn: 52
+        },
+        {
+          message: 'Unexpected multiple arguments.',
+          line: 8,
+          column: 47,
+          endLine: 8,
+          endColumn: 50
+        }
       ]
     },
     {
@@ -189,8 +244,20 @@ ruleTester.run('no-multiple-slot-args', rule, {
       </script>
       `,
       errors: [
-        'Unexpected multiple arguments.',
-        'Unexpected multiple arguments.'
+        {
+          message: 'Unexpected multiple arguments.',
+          line: 5,
+          column: 46,
+          endLine: 5,
+          endColumn: 49
+        },
+        {
+          message: 'Unexpected multiple arguments.',
+          line: 8,
+          column: 44,
+          endLine: 8,
+          endColumn: 47
+        }
       ]
     },
     {
@@ -240,8 +307,20 @@ ruleTester.run('no-multiple-slot-args', rule, {
       </script>
       `,
       errors: [
-        'Unexpected multiple arguments.',
-        'Unexpected multiple arguments.'
+        {
+          message: 'Unexpected multiple arguments.',
+          line: 6,
+          column: 36,
+          endLine: 6,
+          endColumn: 39
+        },
+        {
+          message: 'Unexpected multiple arguments.',
+          line: 7,
+          column: 32,
+          endLine: 7,
+          endColumn: 35
+        }
       ]
     }
   ]
diff --git a/tests/lib/rules/no-multiple-template-root.js b/tests/lib/rules/no-multiple-template-root.js
index 69f9f26e4..9a07204fc 100644
--- a/tests/lib/rules/no-multiple-template-root.js
+++ b/tests/lib/rules/no-multiple-template-root.js
@@ -4,21 +4,12 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/no-multiple-template-root')
 
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 ruleTester.run('no-multiple-template-root', rule, {
   valid: [
@@ -57,6 +48,7 @@ ruleTester.run('no-multiple-template-root', rule, {
 
     // https://github.com/vuejs/eslint-plugin-vue/issues/1439
     {
+      filename: 'test.vue',
       code: `
       <template>
         <Link :to="to" class="flex items-center">
@@ -69,50 +61,345 @@ ruleTester.run('no-multiple-template-root', rule, {
           <slot />
         </Link>
       </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <!-- comments -->
+        <div>12333</div>
+        <!-- comments -->
+      </template>
+      `,
+      options: [{ disallowComments: false }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <!-- comments -->
+        <div>
+          <!-- comments -->
+          12333
+        </div>
+      </template>
+      `,
+      options: [{ disallowComments: false }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <!-- comments -->
+          12333
+          <span>
+            <!-- comments -->
+            12333
+          </span>
+        </div>
+      </template>
+      `,
+      options: [{ disallowComments: true }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div v-if="for">
+          <!-- comments -->
+          12333
+          <span>
+            <!-- comments -->
+            12333
+          </span>
+        </div>
+        <div v-else>
+          <!-- comments -->
+          12333
+        </div>
+      </template>
+      `,
+      options: [{ disallowComments: true }]
+    },
+
+    // https://github.com/vuejs/eslint-plugin-vue/issues/2948
+    {
+      code: `
+        <!-- comment -->
+        <template>
+          <div>abc</div>
+        </template>
       `,
-      filename: 'test.vue'
+      options: [{ disallowComments: true }]
     }
   ],
   invalid: [
     {
       filename: 'test.vue',
       code: '<template><div></div><div></div></template>',
-      errors: ['The template root requires exactly one element.']
+      errors: [
+        {
+          message: 'The template root requires exactly one element.',
+          line: 1,
+          column: 22,
+          endLine: 1,
+          endColumn: 33
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template>\n    <div></div>\n    <div></div>\n</template>',
-      errors: ['The template root requires exactly one element.']
+      errors: [
+        {
+          message: 'The template root requires exactly one element.',
+          line: 3,
+          column: 5,
+          endLine: 3,
+          endColumn: 16
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template>{{a b c}}</template>',
-      errors: ['The template root requires an element rather than texts.']
+      errors: [
+        {
+          message: 'The template root requires an element rather than texts.',
+          line: 1,
+          column: 11,
+          endLine: 1,
+          endColumn: 20
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div></div>aaaaaa</template>',
-      errors: ['The template root requires an element rather than texts.']
+      errors: [
+        {
+          message: 'The template root requires an element rather than texts.',
+          line: 1,
+          column: 22,
+          endLine: 1,
+          endColumn: 28
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template>aaaaaa<div></div></template>',
-      errors: ['The template root requires an element rather than texts.']
+      errors: [
+        {
+          message: 'The template root requires an element rather than texts.',
+          line: 1,
+          column: 11,
+          endLine: 1,
+          endColumn: 17
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-for="x in list"></div></template>',
-      errors: ["The template root disallows 'v-for' directives."]
+      errors: [
+        {
+          message: "The template root disallows 'v-for' directives.",
+          line: 1,
+          column: 11,
+          endLine: 1,
+          endColumn: 34
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><slot></slot></template>',
-      errors: ["The template root disallows '<slot>' elements."]
+      errors: [
+        {
+          message: "The template root disallows '<slot>' elements.",
+          line: 1,
+          column: 11,
+          endLine: 1,
+          endColumn: 17
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><template></template></template>',
-      errors: ["The template root disallows '<template>' elements."]
+      errors: [
+        {
+          message: "The template root disallows '<template>' elements.",
+          line: 1,
+          column: 11,
+          endLine: 1,
+          endColumn: 21
+        }
+      ]
+    },
+    {
+      code: `
+      <template>
+        <!-- comments -->
+        <div>12333</div>
+        <!-- comments -->
+      </template>
+      `,
+      options: [{ disallowComments: true }],
+      errors: [
+        {
+          message: 'The template root disallows comments.',
+          line: 3,
+          column: 9,
+          endLine: 3,
+          endColumn: 26
+        },
+        {
+          message: 'The template root disallows comments.',
+          line: 5,
+          column: 9,
+          endLine: 5,
+          endColumn: 26
+        }
+      ]
+    },
+    {
+      code: `
+      <template>
+        <!-- comments -->
+        <div>
+          12333
+          <!-- comments -->
+        </div>
+      </template>
+      `,
+      options: [{ disallowComments: true }],
+      errors: [
+        {
+          message: 'The template root disallows comments.',
+          line: 3,
+          column: 9,
+          endLine: 3,
+          endColumn: 26
+        }
+      ]
+    },
+    {
+      code: `
+      <template>
+        <!-- comments -->
+        <div v-if="for">
+          <!-- comments -->
+          12333
+          <span>
+            <!-- comments -->
+            12333
+          </span>
+        </div>
+        <!-- comments -->
+        <div v-else>
+          <!-- comments -->
+          12333
+        </div>
+        <!-- comments -->
+      </template>
+      `,
+      options: [{ disallowComments: true }],
+      errors: [
+        {
+          message: 'The template root disallows comments.',
+          line: 3,
+          column: 9,
+          endLine: 3,
+          endColumn: 26
+        },
+        {
+          message: 'The template root disallows comments.',
+          line: 12,
+          column: 9,
+          endLine: 12,
+          endColumn: 26
+        },
+        {
+          message: 'The template root disallows comments.',
+          line: 17,
+          column: 9,
+          endLine: 17,
+          endColumn: 26
+        }
+      ]
+    },
+    {
+      code: `
+      <template>
+        <div>
+          12333
+          <!-- comments -->
+        </div>
+        <!-- comments -->
+      </template>
+      `,
+      options: [{ disallowComments: true }],
+      errors: [
+        {
+          message: 'The template root disallows comments.',
+          line: 7,
+          column: 9,
+          endLine: 7,
+          endColumn: 26
+        }
+      ]
+    },
+    {
+      code: `
+      <template>
+        <div />
+        <!-- comments -->
+        <div />
+      </template>
+      `,
+      options: [{ disallowComments: true }],
+      errors: [
+        {
+          message: 'The template root disallows comments.',
+          line: 4,
+          column: 9,
+          endLine: 4,
+          endColumn: 26
+        },
+        {
+          message: 'The template root requires exactly one element.',
+          line: 5,
+          column: 9,
+          endLine: 5,
+          endColumn: 16
+        }
+      ]
+    },
+    {
+      code: `
+      <template>
+        <!-- When you have a comment in the root of your template in vue 3,
+        using $el will point to the first text comment instead of the actual DOM element.   -->
+        <div>
+          12333
+          <!-- comments -->
+        </div>
+      </template>
+      `,
+      options: [{ disallowComments: true }],
+      errors: [
+        {
+          message: 'The template root disallows comments.',
+          line: 3,
+          column: 9,
+          endLine: 4,
+          endColumn: 96
+        }
+      ]
     }
   ]
 })
diff --git a/tests/lib/rules/no-mutating-props.js b/tests/lib/rules/no-mutating-props.js
index 5c976baa2..1448ef22a 100644
--- a/tests/lib/rules/no-mutating-props.js
+++ b/tests/lib/rules/no-mutating-props.js
@@ -4,20 +4,12 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/no-mutating-props')
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
     ecmaVersion: 2020,
     sourceType: 'module'
   }
@@ -189,6 +181,37 @@ ruleTester.run('no-mutating-props', rule, {
         </template>
       `
     },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>
+            <input v-model="prop1.text">
+            <input v-model="this.prop2.text">
+            <button @click="prop3.text = '1'"></button>
+            <button @click="prop3.count++"></button>
+            <button @click="prop3.list.push(1)"></button>
+            <button @click="prop3.parent.text = '2'"></button>
+            <button @click="delete prop3.parent.text"></button>
+          </div>
+        </template>
+        <script>
+          export default {
+            props: ['prop1', 'prop2', 'prop3'],
+            methods: {
+                onKeydown() {
+                  this.prop3.text = '2'
+                  this.prop3.count ++
+                  this.prop3.list.push(1)
+                  this.prop3.parent.text = '2'
+                  delete this.prop3.parent.text
+                }
+            }
+          }
+        </script>
+      `,
+      options: [{ shallowOnly: true }]
+    },
 
     // setup
     {
@@ -333,6 +356,43 @@ ruleTester.run('no-mutating-props', rule, {
       </script>`
     },
 
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            setup(props) {
+                props.prop1.text = '2'
+                props.prop1.count ++
+                props.prop1.list.push(1)
+                props.prop1.parent.text = '2'
+            }
+          }
+        </script>
+      `,
+      options: [{ shallowOnly: true }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            setup({a,b,c, d: [e, , f]}) {
+              a.foo ++
+              b.foo = 1
+              c.push(1)
+
+              c.x.push(1)
+              delete c.y
+              e.foo++
+              f.foo++
+            }
+          }
+        </script>
+      `,
+      options: [{ shallowOnly: true }]
+    },
+
     {
       // script setup with shadow
       filename: 'test.vue',
@@ -353,6 +413,22 @@ ruleTester.run('no-mutating-props', rule, {
         const foo = ref('')
         </script>
       `
+    },
+    {
+      // Object.assign not mutating the prop
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            props: ['data'],
+            methods: {
+              update() {
+                return Object.assign({}, this.data, { extra: 'value' })
+              }
+            }
+          }
+        </script>
+      `
     }
   ],
 
@@ -370,38 +446,64 @@ ruleTester.run('no-mutating-props', rule, {
             <div v-if="this.prop6++ && this.someProp < 10"></div>
             <div v-text="this.prop7.shift()"></div>
             <div v-text="this.prop8.slice(0).shift()"></div>
+            <div v-if="delete prop9.a"></div>
           </div>
         </template>
         <script>
           export default {
-            props: ['prop1', 'prop2', 'prop3', 'prop4', 'prop5', 'prop6', 'prop7', 'prop8']
+            props: ['prop1', 'prop2', 'prop3', 'prop4', 'prop5', 'prop6', 'prop7', 'prop8', 'prop9']
           }
         </script>
       `,
       errors: [
         {
           message: 'Unexpected mutation of "prop1" prop.',
-          line: 4
+          line: 4,
+          column: 24,
+          endLine: 4,
+          endColumn: 38
         },
         {
           message: 'Unexpected mutation of "prop2" prop.',
-          line: 5
+          line: 5,
+          column: 24,
+          endLine: 5,
+          endColumn: 31
         },
         {
           message: 'Unexpected mutation of "prop3" prop.',
-          line: 6
+          line: 6,
+          column: 26,
+          endLine: 6,
+          endColumn: 39
         },
         {
           message: 'Unexpected mutation of "prop5" prop.',
-          line: 8
+          line: 8,
+          column: 24,
+          endLine: 8,
+          endColumn: 60
         },
         {
           message: 'Unexpected mutation of "prop6" prop.',
-          line: 9
+          line: 9,
+          column: 24,
+          endLine: 9,
+          endColumn: 36
         },
         {
           message: 'Unexpected mutation of "prop7" prop.',
-          line: 10
+          line: 10,
+          column: 26,
+          endLine: 10,
+          endColumn: 44
+        },
+        {
+          message: 'Unexpected mutation of "prop9" prop.',
+          line: 12,
+          column: 24,
+          endLine: 12,
+          endColumn: 38
         }
       ]
     },
@@ -425,8 +527,20 @@ ruleTester.run('no-mutating-props', rule, {
         </script>
       `,
       errors: [
-        'Unexpected mutation of "prop1" prop.',
-        'Unexpected mutation of "prop5" prop.'
+        {
+          message: 'Unexpected mutation of "prop1" prop.',
+          line: 4,
+          column: 26,
+          endLine: 4,
+          endColumn: 42
+        },
+        {
+          message: 'Unexpected mutation of "prop5" prop.',
+          line: 8,
+          column: 26,
+          endLine: 8,
+          endColumn: 48
+        }
       ]
     },
     {
@@ -446,9 +560,27 @@ ruleTester.run('no-mutating-props', rule, {
         </script>
       `,
       errors: [
-        'Unexpected mutation of "prop1" prop.',
-        'Unexpected mutation of "prop2" prop.',
-        'Unexpected mutation of "prop3" prop.'
+        {
+          message: 'Unexpected mutation of "prop1" prop.',
+          line: 4,
+          column: 26,
+          endLine: 4,
+          endColumn: 44
+        },
+        {
+          message: 'Unexpected mutation of "prop2" prop.',
+          line: 5,
+          column: 26,
+          endLine: 5,
+          endColumn: 50
+        },
+        {
+          message: 'Unexpected mutation of "prop3" prop.',
+          line: 6,
+          column: 26,
+          endLine: 6,
+          endColumn: 50
+        }
       ]
     },
     {
@@ -471,19 +603,31 @@ ruleTester.run('no-mutating-props', rule, {
       errors: [
         {
           message: 'Unexpected mutation of "prop1" prop.',
-          line: 4
+          line: 4,
+          column: 29,
+          endLine: 4,
+          endColumn: 39
         },
         {
           message: 'Unexpected mutation of "prop2" prop.',
-          line: 5
+          line: 5,
+          column: 29,
+          endLine: 5,
+          endColumn: 34
         },
         {
           message: 'Unexpected mutation of "prop3" prop.',
-          line: 6
+          line: 6,
+          column: 29,
+          endLine: 6,
+          endColumn: 44
         },
         {
           message: 'Unexpected mutation of "prop4" prop.',
-          line: 7
+          line: 7,
+          column: 29,
+          endLine: 7,
+          endColumn: 39
         }
       ]
     },
@@ -507,6 +651,7 @@ ruleTester.run('no-mutating-props', rule, {
                 ++this.items
                 this.todo.type = 'completed'
                 this.items.push('something')
+                delete this.todo.type
               }
             }
           }
@@ -515,15 +660,31 @@ ruleTester.run('no-mutating-props', rule, {
       errors: [
         {
           message: 'Unexpected mutation of "items" prop.',
-          line: 16
+          line: 16,
+          column: 17,
+          endLine: 16,
+          endColumn: 29
         },
         {
           message: 'Unexpected mutation of "todo" prop.',
-          line: 17
+          line: 17,
+          column: 17,
+          endLine: 17,
+          endColumn: 45
         },
         {
           message: 'Unexpected mutation of "items" prop.',
-          line: 18
+          line: 18,
+          column: 17,
+          endLine: 18,
+          endColumn: 45
+        },
+        {
+          message: 'Unexpected mutation of "todo" prop.',
+          line: 19,
+          column: 17,
+          endLine: 19,
+          endColumn: 38
         }
       ]
     },
@@ -544,9 +705,27 @@ ruleTester.run('no-mutating-props', rule, {
         </script>
       `,
       errors: [
-        'Unexpected mutation of "foo" prop.',
-        'Unexpected mutation of "bar" prop.',
-        'Unexpected mutation of "baz" prop.'
+        {
+          message: 'Unexpected mutation of "foo" prop.',
+          line: 7,
+          column: 17,
+          endLine: 7,
+          endColumn: 47
+        },
+        {
+          message: 'Unexpected mutation of "bar" prop.',
+          line: 8,
+          column: 18,
+          endLine: 8,
+          endColumn: 50
+        },
+        {
+          message: 'Unexpected mutation of "baz" prop.',
+          line: 9,
+          column: 18,
+          endLine: 9,
+          endColumn: 50
+        }
       ]
     },
     {
@@ -571,7 +750,10 @@ ruleTester.run('no-mutating-props', rule, {
       errors: [
         {
           message: 'Unexpected mutation of "prop" prop.',
-          line: 8
+          line: 8,
+          column: 31,
+          endLine: 8,
+          endColumn: 35
         }
       ]
     },
@@ -596,11 +778,17 @@ ruleTester.run('no-mutating-props', rule, {
       errors: [
         {
           message: 'Unexpected mutation of "prop" prop.',
-          line: 5
+          line: 5,
+          column: 31,
+          endLine: 5,
+          endColumn: 40
         },
         {
           message: 'Unexpected mutation of "prop" prop.',
-          line: 7
+          line: 7,
+          column: 28,
+          endLine: 7,
+          endColumn: 45
         }
       ]
     },
@@ -628,15 +816,99 @@ ruleTester.run('no-mutating-props', rule, {
       errors: [
         {
           message: 'Unexpected mutation of "prop" prop.',
-          line: 4
+          line: 4,
+          column: 38,
+          endLine: 4,
+          endColumn: 47
         },
         {
           message: 'Unexpected mutation of "prop" prop.',
-          line: 5
+          line: 5,
+          column: 38,
+          endLine: 5,
+          endColumn: 42
         },
         {
           message: 'Unexpected mutation of "prop" prop.',
-          line: 10
+          line: 10,
+          column: 40,
+          endLine: 10,
+          endColumn: 49
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>
+            <div v-if="prop1 = [1, 2]"></div>
+            <div v-if="prop2++"></div>
+            <div v-text="prop3.shift()"></div>
+            <div v-text="prop4.slice(0).shift()"></div>
+            <div v-if="this.prop5 = [1, 2] && this.someProp"></div>
+            <div v-if="this.prop6++ && this.someProp < 10"></div>
+            <div v-text="this.prop7.shift()"></div>
+            <div v-text="this.prop8.slice(0).shift()"></div>
+            <div v-if="delete prop9.a"></div>
+            <div v-if="delete this.prop10"></div>
+          </div>
+        </template>
+        <script>
+          export default {
+            props: ['prop1', 'prop2', 'prop3', 'prop4', 'prop5', 'prop6', 'prop7', 'prop8', 'prop9', 'prop10'],
+            method: {
+              deleteProp() {
+                delete this.prop9.a
+                delete this.prop10
+              }
+            }
+          }
+        </script>
+      `,
+      options: [{ shallowOnly: true }],
+      errors: [
+        {
+          message: 'Unexpected mutation of "prop1" prop.',
+          line: 4,
+          column: 24,
+          endLine: 4,
+          endColumn: 38
+        },
+        {
+          message: 'Unexpected mutation of "prop2" prop.',
+          line: 5,
+          column: 24,
+          endLine: 5,
+          endColumn: 31
+        },
+        {
+          message: 'Unexpected mutation of "prop5" prop.',
+          line: 8,
+          column: 24,
+          endLine: 8,
+          endColumn: 60
+        },
+        {
+          message: 'Unexpected mutation of "prop6" prop.',
+          line: 9,
+          column: 24,
+          endLine: 9,
+          endColumn: 36
+        },
+        {
+          message: 'Unexpected mutation of "prop10" prop.',
+          line: 13,
+          column: 24,
+          endLine: 13,
+          endColumn: 42
+        },
+        {
+          message: 'Unexpected mutation of "prop10" prop.',
+          line: 22,
+          column: 17,
+          endLine: 22,
+          endColumn: 35
         }
       ]
     },
@@ -651,6 +923,7 @@ ruleTester.run('no-mutating-props', rule, {
               props.a ++
               props.b = 1
               props.c.push(1)
+              delete props.d
             }
           }
         </script>
@@ -658,15 +931,31 @@ ruleTester.run('no-mutating-props', rule, {
       errors: [
         {
           message: 'Unexpected mutation of "a" prop.',
-          line: 5
+          line: 5,
+          column: 15,
+          endLine: 5,
+          endColumn: 25
         },
         {
           message: 'Unexpected mutation of "b" prop.',
-          line: 6
+          line: 6,
+          column: 15,
+          endLine: 6,
+          endColumn: 26
         },
         {
           message: 'Unexpected mutation of "c" prop.',
-          line: 7
+          line: 7,
+          column: 15,
+          endLine: 7,
+          endColumn: 30
+        },
+        {
+          message: 'Unexpected mutation of "d" prop.',
+          line: 8,
+          column: 15,
+          endLine: 8,
+          endColumn: 29
         }
       ]
     },
@@ -681,6 +970,7 @@ ruleTester.run('no-mutating-props', rule, {
               c.push(1)
 
               c.x.push(1)
+              delete c.y
               e.foo++
               f.foo++
             }
@@ -690,27 +980,52 @@ ruleTester.run('no-mutating-props', rule, {
       errors: [
         {
           message: 'Unexpected mutation of "a" prop.',
-          line: 5
+          line: 5,
+          column: 15,
+          endLine: 5,
+          endColumn: 23
         },
         {
           message: 'Unexpected mutation of "b" prop.',
-          line: 6
+          line: 6,
+          column: 15,
+          endLine: 6,
+          endColumn: 24
+        },
+        {
+          message: 'Unexpected mutation of "c" prop.',
+          line: 7,
+          column: 15,
+          endLine: 7,
+          endColumn: 24
         },
         {
           message: 'Unexpected mutation of "c" prop.',
-          line: 7
+          line: 9,
+          column: 15,
+          endLine: 9,
+          endColumn: 26
         },
         {
           message: 'Unexpected mutation of "c" prop.',
-          line: 9
+          line: 10,
+          column: 15,
+          endLine: 10,
+          endColumn: 25
         },
         {
           message: 'Unexpected mutation of "d" prop.',
-          line: 10
+          line: 11,
+          column: 15,
+          endLine: 11,
+          endColumn: 22
         },
         {
           message: 'Unexpected mutation of "d" prop.',
-          line: 11
+          line: 12,
+          column: 15,
+          endLine: 12,
+          endColumn: 22
         }
       ]
     },
@@ -722,6 +1037,7 @@ ruleTester.run('no-mutating-props', rule, {
           export default {
             setup({a: foo, b: [...bar], c: baz = 1}) {
               foo.x ++
+              delete foo.y
               bar.x = 1
               baz.push(1)
             }
@@ -731,15 +1047,31 @@ ruleTester.run('no-mutating-props', rule, {
       errors: [
         {
           message: 'Unexpected mutation of "a" prop.',
-          line: 5
+          line: 5,
+          column: 15,
+          endLine: 5,
+          endColumn: 23
+        },
+        {
+          message: 'Unexpected mutation of "a" prop.',
+          line: 6,
+          column: 15,
+          endLine: 6,
+          endColumn: 27
         },
         {
           message: 'Unexpected mutation of "b" prop.',
-          line: 6
+          line: 7,
+          column: 15,
+          endLine: 7,
+          endColumn: 24
         },
         {
           message: 'Unexpected mutation of "c" prop.',
-          line: 7
+          line: 8,
+          column: 15,
+          endLine: 8,
+          endColumn: 26
         }
       ]
     },
@@ -752,6 +1084,7 @@ ruleTester.run('no-mutating-props', rule, {
               props.a ++
               props.b = 1
               props.c.push(1)
+              delete props.d
             }
           }
         </script>
@@ -759,15 +1092,31 @@ ruleTester.run('no-mutating-props', rule, {
       errors: [
         {
           message: 'Unexpected mutation of "a" prop.',
-          line: 5
+          line: 5,
+          column: 15,
+          endLine: 5,
+          endColumn: 25
         },
         {
           message: 'Unexpected mutation of "b" prop.',
-          line: 6
+          line: 6,
+          column: 15,
+          endLine: 6,
+          endColumn: 26
         },
         {
           message: 'Unexpected mutation of "c" prop.',
-          line: 7
+          line: 7,
+          column: 15,
+          endLine: 7,
+          endColumn: 30
+        },
+        {
+          message: 'Unexpected mutation of "d" prop.',
+          line: 8,
+          column: 15,
+          endLine: 8,
+          endColumn: 29
         }
       ]
     },
@@ -782,7 +1131,15 @@ ruleTester.run('no-mutating-props', rule, {
           }
         </script>
       `,
-      errors: ['Unexpected mutation of "[a]" prop.']
+      errors: [
+        {
+          message: 'Unexpected mutation of "[a]" prop.',
+          line: 5,
+          column: 15,
+          endLine: 5,
+          endColumn: 26
+        }
+      ]
     },
     {
       filename: 'test.vue',
@@ -795,9 +1152,38 @@ ruleTester.run('no-mutating-props', rule, {
           }
         </script>
       `,
-      errors: ['Unexpected mutation of "[a]" prop.']
+      errors: [
+        {
+          message: 'Unexpected mutation of "[a]" prop.',
+          line: 5,
+          column: 15,
+          endLine: 5,
+          endColumn: 23
+        }
+      ]
     },
 
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>
+          const props = defineProps()
+        </script>
+
+        <template>
+          <input v-model="props[foo]" >
+        </template>
+      `,
+      errors: [
+        {
+          message: 'Unexpected mutation of "[foo]" prop.',
+          line: 7,
+          column: 27,
+          endLine: 7,
+          endColumn: 37
+        }
+      ]
+    },
     {
       filename: 'test.vue',
       code: `
@@ -814,11 +1200,17 @@ ruleTester.run('no-mutating-props', rule, {
       errors: [
         {
           message: 'Unexpected mutation of "value" prop.',
-          line: 3
+          line: 3,
+          column: 27,
+          endLine: 3,
+          endColumn: 32
         },
         {
-          message: 'Unexpected mutation of "props" prop.',
-          line: 4
+          message: 'Unexpected mutation of "value" prop.',
+          line: 4,
+          column: 27,
+          endLine: 4,
+          endColumn: 38
         }
       ]
     },
@@ -835,7 +1227,10 @@ ruleTester.run('no-mutating-props', rule, {
       errors: [
         {
           message: 'Unexpected mutation of "value" prop.',
-          line: 6
+          line: 6,
+          column: 9,
+          endLine: 6,
+          endColumn: 22
         }
       ]
     },
@@ -852,7 +1247,10 @@ ruleTester.run('no-mutating-props', rule, {
       errors: [
         {
           message: 'Unexpected mutation of "value" prop.',
-          line: 6
+          line: 6,
+          column: 9,
+          endLine: 6,
+          endColumn: 22
         }
       ]
     },
@@ -866,13 +1264,69 @@ ruleTester.run('no-mutating-props', rule, {
         props.value++
         </script>
       `,
-      parserOptions: {
-        parser: require.resolve('@typescript-eslint/parser')
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
       },
       errors: [
         {
           message: 'Unexpected mutation of "value" prop.',
-          line: 6
+          line: 6,
+          column: 9,
+          endLine: 6,
+          endColumn: 22
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            setup(props) {
+              props.a ++
+              props.b = 1
+              props.c.push(1)
+              delete props.d
+
+              function foo() {
+                props.a ++
+              }
+            }
+          }
+        </script>
+
+      `,
+      options: [{ shallowOnly: true }],
+      errors: [
+        {
+          message: 'Unexpected mutation of "a" prop.',
+          line: 5,
+          column: 15,
+          endLine: 5,
+          endColumn: 25
+        },
+        {
+          message: 'Unexpected mutation of "b" prop.',
+          line: 6,
+          column: 15,
+          endLine: 6,
+          endColumn: 26
+        },
+        {
+          message: 'Unexpected mutation of "d" prop.',
+          line: 8,
+          column: 15,
+          endLine: 8,
+          endColumn: 29
+        },
+        {
+          message: 'Unexpected mutation of "a" prop.',
+          line: 11,
+          column: 17,
+          endLine: 11,
+          endColumn: 27
         }
       ]
     },
@@ -889,27 +1343,122 @@ ruleTester.run('no-mutating-props', rule, {
         </template>
         <script setup>
         import { ref } from 'vue'
-        const { Infinity } = defineProps({
+        const { Infinity, obj } = defineProps({
           foo: String,
           bar: String,
           Infinity: String,
           window: String,
+          obj: Object
         })
         const foo = ref('')
+        obj.id = 2
         </script>
       `,
       errors: [
         {
           message: 'Unexpected mutation of "bar" prop.',
-          line: 4
+          line: 4,
+          column: 27,
+          endLine: 4,
+          endColumn: 30
         },
         {
           message: 'Unexpected mutation of "window" prop.',
-          line: 5
+          line: 5,
+          column: 27,
+          endLine: 5,
+          endColumn: 33
         },
         {
           message: 'Unexpected mutation of "Infinity" prop.',
-          line: 6
+          line: 6,
+          column: 27,
+          endLine: 6,
+          endColumn: 35
+        },
+        {
+          message: 'Unexpected mutation of "obj" prop.',
+          line: 18,
+          column: 9,
+          endLine: 18,
+          endColumn: 19
+        }
+      ]
+    },
+
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <button @click="props.a ++"/>
+          <button @click="a ++"/>
+          <button @click="props.b.push(1)"/>
+          <button @click="b.push(1)"/>
+          <input v-model="props.a"/>
+          <input v-model="props.a.b"/>
+        </template>
+        <script setup>
+          const props = defineProps({
+            a: Number,
+            b: Array,
+          })
+          props.a ++
+        </script>
+      `,
+      options: [{ shallowOnly: true }],
+      errors: [
+        {
+          message: 'Unexpected mutation of "a" prop.',
+          line: 3,
+          column: 27,
+          endLine: 3,
+          endColumn: 37
+        },
+        {
+          message: 'Unexpected mutation of "a" prop.',
+          line: 4,
+          column: 27,
+          endLine: 4,
+          endColumn: 31
+        },
+        {
+          message: 'Unexpected mutation of "a" prop.',
+          line: 7,
+          column: 27,
+          endLine: 7,
+          endColumn: 34
+        },
+        {
+          message: 'Unexpected mutation of "a" prop.',
+          line: 15,
+          column: 11,
+          endLine: 15,
+          endColumn: 21
+        }
+      ]
+    },
+    {
+      // Object.assign mutating the prop as first argument
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            props: ['data'],
+            methods: {
+              update() {
+                return Object.assign(this.data, { extra: 'value' })
+              }
+            }
+          }
+        </script>
+      `,
+      errors: [
+        {
+          message: 'Unexpected mutation of "data" prop.',
+          line: 7,
+          column: 24,
+          endLine: 7,
+          endColumn: 68
         }
       ]
     }
diff --git a/tests/lib/rules/no-negated-condition.js b/tests/lib/rules/no-negated-condition.js
new file mode 100644
index 000000000..4a4d5e4c2
--- /dev/null
+++ b/tests/lib/rules/no-negated-condition.js
@@ -0,0 +1,166 @@
+/**
+ * @author Wayne Zhang
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/no-negated-condition')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('no-negated-condition', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div :class="foo ? 'baz' : 'bar'" />
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div :style="{ color: isActive ? 'red' : 'blue' }" />
+      </template>
+      `
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div :class="!foo ? 'bar' : 'baz'" />
+      </template>
+      `,
+      errors: [
+        {
+          message: 'Unexpected negated condition.',
+          line: 3,
+          column: 22,
+          endLine: 3,
+          endColumn: 42
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div :style="{
+          'display': !isVisible ? 'none' : 'block',
+          'color': 'red'
+        }" />
+      </template>
+      `,
+      errors: [
+        {
+          message: 'Unexpected negated condition.',
+          line: 4,
+          column: 22,
+          endLine: 4,
+          endColumn: 51
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div :class="{
+          'hidden': !foo ? true : false,
+          'visible': bar
+        }" />
+      </template>
+      `,
+      errors: [
+        {
+          message: 'Unexpected negated condition.',
+          line: 4,
+          column: 21,
+          endLine: 4,
+          endColumn: 40
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div :disabled="!enabled ? true : false" />
+      </template>
+      `,
+      errors: [
+        {
+          message: 'Unexpected negated condition.',
+          line: 3,
+          column: 25,
+          endLine: 3,
+          endColumn: 48
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div :class="a !== b ? 'different' : 'same'" />
+      </template>
+      `,
+      errors: [
+        {
+          message: 'Unexpected negated condition.',
+          line: 3,
+          column: 22,
+          endLine: 3,
+          endColumn: 52
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div :class="a != b ? 'not-equal' : 'equal'" />
+      </template>
+      `,
+      errors: [
+        {
+          message: 'Unexpected negated condition.',
+          line: 3,
+          column: 22,
+          endLine: 3,
+          endColumn: 52
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div :style="{
+          opacity: !(x && y) ? 0 : 1
+        }" />
+      </template>
+      `,
+      errors: [
+        {
+          message: 'Unexpected negated condition.',
+          line: 4,
+          column: 20,
+          endLine: 4,
+          endColumn: 37
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/no-negated-v-if-condition.js b/tests/lib/rules/no-negated-v-if-condition.js
new file mode 100644
index 000000000..0b97c7909
--- /dev/null
+++ b/tests/lib/rules/no-negated-v-if-condition.js
@@ -0,0 +1,371 @@
+/**
+ * @author Wayne Zhang
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/no-negated-v-if-condition')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('no-negated-v-if-condition', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div v-if="!foo">Content</div>
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div v-if="!foo">First</div>
+        <div v-if="bar">Second</div>
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div v-if="!foo">Content</div>
+        <div v-else-if="bar">Alternative</div>
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div v-if="!foo">First</div>
+        <div v-else-if="!bar">Second</div>
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div v-if="a != b">Not equal</div>
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div v-if="a !== b">Strictly not equal</div>
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div v-if="a != b">Not equal</div>
+        <div v-else-if="c">Alternative</div>
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div v-if="a !== b">Strictly not equal</div>
+        <div v-else-if="c">Alternative</div>
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div v-if="!foo">First</div>
+        <div v-else-if="!bar">Second</div>
+        <div v-else-if="baz">Third</div>
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div v-if="!a">First</div>
+        <div v-else-if="b">Second</div>
+        <div v-else>Default</div>
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div v-if="foo">Positive</div>
+        <div v-else>Negative</div>
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div v-if="foo">First</div>
+        <div v-else-if="bar">Second</div>
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div v-if="foo && bar">Both true</div>
+        <div v-else>Otherwise</div>
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div v-if="foo">
+          <span v-if="!bar">Nested content</span>
+        </div>
+      </template>
+      `
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div v-if="!foo" class="primary">Content</div>
+        <span v-else class="secondary">Alternative</span>
+      </template>
+      `,
+      output: `
+      <template>
+        <span v-if="foo" class="secondary">Alternative</span>
+        <div v-else class="primary">Content</div>
+      </template>
+      `,
+      errors: [
+        {
+          messageId: 'negatedCondition',
+          line: 3,
+          column: 20,
+          endLine: 3,
+          endColumn: 24
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div v-if="!(foo && bar)" id="negated">Negated condition</div>
+        <span v-else id="positive">Otherwise</span>
+      </template>
+      `,
+      output: `
+      <template>
+        <span v-if="(foo && bar)" id="positive">Otherwise</span>
+        <div v-else id="negated">Negated condition</div>
+      </template>
+      `,
+      errors: [
+        {
+          messageId: 'negatedCondition',
+          line: 3,
+          column: 20,
+          endLine: 3,
+          endColumn: 33
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div v-if="a != b">Not equal</div>
+        <div v-else>Equal</div>
+      </template>
+      `,
+      output: `
+      <template>
+        <div v-if="a == b">Equal</div>
+        <div v-else>Not equal</div>
+      </template>
+      `,
+      errors: [
+        {
+          messageId: 'negatedCondition',
+          line: 3,
+          column: 20,
+          endLine: 3,
+          endColumn: 26
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div v-if="a !== b">Strictly not equal</div>
+        <div v-else>Strictly equal</div>
+      </template>
+      `,
+      output: `
+      <template>
+        <div v-if="a === b">Strictly equal</div>
+        <div v-else>Strictly not equal</div>
+      </template>
+      `,
+      errors: [
+        {
+          messageId: 'negatedCondition',
+          line: 3,
+          column: 20,
+          endLine: 3,
+          endColumn: 27
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div v-if="foo" class="first">First</div>
+        <span v-else-if="!bar" class="second">Second</span>
+        <p v-else class="default">Default</p>
+      </template>
+      `,
+      output: `
+      <template>
+        <div v-if="foo" class="first">First</div>
+        <p v-else-if="bar" class="default">Default</p>
+        <span v-else class="second">Second</span>
+      </template>
+      `,
+      errors: [
+        {
+          messageId: 'negatedCondition',
+          line: 4,
+          column: 26,
+          endLine: 4,
+          endColumn: 30
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div v-if="!a" data-first>First</div>
+        <span v-else-if="!b" data-second>Second</span>
+        <p v-else data-default>Default</p>
+      </template>
+      `,
+      output: `
+      <template>
+        <div v-if="!a" data-first>First</div>
+        <p v-else-if="b" data-default>Default</p>
+        <span v-else data-second>Second</span>
+      </template>
+      `,
+      errors: [
+        {
+          messageId: 'negatedCondition',
+          line: 4,
+          column: 26,
+          endLine: 4,
+          endColumn: 28
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div v-if="!condition" class="div-class" div-attr="foo" div-attr-2 :div-attr-3="foo">div contents</div>
+        <span v-else class="span-class" span-attr="baz" span-attr2 :span-attr-3="baz">span contents</span>
+      </template>
+      `,
+      output: `
+      <template>
+        <span v-if="condition" class="span-class" span-attr="baz" span-attr2 :span-attr-3="baz">span contents</span>
+        <div v-else class="div-class" div-attr="foo" div-attr-2 :div-attr-3="foo">div contents</div>
+      </template>
+      `,
+      errors: [
+        {
+          messageId: 'negatedCondition',
+          line: 3,
+          column: 20,
+          endLine: 3,
+          endColumn: 30
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div v-if="!outer" class="outer-if">
+          <span v-if="!inner" class="inner-if">Inner if content</span>
+          <p v-else class="inner-else">Inner else content</p>
+        </div>
+        <section v-else class="outer-else">
+          <span v-if="!nested" class="nested-if">Nested if content</span>
+          <p v-else class="nested-else">Nested else content</p>
+        </section>
+      </template>
+      `,
+      output: `
+      <template>
+        <section v-if="outer" class="outer-else">
+          <span v-if="!nested" class="nested-if">Nested if content</span>
+          <p v-else class="nested-else">Nested else content</p>
+        </section>
+        <div v-else class="outer-if">
+          <span v-if="!inner" class="inner-if">Inner if content</span>
+          <p v-else class="inner-else">Inner else content</p>
+        </div>
+      </template>
+      `,
+      errors: [
+        {
+          messageId: 'negatedCondition',
+          line: 3,
+          column: 20,
+          endLine: 3,
+          endColumn: 26
+        },
+        {
+          messageId: 'negatedCondition',
+          line: 4,
+          column: 23,
+          endLine: 4,
+          endColumn: 29
+        },
+        {
+          messageId: 'negatedCondition',
+          line: 8,
+          column: 23,
+          endLine: 8,
+          endColumn: 30
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/no-parsing-error.js b/tests/lib/rules/no-parsing-error.js
index 12d195cb8..54194a7b5 100644
--- a/tests/lib/rules/no-parsing-error.js
+++ b/tests/lib/rules/no-parsing-error.js
@@ -5,20 +5,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-parsing-error')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('no-parsing-error', rule, {
@@ -214,6 +205,7 @@ tester.run('no-parsing-error', rule, {
 
     // https://github.com/vuejs/eslint-plugin-vue/issues/1403
     {
+      filename: 'test.vue',
       code: `
       <template>
         <div>
@@ -224,30 +216,53 @@ tester.run('no-parsing-error', rule, {
           </p>
         </div>
       </template>
-      `,
-      filename: 'test.vue'
+      `
     }
   ],
   invalid: [
     {
       filename: 'test.vue',
       code: '<template>{{a b c}}</template>',
-      errors: ['Parsing error: Unexpected token b.']
+      errors: [
+        {
+          message: 'Parsing error: Unexpected token b.',
+          line: 1,
+          column: 15
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div>{{a b c}}</div></template>',
-      errors: ['Parsing error: Unexpected token b.']
+      errors: [
+        {
+          message: 'Parsing error: Unexpected token b.',
+          line: 1,
+          column: 20
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-show="a b c">hello</div></template>',
-      errors: ['Parsing error: Unexpected token b.']
+      errors: [
+        {
+          message: 'Parsing error: Unexpected token b.',
+          line: 1,
+          column: 26
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div v-show="a;b;">hello</div></template>',
-      errors: ['Parsing error: Unexpected token ;.']
+      errors: [
+        {
+          message: 'Parsing error: Unexpected token ;.',
+          line: 1,
+          column: 25
+        }
+      ]
     },
     {
       filename: 'test.vue',
@@ -256,6 +271,7 @@ tester.run('no-parsing-error', rule, {
         {
           message:
             'Parsing error: Expected to be an expression, but got empty.',
+          line: 1,
           column: 24
         }
       ]
@@ -266,6 +282,7 @@ tester.run('no-parsing-error', rule, {
       errors: [
         {
           message: 'Parsing error: Expected to be an alias, but got empty.',
+          line: 1,
           column: 23
         }
       ]
@@ -273,181 +290,388 @@ tester.run('no-parsing-error', rule, {
     {
       filename: 'test.vue',
       code: '<template><div v-for="foo() in list">hello</div></template>',
-      errors: [{ message: 'Parsing error: Unexpected token (.', column: 26 }]
+      errors: [
+        { message: 'Parsing error: Unexpected token (.', line: 1, column: 26 }
+      ]
     },
     {
       code: `<template><!--></template>`,
       options: [{ 'abrupt-closing-of-empty-comment': true }],
-      errors: ['Parsing error: abrupt-closing-of-empty-comment.']
+      errors: [
+        {
+          message: 'Parsing error: abrupt-closing-of-empty-comment.',
+          line: 1,
+          column: 15
+        }
+      ]
     },
     {
       code: `<template><!---></template>`,
       options: [{ 'abrupt-closing-of-empty-comment': true }],
-      errors: ['Parsing error: abrupt-closing-of-empty-comment.']
+      errors: [
+        {
+          message: 'Parsing error: abrupt-closing-of-empty-comment.',
+          line: 1,
+          column: 16
+        }
+      ]
     },
     {
       code: `<template>&#qux;</template>`,
       options: [{ 'absence-of-digits-in-numeric-character-reference': true }],
       errors: [
-        'Parsing error: absence-of-digits-in-numeric-character-reference.'
+        {
+          message:
+            'Parsing error: absence-of-digits-in-numeric-character-reference.',
+          line: 1,
+          column: 13
+        }
       ]
     },
     {
       code: '<template><![CDATA[cdata]]></template>',
       options: [{ 'cdata-in-html-content': true }],
-      errors: ['Parsing error: cdata-in-html-content.']
+      errors: [
+        {
+          message: 'Parsing error: cdata-in-html-content.',
+          line: 1,
+          column: 19
+        }
+      ]
     },
     {
       code: '<template>&#1234567;</template>',
       options: [{ 'character-reference-outside-unicode-range': true }],
-      errors: ['Parsing error: character-reference-outside-unicode-range.']
+      errors: [
+        {
+          message: 'Parsing error: character-reference-outside-unicode-range.',
+          line: 1,
+          column: 21
+        }
+      ]
     },
     {
       code: '<template>\u0003</template>',
       options: [{ 'control-character-in-input-stream': true }],
-      errors: ['Parsing error: control-character-in-input-stream.']
+      errors: [
+        {
+          message: 'Parsing error: control-character-in-input-stream.',
+          line: 1,
+          column: 10
+        }
+      ]
     },
     {
       code: '<template>&#0003;</template>',
       options: [{ 'control-character-reference': true }],
-      errors: ['Parsing error: control-character-reference.']
+      errors: [
+        {
+          message: 'Parsing error: control-character-reference.',
+          line: 1,
+          column: 18
+        }
+      ]
     },
     {
       code: '<template><',
       options: [{ 'eof-before-tag-name': true }],
-      errors: ['Parsing error: eof-before-tag-name.']
+      errors: [
+        {
+          message: 'Parsing error: eof-before-tag-name.',
+          line: 1,
+          column: 12
+        }
+      ]
     },
     {
       code: '<template><svg><![CDATA[cdata',
       options: [{ 'eof-in-cdata': true }],
-      errors: ['Parsing error: eof-in-cdata.']
+      errors: [
+        {
+          message: 'Parsing error: eof-in-cdata.',
+          line: 1,
+          column: 30
+        }
+      ]
     },
     {
       code: '<template><!--comment',
       options: [{ 'eof-in-comment': true }],
-      errors: ['Parsing error: eof-in-comment.']
+      errors: [
+        {
+          message: 'Parsing error: eof-in-comment.',
+          line: 1,
+          column: 22
+        }
+      ]
     },
     {
       code: '<template><div class=""',
       options: [{ 'eof-in-tag': true }],
-      errors: ['Parsing error: eof-in-tag.']
+      errors: [
+        {
+          message: 'Parsing error: eof-in-tag.',
+          line: 1,
+          column: 24
+        }
+      ]
     },
     {
       code: '<template><!--comment--!></template>',
       options: [{ 'incorrectly-closed-comment': true }],
-      errors: ['Parsing error: incorrectly-closed-comment.']
+      errors: [
+        {
+          message: 'Parsing error: incorrectly-closed-comment.',
+          line: 1,
+          column: 25
+        }
+      ]
     },
     {
       code: '<template><!ELEMENT br EMPTY></template>',
       options: [{ 'incorrectly-opened-comment': true }],
-      errors: ['Parsing error: incorrectly-opened-comment.']
+      errors: [
+        {
+          message: 'Parsing error: incorrectly-opened-comment.',
+          line: 1,
+          column: 13
+        }
+      ]
     },
     {
       code: '<template><👍>/template>',
       options: [{ 'invalid-first-character-of-tag-name': true }],
-      errors: ['Parsing error: invalid-first-character-of-tag-name.']
+      errors: [
+        {
+          message: 'Parsing error: invalid-first-character-of-tag-name.',
+          line: 1,
+          column: 12
+        }
+      ]
     },
     {
       code: '<template><div id=></template>',
       options: [{ 'missing-attribute-value': true }],
-      errors: ['Parsing error: missing-attribute-value.']
+      errors: [
+        {
+          message: 'Parsing error: missing-attribute-value.',
+          line: 1,
+          column: 19
+        }
+      ]
     },
     {
       code: '<template></></template>',
       options: [{ 'missing-end-tag-name': true }],
-      errors: ['Parsing error: missing-end-tag-name.']
+      errors: [
+        {
+          message: 'Parsing error: missing-end-tag-name.',
+          line: 1,
+          column: 13
+        }
+      ]
     },
     {
       code: '<template>&amp</template>',
       options: [{ 'missing-semicolon-after-character-reference': true }],
-      errors: ['Parsing error: missing-semicolon-after-character-reference.']
+      errors: [
+        {
+          message:
+            'Parsing error: missing-semicolon-after-character-reference.',
+          line: 1,
+          column: 14
+        }
+      ]
     },
     {
       code: '<template><div id="foo"class="bar"></template>',
       options: [{ 'missing-whitespace-between-attributes': true }],
-      errors: ['Parsing error: missing-whitespace-between-attributes.']
+      errors: [
+        {
+          message: 'Parsing error: missing-whitespace-between-attributes.',
+          line: 1,
+          column: 24
+        }
+      ]
     },
     {
       code: '<template><!--a<!--b--></template>',
       options: [{ 'nested-comment': true }],
-      errors: ['Parsing error: nested-comment.']
+      errors: [
+        {
+          message: 'Parsing error: nested-comment.',
+          line: 1,
+          column: 20
+        }
+      ]
     },
     {
       code: '<template>&#xFFFE;</template>',
       options: [{ 'noncharacter-character-reference': true }],
-      errors: ['Parsing error: noncharacter-character-reference.']
+      errors: [
+        {
+          message: 'Parsing error: noncharacter-character-reference.',
+          line: 1,
+          column: 19
+        }
+      ]
     },
     {
       code: '<template>\uFFFE</template>',
       options: [{ 'noncharacter-in-input-stream': true }],
-      errors: ['Parsing error: noncharacter-in-input-stream.']
+      errors: [
+        {
+          message: 'Parsing error: noncharacter-in-input-stream.',
+          line: 1,
+          column: 10
+        }
+      ]
     },
     {
       code: '<template>&#0000;</template>',
       options: [{ 'null-character-reference': true }],
-      errors: ['Parsing error: null-character-reference.']
+      errors: [
+        {
+          message: 'Parsing error: null-character-reference.',
+          line: 1,
+          column: 18
+        }
+      ]
     },
     {
       code: '<template>&#xD800;</template>',
       options: [{ 'surrogate-character-reference': true }],
-      errors: ['Parsing error: surrogate-character-reference.']
+      errors: [
+        {
+          message: 'Parsing error: surrogate-character-reference.',
+          line: 1,
+          column: 19
+        }
+      ]
     },
     {
       code: '<template>\uD800</template>',
       options: [{ 'surrogate-in-input-stream': true }],
-      errors: ['Parsing error: surrogate-in-input-stream.']
+      errors: [
+        {
+          message: 'Parsing error: surrogate-in-input-stream.',
+          line: 1,
+          column: 10
+        }
+      ]
     },
     {
       code: '<template><div a"bc=""></template>',
       options: [{ 'unexpected-character-in-attribute-name': true }],
-      errors: ['Parsing error: unexpected-character-in-attribute-name.']
+      errors: [
+        {
+          message: 'Parsing error: unexpected-character-in-attribute-name.',
+          line: 1,
+          column: 17
+        }
+      ]
     },
     {
       code: '<template><div foo=bar"></template>',
       options: [{ 'unexpected-character-in-unquoted-attribute-value': true }],
       errors: [
-        'Parsing error: unexpected-character-in-unquoted-attribute-value.'
+        {
+          message:
+            'Parsing error: unexpected-character-in-unquoted-attribute-value.',
+          line: 1,
+          column: 23
+        }
       ]
     },
     {
       code: '<template><div =foo></template>',
       options: [{ 'unexpected-equals-sign-before-attribute-name': true }],
-      errors: ['Parsing error: unexpected-equals-sign-before-attribute-name.']
+      errors: [
+        {
+          message:
+            'Parsing error: unexpected-equals-sign-before-attribute-name.',
+          line: 1,
+          column: 16
+        }
+      ]
     },
     {
       code: '<template>\u0000</template>',
       options: [{ 'unexpected-null-character': true }],
-      errors: ['Parsing error: unexpected-null-character.']
+      errors: [
+        {
+          message: 'Parsing error: unexpected-null-character.',
+          line: 1,
+          column: 11
+        }
+      ]
     },
     {
       code: '<template><?xml?></template>',
       options: [{ 'unexpected-question-mark-instead-of-tag-name': true }],
-      errors: ['Parsing error: unexpected-question-mark-instead-of-tag-name.']
+      errors: [
+        {
+          message:
+            'Parsing error: unexpected-question-mark-instead-of-tag-name.',
+          line: 1,
+          column: 12
+        }
+      ]
     },
     {
       code: '<template><div id="" / class=""></template>',
       options: [{ 'unexpected-solidus-in-tag': true }],
-      errors: ['Parsing error: unexpected-solidus-in-tag.']
+      errors: [
+        {
+          message: 'Parsing error: unexpected-solidus-in-tag.',
+          line: 1,
+          column: 23
+        }
+      ]
     },
     {
       code: '<template>&unknown;</template>',
       options: [{ 'unknown-named-character-reference': true }],
-      errors: ['Parsing error: unknown-named-character-reference.']
+      errors: [
+        {
+          message: 'Parsing error: unknown-named-character-reference.',
+          line: 1,
+          column: 19
+        }
+      ]
     },
     {
       code: '<template><div></div id=""></template>',
       options: [{ 'end-tag-with-attributes': true }],
-      errors: ['Parsing error: end-tag-with-attributes.']
+      errors: [
+        {
+          message: 'Parsing error: end-tag-with-attributes.',
+          line: 1,
+          column: 22
+        }
+      ]
     },
     {
       code: '<template><div id="" id=""></div></template>',
       options: [{ 'duplicate-attribute': true }],
-      errors: ['Parsing error: duplicate-attribute.']
+      errors: [
+        {
+          message: 'Parsing error: duplicate-attribute.',
+          line: 1,
+          column: 22
+        }
+      ]
     },
     {
       code: '<template><div></div/></template>',
       options: [{ 'end-tag-with-trailing-solidus': true }],
-      errors: ['Parsing error: end-tag-with-trailing-solidus.']
+      errors: [
+        {
+          message: 'Parsing error: end-tag-with-trailing-solidus.',
+          line: 1,
+          column: 21
+        }
+      ]
     },
     {
       code: '<template><div/></template>',
@@ -455,166 +679,400 @@ tester.run('no-parsing-error', rule, {
         { 'non-void-html-element-start-tag-with-trailing-solidus': true }
       ],
       errors: [
-        'Parsing error: non-void-html-element-start-tag-with-trailing-solidus.'
+        {
+          message:
+            'Parsing error: non-void-html-element-start-tag-with-trailing-solidus.',
+          line: 1,
+          column: 11
+        }
       ]
     },
     {
       code: '<template></div></template>',
       options: [{ 'x-invalid-end-tag': true }],
-      errors: ['Parsing error: x-invalid-end-tag.']
+      errors: [
+        {
+          message: 'Parsing error: x-invalid-end-tag.',
+          line: 1,
+          column: 11
+        }
+      ]
     },
     {
       code: '<template><div xmlns=""></template>',
       options: [{ 'x-invalid-namespace': true }],
-      errors: ['Parsing error: x-invalid-namespace.']
+      errors: [
+        {
+          message: 'Parsing error: x-invalid-namespace.',
+          line: 1,
+          column: 16
+        }
+      ]
     },
     {
       code: `<template><!--></template>`,
-      errors: ['Parsing error: abrupt-closing-of-empty-comment.']
+      errors: [
+        {
+          message: 'Parsing error: abrupt-closing-of-empty-comment.',
+          line: 1,
+          column: 15
+        }
+      ]
     },
     {
       code: `<template><!---></template>`,
-      errors: ['Parsing error: abrupt-closing-of-empty-comment.']
+      errors: [
+        {
+          message: 'Parsing error: abrupt-closing-of-empty-comment.',
+          line: 1,
+          column: 16
+        }
+      ]
     },
     {
       code: `<template>&#qux;</template>`,
       errors: [
-        'Parsing error: absence-of-digits-in-numeric-character-reference.'
+        {
+          message:
+            'Parsing error: absence-of-digits-in-numeric-character-reference.',
+          line: 1,
+          column: 13
+        }
       ]
     },
     {
       code: '<template><![CDATA[cdata]]></template>',
-      errors: ['Parsing error: cdata-in-html-content.']
+      errors: [
+        {
+          message: 'Parsing error: cdata-in-html-content.',
+          line: 1,
+          column: 19
+        }
+      ]
     },
     {
       code: '<template>&#1234567;</template>',
-      errors: ['Parsing error: character-reference-outside-unicode-range.']
+      errors: [
+        {
+          message: 'Parsing error: character-reference-outside-unicode-range.',
+          line: 1,
+          column: 21
+        }
+      ]
     },
     {
       code: '<template>\u0003</template>',
-      errors: ['Parsing error: control-character-in-input-stream.']
+      errors: [
+        {
+          message: 'Parsing error: control-character-in-input-stream.',
+          line: 1,
+          column: 10
+        }
+      ]
     },
     {
       code: '<template>&#0003;</template>',
-      errors: ['Parsing error: control-character-reference.']
+      errors: [
+        {
+          message: 'Parsing error: control-character-reference.',
+          line: 1,
+          column: 18
+        }
+      ]
     },
     {
       code: '<template><',
-      errors: ['Parsing error: eof-before-tag-name.']
+      errors: [
+        {
+          message: 'Parsing error: eof-before-tag-name.',
+          line: 1,
+          column: 12
+        }
+      ]
     },
     {
       code: '<template><svg><![CDATA[cdata',
-      errors: ['Parsing error: eof-in-cdata.']
+      errors: [
+        {
+          message: 'Parsing error: eof-in-cdata.',
+          line: 1,
+          column: 30
+        }
+      ]
     },
     {
       code: '<template><!--comment',
-      errors: ['Parsing error: eof-in-comment.']
+      errors: [
+        {
+          message: 'Parsing error: eof-in-comment.',
+          line: 1,
+          column: 22
+        }
+      ]
     },
     {
       code: '<template><div class=""',
-      errors: ['Parsing error: eof-in-tag.']
+      errors: [
+        {
+          message: 'Parsing error: eof-in-tag.',
+          line: 1,
+          column: 24
+        }
+      ]
     },
     {
       code: '<template><!--comment--!></template>',
-      errors: ['Parsing error: incorrectly-closed-comment.']
+      errors: [
+        {
+          message: 'Parsing error: incorrectly-closed-comment.',
+          line: 1,
+          column: 25
+        }
+      ]
     },
     {
       code: '<template><!ELEMENT br EMPTY></template>',
-      errors: ['Parsing error: incorrectly-opened-comment.']
+      errors: [
+        {
+          message: 'Parsing error: incorrectly-opened-comment.',
+          line: 1,
+          column: 13
+        }
+      ]
     },
     {
       code: '<template><👍>/template>',
-      errors: ['Parsing error: invalid-first-character-of-tag-name.']
+      errors: [
+        {
+          message: 'Parsing error: invalid-first-character-of-tag-name.',
+          line: 1,
+          column: 12
+        }
+      ]
     },
     {
       code: '<template><div id=></template>',
-      errors: ['Parsing error: missing-attribute-value.']
+      errors: [
+        {
+          message: 'Parsing error: missing-attribute-value.',
+          line: 1,
+          column: 19
+        }
+      ]
     },
     {
       code: '<template></></template>',
-      errors: ['Parsing error: missing-end-tag-name.']
+      errors: [
+        {
+          message: 'Parsing error: missing-end-tag-name.',
+          line: 1,
+          column: 13
+        }
+      ]
     },
     {
       code: '<template>&amp</template>',
-      errors: ['Parsing error: missing-semicolon-after-character-reference.']
+      errors: [
+        {
+          message:
+            'Parsing error: missing-semicolon-after-character-reference.',
+          line: 1,
+          column: 14
+        }
+      ]
     },
     {
       code: '<template><div id="foo"class="bar"></template>',
-      errors: ['Parsing error: missing-whitespace-between-attributes.']
+      errors: [
+        {
+          message: 'Parsing error: missing-whitespace-between-attributes.',
+          line: 1,
+          column: 24
+        }
+      ]
     },
     {
       code: '<template><!--a<!--b--></template>',
-      errors: ['Parsing error: nested-comment.']
+      errors: [
+        {
+          message: 'Parsing error: nested-comment.',
+          line: 1,
+          column: 20
+        }
+      ]
     },
     {
       code: '<template>&#xFFFE;</template>',
-      errors: ['Parsing error: noncharacter-character-reference.']
+      errors: [
+        {
+          message: 'Parsing error: noncharacter-character-reference.',
+          line: 1,
+          column: 19
+        }
+      ]
     },
     {
       code: '<template>\uFFFE</template>',
-      errors: ['Parsing error: noncharacter-in-input-stream.']
+      errors: [
+        {
+          message: 'Parsing error: noncharacter-in-input-stream.',
+          line: 1,
+          column: 10
+        }
+      ]
     },
     {
       code: '<template>&#0000;</template>',
-      errors: ['Parsing error: null-character-reference.']
+      errors: [
+        {
+          message: 'Parsing error: null-character-reference.',
+          line: 1,
+          column: 18
+        }
+      ]
     },
     {
       code: '<template>&#xD800;</template>',
-      errors: ['Parsing error: surrogate-character-reference.']
+      errors: [
+        {
+          message: 'Parsing error: surrogate-character-reference.',
+          line: 1,
+          column: 19
+        }
+      ]
     },
     {
       code: '<template>\uD800</template>',
-      errors: ['Parsing error: surrogate-in-input-stream.']
+      errors: [
+        {
+          message: 'Parsing error: surrogate-in-input-stream.',
+          line: 1,
+          column: 10
+        }
+      ]
     },
     {
       code: '<template><div a"bc=""></template>',
-      errors: ['Parsing error: unexpected-character-in-attribute-name.']
+      errors: [
+        {
+          message: 'Parsing error: unexpected-character-in-attribute-name.',
+          line: 1,
+          column: 17
+        }
+      ]
     },
     {
       code: '<template><div foo=bar"></template>',
       errors: [
-        'Parsing error: unexpected-character-in-unquoted-attribute-value.'
+        {
+          message:
+            'Parsing error: unexpected-character-in-unquoted-attribute-value.',
+          line: 1,
+          column: 23
+        }
       ]
     },
     {
       code: '<template><div =foo></template>',
-      errors: ['Parsing error: unexpected-equals-sign-before-attribute-name.']
+      errors: [
+        {
+          message:
+            'Parsing error: unexpected-equals-sign-before-attribute-name.',
+          line: 1,
+          column: 16
+        }
+      ]
     },
     {
       code: '<template>\u0000</template>',
-      errors: ['Parsing error: unexpected-null-character.']
+      errors: [
+        {
+          message: 'Parsing error: unexpected-null-character.',
+          line: 1,
+          column: 11
+        }
+      ]
     },
     {
       code: '<template><?xml?></template>',
-      errors: ['Parsing error: unexpected-question-mark-instead-of-tag-name.']
+      errors: [
+        {
+          message:
+            'Parsing error: unexpected-question-mark-instead-of-tag-name.',
+          line: 1,
+          column: 12
+        }
+      ]
     },
     {
       code: '<template><div id="" / class=""></template>',
-      errors: ['Parsing error: unexpected-solidus-in-tag.']
+      errors: [
+        {
+          message: 'Parsing error: unexpected-solidus-in-tag.',
+          line: 1,
+          column: 23
+        }
+      ]
     },
     {
       code: '<template>&unknown;</template>',
-      errors: ['Parsing error: unknown-named-character-reference.']
+      errors: [
+        {
+          message: 'Parsing error: unknown-named-character-reference.',
+          line: 1,
+          column: 19
+        }
+      ]
     },
     {
       code: '<template><div></div id=""></template>',
-      errors: ['Parsing error: end-tag-with-attributes.']
+      errors: [
+        {
+          message: 'Parsing error: end-tag-with-attributes.',
+          line: 1,
+          column: 22
+        }
+      ]
     },
     {
       code: '<template><div id="" id=""></div></template>',
-      errors: ['Parsing error: duplicate-attribute.']
+      errors: [
+        {
+          message: 'Parsing error: duplicate-attribute.',
+          line: 1,
+          column: 22
+        }
+      ]
     },
     {
       code: '<template><div></div/></template>',
-      errors: ['Parsing error: end-tag-with-trailing-solidus.']
+      errors: [
+        {
+          message: 'Parsing error: end-tag-with-trailing-solidus.',
+          line: 1,
+          column: 21
+        }
+      ]
     },
     {
       code: '<template></div></template>',
-      errors: ['Parsing error: x-invalid-end-tag.']
+      errors: [
+        {
+          message: 'Parsing error: x-invalid-end-tag.',
+          line: 1,
+          column: 11
+        }
+      ]
     },
     {
       code: '<template><div xmlns=""></template>',
-      errors: ['Parsing error: x-invalid-namespace.']
+      errors: [
+        {
+          message: 'Parsing error: x-invalid-namespace.',
+          line: 1,
+          column: 16
+        }
+      ]
     },
 
     //style vars
diff --git a/tests/lib/rules/no-potential-component-option-typo.js b/tests/lib/rules/no-potential-component-option-typo.js
index 12f8ed04e..63a6a42cf 100644
--- a/tests/lib/rules/no-potential-component-option-typo.js
+++ b/tests/lib/rules/no-potential-component-option-typo.js
@@ -4,21 +4,16 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/no-potential-component-option-typo')
 
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2018, sourceType: 'module' }
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2018,
+    sourceType: 'module'
+  }
 })
 
 tester.run('no-potential-component-option-typo', rule, {
@@ -166,7 +161,7 @@ tester.run('no-potential-component-option-typo', rule, {
         delimiters: {},
         comments: {},
         inheritAttrs: {},
-      }; 
+      };
       </script>
       `,
       options: [{ presets: ['all'] }]
@@ -182,11 +177,14 @@ tester.run('no-potential-component-option-typo', rule, {
         method: {}
       }
       </script>`,
+      options: [{ custom: ['data', 'methods'] }],
       errors: [
         {
           message: "'dat' may be a typo, which is similar to option [data].",
           line: 4,
           column: 9,
+          endLine: 4,
+          endColumn: 12,
           suggestions: [
             {
               desc: `Replace property 'dat' to 'data'`,
@@ -204,6 +202,8 @@ tester.run('no-potential-component-option-typo', rule, {
           message: `'method' may be a typo, which is similar to option [methods].`,
           line: 5,
           column: 9,
+          endLine: 5,
+          endColumn: 15,
           suggestions: [
             {
               desc: `Replace property 'method' to 'methods'`,
@@ -217,8 +217,7 @@ tester.run('no-potential-component-option-typo', rule, {
             }
           ]
         }
-      ],
-      options: [{ custom: ['data', 'methods'] }]
+      ]
     },
     // test if user define custom rule is duplicate with presets
     //  test custom option that is not available in the presets
@@ -232,11 +231,16 @@ tester.run('no-potential-component-option-typo', rule, {
         custo: {}
       }
       </script>`,
+      options: [
+        { custom: ['data', 'methods', 'custom', 'foo'], presets: ['all'] }
+      ],
       errors: [
         {
           message: "'dat' may be a typo, which is similar to option [data].",
           line: 4,
           column: 9,
+          endLine: 4,
+          endColumn: 12,
           suggestions: [
             {
               desc: `Replace property 'dat' to 'data'`,
@@ -255,6 +259,8 @@ tester.run('no-potential-component-option-typo', rule, {
           message: `'method' may be a typo, which is similar to option [methods].`,
           line: 5,
           column: 9,
+          endLine: 5,
+          endColumn: 15,
           suggestions: [
             {
               desc: `Replace property 'method' to 'methods'`,
@@ -273,6 +279,8 @@ tester.run('no-potential-component-option-typo', rule, {
           message: `'custo' may be a typo, which is similar to option [custom].`,
           line: 6,
           column: 9,
+          endLine: 6,
+          endColumn: 14,
           suggestions: [
             {
               desc: `Replace property 'custo' to 'custom'`,
@@ -287,9 +295,6 @@ tester.run('no-potential-component-option-typo', rule, {
             }
           ]
         }
-      ],
-      options: [
-        { custom: ['data', 'methods', 'custom', 'foo'], presets: ['all'] }
       ]
     },
     // test if report correctly, only have preset option
@@ -302,11 +307,14 @@ tester.run('no-potential-component-option-typo', rule, {
         method: {}
       }
       </script>`,
+      options: [{ presets: ['vue'] }],
       errors: [
         {
           message: "'dat' may be a typo, which is similar to option [data].",
           line: 4,
           column: 9,
+          endLine: 4,
+          endColumn: 12,
           suggestions: [
             {
               desc: `Replace property 'dat' to 'data'`,
@@ -324,6 +332,8 @@ tester.run('no-potential-component-option-typo', rule, {
           message: `'method' may be a typo, which is similar to option [methods].`,
           line: 5,
           column: 9,
+          endLine: 5,
+          endColumn: 15,
           suggestions: [
             {
               desc: `Replace property 'method' to 'methods'`,
@@ -337,8 +347,7 @@ tester.run('no-potential-component-option-typo', rule, {
             }
           ]
         }
-      ],
-      options: [{ presets: ['vue'] }]
+      ]
     },
     // multi preset report typo
     {
@@ -351,11 +360,14 @@ tester.run('no-potential-component-option-typo', rule, {
         method: {}
       }
       </script>`,
+      options: [{ presets: ['vue', 'vue-router'] }],
       errors: [
         {
           message: "'dat' may be a typo, which is similar to option [data].",
           line: 4,
           column: 9,
+          endLine: 4,
+          endColumn: 12,
           suggestions: [
             {
               desc: `Replace property 'dat' to 'data'`,
@@ -375,6 +387,8 @@ tester.run('no-potential-component-option-typo', rule, {
             "'beforeRouteEntr' may be a typo, which is similar to option [beforeRouteEnter].",
           line: 5,
           column: 9,
+          endLine: 5,
+          endColumn: 24,
           suggestions: [
             {
               desc: `Replace property 'beforeRouteEntr' to 'beforeRouteEnter'`,
@@ -393,6 +407,8 @@ tester.run('no-potential-component-option-typo', rule, {
           message: `'method' may be a typo, which is similar to option [methods].`,
           line: 6,
           column: 9,
+          endLine: 6,
+          endColumn: 15,
           suggestions: [
             {
               desc: `Replace property 'method' to 'methods'`,
@@ -407,8 +423,7 @@ tester.run('no-potential-component-option-typo', rule, {
             }
           ]
         }
-      ],
-      options: [{ presets: ['vue', 'vue-router'] }]
+      ]
     },
     // test multi suggestion
     {
@@ -419,11 +434,14 @@ tester.run('no-potential-component-option-typo', rule, {
         method: {}
       }
       </script>`,
+      options: [{ custom: ['data', 'methods'], threshold: 10, presets: [] }],
       errors: [
         {
           message: `'method' may be a typo, which is similar to option [methods,data].`,
           line: 4,
           column: 9,
+          endLine: 4,
+          endColumn: 15,
           suggestions: [
             {
               desc: `Replace property 'method' to 'methods'`,
@@ -445,8 +463,7 @@ tester.run('no-potential-component-option-typo', rule, {
             }
           ]
         }
-      ],
-      options: [{ custom: ['data', 'methods'], threshold: 10, presets: [] }]
+      ]
     }
   ]
 })
diff --git a/tests/lib/rules/no-ref-as-operand.js b/tests/lib/rules/no-ref-as-operand.js
index fb564ce17..86cd7bd54 100644
--- a/tests/lib/rules/no-ref-as-operand.js
+++ b/tests/lib/rules/no-ref-as-operand.js
@@ -3,12 +3,15 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-ref-as-operand')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2020, sourceType: 'module' }
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
 })
 
 tester.run('no-ref-as-operand', rule, {
@@ -131,24 +134,180 @@ tester.run('no-ref-as-operand', rule, {
     const count = ref(0)
     const foo = count
     `,
-    {
-      code: `
+    `
       <script>
         import { ref, computed, toRef, customRef, shallowRef } from 'vue'
         const foo = shallowRef({})
         foo[bar] = 123
       </script>
-      `
-    },
-    {
-      code: `
+    `,
+    `
       <script>
         import { ref, computed, toRef, customRef, shallowRef } from 'vue'
         const foo = shallowRef({})
         const isComp = foo.effect
       </script>
-      `
+    `,
+    `
+      <script>
+      import { ref } from 'vue'
+      let foo;
+
+      if (!foo) {
+        foo = ref(5);
+      }
+      </script>
+    `,
+    `
+      <script>
+      import { ref } from 'vue'
+      let foo = undefined;
+
+      if (!foo) {
+        foo = ref(5);
+      }
+      </script>
+    `,
+    `
+      <script>
+      import { ref } from 'vue'
+      const foo = ref(0)
+      func(foo)
+      function func(foo) {}
+      </script>
+    `,
+    `
+      <script>
+      import { ref } from 'vue'
+      const foo = ref(0)
+      tag\`\${foo}\`
+      function tag(arr, ...args) {}
+      </script>
+    `,
+    `
+    <script setup>
+    const model = defineModel();
+    console.log(model.value);
+    function process() {
+      if (model.value) console.log('foo')
+    }
+    function update(value) {
+      model.value = value;
+    }
+    </script>
+    `,
+    `
+    <script setup>
+    const [model, mod] = defineModel();
+    console.log(model.value);
+    function process() {
+      if (model.value) console.log('foo')
+    }
+    function update(value) {
+      model.value = value;
+    }
+    </script>
+    `,
+    `
+    <script setup>
+    const emit = defineEmits(['test'])
+    const [model, mod] = defineModel();
+
+    function update() {
+      emit('test', model.value)
     }
+    </script>
+    `,
+    `
+    <script>
+    import { ref, defineComponent } from 'vue'
+
+    export default defineComponent({
+      emits: ['incremented'],
+      setup(_, ctx) {
+        const counter = ref(0)
+
+        ctx.emit('incremented', counter.value)
+
+        return {
+          counter
+        }
+      }
+    })
+    </script>
+    `,
+    `
+    <script>
+    import { ref, defineComponent } from 'vue'
+
+    export default defineComponent({
+      emits: ['incremented'],
+      setup(_, { emit }) {
+        const counter = ref(0)
+
+        emit('incremented', counter.value)
+
+        return {
+          counter
+        }
+      }
+    })
+    </script>
+    `,
+    `
+    <script>
+    import { ref, defineComponent } from 'vue'
+
+    export default defineComponent({
+      emits: ['incremented'],
+      setup(_, { emit }) {
+        const counter = ref(0)
+
+        emit('incremented', counter.value, 'xxx')
+
+        return {
+          counter
+        }
+      }
+    })
+    </script>
+    `,
+    `
+    <script>
+    import { ref, defineComponent } from 'vue'
+
+    export default defineComponent({
+      emits: ['incremented'],
+      setup(_, { emit }) {
+        const counter = ref(0)
+
+        emit('incremented', 'xxx')
+
+        return {
+          counter
+        }
+      }
+    })
+    </script>
+    `,
+    `
+    <script>
+    import { ref, defineComponent } from 'vue'
+
+    export default defineComponent({
+      emits: ['incremented'],
+      setup(_, { emit }) {
+        const counter = ref(0)
+
+        emit('incremented')
+
+        return {
+          counter
+        }
+      }
+    })
+    </script>
+    `
   ],
   invalid: [
     {
@@ -331,7 +490,10 @@ tester.run('no-ref-as-operand', rule, {
       errors: [
         {
           messageId: 'requireDotValue',
-          line: 4
+          line: 4,
+          column: 11,
+          endLine: 4,
+          endColumn: 14
         }
       ]
     },
@@ -353,7 +515,10 @@ tester.run('no-ref-as-operand', rule, {
       errors: [
         {
           messageId: 'requireDotValue',
-          line: 4
+          line: 4,
+          column: 15,
+          endLine: 4,
+          endColumn: 18
         }
       ]
     },
@@ -377,19 +542,31 @@ tester.run('no-ref-as-operand', rule, {
       errors: [
         {
           messageId: 'requireDotValue',
-          line: 4
+          line: 4,
+          column: 16,
+          endLine: 4,
+          endColumn: 19
         },
         {
           messageId: 'requireDotValue',
-          line: 5
+          line: 5,
+          column: 16,
+          endLine: 5,
+          endColumn: 19
         },
         {
           messageId: 'requireDotValue',
-          line: 6
+          line: 6,
+          column: 16,
+          endLine: 6,
+          endColumn: 19
         },
         {
           messageId: 'requireDotValue',
-          line: 7
+          line: 7,
+          column: 16,
+          endLine: 7,
+          endColumn: 19
         }
       ]
     },
@@ -413,19 +590,31 @@ tester.run('no-ref-as-operand', rule, {
       errors: [
         {
           messageId: 'requireDotValue',
-          line: 4
+          line: 4,
+          column: 7,
+          endLine: 4,
+          endColumn: 10
         },
         {
           messageId: 'requireDotValue',
-          line: 5
+          line: 5,
+          column: 7,
+          endLine: 5,
+          endColumn: 10
         },
         {
           messageId: 'requireDotValue',
-          line: 6
+          line: 6,
+          column: 14,
+          endLine: 6,
+          endColumn: 17
         },
         {
           messageId: 'requireDotValue',
-          line: 7
+          line: 7,
+          column: 14,
+          endLine: 7,
+          endColumn: 17
         }
       ]
     },
@@ -445,11 +634,17 @@ tester.run('no-ref-as-operand', rule, {
       errors: [
         {
           messageId: 'requireDotValue',
-          line: 4
+          line: 4,
+          column: 15,
+          endLine: 4,
+          endColumn: 18
         },
         {
           messageId: 'requireDotValue',
-          line: 5
+          line: 5,
+          column: 15,
+          endLine: 5,
+          endColumn: 18
         }
       ]
     },
@@ -467,7 +662,10 @@ tester.run('no-ref-as-operand', rule, {
       errors: [
         {
           messageId: 'requireDotValue',
-          line: 4
+          line: 4,
+          column: 15,
+          endLine: 4,
+          endColumn: 18
         }
       ]
     },
@@ -507,15 +705,24 @@ tester.run('no-ref-as-operand', rule, {
       errors: [
         {
           messageId: 'requireDotValue',
-          line: 7
+          line: 7,
+          column: 13,
+          endLine: 7,
+          endColumn: 18
         },
         {
           messageId: 'requireDotValue',
-          line: 8
+          line: 8,
+          column: 25,
+          endLine: 8,
+          endColumn: 30
         },
         {
           messageId: 'requireDotValue',
-          line: 9
+          line: 9,
+          column: 29,
+          endLine: 9,
+          endColumn: 34
         }
       ]
     },
@@ -604,27 +811,42 @@ tester.run('no-ref-as-operand', rule, {
         {
           message:
             'Must use `.value` to read or write the value wrapped by `ref()`.',
-          line: 33
+          line: 33,
+          column: 9,
+          endLine: 33,
+          endColumn: 14
         },
         {
           message:
             'Must use `.value` to read or write the value wrapped by `computed()`.',
-          line: 34
+          line: 34,
+          column: 9,
+          endLine: 34,
+          endColumn: 15
         },
         {
           message:
             'Must use `.value` to read or write the value wrapped by `toRef()`.',
-          line: 36
+          line: 36,
+          column: 22,
+          endLine: 36,
+          endColumn: 28
         },
         {
           message:
             'Must use `.value` to read or write the value wrapped by `customRef()`.',
-          line: 36
+          line: 36,
+          column: 34,
+          endLine: 36,
+          endColumn: 38
         },
         {
           message:
             'Must use `.value` to read or write the value wrapped by `shallowRef()`.',
-          line: 38
+          line: 38,
+          column: 19,
+          endLine: 38,
+          endColumn: 22
         }
       ]
     },
@@ -645,7 +867,11 @@ tester.run('no-ref-as-operand', rule, {
       `,
       errors: [
         {
-          messageId: 'requireDotValue'
+          messageId: 'requireDotValue',
+          line: 5,
+          column: 9,
+          endLine: 5,
+          endColumn: 12
         }
       ]
     },
@@ -666,7 +892,361 @@ tester.run('no-ref-as-operand', rule, {
       `,
       errors: [
         {
-          messageId: 'requireDotValue'
+          messageId: 'requireDotValue',
+          line: 5,
+          column: 21,
+          endLine: 5,
+          endColumn: 24
+        }
+      ]
+    },
+    {
+      code: `
+      <script>
+      import { ref } from 'vue'
+      let foo = undefined;
+
+      if (!foo) {
+        foo = ref(5);
+      }
+      let bar = foo;
+      bar = 4;
+      </script>
+      `,
+      output: `
+      <script>
+      import { ref } from 'vue'
+      let foo = undefined;
+
+      if (!foo) {
+        foo = ref(5);
+      }
+      let bar = foo;
+      bar.value = 4;
+      </script>
+      `,
+      errors: [
+        {
+          message:
+            'Must use `.value` to read or write the value wrapped by `ref()`.',
+          line: 10,
+          column: 7,
+          endLine: 10,
+          endColumn: 10
+        }
+      ]
+    },
+    {
+      code: `
+      <script>
+      let model = defineModel();
+      console.log(model);
+      function process() {
+        if (model) console.log('foo')
+      }
+      function update(value) {
+        model = value;
+      }
+      </script>
+      `,
+      output: `
+      <script>
+      let model = defineModel();
+      console.log(model);
+      function process() {
+        if (model.value) console.log('foo')
+      }
+      function update(value) {
+        model.value = value;
+      }
+      </script>
+      `,
+      errors: [
+        {
+          message:
+            'Must use `.value` to read or write the value wrapped by `defineModel()`.',
+          line: 6,
+          column: 13,
+          endLine: 6,
+          endColumn: 18
+        },
+        {
+          message:
+            'Must use `.value` to read or write the value wrapped by `defineModel()`.',
+          line: 9,
+          column: 9,
+          endLine: 9,
+          endColumn: 14
+        }
+      ]
+    },
+    {
+      code: `
+      <script setup>
+      let [model, mod] = defineModel();
+      console.log(model);
+      function process() {
+        if (model) console.log('foo')
+      }
+      function update(value) {
+        model = value;
+      }
+      </script>
+      `,
+      output: `
+      <script setup>
+      let [model, mod] = defineModel();
+      console.log(model);
+      function process() {
+        if (model.value) console.log('foo')
+      }
+      function update(value) {
+        model.value = value;
+      }
+      </script>
+      `,
+      errors: [
+        {
+          message:
+            'Must use `.value` to read or write the value wrapped by `defineModel()`.',
+          line: 6,
+          column: 13,
+          endLine: 6,
+          endColumn: 18
+        },
+        {
+          message:
+            'Must use `.value` to read or write the value wrapped by `defineModel()`.',
+          line: 9,
+          column: 9,
+          endLine: 9,
+          endColumn: 14
+        }
+      ]
+    },
+    {
+      code: `
+      <script setup>
+      import { ref } from 'vue'
+      const emits = defineEmits(['test'])
+      const count = ref(0)
+
+      function update() {
+        emits('test', count)
+      }
+      </script>
+      `,
+      output: `
+      <script setup>
+      import { ref } from 'vue'
+      const emits = defineEmits(['test'])
+      const count = ref(0)
+
+      function update() {
+        emits('test', count.value)
+      }
+      </script>
+      `,
+      errors: [
+        {
+          message:
+            'Must use `.value` to read or write the value wrapped by `ref()`.',
+          line: 8,
+          column: 23,
+          endLine: 8,
+          endColumn: 28
+        }
+      ]
+    },
+    {
+      code: `
+      <script>
+      import { ref, defineComponent } from 'vue'
+
+      export default defineComponent({
+        emits: ['incremented'],
+        setup(_, ctx) {
+          const counter = ref(0)
+
+          ctx.emit('incremented', counter)
+
+          return {
+            counter
+          }
+        }
+      })
+      </script>
+      `,
+      output: `
+      <script>
+      import { ref, defineComponent } from 'vue'
+
+      export default defineComponent({
+        emits: ['incremented'],
+        setup(_, ctx) {
+          const counter = ref(0)
+
+          ctx.emit('incremented', counter.value)
+
+          return {
+            counter
+          }
+        }
+      })
+      </script>
+      `,
+      errors: [
+        {
+          message:
+            'Must use `.value` to read or write the value wrapped by `ref()`.',
+          line: 10,
+          column: 35,
+          endLine: 10,
+          endColumn: 42
+        }
+      ]
+    },
+    {
+      code: `
+      <script>
+      import { ref, defineComponent } from 'vue'
+
+      export default defineComponent({
+        emits: ['incremented'],
+        setup(_, { emit }) {
+          const counter = ref(0)
+
+          emit('incremented', counter)
+
+          return {
+            counter
+          }
+        }
+      })
+      </script>
+      `,
+      output: `
+      <script>
+      import { ref, defineComponent } from 'vue'
+
+      export default defineComponent({
+        emits: ['incremented'],
+        setup(_, { emit }) {
+          const counter = ref(0)
+
+          emit('incremented', counter.value)
+
+          return {
+            counter
+          }
+        }
+      })
+      </script>
+      `,
+      errors: [
+        {
+          message:
+            'Must use `.value` to read or write the value wrapped by `ref()`.',
+          line: 10,
+          column: 31,
+          endLine: 10,
+          endColumn: 38
+        }
+      ]
+    },
+    {
+      code: `
+      <script>
+      import { ref, defineComponent } from 'vue'
+
+      export default defineComponent({
+        emits: ['incremented'],
+        setup(_, { emit }) {
+          const counter = ref(0)
+
+          emit('incremented', 'xxx', counter)
+
+          return {
+            counter
+          }
+        }
+      })
+      </script>
+      `,
+      output: `
+      <script>
+      import { ref, defineComponent } from 'vue'
+
+      export default defineComponent({
+        emits: ['incremented'],
+        setup(_, { emit }) {
+          const counter = ref(0)
+
+          emit('incremented', 'xxx', counter.value)
+
+          return {
+            counter
+          }
+        }
+      })
+      </script>
+      `,
+      errors: [
+        {
+          message:
+            'Must use `.value` to read or write the value wrapped by `ref()`.',
+          line: 10,
+          column: 38,
+          endLine: 10,
+          endColumn: 45
+        }
+      ]
+    },
+    // Auto-import
+    {
+      code: `
+      let count = ref(0)
+
+      count++ // error
+      console.log(count + 1) // error
+      console.log(1 + count) // error
+      `,
+      output: `
+      let count = ref(0)
+
+      count.value++ // error
+      console.log(count.value + 1) // error
+      console.log(1 + count.value) // error
+      `,
+      languageOptions: {
+        globals: {
+          ref: 'readonly'
+        }
+      },
+      errors: [
+        {
+          message:
+            'Must use `.value` to read or write the value wrapped by `ref()`.',
+          line: 4,
+          column: 7,
+          endLine: 4,
+          endColumn: 12
+        },
+        {
+          message:
+            'Must use `.value` to read or write the value wrapped by `ref()`.',
+          line: 5,
+          column: 19,
+          endLine: 5,
+          endColumn: 24
+        },
+        {
+          message:
+            'Must use `.value` to read or write the value wrapped by `ref()`.',
+          line: 6,
+          column: 23,
+          endLine: 6,
+          endColumn: 28
         }
       ]
     }
diff --git a/tests/lib/rules/no-ref-object-reactivity-loss.js b/tests/lib/rules/no-ref-object-reactivity-loss.js
new file mode 100644
index 000000000..c026ba599
--- /dev/null
+++ b/tests/lib/rules/no-ref-object-reactivity-loss.js
@@ -0,0 +1,474 @@
+/**
+ * @author Yosuke Ota <https://github.com/ota-meshi>
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/no-ref-object-reactivity-loss')
+
+const tester = new RuleTester({
+  languageOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('no-ref-object-reactivity-loss', rule, {
+  valid: [
+    `
+    import { ref } from 'vue'
+    const count = ref(0)
+    const value1 = computed(() => count.value)
+    const value2 = fn(count)
+    const value3 = computed(() => fn(count.value))
+    `,
+    `
+    import { toRefs } from 'vue'
+    const { count } = toRefs(foo)
+    const value1 = computed(() => count.value)
+    const value2 = fn(count)
+    const value3 = computed(() => fn(count.value))
+    `,
+    `
+    import { toRefs } from 'vue'
+    const refs = toRefs(foo)
+    const value1 = computed(() => refs.count.value)
+    const value2 = fn(refs.count)
+    const value3 = computed(() => fn(refs.count.value))
+    `,
+    `
+    import { ref } from 'vue'
+    const count = ref(0)
+    count.value = 42
+    `,
+    `
+    import { ref } from 'vue'
+    const count = ref(0)
+    count.value++
+    `,
+    `
+    import { ref } from 'vue'
+    const count = ref(0)
+    ;( { foo: count.value } = bar )
+    `,
+    `
+    import { ref, computed, shallowRef, customRef, toRef } from 'vue'
+    const r = ref(0)
+    const c = computed(() => r.value)
+    const sr = shallowRef({ count: 1 })
+    const cr = customRef((track, trigger) => {
+      return {
+        get() { return sr.value },
+        set(newValue) { sr.value = newValue }
+      }
+    })
+    const tr = toRef(sr, 'count')
+    function fn() {
+      console.log(c.value, cr.value, tr.value)
+    }
+    `,
+    // unknown
+    `
+    import { ref } from 'vue'
+    const [a] = ref(0)
+    foo.bar = ref(0)
+    unknown.value
+    `,
+    `
+    import { ref } from 'vue'
+    let foo = ref(0)
+    foo = foo
+    `,
+    // Reactivity Transform
+    `
+    const count = $ref(0)
+    const value1 = computed(() => count)
+    const value2 = fn($$(count))
+    const value3 = computed(() => fn(count))
+    `,
+    `
+    const count = $(foo)
+    const value1 = computed(() => count)
+    const value2 = fn($$(count))
+    const value3 = computed(() => fn(count))
+    `,
+    `
+    const { count } = $(foo)
+    const value1 = computed(() => count)
+    const value2 = fn($$(count))
+    const value3 = computed(() => fn(count))
+    `,
+    `
+    let count = $ref(0)
+    count = 42
+    `,
+    `
+    let count = $ref(0)
+    count++
+    `,
+    `
+    let count = $ref(0)
+    ;( { foo: count } = bar )
+    `,
+    `
+    const { v1, v2, v3, v4 } = $(foo)
+    fn($$({ v1, a: [v2], a: [...v3], ...v4}))
+    `,
+    `
+    let r = $ref(0)
+    let c = $computed(() => r)
+    let sr = $shallowRef({ count: 1 })
+    let cr = $customRef((track, trigger) => {
+      return {
+        get() { return sr },
+        set(newValue) { sr = newValue }
+      }
+    })
+    let tr = $toRef($$(sr), 'count')
+    function fn() {
+      console.log(
+        r.value,
+        c.value,
+        sr.value,
+        cr.value,
+        tr.value
+      )
+    }
+    `
+  ],
+  invalid: [
+    {
+      code: `
+      import { ref } from 'vue'
+      const count = ref(0)
+      const value1 = count.value
+      const { value: value2 } = count
+      const value3 = fn(count.value)
+      const { value: value4 = 42 } = count
+      if (foo) {
+        const value1 = count.value
+      }
+      `,
+      errors: [
+        {
+          message:
+            'Getting a value from the ref object in the same scope will cause the value to lose reactivity.',
+          line: 4
+        },
+        {
+          message:
+            'Getting a value from the ref object in the same scope will cause the value to lose reactivity.',
+          line: 5
+        },
+        {
+          message:
+            'Getting a value from the ref object in the same scope will cause the value to lose reactivity.',
+          line: 6
+        },
+        {
+          message:
+            'Getting a value from the ref object in the same scope will cause the value to lose reactivity.',
+          line: 7
+        },
+        {
+          message:
+            'Getting a value from the ref object in the same scope will cause the value to lose reactivity.',
+          line: 9
+        }
+      ]
+    },
+    {
+      code: `
+      import { toRefs } from 'vue'
+      const { count } = toRefs(foo)
+      const value1 = count.value
+      const { value: value2 } = count
+      const value3 = fn(count.value)
+      `,
+      errors: [
+        {
+          message:
+            'Getting a value from the ref object in the same scope will cause the value to lose reactivity.',
+          line: 4
+        },
+        {
+          message:
+            'Getting a value from the ref object in the same scope will cause the value to lose reactivity.',
+          line: 5
+        },
+        {
+          message:
+            'Getting a value from the ref object in the same scope will cause the value to lose reactivity.',
+          line: 6
+        }
+      ]
+    },
+    {
+      code: `
+      import { toRefs } from 'vue'
+      const refs = toRefs(foo)
+      const value1 = refs.count.value
+      const { value: value2 } = refs.count
+      const value3 = fn(refs.count.value)
+      `,
+      errors: [
+        {
+          message:
+            'Getting a value from the ref object in the same scope will cause the value to lose reactivity.',
+          line: 4
+        },
+        {
+          message:
+            'Getting a value from the ref object in the same scope will cause the value to lose reactivity.',
+          line: 5
+        },
+        {
+          message:
+            'Getting a value from the ref object in the same scope will cause the value to lose reactivity.',
+          line: 6
+        }
+      ]
+    },
+    {
+      code: `
+      import { ref } from 'vue'
+      const count = ref(0).value
+      `,
+      errors: [
+        {
+          message:
+            'Getting a value from the ref object in the same scope will cause the value to lose reactivity.',
+          line: 3
+        }
+      ]
+    },
+    {
+      code: `
+      import { toRefs } from 'vue'
+      const refs = toRefs(foo)
+      const { foo = 42 } = refs
+      const v = foo.value
+      `,
+      errors: [
+        {
+          message:
+            'Getting a value from the ref object in the same scope will cause the value to lose reactivity.',
+          line: 5
+        }
+      ]
+    },
+    {
+      code: `
+      import { ref, computed, shallowRef, customRef, toRef } from 'vue'
+      const r = ref(0)
+      const c = computed(() => r.value)
+      const sr = shallowRef({ count: 1 })
+      const cr = customRef((track, trigger) => {
+        return {
+          get() { return sr.value },
+          set(newValue) { sr.value = newValue }
+        }
+      })
+      const tr = toRef(sr, 'count')
+
+      console.log(
+        r.value,
+        c.value,
+        sr.value,
+        cr.value,
+        tr.value
+      )
+      `,
+      errors: [
+        {
+          message:
+            'Getting a value from the ref object in the same scope will cause the value to lose reactivity.',
+          line: 15
+        },
+        {
+          message:
+            'Getting a value from the ref object in the same scope will cause the value to lose reactivity.',
+          line: 16
+        },
+        {
+          message:
+            'Getting a value from the ref object in the same scope will cause the value to lose reactivity.',
+          line: 17
+        },
+        {
+          message:
+            'Getting a value from the ref object in the same scope will cause the value to lose reactivity.',
+          line: 18
+        },
+        {
+          message:
+            'Getting a value from the ref object in the same scope will cause the value to lose reactivity.',
+          line: 19
+        }
+      ]
+    },
+    {
+      code: `
+      <script setup>
+      const model1 = defineModel();
+      const [model2, mod] = defineModel();
+      console.log(
+        model1.value,
+        model2.value,
+        mod.value // OK
+      )
+      </script>`,
+      languageOptions: { parser: require('vue-eslint-parser') },
+      errors: [
+        {
+          message:
+            'Getting a value from the ref object in the same scope will cause the value to lose reactivity.',
+          line: 6
+        },
+        {
+          message:
+            'Getting a value from the ref object in the same scope will cause the value to lose reactivity.',
+          line: 7
+        }
+      ]
+    },
+    // Reactivity Transform
+    {
+      code: `
+      const count = $ref(0)
+      const value1 = count
+      const value2 = fn(count)
+      `,
+      errors: [
+        {
+          message:
+            'Getting a reactive variable in the same scope will cause the value to lose reactivity.',
+          line: 3
+        },
+        {
+          message:
+            'Getting a reactive variable in the same scope will cause the value to lose reactivity.',
+          line: 4
+        }
+      ]
+    },
+    {
+      code: `
+      const count = $(foo)
+      const value1 = count
+      const value2 = fn(count)
+      `,
+      errors: [
+        {
+          message:
+            'Getting a reactive variable in the same scope will cause the value to lose reactivity.',
+          line: 3
+        },
+        {
+          message:
+            'Getting a reactive variable in the same scope will cause the value to lose reactivity.',
+          line: 4
+        }
+      ]
+    },
+    {
+      code: `
+      const { count } = $(foo)
+      const value1 = count
+      const value2 = fn(count)
+      `,
+      errors: [
+        {
+          message:
+            'Getting a reactive variable in the same scope will cause the value to lose reactivity.',
+          line: 3
+        },
+        {
+          message:
+            'Getting a reactive variable in the same scope will cause the value to lose reactivity.',
+          line: 4
+        }
+      ]
+    },
+    {
+      code: `
+      const { v1, a: [v2 = 42], b: [...v3], ...v4 } = $(foo)
+      const value1 = v1
+      const value2 = v2
+      const value3 = v3
+      const value4 = v4
+      `,
+      errors: [
+        {
+          message:
+            'Getting a reactive variable in the same scope will cause the value to lose reactivity.',
+          line: 3
+        },
+        {
+          message:
+            'Getting a reactive variable in the same scope will cause the value to lose reactivity.',
+          line: 4
+        },
+        {
+          message:
+            'Getting a reactive variable in the same scope will cause the value to lose reactivity.',
+          line: 5
+        },
+        {
+          message:
+            'Getting a reactive variable in the same scope will cause the value to lose reactivity.',
+          line: 6
+        }
+      ]
+    },
+    {
+      code: `
+      let r = $ref(0)
+      let c = $computed(() => r)
+      let sr = $shallowRef({ count: 1 })
+      let cr = $customRef((track, trigger) => {
+        return {
+          get() { return sr },
+          set(newValue) { sr = newValue }
+        }
+      })
+      let tr = $toRef($$(sr), 'count')
+      console.log(
+        r.value,
+        c.value,
+        sr.value,
+        cr.value,
+        tr.value
+      )
+      `,
+      errors: [
+        {
+          message:
+            'Getting a reactive variable in the same scope will cause the value to lose reactivity.',
+          line: 13
+        },
+        {
+          message:
+            'Getting a reactive variable in the same scope will cause the value to lose reactivity.',
+          line: 14
+        },
+        {
+          message:
+            'Getting a reactive variable in the same scope will cause the value to lose reactivity.',
+          line: 15
+        },
+        {
+          message:
+            'Getting a reactive variable in the same scope will cause the value to lose reactivity.',
+          line: 16
+        },
+        {
+          message:
+            'Getting a reactive variable in the same scope will cause the value to lose reactivity.',
+          line: 17
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/no-required-prop-with-default.js b/tests/lib/rules/no-required-prop-with-default.js
new file mode 100644
index 000000000..9252e0980
--- /dev/null
+++ b/tests/lib/rules/no-required-prop-with-default.js
@@ -0,0 +1,1054 @@
+/**
+ * @author neferqiqi
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/no-required-prop-with-default')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('no-required-prop-with-default', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+          interface TestPropType {
+            name?: string
+            age?: number
+          }
+          const props = withDefaults(
+            defineProps<TestPropType>(),
+            {
+              name: "World",
+            }
+          );
+        </script>
+      `,
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+          type TestPropType = {
+            name?: string
+            age?: number
+          }
+          const props = withDefaults(
+            defineProps<TestPropType>(),
+            {
+              name: "World",
+            }
+          );
+        </script>
+      `,
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+          interface TestPropType {
+            name?
+          }
+          const props = withDefaults(
+            defineProps<TestPropType>(),
+            {
+              name: "World",
+            }
+          );
+        </script>
+      `,
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+          interface TestPropType {
+            get name(): string
+            set name(a: string)
+            age?: number
+          }
+          const props = withDefaults(
+            defineProps<TestPropType>(),
+            {
+              'name': 'World',
+            }
+          );
+        </script>
+      `,
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+          interface TestPropType {
+            get name(): void
+            age?: number
+          }
+          const props = withDefaults(
+            defineProps<TestPropType>(),
+            {
+              'name': 'World',
+            }
+          );
+        </script>
+      `,
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+          const [name] = 'test'
+
+          interface TestPropType {
+            [name]: string
+            age?: number
+          }
+          const props = withDefaults(
+            defineProps<TestPropType>(),
+            {
+              [name]: 'World'
+            }
+          );
+        </script>
+      `,
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+        export default {
+          props: {
+            name: {
+              required: false,
+              default: 'Hello'
+            }
+          }
+        }
+        </script>
+      `
+    },
+    // ignore array prop
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+        export default {
+          props: ['name']
+        }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>
+          const props = defineProps({
+            name: {
+              required: false,
+              default: 'Hello'
+            }
+          })
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+          interface TestPropType {
+            name?: string
+          }
+          const {name="World"} = defineProps<TestPropType>();
+        </script>
+      `,
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+          const {name="World"} = defineProps<{
+            name?: string
+          }>();
+        </script>
+      `,
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>
+          const {name='Hello'} = defineProps({
+            name: {
+              required: false
+            }
+          })
+        </script>
+      `
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+          interface TestPropType {
+            name: string
+            age?: number
+          }
+          const props = withDefaults(
+            defineProps<TestPropType>(),
+            {
+              name: "World",
+            }
+          );
+        </script>
+      `,
+      output: `
+        <script setup lang="ts">
+          interface TestPropType {
+            name?: string
+            age?: number
+          }
+          const props = withDefaults(
+            defineProps<TestPropType>(),
+            {
+              name: "World",
+            }
+          );
+        </script>
+      `,
+      options: [{ autofix: true }],
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          message: 'Prop "name" should be optional.',
+          line: 4
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+          interface TestPropType {
+            name: string | number
+            age?: number
+          }
+          const props = withDefaults(
+            defineProps<TestPropType>(),
+            {
+              name: "World",
+            }
+          );
+        </script>
+      `,
+      output: `
+        <script setup lang="ts">
+          interface TestPropType {
+            name?: string | number
+            age?: number
+          }
+          const props = withDefaults(
+            defineProps<TestPropType>(),
+            {
+              name: "World",
+            }
+          );
+        </script>
+      `,
+      options: [{ autofix: true }],
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          message: 'Prop "name" should be optional.',
+          line: 4
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+          interface TestPropType {
+            'na::me': string
+            age?: number
+          }
+          const props = withDefaults(
+            defineProps<TestPropType>(),
+            {
+              'na::me': "World",
+            }
+          );
+        </script>
+      `,
+      output: `
+        <script setup lang="ts">
+          interface TestPropType {
+            'na::me'?: string
+            age?: number
+          }
+          const props = withDefaults(
+            defineProps<TestPropType>(),
+            {
+              'na::me': "World",
+            }
+          );
+        </script>
+      `,
+      options: [{ autofix: true }],
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          message: 'Prop "na::me" should be optional.',
+          line: 4
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+          import nameType from 'name.ts';
+          interface TestPropType {
+            name: nameType
+            age?: number
+          }
+          const props = withDefaults(
+            defineProps<TestPropType>(),
+            {
+              name: "World",
+            }
+          );
+        </script>
+      `,
+      output: `
+        <script setup lang="ts">
+          import nameType from 'name.ts';
+          interface TestPropType {
+            name?: nameType
+            age?: number
+          }
+          const props = withDefaults(
+            defineProps<TestPropType>(),
+            {
+              name: "World",
+            }
+          );
+        </script>
+      `,
+      options: [{ autofix: true }],
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          message: 'Prop "name" should be optional.',
+          line: 5
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+          interface TestPropType {
+            name
+          }
+          const props = withDefaults(
+            defineProps<TestPropType>(),
+            {
+              name: "World",
+            }
+          );
+        </script>
+      `,
+      output: `
+        <script setup lang="ts">
+          interface TestPropType {
+            name?
+          }
+          const props = withDefaults(
+            defineProps<TestPropType>(),
+            {
+              name: "World",
+            }
+          );
+        </script>
+      `,
+      options: [{ autofix: true }],
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          message: 'Prop "name" should be optional.',
+          line: 4
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+          interface TestPropType {
+            name
+            age?: number
+          }
+          const props = withDefaults(
+            defineProps<TestPropType>(),
+            {
+              name: "World",
+            }
+          );
+        </script>
+      `,
+      output: `
+        <script setup lang="ts">
+          interface TestPropType {
+            name?
+            age?: number
+          }
+          const props = withDefaults(
+            defineProps<TestPropType>(),
+            {
+              name: "World",
+            }
+          );
+        </script>
+      `,
+      options: [{ autofix: true }],
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          message: 'Prop "name" should be optional.',
+          line: 4
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+          interface TestPropType {
+            'na\\"me2'
+            age?: number
+          }
+          const props = withDefaults(
+            defineProps<TestPropType>(),
+            {
+              'na\\"me2': "World",
+            }
+          );
+        </script>
+      `,
+      output: `
+        <script setup lang="ts">
+          interface TestPropType {
+            'na\\"me2'?
+            age?: number
+          }
+          const props = withDefaults(
+            defineProps<TestPropType>(),
+            {
+              'na\\"me2': "World",
+            }
+          );
+        </script>
+      `,
+      options: [{ autofix: true }],
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          message: 'Prop "na"me2" should be optional.',
+          line: 4
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+          interface TestPropType {
+            foo(): void
+            age?: number
+          }
+          const props = withDefaults(
+            defineProps<TestPropType>(),
+            {
+              foo() {console.log(123)},
+            }
+          );
+        </script>
+      `,
+      output: `
+        <script setup lang="ts">
+          interface TestPropType {
+            foo?(): void
+            age?: number
+          }
+          const props = withDefaults(
+            defineProps<TestPropType>(),
+            {
+              foo() {console.log(123)},
+            }
+          );
+        </script>
+      `,
+      options: [{ autofix: true }],
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          message: 'Prop "foo" should be optional.',
+          line: 4
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+          interface TestPropType {
+            readonly name
+            age?: number
+          }
+          const props = withDefaults(
+            defineProps<TestPropType>(),
+            {
+              name: 'World',
+            }
+          );
+        </script>
+      `,
+      output: `
+        <script setup lang="ts">
+          interface TestPropType {
+            readonly name?
+            age?: number
+          }
+          const props = withDefaults(
+            defineProps<TestPropType>(),
+            {
+              name: 'World',
+            }
+          );
+        </script>
+      `,
+      options: [{ autofix: true }],
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          message: 'Prop "name" should be optional.',
+          line: 4
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+          interface TestPropType {
+            readonly 'name'
+            age?: number
+          }
+          const props = withDefaults(
+            defineProps<TestPropType>(),
+            {
+              'name': 'World',
+            }
+          );
+        </script>
+      `,
+      output: `
+        <script setup lang="ts">
+          interface TestPropType {
+            readonly 'name'?
+            age?: number
+          }
+          const props = withDefaults(
+            defineProps<TestPropType>(),
+            {
+              'name': 'World',
+            }
+          );
+        </script>
+      `,
+      options: [{ autofix: true }],
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          message: 'Prop "name" should be optional.',
+          line: 4
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+          interface TestPropType {
+            readonly 'a'
+            age?: number
+          }
+          const props = withDefaults(
+            defineProps<TestPropType>(),
+            {
+              '\\u0061': 'World',
+            }
+          );
+        </script>
+      `,
+      output: `
+        <script setup lang="ts">
+          interface TestPropType {
+            readonly 'a'?
+            age?: number
+          }
+          const props = withDefaults(
+            defineProps<TestPropType>(),
+            {
+              '\\u0061': 'World',
+            }
+          );
+        </script>
+      `,
+      options: [{ autofix: true }],
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          message: 'Prop "a" should be optional.',
+          line: 4
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+          interface TestPropType {
+            readonly '\\u0061'
+            age?: number
+          }
+          const props = withDefaults(
+            defineProps<TestPropType>(),
+            {
+              'a': 'World',
+            }
+          );
+        </script>
+      `,
+      output: `
+        <script setup lang="ts">
+          interface TestPropType {
+            readonly '\\u0061'?
+            age?: number
+          }
+          const props = withDefaults(
+            defineProps<TestPropType>(),
+            {
+              'a': 'World',
+            }
+          );
+        </script>
+      `,
+      options: [{ autofix: true }],
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          message: 'Prop "a" should be optional.',
+          line: 4
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+        export default {
+          props: {
+            name: {
+              required: true,
+              default: 'Hello'
+            }
+          }
+        }
+        </script>
+      `,
+      output: `
+        <script>
+        export default {
+          props: {
+            name: {
+              required: false,
+              default: 'Hello'
+            }
+          }
+        }
+        </script>
+      `,
+      options: [{ autofix: true }],
+      errors: [
+        {
+          message: 'Prop "name" should be optional.',
+          line: 5
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+        export default {
+          props: {
+            'name': {
+              required: true,
+              default: 'Hello'
+            }
+          }
+        }
+        </script>
+      `,
+      output: `
+        <script>
+        export default {
+          props: {
+            'name': {
+              required: false,
+              default: 'Hello'
+            }
+          }
+        }
+        </script>
+      `,
+      options: [{ autofix: true }],
+      errors: [
+        {
+          message: 'Prop "name" should be optional.',
+          line: 5
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+        import { defineComponent } from 'vue'
+        export default defineComponent({
+          props: {
+            'name': {
+              required: true,
+              default: 'Hello'
+            }
+          }
+        })
+        </script>
+      `,
+      output: `
+        <script>
+        import { defineComponent } from 'vue'
+        export default defineComponent({
+          props: {
+            'name': {
+              required: false,
+              default: 'Hello'
+            }
+          }
+        })
+        </script>
+      `,
+      options: [{ autofix: true }],
+      errors: [
+        {
+          message: 'Prop "name" should be optional.',
+          line: 6
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+        import { defineComponent } from 'vue'
+        export default defineComponent({
+          props: {
+            name: {
+              required: true,
+              default: 'Hello'
+            }
+          }
+        })
+        </script>
+      `,
+      output: `
+        <script>
+        import { defineComponent } from 'vue'
+        export default defineComponent({
+          props: {
+            name: {
+              required: false,
+              default: 'Hello'
+            }
+          }
+        })
+        </script>
+      `,
+      options: [{ autofix: true }],
+      errors: [
+        {
+          message: 'Prop "name" should be optional.',
+          line: 6
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+        import { defineComponent } from 'vue'
+        export default defineComponent({
+          props: {
+            name: {
+              required: true,
+              default: 'Hello'
+            }
+          }
+        })
+        </script>
+      `,
+      output: null,
+      errors: [
+        {
+          message: 'Prop "name" should be optional.',
+          line: 6,
+          suggestions: [
+            {
+              messageId: 'fixRequiredProp',
+              output: `
+        <script>
+        import { defineComponent } from 'vue'
+        export default defineComponent({
+          props: {
+            name: {
+              required: false,
+              default: 'Hello'
+            }
+          }
+        })
+        </script>
+      `
+            }
+          ]
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>
+          const props = defineProps({
+            name: {
+              required: true,
+              default: 'Hello'
+            }
+          })
+        </script>
+      `,
+      output: `
+        <script setup>
+          const props = defineProps({
+            name: {
+              required: false,
+              default: 'Hello'
+            }
+          })
+        </script>
+      `,
+      options: [{ autofix: true }],
+      errors: [
+        {
+          message: 'Prop "name" should be optional.',
+          line: 4
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+          interface TestPropType {
+            name: string
+          }
+          const {name="World"} = defineProps<TestPropType>();
+        </script>
+      `,
+      output: `
+        <script setup lang="ts">
+          interface TestPropType {
+            name?: string
+          }
+          const {name="World"} = defineProps<TestPropType>();
+        </script>
+      `,
+      options: [{ autofix: true }],
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          message: 'Prop "name" should be optional.',
+          line: 4
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+          const {name="World"} = defineProps<{
+            name: string
+          }>();
+        </script>
+      `,
+      output: `
+        <script setup lang="ts">
+          const {name="World"} = defineProps<{
+            name?: string
+          }>();
+        </script>
+      `,
+      options: [{ autofix: true }],
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          message: 'Prop "name" should be optional.',
+          line: 4
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+          const {name="World"} = defineProps({
+            name: {
+              required: true,
+            }
+          });
+        </script>
+      `,
+      output: `
+        <script setup lang="ts">
+          const {name="World"} = defineProps({
+            name: {
+              required: false,
+            }
+          });
+        </script>
+      `,
+      options: [{ autofix: true }],
+      errors: [
+        {
+          message: 'Prop "name" should be optional.',
+          line: 4
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/no-reserved-component-names.js b/tests/lib/rules/no-reserved-component-names.js
index 4b39c0858..09d9a6f64 100644
--- a/tests/lib/rules/no-reserved-component-names.js
+++ b/tests/lib/rules/no-reserved-component-names.js
@@ -4,12 +4,8 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/no-reserved-component-names')
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const htmlElements = require('../../../lib/utils/html-elements.json')
 const RESERVED_NAMES_IN_HTML = new Set([
@@ -17,10 +13,6 @@ const RESERVED_NAMES_IN_HTML = new Set([
   ...htmlElements.map((word) => word[0].toUpperCase() + word.slice(1))
 ])
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const invalidElements = [
   'annotation-xml',
   'AnnotationXml',
@@ -253,15 +245,8 @@ const invalidElements = [
   'menu',
   'Menu',
   'menuitem',
-  'menuitem',
   'summary',
   'Summary',
-  'content',
-  'Content',
-  'element',
-  'Element',
-  'shadow',
-  'Shadow',
   'template',
   'Template',
   'slot',
@@ -287,8 +272,6 @@ const invalidElements = [
   'Defs',
   'desc',
   'Desc',
-  'discard',
-  'Discard',
   'ellipse',
   'Ellipse',
   'feBlend',
@@ -360,8 +343,6 @@ const invalidElements = [
   'textPath',
   'tspan',
   'Tspan',
-  'unknown',
-  'Unknown',
   'use',
   'Use',
   'view',
@@ -382,8 +363,6 @@ const invalidElements = [
   'Blink',
   'center',
   'Center',
-  'command',
-  'Command',
   'dir',
   'Dir',
   'font',
@@ -419,6 +398,16 @@ const invalidElements = [
   'xmp',
   'Xmp'
 ]
+const invalidLowerCaseElements = []
+const invalidUpperCaseElements = []
+
+for (const element of invalidElements) {
+  if (element[0] === element[0].toLowerCase()) {
+    invalidLowerCaseElements.push(element)
+  } else {
+    invalidUpperCaseElements.push(element)
+  }
+}
 
 const vue2BuiltInComponents = [
   'component',
@@ -433,7 +422,7 @@ const vue2BuiltInComponents = [
 
 const vue3BuiltInComponents = ['teleport', 'Teleport', 'suspense', 'Suspense']
 
-const parserOptions = {
+const languageOptions = {
   ecmaVersion: 2018,
   sourceType: 'module'
 }
@@ -447,7 +436,7 @@ ruleTester.run('no-reserved-component-names', rule, {
         export default {
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -456,7 +445,7 @@ ruleTester.run('no-reserved-component-names', rule, {
           ...name
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -465,7 +454,7 @@ ruleTester.run('no-reserved-component-names', rule, {
           name: 'FooBar'
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -480,17 +469,17 @@ ruleTester.run('no-reserved-component-names', rule, {
           disallowVue3BuiltInComponents: true
         }
       ],
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
       code: `Vue.component('FooBar', {})`,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
       code: `app.component('FooBar', {})`,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.js',
@@ -499,12 +488,12 @@ ruleTester.run('no-reserved-component-names', rule, {
           name: 'foo!bar'
         })
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
       code: `Vue.component(\`fooBar\${foo}\`, component)`,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -515,8 +504,10 @@ ruleTester.run('no-reserved-component-names', rule, {
           }
         </script>
       `,
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      }
     },
     {
       filename: 'test.vue',
@@ -527,14 +518,16 @@ ruleTester.run('no-reserved-component-names', rule, {
           }
         </script>
       `,
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      }
     },
     // https://github.com/vuejs/eslint-plugin-vue/issues/1018
     {
       filename: 'test.js',
       code: `fn1(component.data)`,
-      parserOptions
+      languageOptions
     },
     ...vue2BuiltInComponents.map((name) => ({
       filename: `${name}.vue`,
@@ -543,7 +536,7 @@ ruleTester.run('no-reserved-component-names', rule, {
             name: '${name}'
           }
         `,
-      parserOptions
+      languageOptions
     })),
     ...vue3BuiltInComponents.map((name) => ({
       filename: `${name}.vue`,
@@ -552,7 +545,7 @@ ruleTester.run('no-reserved-component-names', rule, {
             name: '${name}'
           }
         `,
-      parserOptions
+      languageOptions
     })),
     ...vue3BuiltInComponents.map((name) => ({
       filename: `${name}.vue`,
@@ -561,9 +554,43 @@ ruleTester.run('no-reserved-component-names', rule, {
             name: '${name}'
           }
         `,
-      parserOptions,
+      languageOptions,
       options: [{ disallowVueBuiltInComponents: true }]
-    }))
+    })),
+    ...invalidUpperCaseElements.map((name) => ({
+      filename: `${name}.vue`,
+      code: `
+          export default {
+            name: '${name}'
+          }
+        `,
+      languageOptions,
+      options: [{ htmlElementCaseSensitive: true }]
+    })),
+    {
+      filename: 'test.vue',
+      code: `<script setup> defineOptions({}) </script>`,
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `<script setup> defineOptions({ ...name }) </script>`,
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `<script setup> defineOptions({ name: 'Foo' }) </script>`,
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      }
+    }
   ],
 
   invalid: [
@@ -574,75 +601,85 @@ ruleTester.run('no-reserved-component-names', rule, {
             name: '${name}'
           }
         `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           messageId: RESERVED_NAMES_IN_HTML.has(name)
             ? 'reservedInHtml'
             : 'reserved',
           data: { name },
-          type: 'Literal',
-          line: 3
+          line: 3,
+          column: 19,
+          endLine: 3,
+          endColumn: 19 + name.length + 2
         }
       ]
     })),
     ...invalidElements.map((name) => ({
       filename: 'test.vue',
       code: `Vue.component('${name}', component)`,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           messageId: RESERVED_NAMES_IN_HTML.has(name)
             ? 'reservedInHtml'
             : 'reserved',
           data: { name },
-          type: 'Literal',
-          line: 1
+          line: 1,
+          column: 15,
+          endLine: 1,
+          endColumn: 15 + name.length + 2
         }
       ]
     })),
     ...invalidElements.map((name) => ({
       filename: 'test.vue',
       code: `app.component('${name}', component)`,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           messageId: RESERVED_NAMES_IN_HTML.has(name)
             ? 'reservedInHtml'
             : 'reserved',
           data: { name },
-          type: 'Literal',
-          line: 1
+          line: 1,
+          column: 15,
+          endLine: 1,
+          endColumn: 15 + name.length + 2
         }
       ]
     })),
     ...invalidElements.map((name) => ({
       filename: 'test.vue',
       code: `Vue.component(\`${name}\`, {})`,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           messageId: RESERVED_NAMES_IN_HTML.has(name)
             ? 'reservedInHtml'
             : 'reserved',
           data: { name },
-          type: 'TemplateLiteral',
-          line: 1
+          line: 1,
+          column: 15,
+          endLine: 1,
+          endColumn: 15 + name.length + 2
         }
       ]
     })),
     ...invalidElements.map((name) => ({
       filename: 'test.vue',
       code: `app.component(\`${name}\`, {})`,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           messageId: RESERVED_NAMES_IN_HTML.has(name)
             ? 'reservedInHtml'
             : 'reserved',
           data: { name },
-          type: 'TemplateLiteral',
-          line: 1
+          line: 1,
+          column: 15,
+          endLine: 1,
+          endColumn: 15 + name.length + 2
         }
       ]
     })),
@@ -653,15 +690,58 @@ ruleTester.run('no-reserved-component-names', rule, {
             '${name}': {},
           }
         }`,
-      parserOptions,
+      languageOptions,
+      errors: [
+        {
+          messageId: RESERVED_NAMES_IN_HTML.has(name)
+            ? 'reservedInHtml'
+            : 'reserved',
+          data: { name },
+          line: 3,
+          column: 13,
+          endLine: 3,
+          endColumn: 13 + name.length + 6
+        }
+      ]
+    })),
+    ...invalidElements.map((name) => ({
+      filename: `${name}.vue`,
+      code: `<script setup> defineOptions({name: '${name}'}) </script>`,
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      },
+      errors: [
+        {
+          messageId: RESERVED_NAMES_IN_HTML.has(name)
+            ? 'reservedInHtml'
+            : 'reserved',
+          data: { name },
+          line: 1,
+          column: 37,
+          endLine: 1,
+          endColumn: 37 + name.length + 2
+        }
+      ]
+    })),
+    ...invalidLowerCaseElements.map((name) => ({
+      filename: `${name}.vue`,
+      code: `<script setup> defineOptions({name: '${name}'}) </script>`,
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      },
+      options: [{ htmlElementCaseSensitive: true }],
       errors: [
         {
           messageId: RESERVED_NAMES_IN_HTML.has(name)
             ? 'reservedInHtml'
             : 'reserved',
           data: { name },
-          type: 'Property',
-          line: 3
+          line: 1,
+          column: 37,
+          endLine: 1,
+          endColumn: 37 + name.length + 2
         }
       ]
     })),
@@ -672,14 +752,16 @@ ruleTester.run('no-reserved-component-names', rule, {
             name: '${name}'
           }
         `,
-      parserOptions,
+      languageOptions,
       options: [{ disallowVueBuiltInComponents: true }],
       errors: [
         {
           messageId: 'reservedInVue',
           data: { name },
-          type: 'Literal',
-          line: 3
+          line: 3,
+          column: 19,
+          endLine: 3,
+          endColumn: 19 + name.length + 2
         }
       ]
     })),
@@ -690,14 +772,16 @@ ruleTester.run('no-reserved-component-names', rule, {
             name: '${name}'
           }
         `,
-      parserOptions,
+      languageOptions,
       options: [{ disallowVue3BuiltInComponents: true }],
       errors: [
         {
           messageId: 'reservedInVue',
           data: { name },
-          type: 'Literal',
-          line: 3
+          line: 3,
+          column: 19,
+          endLine: 3,
+          endColumn: 19 + name.length + 2
         }
       ]
     })),
@@ -708,14 +792,16 @@ ruleTester.run('no-reserved-component-names', rule, {
             name: '${name}'
           }
         `,
-      parserOptions,
+      languageOptions,
       options: [{ disallowVue3BuiltInComponents: true }],
       errors: [
         {
           messageId: 'reservedInVue3',
           data: { name },
-          type: 'Literal',
-          line: 3
+          line: 3,
+          column: 19,
+          endLine: 3,
+          endColumn: 19 + name.length + 2
         }
       ]
     }))
diff --git a/tests/lib/rules/no-reserved-keys.js b/tests/lib/rules/no-reserved-keys.js
index b262ea44f..7ece338f1 100644
--- a/tests/lib/rules/no-reserved-keys.js
+++ b/tests/lib/rules/no-reserved-keys.js
@@ -4,23 +4,14 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const semver = require('semver')
 const rule = require('../../../lib/rules/no-reserved-keys')
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 
-const parserOptions = {
+const languageOptions = {
   ecmaVersion: 2018,
   sourceType: 'module'
 }
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const ruleTester = new RuleTester()
 ruleTester.run('no-reserved-keys', rule, {
   valid: [
@@ -45,7 +36,7 @@ ruleTester.run('no-reserved-keys', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -68,7 +59,7 @@ ruleTester.run('no-reserved-keys', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -89,7 +80,7 @@ ruleTester.run('no-reserved-keys', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -115,7 +106,7 @@ ruleTester.run('no-reserved-keys', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     }
   ],
 
@@ -129,7 +120,7 @@ ruleTester.run('no-reserved-keys', rule, {
           }
         })
       `,
-      parserOptions: { ecmaVersion: 6 },
+      languageOptions: { ecmaVersion: 6 },
       errors: [
         {
           message: "Key '$el' is reserved.",
@@ -148,7 +139,7 @@ ruleTester.run('no-reserved-keys', rule, {
           }
         })
       `,
-      parserOptions: { ecmaVersion: 6 },
+      languageOptions: { ecmaVersion: 6 },
       errors: [
         {
           message: "Key '$el' is reserved.",
@@ -167,7 +158,7 @@ ruleTester.run('no-reserved-keys', rule, {
           }
         })
       `,
-      parserOptions: { ecmaVersion: 6 },
+      languageOptions: { ecmaVersion: 6 },
       errors: [
         {
           message: "Key '$el' is reserved.",
@@ -184,7 +175,7 @@ ruleTester.run('no-reserved-keys', rule, {
           }
         })
       `,
-      parserOptions: { ecmaVersion: 6 },
+      languageOptions: { ecmaVersion: 6 },
       errors: [
         {
           message: "Keys starting with '_' are reserved in '_foo' group.",
@@ -203,7 +194,7 @@ ruleTester.run('no-reserved-keys', rule, {
           }
         })
       `,
-      parserOptions: { ecmaVersion: 6 },
+      languageOptions: { ecmaVersion: 6 },
       errors: [
         {
           message: "Keys starting with '_' are reserved in '_foo' group.",
@@ -220,7 +211,7 @@ ruleTester.run('no-reserved-keys', rule, {
           })
         })
       `,
-      parserOptions: { ecmaVersion: 6 },
+      languageOptions: { ecmaVersion: 6 },
       errors: [
         {
           message: "Keys starting with '_' are reserved in '_foo' group.",
@@ -237,7 +228,7 @@ ruleTester.run('no-reserved-keys', rule, {
           })
         })
       `,
-      parserOptions: { ecmaVersion: 6 },
+      languageOptions: { ecmaVersion: 6 },
       errors: [
         {
           message: "Keys starting with '_' are reserved in '_foo' group.",
@@ -255,7 +246,7 @@ ruleTester.run('no-reserved-keys', rule, {
         })
       `,
       options: [{ reserved: ['bar'], groups: ['foo'] }],
-      parserOptions: { ecmaVersion: 6 },
+      languageOptions: { ecmaVersion: 6 },
       errors: [
         {
           message: "Key 'bar' is reserved.",
@@ -272,8 +263,7 @@ ruleTester.run('no-reserved-keys', rule, {
         })
       </script>
       `,
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions: { ecmaVersion: 6 },
+      languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 6 },
       errors: [
         {
           message: "Key '$el' is reserved.",
@@ -288,10 +278,12 @@ ruleTester.run('no-reserved-keys', rule, {
         defineProps<{$el: string}>()
       </script>
       `,
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions: {
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
         ecmaVersion: 6,
-        parser: require.resolve('@typescript-eslint/parser')
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
       },
       errors: [
         {
@@ -300,15 +292,9 @@ ruleTester.run('no-reserved-keys', rule, {
         }
       ]
     },
-    ...(semver.lt(
-      require('@typescript-eslint/parser/package.json').version,
-      '4.0.0'
-    )
-      ? []
-      : [
-          {
-            filename: 'test.vue',
-            code: `
+    {
+      filename: 'test.vue',
+      code: `
       <script setup lang="ts">
         interface Props {
           $el: string
@@ -316,21 +302,23 @@ ruleTester.run('no-reserved-keys', rule, {
         defineProps<Props>()
       </script>
       `,
-            parser: require.resolve('vue-eslint-parser'),
-            parserOptions: {
-              ecmaVersion: 6,
-              parser: require.resolve('@typescript-eslint/parser')
-            },
-            errors: [
-              {
-                message: "Key '$el' is reserved.",
-                line: 4
-              }
-            ]
-          },
-          {
-            filename: 'test.vue',
-            code: `
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ecmaVersion: 6,
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          message: "Key '$el' is reserved.",
+          line: 4
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
       <script setup lang="ts">
         type A = {
           $el: string
@@ -338,18 +326,19 @@ ruleTester.run('no-reserved-keys', rule, {
         defineProps<A>()
       </script>
       `,
-            parser: require.resolve('vue-eslint-parser'),
-            parserOptions: {
-              ecmaVersion: 6,
-              parser: require.resolve('@typescript-eslint/parser')
-            },
-            errors: [
-              {
-                message: "Key '$el' is reserved.",
-                line: 4
-              }
-            ]
-          }
-        ])
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ecmaVersion: 6,
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          message: "Key '$el' is reserved.",
+          line: 4
+        }
+      ]
+    }
   ]
 })
diff --git a/tests/lib/rules/no-reserved-props.js b/tests/lib/rules/no-reserved-props.js
index 595ac9409..884708233 100644
--- a/tests/lib/rules/no-reserved-props.js
+++ b/tests/lib/rules/no-reserved-props.js
@@ -4,12 +4,12 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-reserved-props')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
     ecmaVersion: 2020,
     sourceType: 'module'
   }
@@ -65,9 +65,11 @@ tester.run('no-reserved-props', rule, {
       defineProps<Props>()
       </script>
       `,
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions: {
-        parser: require.resolve('@typescript-eslint/parser')
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
       }
     },
     {
@@ -96,9 +98,11 @@ tester.run('no-reserved-props', rule, {
       defineProps<Props>()
       </script>
       `,
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions: {
-        parser: require.resolve('@typescript-eslint/parser')
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
       }
     }
   ],
@@ -257,9 +261,11 @@ tester.run('no-reserved-props', rule, {
       defineProps<Props>()
       </script>
       `,
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions: {
-        parser: require.resolve('@typescript-eslint/parser')
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
       },
       errors: [
         {
diff --git a/tests/lib/rules/no-restricted-block.js b/tests/lib/rules/no-restricted-block.js
index 82b0b3b6f..5a8035292 100644
--- a/tests/lib/rules/no-restricted-block.js
+++ b/tests/lib/rules/no-restricted-block.js
@@ -3,20 +3,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-restricted-block')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2020 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2020 }
 })
 
 tester.run('no-restricted-block', rule, {
diff --git a/tests/lib/rules/no-restricted-call-after-await.js b/tests/lib/rules/no-restricted-call-after-await.js
index 69eaf3a42..faa0b2670 100644
--- a/tests/lib/rules/no-restricted-call-after-await.js
+++ b/tests/lib/rules/no-restricted-call-after-await.js
@@ -4,12 +4,15 @@
 'use strict'
 
 const path = require('path')
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-restricted-call-after-await')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2020, sourceType: 'module' }
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
 })
 
 tester.run('no-restricted-call-after-await', rule, {
@@ -136,7 +139,7 @@ tester.run('no-restricted-call-after-await', rule, {
       </script>
       `,
       options: [{ module: 'vue-i18n', path: 'useI18n' }],
-      parserOptions: { ecmaVersion: 2022 }
+      languageOptions: { ecmaVersion: 2022 }
     },
     {
       filename: 'test.vue',
@@ -147,8 +150,8 @@ tester.run('no-restricted-call-after-await', rule, {
       useI18n()
       </script>
       `,
-      parserOptions: { ecmaVersion: 2022 },
-      options: [{ module: 'vue-i18n', path: 'useI18n' }]
+      options: [{ module: 'vue-i18n', path: 'useI18n' }],
+      languageOptions: { ecmaVersion: 2022 }
     }
   ],
   invalid: [
diff --git a/tests/lib/rules/no-restricted-class.js b/tests/lib/rules/no-restricted-class.js
index baf39778f..ae94d4af1 100644
--- a/tests/lib/rules/no-restricted-class.js
+++ b/tests/lib/rules/no-restricted-class.js
@@ -5,16 +5,21 @@
 'use strict'
 
 const rule = require('../../../lib/rules/no-restricted-class')
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2020, sourceType: 'module' }
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
 })
 
 ruleTester.run('no-restricted-class', rule, {
   valid: [
-    { code: `<template><div class="allowed">Content</div></template>` },
+    `<template><div class="allowed">Content</div></template>`,
+    `<template><div class>Content</div></template>`,
+    `<template><div :class>Content</div></template>`,
     {
       code: `<template><div class="allowed"">Content</div></template>`,
       options: ['forbidden']
@@ -30,89 +35,130 @@ ruleTester.run('no-restricted-class', rule, {
     {
       code: `<template><div :class="'' + {forbidden: true}">Content</div></template>`,
       options: ['forbidden']
+    },
+    {
+      code: `<template><div class="allowed">Content</div></template>`,
+      options: ['/^for(bidden|gotten)/']
     }
   ],
 
   invalid: [
     {
       code: `<template><div class="forbidden allowed" /></template>`,
+      options: ['forbidden'],
       errors: [
         {
           message: "'forbidden' class is not allowed.",
-          type: 'VAttribute'
+          line: 1,
+          column: 22,
+          endLine: 1,
+          endColumn: 41
         }
-      ],
-      options: ['forbidden']
+      ]
     },
     {
       code: `<template><div :class="'forbidden' + ' ' + 'allowed' + someVar" /></template>`,
+      options: ['forbidden'],
       errors: [
         {
           message: "'forbidden' class is not allowed.",
-          type: 'Literal'
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 35
         }
-      ],
-      options: ['forbidden']
+      ]
     },
     {
       code: `<template><div :class="{'forbidden': someBool, someVar: true}" /></template>`,
+      options: ['forbidden'],
       errors: [
         {
           message: "'forbidden' class is not allowed.",
-          type: 'Literal'
+          line: 1,
+          column: 25,
+          endLine: 1,
+          endColumn: 36
         }
-      ],
-      options: ['forbidden']
+      ]
     },
     {
       code: `<template><div :class="{forbidden: someBool}" /></template>`,
+      options: ['forbidden'],
       errors: [
         {
           message: "'forbidden' class is not allowed.",
-          type: 'Identifier'
+          line: 1,
+          column: 25,
+          endLine: 1,
+          endColumn: 34
         }
-      ],
-      options: ['forbidden']
+      ]
     },
     {
       code: '<template><div :class="`forbidden ${someVar}`" /></template>',
+      options: ['forbidden'],
       errors: [
         {
           message: "'forbidden' class is not allowed.",
-          type: 'TemplateElement'
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 37
         }
-      ],
-      options: ['forbidden']
+      ]
     },
     {
       code: `<template><div :class="'forbidden'" /></template>`,
+      options: ['forbidden'],
       errors: [
         {
           message: "'forbidden' class is not allowed.",
-          type: 'Literal'
+          line: 1,
+          column: 24,
+          endLine: 1,
+          endColumn: 35
         }
-      ],
-      options: ['forbidden']
+      ]
     },
     {
       code: `<template><div :class="['forbidden', 'allowed']" /></template>`,
+      options: ['forbidden'],
       errors: [
         {
           message: "'forbidden' class is not allowed.",
-          type: 'Literal'
+          line: 1,
+          column: 25,
+          endLine: 1,
+          endColumn: 36
         }
-      ],
-      options: ['forbidden']
+      ]
     },
     {
       code: `<template><div :class="['allowed forbidden', someString]" /></template>`,
+      options: ['forbidden'],
       errors: [
         {
           message: "'forbidden' class is not allowed.",
-          type: 'Literal'
+          line: 1,
+          column: 25,
+          endLine: 1,
+          endColumn: 44
         }
-      ],
-      options: ['forbidden']
+      ]
+    },
+    {
+      code: `<template><div class="forbidden allowed" /></template>`,
+      options: ['/^for(bidden|gotten)/'],
+      errors: [
+        {
+          message: "'forbidden' class is not allowed.",
+          line: 1,
+          column: 22,
+          endLine: 1,
+          endColumn: 41
+        }
+      ]
     }
   ]
 })
diff --git a/tests/lib/rules/no-restricted-component-names.js b/tests/lib/rules/no-restricted-component-names.js
new file mode 100644
index 000000000..609db8aa6
--- /dev/null
+++ b/tests/lib/rules/no-restricted-component-names.js
@@ -0,0 +1,262 @@
+/**
+ * @author ItMaga <https://github.com/ItMaga>
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/no-restricted-component-names')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('no-restricted-component-names', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        name: 'Allow'
+      }
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      new Vue({
+        name: 'Allow',
+      })
+    `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      defineOptions({
+        name: 'Allow'
+      })
+      </script>
+      `
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        name: 'Disallow'
+      }
+      </script>
+      `,
+      options: ['Disallow', 'Disallow2'],
+      errors: [
+        {
+          message: 'Using component name `Disallow` is not allowed.',
+          line: 4,
+          column: 15
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      new Vue({
+        name: 'Disallow',
+      })
+      </script>
+      `,
+      options: ['Disallow'],
+      errors: [
+        {
+          message: 'Using component name `Disallow` is not allowed.',
+          line: 4,
+          column: 15
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      defineOptions({
+        name: 'Disallow'
+      })
+      </script>
+      `,
+      options: ['Disallow'],
+      errors: [
+        {
+          message: 'Using component name `Disallow` is not allowed.',
+          line: 4,
+          column: 15
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      defineOptions({
+        name: 'FooBar'
+      })
+      </script>
+      `,
+      options: ['/^Foo(Bar|Baz)/'],
+      errors: [
+        {
+          message: 'Using component name `FooBar` is not allowed.',
+          line: 4,
+          column: 15
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      defineOptions({
+        name: 'Disallow',
+        inheritAttrs: false,
+      })
+      </script>
+      `,
+      options: [
+        { name: 'Disallow', message: 'Custom message', suggest: 'Allow' }
+      ],
+      errors: [
+        {
+          message: 'Custom message',
+          line: 4,
+          column: 15,
+          suggestions: [
+            {
+              desc: 'Instead, change to `Allow`.',
+              output: `
+      <script setup>
+      defineOptions({
+        name: "Allow",
+        inheritAttrs: false,
+      })
+      </script>
+      `
+            }
+          ]
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      defineOptions({
+        name: 'Disallow',
+        inheritAttrs: false,
+      })
+      </script>
+      `,
+      options: [{ name: 'Disallow', suggest: 'Allow' }],
+      errors: [
+        {
+          message: 'Using component name `Disallow` is not allowed.',
+          line: 4,
+          column: 15,
+          suggestions: [
+            {
+              desc: 'Instead, change to `Allow`.',
+              output: `
+      <script setup>
+      defineOptions({
+        name: "Allow",
+        inheritAttrs: false,
+      })
+      </script>
+      `
+            }
+          ]
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      defineOptions({
+        name: 'Disallow',
+        inheritAttrs: false,
+      })
+      </script>
+      `,
+      options: [{ name: 'Disallow', message: 'Custom message' }],
+      errors: [
+        {
+          message: 'Custom message',
+          line: 4,
+          column: 15
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      defineOptions({
+        name: 1
+      })
+      </script>
+      `,
+      options: ['1'],
+      errors: [
+        {
+          message: 'Using component name `1` is not allowed.',
+          line: 4,
+          column: 15
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      defineOptions({
+        name: 'disallowed-component',
+      })
+      </script>
+      `,
+      options: ['DisallowedComponent'],
+      errors: [
+        {
+          message:
+            'Using component name `disallowed-component` is not allowed.',
+          line: 4,
+          column: 15
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      defineOptions({
+        name: 'DisallowedComponent',
+      })
+      </script>
+      `,
+      options: ['disallowed-component'],
+      errors: [
+        {
+          message: 'Using component name `DisallowedComponent` is not allowed.',
+          line: 4,
+          column: 15
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/no-restricted-component-options.js b/tests/lib/rules/no-restricted-component-options.js
index 512eb53c5..39d4cbffe 100644
--- a/tests/lib/rules/no-restricted-component-options.js
+++ b/tests/lib/rules/no-restricted-component-options.js
@@ -3,20 +3,15 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-restricted-component-options')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2020, sourceType: 'module' }
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
 })
 
 tester.run('no-restricted-component-options', rule, {
@@ -109,6 +104,11 @@ tester.run('no-restricted-component-options', rule, {
       </script>
       `,
       options: [['foo', 'bar']]
+    },
+    {
+      filename: 'test.vue',
+      code: `<script setup> defineOptions({ name: 'Foo' }) </script>`,
+      options: ['Foo']
     }
   ],
   invalid: [
@@ -312,6 +312,17 @@ tester.run('no-restricted-component-options', rule, {
           line: 5
         }
       ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<script setup> defineOptions({ Foo: 'Foo' }) </script>`,
+      options: ['Foo'],
+      errors: [
+        {
+          message: 'Using `Foo` is not allowed.',
+          line: 1
+        }
+      ]
     }
   ]
 })
diff --git a/tests/lib/rules/no-restricted-custom-event.js b/tests/lib/rules/no-restricted-custom-event.js
index 447f8122c..8f9cddfb7 100644
--- a/tests/lib/rules/no-restricted-custom-event.js
+++ b/tests/lib/rules/no-restricted-custom-event.js
@@ -3,20 +3,15 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-restricted-custom-event')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2020, sourceType: 'module' }
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
 })
 
 tester.run('no-restricted-custom-event', rule, {
@@ -291,6 +286,25 @@ tester.run('no-restricted-custom-event', rule, {
           line: 5
         }
       ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        setup(props, ctx) {
+          ctx.emit(\`foo\`)
+        }
+      }
+      </script>
+      `,
+      options: ['foo'],
+      errors: [
+        {
+          message: 'Using `foo` event is not allowed.',
+          line: 5
+        }
+      ]
     }
   ]
 })
diff --git a/tests/lib/rules/no-restricted-html-elements.js b/tests/lib/rules/no-restricted-html-elements.js
index 775d94580..f89f58a11 100644
--- a/tests/lib/rules/no-restricted-html-elements.js
+++ b/tests/lib/rules/no-restricted-html-elements.js
@@ -3,12 +3,11 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-restricted-html-elements')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('no-restricted-html-elements', rule, {
@@ -32,44 +31,140 @@ tester.run('no-restricted-html-elements', rule, {
       filename: 'test.vue',
       code: '<template><div class="foo"><Button type="button"></Button></div></template>',
       options: ['button']
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><main><article></article></main></template>',
+      options: [{ element: ['div', 'span'] }]
+    },
+    // SVG
+    {
+      filename: 'test.vue',
+      code: '<template><svg><rect width="100" height="100"></rect></svg></template>',
+      options: ['circle']
+    },
+    // Math
+    {
+      filename: 'test.vue',
+      code: '<template><math><mn>2</mn></math></template>',
+      options: ['mi']
     }
   ],
   invalid: [
     {
       filename: 'test.vue',
       code: '<template><div><button type="button"></button><div></template>',
+      options: ['button'],
       errors: [
         {
-          message: 'Unexpected use of forbidden HTML element button.',
+          message: 'Unexpected use of forbidden element button.',
           line: 1,
           column: 16
         }
-      ],
-      options: ['button']
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><div class="foo"><button type="button"></button></div></template>',
+      options: ['div'],
       errors: [
         {
-          message: 'Unexpected use of forbidden HTML element div.',
+          message: 'Unexpected use of forbidden element div.',
           line: 1,
           column: 11
         }
-      ],
-      options: ['div']
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><marquee>foo</marquee></template>',
+      options: [{ element: 'marquee', message: 'Custom error' }],
       errors: [
         {
           message: 'Custom error',
           line: 1,
           column: 11
         }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><a></a><RouterLink></RouterLink></template>',
+      options: [
+        {
+          element: ['a', 'RouterLink'],
+          message: 'Prefer the use of <NuxtLink> component'
+        }
+      ],
+      errors: [
+        {
+          message: 'Prefer the use of <NuxtLink> component',
+          line: 1,
+          column: 11
+        },
+        {
+          message: 'Prefer the use of <NuxtLink> component',
+          line: 1,
+          column: 18
+        }
+      ]
+    },
+    // SVG
+    {
+      filename: 'test.vue',
+      code: '<template><svg><circle r="50"></circle></svg></template>',
+      options: ['circle'],
+      errors: [
+        {
+          message: 'Unexpected use of forbidden element circle.',
+          line: 1,
+          column: 16
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><svg><rect width="100" height="100"></rect><path d="M10,10 L20,20"></path></svg></template>',
+      options: [
+        { element: ['rect', 'path'], message: 'Use simplified shapes instead' }
       ],
-      options: [{ element: 'marquee', message: 'Custom error' }]
+      errors: [
+        {
+          message: 'Use simplified shapes instead',
+          line: 1,
+          column: 16
+        },
+        {
+          message: 'Use simplified shapes instead',
+          line: 1,
+          column: 54
+        }
+      ]
+    },
+    // Math
+    {
+      filename: 'test.vue',
+      code: '<template><math><mfrac><mn>1</mn><mn>2</mn></mfrac></math></template>',
+      options: ['mfrac'],
+      errors: [
+        {
+          message: 'Unexpected use of forbidden element mfrac.',
+          line: 1,
+          column: 17
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><math><mi>x</mi><mo>=</mo><mn>5</mn></math></template>',
+      options: [{ element: 'mo', message: 'Avoid using operators directly' }],
+      errors: [
+        {
+          message: 'Avoid using operators directly',
+          line: 1,
+          column: 27
+        }
+      ]
     }
   ]
 })
diff --git a/tests/lib/rules/no-restricted-props.js b/tests/lib/rules/no-restricted-props.js
index 3348ca1a0..e1d55d090 100644
--- a/tests/lib/rules/no-restricted-props.js
+++ b/tests/lib/rules/no-restricted-props.js
@@ -3,21 +3,18 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const semver = require('semver')
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-restricted-props')
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const {
+  getTypeScriptFixtureTestOptions
+} = require('../../test-utils/typescript')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2020, sourceType: 'module' }
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
 })
 
 tester.run('no-restricted-props', rule, {
@@ -391,10 +388,12 @@ tester.run('no-restricted-props', rule, {
       }>()
       </script>
       `,
-      parserOptions: {
-        parser: require.resolve('@typescript-eslint/parser')
-      },
       options: [{ name: 'foo', suggest: 'Foo' }],
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
       errors: [
         {
           message: 'Using `foo` props is not allowed.',
@@ -414,15 +413,9 @@ tester.run('no-restricted-props', rule, {
         }
       ]
     },
-    ...(semver.lt(
-      require('@typescript-eslint/parser/package.json').version,
-      '4.0.0'
-    )
-      ? []
-      : [
-          {
-            filename: 'test.vue',
-            code: `
+    {
+      filename: 'test.vue',
+      code: `
       <script setup lang="ts">
       interface Props {
         foo:boolean
@@ -430,18 +423,20 @@ tester.run('no-restricted-props', rule, {
       defineProps<Props>()
       </script>
       `,
-            parserOptions: {
-              parser: require.resolve('@typescript-eslint/parser')
-            },
-            options: [{ name: 'foo', suggest: 'Foo' }],
-            errors: [
-              {
-                message: 'Using `foo` props is not allowed.',
-                line: 4,
-                suggestions: [
-                  {
-                    desc: 'Instead, change to `Foo`.',
-                    output: `
+      options: [{ name: 'foo', suggest: 'Foo' }],
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          message: 'Using `foo` props is not allowed.',
+          line: 4,
+          suggestions: [
+            {
+              desc: 'Instead, change to `Foo`.',
+              output: `
       <script setup lang="ts">
       interface Props {
         Foo:boolean
@@ -449,14 +444,14 @@ tester.run('no-restricted-props', rule, {
       defineProps<Props>()
       </script>
       `
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            filename: 'test.vue',
-            code: `
+            }
+          ]
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
       <script setup lang="ts">
       interface Props {
         foo:boolean
@@ -468,18 +463,20 @@ tester.run('no-restricted-props', rule, {
       )
       </script>
       `,
-            parserOptions: {
-              parser: require.resolve('@typescript-eslint/parser')
-            },
-            options: [{ name: 'foo', suggest: 'Foo' }],
-            errors: [
-              {
-                message: 'Using `foo` props is not allowed.',
-                line: 4,
-                suggestions: [
-                  {
-                    desc: 'Instead, change to `Foo`.',
-                    output: `
+      options: [{ name: 'foo', suggest: 'Foo' }],
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          message: 'Using `foo` props is not allowed.',
+          line: 4,
+          suggestions: [
+            {
+              desc: 'Instead, change to `Foo`.',
+              output: `
       <script setup lang="ts">
       interface Props {
         Foo:boolean
@@ -491,14 +488,14 @@ tester.run('no-restricted-props', rule, {
       )
       </script>
       `
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            filename: 'test.vue',
-            code: `
+            }
+          ]
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
       <script>
       const foo = false
       </script>
@@ -513,18 +510,20 @@ tester.run('no-restricted-props', rule, {
       )
       </script>
       `,
-            parserOptions: {
-              parser: require.resolve('@typescript-eslint/parser')
-            },
-            options: [{ name: 'foo', suggest: 'Foo' }],
-            errors: [
-              {
-                message: 'Using `foo` props is not allowed.',
-                line: 7,
-                suggestions: [
-                  {
-                    desc: 'Instead, change to `Foo`.',
-                    output: `
+      options: [{ name: 'foo', suggest: 'Foo' }],
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          message: 'Using `foo` props is not allowed.',
+          line: 7,
+          suggestions: [
+            {
+              desc: 'Instead, change to `Foo`.',
+              output: `
       <script>
       const foo = false
       </script>
@@ -539,14 +538,14 @@ tester.run('no-restricted-props', rule, {
       )
       </script>
       `
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            filename: 'test.vue',
-            code: `
+            }
+          ]
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
       <script setup lang="ts">
       withDefaults(defineProps<Props>(),
         {
@@ -558,18 +557,20 @@ tester.run('no-restricted-props', rule, {
       }
       </script>
       `,
-            parserOptions: {
-              parser: require.resolve('@typescript-eslint/parser')
-            },
-            options: [{ name: 'foo', suggest: 'Foo' }],
-            errors: [
-              {
-                message: 'Using `foo` props is not allowed.',
-                line: 9,
-                suggestions: [
-                  {
-                    desc: 'Instead, change to `Foo`.',
-                    output: `
+      options: [{ name: 'foo', suggest: 'Foo' }],
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          message: 'Using `foo` props is not allowed.',
+          line: 9,
+          suggestions: [
+            {
+              desc: 'Instead, change to `Foo`.',
+              output: `
       <script setup lang="ts">
       withDefaults(defineProps<Props>(),
         {
@@ -581,11 +582,77 @@ tester.run('no-restricted-props', rule, {
       }
       </script>
       `
-                  }
-                ]
-              }
-            ]
-          }
-        ])
+            }
+          ]
+        }
+      ]
+    },
+    {
+      code: `
+        <script setup lang="ts">
+        import {Props1 as Props} from './test01'
+        defineProps<Props>()
+        </script>
+      `,
+      options: [{ name: 'foo', suggest: 'Foo' }],
+      errors: [
+        {
+          message: 'Using `foo` props is not allowed.',
+          line: 4,
+          suggestions: null
+        }
+      ],
+      ...getTypeScriptFixtureTestOptions()
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const {foo=false} = defineProps({foo:Boolean})
+      </script>
+      `,
+      options: [{ name: 'foo', suggest: 'Foo' }],
+      errors: [
+        {
+          message: 'Using `foo` props is not allowed.',
+          line: 3,
+          suggestions: [
+            {
+              desc: 'Instead, change to `Foo`.',
+              output: `
+      <script setup>
+      const {Foo:foo=false} = defineProps({Foo:Boolean})
+      </script>
+      `
+            }
+          ]
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const {foo:bar=false} = defineProps({foo:Boolean})
+      </script>
+      `,
+      options: [{ name: 'foo', suggest: 'Foo' }],
+      errors: [
+        {
+          message: 'Using `foo` props is not allowed.',
+          line: 3,
+          suggestions: [
+            {
+              desc: 'Instead, change to `Foo`.',
+              output: `
+      <script setup>
+      const {Foo:bar=false} = defineProps({Foo:Boolean})
+      </script>
+      `
+            }
+          ]
+        }
+      ]
+    }
   ]
 })
diff --git a/tests/lib/rules/no-restricted-static-attribute.js b/tests/lib/rules/no-restricted-static-attribute.js
index e0c4de130..54f942969 100644
--- a/tests/lib/rules/no-restricted-static-attribute.js
+++ b/tests/lib/rules/no-restricted-static-attribute.js
@@ -3,20 +3,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-restricted-static-attribute')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2020 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2020 }
 })
 
 tester.run('no-restricted-static-attribute', rule, {
diff --git a/tests/lib/rules/no-restricted-syntax.js b/tests/lib/rules/no-restricted-syntax.js
index 647bdc4b6..a585cdf96 100644
--- a/tests/lib/rules/no-restricted-syntax.js
+++ b/tests/lib/rules/no-restricted-syntax.js
@@ -3,12 +3,11 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-restricted-syntax')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('no-restricted-syntax', rule, {
diff --git a/tests/lib/rules/no-restricted-v-bind.js b/tests/lib/rules/no-restricted-v-bind.js
index 8691b1d0e..f53461102 100644
--- a/tests/lib/rules/no-restricted-v-bind.js
+++ b/tests/lib/rules/no-restricted-v-bind.js
@@ -3,20 +3,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-restricted-v-bind')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2020 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2020 }
 })
 
 tester.run('no-restricted-v-bind', rule, {
diff --git a/tests/lib/rules/no-restricted-v-on.js b/tests/lib/rules/no-restricted-v-on.js
new file mode 100644
index 000000000..159165c45
--- /dev/null
+++ b/tests/lib/rules/no-restricted-v-on.js
@@ -0,0 +1,173 @@
+/**
+ * @author Kamogelo Moalusi <github.com/thesheppard>
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/no-restricted-v-on')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('no-restricted-v-on', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: ''
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div @click="foo"></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><button click="foo"></button></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><button :click="foo"></button></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div @v-model="foo"></div></template>',
+      options: ['foo']
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div @bar="foo"></div></template>',
+      options: ['foo']
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div foo="foo"></div></template>',
+      options: ['foo']
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div @foo="foo"></div></template>',
+      options: [{ argument: 'foo', modifiers: ['prevent'] }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div @foo="foo"></div></template>',
+      options: [{ argument: 'foo', element: 'input' }]
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: '<template><div @test="foo"></div></template>',
+      options: ['test'],
+      errors: [
+        {
+          message: 'Using `@test` is not allowed on this element.',
+          line: 1,
+          column: 16
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div @foo="bar" @bar="foo"></div></template>',
+      options: ['foo'],
+      errors: ['Using `@foo` is not allowed on this element.']
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div @foo="bar" @bar="foo"></div></template>',
+      options: ['foo', 'bar'],
+      errors: [
+        'Using `@foo` is not allowed on this element.',
+        'Using `@bar` is not allowed on this element.'
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div @foo="bar" @bar="foo"></div></template>',
+      options: [{ argument: '/^(foo|bar)$/' }],
+      errors: [
+        'Using `@foo` is not allowed on this element.',
+        'Using `@bar` is not allowed on this element.'
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div @foo.once="foo" /><div @foo="foo" /></template>',
+      options: [{ argument: 'foo', modifiers: ['once'] }],
+      errors: ['Using `@foo.once` is not allowed on this element.']
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div @v-on="foo" @foo.prevent="bar" /><div @foo="foo" v-on="listener" /></template>',
+      options: ['/^v-/', { argument: 'foo', modifiers: ['prevent'] }, null],
+      errors: [
+        'Using `@v-on` is not allowed on this element.',
+        'Using `@foo.prevent` is not allowed on this element.',
+        'Using `v-on` is not allowed on this element.'
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-on="foo" /></template>',
+      options: [null],
+      errors: ['Using `v-on` is not allowed on this element.']
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div @v-on @foo.once="bar" />
+        <MyButton @foo="foo" @bar="bar" />
+      </template>`,
+      options: ['/^v-/', { argument: 'foo', element: `/^My/` }],
+      errors: [
+        'Using `@v-on` is not allowed on this element.',
+        'Using `@foo` is not allowed on this <MyButton>.'
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div @foo="x" />
+      </template>`,
+      options: ['/^f/', { argument: 'foo' }],
+      errors: ['Using `@foo` is not allowed on this element.']
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div @foo="x" />
+      </template>`,
+      options: [{ argument: 'foo', message: 'foo' }],
+      errors: ['foo']
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div @foo="foo"></div></template>',
+      options: [{ argument: 'foo', element: 'div' }],
+      errors: [
+        {
+          message: 'Using `@foo` is not allowed on this <div>.'
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-on:foo="foo"></div></template>',
+      options: ['foo'],
+      errors: [
+        {
+          message: 'Using `v-on:foo` is not allowed on this element.'
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/no-root-v-if.js b/tests/lib/rules/no-root-v-if.js
new file mode 100644
index 000000000..43119b7d0
--- /dev/null
+++ b/tests/lib/rules/no-root-v-if.js
@@ -0,0 +1,114 @@
+/**
+ * @author Perry Song
+ * @copyright 2023 Perry Song. All rights reserved.
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/no-root-v-if')
+
+const tester = new RuleTester({
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
+})
+
+tester.run('no-root-v-if', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: ''
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div>abc</div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template>\n    <div>abc</div>\n</template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template>\n    <!-- comment -->\n    <div>abc</div>\n</template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template>\n    <!-- comment -->\n    <div v-if="foo">abc</div>\n    <div v-else>abc</div>\n</template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template>\n    <!-- comment -->\n    <div v-if="foo">abc</div>\n    <div v-else-if="bar">abc</div>\n    <div v-else>abc</div>\n</template>'
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>\n    <c1 v-if="1" />\n    <c2 v-else-if="1" />\n    <c3 v-else />\n</template>`
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-if="foo"></div><div v-else-if="bar"></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template src="foo.html"></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><textarea/>test</div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><table><custom-thead></custom-thead></table></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div></div><div></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template>\n    <div></div>\n    <div></div>\n</template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template>{{a b c}}</template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div></div>aaaaaa</template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template>aaaaaa<div></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-for="x in list"></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><slot></slot></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><template></template></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template> <div v-if="mode === \'a\'"></div><div v-if="mode === \'b\'"></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div /><div v-if="foo" /></template>'
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: '<template><custom-component v-if="foo"></custom-component></template>',
+      errors: ['`v-if` should not be used on root element without `v-else`.']
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-if="foo"></div></template>',
+      errors: ['`v-if` should not be used on root element without `v-else`.']
+    }
+  ]
+})
diff --git a/tests/lib/rules/no-setup-props-destructure.js b/tests/lib/rules/no-setup-props-reactivity-loss.js
similarity index 63%
rename from tests/lib/rules/no-setup-props-destructure.js
rename to tests/lib/rules/no-setup-props-reactivity-loss.js
index d990f8857..fce921bfe 100644
--- a/tests/lib/rules/no-setup-props-destructure.js
+++ b/tests/lib/rules/no-setup-props-reactivity-loss.js
@@ -3,15 +3,18 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
-const rule = require('../../../lib/rules/no-setup-props-destructure')
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/no-setup-props-reactivity-loss')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2020, sourceType: 'module' }
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
 })
 
-tester.run('no-setup-props-destructure', rule, {
+tester.run('no-setup-props-reactivity-loss', rule, {
   valid: [
     {
       filename: 'test.vue',
@@ -110,6 +113,28 @@ tester.run('no-setup-props-destructure', rule, {
       </script>
       `
     },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        setup(props) {
+          watch(
+            () => props.count,
+            () => {
+              const test = props.count ? true : false
+              console.log(test)
+            }
+          )
+
+          return () => {
+            return h('div', props.count ? true : false)
+          }
+        }
+      }
+      </script>
+      `
+    },
     {
       filename: 'test.vue',
       code: `
@@ -119,6 +144,7 @@ tester.run('no-setup-props-destructure', rule, {
           const {x} = noProps
           ({y} = noProps)
           const z = noProps.z
+          const foo = \`\${noProp.foo}\`
         }
       }
       </script>
@@ -160,12 +186,11 @@ tester.run('no-setup-props-destructure', rule, {
       </script>
       `
     },
-    {
-      code: `
+    `
       Vue.component('test', {
         el: a = b
-      })`
-    },
+      })
+    `,
     {
       filename: 'test.vue',
       code: `
@@ -205,6 +230,43 @@ tester.run('no-setup-props-destructure', rule, {
           line: 4
         }
       ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        setup: (props) => {
+          const count = computed(() => props.count)
+        }
+      }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const props = defineProps({ count: Number })
+      const count = computed(() => props.count)
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const {count} = defineProps({count:Number})
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const { foo = 1, bar = 'ok' } = defineProps({ foo: Number, bar: String })
+      </script>
+      `
     }
   ],
   invalid: [
@@ -411,6 +473,18 @@ tester.run('no-setup-props-destructure', rule, {
         {
           messageId: 'getProperty',
           line: 7
+        },
+        {
+          messageId: 'getProperty',
+          line: 9
+        },
+        {
+          messageId: 'getProperty',
+          line: 10
+        },
+        {
+          messageId: 'getProperty',
+          line: 11
         }
       ]
     },
@@ -474,13 +548,14 @@ tester.run('no-setup-props-destructure', rule, {
       code: `
       <script setup>
       const {count} = defineProps({count:Number})
+      const foo = count
       </script>
       `,
       errors: [
         {
           message:
-            'Destructuring the `props` will cause the value to lose reactivity.',
-          line: 3
+            'Getting a value from the `props` in root scope of `<script setup>` will cause the value to lose reactivity.',
+          line: 4
         }
       ]
     },
@@ -525,6 +600,178 @@ tester.run('no-setup-props-destructure', rule, {
           line: 5
         }
       ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        setup: (props) => {
+          const count = ref(props.count)
+          count = fn(props.count)
+        }
+      }
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'getProperty',
+          line: 5
+        },
+        {
+          messageId: 'getProperty',
+          line: 6
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const props = defineProps({ count: Number })
+      const count = ref(props.count)
+      count = fn(props.count)
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'getProperty',
+          line: 4
+        },
+        {
+          messageId: 'getProperty',
+          line: 5
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const props = defineProps({ count: Number })
+      const newProps = ref({ count: props.count })
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'getProperty',
+          line: 4
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const props = defineProps({ count: Number })
+      const counts = [props.count]
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'getProperty',
+          line: 4
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const props = defineProps({ count: Number })
+      const counter = { count: props.count }
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'getProperty',
+          line: 4
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const props = defineProps({ count: Number })
+      const counters = [{ count: [props.count] }]
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'getProperty',
+          line: 4
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const props = defineProps({ count: Number })
+      const buildCounter = (count) => ({ count })
+
+      buildCounter(props.count)
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'getProperty',
+          line: 6
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const props = defineProps({ count: Number })
+      const buildCounter = props.count ? 1 : undefined
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'getProperty',
+          line: 4
+        }
+      ]
+    },
+    {
+      // https://github.com/vuejs/eslint-plugin-vue/issues/2470
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        setup(p) {
+          const foo = \`\${p.x}\`
+        }
+      }
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'getProperty',
+          line: 5
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        setup(p) {
+          const foo = \`bar\${p.x}bar\${p.y}\`
+        }
+      }
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'getProperty',
+          line: 5
+        }
+      ]
     }
   ]
 })
diff --git a/tests/lib/rules/no-shared-component-data.js b/tests/lib/rules/no-shared-component-data.js
index 38303b2ee..98e06728e 100644
--- a/tests/lib/rules/no-shared-component-data.js
+++ b/tests/lib/rules/no-shared-component-data.js
@@ -4,23 +4,15 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/no-shared-component-data')
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 
-const parserOptions = {
+const languageOptions = {
   ecmaVersion: 2018,
   sourceType: 'module'
 }
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const ruleTester = new RuleTester()
 ruleTester.run('no-shared-component-data', rule, {
   valid: [
@@ -35,7 +27,7 @@ ruleTester.run('no-shared-component-data', rule, {
           }
         })
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.js',
@@ -49,7 +41,7 @@ ruleTester.run('no-shared-component-data', rule, {
           }
         })
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.js',
@@ -72,7 +64,7 @@ ruleTester.run('no-shared-component-data', rule, {
           }
         })
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -85,7 +77,7 @@ ruleTester.run('no-shared-component-data', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -94,7 +86,7 @@ ruleTester.run('no-shared-component-data', rule, {
           ...foo
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -103,7 +95,7 @@ ruleTester.run('no-shared-component-data', rule, {
           data
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -114,7 +106,7 @@ ruleTester.run('no-shared-component-data', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     }
   ],
 
@@ -137,7 +129,7 @@ return {
 }
         })
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: '`data` property in component must be a function.',
@@ -163,7 +155,7 @@ return {
 }
         })
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: '`data` property in component must be a function.',
@@ -189,7 +181,7 @@ return {
 }
         }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: '`data` property in component must be a function.',
@@ -215,7 +207,7 @@ return (/*b*/{
 }
         }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: '`data` property in component must be a function.',
diff --git a/tests/lib/rules/no-side-effects-in-computed-properties.js b/tests/lib/rules/no-side-effects-in-computed-properties.js
index dc62f933b..7ba23f875 100644
--- a/tests/lib/rules/no-side-effects-in-computed-properties.js
+++ b/tests/lib/rules/no-side-effects-in-computed-properties.js
@@ -4,31 +4,22 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/no-side-effects-in-computed-properties')
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 
-const parserOptions = {
+const languageOptions = {
   ecmaVersion: 2020,
   sourceType: 'module'
 }
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions
+  languageOptions: { parser: require('vue-eslint-parser'), ...languageOptions }
 })
 
 ruleTester.run('no-side-effects-in-computed-properties', rule, {
   valid: [
-    {
-      code: `Vue.component('test', {
+    `
+      Vue.component('test', {
         ...foo,
         computed: {
           ...test0({}),
@@ -105,10 +96,10 @@ ruleTester.run('no-side-effects-in-computed-properties', rule, {
             this.someArray.forEach(arr => console.log(arr))
           }
         }
-      })`
-    },
-    {
-      code: `Vue.component('test', {
+      })
+    `,
+    `
+      Vue.component('test', {
         computed: {
           ...mapGetters(['example']),
           test1() {
@@ -123,18 +114,18 @@ ruleTester.run('no-side-effects-in-computed-properties', rule, {
             return something.b
           }
         }
-      })`
-    },
-    {
-      code: `Vue.component('test', {
+      })
+    `,
+    `
+      Vue.component('test', {
         name: 'something',
         data() {
           return {}
         }
-      })`
-    },
-    {
-      code: `Vue.component('test', {
+      })
+    `,
+    `
+      Vue.component('test', {
         computed: {
           test () {
             let a;
@@ -142,10 +133,10 @@ ruleTester.run('no-side-effects-in-computed-properties', rule, {
             return a
           },
         }
-      })`
-    },
-    {
-      code: `Vue.component('test', {
+      })
+    `,
+    `
+      Vue.component('test', {
         computed: {
           test () {
             return {
@@ -161,32 +152,32 @@ ruleTester.run('no-side-effects-in-computed-properties', rule, {
             }
           },
         }
-      })`
-    },
-    {
-      code: `Vue.component('test', {
+      })
+    `,
+    `
+      Vue.component('test', {
         computed: {
           test () {
             return this.something['a']().reverse()
           },
         }
-      })`
-    },
-    {
-      code: `const test = { el: '#app' }
+      })
+    `,
+    `
+      const test = { el: '#app' }
         Vue.component('test', {
         el: test.el
-      })`
-    },
-    {
-      code: `Vue.component('test', {
+      })
+    `,
+    `
+      Vue.component('test', {
         computed: {
           test () {
             return [...this.items].reverse()
           },
         }
-      })`
-    },
+      })
+    `,
     {
       filename: 'test.vue',
       code: `
@@ -268,6 +259,7 @@ ruleTester.run('no-side-effects-in-computed-properties', rule, {
           })
           const test18 = computed(() => (console.log('a'), true))
           const test19 = computed(() => utils.reverse(foo.array))
+          const test20 = computed(() => Object.assign({}, foo.data, { extra: 'value' }))
         }
       }
       </script>`
@@ -305,32 +297,53 @@ ruleTester.run('no-side-effects-in-computed-properties', rule, {
       })`,
       errors: [
         {
+          message: 'Unexpected side effect in "test1" computed property.',
           line: 4,
-          message: 'Unexpected side effect in "test1" computed property.'
+          column: 13,
+          endLine: 4,
+          endColumn: 37
         },
         {
+          message: 'Unexpected side effect in "test2" computed property.',
           line: 9,
-          message: 'Unexpected side effect in "test2" computed property.'
+          column: 13,
+          endLine: 9,
+          endColumn: 28
         },
         {
+          message: 'Unexpected side effect in "test2" computed property.',
           line: 10,
-          message: 'Unexpected side effect in "test2" computed property.'
+          column: 13,
+          endLine: 10,
+          endColumn: 25
         },
         {
+          message: 'Unexpected side effect in "test3" computed property.',
           line: 14,
-          message: 'Unexpected side effect in "test3" computed property.'
+          column: 20,
+          endLine: 14,
+          endColumn: 44
         },
         {
+          message: 'Unexpected side effect in "test4" computed property.',
           line: 17,
-          message: 'Unexpected side effect in "test4" computed property.'
+          column: 26,
+          endLine: 17,
+          endColumn: 64
         },
         {
+          message: 'Unexpected side effect in "test5" computed property.',
           line: 21,
-          message: 'Unexpected side effect in "test5" computed property.'
+          column: 13,
+          endLine: 21,
+          endColumn: 49
         },
         {
+          message: 'Unexpected side effect in "test6" computed property.',
           line: 25,
-          message: 'Unexpected side effect in "test6" computed property.'
+          column: 20,
+          endLine: 25,
+          endColumn: 46
         }
       ]
     },
@@ -368,24 +381,39 @@ ruleTester.run('no-side-effects-in-computed-properties', rule, {
       })`,
       errors: [
         {
+          message: 'Unexpected side effect in "test1" computed property.',
           line: 5,
-          message: 'Unexpected side effect in "test1" computed property.'
+          column: 15,
+          endLine: 5,
+          endColumn: 39
         },
         {
+          message: 'Unexpected side effect in "test2" computed property.',
           line: 11,
-          message: 'Unexpected side effect in "test2" computed property.'
+          column: 15,
+          endLine: 11,
+          endColumn: 30
         },
         {
+          message: 'Unexpected side effect in "test2" computed property.',
           line: 12,
-          message: 'Unexpected side effect in "test2" computed property.'
+          column: 15,
+          endLine: 12,
+          endColumn: 27
         },
         {
+          message: 'Unexpected side effect in "test3" computed property.',
           line: 18,
-          message: 'Unexpected side effect in "test3" computed property.'
+          column: 22,
+          endLine: 18,
+          endColumn: 46
         },
         {
+          message: 'Unexpected side effect in "test4" computed property.',
           line: 23,
-          message: 'Unexpected side effect in "test4" computed property.'
+          column: 28,
+          endLine: 23,
+          endColumn: 66
         }
       ]
     },
@@ -400,13 +428,16 @@ ruleTester.run('no-side-effects-in-computed-properties', rule, {
           }
         });
       `,
+      languageOptions: { parser: require('@typescript-eslint/parser') },
       errors: [
         {
+          message: 'Unexpected side effect in "test1" computed property.',
           line: 5,
-          message: 'Unexpected side effect in "test1" computed property.'
+          column: 22,
+          endLine: 5,
+          endColumn: 46
         }
-      ],
-      parser: require.resolve('@typescript-eslint/parser')
+      ]
     },
 
     {
@@ -421,8 +452,11 @@ ruleTester.run('no-side-effects-in-computed-properties', rule, {
       })`,
       errors: [
         {
+          message: 'Unexpected side effect in "test1" computed property.',
           line: 4,
-          message: 'Unexpected side effect in "test1" computed property.'
+          column: 13,
+          endLine: 4,
+          endColumn: 37
         }
       ]
     },
@@ -441,9 +475,27 @@ ruleTester.run('no-side-effects-in-computed-properties', rule, {
         }
       })`,
       errors: [
-        'Unexpected side effect in "test1" computed property.',
-        'Unexpected side effect in "test2" computed property.',
-        'Unexpected side effect in "test3" computed property.'
+        {
+          message: 'Unexpected side effect in "test1" computed property.',
+          line: 4,
+          column: 20,
+          endLine: 4,
+          endColumn: 48
+        },
+        {
+          message: 'Unexpected side effect in "test2" computed property.',
+          line: 7,
+          column: 20,
+          endLine: 7,
+          endColumn: 50
+        },
+        {
+          message: 'Unexpected side effect in "test3" computed property.',
+          line: 10,
+          column: 20,
+          endLine: 10,
+          endColumn: 50
+        }
       ]
     },
     {
@@ -459,12 +511,18 @@ ruleTester.run('no-side-effects-in-computed-properties', rule, {
       })`,
       errors: [
         {
+          message: 'Unexpected side effect in "fooBar" computed property.',
           line: 4,
-          message: 'Unexpected side effect in "fooBar" computed property.'
+          column: 18,
+          endLine: 4,
+          endColumn: 22
         },
         {
+          message: 'Unexpected side effect in "fooBar" computed property.',
           line: 5,
-          message: 'Unexpected side effect in "fooBar" computed property.'
+          column: 17,
+          endLine: 5,
+          endColumn: 20
         }
       ]
     },
@@ -523,52 +581,88 @@ ruleTester.run('no-side-effects-in-computed-properties', rule, {
       `,
       errors: [
         {
+          message: 'Unexpected side effect in computed function.',
           line: 12,
-          message: 'Unexpected side effect in computed function.'
+          column: 13,
+          endLine: 12,
+          endColumn: 36
         },
         {
+          message: 'Unexpected side effect in computed function.',
           line: 13,
-          message: 'Unexpected side effect in computed function.'
+          column: 13,
+          endLine: 13,
+          endColumn: 34
         },
         {
+          message: 'Unexpected side effect in computed function.',
           line: 17,
-          message: 'Unexpected side effect in computed function.'
+          column: 13,
+          endLine: 17,
+          endColumn: 27
         },
         {
+          message: 'Unexpected side effect in computed function.',
           line: 18,
-          message: 'Unexpected side effect in computed function.'
+          column: 13,
+          endLine: 18,
+          endColumn: 24
         },
         {
+          message: 'Unexpected side effect in computed function.',
           line: 21,
-          message: 'Unexpected side effect in computed function.'
+          column: 40,
+          endLine: 21,
+          endColumn: 63
         },
         {
+          message: 'Unexpected side effect in computed function.',
           line: 23,
-          message: 'Unexpected side effect in computed function.'
+          column: 26,
+          endLine: 23,
+          endColumn: 63
         },
         {
+          message: 'Unexpected side effect in computed function.',
           line: 27,
-          message: 'Unexpected side effect in computed function.'
+          column: 13,
+          endLine: 27,
+          endColumn: 52
         },
         {
+          message: 'Unexpected side effect in computed function.',
           line: 30,
-          message: 'Unexpected side effect in computed function.'
+          column: 40,
+          endLine: 30,
+          endColumn: 65
         },
         {
+          message: 'Unexpected side effect in computed function.',
           line: 33,
-          message: 'Unexpected side effect in computed function.'
+          column: 22,
+          endLine: 33,
+          endColumn: 45
         },
         {
+          message: 'Unexpected side effect in computed function.',
           line: 37,
-          message: 'Unexpected side effect in computed function.'
+          column: 13,
+          endLine: 37,
+          endColumn: 24
         },
         {
+          message: 'Unexpected side effect in computed function.',
           line: 40,
-          message: 'Unexpected side effect in computed function.'
+          column: 13,
+          endLine: 40,
+          endColumn: 24
         },
         {
+          message: 'Unexpected side effect in computed function.',
           line: 42,
-          message: 'Unexpected side effect in computed function.'
+          column: 42,
+          endLine: 42,
+          endColumn: 52
         }
       ]
     },
@@ -588,8 +682,11 @@ ruleTester.run('no-side-effects-in-computed-properties', rule, {
       `,
       errors: [
         {
+          message: 'Unexpected side effect in computed function.',
           line: 8,
-          message: 'Unexpected side effect in computed function.'
+          column: 40,
+          endLine: 8,
+          endColumn: 53
         }
       ]
     },
@@ -609,8 +706,11 @@ ruleTester.run('no-side-effects-in-computed-properties', rule, {
       `,
       errors: [
         {
+          message: 'Unexpected side effect in computed function.',
           line: 8,
-          message: 'Unexpected side effect in computed function.'
+          column: 40,
+          endLine: 8,
+          endColumn: 63
         }
       ]
     },
@@ -666,52 +766,88 @@ ruleTester.run('no-side-effects-in-computed-properties', rule, {
       `,
       errors: [
         {
+          message: 'Unexpected side effect in computed function.',
           line: 10,
-          message: 'Unexpected side effect in computed function.'
+          column: 9,
+          endLine: 10,
+          endColumn: 32
         },
         {
+          message: 'Unexpected side effect in computed function.',
           line: 11,
-          message: 'Unexpected side effect in computed function.'
+          column: 9,
+          endLine: 11,
+          endColumn: 30
         },
         {
+          message: 'Unexpected side effect in computed function.',
           line: 15,
-          message: 'Unexpected side effect in computed function.'
+          column: 9,
+          endLine: 15,
+          endColumn: 23
         },
         {
+          message: 'Unexpected side effect in computed function.',
           line: 16,
-          message: 'Unexpected side effect in computed function.'
+          column: 9,
+          endLine: 16,
+          endColumn: 20
         },
         {
+          message: 'Unexpected side effect in computed function.',
           line: 19,
-          message: 'Unexpected side effect in computed function.'
+          column: 36,
+          endLine: 19,
+          endColumn: 59
         },
         {
+          message: 'Unexpected side effect in computed function.',
           line: 21,
-          message: 'Unexpected side effect in computed function.'
+          column: 22,
+          endLine: 21,
+          endColumn: 59
         },
         {
+          message: 'Unexpected side effect in computed function.',
           line: 25,
-          message: 'Unexpected side effect in computed function.'
+          column: 9,
+          endLine: 25,
+          endColumn: 48
         },
         {
+          message: 'Unexpected side effect in computed function.',
           line: 28,
-          message: 'Unexpected side effect in computed function.'
+          column: 36,
+          endLine: 28,
+          endColumn: 61
         },
         {
+          message: 'Unexpected side effect in computed function.',
           line: 31,
-          message: 'Unexpected side effect in computed function.'
+          column: 18,
+          endLine: 31,
+          endColumn: 41
         },
         {
+          message: 'Unexpected side effect in computed function.',
           line: 35,
-          message: 'Unexpected side effect in computed function.'
+          column: 9,
+          endLine: 35,
+          endColumn: 20
         },
         {
+          message: 'Unexpected side effect in computed function.',
           line: 38,
-          message: 'Unexpected side effect in computed function.'
+          column: 9,
+          endLine: 38,
+          endColumn: 20
         },
         {
+          message: 'Unexpected side effect in computed function.',
           line: 40,
-          message: 'Unexpected side effect in computed function.'
+          column: 38,
+          endLine: 40,
+          endColumn: 48
         }
       ]
     },
@@ -727,8 +863,11 @@ ruleTester.run('no-side-effects-in-computed-properties', rule, {
       `,
       errors: [
         {
+          message: 'Unexpected side effect in computed function.',
           line: 6,
-          message: 'Unexpected side effect in computed function.'
+          column: 36,
+          endLine: 6,
+          endColumn: 49
         }
       ]
     },
@@ -744,8 +883,59 @@ ruleTester.run('no-side-effects-in-computed-properties', rule, {
       `,
       errors: [
         {
+          message: 'Unexpected side effect in computed function.',
           line: 6,
-          message: 'Unexpected side effect in computed function.'
+          column: 36,
+          endLine: 6,
+          endColumn: 59
+        }
+      ]
+    },
+    {
+      // Object.assign mutating the prop as first argument in computed properties
+      filename: 'test.vue',
+      code: `
+      <script>
+      import {ref, computed} from 'vue'
+      export default {
+        setup() {
+          const foo = useFoo()
+
+          const test1 = computed(() => Object.assign(foo.data, { extra: 'value' }))
+          const test2 = computed(() => {
+            return Object.assign(foo.user, foo.updates)
+          })
+          const test3 = computed({
+            get() {
+              Object.assign(foo.settings, { theme: 'dark' })
+              return foo.settings
+            }
+          })
+        }
+      }
+      </script>
+      `,
+      errors: [
+        {
+          message: 'Unexpected side effect in computed function.',
+          line: 8,
+          column: 40,
+          endLine: 8,
+          endColumn: 83
+        },
+        {
+          message: 'Unexpected side effect in computed function.',
+          line: 10,
+          column: 20,
+          endLine: 10,
+          endColumn: 56
+        },
+        {
+          message: 'Unexpected side effect in computed function.',
+          line: 14,
+          column: 15,
+          endLine: 14,
+          endColumn: 61
         }
       ]
     }
diff --git a/tests/lib/rules/no-spaces-around-equal-signs-in-attribute.js b/tests/lib/rules/no-spaces-around-equal-signs-in-attribute.js
index 9e475a5d6..9372a1c98 100644
--- a/tests/lib/rules/no-spaces-around-equal-signs-in-attribute.js
+++ b/tests/lib/rules/no-spaces-around-equal-signs-in-attribute.js
@@ -3,19 +3,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/no-spaces-around-equal-signs-in-attribute')
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser')
+  languageOptions: { parser: require('vue-eslint-parser') }
 })
 
 tester.run('no-spaces-around-equal-signs-in-attribute', rule, {
diff --git a/tests/lib/rules/no-sparse-arrays.js b/tests/lib/rules/no-sparse-arrays.js
index 7c0020fd5..b86513ce1 100644
--- a/tests/lib/rules/no-sparse-arrays.js
+++ b/tests/lib/rules/no-sparse-arrays.js
@@ -3,12 +3,12 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const { RuleTester, ESLint } = require('../../eslint-compat')
+const semver = require('semver')
 const rule = require('../../../lib/rules/no-sparse-arrays')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('no-sparse-arrays', rule, {
@@ -30,9 +30,10 @@ tester.run('no-sparse-arrays', rule, {
         {
           message: 'Unexpected comma in middle of array.',
           line: 3,
-          column: 22,
           endLine: 3,
-          endColumn: 38
+          ...(semver.gte(ESLint.version, '9.5.0')
+            ? { column: 23, endColumn: 24 }
+            : { column: 22, endColumn: 38 })
         }
       ]
     },
@@ -45,9 +46,10 @@ tester.run('no-sparse-arrays', rule, {
         {
           message: 'Unexpected comma in middle of array.',
           line: 3,
-          column: 22,
           endLine: 3,
-          endColumn: 30
+          ...(semver.gte(ESLint.version, '9.5.0')
+            ? { column: 23, endColumn: 24 }
+            : { column: 22, endColumn: 30 })
         }
       ]
     }
diff --git a/tests/lib/rules/no-static-inline-styles.js b/tests/lib/rules/no-static-inline-styles.js
index 31e08b38e..c215d4bd3 100644
--- a/tests/lib/rules/no-static-inline-styles.js
+++ b/tests/lib/rules/no-static-inline-styles.js
@@ -4,14 +4,11 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-static-inline-styles')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
-    ecmaVersion: 2019
-  }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2019 }
 })
 
 tester.run('no-static-inline-styles', rule, {
diff --git a/tests/lib/rules/no-template-key.js b/tests/lib/rules/no-template-key.js
index 599e150f5..62f9f2a87 100644
--- a/tests/lib/rules/no-template-key.js
+++ b/tests/lib/rules/no-template-key.js
@@ -5,20 +5,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-template-key')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('no-template-key', rule, {
diff --git a/tests/lib/rules/no-template-shadow.js b/tests/lib/rules/no-template-shadow.js
index cd66b06ab..6cbd94c58 100644
--- a/tests/lib/rules/no-template-shadow.js
+++ b/tests/lib/rules/no-template-shadow.js
@@ -4,20 +4,12 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/no-template-shadow')
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
     ecmaVersion: 2018,
     sourceType: 'module'
   }
@@ -163,6 +155,21 @@ ruleTester.run('no-template-shadow', rule, {
       defineProps({k:Number})
       </script>
       `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div v-for="i in 5">
+          <div v-for="i in 5">
+          </div>
+        </div>
+      </template>
+      <script setup>
+      defineProps({i:Number})
+      </script>
+      `,
+      options: [{ allow: ['i'] }]
     }
   ],
 
@@ -173,7 +180,10 @@ ruleTester.run('no-template-shadow', rule, {
       errors: [
         {
           message: "Variable 'i' is already declared in the upper scope.",
-          type: 'Identifier'
+          line: 1,
+          column: 43,
+          endLine: 1,
+          endColumn: 44
         }
       ]
     },
@@ -192,8 +202,10 @@ ruleTester.run('no-template-shadow', rule, {
       errors: [
         {
           message: "Variable 'i' is already declared in the upper scope.",
-          type: 'Identifier',
-          line: 2
+          line: 2,
+          column: 21,
+          endLine: 2,
+          endColumn: 22
         }
       ]
     },
@@ -213,13 +225,17 @@ ruleTester.run('no-template-shadow', rule, {
       errors: [
         {
           message: "Variable 'i' is already declared in the upper scope.",
-          type: 'Identifier',
-          line: 2
+          line: 2,
+          column: 21,
+          endLine: 2,
+          endColumn: 22
         },
         {
           message: "Variable 'i' is already declared in the upper scope.",
-          type: 'Identifier',
-          line: 3
+          line: 3,
+          column: 21,
+          endLine: 3,
+          endColumn: 22
         }
       ]
     },
@@ -240,13 +256,17 @@ ruleTester.run('no-template-shadow', rule, {
       errors: [
         {
           message: "Variable 'i' is already declared in the upper scope.",
-          type: 'Identifier',
-          line: 2
+          line: 2,
+          column: 21,
+          endLine: 2,
+          endColumn: 22
         },
         {
           message: "Variable 'i' is already declared in the upper scope.",
-          type: 'Identifier',
-          line: 3
+          line: 3,
+          column: 23,
+          endLine: 3,
+          endColumn: 24
         }
       ]
     },
@@ -267,8 +287,10 @@ ruleTester.run('no-template-shadow', rule, {
       errors: [
         {
           message: "Variable 'i' is already declared in the upper scope.",
-          type: 'Identifier',
-          line: 2
+          line: 2,
+          column: 21,
+          endLine: 2,
+          endColumn: 22
         }
       ]
     },
@@ -291,13 +313,17 @@ ruleTester.run('no-template-shadow', rule, {
       errors: [
         {
           message: "Variable 'i' is already declared in the upper scope.",
-          type: 'Identifier',
-          line: 2
+          line: 2,
+          column: 21,
+          endLine: 2,
+          endColumn: 22
         },
         {
           message: "Variable 'f' is already declared in the upper scope.",
-          type: 'Identifier',
-          line: 3
+          line: 3,
+          column: 21,
+          endLine: 3,
+          endColumn: 22
         }
       ]
     },
@@ -330,13 +356,17 @@ ruleTester.run('no-template-shadow', rule, {
       errors: [
         {
           message: "Variable 'e' is already declared in the upper scope.",
-          type: 'Identifier',
-          line: 6
+          line: 6,
+          column: 21,
+          endLine: 6,
+          endColumn: 22
         },
         {
           message: "Variable 'f' is already declared in the upper scope.",
-          type: 'Identifier',
-          line: 7
+          line: 7,
+          column: 21,
+          endLine: 7,
+          endColumn: 22
         }
       ]
     },
@@ -369,13 +399,17 @@ ruleTester.run('no-template-shadow', rule, {
       errors: [
         {
           message: "Variable 'e' is already declared in the upper scope.",
-          type: 'Identifier',
-          line: 6
+          line: 6,
+          column: 21,
+          endLine: 6,
+          endColumn: 22
         },
         {
           message: "Variable 'f' is already declared in the upper scope.",
-          type: 'Identifier',
-          line: 7
+          line: 7,
+          column: 21,
+          endLine: 7,
+          endColumn: 22
         }
       ]
     },
@@ -406,13 +440,17 @@ ruleTester.run('no-template-shadow', rule, {
       errors: [
         {
           message: "Variable 'e' is already declared in the upper scope.",
-          type: 'Identifier',
-          line: 6
+          line: 6,
+          column: 21,
+          endLine: 6,
+          endColumn: 22
         },
         {
           message: "Variable 'f' is already declared in the upper scope.",
-          type: 'Identifier',
-          line: 7
+          line: 7,
+          column: 21,
+          endLine: 7,
+          endColumn: 22
         }
       ]
     },
@@ -438,7 +476,10 @@ ruleTester.run('no-template-shadow', rule, {
       errors: [
         {
           message: "Variable 'j' is already declared in the upper scope.",
-          line: 4
+          line: 4,
+          column: 23,
+          endLine: 4,
+          endColumn: 24
         }
       ]
     },
@@ -458,7 +499,10 @@ ruleTester.run('no-template-shadow', rule, {
       errors: [
         {
           message: "Variable 'j' is already declared in the upper scope.",
-          line: 4
+          line: 4,
+          column: 23,
+          endLine: 4,
+          endColumn: 24
         }
       ]
     },
@@ -478,7 +522,10 @@ ruleTester.run('no-template-shadow', rule, {
       errors: [
         {
           message: "Variable 'j' is already declared in the upper scope.",
-          line: 4
+          line: 4,
+          column: 23,
+          endLine: 4,
+          endColumn: 24
         }
       ]
     }
diff --git a/tests/lib/rules/no-template-target-blank.js b/tests/lib/rules/no-template-target-blank.js
index 3d21c1db2..42d84f6b2 100644
--- a/tests/lib/rules/no-template-target-blank.js
+++ b/tests/lib/rules/no-template-target-blank.js
@@ -4,50 +4,31 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/no-template-target-blank')
 
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 ruleTester.run('no-template-target-blank', rule, {
   valid: [
-    { code: '<template><a>link</a></template>' },
-    { code: '<template><a attr>link</a></template>' },
-    { code: '<template><a target>link</a></template>' },
-    {
-      code: '<template><a href="https://eslint.vuejs.org">link</a></template>'
-    },
-    { code: '<template><a :href="link">link</a></template>' },
-    {
-      code: '<template><a :href="link" target="_blank" rel="noopener noreferrer">link</a></template>'
-    },
-    {
-      code: '<template><a href="https://eslint.vuejs.org" target="_blank" rel="noopener noreferrer">link</a></template>'
-    },
+    '<template><a>link</a></template>',
+    '<template><a attr>link</a></template>',
+    '<template><a target>link</a></template>',
+    '<template><a href="https://eslint.vuejs.org">link</a></template>',
+    '<template><a :href="link">link</a></template>',
+    '<template><a :href="link" target="_blank" rel="noopener noreferrer">link</a></template>',
+    '<template><a href="https://eslint.vuejs.org" target="_blank" rel="noopener noreferrer">link</a></template>',
     {
       code: '<template><a href="https://eslint.vuejs.org" target="_blank" rel="noopener">link</a></template>',
       options: [{ allowReferrer: true }]
     },
-    { code: '<template><a href="/foo" target="_blank">link</a></template>' },
-    {
-      code: '<template><a href="/foo" target="_blank" rel="noopener noreferrer">link</a></template>'
-    },
-    { code: '<template><a href="foo/bar" target="_blank">link</a></template>' },
-    {
-      code: '<template><a href="foo/bar" target="_blank" rel="noopener noreferrer">link</a></template>'
-    },
+    '<template><a href="/foo" target="_blank">link</a></template>',
+    '<template><a href="/foo" target="_blank" rel="noopener noreferrer">link</a></template>',
+    '<template><a href="foo/bar" target="_blank">link</a></template>',
+    '<template><a href="foo/bar" target="_blank" rel="noopener noreferrer">link</a></template>',
     {
       code: '<template><a :href="link" target="_blank">link</a></template>',
       options: [{ enforceDynamicLinks: 'never' }]
@@ -57,31 +38,81 @@ ruleTester.run('no-template-target-blank', rule, {
     {
       code: '<template><a href="https://eslint.vuejs.org" target="_blank">link</a></template>',
       errors: [
-        'Using target="_blank" without rel="noopener noreferrer" is a security risk.'
+        {
+          message:
+            'Using target="_blank" without rel="noopener noreferrer" is a security risk.',
+          suggestions: [
+            {
+              desc: 'Add `rel="noopener noreferrer"`.',
+              output:
+                '<template><a href="https://eslint.vuejs.org" target="_blank" rel="noopener noreferrer">link</a></template>'
+            }
+          ]
+        }
       ]
     },
     {
       code: '<template><a href="https://eslint.vuejs.org" target="_blank" rel="noopenernoreferrer">link</a></template>',
       errors: [
-        'Using target="_blank" without rel="noopener noreferrer" is a security risk.'
+        {
+          message:
+            'Using target="_blank" without rel="noopener noreferrer" is a security risk.',
+          suggestions: [
+            {
+              desc: 'Change `rel` attribute value to `noopener noreferrer`.',
+              output:
+                '<template><a href="https://eslint.vuejs.org" target="_blank" rel="noopener noreferrer">link</a></template>'
+            }
+          ]
+        }
       ]
     },
     {
       code: '<template><a :href="link" target="_blank" rel=3>link</a></template>',
       errors: [
-        'Using target="_blank" without rel="noopener noreferrer" is a security risk.'
+        {
+          message:
+            'Using target="_blank" without rel="noopener noreferrer" is a security risk.',
+          suggestions: [
+            {
+              desc: 'Change `rel` attribute value to `noopener noreferrer`.',
+              output:
+                '<template><a :href="link" target="_blank" rel="noopener noreferrer">link</a></template>'
+            }
+          ]
+        }
       ]
     },
     {
       code: '<template><a :href="link" target="_blank">link</a></template>',
       errors: [
-        'Using target="_blank" without rel="noopener noreferrer" is a security risk.'
+        {
+          message:
+            'Using target="_blank" without rel="noopener noreferrer" is a security risk.',
+          suggestions: [
+            {
+              desc: 'Add `rel="noopener noreferrer"`.',
+              output:
+                '<template><a :href="link" target="_blank" rel="noopener noreferrer">link</a></template>'
+            }
+          ]
+        }
       ]
     },
     {
       code: '<template><a href="https://eslint.vuejs.org" target="_blank" rel="noopener">link</a></template>',
       errors: [
-        'Using target="_blank" without rel="noopener noreferrer" is a security risk.'
+        {
+          message:
+            'Using target="_blank" without rel="noopener noreferrer" is a security risk.',
+          suggestions: [
+            {
+              desc: 'Change `rel` attribute value to `noopener noreferrer`.',
+              output:
+                '<template><a href="https://eslint.vuejs.org" target="_blank" rel="noopener noreferrer">link</a></template>'
+            }
+          ]
+        }
       ]
     }
   ]
diff --git a/tests/lib/rules/no-textarea-mustache.js b/tests/lib/rules/no-textarea-mustache.js
index 75040538b..cc389f223 100644
--- a/tests/lib/rules/no-textarea-mustache.js
+++ b/tests/lib/rules/no-textarea-mustache.js
@@ -5,20 +5,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-textarea-mustache')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('no-textarea-mustache', rule, {
@@ -30,6 +21,10 @@ tester.run('no-textarea-mustache', rule, {
     {
       filename: 'test.vue',
       code: '<template><div><textarea v-model="text"></textarea></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><Textarea>{{text}}</Textarea></div></template>'
     }
   ],
   invalid: [
@@ -38,6 +33,11 @@ tester.run('no-textarea-mustache', rule, {
       code: '<template><div><textarea>{{text}}</textarea></div></template>',
       errors: ["Unexpected mustache. Use 'v-model' instead."]
     },
+    {
+      filename: 'test.vue',
+      code: '<template><div><textarea v-model="text">{{text}}</textarea></div></template>',
+      errors: ["Unexpected mustache. Use 'v-model' instead."]
+    },
     {
       filename: 'test.vue',
       code: '<template><div><textarea>{{text}} and {{text}}</textarea></div></template>',
diff --git a/tests/lib/rules/no-this-in-before-route-enter.js b/tests/lib/rules/no-this-in-before-route-enter.js
index 1171959ae..490385345 100644
--- a/tests/lib/rules/no-this-in-before-route-enter.js
+++ b/tests/lib/rules/no-this-in-before-route-enter.js
@@ -9,7 +9,7 @@
 //------------------------------------------------------------------------------
 
 const rule = require('../../../lib/rules/no-this-in-before-route-enter')
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 
 //------------------------------------------------------------------------------
 // Tests
@@ -59,8 +59,11 @@ export default {
 </script>`
 
 const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2020, sourceType: 'module' }
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
 })
 ruleTester.run('no-this-in-before-route-enter', rule, {
   valid: [
@@ -83,8 +86,8 @@ export default {
   ],
   invalid: [
     {
-      code: template(`this.xxx();`),
       filename: 'ValidComponent.vue',
+      code: template(`this.xxx();`),
       errors: [
         {
           message:
@@ -97,8 +100,8 @@ export default {
       ]
     },
     {
-      code: functionTemplate('this.method();'),
       filename: 'ValidComponent.vue',
+      code: functionTemplate('this.method();'),
       errors: [
         {
           message:
@@ -111,8 +114,8 @@ export default {
       ]
     },
     {
-      code: template('this.attr = this.method();'),
       filename: 'ValidComponent.vue',
+      code: template('this.attr = this.method();'),
       errors: [
         {
           message:
@@ -133,8 +136,8 @@ export default {
       ]
     },
     {
-      code: functionTemplate('this.attr = this.method();'),
       filename: 'ValidComponent.vue',
+      code: functionTemplate('this.attr = this.method();'),
       errors: [
         {
           message:
@@ -155,10 +158,10 @@ export default {
       ]
     },
     {
+      filename: 'ValidComponent.vue',
       code: template(`
                 if (this.method()) {}
             `),
-      filename: 'ValidComponent.vue',
       errors: [
         {
           message:
@@ -171,10 +174,10 @@ export default {
       ]
     },
     {
+      filename: 'ValidComponent.vue',
       code: functionTemplate(`
                 if (true) { this.method(); }
             `),
-      filename: 'ValidComponent.vue',
       errors: [
         {
           message:
diff --git a/tests/lib/rules/no-undef-components.js b/tests/lib/rules/no-undef-components.js
index b3a7af106..f87f9dcd5 100644
--- a/tests/lib/rules/no-undef-components.js
+++ b/tests/lib/rules/no-undef-components.js
@@ -4,12 +4,12 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-undef-components')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
     ecmaVersion: 2020,
     sourceType: 'module'
   }
@@ -103,10 +103,53 @@ tester.run('no-undef-components', rule, {
       `,
       options: [
         {
-          ignorePatterns: ['custom(\\-\\w+)+']
+          ignorePatterns: [String.raw`custom(\-\w+)+`]
         }
       ]
     },
+    // circular references
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      </script>
+
+      <template>
+        <test />
+      </template>
+      `
+    },
+    {
+      filename: 'FooBar.vue',
+      code: `
+      <script setup>
+      </script>
+
+      <template>
+        <FooBar />
+        <foo-bar />
+      </template>
+      `
+    },
+    {
+      filename: 'FooBar.vue',
+      code: `
+      <script>
+      export default {
+        name: 'BarFoo'
+      }
+      </script>
+      <script setup>
+      </script>
+
+      <template>
+        <FooBar />
+        <foo-bar />
+        <BarFoo />
+        <bar-foo />
+      </template>
+      `
+    },
 
     // options API
     {
@@ -126,7 +169,7 @@ tester.run('no-undef-components', rule, {
       `,
       options: [
         {
-          ignorePatterns: ['custom(\\-\\w+)+']
+          ignorePatterns: [String.raw`custom(\-\w+)+`]
         }
       ]
     },
@@ -141,7 +184,7 @@ tester.run('no-undef-components', rule, {
       `,
       options: [
         {
-          ignorePatterns: ['custom(\\-\\w+)+']
+          ignorePatterns: [String.raw`custom(\-\w+)+`]
         }
       ]
     },
@@ -156,7 +199,7 @@ tester.run('no-undef-components', rule, {
       `,
       options: [
         {
-          ignorePatterns: ['custom(\\-\\w+)+']
+          ignorePatterns: [String.raw`custom(\-\w+)+`]
         }
       ]
     },
@@ -171,7 +214,7 @@ tester.run('no-undef-components', rule, {
       `,
       options: [
         {
-          ignorePatterns: ['Custom(\\w+)+']
+          ignorePatterns: [String.raw`Custom(\w+)+`]
         }
       ]
     },
@@ -186,7 +229,7 @@ tester.run('no-undef-components', rule, {
       `,
       options: [
         {
-          ignorePatterns: ['Custom(\\w+)+']
+          ignorePatterns: [String.raw`Custom(\w+)+`]
         }
       ]
     },
@@ -201,7 +244,7 @@ tester.run('no-undef-components', rule, {
       `,
       options: [
         {
-          ignorePatterns: ['Custom(\\w+)+']
+          ignorePatterns: [String.raw`Custom(\w+)+`]
         }
       ]
     },
@@ -217,10 +260,29 @@ tester.run('no-undef-components', rule, {
       `,
       options: [
         {
-          ignorePatterns: ['Custom(\\w+)+', 'Warm(\\w+)+', 'InfoBtn(\\w+)+']
+          ignorePatterns: [
+            String.raw`Custom(\w+)+`,
+            String.raw`Warm(\w+)+`,
+            String.raw`InfoBtn(\w+)+`
+          ]
         }
       ]
     },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <CustomComponent />
+        </template>
+        <script>
+        export default defineNuxtComponent({
+          components: {
+            CustomComponent
+          }
+        })
+        </script>
+      `
+    },
     {
       filename: 'test.vue',
       code: `
@@ -598,6 +660,28 @@ tester.run('no-undef-components', rule, {
       <script setup>
       import TheModal from 'foo'
       </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+        import Foo from './Foo.vue'
+        import {HelloWorld1} from './components/HelloWorld'
+      </script>
+
+      <template>
+        <Foo />
+        <HelloWorld1 />
+      </template>
+      `,
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ecmaVersion: 6,
+        sourceType: 'module',
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
     }
   ],
   invalid: [
@@ -661,6 +745,95 @@ tester.run('no-undef-components', rule, {
         }
       ]
     },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+        import type Foo from './Foo.vue'
+        import type {HelloWorld1} from './components/HelloWorld'
+        import { type HelloWorld2 } from './components/HelloWorld2'
+        import type {HelloWorld as HelloWorld3} from './components/HelloWorld3'
+        import { type HelloWorld as HelloWorld4 } from './components/HelloWorld4';
+        import { type default as HelloWorld5 } from './components/HelloWorld5';
+      </script>
+
+      <template>
+        <Foo />
+        <HelloWorld1 />
+        <HelloWorld2 />
+        <HelloWorld3 />
+        <HelloWorld4 />
+        <HelloWorld5 />
+      </template>
+      `,
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ecmaVersion: 6,
+        sourceType: 'module',
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          message:
+            "The '<Foo>' component has been used, but 'Foo' only refers to a type.",
+          line: 12
+        },
+        {
+          message:
+            "The '<HelloWorld1>' component has been used, but 'HelloWorld1' only refers to a type.",
+          line: 13
+        },
+        {
+          message:
+            "The '<HelloWorld2>' component has been used, but 'HelloWorld2' only refers to a type.",
+          line: 14
+        },
+        {
+          message:
+            "The '<HelloWorld3>' component has been used, but 'HelloWorld3' only refers to a type.",
+          line: 15
+        },
+        {
+          message:
+            "The '<HelloWorld4>' component has been used, but 'HelloWorld4' only refers to a type.",
+          line: 16
+        },
+        {
+          message:
+            "The '<HelloWorld5>' component has been used, but 'HelloWorld5' only refers to a type.",
+          line: 17
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+        type Foo = {}
+      </script>
+
+      <template>
+        <Foo />
+      </template>
+      `,
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ecmaVersion: 6,
+        sourceType: 'module',
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          message:
+            "The '<Foo>' component has been used, but 'Foo' only refers to a type.",
+          line: 7
+        }
+      ]
+    },
 
     // options API
     {
@@ -687,7 +860,7 @@ tester.run('no-undef-components', rule, {
       `,
       options: [
         {
-          ignorePatterns: ['custom(\\-\\w+)+']
+          ignorePatterns: [String.raw`custom(\-\w+)+`]
         }
       ],
       errors: [
@@ -726,7 +899,7 @@ tester.run('no-undef-components', rule, {
       `,
       options: [
         {
-          ignorePatterns: ['custom(\\-\\w+)+']
+          ignorePatterns: [String.raw`custom(\-\w+)+`]
         }
       ],
       errors: [
diff --git a/tests/lib/rules/no-undef-properties.js b/tests/lib/rules/no-undef-properties.js
index 8b8ebbb1d..63313b4b0 100644
--- a/tests/lib/rules/no-undef-properties.js
+++ b/tests/lib/rules/no-undef-properties.js
@@ -4,12 +4,15 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-undef-properties')
+const {
+  getTypeScriptFixtureTestOptions
+} = require('../../test-utils/typescript')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
     ecmaVersion: 2020,
     sourceType: 'module'
   }
@@ -535,7 +538,279 @@ tester.run('no-undef-properties', rule, {
         },
       };
       </script>`
-    }
+    },
+
+    {
+      // unknown type
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      import type { Props1 } from './test01';
+
+      defineProps<Props1>();
+
+      </script>
+
+      <template>
+      <div>{{ foo }}</div>
+      <div>{{ unknown }}</div>
+      </template>`,
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
+    },
+    {
+      // Vuex
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapState } from 'vuex';
+
+      export default {
+        computed: {
+          ...mapState({
+            a: (vm) => vm.a,
+            b: (vm) => vm.b,
+          })
+        },
+        methods: {
+          c() {return this.a * this.b}
+        }
+      }
+      </script>
+      <template>
+      {{ a }} {{ b }}
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapActions } from 'vuex';
+
+      export default {
+          methods: {
+          ...mapActions({
+            a: 'a',
+            b: 'b',
+          }),
+          c() {return this.a()},
+          d() {return this.b()},
+        }
+      }
+      </script>
+      <template>
+      {{ a }} {{ b }}
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapMutations } from 'vuex';
+
+      export default {
+          methods: {
+          ...mapMutations({
+            a: 'a',
+            b: 'b',
+          }),
+          c() {return this.a()},
+          d() {return this.b()},
+        }
+      }
+      </script>
+      <template>
+      {{ a }} {{ b }}
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapActions } from 'vuex';
+
+      export default {
+          methods: {
+          ...mapActions(['a', 'b']),
+          c() {return this.a()},
+          d() {return this.b()},
+        }
+      }
+      </script>
+      <template>
+      {{ a }} {{ b }}
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapMutations } from 'vuex';
+
+      export default {
+        methods: {
+          ...mapMutations(['a', 'b']),
+          c() {return this.a()},
+          d() {return this.b()},
+        }
+      }
+      </script>
+      <template>
+      {{ a }} {{ b }}
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapGetters } from 'vuex';
+
+      export default {
+        computed: {
+          ...mapGetters(['a', 'b'])
+        },
+        methods: {
+          c() {return this.a},
+          d() {return this.b},
+        }
+      }
+      </script>
+      <template>
+      {{ a }} {{ b }}
+      </template>
+      `
+    },
+    {
+      // Pinia
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapGetters } from 'pinia'
+      import { useStore } from '../store'
+
+      export default {
+        computed: {
+          ...mapGetters(useStore, ['a', 'b'])
+        },
+        methods: {
+          c() {return this.a},
+          d() {return this.b},
+        }
+      }
+      </script>
+      <template>
+      {{ a }} {{ b }}
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapState } from 'pinia'
+      import { useStore } from '../store'
+
+      export default {
+        computed: {
+          ...mapState(useStore, {
+            a: 'a',
+            b: store => store.b,
+          })
+        },
+        methods: {
+          c() {return this.a},
+          d() {return this.b},
+        }
+      }
+      </script>
+      <template>
+      {{ a }} {{ b }}
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapWritableState } from 'pinia'
+      import { useStore } from '../store'
+
+      export default {
+        computed: {
+          ...mapWritableState(useStore, {
+            a: 'a',
+            b: 'b',
+          })
+        },
+        methods: {
+          c() {return this.a},
+          d() {return this.b},
+        }
+      }
+      </script>
+      <template>
+      {{ a }} {{ b }}
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapWritableState } from 'pinia'
+      import { useStore } from '../store'
+
+      export default {
+        computed: {
+          ...mapWritableState(useStore, ['a', 'b'])
+        },
+        methods: {
+          c() {return this.a},
+          d() {return this.b},
+        }
+      }
+      </script>
+      <template>
+      {{ a }} {{ b }}
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapActions } from 'pinia'
+      import { useStore } from '../store'
+
+      export default {
+          methods: {
+          ...mapActions(useStore, ['a', 'b']),
+          c() {return this.a()},
+          d() {return this.b()},
+        }
+      }
+      </script>
+      <template>
+      {{ a() }} {{ b() }}
+      </template>
+      `
+    },
+    `
+    <script setup>
+    const model = defineModel();
+    const woof = computed(() => model.value);
+    </script>
+    <template>
+      <div id="app">Woof: {{ woof }}</div>
+    </template>`
   ],
 
   invalid: [
@@ -1129,6 +1404,372 @@ tester.run('no-undef-properties', rule, {
           column: 46
         }
       ]
+    },
+
+    {
+      // known type
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      import type { Props1 } from './test01';
+
+      defineProps<Props1>();
+
+      </script>
+
+      <template>
+      <div>{{ foo }}</div>
+      <div>{{ unknown }}</div>
+      </template>`,
+      errors: [
+        {
+          message: "'unknown' is not defined.",
+          line: 11
+        }
+      ],
+      ...getTypeScriptFixtureTestOptions()
+    },
+
+    {
+      // defineModel
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const m = defineModel()
+      const a = defineModel('A')
+      const [withModifiers, modifiers] = defineModel('withModifiers')
+      </script>
+      <template>
+        <div>
+          {{ m }} {{ modelValue }}
+          {{ a }} {{ A }}
+          {{withModifiers}} {{modifiers}}
+        </div>
+
+        <div>{{ undef }}</div>
+      </template>
+      `,
+      errors: [
+        {
+          message: "'undef' is not defined.",
+          line: 14
+        }
+      ]
+    },
+    {
+      // Vuex
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapState } from 'vuex';
+
+      export default {
+        computed: {
+          ...mapState({
+            a: (vm) => vm.a,
+            b: (vm) => vm.b,
+          })
+        },
+        methods: {
+          c() {return this.a * this.g}
+        }
+      }
+      </script>
+      <template>
+      {{ a }} {{ b }} {{ c }}
+      </template>
+      `,
+      errors: [
+        {
+          message: "'g' is not defined.",
+          line: 13
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapActions } from 'vuex';
+
+      export default {
+          methods: {
+          ...mapActions({
+            a: 'a',
+            b: 'b',
+          }),
+          c() {return this.a()},
+          d() {return this.f()},
+        }
+      }
+      </script>
+      <template>
+      {{ a }} {{ b }}
+      </template>
+      `,
+      errors: [
+        {
+          message: "'f' is not defined.",
+          line: 12
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapMutations } from 'vuex';
+
+      export default {
+          methods: {
+          ...mapMutations({
+            a: 'a',
+            b: 'b',
+          }),
+          c() {return this.a()},
+          d() {return this.b()},
+          d() {return this.x()},
+        }
+      }
+      </script>
+      <template>
+      {{ a }} {{ b }}
+      </template>
+      `,
+      errors: [
+        {
+          message: "'x' is not defined.",
+          line: 13
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapActions } from 'vuex';
+
+      export default {
+          methods: {
+          ...mapActions(['a', 'b']),
+          c() {return this.a()},
+          d() {return this.b()},
+          d() {return this.f()},
+        }
+      }
+      </script>
+      <template>
+      {{ a }} {{ b }}
+      </template>
+      `,
+      errors: [
+        {
+          message: "'f' is not defined.",
+          line: 10
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapMutations } from 'vuex';
+
+      export default {
+        methods: {
+          ...mapMutations(['a', 'b']),
+          c() {return this.a()},
+          d() {return this.b()},
+        }
+      }
+      </script>
+      <template>
+      {{ a }} {{ b }} {{ q }}
+      </template>
+      `,
+      errors: [
+        {
+          message: "'q' is not defined.",
+          line: 14
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapGetters } from 'vuex';
+
+      export default {
+        computed: {
+          ...mapGetters(['a', 'b'])
+        },
+        methods: {
+          c() {return this.a},
+          d() {return this.b},
+          d() {return this.z},
+        }
+      }
+      </script>
+      <template>
+      {{ a }} {{ b }}
+      </template>
+      `,
+      errors: [
+        {
+          message: "'z' is not defined.",
+          line: 12
+        }
+      ]
+    },
+    {
+      // Pinia
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapGetters } from 'pinia'
+      import { useStore } from '../store'
+
+      export default {
+        computed: {
+          ...mapGetters(useStore, ['a', 'b'])
+        },
+        methods: {
+          c() {return this.a},
+          d() {return this.b},
+          d() {return this.z},
+        }
+      }
+      </script>
+      <template>
+      {{ a }} {{ b }}
+      </template>
+      `,
+      errors: [
+        {
+          message: "'z' is not defined.",
+          line: 13
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapState } from 'pinia'
+      import { useStore } from '../store'
+
+      export default {
+        computed: {
+          ...mapState(useStore, {
+            a: 'a',
+            b: store => store.b,
+          })
+        },
+        methods: {
+          c() {return this.a},
+          d() {return this.b},
+        }
+      }
+      </script>
+      <template>
+      {{ a }} {{ b }} {{ q }}
+      </template>
+      `,
+      errors: [
+        {
+          message: "'q' is not defined.",
+          line: 20
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapWritableState } from 'pinia'
+      import { useStore } from '../store'
+
+      export default {
+        computed: {
+          ...mapWritableState(useStore, {
+            a: 'a',
+            b: 'b',
+          })
+        },
+        methods: {
+          c() {return this.a},
+          d() {return this.b},
+          d() {return this.z},
+        }
+      }
+      </script>
+      <template>
+      {{ a }} {{ b }}
+      </template>
+      `,
+      errors: [
+        {
+          message: "'z' is not defined.",
+          line: 16
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapWritableState } from 'pinia'
+      import { useStore } from '../store'
+
+      export default {
+        computed: {
+          ...mapWritableState(useStore, ['a', 'b'])
+        },
+        methods: {
+          c() {return this.a},
+          d() {return this.b},
+          d() {return this.z},
+        }
+      }
+      </script>
+      <template>
+      {{ a }} {{ b }}
+      </template>
+      `,
+      errors: [
+        {
+          message: "'z' is not defined.",
+          line: 13
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { mapActions } from 'pinia'
+      import { useStore } from '../store'
+
+      export default {
+          methods: {
+          ...mapActions(useStore, ['a', 'b']),
+          c() {return this.a()},
+          d() {return this.b()},
+          d() {return this.x()},
+        }
+      }
+      </script>
+      <template>
+      {{ a() }} {{ b() }}
+      </template>
+      `,
+      errors: [
+        {
+          message: "'x' is not defined.",
+          line: 11
+        }
+      ]
     }
   ]
 })
diff --git a/tests/lib/rules/no-unsupported-features.js b/tests/lib/rules/no-unsupported-features.js
index d12109311..c99f5f973 100644
--- a/tests/lib/rules/no-unsupported-features.js
+++ b/tests/lib/rules/no-unsupported-features.js
@@ -7,14 +7,11 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-unsupported-features')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
-    ecmaVersion: 2019
-  }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2019 }
 })
 
 tester.run('no-unsupported-features', rule, {
@@ -45,7 +42,6 @@ tester.run('no-unsupported-features', rule, {
           </template>
         </VList>
       </template>`,
-      options: [{ version: '^2.5.0' }],
       output: `
       <template>
         <VList>
@@ -56,6 +52,7 @@ tester.run('no-unsupported-features', rule, {
           </template>
         </VList>
       </template>`,
+      options: [{ version: '^2.5.0' }],
       errors: [
         {
           message: '`v-slot` are not supported until Vue.js "2.6.0".',
diff --git a/tests/lib/rules/no-unsupported-features/define-model.js b/tests/lib/rules/no-unsupported-features/define-model.js
new file mode 100644
index 000000000..a82aad26f
--- /dev/null
+++ b/tests/lib/rules/no-unsupported-features/define-model.js
@@ -0,0 +1,56 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../../eslint-compat').RuleTester
+const rule = require('../../../../lib/rules/no-unsupported-features')
+const utils = require('./utils')
+
+const buildOptions = utils.optionsBuilder('define-model', '^3.3.0')
+const tester = new RuleTester({
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2019 }
+})
+
+tester.run('no-unsupported-features/define-model', rule, {
+  valid: [
+    {
+      code: `
+      <script setup>
+        const model = defineModel()
+      </script>`,
+      options: buildOptions({ version: '^3.4.0' })
+    },
+    {
+      code: `
+      <script setup>
+        defineSlots({})
+      </script>`,
+      options: buildOptions()
+    },
+    {
+      code: `
+      <script setup>
+        const model = defineModel()
+      </script>`,
+      options: buildOptions({ version: '^3.3.0', ignores: ['define-model'] })
+    }
+  ],
+  invalid: [
+    {
+      code: `
+      <script setup>
+        const model = defineModel()
+      </script>`,
+      options: buildOptions(),
+      errors: [
+        {
+          message:
+            '`defineModel()` macros are not supported until Vue.js "3.4.0".',
+          line: 3
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/no-unsupported-features/define-options.js b/tests/lib/rules/no-unsupported-features/define-options.js
new file mode 100644
index 000000000..6a270a071
--- /dev/null
+++ b/tests/lib/rules/no-unsupported-features/define-options.js
@@ -0,0 +1,88 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../../eslint-compat').RuleTester
+const rule = require('../../../../lib/rules/no-unsupported-features')
+const utils = require('./utils')
+
+const buildOptions = utils.optionsBuilder('define-options', '^3.2.0')
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2019,
+    sourceType: 'module'
+  }
+})
+
+tester.run('no-unsupported-features/define-options', rule, {
+  valid: [
+    {
+      code: `
+      <script setup>
+        defineOptions({})
+      </script>`,
+      options: buildOptions({ version: '^3.3.0' })
+    },
+    {
+      code: `
+      <script setup>
+        defineProps({})
+      </script>`,
+      options: buildOptions()
+    },
+    {
+      code: `
+      <script setup>
+        defineOptions({})
+      </script>`,
+      options: buildOptions({ version: '^3.0.0', ignores: ['define-options'] })
+    }
+  ],
+  invalid: [
+    {
+      code: `
+      <script setup>
+        defineOptions({ name: 'Foo' })
+      </script>`,
+      output: `
+      <script>
+export default { name: 'Foo' }
+</script>
+<script setup>
+
+      </script>`,
+      options: buildOptions(),
+      errors: [
+        {
+          message:
+            '`defineOptions()` macros are not supported until Vue.js "3.3.0".',
+          line: 3
+        }
+      ]
+    },
+    {
+      code: `
+      <script setup>
+        defineOptions({});
+      </script>`,
+      output: `
+      <script>
+export default {}
+</script>
+<script setup>
+
+      </script>`,
+      options: buildOptions(),
+      errors: [
+        {
+          message:
+            '`defineOptions()` macros are not supported until Vue.js "3.3.0".',
+          line: 3
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/no-unsupported-features/define-slots.js b/tests/lib/rules/no-unsupported-features/define-slots.js
new file mode 100644
index 000000000..95d61199d
--- /dev/null
+++ b/tests/lib/rules/no-unsupported-features/define-slots.js
@@ -0,0 +1,56 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../../eslint-compat').RuleTester
+const rule = require('../../../../lib/rules/no-unsupported-features')
+const utils = require('./utils')
+
+const buildOptions = utils.optionsBuilder('define-slots', '^3.2.0')
+const tester = new RuleTester({
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2019 }
+})
+
+tester.run('no-unsupported-features/define-slots', rule, {
+  valid: [
+    {
+      code: `
+      <script setup>
+        const slots = defineSlots()
+      </script>`,
+      options: buildOptions({ version: '^3.3.0' })
+    },
+    {
+      code: `
+      <script setup>
+        defineProps({})
+      </script>`,
+      options: buildOptions()
+    },
+    {
+      code: `
+      <script setup>
+        const slots = defineSlots()
+      </script>`,
+      options: buildOptions({ version: '^3.0.0', ignores: ['define-slots'] })
+    }
+  ],
+  invalid: [
+    {
+      code: `
+      <script setup>
+        const slots = defineSlots()
+      </script>`,
+      options: buildOptions(),
+      errors: [
+        {
+          message:
+            '`defineSlots()` macros are not supported until Vue.js "3.3.0".',
+          line: 3
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/no-unsupported-features/dynamic-directive-arguments.js b/tests/lib/rules/no-unsupported-features/dynamic-directive-arguments.js
index 61b39e738..ced8dce9e 100644
--- a/tests/lib/rules/no-unsupported-features/dynamic-directive-arguments.js
+++ b/tests/lib/rules/no-unsupported-features/dynamic-directive-arguments.js
@@ -4,7 +4,7 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../../eslint-compat').RuleTester
 const rule = require('../../../../lib/rules/no-unsupported-features')
 const utils = require('./utils')
 
@@ -13,10 +13,7 @@ const buildOptions = utils.optionsBuilder(
   '^2.5.0'
 )
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
-    ecmaVersion: 2019
-  }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2019 }
 })
 
 tester.run('no-unsupported-features/dynamic-directive-arguments', rule, {
diff --git a/tests/lib/rules/no-unsupported-features/is-attribute-with-vue-prefix.js b/tests/lib/rules/no-unsupported-features/is-attribute-with-vue-prefix.js
index adcc64835..1ee6cc0cc 100644
--- a/tests/lib/rules/no-unsupported-features/is-attribute-with-vue-prefix.js
+++ b/tests/lib/rules/no-unsupported-features/is-attribute-with-vue-prefix.js
@@ -4,7 +4,7 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../../eslint-compat').RuleTester
 const rule = require('../../../../lib/rules/no-unsupported-features')
 const utils = require('./utils')
 
@@ -13,10 +13,7 @@ const buildOptions = utils.optionsBuilder(
   '^3.1.0'
 )
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
-    ecmaVersion: 2019
-  }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2019 }
 })
 
 tester.run('no-unsupported-features/is-attribute-with-vue-prefix', rule, {
diff --git a/tests/lib/rules/no-unsupported-features/script-setup.js b/tests/lib/rules/no-unsupported-features/script-setup.js
index 584262364..183fa88f2 100644
--- a/tests/lib/rules/no-unsupported-features/script-setup.js
+++ b/tests/lib/rules/no-unsupported-features/script-setup.js
@@ -4,16 +4,13 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../../eslint-compat').RuleTester
 const rule = require('../../../../lib/rules/no-unsupported-features')
 const utils = require('./utils')
 
 const buildOptions = utils.optionsBuilder('script-setup', '^3.0.0')
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
-    ecmaVersion: 2019
-  }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2019 }
 })
 
 tester.run('no-unsupported-features/script-setup', rule, {
@@ -24,6 +21,12 @@ tester.run('no-unsupported-features/script-setup', rule, {
       </script>`,
       options: buildOptions()
     },
+    {
+      code: `
+      <script setup>
+      </script>`,
+      options: buildOptions({ version: '^2.7.0' })
+    },
     {
       code: `
       <script>
@@ -39,7 +42,7 @@ tester.run('no-unsupported-features/script-setup', rule, {
       options: buildOptions({ version: '^2.6.0' }),
       errors: [
         {
-          message: '`<script setup>` are not supported until Vue.js "3.0.0".',
+          message: '`<script setup>` is not supported until Vue.js "2.7.0".',
           line: 2
         }
       ]
diff --git a/tests/lib/rules/no-unsupported-features/slot-scope-attribute.js b/tests/lib/rules/no-unsupported-features/slot-scope-attribute.js
index 5307aa616..c1e05f10d 100644
--- a/tests/lib/rules/no-unsupported-features/slot-scope-attribute.js
+++ b/tests/lib/rules/no-unsupported-features/slot-scope-attribute.js
@@ -4,16 +4,13 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../../eslint-compat').RuleTester
 const rule = require('../../../../lib/rules/no-unsupported-features')
 const utils = require('./utils')
 
 const buildOptions = utils.optionsBuilder('slot-scope-attribute', '^2.4.0')
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
-    ecmaVersion: 2019
-  }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2019 }
 })
 
 tester.run('no-unsupported-features/slot-scope-attribute', rule, {
@@ -66,8 +63,8 @@ tester.run('no-unsupported-features/slot-scope-attribute', rule, {
           <a slot-scope />
         </LinkList>
       </template>`,
-      options: buildOptions(),
       output: null,
+      options: buildOptions(),
       errors: [
         {
           message:
@@ -83,8 +80,8 @@ tester.run('no-unsupported-features/slot-scope-attribute', rule, {
           <a slot-scope="{a}" />
         </LinkList>
       </template>`,
-      options: buildOptions(),
       output: null,
+      options: buildOptions(),
       errors: [
         {
           message:
@@ -100,8 +97,8 @@ tester.run('no-unsupported-features/slot-scope-attribute', rule, {
           <a slot-scope />
         </LinkList>
       </template>`,
-      options: buildOptions({ version: '^3.0.0' }),
       output: null,
+      options: buildOptions({ version: '^3.0.0' }),
       errors: [
         {
           message:
diff --git a/tests/lib/rules/no-unsupported-features/style-css-vars-injection.js b/tests/lib/rules/no-unsupported-features/style-css-vars-injection.js
index 6fc7c643d..c9ba478ad 100644
--- a/tests/lib/rules/no-unsupported-features/style-css-vars-injection.js
+++ b/tests/lib/rules/no-unsupported-features/style-css-vars-injection.js
@@ -4,14 +4,14 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../../eslint-compat').RuleTester
 const rule = require('../../../../lib/rules/no-unsupported-features')
 const utils = require('./utils')
 
 const buildOptions = utils.optionsBuilder('style-css-vars-injection', '^3.0.3')
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
     ecmaVersion: 2019,
     sourceType: 'module'
   }
@@ -54,6 +54,35 @@ tester.run('no-unsupported-features/style-css-vars-injection', rule, {
         <div class="text">hello</div>
       </template>
 
+      <script>
+        export default {
+          data() {
+            return {
+              color: 'red',
+              font: {
+                size: '2em',
+              },
+            }
+          },
+        }
+      </script>
+
+      <style>
+        .text {
+          color: v-bind(color);
+
+          /* expressions (wrap in quotes) */
+          font-size: v-bind('font.size');
+        }
+      </style>`,
+      options: buildOptions({ version: '^2.7.0' })
+    },
+    {
+      code: `
+      <template>
+        <div class="text">hello</div>
+      </template>
+
       <script>
       </script>
 
@@ -98,7 +127,7 @@ tester.run('no-unsupported-features/style-css-vars-injection', rule, {
       errors: [
         {
           message:
-            'SFC CSS variable injection is not supported until Vue.js "3.0.3".',
+            'SFC CSS variable injection is not supported until Vue.js ">=3.0.3 || >=2.7.0 <3.0.0".',
           line: 21,
           column: 18,
           endLine: 21,
@@ -106,7 +135,7 @@ tester.run('no-unsupported-features/style-css-vars-injection', rule, {
         },
         {
           message:
-            'SFC CSS variable injection is not supported until Vue.js "3.0.3".',
+            'SFC CSS variable injection is not supported until Vue.js ">=3.0.3 || >=2.7.0 <3.0.0".',
           line: 24,
           column: 22,
           endLine: 24,
diff --git a/tests/lib/rules/no-unsupported-features/v-bind-attr-modifier.js b/tests/lib/rules/no-unsupported-features/v-bind-attr-modifier.js
index 912c98d9e..7b9931e3c 100644
--- a/tests/lib/rules/no-unsupported-features/v-bind-attr-modifier.js
+++ b/tests/lib/rules/no-unsupported-features/v-bind-attr-modifier.js
@@ -4,16 +4,13 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../../eslint-compat').RuleTester
 const rule = require('../../../../lib/rules/no-unsupported-features')
 const utils = require('./utils')
 
 const buildOptions = utils.optionsBuilder('v-bind-attr-modifier', '^3.1.0')
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
-    ecmaVersion: 2019
-  }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2019 }
 })
 
 tester.run('no-unsupported-features/v-bind-attr-modifier', rule, {
diff --git a/tests/lib/rules/no-unsupported-features/v-bind-prop-modifier-shorthand.js b/tests/lib/rules/no-unsupported-features/v-bind-prop-modifier-shorthand.js
index 1cefc8ff1..7b1742412 100644
--- a/tests/lib/rules/no-unsupported-features/v-bind-prop-modifier-shorthand.js
+++ b/tests/lib/rules/no-unsupported-features/v-bind-prop-modifier-shorthand.js
@@ -4,7 +4,7 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../../eslint-compat').RuleTester
 const rule = require('../../../../lib/rules/no-unsupported-features')
 const utils = require('./utils')
 
@@ -13,10 +13,7 @@ const buildOptions = utils.optionsBuilder(
   '^2.6.0'
 )
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
-    ecmaVersion: 2019
-  }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2019 }
 })
 
 tester.run('no-unsupported-features/v-bind-prop-modifier-shorthand', rule, {
@@ -63,11 +60,11 @@ tester.run('no-unsupported-features/v-bind-prop-modifier-shorthand', rule, {
       <template>
         <a .href="'/xxx'" />
       </template>`,
-      options: buildOptions(),
       output: `
       <template>
         <a :href.prop="'/xxx'" />
       </template>`,
+      options: buildOptions(),
       errors: [
         {
           message: '`.prop` shorthand are not supported until Vue.js "3.2.0".',
@@ -80,11 +77,11 @@ tester.run('no-unsupported-features/v-bind-prop-modifier-shorthand', rule, {
       <template>
         <a .href="'/xxx'" />
       </template>`,
-      options: buildOptions({ version: '2.5.99' }),
       output: `
       <template>
         <a :href.prop="'/xxx'" />
       </template>`,
+      options: buildOptions({ version: '2.5.99' }),
       errors: [
         {
           message: '`.prop` shorthand are not supported until Vue.js "3.2.0".',
@@ -97,11 +94,11 @@ tester.run('no-unsupported-features/v-bind-prop-modifier-shorthand', rule, {
       <template>
         <a .href="'/xxx'" />
       </template>`,
-      options: buildOptions({ version: '3.1.0' }),
       output: `
       <template>
         <a :href.prop="'/xxx'" />
       </template>`,
+      options: buildOptions({ version: '3.1.0' }),
       errors: [
         {
           message: '`.prop` shorthand are not supported until Vue.js "3.2.0".',
diff --git a/tests/lib/rules/no-unsupported-features/v-bind-same-name-shorthand.js b/tests/lib/rules/no-unsupported-features/v-bind-same-name-shorthand.js
new file mode 100644
index 000000000..3c5e2c8a4
--- /dev/null
+++ b/tests/lib/rules/no-unsupported-features/v-bind-same-name-shorthand.js
@@ -0,0 +1,92 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../../eslint-compat').RuleTester
+const rule = require('../../../../lib/rules/no-unsupported-features')
+const utils = require('./utils')
+
+const buildOptions = utils.optionsBuilder(
+  'v-bind-same-name-shorthand',
+  '^3.3.0'
+)
+const tester = new RuleTester({
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2019 }
+})
+
+tester.run('no-unsupported-features/v-bind-same-name-shorthand', rule, {
+  valid: [
+    {
+      code: `
+      <template>
+        <div :x />
+      </template>`,
+      options: buildOptions({ version: '3.4.0' })
+    },
+    {
+      code: `
+      <template>
+      <div :x="x" />
+      </template>`,
+      options: buildOptions()
+    }
+  ],
+  invalid: [
+    {
+      code: `
+      <template>
+        <div :x />
+      </template>`,
+      output: `
+      <template>
+        <div :x="x" />
+      </template>`,
+      options: buildOptions(),
+      errors: [
+        {
+          message:
+            '`v-bind` same-name shorthand is not supported until Vue.js "3.4.0".',
+          line: 3
+        }
+      ]
+    },
+    {
+      code: `
+      <template>
+        <div :x />
+      </template>`,
+      output: `
+      <template>
+        <div :x="x" />
+      </template>`,
+      options: buildOptions({ version: '2.7.0' }),
+      errors: [
+        {
+          message:
+            '`v-bind` same-name shorthand is not supported until Vue.js "3.4.0".',
+          line: 3
+        }
+      ]
+    },
+    {
+      code: `
+      <template>
+        <div :data-x />
+      </template>`,
+      output: `
+      <template>
+        <div :data-x="dataX" />
+      </template>`,
+      options: buildOptions(),
+      errors: [
+        {
+          message:
+            '`v-bind` same-name shorthand is not supported until Vue.js "3.4.0".',
+          line: 3
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/no-unsupported-features/v-is.js b/tests/lib/rules/no-unsupported-features/v-is.js
index 3212a7578..c9cf3fdc5 100644
--- a/tests/lib/rules/no-unsupported-features/v-is.js
+++ b/tests/lib/rules/no-unsupported-features/v-is.js
@@ -4,16 +4,13 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../../eslint-compat').RuleTester
 const rule = require('../../../../lib/rules/no-unsupported-features')
 const utils = require('./utils')
 
 const buildOptions = utils.optionsBuilder('v-is', '^2.6.0')
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
-    ecmaVersion: 2019
-  }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2019 }
 })
 
 tester.run('no-unsupported-features/v-is', rule, {
diff --git a/tests/lib/rules/no-unsupported-features/v-memo.js b/tests/lib/rules/no-unsupported-features/v-memo.js
index 8c3ea1249..3b9569cb0 100644
--- a/tests/lib/rules/no-unsupported-features/v-memo.js
+++ b/tests/lib/rules/no-unsupported-features/v-memo.js
@@ -4,16 +4,13 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../../eslint-compat').RuleTester
 const rule = require('../../../../lib/rules/no-unsupported-features')
 const utils = require('./utils')
 
 const buildOptions = utils.optionsBuilder('v-memo', '^3.1.0')
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
-    ecmaVersion: 2019
-  }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2019 }
 })
 
 tester.run('no-unsupported-features/v-memo', rule, {
diff --git a/tests/lib/rules/no-unsupported-features/v-model-argument.js b/tests/lib/rules/no-unsupported-features/v-model-argument.js
index ceb79784e..e7fe0a4ec 100644
--- a/tests/lib/rules/no-unsupported-features/v-model-argument.js
+++ b/tests/lib/rules/no-unsupported-features/v-model-argument.js
@@ -4,16 +4,13 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../../eslint-compat').RuleTester
 const rule = require('../../../../lib/rules/no-unsupported-features')
 const utils = require('./utils')
 
 const buildOptions = utils.optionsBuilder('v-model-argument', '^2.6.0')
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
-    ecmaVersion: 2019
-  }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2019 }
 })
 
 tester.run('no-unsupported-features/v-model-argument', rule, {
diff --git a/tests/lib/rules/no-unsupported-features/v-model-custom-modifiers.js b/tests/lib/rules/no-unsupported-features/v-model-custom-modifiers.js
index 521272738..066230306 100644
--- a/tests/lib/rules/no-unsupported-features/v-model-custom-modifiers.js
+++ b/tests/lib/rules/no-unsupported-features/v-model-custom-modifiers.js
@@ -4,16 +4,13 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../../eslint-compat').RuleTester
 const rule = require('../../../../lib/rules/no-unsupported-features')
 const utils = require('./utils')
 
 const buildOptions = utils.optionsBuilder('v-model-custom-modifiers', '^2.6.0')
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
-    ecmaVersion: 2019
-  }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2019 }
 })
 
 tester.run('no-unsupported-features/v-model-custom-modifiers', rule, {
diff --git a/tests/lib/rules/no-unsupported-features/v-slot.js b/tests/lib/rules/no-unsupported-features/v-slot.js
index 66b3b0b9e..71be84273 100644
--- a/tests/lib/rules/no-unsupported-features/v-slot.js
+++ b/tests/lib/rules/no-unsupported-features/v-slot.js
@@ -4,16 +4,13 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../../eslint-compat').RuleTester
 const rule = require('../../../../lib/rules/no-unsupported-features')
 const utils = require('./utils')
 
 const buildOptions = utils.optionsBuilder('v-slot', '^2.5.0')
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
-    ecmaVersion: 2019
-  }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2019 }
 })
 
 tester.run('no-unsupported-features/v-slot', rule, {
@@ -81,13 +78,13 @@ tester.run('no-unsupported-features/v-slot', rule, {
           <template v-slot ><a /></template>
         </LinkList>
       </template>`,
-      options: buildOptions(),
       output: `
       <template>
         <LinkList>
           <template slot ><a /></template>
         </LinkList>
       </template>`,
+      options: buildOptions(),
       errors: [
         {
           message: '`v-slot` are not supported until Vue.js "2.6.0".',
@@ -102,13 +99,13 @@ tester.run('no-unsupported-features/v-slot', rule, {
           <template #default ><a /></template>
         </LinkList>
       </template>`,
-      options: buildOptions(),
       output: `
       <template>
         <LinkList>
           <template slot="default" ><a /></template>
         </LinkList>
       </template>`,
+      options: buildOptions(),
       errors: [
         {
           message: '`v-slot` are not supported until Vue.js "2.6.0".',
@@ -123,13 +120,13 @@ tester.run('no-unsupported-features/v-slot', rule, {
           <template v-slot:name ><a /></template>
         </LinkList>
       </template>`,
-      options: buildOptions(),
       output: `
       <template>
         <LinkList>
           <template slot="name" ><a /></template>
         </LinkList>
       </template>`,
+      options: buildOptions(),
       errors: [
         {
           message: '`v-slot` are not supported until Vue.js "2.6.0".',
@@ -144,13 +141,13 @@ tester.run('no-unsupported-features/v-slot', rule, {
           <template #name ><a /></template>
         </LinkList>
       </template>`,
-      options: buildOptions(),
       output: `
       <template>
         <LinkList>
           <template slot="name" ><a /></template>
         </LinkList>
       </template>`,
+      options: buildOptions(),
       errors: [
         {
           message: '`v-slot` are not supported until Vue.js "2.6.0".',
@@ -165,13 +162,13 @@ tester.run('no-unsupported-features/v-slot', rule, {
           <template v-slot="{a}" ><a /></template>
         </LinkList>
       </template>`,
-      options: buildOptions(),
       output: `
       <template>
         <LinkList>
           <template slot-scope="{a}" ><a /></template>
         </LinkList>
       </template>`,
+      options: buildOptions(),
       errors: [
         {
           message: '`v-slot` are not supported until Vue.js "2.6.0".',
@@ -186,13 +183,13 @@ tester.run('no-unsupported-features/v-slot', rule, {
           <template #default="{a}" ><a /></template>
         </LinkList>
       </template>`,
-      options: buildOptions(),
       output: `
       <template>
         <LinkList>
           <template slot="default" slot-scope="{a}" ><a /></template>
         </LinkList>
       </template>`,
+      options: buildOptions(),
       errors: [
         {
           message: '`v-slot` are not supported until Vue.js "2.6.0".',
@@ -207,13 +204,13 @@ tester.run('no-unsupported-features/v-slot', rule, {
           <template v-slot:name="{a}" ><a /></template>
         </LinkList>
       </template>`,
-      options: buildOptions(),
       output: `
       <template>
         <LinkList>
           <template slot="name" slot-scope="{a}" ><a /></template>
         </LinkList>
       </template>`,
+      options: buildOptions(),
       errors: [
         {
           message: '`v-slot` are not supported until Vue.js "2.6.0".',
@@ -228,13 +225,13 @@ tester.run('no-unsupported-features/v-slot', rule, {
           <template #name="{a}" ><a /></template>
         </LinkList>
       </template>`,
-      options: buildOptions(),
       output: `
       <template>
         <LinkList>
           <template slot="name" slot-scope="{a}" ><a /></template>
         </LinkList>
       </template>`,
+      options: buildOptions(),
       errors: [
         {
           message: '`v-slot` are not supported until Vue.js "2.6.0".',
@@ -249,13 +246,13 @@ tester.run('no-unsupported-features/v-slot', rule, {
           <template v-slot:[name]="{a}" ><a /></template>
         </LinkList>
       </template>`,
-      options: buildOptions(),
       output: `
       <template>
         <LinkList>
           <template :slot="name" slot-scope="{a}" ><a /></template>
         </LinkList>
       </template>`,
+      options: buildOptions(),
       errors: [
         {
           message: '`v-slot` are not supported until Vue.js "2.6.0".',
@@ -271,13 +268,13 @@ tester.run('no-unsupported-features/v-slot', rule, {
           <template v-slot:name="{" ><a /></template>
         </LinkList>
       </template>`,
-      options: buildOptions(),
       output: `
       <template>
         <LinkList>
           <template slot="name" slot-scope="{" ><a /></template>
         </LinkList>
       </template>`,
+      options: buildOptions(),
       errors: [
         {
           message: '`v-slot` are not supported until Vue.js "2.6.0".',
@@ -292,8 +289,8 @@ tester.run('no-unsupported-features/v-slot', rule, {
           <template v-slot:[.]="{a}" ><a /></template>
         </LinkList>
       </template>`,
-      options: buildOptions(),
       output: null,
+      options: buildOptions(),
       errors: [
         {
           message: '`v-slot` are not supported until Vue.js "2.6.0".',
@@ -310,8 +307,8 @@ tester.run('no-unsupported-features/v-slot', rule, {
           <template v-slot.mod="{a}" ><a /></template>
         </LinkList>
       </template>`,
-      options: buildOptions(),
       output: null,
+      options: buildOptions(),
       errors: [
         {
           message: '`v-slot` are not supported until Vue.js "2.6.0".',
@@ -328,8 +325,8 @@ tester.run('no-unsupported-features/v-slot', rule, {
           <a />
         </LinkList>
       </template>`,
-      options: buildOptions(),
       output: null,
+      options: buildOptions(),
       errors: [
         {
           message: '`v-slot` are not supported until Vue.js "2.6.0".',
diff --git a/tests/lib/rules/no-unused-components.js b/tests/lib/rules/no-unused-components.js
index 6f0e61a56..4078af76f 100644
--- a/tests/lib/rules/no-unused-components.js
+++ b/tests/lib/rules/no-unused-components.js
@@ -4,20 +4,12 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-unused-components')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
     ecmaVersion: 2018,
     sourceType: 'module'
   }
@@ -421,13 +413,6 @@ tester.run('no-unused-components', rule, {
         <component :is=""></component>
       </template>`
     },
-    {
-      filename: 'test.vue',
-      code: `
-      <template>
-        <component :is></component>
-      </template>`
-    },
 
     // computed properties
     {
@@ -637,26 +622,6 @@ tester.run('no-unused-components', rule, {
         }
       ]
     },
-    {
-      filename: 'test.vue',
-      code: `
-      <template>
-        <component :is></component>
-      </template>
-      <script>
-        export default {
-          components: {
-            Foo,
-          },
-        }
-      </script>`,
-      errors: [
-        {
-          message: 'The "Foo" component has been registered but not used.',
-          line: 8
-        }
-      ]
-    },
 
     // computed properties
     {
diff --git a/tests/lib/rules/no-unused-emit-declarations.js b/tests/lib/rules/no-unused-emit-declarations.js
new file mode 100644
index 000000000..b4469150d
--- /dev/null
+++ b/tests/lib/rules/no-unused-emit-declarations.js
@@ -0,0 +1,789 @@
+/**
+ * @author ItMaga
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/no-unused-emit-declarations')
+const {
+  getTypeScriptFixtureTestOptions
+} = require('../../test-utils/typescript')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('no-unused-emit-declarations', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          emits: ['count', 'foo'],
+          methods: {
+              setCount () {
+                  this.$emit('count', newCount)
+              },
+              setFoo () {
+                  this.$emit('foo', newFoo)
+              }
+          }
+        }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        emits: ['foo'],
+        methods: {
+          click () {
+            const vm = this
+            vm?.$emit?.('foo')
+          }
+        }
+      }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <button @click="$emit('bar')">Bar</button>
+      </template>
+      <script>
+        export default {
+          emits: ['foo', 'bar'],
+          methods: {
+              setFoo () {
+                  this.$emit('foo', newFoo)
+              }
+          }
+        }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <button @click="this.$emit('bar')">Bar</button>
+      </template>
+      <script>
+        export default {
+          emits: ['bar'],
+        }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <button @click="$emit('bar')">Bar</button>
+      </template>
+      <script setup>
+        const emit = defineEmits(['foo', 'bar'])
+        const setFoo = () => {
+          emit('foo', newFoo)
+        }
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <button @click="emits('bar')">Bar</button>
+      </template>
+      <script setup>
+        const emits = defineEmits(['bar'])
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          emits: ['foo'],
+          setup(_, { emit }) {
+            const setFoo = () => {
+              emit('foo', newFoo)
+            }
+          }
+        }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          emits: ['foo'],
+          setup(_, { emit: customName }) {
+            const setFoo = () => customName('foo')
+          }
+        }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          emits: { foo: null },
+          setup(_, { emit }) {
+            const setFoo = () => {
+              emit('foo', newFoo)
+            }
+          }
+        }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          setup(_, { emit }) {
+            const setFoo = () => {
+              emit('foo', newFoo)
+            }
+          }
+        }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <button @click="$emit('bar')">Bar</button>
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          emits: ['foo'],
+          setup(_, context) {
+            const setFoo = () => {
+              context.emit('foo', newFoo)
+            }
+          }
+        }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          emits: ['foo'],
+          setup(_, { emit }) {
+            useCustomComposable(emit)
+          }
+        }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          emits: ['foo'],
+          setup(_, context) {
+            useCustomComposable(context.emit)
+          }
+        }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          emits: ['foo'],
+          setup(_, { emit }) {
+            useCustomComposable([emit])
+          }
+        }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          emits: ['foo'],
+          setup(_, context) {
+            useCustomComposable([context.emit])
+          }
+        }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          emits: ['foo'],
+          setup(_, context) {
+            useCustomComposable({ emit: context.emit })
+          }
+        }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          emits: [...foo],
+        }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        const emits = ['foo'];
+        export default {
+          emits: [...emits],
+        }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        const emits = ['foo'];
+        export default {
+          emits: emits,
+        }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          emits: ['foo'],
+          setup(_, { emit }) {
+            useCustomComposable({ emit: emit })
+          }
+        }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          emits: ['foo', 'bar'],
+          setup(_, { emit }) {
+            const emitBar = () => {
+              emit('bar', newBar)
+            }
+          },
+          methods: {
+            setFoo() {
+              this.$emit('foo', newFoo)
+            }
+          }
+        }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+        defineEmits(...foo)
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+        const emits = ['foo'];
+        defineEmits([...emits])
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      const emit = defineEmits<{
+        (e: 'foo'): void
+      }>()
+      const change = () => emit('foo');
+      `,
+      languageOptions: {
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      const emit = defineEmits<{
+        foo: [string, number]
+      }>()
+      const change = () => emit('foo');
+      `,
+      ...getTypeScriptFixtureTestOptions()
+    },
+    {
+      // defineModel
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      defineEmits({'update:foo'() {}})
+      const m = defineModel('foo')
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          emits: ['foo'],
+          setup(_, ctx) {
+            return () => h('button', { onClick: () => ctx.emit('foo') })
+          }
+        }
+      </script>
+      `
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          emits: ['foo', 'count'],
+          methods: {
+            setFoo () {
+              this.$emit('foo', newFoo)
+            }
+          }
+        }
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'unused',
+          line: 4,
+          column: 26,
+          endColumn: 33
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        emits: ['foo', 'bar'],
+        methods: {
+          click () {
+            const vm = this
+            vm?.$emit?.('foo')
+          }
+        }
+      }
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'unused',
+          line: 4,
+          column: 24,
+          endColumn: 29
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <button @click="$emit('bar')">Foo</button>
+      </template>
+      <script>
+        export default {
+          emits: ['foo', 'bar'],
+        }
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'unused',
+          line: 7,
+          column: 19,
+          endColumn: 24
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          emits: { foo: null },
+        }
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'unused',
+          line: 4,
+          column: 20,
+          endColumn: 29
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <button @click="$emit('bar')">Bar</button>
+      </template>
+      <script setup>
+        const emit = defineEmits(['foo', 'bar'])
+      `,
+      errors: [
+        {
+          messageId: 'unused',
+          line: 6,
+          column: 35,
+          endColumn: 40
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <button @click="emit('bar')">Bar</button>
+      </template>
+      <script setup>
+        const emit = defineEmits(['foo', 'bar'])
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'unused',
+          line: 6,
+          column: 35,
+          endColumn: 40
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          emits: ['foo'],
+          methods: {
+              setFoo () {
+                  custom.$emit('foo', newFoo)
+              }
+          }
+        }
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'unused',
+          line: 4,
+          column: 19,
+          endColumn: 24
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          emits: ['foo', 'bar'],
+          setup(_, { emit }) {
+            const setFoo = () => {
+              emit('foo', newFoo)
+            }
+          }
+        }
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'unused',
+          line: 4,
+          column: 26,
+          endColumn: 31
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <button @click="$emit('bar')">Bar</button>
+      </template>
+      <script>
+        // @vue/component
+        const Foo = {
+          emits: ['foo', 'bar'],
+        }
+        export default Foo
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'unused',
+          line: 8,
+          column: 19,
+          endColumn: 24
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          emits: ['foo', 'bar'],
+          setup(_, { emit: customName }) {
+            const setFoo = () => customName('foo')
+          }
+        }
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'unused',
+          line: 4,
+          column: 26,
+          endColumn: 31
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          emits: ['foo'],
+          setup() {
+            const setFoo = () => foo.$emit('foo')
+          }
+        }
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'unused',
+          line: 4,
+          column: 19,
+          endColumn: 24
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          emits: ['foo', 'bar'],
+          setup(_, context) {
+            const setFoo = () => {
+              context.emit('foo', newFoo)
+            }
+          }
+        }
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'unused',
+          line: 4,
+          column: 26,
+          endColumn: 31
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          emits: ['foo', 'bar', 'baz'],
+          setup(_, { emit }) {
+            const emitBar = () => {
+              emit('bar', newBar)
+            }
+          },
+          methods: {
+            setFoo() {
+              this.$emit('foo', newFoo)
+            }
+          }
+        }
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'unused',
+          line: 4,
+          endLine: 4,
+          column: 33,
+          endColumn: 38
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+        const emit = defineEmits<{
+          (e: 'foo' | 'bar'): void;
+        }>()
+        const change = () => emit('foo');
+      `,
+      languageOptions: {
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      },
+      errors: [
+        {
+          messageId: 'unused',
+          line: 4,
+          column: 11,
+          endColumn: 36
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+        const emits = ['foo'];
+        defineEmits(emits)
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'unused',
+          line: 3,
+          column: 24,
+          endColumn: 29
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+        defineEmits<{(e: 'foo'): void}>()
+      </script>
+      `,
+      languageOptions: {
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      },
+      errors: [
+        {
+          messageId: 'unused',
+          line: 3,
+          column: 22,
+          endColumn: 38
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      const emit = defineEmits<{
+        foo: [string, number],
+        bar: []
+      }>()
+      const change = () => emit('foo');
+      `,
+      errors: [
+        {
+          messageId: 'unused',
+          line: 5,
+          column: 9,
+          endColumn: 16
+        }
+      ],
+      ...getTypeScriptFixtureTestOptions()
+    },
+    {
+      // defineModel
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      defineEmits({'update:foo'() {}})
+      defineModel('foo')
+      </script>
+      `,
+      errors: [
+        {
+          message: '`update:foo` is defined as emit but never used.',
+          line: 3
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          emits: ['foo'],
+          setup(_, ctx) {
+            return () => h('button')
+          }
+        }
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'unused',
+          line: 4,
+          column: 19,
+          endColumn: 24
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/no-unused-properties.js b/tests/lib/rules/no-unused-properties.js
index a75d83e72..b89ea01f0 100644
--- a/tests/lib/rules/no-unused-properties.js
+++ b/tests/lib/rules/no-unused-properties.js
@@ -4,13 +4,16 @@
  */
 'use strict'
 
-const { RuleTester, Linter } = require('eslint')
+const { RuleTester, Linter } = require('../../eslint-compat')
 const assert = require('assert')
 const rule = require('../../../lib/rules/no-unused-properties')
+const {
+  getTypeScriptFixtureTestOptions
+} = require('../../test-utils/typescript')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
     ecmaVersion: 2020,
     sourceType: 'module'
   }
@@ -21,41 +24,70 @@ const allOptions = [
 ]
 const deepDataOptions = [{ groups: ['data'], deepData: true }]
 
+const unreferencedOptions = {
+  // Report errors when accessing via unknown property, e.g. this[varName]
+  unknownMemberAsUnreferenced: [
+    {
+      groups: ['computed'],
+      unreferencedOptions: ['unknownMemberAsUnreferenced']
+    }
+  ],
+  // Report errors when returning this
+  returnAsUnreferenced: [
+    {
+      groups: ['computed'],
+      unreferencedOptions: ['returnAsUnreferenced']
+    }
+  ],
+  // Report all
+  all: [
+    {
+      groups: ['computed'],
+      unreferencedOptions: [
+        'unknownMemberAsUnreferenced',
+        'returnAsUnreferenced'
+      ]
+    }
+  ]
+}
+
 tester.run('no-unused-properties', rule, {
   valid: [
-    // a property used in a script expression
+    // vuex getters
     {
       filename: 'test.vue',
       code: `
         <script>
           export default {
-            props: ['count'],
-            created() {
-              alert(this.count + 1)
+            computed: {
+              ...mapGetters(["bar"]),
+            },
+            methods: {
+              baz() {
+                return this.bar
+              }
             }
-          };
+          }
         </script>
-      `
+        <template>
+          {{ baz() }}
+        </template>
+      `,
+      options: allOptions
     },
-    // default options
     {
       filename: 'test.vue',
       code: `
         <script>
           export default {
-            data () {
-              return {
-                foo: 1
-              }
-            },
             computed: {
-              bar() {}
-            },
-            methods: {
-              baz () {}
+              ...mapGetters(['count']),
             }
-          };
+          }
         </script>
+        <template>
+          {{ count }}
+        </template>
       `
     },
     {
@@ -63,710 +95,703 @@ tester.run('no-unused-properties', rule, {
       code: `
         <script>
           export default {
-            setup () {
-              return {
-                foo
-              }
-            },
-          };
+            computed: mapGetters(['count1', 'count2'])
+          }
         </script>
+        <template>
+          {{ count1 }} {{ count2 }}
+        </template>
       `
     },
-
-    // a property being watched
     {
       filename: 'test.vue',
       code: `
         <script>
           export default {
-            props: {
-              count: {
-                type: Number,
-                default: 0
-              }
-            },
-            watch: {
-              count() {
-                alert('Increased!');
-              },
-            },
-          };
+            computed: mapGetters({
+              count: 'count'
+            })
+          }
         </script>
+        <template>
+          {{ count }}
+        </template>
       `
     },
-
-    // a property used as a template identifier
     {
       filename: 'test.vue',
       code: `
-        <template>
-          <div>{{ count }}</div>
-        </template>
         <script>
           export default {
-            props: ['count']
+            computed: {
+              ...mapGetters({
+                count: 'count'
+              })
+            }
           }
         </script>
+        <template>
+          {{ count }}
+        </template>
       `
     },
 
-    // properties used in a template expression
+    // vuex mutations
     {
       filename: 'test.vue',
       code: `
-        <template>
-          <div>{{ count1 + count2 }}</div>
-        </template>
         <script>
           export default {
-            props: ['count1', 'count2']
-          };
+            methods: mapMutations({
+              add: 'increment'
+            })
+          }
         </script>
+        <template>
+          {{ add() }}
+        </template>
       `
     },
-
-    // a property used in v-if
     {
       filename: 'test.vue',
       code: `
-        <template>
-          <div v-if="count > 0"></div>
-        </template>
         <script>
           export default {
-            props: {
-              count: {
-                type: Number
-              }
+            methods: {
+              ...mapMutations({
+                add: 'increment'
+              })
             }
-          };
+          }
         </script>
+        <template>
+          {{ add() }}
+        </template>
       `
     },
-
-    // a property used in v-for
     {
       filename: 'test.vue',
       code: `
+        <script>
+          export default {
+            methods: mapMutations(['add'])
+          }
+        </script>
         <template>
-          <div v-for="color in colors">{{ color }}</div>
+          {{ add() }}
         </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
         <script>
           export default {
-            props: {
-              colors: {
-                type: Array,
-                default: () => []
+            methods: {
+              methods: {
+                ...mapMutations(['add'])
               }
             }
-          };
+          }
         </script>
+        <template>
+          {{ add() }}
+        </template>
       `
     },
 
-    // a property used in v-html
+    // vuex actions
     {
       filename: 'test.vue',
       code: `
+        <script>
+          export default {
+            methods: {
+              ...mapActions({
+                add: 'increment'
+              })
+            }
+          }
+        </script>
         <template>
-          <div v-html="message" />
+          {{ add() }}
         </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
         <script>
           export default {
-            props: ['message']
-          };
+            methods: mapActions({
+              add: 'increment'
+            })
+          }
         </script>
+        <template>
+          {{ add() }}
+        </template>
       `
     },
-
-    // a property passed in a component
     {
       filename: 'test.vue',
       code: `
+        <script>
+          export default {
+            methods: mapActions(['add'])
+          }
+        </script>
         <template>
-          <counter :count="count" />
+          {{ add() }}
         </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
         <script>
           export default {
-            props: ['count']
-          };
+            methods: {
+              ...mapActions(['add'])
+            }
+          }
         </script>
+        <template>
+          {{ add() }}
+        </template>
       `
     },
 
-    // a property used in v-on
+    // vuex state
     {
       filename: 'test.vue',
       code: `
-        <template>
-          <button @click="alert(count)" />
-        </template>
         <script>
           export default {
-            props: ['count']
-          };
+            computed: mapState({
+              count: state => state.todosCount
+            })
+          }
         </script>
+        <template>
+          {{ count }}
+        </template>
       `
     },
-
-    // data used in a script expression
     {
       filename: 'test.vue',
       code: `
         <script>
           export default {
-            data () {
-              return {
-                count: 2
-              };
-            },
-            created() {
-              alert(this.count + 1)
+            computed: {
+              ...mapState({
+                count: state => state.todosCount
+              })
             }
-          };
+          }
         </script>
-      `,
-      options: allOptions
+        <template>
+          {{ count }}
+        </template>
+      `
     },
-
-    // data being watched
     {
       filename: 'test.vue',
       code: `
         <script>
           export default {
-            data() {
-              return {
-                count: 2
-              };
-            },
-            watch: {
-              count() {
-                alert('Increased!');
-              },
-            },
-          };
+            computed: mapState({
+              count (state) {
+                return state.todosCount
+              }
+            })
+          }
         </script>
-      `,
-      options: allOptions
+        <template>
+          {{ count }}
+        </template>
+      `
     },
     {
       filename: 'test.vue',
       code: `
         <script>
           export default {
-            props: ['foo'],
-            watch: {
-              'foo.bar'() {
-                alert('Increased!');
-              },
-            },
-          };
+            computed: {
+              ...mapState(['count'])
+            }
+          }
         </script>
+        <template>
+          {{ count }}
+        </template>
       `
     },
+
+    // pinia getters
     {
       filename: 'test.vue',
       code: `
         <script>
           export default {
-            props: ['foo'],
-            watch: {
-              foo: [
-                'bar',
-                {
-                  handler: 'baz'
-                }
-              ],
+            computed: {
+              ...mapGetters(useStore, ["bar"]),
             },
             methods: {
-              bar () {},
-              baz () {},
+              baz() {
+                return this.bar
+              }
             }
-          };
+          }
         </script>
+        <template>
+          {{ baz() }}
+        </template>
       `,
       options: allOptions
     },
-
-    // data used as a template identifier
     {
       filename: 'test.vue',
       code: `
-        <template>
-          <div>{{ count }}</div>
-        </template>
         <script>
           export default {
-            data () {
-              return {
-                count: 2
-              };
+            computed: {
+              ...mapGetters(useStore, ['count']),
             }
           }
         </script>
-      `,
-      options: allOptions
+        <template>
+          {{ count }}
+        </template>
+      `
     },
-
-    // data used in a template expression
     {
       filename: 'test.vue',
       code: `
-        <template>
-          <div>{{ count1 + count2 }}</div>
-        </template>
         <script>
           export default {
-            data () {
-              return {
-                count1: 1,
-                count2: 2
-              };
-            }
-          };
+            computed: mapGetters(useStore, ['count1', 'count2'])
+          }
         </script>
-      `,
-      options: allOptions
+        <template>
+          {{ count1 }} {{ count2 }}
+        </template>
+      `
     },
-
-    // data used in v-if
     {
       filename: 'test.vue',
       code: `
-        <template>
-          <div v-if="count > 0"></div>
-        </template>
         <script>
           export default {
-            data () {
-              return {
-                count: 2
-              };
-            }
-          };
+            computed: mapGetters(useStore, {
+              count: 'count'
+            })
+          }
         </script>
-      `,
-      options: allOptions
+        <template>
+          {{ count }}
+        </template>
+      `
     },
-
-    // data used in v-for
     {
       filename: 'test.vue',
       code: `
-        <template>
-          <div v-for="color in colors">{{ color }}</div>
-        </template>
         <script>
           export default {
-            data () {
-              return {
-                colors: ["purple", "green"]
-              };
+            computed: {
+              ...mapGetters(useStore, {
+                count: 'count'
+              })
             }
-          };
+          }
         </script>
-      `,
-      options: allOptions
+        <template>
+          {{ count }}
+        </template>
+      `
     },
 
-    // data used in v-html
+    // pinia actions
     {
       filename: 'test.vue',
       code: `
-        <template>
-          <div v-html="message" />
-        </template>
         <script>
           export default {
-            data () {
-              return {
-                message: "<span>Hey!</span>"
-              };
+            methods: {
+              ...mapActions(useStore, {
+                add: 'increment'
+              })
             }
-          };
+          }
         </script>
-      `,
-      options: allOptions
+        <template>
+          {{ add() }}
+        </template>
+      `
     },
-
-    // data used in v-model
     {
       filename: 'test.vue',
       code: `
-        <template>
-          <input v-model="count" />
-        </template>
         <script>
           export default {
-            data () {
-              return {
-                count: 2
-              };
-            }
-          };
+            methods: mapActions(useStore, {
+              add: 'increment'
+            })
+          }
         </script>
-      `,
-      options: allOptions
+        <template>
+          {{ add() }}
+        </template>
+      `
     },
-
-    // data passed in a component
     {
       filename: 'test.vue',
       code: `
+        <script>
+          export default {
+            methods: mapActions(useStore, ['add'])
+          }
+        </script>
         <template>
-          <counter :count="count" />
+          {{ add() }}
         </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
         <script>
           export default {
-            data () {
-              return {
-                count: 2
-              };
+            methods: {
+              ...mapActions(useStore, ['add'])
             }
-          };
+          }
         </script>
-      `,
-      options: allOptions
+        <template>
+          {{ add() }}
+        </template>
+      `
     },
 
-    // data used in v-on
+    // pinia state
     {
       filename: 'test.vue',
       code: `
-        <template>
-          <button @click="count++" />
-        </template>
         <script>
           export default {
-            data () {
-              return {
-                count: 2
-              };
-            }
-          };
+            computed: mapState(useStore, {
+              count: state => state.todosCount
+            })
+          }
         </script>
-      `,
-      options: allOptions
+        <template>
+          {{ count }}
+        </template>
+      `
     },
-
-    // computed property used in a script expression
     {
       filename: 'test.vue',
       code: `
         <script>
           export default {
             computed: {
-              count() {
-                return 2;
-              }
-            },
-            created() {
-              const dummy = this.count + 1;
+              ...mapState(useStore, {
+                count: state => state.todosCount
+              })
             }
-          };
+          }
         </script>
-      `,
-      options: allOptions
+        <template>
+          {{ count }}
+        </template>
+      `
     },
-
-    // computed property being watched
     {
       filename: 'test.vue',
       code: `
         <script>
           export default {
-            computed: {
-              count() {
-                return 2;
+            computed: mapState(useStore, {
+              count (state) {
+                return state.todosCount
               }
-            },
-            watch: {
-              count() {
-                alert('Increased!');
-              },
-            },
-          };
+            })
+          }
         </script>
-      `,
-      options: allOptions
+        <template>
+          {{ count }}
+        </template>
+      `
     },
-
-    // computed property used as a template identifier
     {
       filename: 'test.vue',
       code: `
-        <template>
-          <div>{{ count }}</div>
-        </template>
         <script>
           export default {
             computed: {
-              count() {
-                return 2;
-              }
+              ...mapState(useStore, ['count'])
             }
           }
         </script>
-      `,
-      options: allOptions
+        <template>
+          {{ count }}
+        </template>
+      `
     },
 
-    // computed properties used in a template expression
+    // pinia writable state
     {
       filename: 'test.vue',
       code: `
+        <script>
+          export default {
+            computed: mapWritableState(useStore, {
+              count: state => state.todosCount
+            })
+          }
+        </script>
         <template>
-          <div>{{ count1 + count2 }}</div>
+          {{ count }}
         </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
         <script>
           export default {
             computed: {
-              count1() {
-                return 1;
-              },
-              count2() {
-                return 2;
-              }
+              ...mapWritableState(useStore, {
+                count: state => state.todosCount
+              })
             }
           }
         </script>
-      `,
-      options: allOptions
+        <template>
+          {{ count }}
+        </template>
+      `
     },
-
-    // computed property used in v-if
     {
       filename: 'test.vue',
       code: `
+        <script>
+          export default {
+            computed: mapWritableState(useStore, {
+              count (state) {
+                return state.todosCount
+              }
+            })
+          }
+        </script>
         <template>
-          <div v-if="count > 0"></div>
+          {{ count }}
         </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
         <script>
           export default {
             computed: {
-              count() {
-                return 2;
-              }
+              ...mapWritableState(useStore, ['count'])
             }
           }
         </script>
-      `,
-      options: allOptions
+        <template>
+          {{ count }}
+        </template>
+      `
     },
 
-    // computed property used in v-for
+    // a property used in a script expression
     {
       filename: 'test.vue',
       code: `
-        <template>
-          <div v-for="color in colors">{{ color }}</div>
-        </template>
         <script>
           export default {
-            computed: {
-              colors() {
-                return ["purple", "green"];
-              }
+            props: ['count'],
+            created() {
+              alert(this.count + 1)
             }
           };
         </script>
-      `,
-      options: allOptions
+      `
     },
-
-    // computed property used in v-html
     {
       filename: 'test.vue',
       code: `
-        <template>
-          <div v-html="message" />
-        </template>
         <script>
           export default {
-            computed: {
-              message() {
-                return "<span>Hey!</span>";
-              }
+            props: ['count'],
+            created() {
+              alert(this.$props.count + 1)
             }
           };
         </script>
-      `,
-      options: allOptions
+      `
     },
-
-    // computed property used in v-model
+    // default options
     {
       filename: 'test.vue',
       code: `
-        <template>
-          <input v-model="fullName" />
-        </template>
         <script>
           export default {
-            data() {
+            data () {
               return {
-                firstName: "David",
-                lastName: "Attenborough"
+                foo: 1
               }
             },
             computed: {
-              fullName: {
-                get() {
-                  return this.firstName + ' ' + this.lastName
-                },
-                set(newValue) {
-                  var names = newValue.split(' ')
-                  this.firstName = names[0]
-                  this.lastName = names[names.length - 1]
-                }
-              }
+              bar() {}
+            },
+            methods: {
+              baz () {}
             }
           };
         </script>
-      `,
-      options: allOptions
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            setup () {
+              return {
+                foo
+              }
+            },
+          };
+        </script>
+      `
     },
 
-    // computed property passed in a component
+    // a property being watched
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            props: {
+              count: {
+                type: Number,
+                default: 0
+              }
+            },
+            watch: {
+              count() {
+                alert('Increased!');
+              },
+            },
+          };
+        </script>
+      `
+    },
+
+    // a property used as a template identifier
     {
       filename: 'test.vue',
       code: `
         <template>
-          <counter :count="count" />
+          <div>{{ count }}</div>
         </template>
         <script>
           export default {
-            computed: {
-              count() {
-                return 2;
-              }
-            }
+            props: ['count']
           }
         </script>
-      `,
-      options: allOptions
+      `
     },
-
-    // async data passed in a component
+    // a property used as a template $props member expression
     {
       filename: 'test.vue',
       code: `
         <template>
-          <counter :count="foo" />
+          <div>{{ $props.count }}</div>
         </template>
         <script>
           export default {
-            asyncData() {
-              return {
-                foo: 2
-              }
-            }
+            props: ['count']
           }
         </script>
-      `,
-      options: allOptions
+      `
     },
-
-    // ignores unused data when marked with eslint-disable
+    // a property used as a template $props expression
     {
       filename: 'test.vue',
       code: `
         <template>
-          <div>{{ cont }}</div>
+          <div>{{ $props }}</div>
         </template>
         <script>
           export default {
-            data () {
-              return {
-                // eslint-disable-next-line
-                count: 2
-              };
-            }
-          };
+            props: ['count']
+          }
         </script>
-      `,
-      options: allOptions
+      `
     },
 
-    // trace this
+    // properties used in a template expression
     {
       filename: 'test.vue',
       code: `
+        <template>
+          <div>{{ count1 + count2 }}</div>
+        </template>
         <script>
           export default {
-            props: ['count'],
-            methods: {
-              click () {
-                const vm = this
-                fn(vm.count)
-              }
-            }
+            props: ['count1', 'count2']
           };
         </script>
       `
     },
+    // properties used in a template expression as $props member expression
     {
       filename: 'test.vue',
       code: `
+        <template>
+          <div>{{ $props.count1 + $props.count2 }}</div>
+        </template>
         <script>
           export default {
-            props: ['count'],
-            methods: {
-              click () {
-                const vm = this
-                const {count} = vm
-              }
-            }
+            props: ['count1', 'count2']
           };
         </script>
       `
     },
+
+    // a property used in v-if
     {
       filename: 'test.vue',
       code: `
+        <template>
+          <div v-if="count > 0"></div>
+        </template>
         <script>
           export default {
-            props: ['count'],
-            methods: {
-              click () {
-                const vm = this
-                let count;
-                ({count} = vm)
+            props: {
+              count: {
+                type: Number
               }
             }
           };
         </script>
       `
     },
-    // use rest
+    // a property used in v-if as $props member expression
     {
       filename: 'test.vue',
       code: `
         <template>
-          <div>{{ foo }}</div>
+          <div v-if="$props.count > 0"></div>
         </template>
         <script>
           export default {
-            data () {
-              return {
-                count: 2
-              };
-            },
-            methods: {
-              click () {
-                const vm = this
-                const {...r} = vm
-              },
-              focus () {
-                fn(this.foo)
-              },
-              blur () {
-                const {foo} = this
-              },
-              keydown () {
-                let foo;
-                ({foo} = this)
+            props: {
+              count: {
+                type: Number
               }
             }
           };
@@ -774,933 +799,2622 @@ tester.run('no-unused-properties', rule, {
       `
     },
 
-    // function trace
+    // a property used in v-for
     {
       filename: 'test.vue',
       code: `
+        <template>
+          <div v-for="color in colors">{{ color }}</div>
+        </template>
         <script>
           export default {
-            props: ['foo', 'bar', 'baz'],
-            setup (props) {
-              fn(props)
+            props: {
+              colors: {
+                type: Array,
+                default: () => []
+              }
             }
-          }
-
-          function fn(p) {
-            return fn2(p)
-          }
-          function fn2(p2) {
-            const {...a} = p2
-          }
+          };
         </script>
       `
     },
+    // a property used in v-for as $props member expression
     {
       filename: 'test.vue',
       code: `
+        <template>
+          <div v-for="color in $props.colors">{{ color }}</div>
+        </template>
         <script>
           export default {
-            props: ['foo', 'bar', 'baz'],
-            setup (props) {
-              fn(props)
+            props: {
+              colors: {
+                type: Array,
+                default: () => []
+              }
             }
-          }
-
-          function fn(a) {
-            return a[foo]
-          }
+          };
         </script>
       `
     },
 
-    // render & functional
+    // a property used in v-html
     {
-      filename: 'test.js',
+      filename: 'test.vue',
       code: `
-      Vue.component('smart-list', {
-        functional: true,
-        props: {
-          items: {
-            type: Array,
-            required: true
-          },
-          isOrdered: Boolean
-        },
-        render: function (createElement, context) {
-          function appropriateListComponent () {
-            var items = context.props.items
-
-            if (items.length === 0)           return EmptyList
-            if (typeof items[0] === 'object') return TableList
-            if (context.props.isOrdered)      return OrderedList
-
-            return UnorderedList
-          }
-
-          return createElement(
-            appropriateListComponent(),
-            context.data,
-            context.children
-          )
-        }
-      })
+        <template>
+          <div v-html="message" />
+        </template>
+        <script>
+          export default {
+            props: ['message']
+          };
+        </script>
       `
     },
+    // a property used in v-html as $props member expression
     {
-      filename: 'test.js',
+      filename: 'test.vue',
       code: `
-      Vue.component('MyButton', {
-        functional: true,
-        props: ['foo'],
-        render: function (createElement, {props}) {
-          return createElement('button', props.foo)
-        }
-      })
+        <template>
+          <div v-html="$props.message" />
+        </template>
+        <script>
+          export default {
+            props: ['message']
+          };
+        </script>
       `
     },
+
+    // a property passed in a component
     {
-      filename: 'test.js',
+      filename: 'test.vue',
       code: `
-      Vue.component('MyButton', {
-        functional: true,
-        props: ['foo'],
-        render: function (createElement, ctx) {
-          return createElement('button', fn(ctx.props))
+        <template>
+          <counter :count="count" />
+        </template>
+        <script>
+          export default {
+            props: ['count']
+          };
+        </script>
+      `
+    },
+    // a property passed in a component as $props member expression
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <counter :count="$props.count" />
+        </template>
+        <script>
+          export default {
+            props: ['count']
+          };
+        </script>
+      `
+    },
+
+    // a property used in v-on
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <button @click="alert(count)" />
+        </template>
+        <script>
+          export default {
+            props: ['count']
+          };
+        </script>
+      `
+    },
+    // a property used in v-on as $props member expression
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <button @click="alert($props.count)" />
+        </template>
+        <script>
+          export default {
+            props: ['count']
+          };
+        </script>
+      `
+    },
+    // a property used in v-on as $props expression
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <button @click="alert($props)" />
+        </template>
+        <script>
+          export default {
+            props: ['count']
+          };
+        </script>
+      `
+    },
+
+    // data used in a script expression
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            data () {
+              return {
+                count: 2
+              };
+            },
+            created() {
+              alert(this.count + 1)
+            }
+          };
+        </script>
+      `,
+      options: allOptions
+    },
+
+    // data being watched
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            data() {
+              return {
+                count: 2
+              };
+            },
+            watch: {
+              count() {
+                alert('Increased!');
+              },
+            },
+          };
+        </script>
+      `,
+      options: allOptions
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            props: ['foo'],
+            watch: {
+              'foo.bar'() {
+                alert('Increased!');
+              },
+            },
+          };
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            props: ['foo'],
+            watch: {
+              foo: [
+                'bar',
+                {
+                  handler: 'baz'
+                }
+              ],
+            },
+            methods: {
+              bar () {},
+              baz () {},
+            }
+          };
+        </script>
+      `,
+      options: allOptions
+    },
+
+    // data used as a template identifier
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>{{ count }}</div>
+        </template>
+        <script>
+          export default {
+            data () {
+              return {
+                count: 2
+              };
+            }
+          }
+        </script>
+      `,
+      options: allOptions
+    },
+
+    // data used in a template expression
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>{{ count1 + count2 }}</div>
+        </template>
+        <script>
+          export default {
+            data () {
+              return {
+                count1: 1,
+                count2: 2
+              };
+            }
+          };
+        </script>
+      `,
+      options: allOptions
+    },
+
+    // data used in v-if
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div v-if="count > 0"></div>
+        </template>
+        <script>
+          export default {
+            data () {
+              return {
+                count: 2
+              };
+            }
+          };
+        </script>
+      `,
+      options: allOptions
+    },
+
+    // data used in v-for
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div v-for="color in colors">{{ color }}</div>
+        </template>
+        <script>
+          export default {
+            data () {
+              return {
+                colors: ["purple", "green"]
+              };
+            }
+          };
+        </script>
+      `,
+      options: allOptions
+    },
+
+    // data used in v-html
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div v-html="message" />
+        </template>
+        <script>
+          export default {
+            data () {
+              return {
+                message: "<span>Hey!</span>"
+              };
+            }
+          };
+        </script>
+      `,
+      options: allOptions
+    },
+
+    // data used in v-model
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <input v-model="count" />
+        </template>
+        <script>
+          export default {
+            data () {
+              return {
+                count: 2
+              };
+            }
+          };
+        </script>
+      `,
+      options: allOptions
+    },
+
+    // data passed in a component
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <counter :count="count" />
+        </template>
+        <script>
+          export default {
+            data () {
+              return {
+                count: 2
+              };
+            }
+          };
+        </script>
+      `,
+      options: allOptions
+    },
+
+    // data used in v-on
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <button @click="count++" />
+        </template>
+        <script>
+          export default {
+            data () {
+              return {
+                count: 2
+              };
+            }
+          };
+        </script>
+      `,
+      options: allOptions
+    },
+
+    // computed property used in a script expression
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            computed: {
+              count() {
+                return 2;
+              }
+            },
+            created() {
+              const dummy = this.count + 1;
+            }
+          };
+        </script>
+      `,
+      options: allOptions
+    },
+
+    // computed property being watched
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            computed: {
+              count() {
+                return 2;
+              }
+            },
+            watch: {
+              count() {
+                alert('Increased!');
+              },
+            },
+          };
+        </script>
+      `,
+      options: allOptions
+    },
+
+    // computed property used as a template identifier
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>{{ count }}</div>
+        </template>
+        <script>
+          export default {
+            computed: {
+              count() {
+                return 2;
+              }
+            }
+          }
+        </script>
+      `,
+      options: allOptions
+    },
+
+    // computed properties used in a template expression
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>{{ count1 + count2 }}</div>
+        </template>
+        <script>
+          export default {
+            computed: {
+              count1() {
+                return 1;
+              },
+              count2() {
+                return 2;
+              }
+            }
+          }
+        </script>
+      `,
+      options: allOptions
+    },
+
+    // computed property used in v-if
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div v-if="count > 0"></div>
+        </template>
+        <script>
+          export default {
+            computed: {
+              count() {
+                return 2;
+              }
+            }
+          }
+        </script>
+      `,
+      options: allOptions
+    },
+
+    // computed property used in v-for
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div v-for="color in colors">{{ color }}</div>
+        </template>
+        <script>
+          export default {
+            computed: {
+              colors() {
+                return ["purple", "green"];
+              }
+            }
+          };
+        </script>
+      `,
+      options: allOptions
+    },
+
+    // computed property used in v-html
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div v-html="message" />
+        </template>
+        <script>
+          export default {
+            computed: {
+              message() {
+                return "<span>Hey!</span>";
+              }
+            }
+          };
+        </script>
+      `,
+      options: allOptions
+    },
+
+    // computed property used in v-model
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <input v-model="fullName" />
+        </template>
+        <script>
+          export default {
+            data() {
+              return {
+                firstName: "David",
+                lastName: "Attenborough"
+              }
+            },
+            computed: {
+              fullName: {
+                get() {
+                  return this.firstName + ' ' + this.lastName
+                },
+                set(newValue) {
+                  var names = newValue.split(' ')
+                  this.firstName = names[0]
+                  this.lastName = names[names.length - 1]
+                }
+              }
+            }
+          };
+        </script>
+      `,
+      options: allOptions
+    },
+
+    // computed property passed in a component
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <counter :count="count" />
+        </template>
+        <script>
+          export default {
+            computed: {
+              count() {
+                return 2;
+              }
+            }
+          }
+        </script>
+      `,
+      options: allOptions
+    },
+
+    // async data passed in a component
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <counter :count="foo" />
+        </template>
+        <script>
+          export default {
+            asyncData() {
+              return {
+                foo: 2
+              }
+            }
+          }
+        </script>
+      `,
+      options: allOptions
+    },
+
+    // ignores unused data when marked with eslint-disable
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>{{ cont }}</div>
+        </template>
+        <script>
+          export default {
+            data () {
+              return {
+                // eslint-disable-next-line
+                count: 2
+              };
+            }
+          };
+        </script>
+      `,
+      options: allOptions
+    },
+
+    // trace this
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            props: ['count'],
+            methods: {
+              click () {
+                const vm = this
+                fn(vm.count)
+              }
+            }
+          };
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            props: ['count'],
+            methods: {
+              click () {
+                const vm = this
+                const {count} = vm
+              }
+            }
+          };
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            props: ['count'],
+            methods: {
+              click () {
+                const vm = this
+                let count;
+                ({count} = vm)
+              }
+            }
+          };
+        </script>
+      `
+    },
+    // use rest
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>{{ foo }}</div>
+        </template>
+        <script>
+          export default {
+            data () {
+              return {
+                count: 2
+              };
+            },
+            methods: {
+              click () {
+                const vm = this
+                const {...r} = vm
+              },
+              focus () {
+                fn(this.foo)
+              },
+              blur () {
+                const {foo} = this
+              },
+              keydown () {
+                let foo;
+                ({foo} = this)
+              }
+            }
+          };
+        </script>
+      `
+    },
+
+    // function trace
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            props: ['foo', 'bar', 'baz'],
+            setup (props) {
+              fn(props)
+            }
+          }
+
+          function fn(p) {
+            return fn2(p)
+          }
+          function fn2(p2) {
+            const {...a} = p2
+          }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            props: ['foo', 'bar', 'baz'],
+            setup (props) {
+              fn(props)
+            }
+          }
+
+          function fn(a) {
+            return a[foo]
+          }
+        </script>
+      `
+    },
+
+    // render & functional
+    {
+      filename: 'test.js',
+      code: `
+      Vue.component('smart-list', {
+        functional: true,
+        props: {
+          items: {
+            type: Array,
+            required: true
+          },
+          isOrdered: Boolean
+        },
+        render: function (createElement, context) {
+          function appropriateListComponent () {
+            var items = context.props.items
+
+            if (items.length === 0)           return EmptyList
+            if (typeof items[0] === 'object') return TableList
+            if (context.props.isOrdered)      return OrderedList
+
+            return UnorderedList
+          }
+
+          return createElement(
+            appropriateListComponent(),
+            context.data,
+            context.children
+          )
+        }
+      })
+      `
+    },
+    {
+      filename: 'test.js',
+      code: `
+      Vue.component('MyButton', {
+        functional: true,
+        props: ['foo'],
+        render: function (createElement, {props}) {
+          return createElement('button', props.foo)
+        }
+      })
+      `
+    },
+    {
+      filename: 'test.js',
+      code: `
+      Vue.component('MyButton', {
+        functional: true,
+        props: ['foo'],
+        render: function (createElement, ctx) {
+          return createElement('button', fn(ctx.props))
+        }
+      })
+
+      function fn(props) {
+        return props.foo
+      }
+      `
+    },
+    {
+      filename: 'test.js',
+      code: `
+      Vue.component('MyButton', {
+        functional: true,
+        props: ['foo'],
+        render: function (createElement, ctx) {
+          return createElement('button', fn(ctx))
+        }
+      })
+
+      function fn({props}) {
+        return props.foo
+      }
+      `
+    },
+    {
+      filename: 'test.js',
+      code: `
+      Vue.component('MyButton', {
+        functional: true,
+        props: ['foo'],
+        render: function (createElement, {props:{foo}}) {
+          return createElement('button', foo)
+        }
+      })
+      `
+    },
+    {
+      filename: 'test.js',
+      code: `
+      Vue.component('MyButton', {
+        functional: true,
+        props: ['foo'],
+        render: function (createElement, {props:[bar]}) {
+          return createElement('button')
+        }
+      })
+      `
+    },
+    {
+      filename: 'test.js',
+      code: `
+      Vue.component('MyButton', {
+        functional: true,
+        props: ['foo'],
+        render: function (createElement, {props:bar={}}) {
+          return createElement('button', bar.foo)
+        }
+      })
+      `
+    },
+    {
+      filename: 'test.js',
+      code: `
+      Vue.component('MyButton', {
+        functional: true,
+        props: ['foo'],
+        render: function (createElement, {...foo}) {
+          return createElement('button')
+        }
+      })
+      `
+    },
+    {
+      filename: 'test.js',
+      code: `
+      Vue.component('MyButton', {
+        functional: true,
+        props: ['foo', 'bar'],
+        render: function (createElement, ctx) {
+          const a = ctx.props
+          const b = ctx.props
+          return createElement('button', a.foo + b.bar)
+        }
+      })
+      `
+    },
+    {
+      filename: 'test.js',
+      code: `
+      Vue.component('MyButton', {
+        functional: true,
+        props: ['foo', 'bar'],
+        render: function (createElement, {props: a, props: b}) {
+          return createElement('button', a.foo + b.bar)
+        }
+      })
+      `
+    },
+    // render for Vue 3.x
+    {
+      filename: 'test.vue',
+      code: `
+      export default {
+        props: ['foo'],
+        render (props) {
+          return h('button', props.foo)
+        }
+      })
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      export default {
+        props: ['foo'],
+        render ({foo}) {
+          return h('button', foo)
+        }
+      })
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      export default {
+        props: ['foo'],
+        render (bar) {
+          const {...baz} = bar
+          return h('button')
+        }
+      })
+      `
+    },
+    // Vue.js 3.x Template Refs
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div ref="root"></div>
+      </template>
+
+      <script>
+        import { ref, onMounted } from 'vue'
+
+        export default {
+          setup() {
+            const root = ref(null)
+
+            onMounted(() => {
+              // the DOM element will be assigned to the ref after initial render
+              console.log(root.value) // <div/>
+            })
+
+            return {
+              root
+            }
+          }
+        }
+      </script>`,
+      options: [{ groups: ['props', 'setup'] }]
+    },
+
+    // sparse array
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>{{ count }}</div>
+        </template>
+        <script>
+          export default {
+            props: [, 'count']
+          }
+        </script>
+        `
+    },
+    // optional chaining
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        import { ref, onMounted } from 'vue'
+
+        export default {
+          props: ['foo', 'bar'],
+          methods: {
+            fn () {
+              fn(this)
+            }
+          }
+        }
+
+        function fn(a) {
+          return a?.foo + a?.bar
+        }
+      </script>`
+    },
+    {
+      filename: 'test.js',
+      code: `
+      Vue.component('MyButton', {
+        functional: true,
+        props: ['foo', 'bar'],
+        render: function (createElement, ctx) {
+          const a = ctx
+          const b = a?.props?.foo
+          const c = (a?.props)?.bar
+        }
+      })
+      `
+    },
+    // handlers
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          props: ['foo', 'bar'],
+          watch: {
+            foo: 'updateFoo',
+            bar: {
+              handler: 'updateBar',
+              immediate: true
+            }
+          },
+          methods: {
+            updateFoo() {},
+            updateBar() {}
+          }
+        };
+      </script>
+      `,
+      options: [{ groups: ['props', 'methods'] }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          props: ['foo', 'bar'],
+          data () {
+            return {
+              updateFoo() {},
+              updateBar() {}
+            }
+          },
+          watch: {
+            foo: 'updateFoo',
+            bar: {
+              handler: 'updateBar',
+              immediate: true
+            }
+          }
+        };
+      </script>
+      `,
+      options: [{ groups: ['props', 'data'] }]
+    },
+    // contexts
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          props: ['x'],
+          data: ({ x }) => ({
+              y: x
+          })
+        };
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          props: ['x'],
+          computed: {
+            y: (vm) => vm.x * 2
+          }
+        };
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          props: ['x'],
+          computed: {
+            y: {
+              get: () => this.x * 2
+            }
+          }
+        };
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          props: ['x'],
+          computed: {
+            y: {
+              get: () => this.$props.x * 2
+            }
+          }
+        };
+      </script>
+      `
+    },
+
+    // deep data
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+         {{ foo.baz.b }}
+        </template>
+        <script>
+          export default {
+            data() {
+              return {
+                foo: {
+                  bar: {
+                    a: 1
+                  },
+                  baz: {
+                    b: 1
+                  }
+                }
+              }
+            },
+            methods: {
+              a () {
+                return this.foo.bar.a
+              }
+            }
+          };
+        </script>
+      `,
+      options: deepDataOptions
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            data() {
+              return {
+                foo: {
+                  bar: {
+                    a: 1
+                  },
+                  baz: {
+                    b: 1
+                  }
+                }
+              }
+            },
+            created() {
+              alert(this.foo)
+            }
+          };
+        </script>
+      `,
+      options: deepDataOptions
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            data() {
+              return {
+                foo: {
+                  bar: {
+                    a: 1
+                  },
+                  baz: {
+                    b: 1
+                  }
+                }
+              }
+            },
+            created() {
+              fn(this.foo)
+            }
+          };
+          function fn(foo) {
+            return foo.bar.a + foo.baz.b
+          }
+        </script>
+      `,
+      options: deepDataOptions
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          {{ foo.bar }}
+          {{ foo.baz }}
+        </template>
+        <script>
+          export default {
+            data() {
+              return {
+                foo: {
+                  bar: {
+                    a: 1
+                  },
+                  baz: {
+                    b: 1
+                  }
+                }
+              }
+            }
+          };
+        </script>
+      `,
+      options: deepDataOptions
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            data() {
+              return {
+                foo: {
+                  bar: {
+                    a: 1
+                  },
+                  baz: {
+                    b: 1
+                  }
+                }
+              }
+            },
+            methods: {
+              a () {
+                return this.foo
+              }
+            }
+          };
+        </script>
+      `,
+      options: deepDataOptions
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <Foo :param="{ a: foo.bar }"></Foo>
+        </template>
+
+        <script>
+          export default {
+            data() {
+              return {
+                foo: {
+                  bar: {
+                    a: 1
+                  },
+                  baz: {
+                    b: 1
+                  }
+                }
+              }
+            },
+            methods: {
+              fn () {
+                return {
+                  b: this.foo.baz
+                }
+              }
+            }
+          };
+        </script>
+      `,
+      options: deepDataOptions
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <Foo :class="[ foo.bar ]"></Foo>
+        </template>
+
+        <script>
+          export default {
+            data() {
+              return {
+                foo: {
+                  bar: {
+                    a: 1
+                  },
+                  baz: {
+                    b: 1
+                  }
+                }
+              }
+            },
+            methods: {
+              fn () {
+                return [this.foo.baz]
+              }
+            }
+          };
+        </script>
+      `,
+      options: deepDataOptions
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <Foo :param="[ {a: foo.bar} ]"></Foo>
+        </template>
+
+        <script>
+          export default {
+            data() {
+              return {
+                foo: {
+                  bar: {
+                    a: 1
+                  },
+                  baz: {
+                    b: 1
+                  }
+                }
+              }
+            },
+            methods: {
+              fn () {
+                return {
+                  b: [this.foo.baz]
+                }
+              }
+            }
+          };
+        </script>
+      `,
+      options: deepDataOptions
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            data() {
+              return {
+                foo: {
+                  bar: {
+                    a: 1
+                  },
+                  baz: {
+                    b: 1
+                  }
+                }
+              }
+            },
+            methods: {
+              fn () {
+                unknown(this.foo.bar)
+                f( () => this.foo.baz )
+              }
+            }
+          };
+
+          function f (a) {
+
+          }
+        </script>
+      `,
+      options: deepDataOptions
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div> {{ obj.num.toLocaleString() }} </div>
+      </template>
+      <script>
+      export default {
+        data () {
+          return {
+            obj: { num: 42 }
+          }
         }
-      })
+      }
+      </script>`,
+      options: deepDataOptions
+    },
+
+    // ignore public members
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+        export default {
+          data: () => ({
+            /** @public */
+            publicData: 'foo'
+          })
+        }
+        </script>
+      `,
+      options: [{ groups: ['data'], ignorePublicMembers: true }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+        export default {
+          computed: {
+            /** @public */
+            unusedComputed() {
+              return 'foo'
+            }
+          }
+        }
+        </script>
+      `,
+      options: [{ groups: ['computed'], ignorePublicMembers: true }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+        export default {
+          methods: {
+            /** @public */
+            publicMethod() {}
+          }
+        }
+        </script>
+      `,
+      options: [{ groups: ['methods'], ignorePublicMembers: true }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+        export default {
+          setup() {
+            return {
+              /** @public */
+              publicRef: 3
+            }
+          }
+        }
+        </script>
+      `,
+      options: [{ groups: ['setup'], ignorePublicMembers: true }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+      </template>
+      <script>
+      export default {
+        props: {
+          a: String,
+        },
+        setup() {
+          return {
+            /** @public */
+            b: 42
+          }
+        },
+        data () {
+          return {
+            /** @public */
+            c: 42
+          }
+        },
+        computed: {
+          /** @public */
+          d () { return this.a }
+        },
+        methods: {
+          /** @public */
+          e () {},
+          f:
+            /** @public */
+            function () {},
+          g:
+            /** @public */
+            () => {},
+        },
+      }
+      </script>`,
+      options: [
+        {
+          groups: ['props', 'data', 'computed', 'methods', 'setup'],
+          ignorePublicMembers: true
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+      </template>
+      <script>
+      export default {
+        props: {
+          a: String,
+        },
+        computed: {
+          /** @public */
+          b () { return this.$props.a },
+        },
+      }
+      </script>`,
+      options: [
+        {
+          groups: ['props', 'computed'],
+          ignorePublicMembers: true
+        }
+      ]
+    },
+
+    // expose
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        {{a}}
+      </template>
+      <script>
+      export default {
+        expose: ['a', 'b', 'c', 'd'],
+        props: ['a'],
+        data() {
+          return {
+            b: 42,
+          }
+        },
+        computed:{
+          c() {},
+        },
+        methods:{
+          d() {},
+        }
+      }
+      </script>`,
+      options: allOptions
+    },
+
+    //style vars
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div class="text">hello</div>
+        </template>
 
-      function fn(props) {
-        return props.foo
-      }
-      `
+        <script>
+          export default {
+            data() {
+              return {
+                color: 'red',
+                font: {
+                  size: '2em',
+                },
+              }
+            },
+          }
+        </script>
+
+        <style>
+          .text {
+            color: v-bind(color);
+
+            /* expressions (wrap in quotes) */
+            font-size: v-bind('font.size');
+          }
+        </style>
+        `
     },
+
+    // toRefs
     {
-      filename: 'test.js',
+      // https://github.com/vuejs/eslint-plugin-vue/issues/1643
+      filename: 'test.vue',
       code: `
-      Vue.component('MyButton', {
-        functional: true,
-        props: ['foo'],
-        render: function (createElement, ctx) {
-          return createElement('button', fn(ctx))
+      <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);
 
-      function fn({props}) {
-        return props.foo
+      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>`,
+      languageOptions: {
+        parserOptions: {
+          parser: '@typescript-eslint/parser'
+        }
       }
-      `
     },
+
+    // Vue2 functional component
     {
-      filename: 'test.js',
+      filename: 'test.vue',
       code: `
-      Vue.component('MyButton', {
-        functional: true,
-        props: ['foo'],
-        render: function (createElement, {props:{foo}}) {
-          return createElement('button', foo)
-        }
-      })
+      <template functional>
+        <div>{{props.a}} {{props.b}}</div>
+      </template>
+
+      <script>
+      export default {
+        props: {
+          a: String,
+          b: String,
+        },
+      };
+      </script>`
+    },
+    {
+      // defineModel
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      defineProps(['a'])
+      const foo = defineModel('a')
+      </script>
+      <template>
+        {{ foo }}
+      </template>
       `
     },
+
+    // props.prop in template
     {
-      filename: 'test.js',
+      filename: 'test.vue',
       code: `
-      Vue.component('MyButton', {
-        functional: true,
-        props: ['foo'],
-        render: function (createElement, {props:[bar]}) {
-          return createElement('button')
+      <template>
+        {{props}}
+      </template>
+      <script setup>
+      const props = defineProps(['a', 'b', 'c'])
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        {{props.a}}
+      </template>
+      <script setup>
+      const props = defineProps(['a'])
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        {{foo.a}}
+      </template>
+      <script setup>
+      const foo = defineProps(['a'])
+      </script>`
+    },
+    {
+      code: `
+      <script setup lang="ts">
+      const props = defineProps<{ foo: string, bar: string }>()
+      </script>
+      <template>
+      {{ props.foo }}{{ bar }}
+      </template>`,
+      ...getTypeScriptFixtureTestOptions()
+    }
+  ],
+  invalid: [
+    // vuex unused mutations
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            methods: mapMutations({
+              add2: 'increment',
+              add: 'iqwnei'
+            })
+          }
+        </script>
+        <template>
+          {{ add() }}
+        </template>
+      `,
+      errors: [
+        {
+          message: "'add2' of method found, but never used.",
+          line: 5
         }
-      })
-      `
+      ]
     },
     {
-      filename: 'test.js',
+      filename: 'test.vue',
       code: `
-      Vue.component('MyButton', {
-        functional: true,
-        props: ['foo'],
-        render: function (createElement, {props:bar={}}) {
-          return createElement('button', bar.foo)
+        <script>
+          export default {
+            methods: {
+              ...mapMutations({
+                add2: 'increment',
+                add: 'inrement'
+              })
+            }
+          }
+        </script>
+        <template>
+          {{ add() }}
+        </template>
+      `,
+      errors: [
+        {
+          message: "'add2' of method found, but never used.",
+          line: 6
         }
-      })
-      `
+      ]
     },
     {
-      filename: 'test.js',
+      filename: 'test.vue',
       code: `
-      Vue.component('MyButton', {
-        functional: true,
-        props: ['foo'],
-        render: function (createElement, {...foo}) {
-          return createElement('button')
+        <script>
+          export default {
+            methods: mapMutations(['add', 'add2'])
+          }
+        </script>
+        <template>
+          {{ add() }}
+        </template>
+      `,
+      errors: [
+        {
+          message: "'add2' of method found, but never used.",
+          line: 4
         }
-      })
-      `
+      ]
     },
     {
-      filename: 'test.js',
+      filename: 'test.vue',
       code: `
-      Vue.component('MyButton', {
-        functional: true,
-        props: ['foo', 'bar'],
-        render: function (createElement, ctx) {
-          const a = ctx.props
-          const b = ctx.props
-          return createElement('button', a.foo + b.bar)
+        <script>
+          export default {
+            methods: {
+              methods: {
+                ...mapMutations(['add', 'add2'])
+              }
+            }
+          }
+        </script>
+        <template>
+          {{ add() }}
+        </template>
+      `,
+      errors: [
+        {
+          message: "'add2' of method found, but never used.",
+          line: 6
         }
-      })
-      `
+      ]
     },
+
+    // vuex unused actions
     {
-      filename: 'test.js',
+      filename: 'test.vue',
       code: `
-      Vue.component('MyButton', {
-        functional: true,
-        props: ['foo', 'bar'],
-        render: function (createElement, {props: a, props: b}) {
-          return createElement('button', a.foo + b.bar)
+        <script>
+          export default {
+            methods: {
+              ...mapActions({
+                add2: 'increment',
+                add: 'qweqwqewqwe'
+              })
+            }
+          }
+        </script>
+        <template>
+          {{ add() }}
+        </template>
+      `,
+      errors: [
+        {
+          message: "'add2' of method found, but never used.",
+          line: 6
         }
-      })
-      `
+      ]
     },
-    // render for Vue 3.x
     {
       filename: 'test.vue',
       code: `
-      export default {
-        props: ['foo'],
-        render (props) {
-          return h('button', props.foo)
+        <script>
+          export default {
+            methods: mapActions({
+              add2: 'increment',
+              add: 'inasdasda'
+            })
+          }
+        </script>
+        <template>
+          {{ add() }}
+        </template>
+      `,
+      errors: [
+        {
+          message: "'add2' of method found, but never used.",
+          line: 5
         }
-      })
-      `
+      ]
     },
     {
       filename: 'test.vue',
       code: `
-      export default {
-        props: ['foo'],
-        render ({foo}) {
-          return h('button', foo)
+        <script>
+          export default {
+            methods: mapActions(['add', 'add2'])
+          }
+        </script>
+        <template>
+          {{ add() }}
+        </template>
+      `,
+      errors: [
+        {
+          message: "'add2' of method found, but never used.",
+          line: 4
         }
-      })
-      `
+      ]
     },
     {
       filename: 'test.vue',
       code: `
-      export default {
-        props: ['foo'],
-        render (bar) {
-          const {...baz} = bar
-          return h('button')
+        <script>
+          export default {
+            methods: {
+              ...mapActions(['add', 'add2'])
+            }
+          }
+        </script>
+        <template>
+          {{ add() }}
+        </template>
+      `,
+      errors: [
+        {
+          message: "'add2' of method found, but never used.",
+          line: 5
         }
-      })
-      `
+      ]
     },
-    // Vue.js 3.x Template Refs
+
+    // vuex unused state
     {
       filename: 'test.vue',
       code: `
-      <template>
-        <div ref="root"></div>
-      </template>
-
-      <script>
-        import { ref, onMounted } from 'vue'
-
-        export default {
-          setup() {
-            const root = ref(null)
-
-            onMounted(() => {
-              // the DOM element will be assigned to the ref after initial render
-              console.log(root.value) // <div/>
+        <script>
+          export default {
+            computed: mapState({
+              count2: state => state.todosCount,
+              count: state => state.todosCount
             })
-
-            return {
-              root
-            }
           }
+        </script>
+        <template>
+          {{ count }}
+        </template>
+      `,
+      errors: [
+        {
+          message: "'count2' of computed property found, but never used.",
+          line: 5
         }
-      </script>`,
-      options: [{ groups: ['props', 'setup'] }]
+      ]
     },
-
-    // sparse array
     {
       filename: 'test.vue',
       code: `
-        <template>
-          <div>{{ count }}</div>
-        </template>
         <script>
           export default {
-            props: [, 'count']
+            computed: {
+              ...mapState({
+                count2: state => state.todosCount,
+                count: state => state.todosCount
+              })
+            }
           }
         </script>
-        `
+        <template>
+          {{ count }}
+        </template>
+      `,
+      errors: [
+        {
+          message: "'count2' of computed property found, but never used.",
+          line: 6
+        }
+      ]
     },
-    // optional chaining
     {
       filename: 'test.vue',
       code: `
-      <script>
-        import { ref, onMounted } from 'vue'
+        <script>
+          export default {
+            computed: mapState({
+              count2 (state) {
+                return state.todosCount
+              },
 
-        export default {
-          props: ['foo', 'bar'],
-          methods: {
-            fn () {
-              fn(this)
-            }
+              count (state) {
+                return state.todosCount
+              }
+            })
           }
+        </script>
+        <template>
+          {{ count }}
+        </template>
+      `,
+      errors: [
+        {
+          message: "'count2' of computed property found, but never used.",
+          line: 5
         }
-
-        function fn(a) {
-          return a?.foo + a?.bar
-        }
-      </script>`
+      ]
     },
     {
-      filename: 'test.js',
+      filename: 'test.vue',
       code: `
-      Vue.component('MyButton', {
-        functional: true,
-        props: ['foo', 'bar'],
-        render: function (createElement, ctx) {
-          const a = ctx
-          const b = a?.props?.foo
-          const c = (a?.props)?.bar
+        <script>
+          export default {
+            computed: {
+              ...mapState(['count', 'count2', 'count3'])
+            }
+          }
+        </script>
+        <template>
+          {{ count2 }} {{ count3 }}
+        </template>
+      `,
+      errors: [
+        {
+          message: "'count' of computed property found, but never used.",
+          line: 5
         }
-      })
-      `
+      ]
     },
-    // handlers
     {
       filename: 'test.vue',
       code: `
-      <script>
-        export default {
-          props: ['foo', 'bar'],
-          watch: {
-            foo: 'updateFoo',
-            bar: {
-              handler: 'updateBar',
-              immediate: true
-            }
-          },
-          methods: {
-            updateFoo() {},
-            updateBar() {}
+        <script>
+          export default {
+            computed: mapState({
+              count: 'todosCount',
+              count2: 'someCount'
+            })
           }
-        };
-      </script>
+        </script>
+        <template>
+          {{ count }}
+        </template>
       `,
-      options: [{ groups: ['props', 'methods'] }]
+      errors: [
+        {
+          message: "'count2' of computed property found, but never used.",
+          line: 6
+        }
+      ]
     },
+
+    // vuex unused getters
     {
       filename: 'test.vue',
       code: `
-      <script>
-        export default {
-          props: ['foo', 'bar'],
-          data () {
-            return {
-              updateFoo() {},
-              updateBar() {}
-            }
-          },
-          watch: {
-            foo: 'updateFoo',
-            bar: {
-              handler: 'updateBar',
-              immediate: true
+        <script>
+          export default {
+            computed: {
+              ...mapGetters(['count', 'count2']),
             }
           }
-        };
-      </script>
+        </script>
+        <template>
+          {{ count }}
+        </template>
       `,
-      options: [{ groups: ['props', 'data'] }]
+      errors: [
+        {
+          message: "'count2' of computed property found, but never used.",
+          line: 5
+        }
+      ]
     },
-    // contexts
     {
       filename: 'test.vue',
       code: `
-      <script>
-        export default {
-          props: ['x'],
-          data: ({ x }) => ({
-              y: x
-          })
-        };
-      </script>
-      `
+        <script>
+          export default {
+            computed: mapGetters(['count1', 'count2', 'count'])
+          }
+        </script>
+        <template>
+          {{ count1 }} {{ count2 }}
+        </template>
+      `,
+      errors: [
+        {
+          message: "'count' of computed property found, but never used.",
+          line: 4
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: `
-      <script>
-        export default {
-          props: ['x'],
-          computed: {
-            y: (vm) => vm.x * 2
+        <script>
+          export default {
+            computed: mapGetters({
+              count2: 'count',
+              count: 'count'
+            })
           }
-        };
-      </script>
-      `
+        </script>
+        <template>
+          {{ count }}
+        </template>
+      `,
+      errors: [
+        {
+          message: "'count2' of computed property found, but never used.",
+          line: 5
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: `
-      <script>
-        export default {
-          props: ['x'],
-          computed: {
-            y: {
-              get: () => this.x * 2
+        <script>
+          export default {
+            computed: {
+              ...mapGetters({
+                count: 'count',
+                count3: 'count2'
+              })
             }
           }
-        };
-      </script>
-      `
+        </script>
+        <template>
+          {{ count }}
+        </template>
+      `,
+      errors: [
+        {
+          message: "'count3' of computed property found, but never used.",
+          line: 7
+        }
+      ]
     },
-
-    // deep data
     {
       filename: 'test.vue',
       code: `
-        <template>
-         {{ foo.baz.b }}
-        </template>
         <script>
           export default {
-            data() {
-              return {
-                foo: {
-                  bar: {
-                    a: 1
-                  },
-                  baz: {
-                    b: 1
-                  }
-                }
-              }
-            },
-            methods: {
-              a () {
-                return this.foo.bar.a
-              }
+            computed: {
+              ...mapGetters({
+                a: { b :'c' }, // This is an invalid definition, but it does not use "a".
+              })
             }
-          };
+          }
         </script>
+        <template>
+          {{ count }}
+        </template>
       `,
-      options: deepDataOptions
+      errors: [
+        {
+          message: "'a' of computed property found, but never used.",
+          line: 6
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: `
         <script>
           export default {
-            data() {
-              return {
-                foo: {
-                  bar: {
-                    a: 1
-                  },
-                  baz: {
-                    b: 1
-                  }
-                }
-              }
-            },
-            created() {
-              alert(this.foo)
+            computed: {
+              ...mapGetters([
+                "a",
+                a['foo'] // cannot be inferred.
+              ])
             }
-          };
+          }
         </script>
+        <template>
+          {{ count }}
+        </template>
       `,
-      options: deepDataOptions
+      errors: [
+        {
+          message: "'a' of computed property found, but never used.",
+          line: 6
+        }
+      ]
     },
+
+    // pinia unused actions
     {
       filename: 'test.vue',
       code: `
         <script>
           export default {
-            data() {
-              return {
-                foo: {
-                  bar: {
-                    a: 1
-                  },
-                  baz: {
-                    b: 1
-                  }
-                }
-              }
-            },
-            created() {
-              fn(this.foo)
+            methods: {
+              ...mapActions(useStore, {
+                add2: 'increment',
+                add: 'qweqwqewqwe'
+              })
             }
-          };
-          function fn(foo) {
-            return foo.bar.a + foo.baz.b
           }
         </script>
+        <template>
+          {{ add() }}
+        </template>
       `,
-      options: deepDataOptions
+      errors: [
+        {
+          message: "'add2' of method found, but never used.",
+          line: 6
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: `
-        <template>
-          {{ foo.bar }}
-          {{ foo.baz }}
-        </template>
         <script>
           export default {
-            data() {
-              return {
-                foo: {
-                  bar: {
-                    a: 1
-                  },
-                  baz: {
-                    b: 1
-                  }
-                }
-              }
-            }
-          };
+            methods: mapActions(useStore, {
+              add2: 'increment',
+              add: 'inasdasda'
+            })
+          }
         </script>
+        <template>
+          {{ add() }}
+        </template>
       `,
-      options: deepDataOptions
+      errors: [
+        {
+          message: "'add2' of method found, but never used.",
+          line: 5
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: `
         <script>
           export default {
-            data() {
-              return {
-                foo: {
-                  bar: {
-                    a: 1
-                  },
-                  baz: {
-                    b: 1
-                  }
-                }
-              }
-            },
-            methods: {
-              a () {
-                return this.foo
-              }
-            }
-          };
+            methods: mapActions(useStore, ['add', 'add2'])
+          }
         </script>
+        <template>
+          {{ add() }}
+        </template>
       `,
-      options: deepDataOptions
+      errors: [
+        {
+          message: "'add2' of method found, but never used.",
+          line: 4
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: `
-        <template>
-          <Foo :param="{ a: foo.bar }"></Foo>
-        </template>
-
         <script>
           export default {
-            data() {
-              return {
-                foo: {
-                  bar: {
-                    a: 1
-                  },
-                  baz: {
-                    b: 1
-                  }
-                }
-              }
-            },
             methods: {
-              fn () {
-                return {
-                  b: this.foo.baz
-                }
-              }
+              ...mapActions(useStore, ['add', 'add2'])
             }
-          };
+          }
         </script>
+        <template>
+          {{ add() }}
+        </template>
       `,
-      options: deepDataOptions
+      errors: [
+        {
+          message: "'add2' of method found, but never used.",
+          line: 5
+        }
+      ]
     },
+
+    // pinia unused state
     {
       filename: 'test.vue',
       code: `
+        <script>
+          export default {
+            computed: mapState(useStore, {
+              count2: state => state.todosCount,
+              count: state => state.todosCount
+            })
+          }
+        </script>
         <template>
-          <Foo :class="[ foo.bar ]"></Foo>
+          {{ count }}
         </template>
-
+      `,
+      errors: [
+        {
+          message: "'count2' of computed property found, but never used.",
+          line: 5
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
         <script>
           export default {
-            data() {
-              return {
-                foo: {
-                  bar: {
-                    a: 1
-                  },
-                  baz: {
-                    b: 1
-                  }
-                }
-              }
-            },
-            methods: {
-              fn () {
-                return [this.foo.baz]
-              }
+            computed: {
+              ...mapState(useStore, {
+                count2: state => state.todosCount,
+                count: state => state.todosCount
+              })
             }
-          };
+          }
         </script>
+        <template>
+          {{ count }}
+        </template>
       `,
-      options: deepDataOptions
+      errors: [
+        {
+          message: "'count2' of computed property found, but never used.",
+          line: 6
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: `
-        <template>
-          <Foo :param="[ {a: foo.bar} ]"></Foo>
-        </template>
-
         <script>
           export default {
-            data() {
-              return {
-                foo: {
-                  bar: {
-                    a: 1
-                  },
-                  baz: {
-                    b: 1
-                  }
-                }
-              }
-            },
-            methods: {
-              fn () {
-                return {
-                  b: [this.foo.baz]
-                }
+            computed: mapState(useStore, {
+              count2 (state) {
+                return state.todosCount
+              },
+
+              count (state) {
+                return state.todosCount
               }
-            }
-          };
+            })
+          }
         </script>
+        <template>
+          {{ count }}
+        </template>
       `,
-      options: deepDataOptions
+      errors: [
+        {
+          message: "'count2' of computed property found, but never used.",
+          line: 5
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: `
         <script>
           export default {
-            data() {
-              return {
-                foo: {
-                  bar: {
-                    a: 1
-                  },
-                  baz: {
-                    b: 1
-                  }
-                }
-              }
-            },
-            methods: {
-              fn () {
-                unknown(this.foo.bar)
-                f( () => this.foo.baz )
-              }
+            computed: {
+              ...mapState(useStore, ['count', 'count2', 'count3'])
             }
-          };
-
-          function f (a) {
-
           }
         </script>
+        <template>
+          {{ count2 }} {{ count3 }}
+        </template>
       `,
-      options: deepDataOptions
+      errors: [
+        {
+          message: "'count' of computed property found, but never used.",
+          line: 5
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: `
-      <template>
-        <div> {{ obj.num.toLocaleString() }} </div>
-      </template>
-      <script>
-      export default {
-        data () {
-          return {
-            obj: { num: 42 }
+        <script>
+          export default {
+            computed: mapState(useStore, {
+              count: 'todosCount',
+              count2: 'someCount'
+            })
           }
+        </script>
+        <template>
+          {{ count }}
+        </template>
+      `,
+      errors: [
+        {
+          message: "'count2' of computed property found, but never used.",
+          line: 6
         }
-      }
-      </script>`,
-      options: deepDataOptions
+      ]
     },
 
-    // ignore public members
+    // pinia unused writable state
     {
       filename: 'test.vue',
       code: `
         <script>
-        export default {
-          data: () => ({
-            /** @public */
-            publicData: 'foo'
-          })
-        }
+          export default {
+            computed: mapWritableState(useStore, {
+              count2: state => state.todosCount,
+              count: state => state.todosCount
+            })
+          }
         </script>
+        <template>
+          {{ count }}
+        </template>
       `,
-      options: [{ groups: ['data'], ignorePublicMembers: true }]
+      errors: [
+        {
+          message: "'count2' of computed property found, but never used.",
+          line: 5
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: `
         <script>
-        export default {
-          computed: {
-            /** @public */
-            unusedComputed() {
-              return 'foo'
+          export default {
+            computed: {
+              ...mapWritableState(useStore, {
+                count2: state => state.todosCount,
+                count: state => state.todosCount
+              })
             }
           }
-        }
         </script>
+        <template>
+          {{ count }}
+        </template>
       `,
-      options: [{ groups: ['computed'], ignorePublicMembers: true }]
+      errors: [
+        {
+          message: "'count2' of computed property found, but never used.",
+          line: 6
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: `
         <script>
-        export default {
-          methods: {
-            /** @public */
-            publicMethod() {}
+          export default {
+            computed: mapWritableState(useStore, {
+              count2 (state) {
+                return state.todosCount
+              },
+
+              count (state) {
+                return state.todosCount
+              }
+            })
           }
-        }
         </script>
+        <template>
+          {{ count }}
+        </template>
       `,
-      options: [{ groups: ['methods'], ignorePublicMembers: true }]
+      errors: [
+        {
+          message: "'count2' of computed property found, but never used.",
+          line: 5
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: `
         <script>
-        export default {
-          setup() {
-            return {
-              /** @public */
-              publicRef: 3
+          export default {
+            computed: {
+              ...mapWritableState(useStore, ['count', 'count2', 'count3'])
             }
           }
-        }
         </script>
+        <template>
+          {{ count2 }} {{ count3 }}
+        </template>
       `,
-      options: [{ groups: ['setup'], ignorePublicMembers: true }]
+      errors: [
+        {
+          message: "'count' of computed property found, but never used.",
+          line: 5
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: `
-      <template>
-      </template>
-      <script>
-      export default {
-        props: {
-          a: String,
-        },
-        setup() {
-          return {
-            /** @public */
-            b: 42
-          }
-        },
-        data () {
-          return {
-            /** @public */
-            c: 42
+        <script>
+          export default {
+            computed: mapWritableState(useStore, {
+              count: 'todosCount',
+              count2: 'someCount'
+            })
           }
-        },
-        computed: {
-          /** @public */
-          d () { return this.a }
-        },
-        methods: {
-          /** @public */
-          e () {},
-          f:
-            /** @public */
-            function () {},
-          g:
-            /** @public */
-            () => {},
-        },
-      }
-      </script>`,
-      options: [
+        </script>
+        <template>
+          {{ count }}
+        </template>
+      `,
+      errors: [
         {
-          groups: ['props', 'data', 'computed', 'methods', 'setup'],
-          ignorePublicMembers: true
+          message: "'count2' of computed property found, but never used.",
+          line: 6
         }
       ]
     },
 
-    // expose
+    // pinia unused getters
     {
       filename: 'test.vue',
       code: `
-      <template>
-        {{a}}
-      </template>
-      <script>
-      export default {
-        expose: ['a', 'b', 'c', 'd'],
-        props: ['a'],
-        data() {
-          return {
-            b: 42,
+        <script>
+          export default {
+            computed: {
+              ...mapGetters(useStore, ['count', 'count2']),
+            }
           }
-        },
-        computed:{
-          c() {},
-        },
-        methods:{
-          d() {},
+        </script>
+        <template>
+          {{ count }}
+        </template>
+      `,
+      errors: [
+        {
+          message: "'count2' of computed property found, but never used.",
+          line: 5
         }
-      }
-      </script>`,
-      options: allOptions
+      ]
     },
-
-    //style vars
     {
       filename: 'test.vue',
       code: `
+        <script>
+          export default {
+            computed: mapGetters(useStore, ['count1', 'count2', 'count'])
+          }
+        </script>
         <template>
-          <div class="text">hello</div>
+          {{ count1 }} {{ count2 }}
         </template>
-
+      `,
+      errors: [
+        {
+          message: "'count' of computed property found, but never used.",
+          line: 4
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
         <script>
           export default {
-            data() {
-              return {
-                color: 'red',
-                font: {
-                  size: '2em',
-                },
-              }
-            },
+            computed: mapGetters(useStore, {
+              count2: 'count',
+              count: 'count'
+            })
           }
         </script>
-
-        <style>
-          .text {
-            color: v-bind(color);
-
-            /* expressions (wrap in quotes) */
-            font-size: v-bind('font.size');
+        <template>
+          {{ count }}
+        </template>
+      `,
+      errors: [
+        {
+          message: "'count2' of computed property found, but never used.",
+          line: 5
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            computed: {
+              ...mapGetters(useStore, {
+                count: 'count',
+                count3: 'count2'
+              })
+            }
           }
-        </style>
-        `
+        </script>
+        <template>
+          {{ count }}
+        </template>
+      `,
+      errors: [
+        {
+          message: "'count3' of computed property found, but never used.",
+          line: 7
+        }
+      ]
     },
-
-    // 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;
-        }>(),
+        <script>
+          export default {
+            computed: {
+              ...mapGetters(useStore, {
+                a: { b :'c' }, // This is an invalid definition, but it does not use "a".
+              })
+            }
+          }
+        </script>
+        <template>
+          {{ count }}
+        </template>
+      `,
+      errors: [
         {
-          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;
+          message: "'a' of computed property found, but never used.",
+          line: 6
         }
-        emit('changePage', page);
-      }
-      </script>
-
-      <style lang="scss" scoped>
-      //
-      </style>`
+      ]
     },
-
-    // Vue2 functional component
     {
       filename: 'test.vue',
       code: `
-      <template functional>
-        <div>{{props.a}} {{props.b}}</div>
-      </template>
-
-      <script>
-      export default {
-        props: {
-          a: String,
-          b: String,
-        },
-      };
-      </script>`
-    }
-  ],
+        <script>
+          export default {
+            computed: {
+              ...mapGetters(useStore, [
+                "a",
+                a['foo'] // cannot be inferred.
+              ])
+            }
+          }
+        </script>
+        <template>
+          {{ count }}
+        </template>
+      `,
+      errors: [
+        {
+          message: "'a' of computed property found, but never used.",
+          line: 6
+        }
+      ]
+    },
 
-  invalid: [
     // unused property
     {
       filename: 'test.vue',
@@ -2803,6 +4517,229 @@ tester.run('no-unused-properties', rule, {
           line: 10
         }
       ]
+    },
+
+    // unreferencedOptions: unknownMemberAsUnreferenced
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          computed: {
+            one () {
+              return 1
+            },
+            two () {
+              return 2
+            }
+          },
+          methods: {
+            handler () {
+              const a = this.one
+              const i = 'two'
+              return this[i]
+            },
+          }
+        }
+      </script>`,
+      options: unreferencedOptions.unknownMemberAsUnreferenced,
+      errors: [
+        {
+          message: "'two' of computed property found, but never used.",
+          line: 8
+        }
+      ]
+    },
+    // unreferencedOptions: returnAsUnreferenced
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          computed: {
+            one () {
+              return 1
+            },
+            two () {
+              return 2
+            }
+          },
+          methods: {
+            handler () {
+              const a = this.one
+              return this
+            },
+          }
+        }
+      </script>`,
+      options: unreferencedOptions.returnAsUnreferenced,
+      errors: [
+        {
+          message: "'two' of computed property found, but never used.",
+          line: 8
+        }
+      ]
+    },
+    // unreferencedOptions: returnAsUnreferenced via variable with deepData
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          data () {
+            return {
+              foo: {
+                bar: 1
+              },
+              baz: 2
+            }
+          },
+          methods: {
+            handler () {
+              const vm = this
+              console.log(vm.baz)
+              return vm.foo
+            },
+          }
+        }
+      </script>
+      `,
+      options: [
+        {
+          groups: ['data'],
+          unreferencedOptions: ['returnAsUnreferenced'],
+          deepData: true
+        }
+      ],
+      errors: [
+        {
+          message: "'foo.bar' of data found, but never used.",
+          line: 7
+        }
+      ]
+    },
+    // unreferencedOptions: all
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          computed: {
+            one () {
+              return 1
+            },
+            two () {
+              return 2
+            }
+          },
+          methods: {
+            handler () {
+              const a = this.one
+              const i = 'two'
+              const b = this[i]
+              return this
+            },
+          }
+        }
+      </script>`,
+      options: unreferencedOptions.all,
+      errors: [
+        {
+          message: "'two' of computed property found, but never used.",
+          line: 8
+        }
+      ]
+    },
+    // script setup with typescript
+    {
+      code: `
+      <script setup lang="ts">
+      import {Props1 as Props} from './test01'
+      defineProps<Props>()
+      </script>
+      <template>
+      {{ foo }}{{ bar }}
+      </template>`,
+      errors: [
+        {
+          message: "'baz' of property found, but never used.",
+          line: 4
+        }
+      ],
+      ...getTypeScriptFixtureTestOptions()
+    },
+
+    {
+      // defineModel
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const m = defineModel()
+      console.log(m.value)
+      defineModel('a')
+      defineModel('unused')
+      </script>
+      <template>
+        {{ a }}
+      </template>
+      `,
+      errors: [
+        {
+          message: "'unused' of property found, but never used.",
+          line: 6
+        }
+      ]
+    },
+
+    // a property used as a template $props member expression
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>{{ $props.foo }}</div>
+        </template>
+        <script>
+          export default {
+            props: ['foo', 'bar']
+          }
+        </script>
+      `,
+      errors: ["'bar' of property found, but never used."]
+    },
+
+    // props.prop in template
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        {{props.a}}
+      </template>
+      <script setup>
+      const props = defineProps(['a', 'b'])
+      </script>`,
+      errors: ["'b' of property found, but never used."]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        {{foo.a}}
+      </template>
+      <script setup>
+      const foo = defineProps(['a', 'b'])
+      </script>`,
+      errors: ["'b' of property found, but never used."]
+    },
+    {
+      code: `
+      <script setup lang="ts">
+      const props = defineProps<{ foo: string, bar: string, baz: string }>()
+      </script>
+      <template>
+      {{ props.foo }}{{ bar }}
+      </template>`,
+      errors: ["'baz' of property found, but never used."],
+      ...getTypeScriptFixtureTestOptions()
     }
   ]
 })
@@ -2810,16 +4747,18 @@ tester.run('no-unused-properties', rule, {
 // https://github.com/vuejs/eslint-plugin-vue/issues/1789
 describe('`vue/no-unused-properties` and `vue/no-unused-components` should not conflict.', () => {
   const linter = new Linter()
-  linter.defineParser('vue-eslint-parser', require('vue-eslint-parser'))
-  linter.defineRule(
-    'vue/no-unused-components',
-    require('../../../lib/rules/no-unused-components')
-  )
-  linter.defineRule('vue/no-unused-properties', rule)
-
   const config = {
-    parser: 'vue-eslint-parser',
-    parserOptions: {
+    files: ['**/*.vue'],
+    plugins: {
+      vue: {
+        rules: {
+          'no-unused-components': require('../../../lib/rules/no-unused-components'),
+          'no-unused-properties': rule
+        }
+      }
+    },
+    languageOptions: {
+      parser: require('vue-eslint-parser'),
       ecmaVersion: 2020,
       sourceType: 'module'
     },
diff --git a/tests/lib/rules/no-unused-refs.js b/tests/lib/rules/no-unused-refs.js
index 2547ef05d..a4407a608 100644
--- a/tests/lib/rules/no-unused-refs.js
+++ b/tests/lib/rules/no-unused-refs.js
@@ -4,12 +4,12 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-unused-refs')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
     ecmaVersion: 2020,
     sourceType: 'module'
   }
@@ -315,6 +315,20 @@ tester.run('no-unused-refs', rule, {
       const x = ref(null)
       </script>
       `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <input ref="x" />
+        <input ref="y" />
+      </template>
+      <script setup>
+      import {useTemplateRef} from 'vue'
+      const inputX = useTemplateRef('x')
+      const inputY = useTemplateRef(\`y\`)
+      </script>
+      `
     }
   ],
 
diff --git a/tests/lib/rules/no-unused-vars.js b/tests/lib/rules/no-unused-vars.js
index f57733d3f..60e1c276b 100644
--- a/tests/lib/rules/no-unused-vars.js
+++ b/tests/lib/rules/no-unused-vars.js
@@ -5,54 +5,25 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-unused-vars')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('no-unused-vars', rule, {
   valid: [
-    {
-      code: '<template><ol v-for="i in 5"><li>{{i}}</li></ol></template>'
-    },
-    {
-      code: '<template><ol v-for="i in 5"><li :prop="i"></li></ol></template>'
-    },
-    {
-      code: '<template v-for="i in 5"><comp v-for="j in 10">{{i}}{{j}}</comp></template>'
-    },
-    {
-      code: '<template><ol v-for="i in data"><li v-for="f in i">{{ f.bar.baz }}</li></ol></template>'
-    },
-    {
-      code: '<template><template scope="props">{{props}}</template></template>'
-    },
-    {
-      code: '<template><template scope="props"><span v-if="props"></span></template></template>'
-    },
-    {
-      code: '<template><div v-for="(item, key) in items" :key="key">{{item.name}}</div></template>'
-    },
-    {
-      code: '<template><div v-for="(v, i, c) in foo">{{c}}</div></template>'
-    },
-    {
-      code: '<template><div v-for="x in foo">{{value | f(x)}}</div></template>'
-    },
-    {
-      code: '<template><div v-for="x in foo" :[x]></div></template>'
-    },
+    '<template><ol v-for="i in 5"><li>{{i}}</li></ol></template>',
+    '<template><ol v-for="i in 5"><li :prop="i"></li></ol></template>',
+    '<template v-for="i in 5"><comp v-for="j in 10">{{i}}{{j}}</comp></template>',
+    '<template><ol v-for="i in data"><li v-for="f in i">{{ f.bar.baz }}</li></ol></template>',
+    '<template><template scope="props">{{props}}</template></template>',
+    '<template><template scope="props"><span v-if="props"></span></template></template>',
+    '<template><div v-for="(item, key) in items" :key="key">{{item.name}}</div></template>',
+    '<template><div v-for="(v, i, c) in foo">{{c}}</div></template>',
+    '<template><div v-for="x in foo">{{value | f(x)}}</div></template>',
+    '<template><div v-for="x in foo" :[x]></div></template>',
     {
       code: '<template><div v-for="_ in foo" ></div></template>',
       options: [{ ignorePattern: '^_' }]
@@ -116,19 +87,19 @@ tester.run('no-unused-vars', rule, {
     },
     {
       code: '<template><div v-for="x in items">{{value | x}}</div></template>',
+      options: [{ ignorePattern: '^_' }],
       errors: [
         {
           message: "'x' is defined but never used.",
           suggestions: [
             {
-              desc: 'Replace the x with _x',
+              desc: 'Replace `x` with `_x` to ignore the unused variable.',
               output:
                 '<template><div v-for="_x in items">{{value | x}}</div></template>'
             }
           ]
         }
-      ],
-      options: [{ ignorePattern: '^_' }]
+      ]
     },
     {
       code: '<template><div v-for="x in items">{{value}}</div></template>',
@@ -137,13 +108,13 @@ tester.run('no-unused-vars', rule, {
     },
     {
       code: '<template><span slot-scope="props"></span></template>',
-      errors: ["'props' is defined but never used."],
-      options: [{ ignorePattern: '^ignore' }]
+      options: [{ ignorePattern: '^ignore' }],
+      errors: ["'props' is defined but never used."]
     },
     {
       code: '<template><span><template scope="props"></template></span></template>',
-      errors: ["'props' is defined but never used."],
-      options: [{ ignorePattern: '^ignore' }]
+      options: [{ ignorePattern: '^ignore' }],
+      errors: ["'props' is defined but never used."]
     },
     {
       code: '<template><div v-for="_i in foo" ></div></template>',
@@ -152,7 +123,18 @@ tester.run('no-unused-vars', rule, {
     {
       code: '<template><div v-for="(a, _i) in foo" ></div></template>',
       options: [{ ignorePattern: '^_' }],
-      errors: ["'a' is defined but never used."]
+      errors: [
+        {
+          message: "'a' is defined but never used.",
+          suggestions: [
+            {
+              messageId: 'replaceWithUnderscore',
+              output:
+                '<template><div v-for="(_a, _i) in foo" ></div></template>'
+            }
+          ]
+        }
+      ]
     },
     {
       code: '<template><my-component v-slot="a" >{{d}}</my-component></template>',
diff --git a/tests/lib/rules/no-use-computed-property-like-method.js b/tests/lib/rules/no-use-computed-property-like-method.js
index 539e6275a..4a5e25ebe 100644
--- a/tests/lib/rules/no-use-computed-property-like-method.js
+++ b/tests/lib/rules/no-use-computed-property-like-method.js
@@ -3,20 +3,15 @@
  * See LICENSE file in root directory for full license.
  */
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-use-computed-property-like-method')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2020, sourceType: 'module' }
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
 })
 
 tester.run('no-use-computed-property-like-method', rule, {
@@ -569,6 +564,78 @@ tester.run('no-use-computed-property-like-method', rule, {
         }
       </script>
       `
+    },
+    {
+      // expression may be a function: https://github.com/vuejs/eslint-plugin-vue/issues/2037
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          props: {
+            propsFunction: {
+              type: Function,
+              default: undefined
+            },
+            propsNumber: {
+              type: Number,
+            }
+          },
+          computed: {
+            computedReturnPropsFunction() {
+              return this.propsFunction ? this.propsFunction : this.propsFunctionDefault
+            },
+            computedReturnMaybeFunction() {
+              return this.propsFunction ? this.propsFunction : this.propsNumber
+            }
+          },
+          methods: {
+            fn() {
+              this.computedReturnPropsFunction
+              this.computedReturnPropsFunction()
+              this.computedReturnMaybeFunction
+              this.computedReturnMaybeFunction()
+            },
+            propsFunctionDefault() {}
+          }
+        }
+      </script>
+      `
+    },
+    {
+      // expression may be a function: https://github.com/vuejs/eslint-plugin-vue/issues/2037
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          props: {
+            propsFunction: {
+              type: Function,
+              default: undefined
+            },
+            propsNumber: {
+              type: Number,
+            }
+          },
+          computed: {
+            computedReturnPropsFunction() {
+              return this.propsFunction || this.propsFunctionDefault
+            },
+            computedReturnMaybeFunction() {
+              return this.propsFunction || this.propsNumber
+            }
+          },
+          methods: {
+            fn() {
+              this.computedReturnPropsFunction
+              this.computedReturnPropsFunction()
+              this.computedReturnMaybeFunction
+              this.computedReturnMaybeFunction()
+            },
+            propsFunctionDefault() {}
+          }
+        }
+      </script>
+      `
     }
   ],
   invalid: [
@@ -1101,6 +1168,42 @@ tester.run('no-use-computed-property-like-method', rule, {
       </script>
       `,
       errors: ['Use x instead of x().']
+    },
+    {
+      // expression may be a function: https://github.com/vuejs/eslint-plugin-vue/issues/2037
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          props: {
+            propsNumber: {
+              type: Number
+            },
+            propsString: {
+              type: String
+            },
+          },
+          computed: {
+            computedReturnNotFunction1() {
+              return this.propsString ? this.propsString : this.propsNumber
+            },
+            computedReturnNotFunction2() {
+              return this.propsString || this.propsNumber
+            },
+          },
+          methods: {
+            fn() {
+              this.computedReturnNotFunction1()
+              this.computedReturnNotFunction2()
+            }
+          }
+        }
+      </script>
+      `,
+      errors: [
+        'Use this.computedReturnNotFunction1 instead of this.computedReturnNotFunction1().',
+        'Use this.computedReturnNotFunction2 instead of this.computedReturnNotFunction2().'
+      ]
     }
   ]
 })
diff --git a/tests/lib/rules/no-use-v-else-with-v-for.js b/tests/lib/rules/no-use-v-else-with-v-for.js
new file mode 100644
index 000000000..896ac122d
--- /dev/null
+++ b/tests/lib/rules/no-use-v-else-with-v-for.js
@@ -0,0 +1,97 @@
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/no-use-v-else-with-v-for')
+
+const tester = new RuleTester({
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
+})
+
+tester.run('no-use-v-else-with-v-for', rule, {
+  valid: [
+    {
+      // caught by `vue/no-use-v-if-with-v-for`
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div v-if="foo" v-for="x in xs">{{ x }}</div>
+        </template>
+      `
+    },
+    {
+      // `v-if`/`v-else-if`/`v-else` only
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div v-if="foo">{{ x }}</div>
+          <div v-else-if="foo">{{ x }}</div>
+          <div v-else="foo">{{ x }}</div>
+        </template>
+      `
+    },
+    {
+      // `v-for` only
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div v-for="x in xs">{{ x }}</div>
+        </template>
+      `
+    },
+    {
+      // `v-else-if`/`v-else` in template + `v-for`
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div v-if="foo">foo</div>
+          <template v-else-if="bar">
+            <div v-for="x in xs">{{ x }}</div>
+          </template>
+          <template v-else>
+            <div v-for="x in xs">{{ x }}</div>
+          </template>
+        </template>
+      `
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div v-if="foo">foo</div>
+          <div v-else v-for="x in xs">{{ x }}</div>
+        </template>
+      `,
+      errors: [
+        {
+          message:
+            'Unexpected `v-else` and `v-for` on the same element. Move `v-else` to a wrapper element instead.',
+          line: 4,
+          endLine: 4,
+          column: 11,
+          endColumn: 52
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div v-if="foo">foo</div>
+          <div v-else-if="bar" v-for="x in xs">{{ x }}</div>
+        </template>
+      `,
+      errors: [
+        {
+          message:
+            'Unexpected `v-else-if` and `v-for` on the same element. Move `v-else-if` to a wrapper element instead.',
+          line: 4,
+          endLine: 4,
+          column: 11,
+          endColumn: 61
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/no-use-v-if-with-v-for.js b/tests/lib/rules/no-use-v-if-with-v-for.js
index 4ed5e6f46..6d2661a4c 100644
--- a/tests/lib/rules/no-use-v-if-with-v-for.js
+++ b/tests/lib/rules/no-use-v-if-with-v-for.js
@@ -3,20 +3,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-use-v-if-with-v-for')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('no-use-v-if-with-v-for', rule, {
diff --git a/tests/lib/rules/no-useless-concat.js b/tests/lib/rules/no-useless-concat.js
index 28ac8240d..eca6901bb 100644
--- a/tests/lib/rules/no-useless-concat.js
+++ b/tests/lib/rules/no-useless-concat.js
@@ -3,12 +3,11 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-useless-concat')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('no-useless-concat', rule, {
diff --git a/tests/lib/rules/no-useless-mustaches.js b/tests/lib/rules/no-useless-mustaches.js
index e12d33c1e..77d055e17 100644
--- a/tests/lib/rules/no-useless-mustaches.js
+++ b/tests/lib/rules/no-useless-mustaches.js
@@ -3,20 +3,12 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-useless-mustaches.js')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
     ecmaVersion: 2020,
     sourceType: 'module'
   }
@@ -194,6 +186,54 @@ tester.run('no-useless-mustaches', rule, {
         'Unexpected mustache interpolation with a string literal value.'
       ]
     },
+    {
+      code: `
+      <template>
+        {{ '&lt;' }}
+        {{ '&gt;' }}
+        {{ '&amp;' }}
+        {{ '&#8212;' }}
+      </template>
+      `,
+      output: `
+      <template>
+        &lt;
+        &gt;
+        &amp;
+        &#8212;
+      </template>
+      `,
+      errors: [
+        'Unexpected mustache interpolation with a string literal value.',
+        'Unexpected mustache interpolation with a string literal value.',
+        'Unexpected mustache interpolation with a string literal value.',
+        'Unexpected mustache interpolation with a string literal value.'
+      ]
+    },
+    {
+      code: `
+      <template>
+        {{ '<' }}
+        {{ '<<' }}
+        {{ 'can be < anywhere' }}
+        {{ '<tag>' }}
+      </template>
+      `,
+      output: `
+      <template>
+        &lt;
+        &lt;&lt;
+        can be &lt; anywhere
+        &lt;tag>
+      </template>
+      `,
+      errors: [
+        'Unexpected mustache interpolation with a string literal value.',
+        'Unexpected mustache interpolation with a string literal value.',
+        'Unexpected mustache interpolation with a string literal value.',
+        'Unexpected mustache interpolation with a string literal value.'
+      ]
+    },
     {
       code: `
       <template>
diff --git a/tests/lib/rules/no-useless-template-attributes.js b/tests/lib/rules/no-useless-template-attributes.js
index 7639b0f33..bb34c4170 100644
--- a/tests/lib/rules/no-useless-template-attributes.js
+++ b/tests/lib/rules/no-useless-template-attributes.js
@@ -4,12 +4,12 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-useless-template-attributes')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
     ecmaVersion: 2020,
     sourceType: 'module'
   }
diff --git a/tests/lib/rules/no-useless-v-bind.js b/tests/lib/rules/no-useless-v-bind.js
index 8362aa0b9..34a76d0df 100644
--- a/tests/lib/rules/no-useless-v-bind.js
+++ b/tests/lib/rules/no-useless-v-bind.js
@@ -3,20 +3,12 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-useless-v-bind.js')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
     ecmaVersion: 2020,
     sourceType: 'module'
   }
@@ -144,6 +136,34 @@ tester.run('no-useless-v-bind', rule, {
         'Unexpected `v-bind` with a string literal value.',
         'Unexpected `v-bind` with a string literal value.'
       ]
+    },
+    {
+      code: `
+      <template>
+        <div :id="    'foo'    " />
+        <div :id='    "foo"    ' />
+        <div :id="   \`foo\`   " />
+        <div :id='   \`foo\`   ' />
+        <div :id="' \\'foo\\' '" />
+        <div :id='" \\"foo\\" "' />
+      </template>`,
+      output: `
+      <template>
+        <div id="foo" />
+        <div id='foo' />
+        <div id="foo" />
+        <div id='foo' />
+        <div id=" 'foo' " />
+        <div id=' "foo" ' />
+      </template>`,
+      errors: [
+        'Unexpected `v-bind` with a string literal value.',
+        'Unexpected `v-bind` with a string literal value.',
+        'Unexpected `v-bind` with a string literal value.',
+        'Unexpected `v-bind` with a string literal value.',
+        'Unexpected `v-bind` with a string literal value.',
+        'Unexpected `v-bind` with a string literal value.'
+      ]
     }
   ]
 })
diff --git a/tests/lib/rules/no-v-for-template-key-on-child.js b/tests/lib/rules/no-v-for-template-key-on-child.js
index f6a1e2419..7c65a2012 100644
--- a/tests/lib/rules/no-v-for-template-key-on-child.js
+++ b/tests/lib/rules/no-v-for-template-key-on-child.js
@@ -3,20 +3,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-v-for-template-key-on-child')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('no-v-for-template-key-on-child', rule, {
diff --git a/tests/lib/rules/no-v-for-template-key.js b/tests/lib/rules/no-v-for-template-key.js
index e6665b583..8de3ddc9c 100644
--- a/tests/lib/rules/no-v-for-template-key.js
+++ b/tests/lib/rules/no-v-for-template-key.js
@@ -3,20 +3,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-v-for-template-key')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('no-v-for-template-key', rule, {
diff --git a/tests/lib/rules/no-v-html.js b/tests/lib/rules/no-v-html.js
index 9c34f89fa..16b606a63 100644
--- a/tests/lib/rules/no-v-html.js
+++ b/tests/lib/rules/no-v-html.js
@@ -4,19 +4,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-v-html')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
 const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 ruleTester.run('no-v-html', rule, {
@@ -36,23 +28,71 @@ ruleTester.run('no-v-html', rule, {
     {
       filename: 'test.vue',
       code: '<template><div v-if="foo" v-bind="bar"></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-html="htmlKnownToBeSafe"></div></template>',
+      options: [{ ignorePattern: '^html' }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-html="$sanitize(test)"></div></template>',
+      options: [{ ignorePattern: String.raw`^\$sanitize\(` }]
     }
   ],
   invalid: [
     {
       filename: 'test.vue',
       code: '<template><div v-html="foo"></div></template>',
-      errors: ["'v-html' directive can lead to XSS attack."]
+      errors: [
+        {
+          message: "'v-html' directive can lead to XSS attack.",
+          line: 1,
+          column: 16,
+          endLine: 1,
+          endColumn: 28
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><ul v-html:aaa="userHTML"></ul></template>',
-      errors: ["'v-html' directive can lead to XSS attack."]
+      errors: [
+        {
+          message: "'v-html' directive can lead to XSS attack.",
+          line: 1,
+          column: 15,
+          endLine: 1,
+          endColumn: 36
+        }
+      ]
     },
     {
       filename: 'test.vue',
       code: '<template><section v-html/></template>',
-      errors: ["'v-html' directive can lead to XSS attack."]
+      errors: [
+        {
+          message: "'v-html' directive can lead to XSS attack.",
+          line: 1,
+          column: 20,
+          endLine: 1,
+          endColumn: 26
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-html="unsafeString"></div></template>',
+      options: [{ ignorePattern: '^html' }],
+      errors: [
+        {
+          message: "'v-html' directive can lead to XSS attack.",
+          line: 1,
+          column: 16,
+          endLine: 1,
+          endColumn: 37
+        }
+      ]
     }
   ]
 })
diff --git a/tests/lib/rules/no-v-model-argument.js b/tests/lib/rules/no-v-model-argument.js
index 4ffe0a57b..f8bb7f140 100644
--- a/tests/lib/rules/no-v-model-argument.js
+++ b/tests/lib/rules/no-v-model-argument.js
@@ -4,20 +4,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/no-v-model-argument')
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 ruleTester.run('no-v-model-argument', rule, {
diff --git a/tests/lib/rules/no-v-text-v-html-on-component.js b/tests/lib/rules/no-v-text-v-html-on-component.js
index c50071346..bb403489e 100644
--- a/tests/lib/rules/no-v-text-v-html-on-component.js
+++ b/tests/lib/rules/no-v-text-v-html-on-component.js
@@ -4,12 +4,12 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-v-text-v-html-on-component')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
     ecmaVersion: 2020,
     sourceType: 'module'
   }
@@ -40,6 +40,45 @@ tester.run('no-v-text-v-html-on-component', rule, {
         <MyComponent v-if="content" />
       </template>
       `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <router-link v-text="content" />
+      </template>
+      `,
+      options: [{ allow: ['router-link'] }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <router-link v-html="content" />
+        <NuxtLink v-html="content" />
+      </template>
+      `,
+      options: [{ allow: ['RouterLink', 'nuxt-link'] }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <svg><g v-text="content" /></svg>
+        <math><mspace v-text="content" /></math>
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <h1 v-html="content" />
+        <g v-text="content" />
+        <mi v-text="content" />
+      </template>
+      `,
+      options: [{ ignoreElementNamespaces: true }]
     }
   ],
   invalid: [
@@ -132,6 +171,44 @@ tester.run('no-v-text-v-html-on-component', rule, {
           column: 30
         }
       ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <router-link v-html="content" />
+      </template>
+      `,
+      options: [{ allow: ['nuxt-link'] }],
+      errors: [
+        {
+          message: "Using v-html on component may break component's content.",
+          line: 3,
+          column: 22
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <g v-text="content" />
+        <mi v-text="content" />
+      </template>
+      `,
+      options: [{ ignoreElementNamespaces: false }],
+      errors: [
+        {
+          message: "Using v-text on component may break component's content.",
+          line: 3,
+          column: 12
+        },
+        {
+          message: "Using v-text on component may break component's content.",
+          line: 4,
+          column: 13
+        }
+      ]
     }
   ]
 })
diff --git a/tests/lib/rules/no-v-text.js b/tests/lib/rules/no-v-text.js
index c9820ce1a..76756d188 100644
--- a/tests/lib/rules/no-v-text.js
+++ b/tests/lib/rules/no-v-text.js
@@ -5,19 +5,11 @@
 
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-v-text')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
 const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 ruleTester.run('no-v-text', rule, {
diff --git a/tests/lib/rules/no-watch-after-await.js b/tests/lib/rules/no-watch-after-await.js
index c54c36eb7..06da09cf3 100644
--- a/tests/lib/rules/no-watch-after-await.js
+++ b/tests/lib/rules/no-watch-after-await.js
@@ -3,12 +3,15 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/no-watch-after-await')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2020, sourceType: 'module' }
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
 })
 
 tester.run('no-watch-after-await', rule, {
@@ -92,12 +95,11 @@ tester.run('no-watch-after-await', rule, {
       </script>
       `
     },
-    {
-      code: `
+    `
       Vue.component('test', {
         el: foo()
-      })`
-    },
+      })
+    `,
     {
       filename: 'test.vue',
       code: `
@@ -128,7 +130,7 @@ tester.run('no-watch-after-await', rule, {
       await doSomething()
       </script>
       `,
-      parserOptions: { ecmaVersion: 2022 }
+      languageOptions: { ecmaVersion: 2022 }
     },
     {
       filename: 'test.vue',
@@ -141,7 +143,7 @@ tester.run('no-watch-after-await', rule, {
       watchEffect(() => { /* ... */ }) // not error
       </script>
       `,
-      parserOptions: { ecmaVersion: 2022 }
+      languageOptions: { ecmaVersion: 2022 }
     },
     {
       filename: 'test.vue',
@@ -154,7 +156,7 @@ tester.run('no-watch-after-await', rule, {
       watchEffect(() => { /* ... */ }) // not error
       </script>
       `,
-      parserOptions: { ecmaVersion: 2022 }
+      languageOptions: { ecmaVersion: 2022 }
     },
     {
       filename: 'test.vue',
@@ -168,7 +170,7 @@ tester.run('no-watch-after-await', rule, {
       watch(foo, () => { /* ... */ })
       </script>
       `,
-      parserOptions: { ecmaVersion: 2022 }
+      languageOptions: { ecmaVersion: 2022 }
     }
   ],
   invalid: [
diff --git a/tests/lib/rules/object-curly-newline.js b/tests/lib/rules/object-curly-newline.js
index 9fcacb77e..6363a50e9 100644
--- a/tests/lib/rules/object-curly-newline.js
+++ b/tests/lib/rules/object-curly-newline.js
@@ -3,12 +3,11 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/object-curly-newline')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2020 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2020 }
 })
 
 tester.run('object-curly-newline', rule, {
diff --git a/tests/lib/rules/object-curly-spacing.js b/tests/lib/rules/object-curly-spacing.js
index 874f4dd41..181587eb2 100644
--- a/tests/lib/rules/object-curly-spacing.js
+++ b/tests/lib/rules/object-curly-spacing.js
@@ -3,12 +3,11 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/object-curly-spacing')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('object-curly-spacing', rule, {
@@ -63,20 +62,20 @@ tester.run('object-curly-spacing', rule, {
     },
     {
       code: '<template><div :attr="{ a: 1}" /></template>',
-      options: ['never'],
       output: '<template><div :attr="{a: 1}" /></template>',
+      options: ['never'],
       errors: ["There should be no space after '{'."]
     },
     {
       code: '<template><div :attr="{a: 1 }" /></template>',
-      options: ['never'],
       output: '<template><div :attr="{a: 1}" /></template>',
+      options: ['never'],
       errors: ["There should be no space before '}'."]
     },
     {
       code: '<template><div :attr="{ a: 1 }" /></template>',
-      options: ['never'],
       output: '<template><div :attr="{a: 1}" /></template>',
+      options: ['never'],
       errors: [
         "There should be no space after '{'.",
         "There should be no space before '}'."
@@ -84,20 +83,20 @@ tester.run('object-curly-spacing', rule, {
     },
     {
       code: '<template><div :attr="{ a: 1}" /></template>',
-      options: ['always'],
       output: '<template><div :attr="{ a: 1 }" /></template>',
+      options: ['always'],
       errors: ["A space is required before '}'."]
     },
     {
       code: '<template><div :attr="{a: 1 }" /></template>',
-      options: ['always'],
       output: '<template><div :attr="{ a: 1 }" /></template>',
+      options: ['always'],
       errors: ["A space is required after '{'."]
     },
     {
       code: '<template><div :attr="{a: 1}" /></template>',
-      options: ['always'],
       output: '<template><div :attr="{ a: 1 }" /></template>',
+      options: ['always'],
       errors: [
         "A space is required after '{'.",
         "A space is required before '}'."
@@ -105,8 +104,8 @@ tester.run('object-curly-spacing', rule, {
     },
     {
       code: '<template><div :[{a:1}]="{a:1}" /></template>',
-      options: ['always'],
       output: '<template><div :[{a:1}]="{ a:1 }" /></template>',
+      options: ['always'],
       errors: [
         "A space is required after '{'.",
         "A space is required before '}'."
@@ -119,18 +118,18 @@ tester.run('object-curly-spacing', rule, {
           Hello World
         </div>
       </template>`,
-      options: [
-        'never',
-        {
-          objectsInObjects: true
-        }
-      ],
       output: `
       <template>
         <div v-bind="{foo: {bar: 'baz'} }">
           Hello World
         </div>
       </template>`,
+      options: [
+        'never',
+        {
+          objectsInObjects: true
+        }
+      ],
       errors: [
         "There should be no space after '{'.",
         "There should be no space after '{'.",
@@ -145,13 +144,13 @@ tester.run('object-curly-spacing', rule, {
           Hello World
         </div>
       </template>`,
-      options: ['never'],
       output: `
       <template>
         <div v-bind="{foo: {bar: 'baz'}}">
           Hello World
         </div>
       </template>`,
+      options: ['never'],
       errors: [
         "There should be no space after '{'.",
         "There should be no space after '{'.",
diff --git a/tests/lib/rules/object-property-newline.js b/tests/lib/rules/object-property-newline.js
index 2de002caf..31e37dfb1 100644
--- a/tests/lib/rules/object-property-newline.js
+++ b/tests/lib/rules/object-property-newline.js
@@ -3,12 +3,11 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/object-property-newline')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2020 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2020 }
 })
 
 tester.run('object-property-newline', rule, {
diff --git a/tests/lib/rules/object-shorthand.js b/tests/lib/rules/object-shorthand.js
index 62a9a9efa..f216048f0 100644
--- a/tests/lib/rules/object-shorthand.js
+++ b/tests/lib/rules/object-shorthand.js
@@ -4,12 +4,12 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/object-shorthand')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
     ecmaVersion: 2020,
     sourceType: 'module'
   }
diff --git a/tests/lib/rules/one-component-per-file.js b/tests/lib/rules/one-component-per-file.js
index 5cdabfa85..7c62e69a9 100644
--- a/tests/lib/rules/one-component-per-file.js
+++ b/tests/lib/rules/one-component-per-file.js
@@ -4,15 +4,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/one-component-per-file')
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const ruleTester = new RuleTester({
-  parserOptions: {
+  languageOptions: {
     ecmaVersion: 2018,
     sourceType: 'module'
   }
diff --git a/tests/lib/rules/operator-linebreak.js b/tests/lib/rules/operator-linebreak.js
index 8b0c731e6..68843a7ef 100644
--- a/tests/lib/rules/operator-linebreak.js
+++ b/tests/lib/rules/operator-linebreak.js
@@ -3,12 +3,11 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/operator-linebreak')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2020 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2020 }
 })
 
 tester.run('operator-linebreak', rule, {
diff --git a/tests/lib/rules/order-in-components.js b/tests/lib/rules/order-in-components.js
index 76d510964..c8afe3db1 100644
--- a/tests/lib/rules/order-in-components.js
+++ b/tests/lib/rules/order-in-components.js
@@ -5,14 +5,13 @@
 'use strict'
 
 const rule = require('../../../lib/rules/order-in-components')
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 
-const ruleTester = new RuleTester()
-
-const parserOptions = {
+const languageOptions = {
   ecmaVersion: 2020,
   sourceType: 'module'
 }
+const ruleTester = new RuleTester({ languageOptions })
 
 ruleTester.run('order-in-components', rule, {
   valid: [
@@ -32,7 +31,7 @@ ruleTester.run('order-in-components', rule, {
           },
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'example.vue',
@@ -51,6 +50,8 @@ ruleTester.run('order-in-components', rule, {
           model,
           props, propsData,
           emits,
+          slots,
+          expose,
           setup,
           data,
           computed,
@@ -75,21 +76,21 @@ ruleTester.run('order-in-components', rule, {
           renderError,
         };
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
       code: `
         export default {}
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
       code: `
         export default 'example-text'
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.jsx',
@@ -103,7 +104,24 @@ ruleTester.run('order-in-components', rule, {
           },
         }
       `,
-      parserOptions
+      languageOptions
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        export default {
+          name: 'app',
+          data () {
+            return {
+              msg: 'Welcome to Your Vue.js App'
+            }
+          },
+          computed: {
+            ...mapStates(['foo'])
+          },
+        }
+      `,
+      languageOptions
     },
     {
       filename: 'test.js',
@@ -118,14 +136,14 @@ ruleTester.run('order-in-components', rule, {
           }
         })
       `,
-      parserOptions: { ecmaVersion: 6 }
+      languageOptions: { ecmaVersion: 6 }
     },
     {
       filename: 'test.js',
       code: `
         Vue.component('example')
       `,
-      parserOptions: { ecmaVersion: 6 }
+      languageOptions: { ecmaVersion: 6 }
     },
     {
       filename: 'test.js',
@@ -141,7 +159,7 @@ ruleTester.run('order-in-components', rule, {
           }
         })
       `,
-      parserOptions: { ecmaVersion: 6 }
+      languageOptions: { ecmaVersion: 6 }
     },
     {
       filename: 'test.js',
@@ -157,14 +175,26 @@ ruleTester.run('order-in-components', rule, {
           }
         })
       `,
-      parserOptions: { ecmaVersion: 6 }
+      languageOptions: { ecmaVersion: 6 }
     },
     {
       filename: 'test.js',
       code: `
         new Vue()
       `,
-      parserOptions: { ecmaVersion: 6 }
+      languageOptions: { ecmaVersion: 6 }
+    },
+    {
+      filename: 'example.vue',
+      code: `
+      <script setup>
+        defineOptions({
+          name: 'Foo',
+          inheritAttrs: true,
+        })
+      </script>
+      `,
+      languageOptions: { parser: require('vue-eslint-parser') }
     }
   ],
 
@@ -184,7 +214,6 @@ ruleTester.run('order-in-components', rule, {
           },
         }
       `,
-      parserOptions,
       output: `
         export default {
           name: 'app',
@@ -198,6 +227,7 @@ ruleTester.run('order-in-components', rule, {
           },
         }
       `,
+      languageOptions,
       errors: [
         {
           message:
@@ -206,6 +236,84 @@ ruleTester.run('order-in-components', rule, {
         }
       ]
     },
+    {
+      filename: 'test.vue',
+      code: `
+        import { defineComponent } from 'vue'
+        export default defineComponent({
+          name: 'app',
+          data () {
+            return {
+              msg: 'Welcome to Your Vue.js App'
+            }
+          },
+          props: {
+            propA: Number,
+          },
+        })
+      `,
+      output: `
+        import { defineComponent } from 'vue'
+        export default defineComponent({
+          name: 'app',
+          props: {
+            propA: Number,
+          },
+          data () {
+            return {
+              msg: 'Welcome to Your Vue.js App'
+            }
+          },
+        })
+      `,
+      languageOptions,
+      errors: [
+        {
+          message:
+            'The "props" property should be above the "data" property on line 5.',
+          line: 10
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        import { defineNuxtComponent } from '#app'
+        export default defineNuxtComponent({
+          name: 'app',
+          data () {
+            return {
+              msg: 'Welcome to Your Vue.js App'
+            }
+          },
+          props: {
+            propA: Number,
+          },
+        })
+      `,
+      output: `
+        import { defineNuxtComponent } from '#app'
+        export default defineNuxtComponent({
+          name: 'app',
+          props: {
+            propA: Number,
+          },
+          data () {
+            return {
+              msg: 'Welcome to Your Vue.js App'
+            }
+          },
+        })
+      `,
+      languageOptions,
+      errors: [
+        {
+          message:
+            'The "props" property should be above the "data" property on line 5.',
+          line: 10
+        }
+      ]
+    },
     {
       filename: 'test.jsx',
       code: `
@@ -226,11 +334,6 @@ ruleTester.run('order-in-components', rule, {
           },
         }
       `,
-      parserOptions: {
-        ecmaVersion: 6,
-        sourceType: 'module',
-        ecmaFeatures: { jsx: true }
-      },
       output: `
         export default {
           name: 'app',
@@ -249,6 +352,13 @@ ruleTester.run('order-in-components', rule, {
           },
         }
       `,
+      languageOptions: {
+        ecmaVersion: 6,
+        sourceType: 'module',
+        parserOptions: {
+          ecmaFeatures: { jsx: true }
+        }
+      },
       errors: [
         {
           message:
@@ -281,7 +391,6 @@ ruleTester.run('order-in-components', rule, {
           template: '<div></div>'
         })
       `,
-      parserOptions: { ecmaVersion: 6 },
       output: `
         Vue.component('smart-list', {
           name: 'app',
@@ -294,6 +403,7 @@ ruleTester.run('order-in-components', rule, {
           template: '<div></div>'
         })
       `,
+      languageOptions: { ecmaVersion: 6 },
       errors: [
         {
           message:
@@ -316,7 +426,6 @@ ruleTester.run('order-in-components', rule, {
           template: '<div></div>'
         })
       `,
-      parserOptions: { ecmaVersion: 6 },
       output: `
         app.component('smart-list', {
           name: 'app',
@@ -329,6 +438,7 @@ ruleTester.run('order-in-components', rule, {
           template: '<div></div>'
         })
       `,
+      languageOptions: { ecmaVersion: 6 },
       errors: [
         {
           message:
@@ -352,7 +462,6 @@ ruleTester.run('order-in-components', rule, {
           template: '<div></div>'
         })
       `,
-      parserOptions: { ecmaVersion: 6 },
       output: `
         const { component } = Vue;
         component('smart-list', {
@@ -366,6 +475,7 @@ ruleTester.run('order-in-components', rule, {
           template: '<div></div>'
         })
       `,
+      languageOptions: { ecmaVersion: 6 },
       errors: [
         {
           message:
@@ -389,7 +499,6 @@ ruleTester.run('order-in-components', rule, {
           template: '<div></div>'
         })
       `,
-      parserOptions: { ecmaVersion: 6 },
       output: `
         new Vue({
           el: '#app',
@@ -403,6 +512,7 @@ ruleTester.run('order-in-components', rule, {
           template: '<div></div>'
         })
       `,
+      languageOptions: { ecmaVersion: 6 },
       errors: [
         {
           message:
@@ -436,7 +546,6 @@ ruleTester.run('order-in-components', rule, {
           name: 'burger',
         };
       `,
-      parserOptions,
       output: `
         export default {
           name: 'burger',
@@ -455,6 +564,7 @@ ruleTester.run('order-in-components', rule, {
           },
         };
       `,
+      languageOptions,
       errors: [
         {
           message:
@@ -473,7 +583,6 @@ ruleTester.run('order-in-components', rule, {
           test: 'ok'
         };
       `,
-      parserOptions,
       output: `
         export default {
           data() {
@@ -483,6 +592,7 @@ ruleTester.run('order-in-components', rule, {
         };
       `,
       options: [{ order: ['data', 'test', 'name'] }],
+      languageOptions,
       errors: [
         {
           message:
@@ -502,7 +612,6 @@ ruleTester.run('order-in-components', rule, {
           name: 'burger'
         };
       `,
-      parserOptions,
       output: `
         export default {
           /** name of vue component */
@@ -512,6 +621,7 @@ ruleTester.run('order-in-components', rule, {
           }
         };
       `,
+      languageOptions,
       errors: [
         {
           message:
@@ -531,7 +641,6 @@ ruleTester.run('order-in-components', rule, {
           name: 'burger'
         };
       `,
-      parserOptions,
       output: `
         export default {
           /** name of vue component */
@@ -541,6 +650,7 @@ ruleTester.run('order-in-components', rule, {
           }/*test*/
         };
       `,
+      languageOptions,
       errors: [
         {
           message:
@@ -552,8 +662,8 @@ ruleTester.run('order-in-components', rule, {
     {
       filename: 'example.vue',
       code: `export default {data(){},name:'burger'};`,
-      parserOptions,
       output: `export default {name:'burger',data(){}};`,
+      languageOptions,
       errors: [
         {
           message:
@@ -573,13 +683,26 @@ ruleTester.run('order-in-components', rule, {
           name: 'burger',
         };
       `,
-      parserOptions,
       output: null,
+      languageOptions,
       errors: [
         {
           message:
             'The "name" property should be above the "data" property on line 3.',
-          line: 6
+          line: 6,
+          suggestions: [
+            {
+              desc: 'Manually move "name" property above "data" property on line 3 (might break side effects).',
+              output: `
+        export default {
+          name: 'burger',
+          data() {
+          },
+          test: obj.fn(),
+        };
+      `
+            }
+          ]
         }
       ]
     },
@@ -594,13 +717,26 @@ ruleTester.run('order-in-components', rule, {
           name: 'burger',
         };
       `,
-      parserOptions,
       output: null,
+      languageOptions,
       errors: [
         {
           message:
             'The "name" property should be above the "data" property on line 3.',
-          line: 6
+          line: 6,
+          suggestions: [
+            {
+              desc: 'Manually move "name" property above "data" property on line 3 (might break side effects).',
+              output: `
+        export default {
+          name: 'burger',
+          data() {
+          },
+          test: new MyClass(),
+        };
+      `
+            }
+          ]
         }
       ]
     },
@@ -615,13 +751,26 @@ ruleTester.run('order-in-components', rule, {
           name: 'burger',
         };
       `,
-      parserOptions,
       output: null,
+      languageOptions,
       errors: [
         {
           message:
             'The "name" property should be above the "data" property on line 3.',
-          line: 6
+          line: 6,
+          suggestions: [
+            {
+              desc: 'Manually move "name" property above "data" property on line 3 (might break side effects).',
+              output: `
+        export default {
+          name: 'burger',
+          data() {
+          },
+          test: i++,
+        };
+      `
+            }
+          ]
         }
       ]
     },
@@ -636,13 +785,26 @@ ruleTester.run('order-in-components', rule, {
           name: 'burger',
         };
       `,
-      parserOptions,
       output: null,
+      languageOptions,
       errors: [
         {
           message:
             'The "name" property should be above the "data" property on line 3.',
-          line: 6
+          line: 6,
+          suggestions: [
+            {
+              desc: 'Manually move "name" property above "data" property on line 3 (might break side effects).',
+              output: `
+        export default {
+          name: 'burger',
+          data() {
+          },
+          test: i = 0,
+        };
+      `
+            }
+          ]
         }
       ]
     },
@@ -657,13 +819,26 @@ ruleTester.run('order-in-components', rule, {
           name: 'burger',
         };
       `,
-      parserOptions,
       output: null,
+      languageOptions,
       errors: [
         {
           message:
             'The "name" property should be above the "data" property on line 3.',
-          line: 6
+          line: 6,
+          suggestions: [
+            {
+              desc: 'Manually move "name" property above "data" property on line 3 (might break side effects).',
+              output: `
+        export default {
+          name: 'burger',
+          data() {
+          },
+          test: template\`\${foo}\`,
+        };
+      `
+            }
+          ]
         }
       ]
     },
@@ -678,13 +853,26 @@ ruleTester.run('order-in-components', rule, {
           name: 'burger',
         };
       `,
-      parserOptions,
       output: null,
+      languageOptions,
       errors: [
         {
           message:
             'The "name" property should be above the "data" property on line 3.',
-          line: 6
+          line: 6,
+          suggestions: [
+            {
+              desc: 'Manually move "name" property above "data" property on line 3 (might break side effects).',
+              output: `
+        export default {
+          name: 'burger',
+          data() {
+          },
+          [obj.fn()]: 'test',
+        };
+      `
+            }
+          ]
         }
       ]
     },
@@ -699,13 +887,26 @@ ruleTester.run('order-in-components', rule, {
           name: 'burger',
         };
       `,
-      parserOptions,
       output: null,
+      languageOptions,
       errors: [
         {
           message:
             'The "name" property should be above the "data" property on line 3.',
-          line: 6
+          line: 6,
+          suggestions: [
+            {
+              desc: 'Manually move "name" property above "data" property on line 3 (might break side effects).',
+              output: `
+        export default {
+          name: 'burger',
+          data() {
+          },
+          test: {test: obj.fn()},
+        };
+      `
+            }
+          ]
         }
       ]
     },
@@ -720,13 +921,26 @@ ruleTester.run('order-in-components', rule, {
           name: 'burger',
         };
       `,
-      parserOptions,
       output: null,
+      languageOptions,
       errors: [
         {
           message:
             'The "name" property should be above the "data" property on line 3.',
-          line: 6
+          line: 6,
+          suggestions: [
+            {
+              desc: 'Manually move "name" property above "data" property on line 3 (might break side effects).',
+              output: `
+        export default {
+          name: 'burger',
+          data() {
+          },
+          test: [obj.fn(), 1],
+        };
+      `
+            }
+          ]
         }
       ]
     },
@@ -741,13 +955,26 @@ ruleTester.run('order-in-components', rule, {
           name: 'burger',
         };
       `,
-      parserOptions,
       output: null,
+      languageOptions,
       errors: [
         {
           message:
             'The "name" property should be above the "data" property on line 3.',
-          line: 6
+          line: 6,
+          suggestions: [
+            {
+              desc: 'Manually move "name" property above "data" property on line 3 (might break side effects).',
+              output: `
+        export default {
+          name: 'burger',
+          data() {
+          },
+          test: obj.fn().prop,
+        };
+      `
+            }
+          ]
         }
       ]
     },
@@ -762,13 +989,26 @@ ruleTester.run('order-in-components', rule, {
           name: 'burger',
         };
       `,
-      parserOptions,
       output: null,
+      languageOptions,
       errors: [
         {
           message:
             'The "name" property should be above the "data" property on line 3.',
-          line: 6
+          line: 6,
+          suggestions: [
+            {
+              desc: 'Manually move "name" property above "data" property on line 3 (might break side effects).',
+              output: `
+        export default {
+          name: 'burger',
+          data() {
+          },
+          test: delete obj.prop,
+        };
+      `
+            }
+          ]
         }
       ]
     },
@@ -783,13 +1023,26 @@ ruleTester.run('order-in-components', rule, {
           name: 'burger',
         };
       `,
-      parserOptions,
       output: null,
+      languageOptions,
       errors: [
         {
           message:
             'The "name" property should be above the "data" property on line 3.',
-          line: 6
+          line: 6,
+          suggestions: [
+            {
+              desc: 'Manually move "name" property above "data" property on line 3 (might break side effects).',
+              output: `
+        export default {
+          name: 'burger',
+          data() {
+          },
+          test: fn() + a + b,
+        };
+      `
+            }
+          ]
         }
       ]
     },
@@ -804,13 +1057,26 @@ ruleTester.run('order-in-components', rule, {
           name: 'burger',
         };
       `,
-      parserOptions,
       output: null,
+      languageOptions,
       errors: [
         {
           message:
             'The "name" property should be above the "data" property on line 3.',
-          line: 6
+          line: 6,
+          suggestions: [
+            {
+              desc: 'Manually move "name" property above "data" property on line 3 (might break side effects).',
+              output: `
+        export default {
+          name: 'burger',
+          data() {
+          },
+          test: a ? fn() : null,
+        };
+      `
+            }
+          ]
         }
       ]
     },
@@ -825,13 +1091,62 @@ ruleTester.run('order-in-components', rule, {
           name: 'burger',
         };
       `,
-      parserOptions,
       output: null,
+      languageOptions,
       errors: [
         {
           message:
             'The "name" property should be above the "data" property on line 3.',
-          line: 6
+          line: 6,
+          suggestions: [
+            {
+              desc: 'Manually move "name" property above "data" property on line 3 (might break side effects).',
+              output: `
+        export default {
+          name: 'burger',
+          data() {
+          },
+          test: \`test \${fn()} \${a}\`,
+        };
+      `
+            }
+          ]
+        }
+      ]
+    },
+    {
+      // side-effects https://github.com/vuejs/eslint-plugin-vue/issues/2418
+      filename: 'example.vue',
+      code: `
+        export default {
+          computed: {
+            ...mapStates(['foo'])
+          },
+          data() {
+          },
+        };
+      `,
+      output: null,
+      languageOptions,
+      errors: [
+        {
+          message:
+            'The "data" property should be above the "computed" property on line 3.',
+          line: 6,
+          suggestions: [
+            {
+              desc: 'Manually move "data" property above "computed" property on line 3 (might break side effects).',
+              output: `
+        export default {
+          data() {
+          },
+          computed: {
+            ...mapStates(['foo'])
+          },
+        };
+      `
+            }
+          ]
         }
       ]
     },
@@ -846,7 +1161,6 @@ ruleTester.run('order-in-components', rule, {
           test: fn(),
         };
       `,
-      parserOptions,
       output: `
         export default {
           name: 'burger',
@@ -855,6 +1169,7 @@ ruleTester.run('order-in-components', rule, {
           test: fn(),
         };
       `,
+      languageOptions,
       errors: [
         {
           message:
@@ -883,7 +1198,6 @@ ruleTester.run('order-in-components', rule, {
           name: 'burger',
         };
       `,
-      parserOptions,
       output: `
         export default {
           name: 'burger',
@@ -901,6 +1215,7 @@ ruleTester.run('order-in-components', rule, {
           testOptionalChaining: a?.b?.c,
         };
       `,
+      languageOptions,
       errors: [
         {
           message:
@@ -908,6 +1223,125 @@ ruleTester.run('order-in-components', rule, {
           line: 15
         }
       ]
+    },
+    {
+      filename: 'example.vue',
+      code: `
+        <script lang="ts">
+          export default {
+            setup () {},
+            props: {
+              foo: { type: Array as PropType<number[]> },
+            },
+          };
+        </script>
+      `,
+      output: `
+        <script lang="ts">
+          export default {
+            props: {
+              foo: { type: Array as PropType<number[]> },
+            },
+            setup () {},
+          };
+        </script>
+      `,
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions,
+        parserOptions: {
+          parser: { ts: require.resolve('@typescript-eslint/parser') }
+        }
+      },
+      errors: [
+        {
+          message:
+            'The "props" property should be above the "setup" property on line 4.',
+          line: 5
+        }
+      ]
+    },
+    {
+      filename: 'example.vue',
+      code: `
+      <script setup>
+        defineOptions({
+          inheritAttrs: true,
+          name: 'Foo',
+        })
+      </script>
+      `,
+      output: `
+      <script setup>
+        defineOptions({
+          name: 'Foo',
+          inheritAttrs: true,
+        })
+      </script>
+      `,
+      languageOptions: { parser: require('vue-eslint-parser') },
+      errors: [
+        {
+          message:
+            'The "name" property should be above the "inheritAttrs" property on line 4.',
+          line: 5
+        }
+      ]
+    },
+    {
+      filename: 'example.vue',
+      code: `
+        export default {
+          setup,
+          slots,
+          expose,
+        };
+      `,
+      output: `
+        export default {
+          slots,
+          setup,
+          expose,
+        };
+      `,
+      languageOptions,
+      errors: [
+        {
+          message:
+            'The "slots" property should be above the "setup" property on line 3.',
+          line: 4
+        },
+        {
+          message:
+            'The "expose" property should be above the "setup" property on line 3.',
+          line: 5
+        }
+      ]
+    },
+    {
+      filename: 'example.vue',
+      code: `
+        export default {
+          slots,
+          setup,
+          expose,
+        };
+      `,
+      output: `
+        export default {
+          slots,
+          expose,
+          setup,
+        };
+      `,
+      languageOptions,
+      errors: [
+        {
+          message:
+            'The "expose" property should be above the "setup" property on line 4.',
+          line: 5
+        }
+      ]
     }
   ]
 })
diff --git a/tests/lib/rules/padding-line-between-blocks.js b/tests/lib/rules/padding-line-between-blocks.js
index 622839bdc..e78422e87 100644
--- a/tests/lib/rules/padding-line-between-blocks.js
+++ b/tests/lib/rules/padding-line-between-blocks.js
@@ -3,12 +3,11 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/padding-line-between-blocks')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2020 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2020 }
 })
 
 tester.run('padding-line-between-blocks', rule, {
@@ -125,12 +124,12 @@ tester.run('padding-line-between-blocks', rule, {
 
       <style></style>
       `,
-      options: ['never'],
       output: `
       <template></template>
       <script></script>
       <style></style>
       `,
+      options: ['never'],
       errors: [
         {
           message: 'Unexpected blank line before this block.',
@@ -214,7 +213,6 @@ tester.run('padding-line-between-blocks', rule, {
       <!-- comment -->
       <i18n></i18n>
       `,
-      options: ['never'],
       output: `
       <template></template>
       <!-- comment -->
@@ -225,6 +223,7 @@ tester.run('padding-line-between-blocks', rule, {
       <!-- comment -->
       <i18n></i18n>
       `,
+      options: ['never'],
       errors: [
         {
           message: 'Unexpected blank line before this block.',
@@ -290,7 +289,6 @@ tester.run('padding-line-between-blocks', rule, {
 
       <style></style>
       `,
-      options: ['never'],
       output: `
       <script></script>
       <!-- comment -->
@@ -304,6 +302,7 @@ tester.run('padding-line-between-blocks', rule, {
       TEXT
       <style></style>
       `,
+      options: ['never'],
       errors: [
         {
           message: 'Unexpected blank line before this block.',
diff --git a/tests/lib/rules/padding-line-between-tags.js b/tests/lib/rules/padding-line-between-tags.js
new file mode 100644
index 000000000..2bb656201
--- /dev/null
+++ b/tests/lib/rules/padding-line-between-tags.js
@@ -0,0 +1,1301 @@
+/**
+ * @author dev1437
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/padding-line-between-tags')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('padding-line-between-tags', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <div />
+
+          <div />
+
+          <br/>
+          <br/>
+          <br/>
+          <br/>
+          <br/>
+          <br/>
+
+          <div />
+
+          <div />
+        </div>
+      </template>
+      `,
+      options: [
+        [
+          { blankLine: 'consistent', prev: '*', next: '*' },
+          { blankLine: 'never', prev: 'br', next: 'br' }
+        ]
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <div />
+        </div>
+      </template>
+      `,
+      options: [[{ blankLine: 'consistent', prev: '*', next: '*' }]]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <div />
+
+          <div />
+        </div>
+      </template>
+      `,
+      options: [[{ blankLine: 'consistent', prev: '*', next: '*' }]]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <header>
+          <div></div>
+
+          <div></div>
+
+          <div></div>
+        </header>
+        <div></div>
+        <div />
+        <footer></footer>
+      </template>
+      `,
+      options: [[{ blankLine: 'consistent', prev: '*', next: '*' }]]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <header>
+          <div></div>
+          <div></div>
+          <div></div>
+        </header>
+
+        <div></div>
+
+        <div />
+
+        <footer></footer>
+      </template>
+      `,
+      options: [[{ blankLine: 'consistent', prev: '*', next: '*' }]]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <div></div>
+
+          <div>
+          </div>
+
+          <div />
+        </div>
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <p>Foo <b>bar</b> baz.</p>
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <div></div>
+          <div>
+          </div>
+          <div />
+        </div>
+      </template>
+      `,
+      options: [[{ blankLine: 'never', prev: '*', next: '*' }]]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <ul>
+            <li>
+            </li>
+            <br />
+            <li>
+            </li>
+          </ul>
+        </div>
+      </template>
+      `,
+      options: [
+        [
+          { blankLine: 'always', prev: '*', next: '*' },
+          { blankLine: 'never', prev: '*', next: 'br' },
+          { blankLine: 'never', prev: 'br', next: '*' }
+        ]
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <ul>
+            <li>
+            </li>
+
+            <br />
+            <div></div>
+
+            <li>
+            </li>
+          </ul>
+        </div>
+      </template>
+      `,
+      options: [
+        [
+          { blankLine: 'always', prev: '*', next: '*' },
+          { blankLine: 'never', prev: 'br', next: 'div' }
+        ]
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <ul>
+            <li>
+            </li>
+            <br />
+
+            <div></div>
+            <li>
+            </li>
+          </ul>
+        </div>
+      </template>
+      `,
+      options: [
+        [
+          { blankLine: 'never', prev: '*', next: '*' },
+          { blankLine: 'always', prev: 'br', next: 'div' }
+        ]
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <ul>
+            <li>
+            </li>
+            <br />
+
+            <img />
+            <li>
+            </li>
+          </ul>
+        </div>
+      </template>
+      `,
+      options: [[{ blankLine: 'always', prev: 'br', next: 'img' }]]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+      </template>
+      <script>
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <ul>
+            <li>
+            </li>
+            <br />
+
+            <img />
+            <li>
+            </li>
+          </ul>
+        </div>
+      </template>
+      `,
+      options: [
+        [
+          { blankLine: 'never', prev: 'br', next: 'img' },
+          { blankLine: 'always', prev: 'br', next: 'img' }
+        ]
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          </div>A
+          B
+          C<div />
+        </div>
+      </template>
+      `,
+      options: [[{ blankLine: 'never', prev: '*', next: '*' }]]
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <div></div>
+          <div>
+          </div>
+          <div />
+        </div>
+      </template>
+      `,
+      output: `
+      <template>
+        <div>
+          <div></div>
+
+          <div>
+          </div>
+
+          <div />
+        </div>
+      </template>
+      `,
+      errors: [
+        {
+          message: 'Expected blank line before this tag.',
+          line: 5,
+          column: 11
+        },
+        {
+          message: 'Expected blank line before this tag.',
+          line: 7,
+          column: 11
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <ul>
+            <li>
+            </li>
+            <li>
+            </li>
+            <br />
+            <li>
+            </li>
+          </ul>
+        </div>
+      </template>
+      `,
+      output: `
+      <template>
+        <div>
+          <ul>
+            <li>
+            </li>
+
+            <li>
+            </li>
+
+            <br />
+
+            <li>
+            </li>
+          </ul>
+        </div>
+      </template>
+      `,
+      errors: [
+        {
+          message: 'Expected blank line before this tag.',
+          line: 7,
+          column: 13
+        },
+        {
+          message: 'Expected blank line before this tag.',
+          line: 9,
+          column: 13
+        },
+        {
+          message: 'Expected blank line before this tag.',
+          line: 10,
+          column: 13
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <ul>
+          </ul>
+          <ul>
+            <li>
+              Test Text
+            </li>
+          </ul>
+        </div>
+      </template>
+      `,
+      output: `
+      <template>
+        <div>
+          <ul>
+          </ul>
+
+          <ul>
+            <li>
+              Test Text
+            </li>
+          </ul>
+        </div>
+      </template>
+      `,
+      errors: [
+        {
+          message: 'Expected blank line before this tag.',
+          line: 6,
+          column: 11
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <ul>
+          </ul>
+          <ul>
+            <li>
+              <p>
+              </p>
+              <p>
+              </p>
+            </li>
+          </ul>
+        </div>
+        <div>
+        </div>
+      </template>
+      `,
+      output: `
+      <template>
+        <div>
+          <ul>
+          </ul>
+
+          <ul>
+            <li>
+              <p>
+              </p>
+
+              <p>
+              </p>
+            </li>
+          </ul>
+        </div>
+
+        <div>
+        </div>
+      </template>
+      `,
+      errors: [
+        {
+          message: 'Expected blank line before this tag.',
+          line: 6,
+          column: 11
+        },
+        {
+          message: 'Expected blank line before this tag.',
+          line: 10,
+          column: 15
+        },
+        {
+          message: 'Expected blank line before this tag.',
+          line: 15,
+          column: 9
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <ul>
+            <li>
+            </li>
+            <br />
+            <li>
+            </li>
+          </ul>
+        </div>
+      </template>
+      `,
+      output: `
+      <template>
+        <div>
+          <ul>
+            <li>
+            </li>
+
+            <br />
+            <li>
+            </li>
+          </ul>
+        </div>
+      </template>
+      `,
+      options: [
+        [
+          { blankLine: 'always', prev: '*', next: '*' },
+          { blankLine: 'never', prev: 'br', next: '*' }
+        ]
+      ],
+      errors: [
+        {
+          message: 'Expected blank line before this tag.',
+          line: 7,
+          column: 13
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <ul>
+            <li>
+            </li>
+            <br />
+            <li>
+            </li>
+          </ul>
+        </div>
+      </template>
+      `,
+      output: `
+      <template>
+        <div>
+          <ul>
+            <li>
+            </li>
+            <br />
+
+            <li>
+            </li>
+          </ul>
+        </div>
+      </template>
+      `,
+      options: [
+        [
+          { blankLine: 'always', prev: '*', next: '*' },
+          { blankLine: 'never', prev: '*', next: 'br' }
+        ]
+      ],
+      errors: [
+        {
+          message: 'Expected blank line before this tag.',
+          line: 8,
+          column: 13
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <ul>
+            <li>
+            </li>
+
+
+            <br />
+
+            <li>
+            </li>
+          </ul>
+        </div>
+      </template>
+      `,
+      output: `
+      <template>
+        <div>
+          <ul>
+            <li>
+            </li>
+            <br />
+            <li>
+            </li>
+          </ul>
+        </div>
+      </template>
+      `,
+      options: [[{ blankLine: 'never', prev: '*', next: '*' }]],
+      errors: [
+        {
+          message: 'Unexpected blank line before this tag.',
+          line: 9,
+          column: 13
+        },
+        {
+          message: 'Unexpected blank line before this tag.',
+          line: 11,
+          column: 13
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <div></div>
+
+          <div>
+          </div>
+
+          <div />
+        </div>
+      </template>
+      `,
+      output: `
+      <template>
+        <div>
+          <div></div>
+          <div>
+          </div>
+          <div />
+        </div>
+      </template>
+      `,
+      options: [[{ blankLine: 'never', prev: '*', next: '*' }]],
+      errors: [
+        {
+          message: 'Unexpected blank line before this tag.',
+          line: 6,
+          column: 11
+        },
+        {
+          message: 'Unexpected blank line before this tag.',
+          line: 9,
+          column: 11
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <ul>
+            <li>
+            </li>
+            <br />
+            <div></div>
+            <li>
+            </li>
+          </ul>
+        </div>
+      </template>
+      `,
+      output: `
+      <template>
+        <div>
+          <ul>
+            <li>
+            </li>
+            <br />
+
+            <div></div>
+            <li>
+            </li>
+          </ul>
+        </div>
+      </template>
+      `,
+      options: [
+        [
+          { blankLine: 'never', prev: '*', next: '*' },
+          { blankLine: 'always', prev: 'br', next: 'div' }
+        ]
+      ],
+      errors: [
+        {
+          message: 'Expected blank line before this tag.',
+          line: 8,
+          column: 13
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <h1></h1>
+          <br />
+          <div></div>
+          <br />
+          <img />
+          <h1></h1>
+        </div>
+      </template>
+      `,
+      output: `
+      <template>
+        <div>
+          <h1></h1>
+
+          <br />
+          <div></div>
+
+          <br />
+          <img />
+
+          <h1></h1>
+        </div>
+      </template>
+      `,
+      options: [
+        [
+          { blankLine: 'always', prev: '*', next: '*' },
+          { blankLine: 'never', prev: 'br', next: 'div' },
+          { blankLine: 'never', prev: 'br', next: 'img' }
+        ]
+      ],
+      errors: [
+        {
+          message: 'Expected blank line before this tag.',
+          line: 5,
+          column: 11
+        },
+        {
+          message: 'Expected blank line before this tag.',
+          line: 7,
+          column: 11
+        },
+        {
+          message: 'Expected blank line before this tag.',
+          line: 9,
+          column: 11
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <img />
+          <br />
+
+          <div></div>
+          <br />
+          <ul></ul>
+        </div>
+      </template>
+      `,
+      output: `
+      <template>
+        <div>
+          <img />
+          <br />
+
+          <div></div>
+
+          <br />
+          <ul></ul>
+        </div>
+      </template>
+      `,
+      options: [
+        [
+          { blankLine: 'always', prev: 'br', next: 'div' },
+          { blankLine: 'always', prev: 'div', next: 'br' }
+        ]
+      ],
+      errors: [
+        {
+          message: 'Expected blank line before this tag.',
+          line: 8,
+          column: 11
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <img />
+          <br />
+
+          <div></div>
+          <br />
+          <br />
+        </div>
+      </template>
+      `,
+      output: `
+      <template>
+        <div>
+          <img />
+          <br />
+
+          <div></div>
+          <br />
+
+          <br />
+        </div>
+      </template>
+      `,
+      options: [
+        [
+          { blankLine: 'always', prev: 'br', next: 'div' },
+          { blankLine: 'always', prev: 'br', next: 'br' }
+        ]
+      ],
+      errors: [
+        {
+          message: 'Expected blank line before this tag.',
+          line: 9,
+          column: 11
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <img />
+          <br />
+
+          <div></div>
+          <br />
+
+          <br />
+        </div>
+      </template>
+      `,
+      output: `
+      <template>
+        <div>
+          <img />
+
+          <br />
+
+          <div></div>
+
+          <br />
+          <br />
+        </div>
+      </template>
+      `,
+      options: [
+        [
+          { blankLine: 'always', prev: '*', next: '*' },
+          { blankLine: 'never', prev: 'br', next: 'br' }
+        ]
+      ],
+      errors: [
+        {
+          message: 'Expected blank line before this tag.',
+          line: 5,
+          column: 11
+        },
+        {
+          message: 'Expected blank line before this tag.',
+          line: 8,
+          column: 11
+        },
+        {
+          message: 'Unexpected blank line before this tag.',
+          line: 10,
+          column: 11
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <img />
+          <br />
+
+          <div></div>
+
+          <br />
+
+          <br />
+        </div>
+      </template>
+      `,
+      output: `
+      <template>
+        <div>
+          <img />
+          <br />
+
+          <div></div>
+
+          <br />
+          <br />
+        </div>
+      </template>
+      `,
+      options: [[{ blankLine: 'never', prev: 'br', next: 'br' }]],
+      errors: [
+        {
+          message: 'Unexpected blank line before this tag.',
+          line: 11,
+          column: 11
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <div></div>
+          <div>
+          </div>
+          <br />
+          <div />
+        </div>
+      </template>
+      `,
+      output: `
+      <template>
+        <div>
+          <div></div>
+          <div>
+          </div>
+
+          <br />
+          <div />
+        </div>
+      </template>
+      `,
+      options: [[{ blankLine: 'always', prev: '*', next: 'br' }]],
+      errors: [
+        {
+          message: 'Expected blank line before this tag.',
+          line: 7,
+          column: 11
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <div /><div />
+        </div>
+      </template>
+      `,
+      output: `
+      <template>
+        <div>
+          <div />
+
+          <div />
+        </div>
+      </template>
+      `,
+      errors: [
+        {
+          message: 'Expected blank line before this tag.',
+          line: 4,
+          column: 18
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          Foo  <div /><div />
+        </div>
+      </template>
+      `,
+      output: `
+      <template>
+        <div>
+          Foo  <div />
+
+          <div />
+        </div>
+      </template>
+      `,
+      errors: [
+        {
+          message: 'Expected blank line before this tag.',
+          line: 4,
+          column: 23
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          </div>A
+
+          C<div />
+        </div>
+      </template>
+      `,
+      output: `
+      <template>
+        <div>
+          </div>A
+          C<div />
+        </div>
+      </template>
+      `,
+      options: [[{ blankLine: 'never', prev: '*', next: '*' }]],
+      errors: [
+        {
+          message: 'Unexpected blank line before this tag.',
+          line: 6,
+          column: 12
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          </div>A
+          B
+
+          C<div />
+        </div>
+      </template>
+      `,
+      output: `
+      <template>
+        <div>
+          </div>A
+          B
+          C<div />
+        </div>
+      </template>
+      `,
+      options: [[{ blankLine: 'never', prev: '*', next: '*' }]],
+      errors: [
+        {
+          message: 'Unexpected blank line before this tag.',
+          line: 7,
+          column: 12
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          </div>A
+
+
+          B
+          C<div />
+        </div>
+      </template>
+      `,
+      output: `
+      <template>
+        <div>
+          </div>A
+          B
+          C<div />
+        </div>
+      </template>
+      `,
+      options: [[{ blankLine: 'never', prev: '*', next: '*' }]],
+      errors: [
+        {
+          message: 'Unexpected blank line before this tag.',
+          line: 8,
+          column: 12
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          </div>A
+
+
+          B
+
+
+          C<div />
+        </div>
+      </template>
+      `,
+      output: `
+      <template>
+        <div>
+          </div>A
+          B
+          C<div />
+        </div>
+      </template>
+      `,
+      options: [[{ blankLine: 'never', prev: '*', next: '*' }]],
+      errors: [
+        {
+          message: 'Unexpected blank line before this tag.',
+          line: 10,
+          column: 12
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <header>
+          <div></div>
+
+          <div></div>
+          <div></div>
+        </header>
+        <div></div>
+        <div />
+        <footer></footer>
+      </template>
+      `,
+      output: `
+      <template>
+        <header>
+          <div></div>
+
+          <div></div>
+
+          <div></div>
+        </header>
+        <div></div>
+        <div />
+        <footer></footer>
+      </template>
+      `,
+      options: [[{ blankLine: 'consistent', prev: '*', next: '*' }]],
+      errors: [
+        {
+          message: 'Expected blank line before this tag.',
+          line: 7,
+          column: 11
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <header>
+          <div></div>
+
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+        </header>
+        <div></div>
+        <div />
+        <footer></footer>
+      </template>
+      `,
+      output: `
+      <template>
+        <header>
+          <div></div>
+
+          <div></div>
+
+          <div></div>
+
+          <div></div>
+
+          <div></div>
+        </header>
+        <div></div>
+        <div />
+        <footer></footer>
+      </template>
+      `,
+      options: [[{ blankLine: 'consistent', prev: '*', next: '*' }]],
+      errors: [
+        {
+          message: 'Expected blank line before this tag.',
+          line: 7,
+          column: 11
+        },
+        {
+          message: 'Expected blank line before this tag.',
+          line: 8,
+          column: 11
+        },
+        {
+          message: 'Expected blank line before this tag.',
+          line: 9,
+          column: 11
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <div />
+          <div />
+
+          <br/>
+          <br/>
+
+          <div />
+          <div />
+
+          <div />
+          <div />
+        </div>
+      </template>
+      `,
+      output: `
+      <template>
+        <div>
+          <div />
+          <div />
+          <br/>
+          <br/>
+          <div />
+          <div />
+          <div />
+          <div />
+        </div>
+      </template>
+      `,
+      options: [
+        [
+          { blankLine: 'consistent', prev: '*', next: '*' },
+          { blankLine: 'never', prev: 'br', next: 'br' }
+        ]
+      ],
+      errors: [
+        {
+          message: 'Unexpected blank line before this tag.',
+          line: 7,
+          column: 11
+        },
+        {
+          message: 'Unexpected blank line before this tag.',
+          line: 10,
+          column: 11
+        },
+        {
+          message: 'Unexpected blank line before this tag.',
+          line: 13,
+          column: 11
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <div />
+          <div />
+
+          <div />
+        </div>
+      </template>
+      `,
+      output: `
+      <template>
+        <div>
+          <div />
+          <div />
+          <div />
+        </div>
+      </template>
+      `,
+      options: [[{ blankLine: 'consistent', prev: '*', next: '*' }]],
+      errors: [
+        {
+          message: 'Unexpected blank line before this tag.',
+          line: 7,
+          column: 11
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/padding-lines-in-component-definition.js b/tests/lib/rules/padding-lines-in-component-definition.js
new file mode 100644
index 000000000..702897431
--- /dev/null
+++ b/tests/lib/rules/padding-lines-in-component-definition.js
@@ -0,0 +1,1291 @@
+/**
+ * @author ItMaga
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/padding-lines-in-component-definition')
+const {
+  getTypeScriptFixtureTestOptions
+} = require('../../test-utils/typescript')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('padding-lines-in-component-definition', rule, {
+  valid: [
+    {
+      filename: 'Never.vue',
+      code: `
+        <script>
+          export default {
+            name: 'Never',
+            props: {
+                foo: {
+                    type: String,
+                    required: true,
+                },
+                bar: {
+                    type: Number,
+                    required: true,
+                },
+            },
+            data() {
+                return {
+                    title: '',
+                    message: '',
+                };
+            },
+            customOption: 'custom'
+          };
+        </script>
+      `,
+      options: ['never']
+    },
+    {
+      filename: 'Setup.vue',
+      code: `
+        import { ref, defineComponent } from 'vue';
+        <script>
+        export default defineComponent({
+            name: 'Setup',
+            setup() {
+                const foo = ref('');
+                const bar = ref('');
+
+                return { foo, bar };
+            }
+        })
+        </script>
+      `,
+      options: ['never']
+    },
+    {
+      filename: 'BetweenOptionsNever.vue',
+      code: `
+        import { defineComponent } from 'vue';
+        <script>
+        export default defineComponent({
+            name: 'BetweenOptionsNever',
+            props: {
+                foo: {
+                    type: String,
+                    required: true,
+                },
+                bar: {
+                    type: Number,
+                    required: true,
+                },
+            }
+        })
+        </script>
+      `,
+      options: [
+        {
+          betweenOptions: 'never',
+          withinOption: 'never'
+        }
+      ]
+    },
+    {
+      filename: 'GroupSingleLineProperties.vue',
+      code: `
+        import { defineComponent } from 'vue';
+        <script>
+        export default defineComponent({
+            name: 'GroupSingleLineProperties',
+            inheritAttrs: false,
+
+            props: {
+                foo: String,
+                bar: Number
+            }
+        })
+        </script>
+      `,
+      options: [
+        {
+          betweenOptions: 'always',
+          withinOption: 'never',
+          groupSingleLineProperties: true
+        }
+      ]
+    },
+    {
+      filename: 'WithinOption.vue',
+      code: `
+        import { defineComponent } from 'vue';
+        <script>
+        export default defineComponent({
+            name: 'WithinOption',
+
+            props: {
+                foo: {
+                    type: String,
+
+                    required: true,
+                },
+                bar: {
+                    type: Number,
+
+                    required: true,
+                },
+            },
+
+            data: () => ({
+                title: '',
+
+                message: '',
+            }),
+        })
+        </script>
+      `,
+      options: [
+        {
+          betweenOptions: 'always',
+          withinOption: {
+            props: {
+              betweenItems: 'never',
+              withinEach: 'always'
+            },
+            data: {
+              betweenItems: 'always',
+              withinEach: 'never'
+            }
+          }
+        }
+      ]
+    },
+    {
+      filename: 'CustomOptions.vue',
+      code: `
+        <script>
+        export default {
+            name: 'CustomOptions',
+
+            props: {
+                foo: {
+                    type: String,
+                    required: true,
+                },
+
+                bar: {
+                    type: Number,
+                    required: true,
+                },
+            },
+
+            customOption: {
+                getString() {
+                    return '1';
+                },
+
+                getNumber: () => 1,
+            },
+
+            data: () => ({
+                title: '',
+
+                message: '',
+            }),
+        }
+        </script>
+      `,
+      options: [
+        {
+          betweenOptions: 'always',
+          withinOption: {
+            props: {
+              betweenItems: 'always',
+              withinEach: 'never'
+            },
+            customOption: {
+              betweenItems: 'always'
+            }
+          }
+        }
+      ]
+    },
+    {
+      filename: 'NewVue.js',
+      code: `
+        new Vue({
+          name: 'NewVue',
+          inheritAttrs: false,
+          props: {
+              foo: {
+                  type: String,
+                  required: true,
+              },
+              bar: {
+                  type: String,
+                  required: true,
+              }
+          },
+          customOption: {
+              getString() { return '1' },
+              getNumber: () => 1,
+          },
+        })
+      `,
+      options: ['never']
+    },
+    {
+      filename: 'Mixin.js',
+      code: `
+        Vue.mixin({
+          name: 'Mixin',
+          inheritAttrs: false,
+          props: {
+              foo: {
+                  type: String,
+                  required: true,
+              },
+              bar: {
+                  type: String,
+                  required: true,
+              }
+          },
+          customOption: {
+              getString() { return '1' },
+              getNumber: () => 1,
+          },
+        })
+      `,
+      options: [
+        {
+          betweenOptions: 'never',
+          withinOption: 'ignore',
+          groupSingleLineProperties: true
+        }
+      ]
+    },
+    {
+      filename: 'DefineProps.vue',
+      code: `
+        import { defineProps } from 'vue'
+        <script setup>
+        const props = defineProps({
+            foo: {
+                type: String,
+                required: true,
+            },
+            bar: {
+                type: String,
+                required: true,
+            },
+        })
+        </script>
+      `,
+      options: ['never']
+    },
+    {
+      filename: 'DefineEmits.vue',
+      code: `
+        import { defineEmits } from 'vue'
+        <script setup>
+        const emits = defineEmits(['foo', 'bar']);
+        const emitsObject = defineEmits({
+          change: (id) => typeof id == 'number',
+
+          update: (value) => typeof value == 'string'
+        })
+        </script>
+      `,
+      options: [
+        {
+          betweenOptions: 'always',
+          withinOption: {
+            emits: {
+              betweenItems: 'always'
+            }
+          },
+          groupSingleLineProperties: false
+        }
+      ]
+    },
+    {
+      filename: 'Comment.vue',
+      code: `
+        <script>
+        export default {
+            name: 'Comment',
+
+            props: {
+                a: {
+                    type: String,
+                },
+
+                /** JSDoc */
+                b: {
+                    type: String,
+                },
+
+                // single
+                c: {
+                    type: String,
+                },
+
+                /* block */
+                d: String,
+                /* block */
+                f: String
+            }
+        }
+        </script>
+      `,
+      options: ['always']
+    },
+    {
+      filename: 'Spread.vue',
+      code: `
+        <script>
+        export default {
+            name: 'Spread',
+            ...spread,
+            props: {
+                a: {
+                    type: String,
+                },
+                ...lost,
+                b: {
+                    type: String,
+                }
+            }
+        }
+        </script>
+      `,
+      options: ['never']
+    },
+    {
+      filename: 'SpreadWithComment.vue',
+      code: `
+        <script>
+        export default {
+            name: 'Spread',
+            // comment
+            ...spread,
+
+            props: {
+                a: {
+                    type: String,
+                },
+
+                // comment
+                ...lost,
+
+                b: {
+                    type: String,
+                }
+            }
+        }
+        </script>
+      `,
+      options: ['always']
+    },
+    {
+      filename: 'MyComment.vue',
+      code: `
+        <script setup>
+        defineOptions({
+            name: 'MyComment',
+
+            inheritAttrs: false,
+        })
+        </script>
+      `,
+      options: [{ betweenOptions: 'always', groupSingleLineProperties: false }]
+    },
+    {
+      code: `
+      <script setup lang="ts">
+      import {Props1 as Props} from './test01'
+      defineProps<Props>()
+      </script>`,
+      ...getTypeScriptFixtureTestOptions()
+    }
+  ],
+  invalid: [
+    {
+      filename: 'Always.vue',
+      code: `
+      <script>
+          export default {
+            name: 'Always',
+            props: {
+                foo: {
+                    type: String,
+                    required: true,
+                },
+                bar: {
+                    type: Number,
+                    required: true,
+                },
+            },
+            data() {
+                return {
+                    title: '',
+                    message: '',
+                };
+            },
+          };
+      </script>
+      `,
+      output: `
+      <script>
+          export default {
+            name: 'Always',
+
+            props: {
+                foo: {
+                    type: String,
+                    required: true,
+                },
+
+                bar: {
+                    type: Number,
+                    required: true,
+                },
+            },
+
+            data() {
+                return {
+                    title: '',
+                    message: '',
+                };
+            },
+          };
+      </script>
+      `,
+      options: ['always'],
+      errors: [
+        {
+          message: 'Expected blank line before this definition.',
+          line: 5
+        },
+        {
+          message: 'Expected blank line before this definition.',
+          line: 10
+        },
+        {
+          message: 'Expected blank line before this definition.',
+          line: 15
+        }
+      ]
+    },
+    {
+      filename: 'Setup.vue',
+      code: `
+        import { ref, defineComponent } from 'vue';
+        <script>
+        export default defineComponent({
+            name: 'Setup',
+
+            setup() {
+                const foo = ref('');
+                const bar = ref('');
+
+                return { foo, bar };
+            }
+        })
+        </script>
+      `,
+      output: `
+        import { ref, defineComponent } from 'vue';
+        <script>
+        export default defineComponent({
+            name: 'Setup',
+            setup() {
+                const foo = ref('');
+                const bar = ref('');
+
+                return { foo, bar };
+            }
+        })
+        </script>
+      `,
+      options: ['never'],
+      errors: [
+        {
+          message: 'Unexpected blank line before this definition.',
+          line: 7
+        }
+      ]
+    },
+    {
+      filename: 'BetweenOptionsAlways.vue',
+      code: `
+        import { defineComponent } from 'vue';
+        <script>
+        export default defineComponent({
+            name: 'BetweenOptionsAlways',
+            props: {
+                foo: {
+                    type: String,
+                    required: true,
+                },
+                bar: {
+                    type: Number,
+                    required: true,
+                },
+            }
+        })
+        </script>
+      `,
+      output: `
+        import { defineComponent } from 'vue';
+        <script>
+        export default defineComponent({
+            name: 'BetweenOptionsAlways',
+
+            props: {
+                foo: {
+                    type: String,
+                    required: true,
+                },
+                bar: {
+                    type: Number,
+                    required: true,
+                },
+            }
+        })
+        </script>
+      `,
+      options: [
+        {
+          betweenOptions: 'always',
+          withinOption: 'never'
+        }
+      ],
+      errors: [
+        {
+          message: 'Expected blank line before this definition.',
+          line: 6
+        }
+      ]
+    },
+    {
+      filename: 'GroupSingleLineProperties.vue',
+      code: `
+        import { defineComponent } from 'vue';
+        <script>
+        export default defineComponent({
+            name: 'GroupSingleLineProperties',
+
+            inheritAttrs: false,
+
+            props: {
+                foo: String,
+                bar: Number
+            }
+        })
+        </script>
+      `,
+      output: `
+        import { defineComponent } from 'vue';
+        <script>
+        export default defineComponent({
+            name: 'GroupSingleLineProperties',
+            inheritAttrs: false,
+
+            props: {
+                foo: String,
+                bar: Number
+            }
+        })
+        </script>
+      `,
+      options: [
+        {
+          betweenOptions: 'always',
+          withinOption: 'never',
+          groupSingleLineProperties: true
+        }
+      ],
+      errors: [
+        {
+          message: 'Unexpected blank line between single line properties.',
+          line: 7
+        }
+      ]
+    },
+    {
+      filename: 'WithinOption.vue',
+      code: `
+        import { defineComponent } from 'vue';
+        <script>
+        export default defineComponent({
+            name: 'WithinOption',
+
+            props: {
+                foo: {
+                    type: String,
+                    required: true,
+                },
+                bar: {
+                    type: Number,
+                    required: true,
+                },
+            },
+        })
+        </script>
+      `,
+      output: `
+        import { defineComponent } from 'vue';
+        <script>
+        export default defineComponent({
+            name: 'WithinOption',
+
+            props: {
+                foo: {
+                    type: String,
+
+                    required: true,
+                },
+
+                bar: {
+                    type: Number,
+
+                    required: true,
+                },
+            },
+        })
+        </script>
+      `,
+      options: [
+        {
+          betweenOptions: 'always',
+          withinOption: {
+            props: {
+              betweenItems: 'always',
+              withinEach: 'always'
+            },
+            data: {
+              betweenItems: 'always',
+              withinEach: 'never'
+            }
+          }
+        }
+      ],
+      errors: [
+        {
+          message: 'Expected blank line before this definition.',
+          line: 10
+        },
+        {
+          message: 'Expected blank line before this definition.',
+          line: 12
+        },
+        {
+          message: 'Expected blank line before this definition.',
+          line: 14
+        }
+      ]
+    },
+    {
+      filename: 'CustomOptions.vue',
+      code: `
+        <script>
+        export default {
+            name: 'CustomOptions',
+
+            props: {
+                foo: {
+                    type: String,
+                    required: true,
+                },
+
+                bar: {
+                    type: Number,
+                    required: true,
+                },
+            },
+
+            customOption: {
+                getString() {
+                    return '1';
+                },
+
+                getNumber: () => 1,
+            },
+
+            data: () => ({
+                title: '',
+
+                message: '',
+            }),
+        }
+        </script>
+      `,
+      output: `
+        <script>
+        export default {
+            name: 'CustomOptions',
+
+            props: {
+                foo: {
+                    type: String,
+                    required: true,
+                },
+
+                bar: {
+                    type: Number,
+                    required: true,
+                },
+            },
+
+            customOption: {
+                getString() {
+                    return '1';
+                },
+                getNumber: () => 1,
+            },
+
+            data: () => ({
+                title: '',
+
+                message: '',
+            }),
+        }
+        </script>
+      `,
+      options: [
+        {
+          betweenOptions: 'always',
+          withinOption: {
+            props: {
+              betweenItems: 'always',
+              withinEach: 'never'
+            },
+            customOption: {
+              betweenItems: 'never'
+            }
+          }
+        }
+      ],
+      errors: [
+        {
+          message: 'Unexpected blank line before this definition.',
+          line: 23
+        }
+      ]
+    },
+    {
+      filename: 'NewVue.js',
+      code: `
+        new Vue({
+          name: 'NewVue',
+
+          inheritAttrs: false,
+
+          props: {
+              foo: {
+                  type: String,
+                  required: true,
+              },
+              bar: {
+                  type: String,
+                  required: true,
+              }
+          },
+          customOption: {
+              getString() { return '1' },
+              getNumber: () => 1,
+          },
+        })
+      `,
+      output: `
+        new Vue({
+          name: 'NewVue',
+          inheritAttrs: false,
+
+          props: {
+              foo: {
+                  type: String,
+                  required: true,
+              },
+              bar: {
+                  type: String,
+                  required: true,
+              }
+          },
+
+          customOption: {
+              getString() { return '1' },
+              getNumber: () => 1,
+          },
+        })
+      `,
+      options: [
+        {
+          betweenOptions: 'always',
+          withinOption: 'ignore',
+          groupSingleLineProperties: true
+        }
+      ],
+      errors: [
+        {
+          message: 'Unexpected blank line between single line properties.',
+          line: 5
+        },
+        {
+          message: 'Expected blank line before this definition.',
+          line: 17
+        }
+      ]
+    },
+    {
+      filename: 'Mixin.js',
+      code: `
+        Vue.mixin({
+          name: 'NewVue',
+          inheritAttrs: false,
+          props: {
+              foo: {
+                  type: String,
+                  required: true,
+              },
+              bar: {
+                  type: String,
+                  required: true,
+              }
+          },
+          customOption: {
+              getString() { return '1' },
+              getNumber: () => 1,
+          },
+        })
+      `,
+      output: `
+        Vue.mixin({
+          name: 'NewVue',
+
+          inheritAttrs: false,
+
+          props: {
+              foo: {
+                  type: String,
+                  required: true,
+              },
+              bar: {
+                  type: String,
+                  required: true,
+              }
+          },
+
+          customOption: {
+              getString() { return '1' },
+              getNumber: () => 1,
+          },
+        })
+      `,
+      options: [
+        {
+          betweenOptions: 'always',
+          withinOption: 'ignore',
+          groupSingleLineProperties: false
+        }
+      ],
+      errors: [
+        {
+          message: 'Expected blank line before this definition.',
+          line: 4
+        },
+        {
+          message: 'Expected blank line before this definition.',
+          line: 5
+        },
+        {
+          message: 'Expected blank line before this definition.',
+          line: 15
+        }
+      ]
+    },
+    {
+      filename: 'DefineProps.vue',
+      code: `
+        import { defineProps } from 'vue'
+        <script setup>
+        const props = defineProps({
+            foo: {
+                type: String,
+
+                required: true,
+            },
+            bar: {
+                type: String,
+                required: true,
+            },
+        })
+        </script>
+      `,
+      output: `
+        import { defineProps } from 'vue'
+        <script setup>
+        const props = defineProps({
+            foo: {
+                type: String,
+                required: true,
+            },
+
+            bar: {
+                type: String,
+                required: true,
+            },
+        })
+        </script>
+      `,
+      options: [
+        {
+          betweenOptions: 'always',
+          withinOption: {
+            props: {
+              betweenItems: 'always',
+              withinEach: 'never'
+            }
+          }
+        }
+      ],
+      errors: [
+        {
+          message: 'Unexpected blank line before this definition.',
+          line: 8
+        },
+        {
+          message: 'Expected blank line before this definition.',
+          line: 10
+        }
+      ]
+    },
+    {
+      filename: 'DefineEmits.vue',
+      code: `
+        import { defineEmits } from 'vue'
+        <script setup>
+        const emits = defineEmits(['foo', 'bar']);
+        const emitsObject = defineEmits({
+          change: (id) => typeof id == 'number',
+
+          update: (value) => typeof value == 'string'
+        })
+        </script>
+      `,
+      output: `
+        import { defineEmits } from 'vue'
+        <script setup>
+        const emits = defineEmits(['foo', 'bar']);
+        const emitsObject = defineEmits({
+          change: (id) => typeof id == 'number',
+          update: (value) => typeof value == 'string'
+        })
+        </script>
+      `,
+      options: ['never'],
+      errors: [
+        {
+          message: 'Unexpected blank line before this definition.',
+          line: 8
+        }
+      ]
+    },
+    {
+      filename: 'WithinOption.vue',
+      code: `
+        import { defineComponent } from 'vue';
+        <script>
+        export default defineComponent({
+            name: 'PropertiesInOneLine',props: {
+                foo: {
+                    type: String,
+                    required: true,
+                },bar: {
+                    type: Number,
+                    required: true,
+                },
+            },
+        })
+        </script>
+      `,
+      output: `
+        import { defineComponent } from 'vue';
+        <script>
+        export default defineComponent({
+            name: 'PropertiesInOneLine',
+
+            props: {
+                foo: {
+                    type: String,
+                    required: true,
+                },
+
+                bar: {
+                    type: Number,
+                    required: true,
+                },
+            },
+        })
+        </script>
+      `,
+      options: [
+        {
+          betweenOptions: 'always',
+          withinOption: {
+            props: {
+              betweenItems: 'always',
+              withinEach: 'always'
+            }
+          },
+          groupSingleLineProperties: true
+        }
+      ],
+      errors: [
+        {
+          message: 'Expected blank line before this definition.',
+          line: 5
+        },
+        {
+          message: 'Expected blank line before this definition.',
+          line: 9
+        }
+      ]
+    },
+    {
+      filename: 'Comment.vue',
+      code: `
+        <script>
+        export default {
+            name: 'Comment',
+            props: {
+                a: {
+                    type: String,
+                },
+                /** JSDoc */
+                b: {
+                    type: String,
+                },
+                // foo
+                c: {
+                    type: String,
+                },
+
+                /* block */
+                d: String,
+
+                /* block */
+                f: String,
+            }
+        }
+        </script>
+      `,
+      output: `
+        <script>
+        export default {
+            name: 'Comment',
+
+            props: {
+                a: {
+                    type: String,
+                },
+
+                /** JSDoc */
+                b: {
+                    type: String,
+                },
+
+                // foo
+                c: {
+                    type: String,
+                },
+
+                /* block */
+                d: String,
+                /* block */
+                f: String,
+            }
+        }
+        </script>
+      `,
+      options: ['always'],
+      errors: [
+        {
+          message: 'Expected blank line before this definition.',
+          line: 5
+        },
+        {
+          message: 'Expected blank line before this definition.',
+          line: 9
+        },
+        {
+          message: 'Expected blank line before this definition.',
+          line: 13
+        },
+        {
+          message: 'Unexpected blank line between single line properties.',
+          line: 21
+        }
+      ]
+    },
+    {
+      filename: 'Spread.vue',
+      code: `
+        <script>
+        export default {
+            name: 'Spread',
+            ...spread,
+            props: {
+                a: {
+                    type: String,
+                },
+                ...lost,
+                b: {
+                    type: String,
+                }
+            }
+        }
+        </script>
+      `,
+      output: `
+        <script>
+        export default {
+            name: 'Spread',
+            ...spread,
+
+            props: {
+                a: {
+                    type: String,
+                },
+
+                ...lost,
+
+                b: {
+                    type: String,
+                }
+            }
+        }
+        </script>
+      `,
+      options: ['always'],
+      errors: [
+        {
+          message: 'Expected blank line before this definition.',
+          line: 6
+        },
+        {
+          message: 'Expected blank line before this definition.',
+          line: 10
+        },
+        {
+          message: 'Expected blank line before this definition.',
+          line: 11
+        }
+      ]
+    },
+    {
+      filename: 'DefineWithSpreadAndComment.vue',
+      code: `
+        import { defineEmits, defineProps } from 'vue'
+        <script setup>
+        const emits = defineEmits(['foo', 'bar']);
+        const emitsObject = defineEmits({
+          change: (id) => typeof id == 'number',
+          ...spread,
+          update: (value) => typeof value == 'string'
+        })
+        const props = defineProps({
+            foo: {
+                type: String,
+                required: true,
+            },
+
+            // comment
+            bar: {
+                type: String,
+                required: true,
+            },
+        })
+        </script>
+      `,
+      output: `
+        import { defineEmits, defineProps } from 'vue'
+        <script setup>
+        const emits = defineEmits(['foo', 'bar']);
+        const emitsObject = defineEmits({
+          change: (id) => typeof id == 'number',
+
+          ...spread,
+
+          update: (value) => typeof value == 'string'
+        })
+        const props = defineProps({
+            foo: {
+                type: String,
+                required: true,
+            },
+            // comment
+            bar: {
+                type: String,
+                required: true,
+            },
+        })
+        </script>
+      `,
+      options: [
+        {
+          betweenOptions: 'always',
+          withinOption: {
+            emits: 'always',
+            props: 'never'
+          },
+          groupSingleLineProperties: false
+        }
+      ],
+      errors: [
+        {
+          message: 'Expected blank line before this definition.',
+          line: 7
+        },
+        {
+          message: 'Expected blank line before this definition.',
+          line: 8
+        },
+        {
+          message: 'Unexpected blank line before this definition.',
+          line: 16
+        }
+      ]
+    },
+    {
+      filename: 'MyComment.vue',
+      code: `
+        <script setup>
+        defineOptions({
+            name: 'MyComment',
+            inheritAttrs: false,
+        })
+        </script>
+      `,
+      output: `
+        <script setup>
+        defineOptions({
+            name: 'MyComment',
+
+            inheritAttrs: false,
+        })
+        </script>
+      `,
+      options: [{ betweenOptions: 'always', groupSingleLineProperties: false }],
+      errors: [
+        {
+          message: 'Expected blank line before this definition.',
+          line: 5
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/prefer-define-options.js b/tests/lib/rules/prefer-define-options.js
new file mode 100644
index 000000000..5b7f20e0d
--- /dev/null
+++ b/tests/lib/rules/prefer-define-options.js
@@ -0,0 +1,135 @@
+/**
+ * @author Yosuke Ota <https://github.com/ota-meshi>
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/prefer-define-options')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('prefer-define-options', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      defineOptions({ name: 'Foo' })
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default { name: 'Foo' }
+      </script>
+      `
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default { name: 'Foo' }
+      </script>
+      <script setup>
+      const props = defineProps(['foo'])
+      </script>
+      `,
+      output: `
+      <script setup>
+defineOptions({ name: 'Foo' })
+
+      const props = defineProps(['foo'])
+      </script>
+      `,
+      errors: [
+        {
+          message: 'Use `defineOptions` instead of default export.',
+          line: 3
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default { name: 'Foo' }
+      </script>
+      <script setup>
+      defineOptions({})
+      </script>
+      `,
+      output: null,
+      errors: [
+        {
+          message: 'Use `defineOptions` instead of default export.',
+          line: 3
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export const A = 42
+      export default { name: 'Foo' }
+      </script>
+      <script setup>
+      const props = defineProps(['foo'])
+      </script>
+      `,
+      output: `
+      <script>
+      export const A = 42
+      </script>
+      <script setup>
+defineOptions({ name: 'Foo' })
+
+      const props = defineProps(['foo'])
+      </script>
+      `,
+      errors: [
+        {
+          message: 'Use `defineOptions` instead of default export.',
+          line: 4
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      import { ref } from 'vue'
+      const props = defineProps(['foo'])
+      </script>
+      <script>
+      export default { name: 'Foo' }
+      </script>
+      `,
+      output: `
+      <script setup>
+      import { ref } from 'vue'
+defineOptions({ name: 'Foo' })
+
+      const props = defineProps(['foo'])
+      </script>
+      `,
+      errors: [
+        {
+          message: 'Use `defineOptions` instead of default export.',
+          line: 7
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/prefer-import-from-vue.js b/tests/lib/rules/prefer-import-from-vue.js
index 5c87404c2..519d0a877 100644
--- a/tests/lib/rules/prefer-import-from-vue.js
+++ b/tests/lib/rules/prefer-import-from-vue.js
@@ -4,11 +4,11 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/prefer-import-from-vue')
 
 const tester = new RuleTester({
-  parserOptions: {
+  languageOptions: {
     ecmaVersion: 2020,
     sourceType: 'module'
   }
diff --git a/tests/lib/rules/prefer-prop-type-boolean-first.js b/tests/lib/rules/prefer-prop-type-boolean-first.js
index 9f67e336b..e01759450 100644
--- a/tests/lib/rules/prefer-prop-type-boolean-first.js
+++ b/tests/lib/rules/prefer-prop-type-boolean-first.js
@@ -4,12 +4,15 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/prefer-prop-type-boolean-first')
+const {
+  getTypeScriptFixtureTestOptions
+} = require('../../test-utils/typescript')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
     ecmaVersion: 2020,
     sourceType: 'module'
   }
@@ -62,6 +65,14 @@ tester.run('prefer-prop-type-boolean-first', rule, {
           })
         </script>
       `
+    },
+    {
+      code: `
+      <script setup lang="ts">
+      import {Props1 as Props} from './test01'
+      defineProps<Props>()
+      </script>`,
+      ...getTypeScriptFixtureTestOptions()
     }
   ],
   invalid: [
diff --git a/tests/lib/rules/prefer-separate-static-class.js b/tests/lib/rules/prefer-separate-static-class.js
index 498fc90dd..5b5a508ac 100644
--- a/tests/lib/rules/prefer-separate-static-class.js
+++ b/tests/lib/rules/prefer-separate-static-class.js
@@ -4,12 +4,12 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/prefer-separate-static-class')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
     ecmaVersion: 2020,
     sourceType: 'module'
   }
diff --git a/tests/lib/rules/prefer-template.js b/tests/lib/rules/prefer-template.js
index e35fa6d1f..0c4b3366b 100644
--- a/tests/lib/rules/prefer-template.js
+++ b/tests/lib/rules/prefer-template.js
@@ -3,12 +3,11 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/prefer-template')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2020 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2020 }
 })
 
 tester.run('prefer-template', rule, {
diff --git a/tests/lib/rules/prefer-true-attribute-shorthand.js b/tests/lib/rules/prefer-true-attribute-shorthand.js
index e7d52ef7f..80965bac6 100644
--- a/tests/lib/rules/prefer-true-attribute-shorthand.js
+++ b/tests/lib/rules/prefer-true-attribute-shorthand.js
@@ -4,12 +4,12 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/prefer-true-attribute-shorthand')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
     ecmaVersion: 2020,
     sourceType: 'module'
   }
@@ -148,6 +148,24 @@ tester.run('prefer-true-attribute-shorthand', rule, {
       </template>
       `,
       options: ['never']
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <input :value="true" :foo-bar="true" />
+      </template>
+      `,
+      options: ['always', { except: ['value', '/^foo-/'] }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <input value foo-bar />
+      </template>
+      `,
+      options: ['never', { except: ['value', '/^foo-/'] }]
     }
   ],
   invalid: [
@@ -157,6 +175,7 @@ tester.run('prefer-true-attribute-shorthand', rule, {
       <template>
         <MyComp v-bind:show="true" />
       </template>`,
+      output: null,
       errors: [
         {
           messageId: 'expectShort',
@@ -172,8 +191,7 @@ tester.run('prefer-true-attribute-shorthand', rule, {
             }
           ]
         }
-      ],
-      output: null
+      ]
     },
     {
       filename: 'test.vue',
@@ -181,6 +199,7 @@ tester.run('prefer-true-attribute-shorthand', rule, {
       <template>
         <MyComp :show="true" />
       </template>`,
+      output: null,
       errors: [
         {
           messageId: 'expectShort',
@@ -196,8 +215,7 @@ tester.run('prefer-true-attribute-shorthand', rule, {
             }
           ]
         }
-      ],
-      output: null
+      ]
     },
     {
       filename: 'test.vue',
@@ -205,6 +223,7 @@ tester.run('prefer-true-attribute-shorthand', rule, {
       <template>
         <MyComp v-bind:show="true" />
       </template>`,
+      output: null,
       options: ['always'],
       errors: [
         {
@@ -221,8 +240,7 @@ tester.run('prefer-true-attribute-shorthand', rule, {
             }
           ]
         }
-      ],
-      output: null
+      ]
     },
     {
       filename: 'test.vue',
@@ -230,6 +248,7 @@ tester.run('prefer-true-attribute-shorthand', rule, {
       <template>
         <MyComp :show="true" />
       </template>`,
+      output: null,
       options: ['always'],
       errors: [
         {
@@ -246,8 +265,7 @@ tester.run('prefer-true-attribute-shorthand', rule, {
             }
           ]
         }
-      ],
-      output: null
+      ]
     },
     {
       filename: 'test.vue',
@@ -255,6 +273,7 @@ tester.run('prefer-true-attribute-shorthand', rule, {
       <template>
         <MyComp show />
       </template>`,
+      output: null,
       options: ['never'],
       errors: [
         {
@@ -263,12 +282,14 @@ tester.run('prefer-true-attribute-shorthand', rule, {
           column: 17,
           suggestions: [
             {
+              messageId: 'rewriteIntoLongVueProp',
               output: `
       <template>
         <MyComp :show="true" />
       </template>`
             },
             {
+              messageId: 'rewriteIntoLongHtmlAttr',
               output: `
       <template>
         <MyComp show="show" />
@@ -276,8 +297,99 @@ tester.run('prefer-true-attribute-shorthand', rule, {
             }
           ]
         }
-      ],
-      output: null
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <MyComp value foo-bar />
+      </template>`,
+      output: null,
+      options: ['always', { except: ['value', '/^foo-/'] }],
+      errors: [
+        {
+          messageId: 'expectLong',
+          line: 3,
+          column: 17,
+          suggestions: [
+            {
+              messageId: 'rewriteIntoLongVueProp',
+              output: `
+      <template>
+        <MyComp :value="true" foo-bar />
+      </template>`
+            },
+            {
+              messageId: 'rewriteIntoLongHtmlAttr',
+              output: `
+      <template>
+        <MyComp value="value" foo-bar />
+      </template>`
+            }
+          ]
+        },
+        {
+          messageId: 'expectLong',
+          line: 3,
+          column: 23,
+          suggestions: [
+            {
+              messageId: 'rewriteIntoLongVueProp',
+              output: `
+      <template>
+        <MyComp value :foo-bar="true" />
+      </template>`
+            },
+            {
+              messageId: 'rewriteIntoLongHtmlAttr',
+              output: `
+      <template>
+        <MyComp value foo-bar="foo-bar" />
+      </template>`
+            }
+          ]
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <MyComp :value="true" :foo-bar="true" />
+      </template>`,
+      output: null,
+      options: ['never', { except: ['value', '/^foo-/'] }],
+      errors: [
+        {
+          messageId: 'expectShort',
+          line: 3,
+          column: 17,
+          suggestions: [
+            {
+              messageId: 'rewriteIntoShort',
+              output: `
+      <template>
+        <MyComp value :foo-bar="true" />
+      </template>`
+            }
+          ]
+        },
+        {
+          messageId: 'expectShort',
+          line: 3,
+          column: 31,
+          suggestions: [
+            {
+              messageId: 'rewriteIntoShort',
+              output: `
+      <template>
+        <MyComp :value="true" foo-bar />
+      </template>`
+            }
+          ]
+        }
+      ]
     }
   ]
 })
diff --git a/tests/lib/rules/prefer-use-template-ref.js b/tests/lib/rules/prefer-use-template-ref.js
new file mode 100644
index 000000000..afc6d6a11
--- /dev/null
+++ b/tests/lib/rules/prefer-use-template-ref.js
@@ -0,0 +1,513 @@
+/**
+ * @author Thomasan1999
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/prefer-use-template-ref')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('prefer-use-template-ref', rule, {
+  valid: [
+    {
+      filename: 'single-use-template-ref.vue',
+      code: `
+      <template>
+          <div ref="root" />
+      </template>
+      <script setup>
+        import { useTemplateRef } from 'vue';
+        const root = useTemplateRef('root');
+      </script>
+      `
+    },
+    {
+      filename: 'multiple-use-template-refs.vue',
+      code: `
+      <template>
+          <button ref="button">Content</button>
+          <a href="" ref="link">Link</a>
+      </template>
+      <script setup>
+        import { useTemplateRef } from 'vue';
+        const buttonRef = useTemplateRef('button');
+        const link = useTemplateRef('link');
+      </script>
+      `
+    },
+    {
+      filename: 'use-template-ref-in-block.vue',
+      code: `
+      <template>
+          <div>
+            <ul>
+              <li ref="firstListItem">Morning</li>
+              <li>Afternoon</li>
+              <li>Evening</li>
+            </ul>
+          </div>
+      </template>
+      <script setup>
+        import { useTemplateRef } from 'vue';
+        function getFirstListItemElement() {
+          const firstListItem = useTemplateRef('firstListItem')
+          console.log(firstListItem)
+        }
+      </script>
+      `
+    },
+    {
+      filename: 'non-template-ref.vue',
+      code: `
+      <template>
+          <div>
+            <ul>
+              <li v-for="food in foods" :key="food">{{food}}</li>
+            </ul>
+          </div>
+      </template>
+      <script setup>
+        import { ref } from 'vue';
+        const foods = ref(['Spaghetti', 'Pizza', 'Cake']);
+      </script>
+      `
+    },
+    {
+      filename: 'counter.js',
+      code: `
+      import { ref } from 'vue';
+      const counter = ref(0);
+      const names = ref(new Set());
+      function incrementCounter() {
+        counter.value++;
+        return counter.value;
+      }
+      function storeName(name) {
+        names.value.add(name)
+      }
+      `
+    },
+    {
+      filename: 'setup-function.vue',
+      code: `
+      <template>
+        <p>Button clicked {{counter}} times.</p>
+        <button ref="button" @click="counter++">Click</button>
+      </template>
+      <script>
+        import { ref, useTemplateRef } from 'vue';
+        export default {
+          name: 'Counter',
+          setup() {
+            const counter = ref(0);
+            const button = useTemplateRef('button');
+          }
+        }
+      </script>
+      `
+    },
+    {
+      filename: 'options-api-no-refs.vue',
+      code: `
+      <template>
+        <label ref="label">
+          Name:
+          <input v-model="name" />
+        </label>
+        <p ref="textRef">{{niceName}}</p>
+        <button
+      </template>
+      <script>
+        import { ref } from 'vue';
+        export default {
+          name: 'NameRow',
+          methods: {
+            someFunction() {
+              return {
+                label: ref(5),
+              }
+            }
+          }
+          data() {
+            return {
+              label: 'label',
+              name: ''
+            }
+          },
+          computed: {
+            niceName() {
+              return 'Nice ' + this.name;
+            }
+          }
+        }
+      </script>
+      `
+    },
+    {
+      filename: 'options-api-mixed.vue',
+      code: `
+      <template>
+        <label ref="labelElem">
+          Name:
+          <input v-model="name" />
+        </label>
+        {{ loremIpsum }}
+      </template>
+      <script>
+        import { ref } from 'vue';
+        export default {
+          name: 'NameRow',
+          props: {
+            defaultLabel: {
+              type: String,
+            },
+          },
+          data() {
+            return {
+              label: ref(this.defaultLabel),
+              labelElem: ref(),
+              name: ''
+            }
+          },
+          computed: {
+            loremIpsum() {
+              return this.name + ' lorem ipsum'
+            }
+          }
+        }
+      </script>
+      `
+    },
+    {
+      filename: 'template-ref-function.vue',
+      code: `
+      <template>
+        <button :ref="ref => button = ref">Content</button>
+      </template>
+      <script setup>
+        import { ref } from 'vue';
+        const button = ref();
+        </script>
+      `
+    },
+    {
+      filename: 'ref-in-block.vue',
+      code: `
+      <template>
+          <div>
+            <ul>
+              <li ref="firstListItem">Morning</li>
+              <li ref="second">Afternoon</li>
+              <li>Evening</li>
+            </ul>
+          </div>
+      </template>
+      <script setup>
+        import { ref, shallowRef } from 'vue';
+        function getFirstListItemElement() {
+          const firstListItem = ref();
+          const nestedCallback = () => {
+            const second = shallowRef();
+            console.log(second);
+          }
+          nestedCallback();
+        }
+      </script>
+      `
+    },
+    {
+      filename: 'ref-in-block-setup-fn.vue',
+      code: `
+      <template>
+          <div>
+            <ul>
+              <li ref="firstListItem">Morning</li>
+              <li ref="second">Afternoon</li>
+              <li>Evening</li>
+            </ul>
+          </div>
+      </template>
+      <script>
+        import { ref, shallowRef } from 'vue';
+        export default {
+          name: 'ComponentWithRefInBlock',
+          setup() {
+            function getFirstListItemElement() {
+              const firstListItem = shallowRef();
+              const nestedCallback = () => {
+                const second = ref();
+                console.log(second);
+              }
+              nestedCallback();
+            }
+          }
+        }
+      </script>
+      `
+    },
+    {
+      filename: 'non-block-arrow-setup-function.vue',
+      code: `
+        <script>
+          import { defineComponent } from 'vue';
+          export default defineComponent({
+            setup: () => ({})
+          })
+        </script>
+      `
+    },
+    {
+      filename: 'multiple-scripts-setup-first.vue',
+      code: `
+      <template>
+        <div ref="root" :data-a="A" />
+      </template>
+
+      <script setup>
+      import { useTemplateRef } from 'vue'
+      const root = useTemplateRef('root')
+      </script>
+
+      <script>
+      const A = 'foo'
+      </script>
+      `
+    },
+    {
+      filename: 'multiple-scripts-setup-last.vue',
+      code: `
+      <template>
+        <div ref="root" :data-a="A" />
+      </template>
+
+      <script>
+      const A = 'foo'
+      </script>
+
+      <script setup>
+      import { useTemplateRef } from 'vue'
+      const root = useTemplateRef('root')
+      </script>
+      `
+    }
+  ],
+  invalid: [
+    {
+      filename: 'single-ref.vue',
+      code: `
+      <template>
+          <div ref="root"/>
+      </template>
+      <script setup>
+        import { ref } from 'vue';
+        const root = ref();
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'preferUseTemplateRef',
+          data: {
+            name: 'ref'
+          },
+          line: 7,
+          column: 22
+        }
+      ]
+    },
+    {
+      filename: 'one-ref-unused-in-script.vue',
+      code: `
+      <template>
+          <button ref="button">Content</button>
+          <a href="" ref="link">Link</a>
+      </template>
+      <script setup>
+        import { ref } from 'vue';
+        const buttonRef = ref();
+        const link = ref();
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'preferUseTemplateRef',
+          data: {
+            name: 'ref'
+          },
+          line: 9,
+          column: 22
+        }
+      ]
+    },
+    {
+      filename: 'multiple-refs.vue',
+      code: `
+      <template>
+          <h1 ref="heading">Heading</h1>
+          <a href="" ref="link">Link</a>
+      </template>
+      <script setup>
+        import { ref } from 'vue';
+        const heading = ref();
+        const link = ref();
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'preferUseTemplateRef',
+          data: {
+            name: 'ref'
+          },
+          line: 8,
+          column: 25
+        },
+        {
+          messageId: 'preferUseTemplateRef',
+          data: {
+            name: 'ref'
+          },
+          line: 9,
+          column: 22
+        }
+      ]
+    },
+    {
+      filename: 'setup-function-only-refs.vue',
+      code: `
+      <template>
+        <p>Button clicked {{counter}} times.</p>
+        <button ref="button">Click</button>
+      </template>
+      <script>
+        import { ref } from 'vue';
+        export default {
+          name: 'Counter',
+          setup() {
+            const counter = ref(0);
+            const button = ref();
+          }
+        }
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'preferUseTemplateRef',
+          data: {
+            name: 'ref'
+          },
+          line: 12,
+          column: 28
+        }
+      ]
+    },
+    {
+      filename: 'single-shallowRef.vue',
+      code: `
+      <template>
+          <div ref="root"/>
+      </template>
+      <script setup>
+        import { shallowRef } from 'vue';
+        const root = shallowRef();
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'preferUseTemplateRef',
+          data: {
+            name: 'shallowRef'
+          },
+          line: 7,
+          column: 22
+        }
+      ]
+    },
+    {
+      filename: 'block-arrow-setup-function.vue',
+      code: `
+      <template>
+        <button ref="button">Click</button>
+      </template>
+      <script>
+        import { ref } from 'vue';
+        export default {
+          setup: () => {
+            const button = ref();
+          }
+        }
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'preferUseTemplateRef',
+          data: {
+            name: 'ref'
+          },
+          line: 9,
+          column: 28
+        }
+      ]
+    },
+    {
+      filename: 'multiple-scripts-setup-first.vue',
+      code: `
+      <template>
+        <div ref="root" :data-a="A" />
+      </template>
+
+      <script setup>
+      import { ref } from 'vue'
+      const root = ref()
+      </script>
+
+      <script>
+      const A = 'foo'
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'preferUseTemplateRef',
+          data: {
+            name: 'ref'
+          },
+          line: 8,
+          column: 20
+        }
+      ]
+    },
+    {
+      filename: 'multiple-scripts-setup-last.vue',
+      code: `
+      <template>
+        <div ref="root" :data-a="A" />
+      </template>
+
+      <script>
+      const A = 'foo'
+      </script>
+
+      <script setup>
+      import { ref } from 'vue'
+      const root = ref()
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'preferUseTemplateRef',
+          data: {
+            name: 'ref'
+          },
+          line: 12,
+          column: 20
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/prop-name-casing.js b/tests/lib/rules/prop-name-casing.js
index 4226e2dc8..ea15dddb4 100644
--- a/tests/lib/rules/prop-name-casing.js
+++ b/tests/lib/rules/prop-name-casing.js
@@ -4,19 +4,13 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const semver = require('semver')
 const rule = require('../../../lib/rules/prop-name-casing')
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
+const {
+  getTypeScriptFixtureTestOptions
+} = require('../../test-utils/typescript')
 
-const parserOptions = {
+const languageOptions = {
   ecmaVersion: 2018,
   sourceType: 'module'
 }
@@ -31,7 +25,7 @@ ruleTester.run('prop-name-casing', rule, {
           props: ['greetingText']
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -40,7 +34,7 @@ ruleTester.run('prop-name-casing', rule, {
           props: some_props
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -51,7 +45,7 @@ ruleTester.run('prop-name-casing', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -61,7 +55,7 @@ ruleTester.run('prop-name-casing', rule, {
         }
       `,
       options: ['camelCase'],
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -71,7 +65,7 @@ ruleTester.run('prop-name-casing', rule, {
         }
       `,
       options: ['snake_case'],
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -82,7 +76,7 @@ ruleTester.run('prop-name-casing', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -94,7 +88,7 @@ ruleTester.run('prop-name-casing', rule, {
       }
       `,
       options: ['camelCase'],
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -106,7 +100,7 @@ ruleTester.run('prop-name-casing', rule, {
       }
       `,
       options: ['snake_case'],
-      parserOptions
+      languageOptions
     },
     {
       // computed property name
@@ -118,7 +112,7 @@ ruleTester.run('prop-name-casing', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       // computed property name
@@ -130,7 +124,7 @@ ruleTester.run('prop-name-casing', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       // TemplateLiteral computed property does not warn
@@ -142,7 +136,7 @@ ruleTester.run('prop-name-casing', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       // shorthand
@@ -154,10 +148,10 @@ ruleTester.run('prop-name-casing', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
-      // valiable computed property name does not warn
+      // variable computed property name does not warn
       filename: 'test.vue',
       code: `
         export default {
@@ -166,10 +160,10 @@ ruleTester.run('prop-name-casing', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
-      // valiable computed property name does not warn
+      // variable computed property name does not warn
       filename: 'test.vue',
       code: `
         export default {
@@ -178,7 +172,7 @@ ruleTester.run('prop-name-casing', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       // BinaryExpression computed property name does not warn
@@ -190,7 +184,7 @@ ruleTester.run('prop-name-casing', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       // CallExpression computed property name does not warn
@@ -202,7 +196,7 @@ ruleTester.run('prop-name-casing', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       // ThisExpression computed property name does not warn
@@ -214,7 +208,7 @@ ruleTester.run('prop-name-casing', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       // ArrayExpression computed property name does not warn
@@ -226,7 +220,7 @@ ruleTester.run('prop-name-casing', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       // number Literal computed property name
@@ -238,7 +232,7 @@ ruleTester.run('prop-name-casing', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       // boolean Literal computed property name
@@ -250,7 +244,7 @@ ruleTester.run('prop-name-casing', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       // null Literal computed property name
@@ -262,7 +256,7 @@ ruleTester.run('prop-name-casing', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       // Japanese characters
@@ -274,7 +268,7 @@ ruleTester.run('prop-name-casing', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       // emoji
@@ -286,7 +280,7 @@ ruleTester.run('prop-name-casing', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       // #862
@@ -298,7 +292,7 @@ ruleTester.run('prop-name-casing', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       // #932
@@ -310,7 +304,7 @@ ruleTester.run('prop-name-casing', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -322,7 +316,7 @@ ruleTester.run('prop-name-casing', rule, {
         }
       `,
       options: ['snake_case'],
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -333,8 +327,10 @@ ruleTester.run('prop-name-casing', rule, {
       })
       </script>
       `,
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      }
     },
     {
       filename: 'test.vue',
@@ -343,8 +339,10 @@ ruleTester.run('prop-name-casing', rule, {
       defineProps(['greetingText'])
       </script>
       `,
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      }
     },
     {
       filename: 'test.vue',
@@ -356,11 +354,40 @@ ruleTester.run('prop-name-casing', rule, {
       defineProps<Props>()
       </script>
       `,
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions: {
-        ...parserOptions,
-        parser: require.resolve('@typescript-eslint/parser')
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions,
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
       }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        export default {
+          props: {
+            'ignored-pattern-test': String,
+            ignored_prop: Number,
+            validProp: Boolean
+          }
+        }
+      `,
+      options: [
+        'camelCase',
+        { ignoreProps: ['ignored_prop', '/^ignored-pattern-/'] }
+      ],
+      languageOptions
+    },
+    {
+      code: `
+      <script setup lang="ts">
+      import {Props2 as Props} from './test01'
+
+      defineProps<Props>()
+      </script>
+      `,
+      ...getTypeScriptFixtureTestOptions()
     }
   ],
 
@@ -374,12 +401,14 @@ ruleTester.run('prop-name-casing', rule, {
           }
         }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Prop "greeting_text" is not in camelCase.',
-          type: 'Property',
-          line: 4
+          line: 4,
+          column: 13,
+          endLine: 4,
+          endColumn: 34
         }
       ]
     },
@@ -393,12 +422,14 @@ ruleTester.run('prop-name-casing', rule, {
         }
       `,
       options: ['camelCase'],
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Prop "greeting_text" is not in camelCase.',
-          type: 'Property',
-          line: 4
+          line: 4,
+          column: 13,
+          endLine: 4,
+          endColumn: 34
         }
       ]
     },
@@ -410,12 +441,14 @@ ruleTester.run('prop-name-casing', rule, {
         }
       `,
       options: ['camelCase'],
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Prop "greeting_text" is not in camelCase.',
-          type: 'Literal',
-          line: 3
+          line: 3,
+          column: 19,
+          endLine: 3,
+          endColumn: 34
         }
       ]
     },
@@ -429,12 +462,14 @@ ruleTester.run('prop-name-casing', rule, {
         }
       `,
       options: ['snake_case'],
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Prop "greetingText" is not in snake_case.',
-          type: 'Property',
-          line: 4
+          line: 4,
+          column: 13,
+          endLine: 4,
+          endColumn: 33
         }
       ]
     },
@@ -448,12 +483,14 @@ ruleTester.run('prop-name-casing', rule, {
         }
       `,
       options: ['camelCase'],
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Prop "greeting-text" is not in camelCase.',
-          type: 'Property',
-          line: 4
+          line: 4,
+          column: 13,
+          endLine: 4,
+          endColumn: 36
         }
       ]
     },
@@ -467,12 +504,14 @@ ruleTester.run('prop-name-casing', rule, {
         }
       `,
       options: ['snake_case'],
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Prop "greeting-text" is not in snake_case.',
-          type: 'Property',
-          line: 4
+          line: 4,
+          column: 13,
+          endLine: 4,
+          endColumn: 36
         }
       ]
     },
@@ -485,12 +524,14 @@ ruleTester.run('prop-name-casing', rule, {
           }
         }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Prop "greeting_text" is not in camelCase.',
-          type: 'Property',
-          line: 4
+          line: 4,
+          column: 13,
+          endLine: 4,
+          endColumn: 36
         }
       ]
     },
@@ -504,12 +545,14 @@ ruleTester.run('prop-name-casing', rule, {
           }
         }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Prop "greeting-text" is not in camelCase.',
-          type: 'Property',
-          line: 4
+          line: 4,
+          column: 13,
+          endLine: 4,
+          endColumn: 38
         }
       ]
     },
@@ -523,12 +566,14 @@ ruleTester.run('prop-name-casing', rule, {
           }
         }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Prop "greeting_text" is not in camelCase.',
-          type: 'Property',
-          line: 4
+          line: 4,
+          column: 13,
+          endLine: 4,
+          endColumn: 26
         }
       ]
     },
@@ -541,12 +586,14 @@ ruleTester.run('prop-name-casing', rule, {
           }
         }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Prop "abc-123-def" is not in camelCase.',
-          type: 'Property',
-          line: 4
+          line: 4,
+          column: 13,
+          endLine: 4,
+          endColumn: 34
         }
       ]
     },
@@ -560,12 +607,14 @@ ruleTester.run('prop-name-casing', rule, {
           }
         }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Prop "greeting-text" is not in camelCase.',
-          type: 'Property',
-          line: 4
+          line: 4,
+          column: 13,
+          endLine: 4,
+          endColumn: 40
         }
       ]
     },
@@ -578,7 +627,7 @@ ruleTester.run('prop-name-casing', rule, {
           }
         }
       `,
-      parserOptions,
+      languageOptions,
       errors: ['Prop "_item" is not in camelCase.']
     },
     {
@@ -591,7 +640,7 @@ ruleTester.run('prop-name-casing', rule, {
         }
       `,
       options: ['snake_case'],
-      parserOptions,
+      languageOptions,
       errors: ['Prop "_itemName" is not in snake_case.']
     },
     {
@@ -604,7 +653,7 @@ ruleTester.run('prop-name-casing', rule, {
           }
         }
       `,
-      parserOptions,
+      languageOptions,
       errors: ['Prop "greeting-text" is not in camelCase.']
     },
     {
@@ -617,7 +666,7 @@ ruleTester.run('prop-name-casing', rule, {
           }
         }
       `,
-      parserOptions,
+      languageOptions,
       errors: ['Prop "/greeting-text/" is not in camelCase.']
     },
     {
@@ -629,12 +678,17 @@ ruleTester.run('prop-name-casing', rule, {
       })
       </script>
       `,
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions,
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      },
       errors: [
         {
           message: 'Prop "greeting_text" is not in camelCase.',
-          line: 4
+          line: 4,
+          column: 9,
+          endLine: 4,
+          endColumn: 30
         }
       ]
     },
@@ -645,43 +699,135 @@ ruleTester.run('prop-name-casing', rule, {
       defineProps(['greeting_text'])
       </script>
       `,
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions,
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      },
+      errors: [
+        {
+          message: 'Prop "greeting_text" is not in camelCase.',
+          line: 3,
+          column: 20,
+          endLine: 3,
+          endColumn: 35
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      interface Props {
+        greeting_text: number
+      }
+      defineProps<Props>()
+      </script>
+      `,
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions,
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
       errors: [
         {
           message: 'Prop "greeting_text" is not in camelCase.',
-          line: 3
+          line: 4,
+          column: 9,
+          endLine: 4,
+          endColumn: 30
         }
       ]
     },
-    ...(semver.lt(
-      require('@typescript-eslint/parser/package.json').version,
-      '4.0.0'
-    )
-      ? []
-      : [
-          {
-            filename: 'test.vue',
-            code: `
-            <script setup lang="ts">
-            interface Props {
-              greeting_text: number
-            }
-            defineProps<Props>()
-            </script>
-            `,
-            parser: require.resolve('vue-eslint-parser'),
-            parserOptions: {
-              ...parserOptions,
-              parser: require.resolve('@typescript-eslint/parser')
-            },
-            errors: [
-              {
-                message: 'Prop "greeting_text" is not in camelCase.',
-                line: 4
-              }
-            ]
-          }
-        ])
+    {
+      filename: 'test.vue',
+      code: `
+        export default {
+          props: {
+            notIgnored_prop: String,
+            'other-pattern': Number,
+            'pattern-valid': String
+          }
+        }
+      `,
+      options: ['camelCase', { ignoreProps: ['ignored_prop', '/^pattern-/'] }],
+      languageOptions,
+      errors: [
+        {
+          message: 'Prop "notIgnored_prop" is not in camelCase.',
+          line: 4,
+          column: 13,
+          endLine: 4,
+          endColumn: 36
+        },
+        {
+          message: 'Prop "other-pattern" is not in camelCase.',
+          line: 5,
+          column: 13,
+          endLine: 5,
+          endColumn: 36
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        export default {
+          props: ['notIgnored_prop', 'pattern_invalid', 'validProp', 'pattern-valid']
+        }
+      `,
+      options: ['camelCase', { ignoreProps: ['ignored_prop', '/^pattern-/'] }],
+      languageOptions,
+      errors: [
+        {
+          message: 'Prop "notIgnored_prop" is not in camelCase.',
+          line: 3,
+          column: 19,
+          endLine: 3,
+          endColumn: 36
+        },
+        {
+          message: 'Prop "pattern_invalid" is not in camelCase.',
+          line: 3,
+          column: 38,
+          endLine: 3,
+          endColumn: 55
+        }
+      ]
+    },
+    {
+      code: `
+      <script setup lang="ts">
+      import {Props3 as Props} from './test01'
+
+      defineProps<Props>()
+      </script>
+      `,
+      errors: [
+        {
+          message: 'Prop "snake_case" is not in camelCase.',
+          line: 5,
+          column: 19,
+          endLine: 5,
+          endColumn: 24
+        },
+        {
+          message: 'Prop "kebab-case" is not in camelCase.',
+          line: 5,
+          column: 19,
+          endLine: 5,
+          endColumn: 24
+        },
+        {
+          message: 'Prop "PascalCase" is not in camelCase.',
+          line: 5,
+          column: 19,
+          endLine: 5,
+          endColumn: 24
+        }
+      ],
+      ...getTypeScriptFixtureTestOptions()
+    }
   ]
 })
diff --git a/tests/lib/rules/quote-props.js b/tests/lib/rules/quote-props.js
index 378affe72..9d5caa890 100644
--- a/tests/lib/rules/quote-props.js
+++ b/tests/lib/rules/quote-props.js
@@ -4,12 +4,12 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/quote-props')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
     ecmaVersion: 2020,
     sourceType: 'module'
   }
diff --git a/tests/lib/rules/require-component-is.js b/tests/lib/rules/require-component-is.js
index 75859f8d5..e4de51629 100644
--- a/tests/lib/rules/require-component-is.js
+++ b/tests/lib/rules/require-component-is.js
@@ -5,20 +5,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/require-component-is')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('require-component-is', rule, {
diff --git a/tests/lib/rules/require-default-export.js b/tests/lib/rules/require-default-export.js
new file mode 100644
index 000000000..279af4a38
--- /dev/null
+++ b/tests/lib/rules/require-default-export.js
@@ -0,0 +1,190 @@
+/**
+ * @author ItMaga
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/require-default-export')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('require-default-export', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <template>Without script</template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        import { ref } from 'vue';
+        
+        export default {}
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+        const foo = 'foo';
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      const component = {};
+
+      export default component;
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import {defineComponent} from 'vue';
+
+      export default defineComponent({});
+      </script>
+      `
+    },
+    {
+      filename: 'test.js',
+      code: `
+      const foo = 'foo';
+      export const bar = 'bar';
+      `
+    },
+    {
+      filename: 'test.js',
+      code: `
+      import {defineComponent} from 'vue';
+      defineComponent({});
+      `
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      const foo = 'foo';
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'missing',
+          line: 4,
+          endLine: 4,
+          column: 7,
+          endColumn: 16
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export const foo = 'foo';
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'missing',
+          line: 4,
+          endLine: 4,
+          column: 7,
+          endColumn: 16
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      const foo = 'foo';
+
+      export { foo };
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'missing',
+          line: 6,
+          endLine: 6,
+          column: 7,
+          endColumn: 16
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export const foo = 'foo';
+      export const bar = 'bar';
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'missing',
+          line: 5,
+          endLine: 5,
+          column: 7,
+          endColumn: 16
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { defineComponent } from 'vue';
+
+      export const component = defineComponent({});
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'mustBeDefaultExport',
+          line: 6,
+          endLine: 6,
+          column: 7,
+          endColumn: 16
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import Vue from 'vue';
+
+      const component = Vue.component('foo', {});
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'mustBeDefaultExport',
+          line: 6,
+          endLine: 6,
+          column: 7,
+          endColumn: 16
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/require-default-prop.js b/tests/lib/rules/require-default-prop.js
index e129ae84d..cbca0ee19 100644
--- a/tests/lib/rules/require-default-prop.js
+++ b/tests/lib/rules/require-default-prop.js
@@ -4,23 +4,14 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const semver = require('semver')
 const rule = require('../../../lib/rules/require-default-prop')
-const RuleTester = require('eslint').RuleTester
-const parserOptions = {
+const RuleTester = require('../../eslint-compat').RuleTester
+const languageOptions = {
   ecmaVersion: 2020,
   sourceType: 'module'
 }
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
-const ruleTester = new RuleTester({ parserOptions })
+const ruleTester = new RuleTester({ languageOptions })
 ruleTester.run('require-default-prop', rule, {
   valid: [
     {
@@ -62,8 +53,6 @@ ruleTester.run('require-default-prop', rule, {
             },
             i: Boolean,
             j: [Boolean],
-            // eslint-disable-next-line require-default-prop
-            k: Number
           }
         }
       `
@@ -126,7 +115,10 @@ ruleTester.run('require-default-prop', rule, {
           }
         });
       `,
-      parser: require.resolve('@typescript-eslint/parser')
+
+      languageOptions: {
+        parser: require('@typescript-eslint/parser')
+      }
     },
     {
       filename: 'test.vue',
@@ -140,7 +132,9 @@ ruleTester.run('require-default-prop', rule, {
           }
         });
       `,
-      parser: require.resolve('@typescript-eslint/parser')
+      languageOptions: {
+        parser: require('@typescript-eslint/parser')
+      }
     },
     {
       filename: 'test.vue',
@@ -188,7 +182,7 @@ ruleTester.run('require-default-prop', rule, {
       export default {
         props: ['foo']
       }`,
-      parserOptions
+      languageOptions
     },
 
     // sparse array
@@ -217,8 +211,10 @@ ruleTester.run('require-default-prop', rule, {
       })
       </script>
       `,
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      }
     },
     {
       filename: 'test.vue',
@@ -227,8 +223,10 @@ ruleTester.run('require-default-prop', rule, {
       defineProps(['foo'])
       </script>
       `,
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      }
     },
     {
       filename: 'test.vue',
@@ -240,10 +238,12 @@ ruleTester.run('require-default-prop', rule, {
       defineProps<Props>()
       </script>
       `,
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions: {
-        ...parserOptions,
-        parser: require.resolve('@typescript-eslint/parser')
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions,
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
       }
     },
     {
@@ -256,10 +256,10 @@ ruleTester.run('require-default-prop', rule, {
       withDefaults(defineProps<Props>(), {foo:42})
       </script>
       `,
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions: {
-        ...parserOptions,
-        parser: require.resolve('@typescript-eslint/parser')
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions,
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
       }
     },
     {
@@ -276,10 +276,10 @@ ruleTester.run('require-default-prop', rule, {
       })
       </script>
       `,
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions: {
-        ...parserOptions,
-        parser: require.resolve('@typescript-eslint/parser')
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions,
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
       }
     },
     {
@@ -306,10 +306,10 @@ ruleTester.run('require-default-prop', rule, {
       });
       </script>
       `,
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions: {
-        ...parserOptions,
-        parser: require.resolve('@typescript-eslint/parser')
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions,
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
       }
     },
     {
@@ -323,10 +323,94 @@ ruleTester.run('require-default-prop', rule, {
       const props = defineProps<Props>();
       </script>
       `,
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions: {
-        ...parserOptions,
-        parser: require.resolve('@typescript-eslint/parser')
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions,
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      const defaultProps = {
+        foo: 'foo',
+      }
+      withDefaults(defineProps<{
+        foo: string;
+        bar?: number;
+      }>(), {
+        ...defaultProps,
+        bar: 42,
+      })
+      </script>
+      `,
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions,
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const {foo=42,bar=42} = defineProps({foo: Number, bar: {type: Number}})
+      </script>
+      `,
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const {foo,bar} = defineProps({foo: Boolean, bar: {type: Boolean}})
+      </script>
+      `,
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      // ignore
+      const {bar = 42, foo = 42} = defineProps({[x]: Number, bar: {type: Number}})
+      </script>
+      `,
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const {bar=42} = defineProps({foo: {type: Number, required: true}, bar: {type: Number, required: false}})
+      </script>
+      `,
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      const {foo = 42, bar} = defineProps<{foo?: number; bar: number}>()
+      </script>
+      `,
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions,
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
       }
     }
   ],
@@ -391,7 +475,9 @@ ruleTester.run('require-default-prop', rule, {
           }
         });
       `,
-      parser: require.resolve('@typescript-eslint/parser'),
+      languageOptions: {
+        parser: require('@typescript-eslint/parser')
+      },
       errors: [
         {
           message: `Prop 'a' requires default value to be set.`,
@@ -410,7 +496,7 @@ ruleTester.run('require-default-prop', rule, {
           }
         });
       `,
-      parser: require.resolve('@typescript-eslint/parser'),
+      languageOptions: { parser: require('@typescript-eslint/parser') },
       errors: [
         {
           message: `Prop 'a' requires default value to be set.`,
@@ -530,8 +616,10 @@ ruleTester.run('require-default-prop', rule, {
       })
       </script>
       `,
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions,
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      },
       errors: [
         {
           message: "Prop 'foo' requires default value to be set.",
@@ -539,34 +627,116 @@ ruleTester.run('require-default-prop', rule, {
         }
       ]
     },
-    ...(semver.lt(
-      require('@typescript-eslint/parser/package.json').version,
-      '4.0.0'
-    )
-      ? []
-      : [
-          {
-            filename: 'test.vue',
-            code: `
-            <script setup lang="ts">
-            interface Props {
-              foo?: number
-            }
-            withDefaults(defineProps<Props>(), {bar:42})
-            </script>
-            `,
-            parser: require.resolve('vue-eslint-parser'),
-            parserOptions: {
-              ...parserOptions,
-              parser: require.resolve('@typescript-eslint/parser')
-            },
-            errors: [
-              {
-                message: "Prop 'foo' requires default value to be set.",
-                line: 4
-              }
-            ]
-          }
-        ])
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      const defaultProps = {
+        foo: 'foo',
+      }
+      withDefaults(defineProps<{
+        foo: string;
+        bar?: number;
+      }>(), {
+        ...defaultProps,
+      })
+      </script>
+      `,
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions,
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      },
+      errors: [
+        {
+          message: "Prop 'bar' requires default value to be set.",
+          line: 8
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      interface Props {
+        foo?: number
+      }
+      withDefaults(defineProps<Props>(), {bar:42})
+      </script>
+      `,
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions,
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          message: "Prop 'foo' requires default value to be set.",
+          line: 4
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const {foo,bar} = defineProps({foo: Boolean, bar: {type: String}})
+      </script>
+      `,
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      },
+      errors: [
+        {
+          message: "Prop 'bar' requires default value to be set.",
+          line: 3
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const {foo,bar} = defineProps({foo: Number, bar: {type: Number}})
+      </script>
+      `,
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      },
+      errors: [
+        {
+          message: "Prop 'foo' requires default value to be set.",
+          line: 3
+        },
+        {
+          message: "Prop 'bar' requires default value to be set.",
+          line: 3
+        }
+      ]
+    },
+    {
+      // https://github.com/vuejs/eslint-plugin-vue/issues/2725
+      filename: 'type-with-props-destructure.vue',
+      code: `
+      <script setup lang="ts">
+      const {foo, bar} = defineProps<{foo?: number; bar: number}>()
+      </script>
+      `,
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions,
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      },
+      errors: [
+        {
+          message: "Prop 'foo' requires default value to be set.",
+          line: 3
+        }
+      ]
+    }
   ]
 })
diff --git a/tests/lib/rules/require-direct-export.js b/tests/lib/rules/require-direct-export.js
index 4f16e0fcd..0a5816e94 100644
--- a/tests/lib/rules/require-direct-export.js
+++ b/tests/lib/rules/require-direct-export.js
@@ -4,22 +4,16 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/require-direct-export')
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const ruleTester = new RuleTester({
-  parserOptions: {
+  languageOptions: {
     ecmaVersion: 2018,
     sourceType: 'module',
-    ecmaFeatures: { jsx: true }
+    parserOptions: {
+      ecmaFeatures: { jsx: true }
+    }
   }
 })
 ruleTester.run('require-direct-export', rule, {
@@ -100,8 +94,10 @@ ruleTester.run('require-direct-export', rule, {
       errors: [
         {
           message: 'Expected the component literal to be directly exported.',
-          type: 'ExportDefaultDeclaration',
-          line: 3
+          line: 3,
+          column: 7,
+          endLine: 3,
+          endColumn: 23
         }
       ]
     },
@@ -115,8 +111,10 @@ ruleTester.run('require-direct-export', rule, {
       errors: [
         {
           message: 'Expected the component literal to be directly exported.',
-          type: 'ExportDefaultDeclaration',
-          line: 5
+          line: 5,
+          column: 7,
+          endLine: 5,
+          endColumn: 23
         }
       ]
     },
@@ -126,8 +124,10 @@ ruleTester.run('require-direct-export', rule, {
       errors: [
         {
           message: 'Expected the component literal to be directly exported.',
-          type: 'ExportDefaultDeclaration',
-          line: 1
+          line: 1,
+          column: 1,
+          endLine: 1,
+          endColumn: 38
         }
       ]
     },
@@ -137,8 +137,10 @@ ruleTester.run('require-direct-export', rule, {
       errors: [
         {
           message: 'Expected the component literal to be directly exported.',
-          type: 'ExportDefaultDeclaration',
-          line: 1
+          line: 1,
+          column: 1,
+          endLine: 1,
+          endColumn: 30
         }
       ]
     },
@@ -148,8 +150,10 @@ ruleTester.run('require-direct-export', rule, {
       errors: [
         {
           message: 'Expected the component literal to be directly exported.',
-          type: 'ExportDefaultDeclaration',
-          line: 1
+          line: 1,
+          column: 1,
+          endLine: 1,
+          endColumn: 24
         }
       ]
     },
@@ -163,8 +167,10 @@ ruleTester.run('require-direct-export', rule, {
       errors: [
         {
           message: 'Expected the component literal to be directly exported.',
-          type: 'ExportDefaultDeclaration',
-          line: 1
+          line: 1,
+          column: 1,
+          endLine: 5,
+          endColumn: 8
         }
       ]
     },
@@ -176,8 +182,10 @@ ruleTester.run('require-direct-export', rule, {
       errors: [
         {
           message: 'Expected the component literal to be directly exported.',
-          type: 'ExportDefaultDeclaration',
-          line: 1
+          line: 1,
+          column: 1,
+          endLine: 3,
+          endColumn: 8
         }
       ]
     },
@@ -192,8 +200,10 @@ ruleTester.run('require-direct-export', rule, {
       errors: [
         {
           message: 'Expected the component literal to be directly exported.',
-          type: 'ExportDefaultDeclaration',
-          line: 5
+          line: 5,
+          column: 7,
+          endLine: 5,
+          endColumn: 23
         }
       ]
     },
diff --git a/tests/lib/rules/require-emit-validator.js b/tests/lib/rules/require-emit-validator.js
index b63248cd7..32d998682 100644
--- a/tests/lib/rules/require-emit-validator.js
+++ b/tests/lib/rules/require-emit-validator.js
@@ -4,17 +4,12 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/require-emit-validator')
+const {
+  getTypeScriptFixtureTestOptions
+} = require('../../test-utils/typescript')
 
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const ruleTester = new RuleTester()
 ruleTester.run('require-emit-validator', rule, {
@@ -30,7 +25,7 @@ ruleTester.run('require-emit-validator', rule, {
           }
         }
       `,
-      parserOptions: { ecmaVersion: 2018, sourceType: 'module' }
+      languageOptions: { ecmaVersion: 2018, sourceType: 'module' }
     },
     {
       filename: 'test.vue',
@@ -41,7 +36,7 @@ ruleTester.run('require-emit-validator', rule, {
           }
         }
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' }
+      languageOptions: { ecmaVersion: 6, sourceType: 'module' }
     },
     {
       filename: 'test.vue',
@@ -54,7 +49,7 @@ ruleTester.run('require-emit-validator', rule, {
           }
         }
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' }
+      languageOptions: { ecmaVersion: 6, sourceType: 'module' }
     },
     {
       filename: 'test.vue',
@@ -65,7 +60,7 @@ ruleTester.run('require-emit-validator', rule, {
           }
         }
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' }
+      languageOptions: { ecmaVersion: 6, sourceType: 'module' }
     },
     {
       filename: 'test.vue',
@@ -76,7 +71,7 @@ ruleTester.run('require-emit-validator', rule, {
           }
         }
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' }
+      languageOptions: { ecmaVersion: 6, sourceType: 'module' }
     },
     {
       filename: 'test.vue',
@@ -85,7 +80,7 @@ ruleTester.run('require-emit-validator', rule, {
           emits
         }
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' }
+      languageOptions: { ecmaVersion: 6, sourceType: 'module' }
     },
     {
       filename: 'test.vue',
@@ -94,7 +89,7 @@ ruleTester.run('require-emit-validator', rule, {
           emits: externalEmits
         }
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' }
+      languageOptions: { ecmaVersion: 6, sourceType: 'module' }
     },
     {
       filename: 'test.vue',
@@ -103,7 +98,7 @@ ruleTester.run('require-emit-validator', rule, {
           emits: []
         }
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' }
+      languageOptions: { ecmaVersion: 6, sourceType: 'module' }
     },
     {
       filename: 'test.vue',
@@ -112,7 +107,7 @@ ruleTester.run('require-emit-validator', rule, {
           emits: {}
         }
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' }
+      languageOptions: { ecmaVersion: 6, sourceType: 'module' }
     },
     {
       filename: 'test.vue',
@@ -123,8 +118,11 @@ ruleTester.run('require-emit-validator', rule, {
           }
         })
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' },
-      parser: require.resolve('@typescript-eslint/parser')
+      languageOptions: {
+        parser: require('@typescript-eslint/parser'),
+        ecmaVersion: 6,
+        sourceType: 'module'
+      }
     },
     {
       filename: 'test.vue',
@@ -137,8 +135,11 @@ ruleTester.run('require-emit-validator', rule, {
           },
         })
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' },
-      parser: require.resolve('@typescript-eslint/parser')
+      languageOptions: {
+        parser: require('@typescript-eslint/parser'),
+        ecmaVersion: 6,
+        sourceType: 'module'
+      }
     },
     {
       filename: 'test.vue',
@@ -150,7 +151,7 @@ ruleTester.run('require-emit-validator', rule, {
           }
         }
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' }
+      languageOptions: { ecmaVersion: 6, sourceType: 'module' }
     },
     {
       filename: 'test.vue',
@@ -162,7 +163,7 @@ ruleTester.run('require-emit-validator', rule, {
           }
         }
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' }
+      languageOptions: { ecmaVersion: 6, sourceType: 'module' }
     },
     {
       filename: 'test.vue',
@@ -171,12 +172,20 @@ ruleTester.run('require-emit-validator', rule, {
       const emit = defineEmits<(e: 'foo')=>void>()
       </script>
       `,
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions: {
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
         ecmaVersion: 6,
         sourceType: 'module',
-        parser: require.resolve('@typescript-eslint/parser')
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
       }
+    },
+    {
+      code: `
+      <script setup lang="ts">
+      import {Emits1 as Emits} from './test01'
+      const emit = defineEmits<Emits>()
+      </script>`,
+      ...getTypeScriptFixtureTestOptions()
     }
   ],
 
@@ -188,7 +197,7 @@ ruleTester.run('require-emit-validator', rule, {
           emits: ['foo', bar, \`baz\`, foo()]
         }
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' },
+      languageOptions: { ecmaVersion: 6, sourceType: 'module' },
       errors: [
         {
           messageId: 'missing',
@@ -219,7 +228,7 @@ ruleTester.run('require-emit-validator', rule, {
           emits: ['foo', bar, \`baz\`, foo()]
         })
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' },
+      languageOptions: { ecmaVersion: 6, sourceType: 'module' },
       errors: [
         {
           messageId: 'missing',
@@ -251,7 +260,7 @@ ruleTester.run('require-emit-validator', rule, {
             foo: null
           }
         }`,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' },
+      languageOptions: { ecmaVersion: 6, sourceType: 'module' },
       errors: [
         {
           messageId: 'skipped',
@@ -280,7 +289,7 @@ ruleTester.run('require-emit-validator', rule, {
             bar: (payload) => {}
           }
         }`,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' },
+      languageOptions: { ecmaVersion: 6, sourceType: 'module' },
       errors: [
         {
           messageId: 'skipped',
@@ -312,7 +321,7 @@ ruleTester.run('require-emit-validator', rule, {
           }
         }
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' },
+      languageOptions: { ecmaVersion: 6, sourceType: 'module' },
       errors: [
         {
           messageId: 'missing',
@@ -330,8 +339,11 @@ ruleTester.run('require-emit-validator', rule, {
           }
         });
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' },
-      parser: require.resolve('@typescript-eslint/parser'),
+      languageOptions: {
+        parser: require('@typescript-eslint/parser'),
+        ecmaVersion: 6,
+        sourceType: 'module'
+      },
       errors: [
         {
           messageId: 'missing',
@@ -347,8 +359,8 @@ ruleTester.run('require-emit-validator', rule, {
       const emit = defineEmits(['foo'])
       </script>
       `,
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions: {
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
         ecmaVersion: 6,
         sourceType: 'module'
       },
@@ -367,8 +379,8 @@ ruleTester.run('require-emit-validator', rule, {
       const emit = defineEmits({foo:null})
       </script>
       `,
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions: {
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
         ecmaVersion: 6,
         sourceType: 'module'
       },
@@ -376,7 +388,17 @@ ruleTester.run('require-emit-validator', rule, {
         {
           messageId: 'skipped',
           data: { name: 'foo' },
-          line: 3
+          line: 3,
+          suggestions: [
+            {
+              messageId: 'emptyValidation',
+              output: `
+      <script setup>
+      const emit = defineEmits({foo:() => true})
+      </script>
+      `
+            }
+          ]
         }
       ]
     }
diff --git a/tests/lib/rules/require-explicit-emits.js b/tests/lib/rules/require-explicit-emits.js
index 1146cd2cc..da9b87246 100644
--- a/tests/lib/rules/require-explicit-emits.js
+++ b/tests/lib/rules/require-explicit-emits.js
@@ -4,12 +4,15 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/require-explicit-emits')
+const {
+  getTypeScriptFixtureTestOptions
+} = require('../../test-utils/typescript')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
     ecmaVersion: 2020,
     sourceType: 'module'
   }
@@ -431,7 +434,9 @@ tester.run('require-explicit-emits', rule, {
       }>()
       </script>
       `,
-      parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      languageOptions: {
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      }
     },
     {
       filename: 'test.vue',
@@ -443,7 +448,9 @@ tester.run('require-explicit-emits', rule, {
       defineEmits<(e: 'foo') => void>()
       </script>
       `,
-      parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      languageOptions: {
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      }
     },
     {
       filename: 'test.vue',
@@ -456,7 +463,24 @@ tester.run('require-explicit-emits', rule, {
       defineEmits<(e: 'foo' | 'bar') => void>()
       </script>
       `,
-      parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      languageOptions: {
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div @click="emit('foo')"/>
+        <div @click="emit('bar')"/>
+      </template>
+      <script setup lang="ts">
+      const emit = defineEmits<(e: 'foo' | 'bar') => void>()
+      </script>
+      `,
+      languageOptions: {
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      }
     },
 
     // unknown emits definition
@@ -593,6 +617,46 @@ tester.run('require-explicit-emits', rule, {
       </script>
       `,
       options: [{ allowProps: true }]
+    },
+    {
+      // new syntax in Vue 3.3
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      const emit = defineEmits<{foo: [], bar:[number]}>()
+      emit('foo')
+      emit('bar', 42)
+      </script>
+      `,
+      languageOptions: {
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      }
+    },
+    {
+      // new syntax in Vue 3.3
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      type Emits = {foo: [], bar:[number]}
+      const emit = defineEmits<Emits>()
+      emit('foo')
+      emit('bar', 42)
+      </script>
+      `,
+      languageOptions: {
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      }
+    },
+    {
+      code: `
+      <script setup lang="ts">
+      import {Emits1 as Emits} from './test01'
+      const emit = defineEmits<Emits>()
+      emit('foo')
+      emit('bar')
+      emit('baz')
+      </script>`,
+      ...getTypeScriptFixtureTestOptions()
     }
   ],
   invalid: [
@@ -1663,8 +1727,86 @@ emits: {'foo': null}
       </script>
       `,
       errors: [
-        'The "foo" event has been triggered but not declared on `emits` option.',
-        'The "bar" event has been triggered but not declared on `emits` option.'
+        {
+          message:
+            'The "foo" event has been triggered but not declared on `emits` option.',
+          suggestions: [
+            {
+              desc: 'Add the `emits` option with array syntax and define "foo" event.',
+              output: `
+      <script>
+      export default {
+emits: ['foo'],
+        methods: {
+          click () {
+            const vm = this
+            vm?.$emit?.('foo')
+            ;(vm?.$emit)?.('bar')
+          }
+        }
+      }
+      </script>
+      `
+            },
+            {
+              desc: 'Add the `emits` option with object syntax and define "foo" event.',
+              output: `
+      <script>
+      export default {
+emits: {'foo': null},
+        methods: {
+          click () {
+            const vm = this
+            vm?.$emit?.('foo')
+            ;(vm?.$emit)?.('bar')
+          }
+        }
+      }
+      </script>
+      `
+            }
+          ]
+        },
+        {
+          message:
+            'The "bar" event has been triggered but not declared on `emits` option.',
+          suggestions: [
+            {
+              desc: 'Add the `emits` option with array syntax and define "bar" event.',
+              output: `
+      <script>
+      export default {
+emits: ['bar'],
+        methods: {
+          click () {
+            const vm = this
+            vm?.$emit?.('foo')
+            ;(vm?.$emit)?.('bar')
+          }
+        }
+      }
+      </script>
+      `
+            },
+            {
+              desc: 'Add the `emits` option with object syntax and define "bar" event.',
+              output: `
+      <script>
+      export default {
+emits: {'bar': null},
+        methods: {
+          click () {
+            const vm = this
+            vm?.$emit?.('foo')
+            ;(vm?.$emit)?.('bar')
+          }
+        }
+      }
+      </script>
+      `
+            }
+          ]
+        }
       ]
     },
     {
@@ -1680,8 +1822,74 @@ emits: {'foo': null}
       </script>
       `,
       errors: [
-        'The "foo" event has been triggered but not declared on `emits` option.',
-        'The "bar" event has been triggered but not declared on `emits` option.'
+        {
+          message:
+            'The "foo" event has been triggered but not declared on `emits` option.',
+          suggestions: [
+            {
+              desc: 'Add the `emits` option with array syntax and define "foo" event.',
+              output: `
+      <script>
+      export default {
+emits: ['foo'],
+        setup(p, c) {
+          c?.emit?.('foo')
+          ;(c?.emit)?.('bar')
+        }
+      }
+      </script>
+      `
+            },
+            {
+              desc: 'Add the `emits` option with object syntax and define "foo" event.',
+              output: `
+      <script>
+      export default {
+emits: {'foo': null},
+        setup(p, c) {
+          c?.emit?.('foo')
+          ;(c?.emit)?.('bar')
+        }
+      }
+      </script>
+      `
+            }
+          ]
+        },
+        {
+          message:
+            'The "bar" event has been triggered but not declared on `emits` option.',
+          suggestions: [
+            {
+              desc: 'Add the `emits` option with array syntax and define "bar" event.',
+              output: `
+      <script>
+      export default {
+emits: ['bar'],
+        setup(p, c) {
+          c?.emit?.('foo')
+          ;(c?.emit)?.('bar')
+        }
+      }
+      </script>
+      `
+            },
+            {
+              desc: 'Add the `emits` option with object syntax and define "bar" event.',
+              output: `
+      <script>
+      export default {
+emits: {'bar': null},
+        setup(p, c) {
+          c?.emit?.('foo')
+          ;(c?.emit)?.('bar')
+        }
+      }
+      </script>
+      `
+            }
+          ]
+        }
       ]
     },
     // allowProps
@@ -1707,15 +1915,141 @@ emits: {'foo': null}
       errors: [
         {
           line: 3,
-          messageId: 'missing'
+          messageId: 'missing',
+          suggestions: [
+            {
+              desc: 'Add the `emits` option with array syntax and define "foo" event.',
+              output: `
+      <template>
+        <button @click="$emit('foo')"/>
+      </template>
+      <script>
+      export default {
+        props: ['foo'],
+emits: ['foo'],
+        methods: {
+          fn() { this.$emit('foo') }
+        },
+        setup(p, ctx) {
+          ctx.emit('foo')
+        }
+      }
+      </script>
+      `
+            },
+            {
+              desc: 'Add the `emits` option with object syntax and define "foo" event.',
+              output: `
+      <template>
+        <button @click="$emit('foo')"/>
+      </template>
+      <script>
+      export default {
+        props: ['foo'],
+emits: {'foo': null},
+        methods: {
+          fn() { this.$emit('foo') }
+        },
+        setup(p, ctx) {
+          ctx.emit('foo')
+        }
+      }
+      </script>
+      `
+            }
+          ]
         },
         {
           line: 9,
-          messageId: 'missing'
+          messageId: 'missing',
+          suggestions: [
+            {
+              desc: 'Add the `emits` option with array syntax and define "foo" event.',
+              output: `
+      <template>
+        <button @click="$emit('foo')"/>
+      </template>
+      <script>
+      export default {
+        props: ['foo'],
+emits: ['foo'],
+        methods: {
+          fn() { this.$emit('foo') }
+        },
+        setup(p, ctx) {
+          ctx.emit('foo')
+        }
+      }
+      </script>
+      `
+            },
+            {
+              desc: 'Add the `emits` option with object syntax and define "foo" event.',
+              output: `
+      <template>
+        <button @click="$emit('foo')"/>
+      </template>
+      <script>
+      export default {
+        props: ['foo'],
+emits: {'foo': null},
+        methods: {
+          fn() { this.$emit('foo') }
+        },
+        setup(p, ctx) {
+          ctx.emit('foo')
+        }
+      }
+      </script>
+      `
+            }
+          ]
         },
         {
           line: 12,
-          messageId: 'missing'
+          messageId: 'missing',
+          suggestions: [
+            {
+              desc: 'Add the `emits` option with array syntax and define "foo" event.',
+              output: `
+      <template>
+        <button @click="$emit('foo')"/>
+      </template>
+      <script>
+      export default {
+        props: ['foo'],
+emits: ['foo'],
+        methods: {
+          fn() { this.$emit('foo') }
+        },
+        setup(p, ctx) {
+          ctx.emit('foo')
+        }
+      }
+      </script>
+      `
+            },
+            {
+              desc: 'Add the `emits` option with object syntax and define "foo" event.',
+              output: `
+      <template>
+        <button @click="$emit('foo')"/>
+      </template>
+      <script>
+      export default {
+        props: ['foo'],
+emits: {'foo': null},
+        methods: {
+          fn() { this.$emit('foo') }
+        },
+        setup(p, ctx) {
+          ctx.emit('foo')
+        }
+      }
+      </script>
+      `
+            }
+          ]
         }
       ]
     },
@@ -1795,7 +2129,9 @@ emits: {'foo': null}
       }>()
       </script>
       `,
-      parserOptions: { parser: require.resolve('@typescript-eslint/parser') },
+      languageOptions: {
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      },
       errors: [
         {
           message:
@@ -1814,7 +2150,9 @@ emits: {'foo': null}
       defineEmits<(e: 'foo') => void>()
       </script>
       `,
-      parserOptions: { parser: require.resolve('@typescript-eslint/parser') },
+      languageOptions: {
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      },
       errors: [
         {
           message:
@@ -1849,7 +2187,9 @@ emits: {'foo': null}
       emit('bar')
       </script>
       `,
-      parserOptions: { parser: require.resolve('@typescript-eslint/parser') },
+      languageOptions: {
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      },
       errors: [
         {
           message:
@@ -1857,6 +2197,118 @@ emits: {'foo': null}
           line: 5
         }
       ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const emit = defineEmits([\`foo\`])
+      emit(\`foo\`);
+      emit(\`bar\`)
+      </script>
+      `,
+      errors: [
+        {
+          message:
+            'The "bar" event has been triggered but not declared on `defineEmits`.',
+          line: 5,
+          suggestions: [
+            {
+              desc: 'Add the "bar" to `defineEmits`.',
+              output: `
+      <script setup>
+      const emit = defineEmits([\`foo\`, 'bar'])
+      emit(\`foo\`);
+      emit(\`bar\`)
+      </script>
+      `
+            }
+          ]
+        }
+      ]
+    },
+    {
+      // new syntax in Vue 3.3
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      const emit = defineEmits<{foo: []}>()
+      emit('foo')
+      emit('bar')
+      </script>
+      `,
+      languageOptions: {
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      },
+      errors: [
+        {
+          message:
+            'The "bar" event has been triggered but not declared on `defineEmits`.',
+          line: 5
+        }
+      ]
+    },
+    {
+      // new syntax in Vue 3.3
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      type Emits = {foo: []}
+      const emit = defineEmits<Emits>()
+      emit('foo')
+      emit('bar')
+      </script>
+      `,
+      languageOptions: {
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      },
+      errors: [
+        {
+          message:
+            'The "bar" event has been triggered but not declared on `defineEmits`.',
+          line: 6
+        }
+      ]
+    },
+    {
+      code: `
+      <script setup lang="ts">
+      import {Emits1 as Emits} from './test01'
+      const emit = defineEmits<Emits>()
+      emit('foo')
+      emit('bar')
+      emit('baz')
+      emit('qux')
+      </script>`,
+      errors: [
+        {
+          message:
+            'The "qux" event has been triggered but not declared on `defineEmits`.',
+          line: 8
+        }
+      ],
+      ...getTypeScriptFixtureTestOptions()
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div @click="emit('bar')"/>
+      </template>
+      <script setup lang="ts">
+      const emit = defineEmits<(e: 'foo') => void>()
+      </script>
+      `,
+      languageOptions: {
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      },
+      errors: [
+        {
+          message:
+            'The "bar" event has been triggered but not declared on `defineEmits`.',
+          line: 3
+        }
+      ]
     }
   ]
 })
diff --git a/tests/lib/rules/require-explicit-slots.js b/tests/lib/rules/require-explicit-slots.js
new file mode 100644
index 000000000..afee739a6
--- /dev/null
+++ b/tests/lib/rules/require-explicit-slots.js
@@ -0,0 +1,897 @@
+/**
+ * @author Mussin Benarbia
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/require-explicit-slots')
+const {
+  getTypeScriptFixtureTestOptions
+} = require('../../test-utils/typescript')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    parserOptions: {
+      parser: require.resolve('@typescript-eslint/parser')
+    }
+  }
+})
+
+tester.run('require-explicit-slots', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot />
+        </div>
+      </template>
+      <script setup lang="ts">
+      defineSlots<{
+        default(props: { msg: string }): any
+      }>()
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot />
+        </div>
+      </template>
+      <script setup lang="ts">
+      interface Slots {
+        default(props: { msg: string }): any
+      }
+      defineSlots<Slots>()
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot />
+        </div>
+      </template>
+      <script setup lang="ts">
+      type Slots = {
+        default(props: { msg: string }): any
+      }
+      defineSlots<Slots>()
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot></slot>
+        </div>
+      </template>
+      <script setup lang="ts">
+      defineSlots<{
+        default(props: { msg: string }): any
+      }>()
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot></slot>
+        </div>
+      </template>
+      <script setup lang="ts">
+      interface Slots {
+        default(props: { msg: string }): any
+      }
+      defineSlots<Slots>()
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot></slot>
+        </div>
+      </template>
+      <script setup lang="ts">
+      type Slots = {
+        default(props: { msg: string }): any
+      }
+      defineSlots<Slots>()
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo"></slot>
+        </div>
+      </template>
+      <script setup lang="ts">
+      defineSlots<{
+        foo(props: { msg: string }): any
+      }>()
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo"></slot>
+        </div>
+      </template>
+      <script setup lang="ts">
+      interface Slots {
+        foo(props: { msg: string }): any
+      }
+      defineSlots<Slots>()
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo"></slot>
+        </div>
+      </template>
+      <script setup lang="ts">
+      type Slots = {
+        foo(props: { msg: string }): any
+      }
+      defineSlots<Slots>()
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo"></slot>
+        </div>
+      </template>
+      <script setup lang="ts">
+      defineSlots<{
+        foo: (props: { msg: string }) => any
+      }>()
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo"></slot>
+        </div>
+      </template>
+      <script setup lang="ts">
+      interface Slots {
+        foo: (props: { msg: string }) => any
+      }
+      defineSlots<Slots>()
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo"></slot>
+        </div>
+      </template>
+      <script setup lang="ts">
+      type Slots = {
+        foo: (props: { msg: string }) => any
+      }
+      defineSlots<Slots>()
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo-bar"></slot>
+        </div>
+      </template>
+      <script setup lang="ts">
+      defineSlots<{
+        'foo-bar'(props: { msg: string }): any
+      }>()
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo-bar"></slot>
+        </div>
+      </template>
+      <script setup lang="ts">
+      interface Slots {
+        'foo-bar'(props: { msg: string }): any
+      }
+      defineSlots<Slots>()
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo-bar"></slot>
+        </div>
+      </template>
+      <script setup lang="ts">
+      type Slots = {
+        'foo-bar'(props: { msg: string }): any
+      }
+      defineSlots<Slots>()
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot />
+        </div>
+      </template>
+      <script lang="ts">
+      import { SlotsType } from 'vue'
+
+      defineComponent({
+        slots: Object as SlotsType<{
+          default: { msg: string }
+        }>,
+      })
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot></slot>
+        </div>
+      </template>
+      <script lang="ts">
+      import { SlotsType } from 'vue'
+
+      defineComponent({
+        slots: Object as SlotsType<{
+          default: { msg: string }
+        }>,
+      })
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot></slot>
+          <slot name="foo"></slot>
+        </div>
+      </template>
+      <script setup lang="ts">
+      import type {Slots1 as Slots} from './test01'
+      defineSlots<Slots>()
+      </script>`,
+      ...getTypeScriptFixtureTestOptions()
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo"></slot>
+        </div>
+      </template>
+      <script lang="ts">
+      import { SlotsType } from 'vue'
+
+      defineComponent({
+        slots: Object as SlotsType<{
+          foo(props: { msg: string }): any
+        }>,
+      })
+      </script>`
+    },
+    // does not report any error if the script is not TS
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo"></slot>
+        </div>
+      </template>
+      <script setup>
+      </script>`,
+      languageOptions: {
+        parserOptions: {
+          parser: null
+        }
+      }
+    },
+    // attribute binding
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot :name="'foo'"></slot>
+          <slot :name="\`bar\`"></slot>
+        </div>
+      </template>
+      <script setup lang="ts">
+      defineSlots<{
+        foo(props: { msg: string }): any
+        bar(props: { msg: string }): any
+      }>()
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot :name="'foo'"></slot>
+          <slot :name="\`bar\`"></slot>
+        </div>
+      </template>
+      <script setup lang="ts">
+      interface Slots {
+        foo(props: { msg: string }): any
+        bar(props: { msg: string }): any
+      }
+      defineSlots<Slots>()
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot :name="'foo'"></slot>
+          <slot :name="\`bar\`"></slot>
+        </div>
+      </template>
+      <script setup lang="ts">
+      type Slots = {
+        foo(props: { msg: string }): any
+        bar(props: { msg: string }): any
+      }
+      defineSlots<Slots>()
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot :name="bar"></slot>
+        </div>
+      </template>
+      <script setup lang="ts">
+      defineSlots<{
+        default(props: { msg: string }): any
+      }>()
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot :name="bar"></slot>
+        </div>
+      </template>
+      <script setup lang="ts">
+      interface Slots {
+        default(props: { msg: string }): any
+      }
+      defineSlots<Slots>()
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot :name="bar"></slot>
+        </div>
+      </template>
+      <script setup lang="ts">
+      type Slots = {
+        default(props: { msg: string }): any
+      }
+      defineSlots<Slots>()
+      </script>`
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot />
+        </div>
+      </template>
+      <script setup lang="ts">
+      </script>`,
+      errors: [
+        {
+          message: 'Slots must be explicitly defined.'
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot></slot>
+        </div>
+      </template>
+      <script setup lang="ts">
+      </script>`,
+      errors: [
+        {
+          message: 'Slots must be explicitly defined.'
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo" />
+        </div>
+      </template>
+      <script setup lang="ts">
+      </script>`,
+      errors: [
+        {
+          message: 'Slots must be explicitly defined.'
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo" />
+        </div>
+      </template>
+      <script setup lang="ts">
+      defineSlots<{
+        default(props: { msg: string }): any
+      }>()
+      </script>`,
+      errors: [
+        {
+          message: 'Slots must be explicitly defined.'
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo" />
+        </div>
+      </template>
+      <script setup lang="ts">
+      interface Slots {
+        default(props: { msg: string }): any
+      }
+      defineSlots<Slots>()
+      </script>`,
+      errors: [
+        {
+          message: 'Slots must be explicitly defined.'
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo" />
+        </div>
+      </template>
+      <script setup lang="ts">
+      type Slots = {
+        default(props: { msg: string }): any
+      }
+      defineSlots<Slots>()
+      </script>`,
+      errors: [
+        {
+          message: 'Slots must be explicitly defined.'
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo" />
+        </div>
+      </template>
+      <script setup lang="ts">
+      defineSlots<{
+        default: (props: { msg: string }) => any
+      }>()
+      </script>`,
+      errors: [
+        {
+          message: 'Slots must be explicitly defined.'
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo" />
+        </div>
+      </template>
+      <script setup lang="ts">
+      interface Slots {
+        default: (props: { msg: string }) => any
+      }
+      defineSlots<Slots>()
+      </script>`,
+      errors: [
+        {
+          message: 'Slots must be explicitly defined.'
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo" />
+        </div>
+      </template>
+      <script setup lang="ts">
+      type Slots = {
+        default: (props: { msg: string }) => any
+      }
+      defineSlots<Slots>()
+      </script>`,
+      errors: [
+        {
+          message: 'Slots must be explicitly defined.'
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name />
+        </div>
+      </template>
+      <script setup lang="ts">
+      defineSlots<{
+        'foo-bar'(props: { msg: string }): any
+      }>()
+      </script>`,
+      errors: [
+        {
+          message: 'Slots must be explicitly defined.'
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name />
+        </div>
+      </template>
+      <script setup lang="ts">
+      interface Slots {
+        'foo-bar'(props: { msg: string }): any
+      }
+      defineSlots<Slots>()
+      </script>`,
+      errors: [
+        {
+          message: 'Slots must be explicitly defined.'
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name />
+        </div>
+      </template>
+      <script setup lang="ts">
+      type Slots = {
+        'foo-bar'(props: { msg: string }): any
+      }
+      defineSlots<Slots>()
+      </script>`,
+      errors: [
+        {
+          message: 'Slots must be explicitly defined.'
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo" />
+        </div>
+      </template>
+      <script lang="ts">
+      import { SlotsType } from 'vue'
+
+      defineComponent({
+        slots: Object as SlotsType<{
+          default: { msg: string }
+        }>,
+      })
+      </script>`,
+      errors: [
+        {
+          message: 'Slots must be explicitly defined.'
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo"></slot>
+          <slot name="bar"></slot>
+        </div>
+      </template>
+      <script setup lang="ts">
+      import type {Slots1 as Slots} from './test01'
+      defineSlots<Slots>()
+      </script>`,
+      errors: [
+        {
+          message: 'Slots must be explicitly defined.',
+          line: 5,
+          column: 11
+        }
+      ],
+      ...getTypeScriptFixtureTestOptions()
+    },
+    {
+      // ignore attribute binding except string literal
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot :name="'foo'"></slot>
+        </div>
+      </template>
+      <script setup lang="ts">
+      defineSlots<{
+        default(props: { msg: string }): any
+      }>()
+      </script>`,
+      errors: [
+        {
+          message: 'Slots must be explicitly defined.'
+        }
+      ]
+    },
+    {
+      // ignore attribute binding except string literal
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot :name="'foo'"></slot>
+        </div>
+      </template>
+      <script setup lang="ts">
+      interface Slots {
+        default(props: { msg: string }): any
+      }
+      defineSlots<Slots>()
+      </script>`,
+      errors: [
+        {
+          message: 'Slots must be explicitly defined.'
+        }
+      ]
+    },
+    {
+      // ignore attribute binding except string literal
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot :name="'foo'"></slot>
+        </div>
+      </template>
+      <script setup lang="ts">
+      type Slots = {
+        default(props: { msg: string }): any
+      }
+      defineSlots<Slots>()
+      </script>`,
+      errors: [
+        {
+          message: 'Slots must be explicitly defined.'
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo" />
+        </div>
+      </template>
+      <script setup lang="ts">
+      defineSlots<{
+        foo(props: { msg: string }): any
+        foo(props: { msg: string }): any
+      }>()
+      </script>`,
+      errors: [
+        {
+          message: 'Slot foo is already defined.'
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo" />
+        </div>
+      </template>
+      <script setup lang="ts">
+      interface Slots {
+        foo(props: { msg: string }): any
+        foo(props: { msg: string }): any
+      }
+      defineSlots<Slots>()
+      </script>`,
+      errors: [
+        {
+          message: 'Slot foo is already defined.'
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo" />
+        </div>
+      </template>
+      <script setup lang="ts">
+      type Slots = {
+        foo(props: { msg: string }): any
+        foo(props: { msg: string }): any
+      }
+      defineSlots<Slots>()
+      </script>`,
+      errors: [
+        {
+          message: 'Slot foo is already defined.'
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo" />
+        </div>
+      </template>
+      <script setup lang="ts">
+      defineSlots<{
+        foo(props: { msg: string }): any
+      }>()
+      defineSlots<{
+        default(props: { msg: string }): any,
+        foo(props: { msg: string }): any
+      }>()
+      </script>`,
+      errors: [
+        {
+          message: 'Slot foo is already defined.'
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo" />
+        </div>
+      </template>
+      <script setup lang="ts">
+      interface SlotsA {
+        foo(props: { msg: string }): any
+      }
+      defineSlots<SlotsA>()
+      interface SlotsB {
+        default(props: { msg: string }): any,
+        foo(props: { msg: string }): any
+      }
+      defineSlots<SlotsB>()
+      </script>`,
+      errors: [
+        {
+          message: 'Slot foo is already defined.'
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo" />
+        </div>
+      </template>
+      <script setup lang="ts">
+      type SlotsA = {
+        foo(props: { msg: string }): any
+      }
+      defineSlots<SlotsA>()
+      type SlotsB = {
+        default(props: { msg: string }): any,
+        foo(props: { msg: string }): any
+      }
+      defineSlots<SlotsB>()
+      </script>`,
+      errors: [
+        {
+          message: 'Slot foo is already defined.'
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/require-expose.js b/tests/lib/rules/require-expose.js
index 64d073c24..2c6c4dbb5 100644
--- a/tests/lib/rules/require-expose.js
+++ b/tests/lib/rules/require-expose.js
@@ -5,11 +5,11 @@
 'use strict'
 
 const rule = require('../../../lib/rules/require-expose')
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
     ecmaVersion: 2020,
     sourceType: 'module'
   }
@@ -95,15 +95,13 @@ tester.run('require-expose', rule, {
       </script>
       `
     },
-    {
-      code: `
+    `
       Vue.mixin({
         methods: {
           foo () {}
         }
       })
-      `
-    },
+    `,
     {
       filename: 'test.vue',
       code: `
@@ -286,6 +284,7 @@ expose: ["foo", "bar"],
       `,
       errors: [
         {
+          messageId: 'requireExpose',
           suggestions: [
             {
               desc: 'Add the `expose` option to give an empty array.',
@@ -331,6 +330,7 @@ expose: ["x", "foo", "bar"],
       `,
       errors: [
         {
+          messageId: 'requireExpose',
           suggestions: [
             {
               desc: 'Add the `expose` option to give an empty array.',
@@ -355,6 +355,7 @@ expose: []
       `,
       errors: [
         {
+          messageId: 'requireExpose',
           suggestions: [
             {
               desc: 'Add the `expose` option to give an empty array.',
diff --git a/tests/lib/rules/require-macro-variable-name.js b/tests/lib/rules/require-macro-variable-name.js
new file mode 100644
index 000000000..3a37d5c1d
--- /dev/null
+++ b/tests/lib/rules/require-macro-variable-name.js
@@ -0,0 +1,324 @@
+/**
+ * @author ItMaga
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/require-macro-variable-name')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+const customOptions = {
+  defineProps: 'customProps',
+  defineEmits: 'customEmits',
+  defineSlots: 'customSlots',
+  useSlots: 'customUseSlots',
+  useAttrs: 'customUseAttrs'
+}
+
+tester.run('require-macro-variable-name', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+        const props = defineProps({})
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+        const { foo, bar } = defineProps(['foo', 'bar'])
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+        const { foo = 42, bar = 'abc' } = defineProps(['foo', 'bar'])
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+        import { toRef } from 'vue'
+
+        const props = defineProps(['foo', 'bar'])
+        const foo = toRef(props, 'foo')
+        const bar = toRef(props, 'bar')
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+        const props = withDefaults(defineProps(['foo', 'bar']), {
+          foo: 42,
+          bar: 'abc'
+        })
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+        const ${customOptions.defineProps} = defineProps(['foo', 'bar'])
+        const ${customOptions.defineEmits} = defineEmits(['baz'])
+      </script>
+      `,
+      options: [customOptions]
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+        const customName = defineProps({})
+      </script>
+      `,
+      errors: [
+        {
+          message: 'The variable name of "defineProps" must be "props".',
+          line: 3,
+          column: 15,
+          suggestions: [
+            {
+              desc: 'Change the variable name to "props".',
+              output: `
+      <script setup>
+        const props = defineProps({})
+      </script>
+      `
+            }
+          ]
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+        const emitsWrong = defineEmits({})
+        const slotsWrong = defineSlots({})
+        const attrsWrong = useAttrs({})
+      </script>
+      `,
+      errors: [
+        {
+          message: 'The variable name of "defineEmits" must be "emit".',
+          line: 3,
+          column: 15,
+          suggestions: [
+            {
+              desc: 'Change the variable name to "emit".',
+              output: `
+      <script setup>
+        const emit = defineEmits({})
+        const slotsWrong = defineSlots({})
+        const attrsWrong = useAttrs({})
+      </script>
+      `
+            }
+          ]
+        },
+        {
+          message: 'The variable name of "defineSlots" must be "slots".',
+          line: 4,
+          column: 15,
+          suggestions: [
+            {
+              desc: 'Change the variable name to "slots".',
+              output: `
+      <script setup>
+        const emitsWrong = defineEmits({})
+        const slots = defineSlots({})
+        const attrsWrong = useAttrs({})
+      </script>
+      `
+            }
+          ]
+        },
+        {
+          message: 'The variable name of "useAttrs" must be "attrs".',
+          line: 5,
+          column: 15,
+          suggestions: [
+            {
+              desc: 'Change the variable name to "attrs".',
+              output: `
+      <script setup>
+        const emitsWrong = defineEmits({})
+        const slotsWrong = defineSlots({})
+        const attrs = useAttrs({})
+      </script>
+      `
+            }
+          ]
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+        const slotsWrong = useSlots({})
+      </script>
+      `,
+      errors: [
+        {
+          message: 'The variable name of "useSlots" must be "slots".',
+          line: 3,
+          column: 15,
+          suggestions: [
+            {
+              desc: 'Change the variable name to "slots".',
+              output: `
+      <script setup>
+        const slots = useSlots({})
+      </script>
+      `
+            }
+          ]
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+        const propsWrong = withDefaults(defineProps(['foo', 'bar']), {
+          foo: 42,
+          bar: 'abc'
+        })
+      </script>
+      `,
+      errors: [
+        {
+          message: 'The variable name of "defineProps" must be "props".',
+          line: 3,
+          column: 15,
+          suggestions: [
+            {
+              desc: 'Change the variable name to "props".',
+              output: `
+      <script setup>
+        const props = withDefaults(defineProps(['foo', 'bar']), {
+          foo: 42,
+          bar: 'abc'
+        })
+      </script>
+      `
+            }
+          ]
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+        const slots = defineSlots({})
+        const useSlots = useSlots({})
+        const attrs = useAttrs({})
+      </script>
+      `,
+      options: [customOptions],
+      errors: [
+        {
+          message: `The variable name of "defineSlots" must be "${customOptions.defineSlots}".`,
+          line: 3,
+          column: 15,
+          suggestions: [
+            {
+              desc: `Change the variable name to "${customOptions.defineSlots}".`,
+              output: `
+      <script setup>
+        const ${customOptions.defineSlots} = defineSlots({})
+        const useSlots = useSlots({})
+        const attrs = useAttrs({})
+      </script>
+      `
+            }
+          ]
+        },
+        {
+          message: `The variable name of "useSlots" must be "${customOptions.useSlots}".`,
+          line: 4,
+          column: 15,
+          suggestions: [
+            {
+              desc: `Change the variable name to "${customOptions.useSlots}".`,
+              output: `
+      <script setup>
+        const slots = defineSlots({})
+        const ${customOptions.useSlots} = useSlots({})
+        const attrs = useAttrs({})
+      </script>
+      `
+            }
+          ]
+        },
+        {
+          message: `The variable name of "useAttrs" must be "${customOptions.useAttrs}".`,
+          line: 5,
+          column: 15,
+          suggestions: [
+            {
+              desc: `Change the variable name to "${customOptions.useAttrs}".`,
+              output: `
+      <script setup>
+        const slots = defineSlots({})
+        const useSlots = useSlots({})
+        const ${customOptions.useAttrs} = useAttrs({})
+      </script>
+      `
+            }
+          ]
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+        const slotsCustom = defineSlots({})
+        const attrsCustom = useAttrs({})
+      </script>
+      `,
+      options: [{ defineSlots: 'slotsCustom' }],
+      errors: [
+        {
+          message: `The variable name of "useAttrs" must be "attrs".`,
+          line: 4,
+          column: 15,
+          suggestions: [
+            {
+              desc: `Change the variable name to "attrs".`,
+              output: `
+      <script setup>
+        const slotsCustom = defineSlots({})
+        const attrs = useAttrs({})
+      </script>
+      `
+            }
+          ]
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/require-name-property.js b/tests/lib/rules/require-name-property.js
index 8f7200d63..517e8df58 100644
--- a/tests/lib/rules/require-name-property.js
+++ b/tests/lib/rules/require-name-property.js
@@ -5,9 +5,9 @@
 'use strict'
 
 const rule = require('../../../lib/rules/require-name-property')
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 
-const parserOptions = {
+const languageOptions = {
   ecmaVersion: 2018,
   sourceType: 'module'
 }
@@ -22,7 +22,7 @@ ruleTester.run('require-name-property', rule, {
           name: 'IssaName'
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'ValidComponent.vue',
@@ -31,7 +31,7 @@ ruleTester.run('require-name-property', rule, {
           name: undefined
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'ValidComponent.vue',
@@ -40,7 +40,7 @@ ruleTester.run('require-name-property', rule, {
           name: ''
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       code: `
@@ -50,7 +50,7 @@ ruleTester.run('require-name-property', rule, {
           }
         })
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -62,8 +62,10 @@ ruleTester.run('require-name-property', rule, {
       <script setup>
       </script>
       `,
-      parser: require.resolve('vue-eslint-parser'),
-      parserOptions
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      }
     }
   ],
 
@@ -74,11 +76,103 @@ ruleTester.run('require-name-property', rule, {
         export default {
         }
       `,
-      parserOptions,
+      languageOptions,
+      errors: [
+        {
+          message: 'Required name property is not set.',
+          line: 2,
+          column: 24,
+          endLine: 3,
+          endColumn: 10,
+          suggestions: [
+            {
+              desc: 'Add name property to component.',
+              output: `
+        export default {
+          name: 'InvalidComponent'
+        }
+      `
+            }
+          ]
+        }
+      ]
+    },
+    {
+      filename: 'InvalidComponent.vue',
+      code: `
+        export default defineComponent({
+        })
+      `,
+      languageOptions,
+      errors: [
+        {
+          message: 'Required name property is not set.',
+          line: 2,
+          column: 40,
+          endLine: 3,
+          endColumn: 10,
+          suggestions: [
+            {
+              desc: 'Add name property to component.',
+              output: `
+        export default defineComponent({
+          name: 'InvalidComponent'
+        })
+      `
+            }
+          ]
+        }
+      ]
+    },
+    {
+      filename: 'InvalidComponent.vue',
+      code: `
+        export default defineComponent({ })
+      `,
+      languageOptions,
+      errors: [
+        {
+          message: 'Required name property is not set.',
+          line: 2,
+          column: 40,
+          endLine: 2,
+          endColumn: 43,
+          suggestions: [
+            {
+              desc: 'Add name property to component.',
+              output: `
+        export default defineComponent({
+          name: 'InvalidComponent'
+        })
+      `
+            }
+          ]
+        }
+      ]
+    },
+    {
+      filename: 'InvalidComponent.vue',
+      code: `
+        export default { }
+      `,
+      languageOptions,
       errors: [
         {
           message: 'Required name property is not set.',
-          type: 'ObjectExpression'
+          line: 2,
+          column: 24,
+          endLine: 2,
+          endColumn: 27,
+          suggestions: [
+            {
+              desc: 'Add name property to component.',
+              output: `
+        export default {
+          name: 'InvalidComponent'
+        }
+      `
+            }
+          ]
         }
       ]
     },
@@ -89,14 +183,58 @@ ruleTester.run('require-name-property', rule, {
         nameNot: 'IssaNameNot'
         }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Required name property is not set.',
-          type: 'ObjectExpression'
+          line: 2,
+          column: 24,
+          endLine: 4,
+          endColumn: 10,
+          suggestions: [
+            {
+              desc: 'Add name property to component.',
+              output: `
+        export default {
+        name: 'InvalidComponent',
+        nameNot: 'IssaNameNot'
+        }
+      `
+            }
+          ]
         }
       ]
     },
+    {
+      filename: 'InvalidComponent.vue',
+      code: `
+        export default defineComponent({
+          nameNot: 'IssaNameNot'
+        })
+      `,
+      languageOptions,
+      errors: [
+        {
+          message: 'Required name property is not set.',
+          line: 2,
+          column: 40,
+          endLine: 4,
+          endColumn: 10,
+          suggestions: [
+            {
+              desc: 'Add name property to component.',
+              output: `
+        export default defineComponent({
+          name: 'InvalidComponent',
+          nameNot: 'IssaNameNot'
+        })
+      `
+            }
+          ]
+        }
+      ]
+    },
+
     {
       filename: 'InvalidComponent.vue',
       code: `
@@ -106,11 +244,27 @@ ruleTester.run('require-name-property', rule, {
           }
         }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Required name property is not set.',
-          type: 'ObjectExpression'
+          line: 2,
+          column: 24,
+          endLine: 6,
+          endColumn: 10,
+          suggestions: [
+            {
+              desc: 'Add name property to component.',
+              output: `
+        export default {
+          name: 'InvalidComponent',
+          computed: {
+            name() { return 'name' }
+          }
+        }
+      `
+            }
+          ]
         }
       ]
     },
@@ -121,11 +275,25 @@ ruleTester.run('require-name-property', rule, {
           [name]: 'IssaName'
         }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Required name property is not set.',
-          type: 'ObjectExpression'
+          line: 2,
+          column: 24,
+          endLine: 4,
+          endColumn: 10,
+          suggestions: [
+            {
+              desc: 'Add name property to component.',
+              output: `
+        export default {
+          name: 'InvalidComponent',
+          [name]: 'IssaName'
+        }
+      `
+            }
+          ]
         }
       ]
     }
diff --git a/tests/lib/rules/require-prop-comment.js b/tests/lib/rules/require-prop-comment.js
new file mode 100644
index 000000000..837f3c525
--- /dev/null
+++ b/tests/lib/rules/require-prop-comment.js
@@ -0,0 +1,280 @@
+/**
+ * @author CZB
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/require-prop-comment')
+const {
+  getTypeScriptFixtureTestOptions
+} = require('../../test-utils/typescript')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('require-prop-comment', rule, {
+  valid: [
+    `
+      <script setup>
+      export default defineComponent({
+        props: {
+          /** JSDoc comment */
+          a: Number,
+        }
+      })
+      </script>
+    `,
+    {
+      code: `
+      <script setup>
+      const goodProps = defineProps({
+        /* block comment */
+        a: Number,
+      })
+      </script>
+      `,
+      options: [{ type: 'block' }]
+    },
+    {
+      code: `
+      <script setup>
+      const goodProps = defineProps({
+        // line comment
+        a: Number,
+      })
+      </script>
+      `,
+      options: [{ type: 'line' }]
+    },
+    {
+      code: `
+      <script setup>
+      const goodProps = defineProps({
+        /** JSDoc comment */
+        a: Number,
+
+        /* block comment */
+        b: Number,
+
+        // line comment
+        c: Number,
+      })
+      </script>
+      `,
+      options: [{ type: 'any' }]
+    },
+    `
+      <script lang="ts">
+      export default defineComponent({
+        props: {
+          /** JSDoc comment */
+          a: Number
+        }
+      })
+      </script>
+    `,
+    {
+      code: `
+      <script setup lang="ts">
+      type PropType = {
+        /** JSDoc comment */
+        a: number
+      }
+      const props = defineProps<PropType>()
+      </script>
+      `,
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
+    },
+    {
+      code: `
+      <script setup lang="ts">
+      import {Props1 as Props} from './test01'
+      defineProps<Props>()
+      </script>`,
+      ...getTypeScriptFixtureTestOptions()
+    }
+  ],
+  invalid: [
+    {
+      code: `
+      export default defineComponent({
+        props: {
+          // line comment
+          b: Number,
+
+          /* block comment */
+          c: Number,
+
+          d: Number,
+        }
+      })
+      `,
+      errors: [
+        {
+          line: 5,
+          column: 11,
+          message: `The "b" property should have a JSDoc comment.`
+        },
+        {
+          line: 8,
+          column: 11,
+          message: `The "c" property should have a JSDoc comment.`
+        },
+        {
+          line: 10,
+          column: 11,
+          message: `The "d" property should have a JSDoc comment.`
+        }
+      ]
+    },
+    {
+      code: `
+      <script setup>
+      const badProps = defineProps({
+        /** JSDoc comment */
+        b: Number,
+
+        // line comment
+        c: Number,
+
+        d: Number,
+      })
+      </script>
+      `,
+      options: [{ type: 'block' }],
+      errors: [
+        {
+          line: 5,
+          column: 9,
+          message: 'The "b" property should have a block comment.'
+        },
+        {
+          line: 8,
+          column: 9,
+          message: 'The "c" property should have a block comment.'
+        },
+        {
+          line: 10,
+          column: 9,
+          message: 'The "d" property should have a block comment.'
+        }
+      ]
+    },
+    {
+      code: `
+      <script setup>
+      const badProps = defineProps({
+        /** JSDoc comment */
+        b: Number,
+
+        /* block comment */
+        c: Number,
+
+        d: Number,
+      })
+      </script>
+      `,
+      options: [{ type: 'line' }],
+      errors: [
+        {
+          line: 5,
+          column: 9,
+          message: 'The "b" property should have a line comment.'
+        },
+        {
+          line: 8,
+          column: 9,
+          message: 'The "c" property should have a line comment.'
+        },
+        {
+          line: 10,
+          column: 9,
+          message: 'The "d" property should have a line comment.'
+        }
+      ]
+    },
+    {
+      code: `
+      <script setup>
+      const badProps = defineProps({
+        d: Number,
+      })
+      </script>
+      `,
+      options: [{ type: 'any' }],
+      errors: [
+        {
+          line: 4,
+          column: 9,
+          message: `The "d" property should have a comment.`
+        }
+      ]
+    },
+    {
+      code: `
+      <script lang="ts">
+      export default defineComponent({
+        props: {
+          a: Number
+        }
+      })
+      </script>
+      `,
+      errors: [
+        {
+          line: 5,
+          column: 11,
+          message: 'The "a" property should have a JSDoc comment.'
+        }
+      ]
+    },
+    {
+      code: `
+      new Vue({
+        props: {
+          a: Number
+        }
+      })
+      `,
+      errors: [
+        {
+          line: 4,
+          column: 11,
+          message: 'The "a" property should have a JSDoc comment.'
+        }
+      ]
+    },
+    {
+      code: `
+      <script setup lang="ts">
+      type PropType = {
+        a: number
+      }
+      const props = defineProps<PropType>()
+      </script>
+      `,
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          line: 4,
+          column: 9,
+          message: 'The "a" property should have a JSDoc comment.'
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/require-prop-type-constructor.js b/tests/lib/rules/require-prop-type-constructor.js
index 452bb35aa..0ed9a57af 100644
--- a/tests/lib/rules/require-prop-type-constructor.js
+++ b/tests/lib/rules/require-prop-type-constructor.js
@@ -4,19 +4,14 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/require-prop-type-constructor')
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const {
+  getTypeScriptFixtureTestOptions
+} = require('../../test-utils/typescript')
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const ruleTester = new RuleTester({
-  parserOptions: {
+  languageOptions: {
     ecmaVersion: 2020,
     sourceType: 'module'
   }
@@ -93,6 +88,14 @@ ruleTester.run('require-prop-type-constructor', rule, {
           props: ['name',,,]
         }
       `
+    },
+    {
+      code: `
+      <script setup lang="ts">
+      import {Props1 as Props} from './test01'
+      defineProps<Props>()
+      </script>`,
+      ...getTypeScriptFixtureTestOptions()
     }
   ],
 
@@ -221,13 +224,13 @@ ruleTester.run('require-prop-type-constructor', rule, {
         }
       }
       `,
+      languageOptions: { parser: require('@typescript-eslint/parser') },
       errors: [
         {
           message: 'The "a" property should be a constructor.',
           line: 5
         }
-      ],
-      parser: require.resolve('@typescript-eslint/parser')
+      ]
     },
     {
       filename: 'ExtraCommas.vue',
@@ -245,13 +248,13 @@ ruleTester.run('require-prop-type-constructor', rule, {
         }
       }
       `,
+      languageOptions: { parser: require('@typescript-eslint/parser') },
       errors: [
         {
           message: 'The "name" property should be a constructor.',
           line: 4
         }
-      ],
-      parser: require.resolve('@typescript-eslint/parser')
+      ]
     },
     {
       filename: 'LiteralsComponent.vue',
@@ -378,7 +381,7 @@ ruleTester.run('require-prop-type-constructor', rule, {
       })
       </script>
       `,
-      parser: require.resolve('vue-eslint-parser'),
+      languageOptions: { parser: require('vue-eslint-parser') },
       errors: [
         {
           message: 'The "a" property should be a constructor.',
diff --git a/tests/lib/rules/require-prop-types.js b/tests/lib/rules/require-prop-types.js
index 990126536..11ba2d5e8 100644
--- a/tests/lib/rules/require-prop-types.js
+++ b/tests/lib/rules/require-prop-types.js
@@ -4,17 +4,12 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/require-prop-types')
+const {
+  getTypeScriptFixtureTestOptions
+} = require('../../test-utils/typescript')
 
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const ruleTester = new RuleTester()
 ruleTester.run('require-prop-types', rule, {
@@ -30,7 +25,7 @@ ruleTester.run('require-prop-types', rule, {
           }
         }
       `,
-      parserOptions: { ecmaVersion: 2018, sourceType: 'module' }
+      languageOptions: { ecmaVersion: 2018, sourceType: 'module' }
     },
     {
       filename: 'test.vue',
@@ -41,7 +36,7 @@ ruleTester.run('require-prop-types', rule, {
           }
         }
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' }
+      languageOptions: { ecmaVersion: 6, sourceType: 'module' }
     },
     {
       filename: 'test.vue',
@@ -54,7 +49,7 @@ ruleTester.run('require-prop-types', rule, {
           }
         }
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' }
+      languageOptions: { ecmaVersion: 6, sourceType: 'module' }
     },
     {
       filename: 'test.vue',
@@ -67,7 +62,7 @@ ruleTester.run('require-prop-types', rule, {
           }
         }
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' }
+      languageOptions: { ecmaVersion: 6, sourceType: 'module' }
     },
     {
       filename: 'test.vue',
@@ -80,7 +75,7 @@ ruleTester.run('require-prop-types', rule, {
           }
         }
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' }
+      languageOptions: { ecmaVersion: 6, sourceType: 'module' }
     },
     {
       filename: 'test.vue',
@@ -93,7 +88,7 @@ ruleTester.run('require-prop-types', rule, {
           }
         }
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' }
+      languageOptions: { ecmaVersion: 6, sourceType: 'module' }
     },
     {
       filename: 'test.vue',
@@ -102,7 +97,7 @@ ruleTester.run('require-prop-types', rule, {
           props
         }
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' }
+      languageOptions: { ecmaVersion: 6, sourceType: 'module' }
     },
     {
       filename: 'test.vue',
@@ -111,7 +106,7 @@ ruleTester.run('require-prop-types', rule, {
           props: externalProps
         }
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' }
+      languageOptions: { ecmaVersion: 6, sourceType: 'module' }
     },
     {
       filename: 'test.vue',
@@ -120,7 +115,7 @@ ruleTester.run('require-prop-types', rule, {
           props: []
         }
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' }
+      languageOptions: { ecmaVersion: 6, sourceType: 'module' }
     },
     {
       filename: 'test.vue',
@@ -129,7 +124,7 @@ ruleTester.run('require-prop-types', rule, {
           props: {}
         }
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' }
+      languageOptions: { ecmaVersion: 6, sourceType: 'module' }
     },
     {
       filename: 'test.vue',
@@ -142,8 +137,11 @@ ruleTester.run('require-prop-types', rule, {
           }
         });
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' },
-      parser: require.resolve('@typescript-eslint/parser')
+      languageOptions: {
+        parser: require('@typescript-eslint/parser'),
+        ecmaVersion: 6,
+        sourceType: 'module'
+      }
     },
     {
       filename: 'test.vue',
@@ -156,8 +154,11 @@ ruleTester.run('require-prop-types', rule, {
           }
         });
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' },
-      parser: require.resolve('@typescript-eslint/parser')
+      languageOptions: {
+        parser: require('@typescript-eslint/parser'),
+        ecmaVersion: 6,
+        sourceType: 'module'
+      }
     },
     {
       filename: 'test.vue',
@@ -168,8 +169,11 @@ ruleTester.run('require-prop-types', rule, {
       })
       </script>
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' },
-      parser: require.resolve('vue-eslint-parser')
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ecmaVersion: 6,
+        sourceType: 'module'
+      }
     },
     {
       filename: 'test.vue',
@@ -178,12 +182,58 @@ ruleTester.run('require-prop-types', rule, {
       defineProps<{foo:string}>()
       </script>
       `,
-      parserOptions: {
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
         ecmaVersion: 6,
         sourceType: 'module',
-        parser: require.resolve('@typescript-eslint/parser')
-      },
-      parser: require.resolve('vue-eslint-parser')
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
+    },
+    {
+      code: `
+      <script setup lang="ts">
+      import {Props1 as Props} from './test01'
+      defineProps<Props>()
+      </script>`,
+      ...getTypeScriptFixtureTestOptions()
+    },
+    {
+      // defineModel
+      code: `
+      <script setup>
+      const m = defineModel({type:String})
+      const foo = defineModel('foo', {type:String})
+      </script>
+      `,
+      languageOptions: { parser: require('vue-eslint-parser') }
+    },
+    {
+      // defineModel
+      code: `
+      <script setup>
+      const m = defineModel(String)
+      const foo = defineModel('foo', String)
+      </script>
+      `,
+      languageOptions: { parser: require('vue-eslint-parser') }
+    },
+    {
+      code: `
+      <script setup lang="ts">
+      const m = defineModel<string>()
+      const foo = defineModel<string>('foo')
+      </script>
+      `,
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ecmaVersion: 6,
+        sourceType: 'module',
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
     }
   ],
 
@@ -195,7 +245,7 @@ ruleTester.run('require-prop-types', rule, {
           props: ['foo', bar, \`baz\`, foo()]
         }
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' },
+      languageOptions: { ecmaVersion: 6, sourceType: 'module' },
       errors: [
         {
           message: 'Prop "foo" should define at least its type.',
@@ -222,7 +272,7 @@ ruleTester.run('require-prop-types', rule, {
           props: ['foo', bar, \`baz\`, foo()]
         })
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' },
+      languageOptions: { ecmaVersion: 6, sourceType: 'module' },
       errors: [
         {
           message: 'Prop "foo" should define at least its type.',
@@ -252,7 +302,7 @@ ruleTester.run('require-prop-types', rule, {
           }
         }
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' },
+      languageOptions: { ecmaVersion: 6, sourceType: 'module' },
       errors: [
         {
           message: 'Prop "foo" should define at least its type.',
@@ -271,7 +321,7 @@ ruleTester.run('require-prop-types', rule, {
           }
         }
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' },
+      languageOptions: { ecmaVersion: 6, sourceType: 'module' },
       errors: [
         {
           message: 'Prop "foo" should define at least its type.',
@@ -288,7 +338,7 @@ ruleTester.run('require-prop-types', rule, {
           }
         }
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' },
+      languageOptions: { ecmaVersion: 6, sourceType: 'module' },
       errors: [
         {
           message: 'Prop "foo" should define at least its type.',
@@ -305,8 +355,11 @@ ruleTester.run('require-prop-types', rule, {
           }
         });
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' },
-      parser: require.resolve('@typescript-eslint/parser'),
+      languageOptions: {
+        parser: require('@typescript-eslint/parser'),
+        ecmaVersion: 6,
+        sourceType: 'module'
+      },
       errors: [
         {
           message: 'Prop "foo" should define at least its type.',
@@ -323,8 +376,11 @@ ruleTester.run('require-prop-types', rule, {
           }
         });
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' },
-      parser: require.resolve('@typescript-eslint/parser'),
+      languageOptions: {
+        parser: require('@typescript-eslint/parser'),
+        ecmaVersion: 6,
+        sourceType: 'module'
+      },
       errors: [
         {
           message: 'Prop "foo" should define at least its type.',
@@ -341,8 +397,11 @@ ruleTester.run('require-prop-types', rule, {
       })
       </script>
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' },
-      parser: require.resolve('vue-eslint-parser'),
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ecmaVersion: 6,
+        sourceType: 'module'
+      },
       errors: [
         {
           message: 'Prop "foo" should define at least its type.',
@@ -357,14 +416,57 @@ ruleTester.run('require-prop-types', rule, {
       defineProps(['foo'])
       </script>
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' },
-      parser: require.resolve('vue-eslint-parser'),
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ecmaVersion: 6,
+        sourceType: 'module'
+      },
       errors: [
         {
           message: 'Prop "foo" should define at least its type.',
           line: 3
         }
       ]
+    },
+    {
+      // defineModel
+      code: `
+      <script setup>
+      const m = defineModel()
+      const foo = defineModel('foo')
+      </script>
+      `,
+      languageOptions: { parser: require('vue-eslint-parser') },
+      errors: [
+        {
+          message: 'Prop "modelValue" should define at least its type.',
+          line: 3
+        },
+        {
+          message: 'Prop "foo" should define at least its type.',
+          line: 4
+        }
+      ]
+    },
+    {
+      // defineModel
+      code: `
+      <script setup>
+      const m = defineModel({})
+      const foo = defineModel('foo',{})
+      </script>
+      `,
+      languageOptions: { parser: require('vue-eslint-parser') },
+      errors: [
+        {
+          message: 'Prop "modelValue" should define at least its type.',
+          line: 3
+        },
+        {
+          message: 'Prop "foo" should define at least its type.',
+          line: 4
+        }
+      ]
     }
   ]
 })
diff --git a/tests/lib/rules/require-render-return.js b/tests/lib/rules/require-render-return.js
index e931badf1..0fa628302 100644
--- a/tests/lib/rules/require-render-return.js
+++ b/tests/lib/rules/require-render-return.js
@@ -4,23 +4,17 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/require-render-return')
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 
-const parserOptions = {
+const languageOptions = {
   ecmaVersion: 2018,
   sourceType: 'module',
-  ecmaFeatures: { jsx: true }
+  parserOptions: {
+    ecmaFeatures: { jsx: true }
+  }
 }
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const ruleTester = new RuleTester()
 ruleTester.run('require-render-return', rule, {
   valid: [
@@ -31,7 +25,7 @@ ruleTester.run('require-render-return', rule, {
           return {}
         }
       })`,
-      parserOptions
+      languageOptions
     },
     {
       code: `Vue.component('test', {
@@ -39,19 +33,19 @@ ruleTester.run('require-render-return', rule, {
           return {}
         }
       })`,
-      parserOptions
+      languageOptions
     },
     {
       code: `Vue.component('test', {
         foo: {}
       })`,
-      parserOptions
+      languageOptions
     },
     {
       code: `Vue.component('test', {
         render: foo
       })`,
-      parserOptions
+      languageOptions
     },
     {
       code: `Vue.component('test', {
@@ -59,7 +53,7 @@ ruleTester.run('require-render-return', rule, {
           return <div></div>
         }
       })`,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -68,7 +62,7 @@ ruleTester.run('require-render-return', rule, {
           return {}
         }
       }`,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -78,7 +72,7 @@ ruleTester.run('require-render-return', rule, {
           return foo
         }
       }`,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -98,14 +92,14 @@ ruleTester.run('require-render-return', rule, {
           }
         }
       }`,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
       code: `export default {
         render: () => null
       }`,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -118,7 +112,7 @@ ruleTester.run('require-render-return', rule, {
           }
         }
       }`,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -131,7 +125,7 @@ ruleTester.run('require-render-return', rule, {
           return h('div', options)
         }
       }`,
-      parserOptions
+      languageOptions
     }
   ],
 
@@ -142,12 +136,14 @@ ruleTester.run('require-render-return', rule, {
         render() {
         }
       }`,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Expected to return a value in render function.',
-          type: 'Identifier',
-          line: 2
+          line: 2,
+          column: 9,
+          endLine: 2,
+          endColumn: 15
         }
       ]
     },
@@ -160,12 +156,14 @@ ruleTester.run('require-render-return', rule, {
           }
         }
       }`,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Expected to return a value in render function.',
-          type: 'Identifier',
-          line: 2
+          line: 2,
+          column: 9,
+          endLine: 2,
+          endColumn: 15
         }
       ]
     },
@@ -177,12 +175,14 @@ ruleTester.run('require-render-return', rule, {
           }
         }
       })`,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Expected to return a value in render function.',
-          type: 'Identifier',
-          line: 2
+          line: 2,
+          column: 9,
+          endLine: 2,
+          endColumn: 15
         }
       ]
     },
@@ -194,12 +194,14 @@ ruleTester.run('require-render-return', rule, {
           }
         }
       })`,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Expected to return a value in render function.',
-          type: 'Identifier',
-          line: 2
+          line: 2,
+          column: 9,
+          endLine: 2,
+          endColumn: 15
         }
       ]
     },
@@ -211,12 +213,14 @@ ruleTester.run('require-render-return', rule, {
           }
         }
       })`,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Expected to return a value in render function.',
-          type: 'Identifier',
-          line: 2
+          line: 2,
+          column: 9,
+          endLine: 2,
+          endColumn: 15
         }
       ]
     },
@@ -230,12 +234,14 @@ ruleTester.run('require-render-return', rule, {
           }
         }
       })`,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Expected to return a value in render function.',
-          type: 'Identifier',
-          line: 2
+          line: 2,
+          column: 9,
+          endLine: 2,
+          endColumn: 15
         }
       ]
     }
diff --git a/tests/lib/rules/require-slots-as-functions.js b/tests/lib/rules/require-slots-as-functions.js
index ea83b5696..54e86b527 100644
--- a/tests/lib/rules/require-slots-as-functions.js
+++ b/tests/lib/rules/require-slots-as-functions.js
@@ -4,21 +4,16 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/require-slots-as-functions')
 
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2020, sourceType: 'module' }
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
 })
 ruleTester.run('require-slots-as-functions', rule, {
   valid: [
diff --git a/tests/lib/rules/require-toggle-inside-transition.js b/tests/lib/rules/require-toggle-inside-transition.js
index 76c2b7c5a..cdd48c493 100644
--- a/tests/lib/rules/require-toggle-inside-transition.js
+++ b/tests/lib/rules/require-toggle-inside-transition.js
@@ -4,20 +4,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/require-toggle-inside-transition')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('require-toggle-inside-transition', rule, {
@@ -65,6 +56,36 @@ tester.run('require-toggle-inside-transition', rule, {
     {
       filename: 'test.vue',
       code: '<template><transition><template v-if="show"><div /></template></transition></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><transition><slot /></transition></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><transition><div :key="k" /></transition></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><transition appear><div /></transition></template>'
+    },
+    {
+      // https://github.com/vuejs/eslint-plugin-vue/issues/2467
+      filename: 'test.vue',
+      code: '<template><transition :appear="foo"><div /></transition></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><transition :appear="true"><div /></transition></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><transition><dialog v-dialog="show" /></transition></template>',
+      options: [
+        {
+          additionalDirectives: ['dialog']
+        }
+      ]
     }
   ],
   invalid: [
@@ -105,6 +126,51 @@ tester.run('require-toggle-inside-transition', rule, {
       filename: 'test.vue',
       code: '<template><transition><template v-for="e in list"><div /></template></transition></template>',
       errors: [{ messageId: 'expected' }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><Transition>  <div /></Transition></template>',
+      errors: [{ messageId: 'expected' }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><transition :appear="false"><div /></transition></template>',
+      errors: [{ messageId: 'expected' }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><transition @appear="isLoaded"><div /></transition></template>',
+      errors: [{ messageId: 'expected' }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><transition><dialog v-dialog="show" /></transition></template>',
+      options: [
+        {
+          additionalDirectives: []
+        }
+      ],
+      errors: [
+        {
+          messageId: 'expected',
+          data: { allowedDirectives: '`v-if` or `v-show`' }
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><transition><div v-custom="show" /></transition></template>',
+      options: [
+        {
+          additionalDirectives: ['dialog']
+        }
+      ],
+      errors: [
+        {
+          messageId: 'expected',
+          data: { allowedDirectives: '`v-if`, `v-show` or `v-dialog`' }
+        }
+      ]
     }
   ]
 })
diff --git a/tests/lib/rules/require-typed-object-prop.js b/tests/lib/rules/require-typed-object-prop.js
new file mode 100644
index 000000000..8a16fb567
--- /dev/null
+++ b/tests/lib/rules/require-typed-object-prop.js
@@ -0,0 +1,653 @@
+/**
+ * @author Przemysław Jan Beigert
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/require-typed-object-prop')
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 6,
+    sourceType: 'module',
+    parserOptions: {
+      parser: require.resolve('@typescript-eslint/parser')
+    }
+  }
+})
+
+ruleTester.run('require-typed-object-prop', rule, {
+  valid: [
+    // empty
+    {
+      filename: 'test.vue',
+      code: `
+      <script lang="ts">
+      export default {
+        props: {}
+      }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script lang="ts">
+      export default Vue.extend({
+        props: {}
+      });
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      defineProps({});
+      </script>
+      `
+    },
+    // array props
+    {
+      filename: 'test.vue',
+      code: `
+      <script lang="ts">
+      export default {
+        props: ['foo']
+      }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script lang="ts">
+      export default Vue.extend({
+        props: ['foo']
+      });
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      defineProps(['foo']);
+      </script>
+      `
+    },
+    // primitive props
+    {
+      filename: 'test.vue',
+      code: `
+      <script lang="ts">
+      export default {
+        props: { foo: String }
+      }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script lang="ts">
+      export default Vue.extend({
+        props: { foo: String }
+      });
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      defineProps({ foo: String });
+      </script>
+      `
+    },
+    // union
+    {
+      filename: 'test.vue',
+      code: `
+      <script lang="ts">
+      export default {
+        props: { foo: [Number, String, Boolean] }
+      }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script lang="ts">
+      export default Vue.extend({
+        props: { foo: [Number, String, Boolean] }
+      });
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      defineProps({ foo: [Number, String, Boolean] });
+      </script>
+      `
+    },
+    // function
+    {
+      filename: 'test.vue',
+      code: `
+      <script lang="ts">
+      export default {
+        props: { foo: someFunction() }
+      }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script lang="ts">
+      export default Vue.extend({
+        props: { foo: someFunction() }
+      });
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      defineProps({ foo: someFunction() });
+      </script>
+      `
+    },
+    // typed object
+    {
+      filename: 'test.vue',
+      code: `
+      <script lang="ts">
+      export default {
+        props: { foo: Object as PropType<User> }
+      }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script lang="ts">
+      export default {
+        props: { foo: Array as PropType<User[]> }
+      }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script lang="ts">
+      export default Vue.extend({
+        props: { foo: Object as PropType<User> }
+      });
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      defineProps({ foo: Object as PropType<User> });
+      </script>
+      `
+    },
+
+    {
+      filename: 'test.vue',
+      code: `
+      <script lang="ts">
+      export default {
+        props: { foo: Object as () => User }
+      }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script lang="ts">
+      export default Vue.extend({
+        props: { foo: Object as () => User }
+      });
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      defineProps({ foo: Object as () => User });
+      </script>
+      `
+    },
+    // any
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      defineProps({ foo: { type: Object as any } });
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script lang="ts">
+        export default {
+          props: {
+            foo: { type: Object as any }
+          }
+        };
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script lang="ts">
+        export default Vue.extend({
+          props: {
+            foo: { type: Object as any }
+          }
+        });
+        </script>
+      `
+    },
+    // unknown
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      defineProps({ foo: { type: Object as unknown } });
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script lang="ts">
+        export default {
+          props: {
+            foo: { type: Object as unknown }
+          }
+        };
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script lang="ts">
+        export default Vue.extend({
+          props: {
+            foo: { type: Object as unknown }
+          }
+        });
+        </script>
+      `
+    },
+    // JavaScript components
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      defineProps({ foo: Object });
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default Vue.extend({
+        props: { foo: { type: Object } }
+      });
+      </script>
+      `
+    },
+    {
+      filename: 'test.js',
+      code: `
+      export default Vue.extend({
+        props: { foo: Object }
+      });
+      `
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      defineProps({ foo: Object });
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'expectedTypeAnnotation',
+          line: 3,
+          column: 26,
+          endLine: 3,
+          endColumn: 32,
+          suggestions: [
+            {
+              messageId: 'addTypeAnnotation',
+              data: { type: 'any' },
+              output: `
+      <script setup lang="ts">
+      defineProps({ foo: Object as PropType<any> });
+      </script>
+      `
+            },
+            {
+              messageId: 'addTypeAnnotation',
+              data: { type: 'unknown' },
+              output: `
+      <script setup lang="ts">
+      defineProps({ foo: Object as PropType<unknown> });
+      </script>
+      `
+            }
+          ]
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      defineProps({ foo: Array });
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'expectedTypeAnnotation',
+          line: 3,
+          column: 26,
+          endLine: 3,
+          endColumn: 31,
+          suggestions: [
+            {
+              messageId: 'addTypeAnnotation',
+              data: { type: 'any[]' },
+              output: `
+      <script setup lang="ts">
+      defineProps({ foo: Array as PropType<any[]> });
+      </script>
+      `
+            },
+            {
+              messageId: 'addTypeAnnotation',
+              data: { type: 'unknown[]' },
+              output: `
+      <script setup lang="ts">
+      defineProps({ foo: Array as PropType<unknown[]> });
+      </script>
+      `
+            }
+          ]
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script lang="ts">
+      export default {
+        props: { foo: Object }
+      }
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'expectedTypeAnnotation',
+          line: 4,
+          column: 23,
+          endLine: 4,
+          endColumn: 29,
+          suggestions: [
+            {
+              messageId: 'addTypeAnnotation',
+              data: { type: 'any' },
+              output: `
+      <script lang="ts">
+      export default {
+        props: { foo: Object as PropType<any> }
+      }
+      </script>
+      `
+            },
+            {
+              messageId: 'addTypeAnnotation',
+              data: { type: 'unknown' },
+              output: `
+      <script lang="ts">
+      export default {
+        props: { foo: Object as PropType<unknown> }
+      }
+      </script>
+      `
+            }
+          ]
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script lang="ts">
+      export default Vue.extend({
+        props: { foo: Object }
+      });
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'expectedTypeAnnotation',
+          line: 4,
+          column: 23,
+          endLine: 4,
+          endColumn: 29,
+          suggestions: [
+            {
+              messageId: 'addTypeAnnotation',
+              data: { type: 'any' },
+              output: `
+      <script lang="ts">
+      export default Vue.extend({
+        props: { foo: Object as PropType<any> }
+      });
+      </script>
+      `
+            },
+            {
+              messageId: 'addTypeAnnotation',
+              data: { type: 'unknown' },
+              output: `
+      <script lang="ts">
+      export default Vue.extend({
+        props: { foo: Object as PropType<unknown> }
+      });
+      </script>
+      `
+            }
+          ]
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script lang="ts">
+      export default Vue.extend({
+        props: { foo: { type: Object } }
+      });
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'expectedTypeAnnotation',
+          line: 4,
+          column: 31,
+          endLine: 4,
+          endColumn: 37,
+          suggestions: [
+            {
+              messageId: 'addTypeAnnotation',
+              data: { type: 'any' },
+              output: `
+      <script lang="ts">
+      export default Vue.extend({
+        props: { foo: { type: Object as PropType<any> } }
+      });
+      </script>
+      `
+            },
+            {
+              messageId: 'addTypeAnnotation',
+              data: { type: 'unknown' },
+              output: `
+      <script lang="ts">
+      export default Vue.extend({
+        props: { foo: { type: Object as PropType<unknown> } }
+      });
+      </script>
+      `
+            }
+          ]
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script lang="ts">
+      export default {
+        props: { foo: { type: Object } }
+      }
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'expectedTypeAnnotation',
+          line: 4,
+          column: 31,
+          endLine: 4,
+          endColumn: 37,
+          suggestions: [
+            {
+              messageId: 'addTypeAnnotation',
+              data: { type: 'any' },
+              output: `
+      <script lang="ts">
+      export default {
+        props: { foo: { type: Object as PropType<any> } }
+      }
+      </script>
+      `
+            },
+            {
+              messageId: 'addTypeAnnotation',
+              data: { type: 'unknown' },
+              output: `
+      <script lang="ts">
+      export default {
+        props: { foo: { type: Object as PropType<unknown> } }
+      }
+      </script>
+      `
+            }
+          ]
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      defineProps({ foo: { type: Object } });
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'expectedTypeAnnotation',
+          line: 3,
+          column: 34,
+          endLine: 3,
+          endColumn: 40,
+          suggestions: [
+            {
+              messageId: 'addTypeAnnotation',
+              data: { type: 'any' },
+              output: `
+      <script setup lang="ts">
+      defineProps({ foo: { type: Object as PropType<any> } });
+      </script>
+      `
+            },
+            {
+              messageId: 'addTypeAnnotation',
+              data: { type: 'unknown' },
+              output: `
+      <script setup lang="ts">
+      defineProps({ foo: { type: Object as PropType<unknown> } });
+      </script>
+      `
+            }
+          ]
+        }
+      ]
+    },
+    {
+      // `.ts` file
+      filename: 'test.ts',
+      code: `
+      export default Vue.extend({
+        props: { foo: Object }
+      });
+      `,
+      errors: [
+        {
+          messageId: 'expectedTypeAnnotation',
+          line: 3,
+          column: 23,
+          endLine: 3,
+          endColumn: 29,
+          suggestions: [
+            {
+              messageId: 'addTypeAnnotation',
+              data: { type: 'any' },
+              output: `
+      export default Vue.extend({
+        props: { foo: Object as PropType<any> }
+      });
+      `
+            },
+            {
+              messageId: 'addTypeAnnotation',
+              data: { type: 'unknown' },
+              output: `
+      export default Vue.extend({
+        props: { foo: Object as PropType<unknown> }
+      });
+      `
+            }
+          ]
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/require-typed-ref.js b/tests/lib/rules/require-typed-ref.js
new file mode 100644
index 000000000..ec42c0751
--- /dev/null
+++ b/tests/lib/rules/require-typed-ref.js
@@ -0,0 +1,279 @@
+/**
+ * @author Ivan Demchuk <https://github.com/Demivan>
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/require-typed-ref')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('@typescript-eslint/parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+// Note: Need to specify filename for each test,
+// as only TypeScript files are being checked
+tester.run('require-typed-ref', rule, {
+  valid: [
+    {
+      filename: 'test.ts',
+      code: `
+        import { shallowRef } from 'vue'
+        const count = shallowRef(0)
+      `
+    },
+    {
+      filename: 'test.ts',
+      code: `
+        import { ref } from 'vue'
+        const count = ref<number>()
+      `
+    },
+    {
+      filename: 'test.ts',
+      code: `
+        import { ref } from 'vue'
+        const count = ref<number>(0)
+      `
+    },
+    {
+      filename: 'test.ts',
+      code: `
+        import { ref } from 'vue'
+        const counter: Ref<number | undefined> = ref()
+      `
+    },
+    {
+      filename: 'test.ts',
+      code: `
+        import { ref } from 'vue'
+        const count = ref(0)
+      `
+    },
+    {
+      filename: 'test.ts',
+      code: `
+        import { ref } from 'vue'
+        function useCount() {
+          return {
+            count: ref<number>()
+          }
+        }
+      `
+    },
+    {
+      filename: 'test.ts',
+      code: `
+      import { ref, defineComponent } from 'vue'
+      defineComponent({
+        setup() {
+          const count = ref<number>()
+          return { count }
+        }
+      })
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>
+          import { ref } from 'vue'
+          const count = ref()
+        </script>
+      `,
+      languageOptions: { parser: require('vue-eslint-parser') }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          import { ref } from 'vue'
+          export default {
+            setup() {
+              const count = ref()
+            }
+          }
+        </script>
+      `,
+      languageOptions: { parser: require('vue-eslint-parser') }
+    },
+    {
+      filename: 'test.js',
+      code: `
+        import { ref } from 'vue'
+        const count = ref()
+      `
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.ts',
+      code: `
+        import { ref } from 'vue'
+        const count = ref()
+      `,
+      errors: [
+        {
+          messageId: 'noType',
+          line: 3,
+          column: 23,
+          endLine: 3,
+          endColumn: 28
+        }
+      ]
+    },
+    {
+      filename: 'test.ts',
+      code: `
+        import { ref } from 'vue'
+        const count = ref(null)
+      `,
+      errors: [
+        {
+          messageId: 'noType',
+          line: 3,
+          column: 23,
+          endLine: 3,
+          endColumn: 32
+        }
+      ]
+    },
+    {
+      filename: 'test.ts',
+      code: `
+        import { ref } from 'vue'
+        const count = ref(undefined)
+      `,
+      errors: [
+        {
+          messageId: 'noType',
+          line: 3,
+          column: 23,
+          endLine: 3,
+          endColumn: 37
+        }
+      ]
+    },
+    {
+      filename: 'test.ts',
+      code: `
+        import { shallowRef } from 'vue'
+        const count = shallowRef()
+      `,
+      errors: [
+        {
+          messageId: 'noType',
+          line: 3,
+          column: 23,
+          endLine: 3,
+          endColumn: 35
+        }
+      ]
+    },
+    {
+      filename: 'test.ts',
+      code: `
+        import { ref } from 'vue'
+        function useCount() {
+          const count = ref()
+          return { count }
+        }
+      `,
+      errors: [
+        {
+          messageId: 'noType',
+          line: 4,
+          column: 25,
+          endLine: 4,
+          endColumn: 30
+        }
+      ]
+    },
+    {
+      filename: 'test.ts',
+      code: `
+        import { ref } from 'vue'
+        function useCount() {
+          return {
+            count: ref()
+          }
+        }
+      `,
+      errors: [
+        {
+          messageId: 'noType',
+          line: 5,
+          column: 20,
+          endLine: 5,
+          endColumn: 25
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+          import { ref } from 'vue'
+          const count = ref()
+        </script>
+      `,
+      languageOptions: { parser: require('vue-eslint-parser') },
+      errors: [
+        {
+          messageId: 'noType',
+          line: 4,
+          column: 25,
+          endLine: 4,
+          endColumn: 30
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script lang="ts">
+          import { ref } from 'vue'
+          export default {
+            setup() {
+              const count = ref()
+            }
+          }
+        </script>
+      `,
+      languageOptions: { parser: require('vue-eslint-parser') },
+      errors: [
+        {
+          messageId: 'noType',
+          line: 6,
+          column: 29,
+          endLine: 6,
+          endColumn: 34
+        }
+      ]
+    },
+    {
+      filename: 'test.ts',
+      code: `
+        import { ref, defineComponent } from 'vue'
+        defineComponent({
+          setup() {
+            const count = ref()
+            return { count }
+          }
+        })
+      `,
+      errors: [
+        {
+          messageId: 'noType',
+          line: 5,
+          column: 27,
+          endLine: 5,
+          endColumn: 32
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/require-v-for-key.js b/tests/lib/rules/require-v-for-key.js
index 22bb36244..dfcfbd3e9 100644
--- a/tests/lib/rules/require-v-for-key.js
+++ b/tests/lib/rules/require-v-for-key.js
@@ -5,20 +5,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/require-v-for-key')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('require-v-for-key', rule, {
diff --git a/tests/lib/rules/require-valid-default-prop.js b/tests/lib/rules/require-valid-default-prop.js
index c08a0403a..103b6b7d3 100644
--- a/tests/lib/rules/require-valid-default-prop.js
+++ b/tests/lib/rules/require-valid-default-prop.js
@@ -4,17 +4,18 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/require-valid-default-prop')
-const RuleTester = require('eslint').RuleTester
+const {
+  getTypeScriptFixtureTestOptions
+} = require('../../test-utils/typescript')
+const RuleTester = require('../../eslint-compat').RuleTester
 
-const parserOptions = {
+const languageOptions = {
   ecmaVersion: 2020,
   sourceType: 'module',
-  ecmaFeatures: { jsx: true }
+  parserOptions: {
+    ecmaFeatures: { jsx: true }
+  }
 }
 
 function errorMessage(type) {
@@ -35,10 +36,6 @@ function errorMessageForFunction(type) {
   ]
 }
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const ruleTester = new RuleTester()
 ruleTester.run('require-valid-default-prop', rule, {
   valid: [
@@ -48,21 +45,21 @@ ruleTester.run('require-valid-default-prop', rule, {
         ...foo,
         props: { ...foo }
       }`,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
       code: `export default {
         props: { foo: null }
       }`,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
       code: `export default {
         props: ['foo']
       }`,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -74,7 +71,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -111,9 +108,10 @@ ruleTester.run('require-valid-default-prop', rule, {
           foo: { type: String, default () { return Foo } },
           foo: { type: Number, default () { return Foo } },
           foo: { type: Object, default () { return Foo } },
+          foo: { type: Object, default: null },
         }
       })`,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -127,8 +125,11 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         });
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' },
-      parser: require.resolve('@typescript-eslint/parser')
+      languageOptions: {
+        parser: require('@typescript-eslint/parser'),
+        ecmaVersion: 6,
+        sourceType: 'module'
+      }
     },
     {
       filename: 'test.vue',
@@ -142,7 +143,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -156,7 +157,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -168,7 +169,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -180,7 +181,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions
+      languageOptions
     },
 
     // sparse array
@@ -194,7 +195,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -206,7 +207,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -219,9 +220,10 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         });
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' },
-      parser: require.resolve('@typescript-eslint/parser'),
-      errors: errorMessage('function')
+      languageOptions: {
+        parser: require('@typescript-eslint/parser'),
+        ...languageOptions
+      }
     },
     {
       filename: 'test.vue',
@@ -234,9 +236,11 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         });
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' },
-      parser: require.resolve('@typescript-eslint/parser'),
-      errors: errorMessage('function')
+      languageOptions: {
+        parser: require('@typescript-eslint/parser'),
+        ecmaVersion: 6,
+        sourceType: 'module'
+      }
     },
     {
       filename: 'test.vue',
@@ -249,9 +253,11 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         });
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' },
-      parser: require.resolve('@typescript-eslint/parser'),
-      errors: errorMessage('function')
+      languageOptions: {
+        parser: require('@typescript-eslint/parser'),
+        ecmaVersion: 6,
+        sourceType: 'module'
+      }
     },
     {
       // https://github.com/vuejs/eslint-plugin-vue/issues/1853
@@ -269,12 +275,73 @@ ruleTester.run('require-valid-default-prop', rule, {
         num: 1
       });
       </script>`,
-      parserOptions: {
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
         ecmaVersion: 6,
         sourceType: 'module',
-        parser: require.resolve('@typescript-eslint/parser')
-      },
-      parser: require.resolve('vue-eslint-parser')
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
+    },
+    {
+      code: `
+      <script setup lang="ts">
+      import {Props2 as Props} from './test01'
+      withDefaults(defineProps<Props>(), {
+        a: 's',
+        b: 42,
+        c: true,
+        d: false,
+        e: 's',
+        f: () => 42,
+        g: ()=>({ foo: 'foo' }),
+        h: ()=>(['foo', 'bar']),
+        i: ()=>(['foo', 'bar']),
+      })
+      </script>`,
+      ...getTypeScriptFixtureTestOptions()
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+        const { foo = 'abc' } = defineProps({
+          foo: {
+            type: String,
+          }
+        })
+      </script>
+      `,
+      languageOptions: {
+        parser: require('vue-eslint-parser')
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+        const { foo = [] } = defineProps({
+          foo: {
+            type: Array,
+          }
+        })
+      </script>
+      `,
+      languageOptions: {
+        parser: require('vue-eslint-parser')
+      }
+    },
+    {
+      // https://github.com/vuejs/eslint-plugin-vue/issues/2692
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      type MaybeString<T extends number> = T | \`\${T}\`
+      const { foo = 1 } = defineProps<{ foo: MaybeString<1, 2>}>()
+      </script>
+      `,
+      ...getTypeScriptFixtureTestOptions()
     }
   ],
 
@@ -289,7 +356,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions,
+      languageOptions,
       errors: errorMessage('number or string')
     },
     {
@@ -302,7 +369,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions,
+      languageOptions,
       errors: errorMessage('number or function')
     },
     {
@@ -315,7 +382,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions,
+      languageOptions,
       errors: errorMessage('number')
     },
     {
@@ -328,7 +395,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions,
+      languageOptions,
       errors: errorMessage('number')
     },
     {
@@ -341,7 +408,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions,
+      languageOptions,
       errors: errorMessage('number')
     },
     {
@@ -354,7 +421,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions,
+      languageOptions,
       errors: errorMessage('number')
     },
     {
@@ -367,7 +434,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions,
+      languageOptions,
       errors: errorMessage('string')
     },
     {
@@ -380,7 +447,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions,
+      languageOptions,
       errors: errorMessage('string')
     },
     {
@@ -393,7 +460,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions,
+      languageOptions,
       errors: errorMessage('string')
     },
     {
@@ -406,7 +473,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions,
+      languageOptions,
       errors: errorMessage('boolean')
     },
     {
@@ -419,7 +486,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions,
+      languageOptions,
       errors: errorMessage('boolean')
     },
     {
@@ -432,7 +499,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions,
+      languageOptions,
       errors: errorMessage('boolean')
     },
     {
@@ -445,7 +512,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions,
+      languageOptions,
       errors: errorMessage('boolean')
     },
     {
@@ -458,7 +525,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions,
+      languageOptions,
       errors: errorMessage('function')
     },
     {
@@ -471,7 +538,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions,
+      languageOptions,
       errors: errorMessage('function')
     },
     {
@@ -484,7 +551,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions,
+      languageOptions,
       errors: errorMessage('function')
     },
     {
@@ -497,7 +564,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions,
+      languageOptions,
       errors: errorMessage('function')
     },
     {
@@ -510,7 +577,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions,
+      languageOptions,
       errors: errorMessage('function')
     },
     {
@@ -523,7 +590,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions,
+      languageOptions,
       errors: errorMessage('function')
     },
     {
@@ -536,7 +603,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions,
+      languageOptions,
       errors: errorMessage('function')
     },
     {
@@ -549,7 +616,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions,
+      languageOptions,
       errors: errorMessage('function')
     },
     {
@@ -562,7 +629,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions,
+      languageOptions,
       errors: errorMessage('function')
     },
     {
@@ -575,7 +642,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions,
+      languageOptions,
       errors: errorMessage('function')
     },
     {
@@ -588,7 +655,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions,
+      languageOptions,
       errors: errorMessage('function or number')
     },
     {
@@ -601,8 +668,12 @@ ruleTester.run('require-valid-default-prop', rule, {
           } as PropOptions<object>
         }
       });`,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' },
-      parser: require.resolve('@typescript-eslint/parser'),
+
+      languageOptions: {
+        parser: require('@typescript-eslint/parser'),
+        ecmaVersion: 6,
+        sourceType: 'module'
+      },
       errors: errorMessage('function or number')
     },
 
@@ -624,7 +695,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: `Type of the default value for 'foo' prop must be a function.`,
@@ -650,7 +721,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions,
+      languageOptions,
       errors: errorMessage('string')
     },
     {
@@ -665,7 +736,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions,
+      languageOptions,
       errors: errorMessageForFunction('number')
     },
     {
@@ -680,7 +751,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions,
+      languageOptions,
       errors: errorMessageForFunction('object')
     },
     {
@@ -695,7 +766,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions,
+      languageOptions,
       errors: errorMessageForFunction('string')
     },
     {
@@ -710,7 +781,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions,
+      languageOptions,
       errors: errorMessageForFunction('number')
     },
     {
@@ -725,7 +796,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions,
+      languageOptions,
       errors: errorMessageForFunction('object')
     },
     {
@@ -740,7 +811,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions,
+      languageOptions,
       errors: errorMessageForFunction('string')
     },
     {
@@ -753,7 +824,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions,
+      languageOptions,
       errors: errorMessage('number')
     },
     {
@@ -766,7 +837,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions,
+      languageOptions,
       errors: errorMessage('object')
     },
     {
@@ -779,7 +850,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions,
+      languageOptions,
       errors: errorMessage('string')
     },
     {
@@ -792,7 +863,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions,
+      languageOptions,
       errors: errorMessage('function')
     },
     {
@@ -818,7 +889,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message:
@@ -847,7 +918,7 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         }
       }`,
-      parserOptions,
+      languageOptions,
       errors: errorMessage('string')
     },
     {
@@ -861,8 +932,11 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         });
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' },
-      parser: require.resolve('@typescript-eslint/parser'),
+      languageOptions: {
+        parser: require('@typescript-eslint/parser'),
+        ecmaVersion: 6,
+        sourceType: 'module'
+      },
       errors: errorMessage('function')
     },
     {
@@ -876,8 +950,11 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         });
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' },
-      parser: require.resolve('@typescript-eslint/parser'),
+      languageOptions: {
+        parser: require('@typescript-eslint/parser'),
+        ecmaVersion: 6,
+        sourceType: 'module'
+      },
       errors: errorMessage('function')
     },
     {
@@ -891,8 +968,11 @@ ruleTester.run('require-valid-default-prop', rule, {
           }
         });
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' },
-      parser: require.resolve('@typescript-eslint/parser'),
+      languageOptions: {
+        parser: require('@typescript-eslint/parser'),
+        ecmaVersion: 6,
+        sourceType: 'module'
+      },
       errors: errorMessage('function')
     },
     {
@@ -907,8 +987,11 @@ ruleTester.run('require-valid-default-prop', rule, {
         })
       </script>
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' },
-      parser: require.resolve('vue-eslint-parser'),
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ecmaVersion: 6,
+        sourceType: 'module'
+      },
       errors: [
         {
           message: "Type of the default value for 'foo' prop must be a string.",
@@ -925,18 +1008,225 @@ ruleTester.run('require-valid-default-prop', rule, {
         })
       </script>
       `,
-      parserOptions: {
+      languageOptions: {
         ecmaVersion: 6,
         sourceType: 'module',
-        parser: require.resolve('@typescript-eslint/parser')
+        parser: require('vue-eslint-parser'),
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
       },
-      parser: require.resolve('vue-eslint-parser'),
       errors: [
         {
           message: "Type of the default value for 'foo' prop must be a string.",
           line: 4
         }
       ]
+    },
+    {
+      code: `
+      <script setup lang="ts">
+      import {Props2 as Props} from './test01'
+      withDefaults(defineProps<Props>(), {
+        a: 42,
+        b: 's',
+        c: {},
+        d: [],
+        e: [42],
+        f: {},
+        g: { foo: 'foo' },
+        h: ['foo', 'bar'],
+        i: ['foo', 'bar'],
+      })
+      </script>`,
+      errors: [
+        {
+          message: "Type of the default value for 'a' prop must be a string.",
+          line: 5
+        },
+        {
+          message: "Type of the default value for 'b' prop must be a number.",
+          line: 6
+        },
+        {
+          message: "Type of the default value for 'c' prop must be a boolean.",
+          line: 7
+        },
+        {
+          message: "Type of the default value for 'd' prop must be a boolean.",
+          line: 8
+        },
+        {
+          message:
+            "Type of the default value for 'e' prop must be a string or number.",
+          line: 9
+        },
+        {
+          message: "Type of the default value for 'f' prop must be a function.",
+          line: 10
+        },
+        {
+          message: "Type of the default value for 'g' prop must be a function.",
+          line: 11
+        },
+        {
+          message: "Type of the default value for 'h' prop must be a function.",
+          line: 12
+        },
+        {
+          message: "Type of the default value for 'i' prop must be a function.",
+          line: 13
+        }
+      ],
+      ...getTypeScriptFixtureTestOptions()
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+        const { foo = 123 } = defineProps({
+          foo: String
+        })
+      </script>
+      `,
+      languageOptions: {
+        parser: require('vue-eslint-parser')
+      },
+      errors: [
+        {
+          message: "Type of the default value for 'foo' prop must be a string.",
+          line: 3
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+        const { foo = 123 } = defineProps({
+          foo: {
+            type: String,
+            default: 123
+          }
+        })
+      </script>
+      `,
+      languageOptions: {
+        parser: require('vue-eslint-parser')
+      },
+      errors: [
+        {
+          message: "Type of the default value for 'foo' prop must be a string.",
+          line: 3
+        },
+        {
+          message: "Type of the default value for 'foo' prop must be a string.",
+          line: 6
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+        const { foo = [] } = defineProps({
+          foo: {
+            type: Number,
+          }
+        })
+      </script>
+      `,
+      languageOptions: {
+        parser: require('vue-eslint-parser')
+      },
+      errors: [
+        {
+          message: "Type of the default value for 'foo' prop must be a number.",
+          line: 3
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+        const { foo = 42 } = defineProps({
+          foo: {
+            type: Array,
+          }
+        })
+      </script>
+      `,
+      languageOptions: {
+        parser: require('vue-eslint-parser')
+      },
+      errors: [
+        {
+          message: "Type of the default value for 'foo' prop must be a array.",
+          line: 3
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+        const { foo = [] } = defineProps({
+          foo: {
+            type: Array,
+            default: () => {
+              return 42
+            }
+          }
+        })
+      </script>
+      `,
+      languageOptions: {
+        parser: require('vue-eslint-parser')
+      },
+      errors: [
+        {
+          message: "Type of the default value for 'foo' prop must be a array.",
+          line: 7
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+        const { foo = (()=>[]) } = defineProps({
+          foo: {
+            type: Array,
+          }
+        })
+      </script>
+      `,
+      languageOptions: {
+        parser: require('vue-eslint-parser')
+      },
+      errors: [
+        {
+          message: "Type of the default value for 'foo' prop must be a array.",
+          line: 3
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      type MaybeString<T extends string | number> = \`\${T}\`
+      const { foo = 1 } = defineProps<{ foo: MaybeString<1, 2>}>()
+      </script>
+      `,
+      errors: [
+        {
+          message: "Type of the default value for 'foo' prop must be a string.",
+          line: 4
+        }
+      ],
+      ...getTypeScriptFixtureTestOptions()
     }
   ]
 })
diff --git a/tests/lib/rules/restricted-component-names.js b/tests/lib/rules/restricted-component-names.js
new file mode 100644
index 000000000..db87ca804
--- /dev/null
+++ b/tests/lib/rules/restricted-component-names.js
@@ -0,0 +1,78 @@
+/**
+ * @author Wayne Zhang
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/restricted-component-names')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('restricted-component-names', rule, {
+  valid: [
+    '<template><keep-alive></keep-alive></template>',
+    '<template><button/></template>',
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <foo-button/>
+        <div-bar/>
+      </template>
+      `,
+      options: [{ allow: ['/^foo-/', '/-bar$/'] }]
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <Button/>
+        <foo-button/>
+      </template>
+      `,
+      errors: [
+        {
+          messageId: 'invalidName',
+          data: { name: 'Button' },
+          line: 3
+        },
+        {
+          messageId: 'invalidName',
+          data: { name: 'foo-button' },
+          line: 4
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <bar-button/>
+        <foo/>
+      </template>
+      `,
+      options: [{ allow: ['/^foo-/', 'bar'] }],
+      errors: [
+        {
+          messageId: 'invalidName',
+          data: { name: 'bar-button' },
+          line: 3
+        },
+        {
+          messageId: 'invalidName',
+          data: { name: 'foo' },
+          line: 4
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/return-in-computed-property.js b/tests/lib/rules/return-in-computed-property.js
index 4a988e86b..2f17fd1c3 100644
--- a/tests/lib/rules/return-in-computed-property.js
+++ b/tests/lib/rules/return-in-computed-property.js
@@ -4,23 +4,15 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/return-in-computed-property')
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 
-const parserOptions = {
+const languageOptions = {
   ecmaVersion: 6,
   sourceType: 'module'
 }
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const ruleTester = new RuleTester()
 ruleTester.run('return-in-computed-property', rule, {
   valid: [
@@ -53,7 +45,7 @@ ruleTester.run('return-in-computed-property', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -70,7 +62,7 @@ ruleTester.run('return-in-computed-property', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -87,7 +79,7 @@ ruleTester.run('return-in-computed-property', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -102,8 +94,8 @@ ruleTester.run('return-in-computed-property', rule, {
           }
         }
       `,
-      parserOptions,
-      options: [{ treatUndefinedAsUnspecified: false }]
+      options: [{ treatUndefinedAsUnspecified: false }],
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -136,7 +128,7 @@ ruleTester.run('return-in-computed-property', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -152,8 +144,8 @@ ruleTester.run('return-in-computed-property', rule, {
           }
         }
       `,
-      parserOptions,
-      options: [{ treatUndefinedAsUnspecified: false }]
+      options: [{ treatUndefinedAsUnspecified: false }],
+      languageOptions
     }
   ],
 
@@ -168,7 +160,7 @@ ruleTester.run('return-in-computed-property', rule, {
           }
         }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Expected to return a value in "foo" computed property.',
@@ -186,7 +178,7 @@ ruleTester.run('return-in-computed-property', rule, {
           }
         }
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' },
+      languageOptions: { ecmaVersion: 6, sourceType: 'module' },
       errors: [
         {
           message: 'Expected to return a value in "foo" computed property.',
@@ -207,7 +199,7 @@ ruleTester.run('return-in-computed-property', rule, {
           }
         }
       `,
-      parserOptions: { ecmaVersion: 6, sourceType: 'module' },
+      languageOptions: { ecmaVersion: 6, sourceType: 'module' },
       errors: [
         {
           message: 'Expected to return a value in "foo" computed property.',
@@ -229,7 +221,7 @@ ruleTester.run('return-in-computed-property', rule, {
           }
         }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Expected to return a value in "foo" computed property.',
@@ -251,7 +243,7 @@ ruleTester.run('return-in-computed-property', rule, {
           }
         }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Expected to return a value in "foo" computed property.',
@@ -272,8 +264,8 @@ ruleTester.run('return-in-computed-property', rule, {
           }
         }
       `,
-      parserOptions,
       options: [{ treatUndefinedAsUnspecified: false }],
+      languageOptions,
       errors: [
         {
           message: 'Expected to return a value in "foo" computed property.',
@@ -292,8 +284,8 @@ ruleTester.run('return-in-computed-property', rule, {
           }
         }
       `,
-      parserOptions,
       options: [{ treatUndefinedAsUnspecified: true }],
+      languageOptions,
       errors: [
         {
           message: 'Expected to return a value in "foo" computed property.',
@@ -314,7 +306,7 @@ ruleTester.run('return-in-computed-property', rule, {
           }
         }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message:
@@ -349,7 +341,7 @@ ruleTester.run('return-in-computed-property', rule, {
           }
         }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Expected to return a value in computed function.',
@@ -386,8 +378,8 @@ ruleTester.run('return-in-computed-property', rule, {
           }
         }
       `,
-      parserOptions,
       options: [{ treatUndefinedAsUnspecified: false }],
+      languageOptions,
       errors: [
         {
           message: 'Expected to return a value in computed function.',
@@ -404,7 +396,7 @@ ruleTester.run('return-in-computed-property', rule, {
           }
         }
       }`,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message: 'Expected to return a value in "foo" computed property.',
diff --git a/tests/lib/rules/return-in-emits-validator.js b/tests/lib/rules/return-in-emits-validator.js
index f47e8ca77..235ade8d7 100644
--- a/tests/lib/rules/return-in-emits-validator.js
+++ b/tests/lib/rules/return-in-emits-validator.js
@@ -4,21 +4,19 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/return-in-emits-validator')
+const {
+  getTypeScriptFixtureTestOptions
+} = require('../../test-utils/typescript')
 
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2020, sourceType: 'module' }
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
 })
 ruleTester.run('return-in-emits-validator', rule, {
   valid: [
@@ -131,6 +129,14 @@ ruleTester.run('return-in-emits-validator', rule, {
         })
         </script>
       `
+    },
+    {
+      code: `
+      <script setup lang="ts">
+      import {Emits1 as Emits} from './test01'
+      const emit = defineEmits<Emits>()
+      </script>`,
+      ...getTypeScriptFixtureTestOptions()
     }
   ],
 
diff --git a/tests/lib/rules/script-indent.js b/tests/lib/rules/script-indent.js
index 2efb8b889..666ca9d71 100644
--- a/tests/lib/rules/script-indent.js
+++ b/tests/lib/rules/script-indent.js
@@ -5,20 +5,12 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const fs = require('fs')
 const path = require('path')
 const semver = require('semver')
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/script-indent')
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
 const FIXTURE_ROOT = path.resolve(__dirname, '../../fixtures/script-indent/')
 
 /**
@@ -47,10 +39,8 @@ function loadPatterns(additionalValid, additionalInvalid) {
       if ('parser' in baseObj) {
         baseObj.parser = require.resolve(baseObj.parser)
       }
-      if ('parserOptions' in baseObj && 'parser' in baseObj.parserOptions) {
-        baseObj.parserOptions.parser = require.resolve(
-          baseObj.parserOptions.parser
-        )
+      if ('languageOptions' in baseObj && 'parser' in baseObj.languageOptions) {
+        baseObj.languageOptions.parser = require(baseObj.languageOptions.parser)
       }
       return Object.assign(baseObj, { code, filename })
     })
@@ -124,16 +114,14 @@ function unIndent(strings) {
   return lines.map((line) => line.slice(minLineIndent)).join('\n')
 }
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
     ecmaVersion: 2022,
     sourceType: 'module',
-    parser: require.resolve('espree') // espree v8.0.0-beta.x
+    parserOptions: {
+      parser: require.resolve('espree') // espree v8.0.0-beta.x
+    }
   }
 })
 
@@ -275,7 +263,7 @@ tester.run(
       `,
         errors: [
           {
-            message: 'Expected " " character, but found "\\t" character.',
+            message: String.raw`Expected " " character, but found "\t" character.`,
             line: 3
           }
         ]
@@ -301,11 +289,11 @@ tester.run(
         options: ['tab'],
         errors: [
           {
-            message: 'Expected "\\t" character, but found " " character.',
+            message: String.raw`Expected "\t" character, but found " " character.`,
             line: 3
           },
           {
-            message: 'Expected "\\t" character, but found " " character.',
+            message: String.raw`Expected "\t" character, but found " " character.`,
             line: 4
           }
         ]
diff --git a/tests/lib/rules/script-setup-uses-vars.js b/tests/lib/rules/script-setup-uses-vars.js
deleted file mode 100644
index f8287c0c7..000000000
--- a/tests/lib/rules/script-setup-uses-vars.js
+++ /dev/null
@@ -1,369 +0,0 @@
-/**
- * @fileoverview Prevent `<script setup>` variables used in `<template>` to be marked as unused
- * @author Yosuke Ota
- * See LICENSE file in root directory for full license.
- */
-'use strict'
-
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const eslint = require('eslint')
-const rule = require('../../../lib/rules/script-setup-uses-vars')
-const ruleNoUnusedVars = new (require('eslint').Linter)()
-  .getRules()
-  .get('no-unused-vars')
-
-const RuleTester = eslint.RuleTester
-const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
-    ecmaVersion: 6,
-    sourceType: 'module'
-  }
-})
-
-const linter = ruleTester.linter || eslint.linter
-linter.defineRule('script-setup-uses-vars', rule)
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
-describe('script-setup-uses-vars', () => {
-  ruleTester.run('no-unused-vars', ruleNoUnusedVars, {
-    valid: [
-      {
-        filename: 'test.vue',
-        code: `
-        <script setup>
-          /* eslint script-setup-uses-vars: 1 */
-          // imported components are also directly usable in template
-          import Foo from './Foo.vue'
-          import { ref } from 'vue'
-
-          // write Composition API code just like in a normal setup()
-          // but no need to manually return everything
-          const count = ref(0)
-          const inc = () => {
-            count.value++
-          }
-        </script>
-
-        <template>
-          <Foo :count="count" @click="inc" />
-        </template>
-        `
-      },
-      {
-        filename: 'test.vue',
-        code: `
-        <script setup>
-          /* eslint script-setup-uses-vars: 1 */
-          const msg = 'Hello!'
-        </script>
-
-        <template>
-          <div>{{ msg }}</div>
-        </template>
-        `
-      },
-      {
-        filename: 'test.vue',
-        code: `
-        <script setup>
-          /* eslint script-setup-uses-vars: 1 */
-          import Foo from './Foo.vue'
-          import MyComponent from './MyComponent.vue'
-        </script>
-
-        <template>
-          <Foo />
-          <!-- kebab-case also works -->
-          <my-component />
-        </template>
-        `
-      },
-      {
-        filename: 'test.vue',
-        code: `
-        <script setup>
-          /* eslint script-setup-uses-vars: 1 */
-          import Foo from './Foo.vue'
-          import Bar from './Bar.vue'
-        </script>
-
-        <template>
-          <component :is="Foo" />
-          <component :is="someCondition ? Foo : Bar" />
-        </template>
-        `
-      },
-      {
-        filename: 'test.vue',
-        code: `
-        <script setup>
-          /* eslint script-setup-uses-vars: 1 */
-          import { directive as vClickOutside } from 'v-click-outside'
-        </script>
-
-        <template>
-          <div v-click-outside />
-        </template>
-        `
-      },
-
-      // Resolve component name
-      {
-        filename: 'test.vue',
-        code: `
-        <script setup>
-          /* eslint script-setup-uses-vars: 1 */
-          import FooPascalCase from './component.vue'
-          import BarPascalCase from './component.vue'
-          import BazPascalCase from './component.vue'
-        </script>
-
-        <template>
-          <FooPascalCase />
-          <bar-pascal-case />
-          <bazPascalCase />
-        </template>
-        `
-      },
-      {
-        filename: 'test.vue',
-        code: `
-        <script setup>
-          /* eslint script-setup-uses-vars: 1 */
-          import fooCamelCase from './component.vue'
-          import barCamelCase from './component.vue'
-        </script>
-
-        <template>
-          <fooCamelCase />
-          <bar-camel-case />
-        </template>
-        `
-      },
-
-      // TopLevel await
-      {
-        filename: 'test.vue',
-        code: `
-        <script setup>
-          /* eslint script-setup-uses-vars: 1 */
-          const post = await fetch(\`/api/post/1\`).then((r) => r.json())
-        </script>
-
-        <template>
-          {{post}}
-        </template>
-        `,
-        parserOptions: {
-          ecmaVersion: 2022,
-          sourceType: 'module'
-        }
-      },
-
-      // ref
-      {
-        filename: 'test.vue',
-        code: `
-        <script setup>
-          /* eslint script-setup-uses-vars: 1 */
-          import {ref} from 'vue'
-          const v = ref(null)
-        </script>
-
-        <template>
-          <div ref="v"/>
-        </template>
-        `
-      },
-
-      //style vars
-      {
-        filename: 'test.vue',
-        code: `
-        <script setup>
-          /* eslint script-setup-uses-vars: 1 */
-          const color = 'red'
-          const font = { size: '2em' }
-        </script>
-
-        <style>
-          * {
-            color: v-bind(color);
-            font-size: v-bind('font.size');
-          }
-        </style>
-        `
-      },
-      // ns
-      {
-        filename: 'test.vue',
-        code: `
-        <script setup>
-        /* eslint script-setup-uses-vars: 1 */
-        import * as Form from './form-components'
-        </script>
-
-        <template>
-          <Form.Input>
-            <Form.Label>label</Form.Label>
-          </Form.Input>
-        </template>
-        `
-      }
-    ],
-
-    invalid: [
-      {
-        filename: 'test.vue',
-        code: `
-        <script setup>
-          /* eslint script-setup-uses-vars: 1 */
-          // imported components are also directly usable in template
-          import Foo from './Foo.vue'
-          import Bar from './Bar.vue'
-          import { ref } from 'vue'
-
-          // write Composition API code just like in a normal setup()
-          // but no need to manually return everything
-          const count = ref(0)
-          const inc = () => {
-            count.value++
-          }
-          const foo = ref(42)
-          console.log(foo.value)
-          const bar = ref(42)
-          bar.value++
-          const baz = ref(42)
-        </script>
-
-        <template>
-          <Foo :count="count" @click="inc" />
-        </template>
-        `,
-        errors: [
-          {
-            message: "'Bar' is defined but never used.",
-            line: 6
-          },
-          {
-            message: "'baz' is assigned a value but never used.",
-            line: 19
-          }
-        ]
-      },
-
-      // Resolve component name
-      {
-        filename: 'test.vue',
-        code: `
-        <script setup>
-          /* eslint script-setup-uses-vars: 1 */
-          import camelCase from './component.vue'
-        </script>
-
-        <template>
-          <CamelCase />
-        </template>
-        `,
-        errors: [
-          {
-            message: "'camelCase' is defined but never used.",
-            line: 4
-          }
-        ]
-      },
-
-      // Scope tests
-      {
-        filename: 'test.vue',
-        code: `
-        <script setup>
-          /* eslint script-setup-uses-vars: 1 */
-          if (a) {
-            const msg = 'Hello!'
-          }
-        </script>
-
-        <template>
-          <div>{{ msg }}</div>
-        </template>
-        `,
-        errors: [
-          {
-            message: "'msg' is assigned a value but never used.",
-            line: 5
-          }
-        ]
-      },
-      {
-        filename: 'test.vue',
-        code: `
-        <script setup>
-          /* eslint script-setup-uses-vars: 1 */
-          const i = 42
-          const list = [1,2,3]
-        </script>
-
-        <template>
-          <div v-for="i in list">{{ i }}</div>
-        </template>
-      `,
-        errors: [
-          {
-            message: "'i' is assigned a value but never used.",
-            line: 4
-          }
-        ]
-      },
-
-      // Not `<script setup>`
-      {
-        filename: 'test.vue',
-        code: `
-        <script>
-          /* eslint script-setup-uses-vars: 1 */
-          const msg = 'Hello!'
-        </script>
-
-        <template>
-          <div>{{ msg }}</div>
-        </template>
-        `,
-        errors: [
-          {
-            message: "'msg' is assigned a value but never used.",
-            line: 4
-          }
-        ]
-      },
-
-      //style vars
-      {
-        filename: 'test.vue',
-        code: `
-        <script setup>
-          /* eslint script-setup-uses-vars: 1 */
-          const color = 'red'
-        </script>
-
-        <style lang="scss">
-          .v-bind .color {
-            color: 'v-bind(color)';
-            background-color: 'v-bind(color)';
-          }
-          /* v-bind(color) */
-          // v-bind(color)
-        </style>
-        `,
-        errors: ["'color' is assigned a value but never used."]
-      }
-    ]
-  })
-})
diff --git a/tests/lib/rules/singleline-html-element-content-newline.js b/tests/lib/rules/singleline-html-element-content-newline.js
index 7df1e4da8..83366266b 100644
--- a/tests/lib/rules/singleline-html-element-content-newline.js
+++ b/tests/lib/rules/singleline-html-element-content-newline.js
@@ -3,22 +3,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/singleline-html-element-content-newline')
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
-    ecmaVersion: 2015
-  }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('singleline-html-element-content-newline', rule, {
@@ -212,7 +201,35 @@ tester.run('singleline-html-element-content-newline', rule, {
         <div
           id=
           ""
-    `
+    `,
+    {
+      code: `
+        <template>
+          <pre>content</pre>
+          <IgnoreTag>content</IgnoreTag>
+          <IgnoreTag attr>content</IgnoreTag>
+          <IgnoreTag><span attr>content</span></IgnoreTag>
+        </template>`,
+      options: [
+        {
+          externalIgnores: ['IgnoreTag']
+        }
+      ]
+    },
+    {
+      code: `
+        <template>
+        <pre>content</pre>
+          <ignore-tag>content</ignore-tag>
+          <ignore-tag attr>content</ignore-tag>
+          <ignore-tag><span attr>content</span></ignore-tag>
+        </template>`,
+      options: [
+        {
+          externalIgnores: ['IgnoreTag']
+        }
+      ]
+    }
   ],
   invalid: [
     {
@@ -234,7 +251,6 @@ content
             'Expected 1 line break after opening tag (`<div>`), but no line breaks found.',
           line: 3,
           column: 30,
-          type: 'HTMLTagClose',
           endLine: 3,
           endColumn: 30
         },
@@ -243,7 +259,6 @@ content
             'Expected 1 line break before closing tag (`</div>`), but no line breaks found.',
           line: 3,
           column: 37,
-          type: 'HTMLEndTagOpen',
           endLine: 3,
           endColumn: 37
         }
@@ -380,7 +395,6 @@ content
           <div>singleline content</div>
         </template>
       `,
-      options: [{ ignoreWhenNoAttributes: false }],
       output: `
         <template>
           <div>
@@ -388,6 +402,7 @@ singleline content
 </div>
         </template>
       `,
+      options: [{ ignoreWhenNoAttributes: false }],
       errors: [
         'Expected 1 line break after opening tag (`<div>`), but no line breaks found.',
         'Expected 1 line break before closing tag (`</div>`), but no line breaks found.'
@@ -399,7 +414,6 @@ singleline content
           <tr><td>singleline</td><td>children</td></tr>
         </template>
       `,
-      options: [{ ignoreWhenNoAttributes: false }],
       output: `
         <template>
           <tr>
@@ -411,6 +425,7 @@ children
 </tr>
         </template>
       `,
+      options: [{ ignoreWhenNoAttributes: false }],
       errors: [
         'Expected 1 line break after opening tag (`<tr>`), but no line breaks found.',
         'Expected 1 line break after opening tag (`<td>`), but no line breaks found.',
@@ -426,7 +441,6 @@ children
           <div><!-- singleline comment --></div>
         </template>
       `,
-      options: [{ ignoreWhenNoAttributes: false }],
       output: `
         <template>
           <div>
@@ -434,6 +448,7 @@ children
 </div>
         </template>
       `,
+      options: [{ ignoreWhenNoAttributes: false }],
       errors: [
         'Expected 1 line break after opening tag (`<div>`), but no line breaks found.',
         'Expected 1 line break before closing tag (`</div>`), but no line breaks found.'
@@ -445,7 +460,6 @@ children
           <div   >   singleline element   </div   >
         </template>
       `,
-      options: [{ ignoreWhenNoAttributes: false }],
       output: `
         <template>
           <div   >
@@ -453,6 +467,7 @@ singleline element
 </div   >
         </template>
       `,
+      options: [{ ignoreWhenNoAttributes: false }],
       errors: [
         'Expected 1 line break after opening tag (`<div>`), but no line breaks found.',
         'Expected 1 line break before closing tag (`</div>`), but no line breaks found.'
@@ -464,13 +479,13 @@ singleline element
           <div></div>
         </template>
       `,
-      options: [{ ignoreWhenEmpty: false, ignoreWhenNoAttributes: false }],
       output: `
         <template>
           <div>
 </div>
         </template>
       `,
+      options: [{ ignoreWhenEmpty: false, ignoreWhenNoAttributes: false }],
       errors: [
         'Expected 1 line break after opening tag (`<div>`), but no line breaks found.'
       ]
@@ -481,13 +496,13 @@ singleline element
           <div>    </div>
         </template>
       `,
-      options: [{ ignoreWhenEmpty: false, ignoreWhenNoAttributes: false }],
       output: `
         <template>
           <div>
 </div>
         </template>
       `,
+      options: [{ ignoreWhenEmpty: false, ignoreWhenNoAttributes: false }],
       errors: [
         'Expected 1 line break after opening tag (`<div>`), but no line breaks found.'
       ]
diff --git a/tests/lib/rules/slot-name-casing.js b/tests/lib/rules/slot-name-casing.js
new file mode 100644
index 000000000..ea8b72aab
--- /dev/null
+++ b/tests/lib/rules/slot-name-casing.js
@@ -0,0 +1,148 @@
+/**
+ * @author WayneZhang
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/slot-name-casing')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('slot-name-casing', rule, {
+  valid: [
+    `<template><slot key="foo" /></template>`,
+    `<template><slot name /></template>`,
+    `<template><slot name="foo" /></template>`,
+    `<template><slot name="fooBar" /></template>`,
+    `<template><slot :name="fooBar" /></template>`,
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <slot name="foo" />
+          <slot name="foo-bar" />
+          <slot :name="fooBar" />
+        </template>
+      `,
+      options: ['kebab-case']
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <slot name="foo" />
+          <slot :name="fooBar" />
+        </template>
+      `,
+      options: ['singleword']
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <slot name="foo-bar" />
+          <slot name="foo-Bar_baz" />
+        </template>
+      `,
+      errors: [
+        {
+          messageId: 'invalidCase',
+          data: {
+            name: 'foo-bar',
+            caseType: 'camelCase'
+          },
+          line: 3,
+          column: 17
+        },
+        {
+          messageId: 'invalidCase',
+          data: {
+            name: 'foo-Bar_baz',
+            caseType: 'camelCase'
+          },
+          line: 4,
+          column: 17
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <slot name="fooBar" />
+          <slot name="foo-Bar_baz" />
+        </template>
+      `,
+      options: ['kebab-case'],
+      errors: [
+        {
+          messageId: 'invalidCase',
+          data: {
+            name: 'fooBar',
+            caseType: 'kebab-case'
+          },
+          line: 3,
+          column: 17
+        },
+        {
+          messageId: 'invalidCase',
+          data: {
+            name: 'foo-Bar_baz',
+            caseType: 'kebab-case'
+          },
+          line: 4,
+          column: 17
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <slot name="foo-bar" />
+          <slot name="fooBar" />
+          <slot name="foo-Bar_baz" />
+        </template>
+      `,
+      options: ['singleword'],
+      errors: [
+        {
+          messageId: 'invalidCase',
+          data: {
+            name: 'foo-bar',
+            caseType: 'singleword'
+          },
+          line: 3,
+          column: 17
+        },
+        {
+          messageId: 'invalidCase',
+          data: {
+            name: 'fooBar',
+            caseType: 'singleword'
+          },
+          line: 4,
+          column: 17
+        },
+        {
+          messageId: 'invalidCase',
+          data: {
+            name: 'foo-Bar_baz',
+            caseType: 'singleword'
+          },
+          line: 5,
+          column: 17
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/sort-keys.js b/tests/lib/rules/sort-keys.js
index 83e59cc41..030c5ed3f 100644
--- a/tests/lib/rules/sort-keys.js
+++ b/tests/lib/rules/sort-keys.js
@@ -5,11 +5,11 @@
 'use strict'
 
 const rule = require('../../../lib/rules/sort-keys')
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const ruleTester = new RuleTester()
 
-const parserOptions = {
+const languageOptions = {
   ecmaVersion: 2018,
   sourceType: 'module'
 }
@@ -28,7 +28,7 @@ ruleTester.run('sort-keys', rule, {
           }
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
@@ -46,7 +46,7 @@ ruleTester.run('sort-keys', rule, {
           },
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'propsOrder.vue',
@@ -69,21 +69,21 @@ ruleTester.run('sort-keys', rule, {
           },
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
       code: `
         export default {}
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.vue',
       code: `
         export default 'example-text'
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.jsx',
@@ -97,14 +97,14 @@ ruleTester.run('sort-keys', rule, {
           },
         }
       `,
-      parserOptions
+      languageOptions
     },
     {
       filename: 'test.js',
       code: `
         Vue.component('example')
       `,
-      parserOptions: { ecmaVersion: 6 }
+      languageOptions: { ecmaVersion: 6 }
     },
     {
       filename: 'test.js',
@@ -120,7 +120,7 @@ ruleTester.run('sort-keys', rule, {
           }
         })
       `,
-      parserOptions: { ecmaVersion: 6 }
+      languageOptions: { ecmaVersion: 6 }
     },
     {
       filename: 'test.js',
@@ -136,31 +136,31 @@ ruleTester.run('sort-keys', rule, {
           }
         })
       `,
-      parserOptions: { ecmaVersion: 6 }
+      languageOptions: { ecmaVersion: 6 }
     },
     {
       filename: 'test.js',
       code: `
         new Vue()
       `,
-      parserOptions: { ecmaVersion: 6 }
+      languageOptions: { ecmaVersion: 6 }
     },
     // default (asc)
     {
       code: "var obj = {'':1, [``]:2}",
       options: [],
-      parserOptions: { ecmaVersion: 6 }
+      languageOptions: { ecmaVersion: 6 }
     },
     {
       code: "var obj = {[``]:1, '':2}",
       options: [],
-      parserOptions: { ecmaVersion: 6 }
+      languageOptions: { ecmaVersion: 6 }
     },
     { code: "var obj = {'':1, a:2}", options: [] },
     {
       code: 'var obj = {[``]:1, a:2}',
       options: [],
-      parserOptions: { ecmaVersion: 6 }
+      languageOptions: { ecmaVersion: 6 }
     },
     { code: 'var obj = {_:2, a:1, b:3} // default', options: [] },
     { code: 'var obj = {a:1, b:3, c:2}', options: [] },
@@ -174,92 +174,96 @@ ruleTester.run('sort-keys', rule, {
     {
       code: 'var obj = {a:1, b:3, [a + b]: -1, c:2}',
       options: [],
-      parserOptions: { ecmaVersion: 6 }
+      languageOptions: { ecmaVersion: 6 }
     },
     {
       code: "var obj = {'':1, [f()]:2, a:3}",
       options: [],
-      parserOptions: { ecmaVersion: 6 }
+      languageOptions: { ecmaVersion: 6 }
     },
     {
       code: "var obj = {a:1, [b++]:2, '':3}",
       options: ['desc'],
-      parserOptions: { ecmaVersion: 6 }
+      languageOptions: { ecmaVersion: 6 }
     },
 
     // ignore properties separated by spread properties
     {
       code: 'var obj = {a:1, ...z, b:1}',
       options: [],
-      parserOptions: { ecmaVersion: 2018 }
+      languageOptions: { ecmaVersion: 2018 }
     },
     {
       code: 'var obj = {b:1, ...z, a:1}',
       options: [],
-      parserOptions: { ecmaVersion: 2018 }
+      languageOptions: { ecmaVersion: 2018 }
     },
     {
       code: 'var obj = {...a, b:1, ...c, d:1}',
       options: [],
-      parserOptions: { ecmaVersion: 2018 }
+      languageOptions: { ecmaVersion: 2018 }
     },
     {
       code: 'var obj = {...a, b:1, ...d, ...c, e:2, z:5}',
       options: [],
-      parserOptions: { ecmaVersion: 2018 }
+      languageOptions: { ecmaVersion: 2018 }
     },
     {
       code: 'var obj = {b:1, ...c, ...d, e:2}',
       options: [],
-      parserOptions: { ecmaVersion: 2018 }
+      languageOptions: { ecmaVersion: 2018 }
     },
     {
       code: "var obj = {a:1, ...z, '':2}",
       options: [],
-      parserOptions: { ecmaVersion: 2018 }
+      languageOptions: { ecmaVersion: 2018 }
     },
     {
       code: "var obj = {'':1, ...z, 'a':2}",
       options: ['desc'],
-      parserOptions: { ecmaVersion: 2018 }
+      languageOptions: { ecmaVersion: 2018 }
     },
 
     // not ignore properties not separated by spread properties
     {
       code: 'var obj = {...z, a:1, b:1}',
       options: [],
-      parserOptions: { ecmaVersion: 2018 }
+      languageOptions: { ecmaVersion: 2018 }
     },
     {
       code: 'var obj = {...z, ...c, a:1, b:1}',
       options: [],
-      parserOptions: { ecmaVersion: 2018 }
+      languageOptions: { ecmaVersion: 2018 }
     },
     {
       code: 'var obj = {a:1, b:1, ...z}',
       options: [],
-      parserOptions: { ecmaVersion: 2018 }
+      languageOptions: { ecmaVersion: 2018 }
     },
     {
       code: 'var obj = {...z, ...x, a:1, ...c, ...d, f:5, e:4}',
       options: ['desc'],
-      parserOptions: { ecmaVersion: 2018 }
+      languageOptions: { ecmaVersion: 2018 }
     },
 
     // works when spread occurs somewhere other than an object literal
     {
       code: 'function fn(...args) { return [...args].length; }',
       options: [],
-      parserOptions: { ecmaVersion: 2018 }
+      languageOptions: { ecmaVersion: 2018 }
     },
     {
       code: 'function g() {}; function f(...args) { return g(...args); }',
       options: [],
-      parserOptions: { ecmaVersion: 2018 }
+      languageOptions: { ecmaVersion: 2018 }
     },
 
     // ignore destructuring patterns.
-    { code: 'let {a, b} = {}', options: [], parserOptions: { ecmaVersion: 6 } },
+    {
+      code: 'let {a, b} = {}',
+      options: [],
+      languageOptions: { ecmaVersion: 6 }
+    },
 
     // nested
     { code: 'var obj = {a:1, b:{x:1, y:1}, c:1}', options: [] },
@@ -519,7 +523,7 @@ ruleTester.run('sort-keys', rule, {
     },
     {
       code: 'var obj = {a:1, [``]:2} // default',
-      parserOptions: { ecmaVersion: 6 },
+      languageOptions: { ecmaVersion: 6 },
       errors: [
         "Expected object keys to be in ascending order. '' should be before 'a'."
       ]
@@ -571,7 +575,7 @@ ruleTester.run('sort-keys', rule, {
     {
       code: 'var obj = {...z, c:1, b:1}',
       options: [],
-      parserOptions: { ecmaVersion: 2018 },
+      languageOptions: { ecmaVersion: 2018 },
       errors: [
         "Expected object keys to be in ascending order. 'b' should be before 'c'."
       ]
@@ -579,7 +583,7 @@ ruleTester.run('sort-keys', rule, {
     {
       code: 'var obj = {...z, ...c, d:4, b:1, ...y, ...f, e:2, a:1}',
       options: [],
-      parserOptions: { ecmaVersion: 2018 },
+      languageOptions: { ecmaVersion: 2018 },
       errors: [
         "Expected object keys to be in ascending order. 'b' should be before 'd'.",
         "Expected object keys to be in ascending order. 'a' should be before 'e'."
@@ -588,7 +592,7 @@ ruleTester.run('sort-keys', rule, {
     {
       code: 'var obj = {c:1, b:1, ...a}',
       options: [],
-      parserOptions: { ecmaVersion: 2018 },
+      languageOptions: { ecmaVersion: 2018 },
       errors: [
         "Expected object keys to be in ascending order. 'b' should be before 'c'."
       ]
@@ -596,7 +600,7 @@ ruleTester.run('sort-keys', rule, {
     {
       code: 'var obj = {...z, ...a, c:1, b:1}',
       options: [],
-      parserOptions: { ecmaVersion: 2018 },
+      languageOptions: { ecmaVersion: 2018 },
       errors: [
         "Expected object keys to be in ascending order. 'b' should be before 'c'."
       ]
@@ -604,7 +608,7 @@ ruleTester.run('sort-keys', rule, {
     {
       code: 'var obj = {...z, b:1, a:1, ...d, ...c}',
       options: [],
-      parserOptions: { ecmaVersion: 2018 },
+      languageOptions: { ecmaVersion: 2018 },
       errors: [
         "Expected object keys to be in ascending order. 'a' should be before 'b'."
       ]
@@ -612,7 +616,7 @@ ruleTester.run('sort-keys', rule, {
     {
       code: 'var obj = {...z, a:2, b:0, ...x, ...c}',
       options: ['desc'],
-      parserOptions: { ecmaVersion: 2018 },
+      languageOptions: { ecmaVersion: 2018 },
       errors: [
         "Expected object keys to be in descending order. 'b' should be before 'a'."
       ]
@@ -620,7 +624,7 @@ ruleTester.run('sort-keys', rule, {
     {
       code: 'var obj = {...z, a:2, b:0, ...x}',
       options: ['desc'],
-      parserOptions: { ecmaVersion: 2018 },
+      languageOptions: { ecmaVersion: 2018 },
       errors: [
         "Expected object keys to be in descending order. 'b' should be before 'a'."
       ]
@@ -628,7 +632,7 @@ ruleTester.run('sort-keys', rule, {
     {
       code: "var obj = {...z, '':1, a:2}",
       options: ['desc'],
-      parserOptions: { ecmaVersion: 2018 },
+      languageOptions: { ecmaVersion: 2018 },
       errors: [
         "Expected object keys to be in descending order. 'a' should be before ''."
       ]
@@ -637,7 +641,7 @@ ruleTester.run('sort-keys', rule, {
     // ignore non-simple computed properties, but their position shouldn't affect other comparisons.
     {
       code: "var obj = {a:1, [b+c]:2, '':3}",
-      parserOptions: { ecmaVersion: 6 },
+      languageOptions: { ecmaVersion: 6 },
       errors: [
         "Expected object keys to be in ascending order. '' should be before 'a'."
       ]
@@ -645,7 +649,7 @@ ruleTester.run('sort-keys', rule, {
     {
       code: "var obj = {'':1, [b+c]:2, a:3}",
       options: ['desc'],
-      parserOptions: { ecmaVersion: 6 },
+      languageOptions: { ecmaVersion: 6 },
       errors: [
         "Expected object keys to be in descending order. 'a' should be before ''."
       ]
@@ -653,7 +657,7 @@ ruleTester.run('sort-keys', rule, {
     {
       code: "var obj = {b:1, [f()]:2, '':3, a:4}",
       options: ['desc'],
-      parserOptions: { ecmaVersion: 6 },
+      languageOptions: { ecmaVersion: 6 },
       errors: [
         "Expected object keys to be in descending order. 'a' should be before ''."
       ]
@@ -662,7 +666,7 @@ ruleTester.run('sort-keys', rule, {
     // not ignore simple computed properties.
     {
       code: 'var obj = {a:1, b:3, [a]: -1, c:2}',
-      parserOptions: { ecmaVersion: 6 },
+      languageOptions: { ecmaVersion: 6 },
       errors: [
         "Expected object keys to be in ascending order. 'a' should be before 'b'."
       ]
@@ -914,7 +918,7 @@ ruleTester.run('sort-keys', rule, {
     {
       code: "var obj = {[``]:1, a:'2'} // desc",
       options: ['desc'],
-      parserOptions: { ecmaVersion: 6 },
+      languageOptions: { ecmaVersion: 6 },
       errors: [
         "Expected object keys to be in descending order. 'a' should be before ''."
       ]
@@ -1189,7 +1193,7 @@ ruleTester.run('sort-keys', rule, {
           },
         }
       `,
-      parserOptions,
+      languageOptions,
 
       errors: [
         {
@@ -1224,7 +1228,7 @@ ruleTester.run('sort-keys', rule, {
           name: 'burger',
         };
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message:
@@ -1257,7 +1261,7 @@ ruleTester.run('sort-keys', rule, {
           name: 'burger',
         };
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message:
@@ -1286,7 +1290,7 @@ ruleTester.run('sort-keys', rule, {
           name: 'burger',
         };
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message:
@@ -1315,7 +1319,7 @@ ruleTester.run('sort-keys', rule, {
 
         const dict = { zd: 1, a: 2 };
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message:
@@ -1346,7 +1350,7 @@ ruleTester.run('sort-keys', rule, {
           template: '<div></div>'
         })
       `,
-      parserOptions: { ecmaVersion: 6 },
+      languageOptions: { ecmaVersion: 6 },
       errors: [
         {
           message:
@@ -1377,7 +1381,7 @@ ruleTester.run('sort-keys', rule, {
           template: '<div></div>'
         })
       `,
-      parserOptions: { ecmaVersion: 6 },
+      languageOptions: { ecmaVersion: 6 },
       errors: [
         {
           message:
@@ -1408,7 +1412,7 @@ ruleTester.run('sort-keys', rule, {
           template: '<div></div>'
         })
       `,
-      parserOptions: { ecmaVersion: 6 },
+      languageOptions: { ecmaVersion: 6 },
       errors: [
         {
           message:
@@ -1436,7 +1440,7 @@ ruleTester.run('sort-keys', rule, {
         }
       `,
       options: ['asc', { ignoreGrandchildrenOf: [] }],
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message:
@@ -1459,7 +1463,7 @@ ruleTester.run('sort-keys', rule, {
           a: 2
         }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message:
@@ -1487,7 +1491,7 @@ ruleTester.run('sort-keys', rule, {
           }
         }
       `,
-      parserOptions,
+      languageOptions,
       errors: [
         {
           message:
diff --git a/tests/lib/rules/space-in-parens.js b/tests/lib/rules/space-in-parens.js
index 8791652ed..9b1509f07 100644
--- a/tests/lib/rules/space-in-parens.js
+++ b/tests/lib/rules/space-in-parens.js
@@ -3,24 +3,11 @@
  */
 'use strict'
 
-const { RuleTester, ESLint } = require('../../eslint-compat')
-const semver = require('semver')
+const { RuleTester } = require('../../eslint-compat')
 const rule = require('../../../lib/rules/space-in-parens')
 
-const errorMessage = semver.lt(ESLint.version, '6.4.0')
-  ? (obj) => {
-      const messageId = obj.messageId
-      delete obj.messageId
-      obj.message = messageId.startsWith('missing')
-        ? 'There must be a space inside this paren.'
-        : 'There should be no spaces inside this paren.'
-      return obj
-    }
-  : (obj) => obj
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('space-in-parens', rule, {
@@ -77,14 +64,14 @@ tester.run('space-in-parens', rule, {
         />
       </template>`,
       errors: [
-        errorMessage({
+        {
           messageId: 'rejectedOpeningSpace',
           line: 4
-        }),
-        errorMessage({
+        },
+        {
           messageId: 'rejectedClosingSpace',
           line: 4
-        })
+        }
       ]
     },
     {
@@ -94,22 +81,22 @@ tester.run('space-in-parens', rule, {
           @click="foo(arg)"
         />
       </template>`,
-      options: ['always'],
       output: `
       <template>
         <button
           @click="foo( arg )"
         />
       </template>`,
+      options: ['always'],
       errors: [
-        errorMessage({
+        {
           messageId: 'missingOpeningSpace',
           line: 4
-        }),
-        errorMessage({
+        },
+        {
           messageId: 'missingClosingSpace',
           line: 4
-        })
+        }
       ]
     },
     {
@@ -126,14 +113,14 @@ tester.run('space-in-parens', rule, {
         >
       </template>`,
       errors: [
-        errorMessage({
+        {
           messageId: 'rejectedOpeningSpace',
           line: 4
-        }),
-        errorMessage({
+        },
+        {
           messageId: 'rejectedClosingSpace',
           line: 4
-        })
+        }
       ]
     },
     {
@@ -143,22 +130,22 @@ tester.run('space-in-parens', rule, {
           :value="(1 + 2) + 3"
         >
       </template>`,
-      options: ['always'],
       output: `
       <template>
         <input
           :value="( 1 + 2 ) + 3"
         >
       </template>`,
+      options: ['always'],
       errors: [
-        errorMessage({
+        {
           messageId: 'missingOpeningSpace',
           line: 4
-        }),
-        errorMessage({
+        },
+        {
           messageId: 'missingClosingSpace',
           line: 4
-        })
+        }
       ]
     },
     {
@@ -175,14 +162,14 @@ tester.run('space-in-parens', rule, {
         >
       </template>`,
       errors: [
-        errorMessage({
+        {
           messageId: 'rejectedOpeningSpace',
           line: 4
-        }),
-        errorMessage({
+        },
+        {
           messageId: 'rejectedClosingSpace',
           line: 4
-        })
+        }
       ]
     },
     {
@@ -192,22 +179,22 @@ tester.run('space-in-parens', rule, {
           :[(1+2)]="(1 + 2) + 3"
         >
       </template>`,
-      options: ['always'],
       output: `
       <template>
         <input
           :[(1+2)]="( 1 + 2 ) + 3"
         >
       </template>`,
+      options: ['always'],
       errors: [
-        errorMessage({
+        {
           messageId: 'missingOpeningSpace',
           line: 4
-        }),
-        errorMessage({
+        },
+        {
           messageId: 'missingClosingSpace',
           line: 4
-        })
+        }
       ]
     },
 
@@ -226,14 +213,14 @@ tester.run('space-in-parens', rule, {
       }
       </style>`,
       errors: [
-        errorMessage({
+        {
           messageId: 'rejectedOpeningSpace',
           line: 4
-        }),
-        errorMessage({
+        },
+        {
           messageId: 'rejectedClosingSpace',
           line: 4
-        })
+        }
       ]
     }
   ]
diff --git a/tests/lib/rules/space-infix-ops.js b/tests/lib/rules/space-infix-ops.js
index b8a679787..d05e25170 100644
--- a/tests/lib/rules/space-infix-ops.js
+++ b/tests/lib/rules/space-infix-ops.js
@@ -3,18 +3,14 @@
  */
 'use strict'
 
-const { RuleTester, ESLint } = require('../../eslint-compat')
-const semver = require('semver')
+const { RuleTester } = require('../../eslint-compat')
 const rule = require('../../../lib/rules/space-infix-ops')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
-const message = semver.lt(ESLint.version, '5.10.0')
-  ? () => 'Infix operators must be spaced.'
-  : (operator) => `Operator '${operator}' must be spaced.`
+const message = (operator) => `Operator '${operator}' must be spaced.`
 
 tester.run('space-infix-ops', rule, {
   valid: [
diff --git a/tests/lib/rules/space-unary-ops.js b/tests/lib/rules/space-unary-ops.js
index 6b3e7c25f..8229e78cd 100644
--- a/tests/lib/rules/space-unary-ops.js
+++ b/tests/lib/rules/space-unary-ops.js
@@ -3,12 +3,11 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/space-unary-ops')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('space-unary-ops', rule, {
@@ -50,8 +49,8 @@ tester.run('space-unary-ops', rule, {
     },
     {
       code: '<template><div :[!a]="!a" /></template>',
-      options: [{ nonwords: true }],
       output: '<template><div :[!a]="! a" /></template>',
+      options: [{ nonwords: true }],
       errors: ["Unary operator '!' must be followed by whitespace."]
     },
 
diff --git a/tests/lib/rules/static-class-names-order.js b/tests/lib/rules/static-class-names-order.js
index 6028561fd..748cd6603 100644
--- a/tests/lib/rules/static-class-names-order.js
+++ b/tests/lib/rules/static-class-names-order.js
@@ -4,20 +4,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/static-class-names-order')
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 tester.run('static-class-names-order', rule, {
   valid: [
@@ -51,7 +42,10 @@ tester.run('static-class-names-order', rule, {
       errors: [
         {
           message: 'Classes should be ordered alphabetically.',
-          type: 'VAttribute'
+          line: 1,
+          column: 16,
+          endLine: 1,
+          endColumn: 27
         }
       ]
     },
@@ -68,7 +62,10 @@ tester.run('static-class-names-order', rule, {
       errors: [
         {
           message: 'Classes should be ordered alphabetically.',
-          type: 'VAttribute'
+          line: 2,
+          column: 16,
+          endLine: 2,
+          endColumn: 29
         }
       ]
     }
diff --git a/tests/lib/rules/template-curly-spacing.js b/tests/lib/rules/template-curly-spacing.js
index 6c4376969..c806bfafc 100644
--- a/tests/lib/rules/template-curly-spacing.js
+++ b/tests/lib/rules/template-curly-spacing.js
@@ -3,12 +3,11 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/template-curly-spacing')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2020 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2020 }
 })
 
 tester.run('template-curly-spacing', rule, {
@@ -41,14 +40,13 @@ tester.run('template-curly-spacing', rule, {
     },
 
     // CSS vars injection
-    {
-      code: `
+    `
       <style>
       .text {
         padding: v-bind(\`\${a}px\`)
       }
-      </style>`
-    }
+      </style>
+    `
   ],
   invalid: [
     {
@@ -79,12 +77,12 @@ tester.run('template-curly-spacing', rule, {
         <div :class="[\`foo-\${bar}\`]" />
       </template>
       `,
-      options: ['always'],
       output: `
       <template>
         <div :class="[\`foo-\${ bar }\`]" />
       </template>
       `,
+      options: ['always'],
       errors: [
         {
           message: "Expected space(s) after '${'.",
diff --git a/tests/lib/rules/this-in-template.js b/tests/lib/rules/this-in-template.js
index 220331b3b..53896794e 100644
--- a/tests/lib/rules/this-in-template.js
+++ b/tests/lib/rules/this-in-template.js
@@ -4,21 +4,12 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/this-in-template')
 
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2020 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2020 }
 })
 
 function createValidTests(prefix, options) {
@@ -52,10 +43,6 @@ function createValidTests(prefix, options) {
       code: `<template><div v-if="${prefix}foo()">{{ ${prefix}bar }}</div></template><!-- ${comment} -->`,
       options
     },
-    {
-      code: `<template><div :parent="this"></div></template><!-- ${comment} -->`,
-      options
-    },
     {
       code: `<template><div v-for="x of ${prefix}xs">{{this.x}}</div></template><!-- ${comment} -->`,
       options
@@ -76,26 +63,6 @@ function createValidTests(prefix, options) {
       code: `<template><div v-for="x of ${prefix}xs">{{this['x']}}</div></template><!-- ${comment} -->`,
       options
     },
-    {
-      code: `<template><div>{{ this.class }}</div></template><!-- ${comment} -->`,
-      options
-    },
-    {
-      code: `<template><div>{{ this['0'] }}</div></template><!-- ${comment} -->`,
-      options
-    },
-    {
-      code: `<template><div>{{ this['this'] }}</div></template><!-- ${comment} -->`,
-      options
-    },
-    {
-      code: `<template><div>{{ this['foo bar'] }}</div></template><!-- ${comment} -->`,
-      options
-    },
-    {
-      code: `<template><div>{{ }}</div></template><!-- ${comment} -->`,
-      options
-    },
     {
       code: `<template>
         <div>
@@ -106,12 +73,6 @@ function createValidTests(prefix, options) {
         </div>
       </template><!-- ${comment} -->`,
       options
-    },
-
-    // We cannot use `.` in dynamic arguments because the right of the `.` becomes a modifier.
-    {
-      code: `<template><div v-on:[x]="1"></div></template><!-- ${comment} -->`,
-      options
     }
   ]
 }
@@ -190,7 +151,7 @@ function createInvalidTests(prefix, options, message, type) {
       )}bar"></div></template><!-- ${comment} -->`,
       errors: [{ message, type }],
       options
-    },
+    }
 
     // We cannot use `.` in dynamic arguments because the right of the `.` becomes a modifier.
     // {
@@ -198,22 +159,6 @@ function createInvalidTests(prefix, options, message, type) {
     //   errors: [{ message, type }],
     //   options
     // }
-    ...(options[0] === 'always'
-      ? []
-      : [
-          {
-            code: `<template><div>{{ this['xs'] }}</div></template><!-- ${comment} -->`,
-            output: `<template><div>{{ xs }}</div></template><!-- ${comment} -->`,
-            errors: [{ message, type }],
-            options
-          },
-          {
-            code: `<template><div>{{ this['xs0AZ_foo'] }}</div></template><!-- ${comment} -->`,
-            output: `<template><div>{{ xs0AZ_foo }}</div></template><!-- ${comment} -->`,
-            errors: [{ message, type }],
-            options
-          }
-        ])
   ]
 }
 
@@ -225,7 +170,41 @@ ruleTester.run('this-in-template', rule, {
     ...createValidTests('', []),
     ...createValidTests('', ['never']),
     ...createValidTests('this.', ['always']),
-    ...createValidTests('this?.', ['always'])
+    ...createValidTests('this?.', ['always']),
+    ...[[], ['never'], ['always']].flatMap((options) => {
+      const comment = options.join('')
+      return [
+        {
+          code: `<template><div :parent="this"></div></template><!-- ${comment} -->`,
+          options
+        },
+        {
+          code: `<template><div>{{ this.class }}</div></template><!-- ${comment} -->`,
+          options
+        },
+        {
+          code: `<template><div>{{ this['0'] }}</div></template><!-- ${comment} -->`,
+          options
+        },
+        {
+          code: `<template><div>{{ this['this'] }}</div></template><!-- ${comment} -->`,
+          options
+        },
+        {
+          code: `<template><div>{{ this['foo bar'] }}</div></template><!-- ${comment} -->`,
+          options
+        },
+        {
+          code: `<template><div>{{ }}</div></template><!-- ${comment} -->`,
+          options
+        },
+        // We cannot use `.` in dynamic arguments because the right of the `.` becomes a modifier.
+        {
+          code: `<template><div v-on:[x]="1"></div></template><!-- ${comment} -->`,
+          options
+        }
+      ]
+    })
   ],
   invalid: [
     ...createInvalidTests(
@@ -253,17 +232,36 @@ ruleTester.run('this-in-template', rule, {
       'ThisExpression'
     ),
     ...createInvalidTests('', ['always'], "Expected 'this'.", 'Identifier'),
+    ...[[], ['never']].flatMap((options) => {
+      const comment = options.join('')
+      const message = "Unexpected usage of 'this'."
+      const type = 'ThisExpression'
+      return [
+        {
+          code: `<template><div>{{ this['xs'] }}</div></template><!-- ${comment} -->`,
+          output: `<template><div>{{ xs }}</div></template><!-- ${comment} -->`,
+          errors: [{ message, type }],
+          options
+        },
+        {
+          code: `<template><div>{{ this['xs0AZ_foo'] }}</div></template><!-- ${comment} -->`,
+          output: `<template><div>{{ xs0AZ_foo }}</div></template><!-- ${comment} -->`,
+          errors: [{ message, type }],
+          options
+        }
+      ]
+    }),
     {
       code: `<template><div v-if="fn(this.$foo)"></div></template><!-- never -->`,
       output: `<template><div v-if="fn($foo)"></div></template><!-- never -->`,
-      errors: ["Unexpected usage of 'this'."],
-      options: ['never']
+      options: ['never'],
+      errors: ["Unexpected usage of 'this'."]
     },
     {
       code: `<template><div :class="{ foo: this.$foo }"></div></template><!-- never -->`,
       output: `<template><div :class="{ foo: $foo }"></div></template><!-- never -->`,
-      errors: ["Unexpected usage of 'this'."],
-      options: ['never']
+      options: ['never'],
+      errors: ["Unexpected usage of 'this'."]
     }
   ]
 })
diff --git a/tests/lib/rules/use-v-on-exact.js b/tests/lib/rules/use-v-on-exact.js
index b080faa87..757a1a5c9 100644
--- a/tests/lib/rules/use-v-on-exact.js
+++ b/tests/lib/rules/use-v-on-exact.js
@@ -4,111 +4,58 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/use-v-on-exact')
 
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 ruleTester.run('use-v-on-exact', rule, {
   valid: [
-    {
-      code: `<template><button @click="foo"/></template>`
-    },
-    {
-      code: `<template><button @click="foo" :click="foo"/></template>`
-    },
-    {
-      code: `<template><button @click.ctrl="foo"/></template>`
-    },
-    {
-      code: `<template><button @click.exact="foo"/></template>`
-    },
-    {
-      code: `<template><button v-on:click="foo"/></template>`
-    },
-    {
-      code: `<template><button v-on:click.ctrl="foo"/></template>`
-    },
-    {
-      code: `<template><button v-on:click.exact="foo"/></template>`
-    },
-    {
-      code: `<template><button @click="foo" @click.stop="bar"/></template>`
-    },
-    {
-      code: `<template><button @click="foo" @click.prevent="bar" @click.stop="baz"/></template>`
-    },
-    {
-      code: `<template><button @click.prevent="foo" @click.stop="bar"/></template>`
-    },
-    {
-      code: `<template><button @click.exact="foo" @click.ctrl="bar"/></template>`
-    },
-    {
-      code: `<template><button @click.exact="foo" @click.ctrl.exact="bar" @click.ctrl.shift="baz"/></template>`
-    },
-    {
-      code: `<template><button @click.ctrl.exact="foo" @click.ctrl.shift="bar"/></template>`
-    },
-    {
-      code: `<template><button @click.exact="foo" @click.ctrl="foo"/></template>`
-    },
-    {
-      code: `<template><button @click="foo" @focus="foo"/></template>`
-    },
-    {
-      code: `<template><button @click="foo" @click="foo"/></template>`
-    },
-    {
-      code: `<template><button @click="foo"/><button @click.ctrl="foo"/></template>`
-    },
-    {
-      code: `<template><button v-on:click.exact="foo" v-on:click.ctrl="foo"/></template>`
-    },
-    {
-      code: `<template><a @mouseenter="showTooltip" @mouseenter.once="attachTooltip"/></template>`
-    },
-    {
-      code: `<template><input @keypress.exact="foo" @keypress.esc.exact="bar" @keypress.ctrl="baz"></template>`
-    },
-    {
-      code: `<template><input @keypress.a="foo" @keypress.b="bar" @keypress.a.b="baz"></template>`
-    },
-    {
-      code: `<template><input @keypress.shift="foo" @keypress.ctrl="bar"></template>`
-    },
-    {
-      code: `<template>
+    `<template><button @click="foo"/></template>`,
+    `<template><button @click="foo" :click="foo"/></template>`,
+    `<template><button @click.ctrl="foo"/></template>`,
+    `<template><button @click.exact="foo"/></template>`,
+    `<template><button v-on:click="foo"/></template>`,
+    `<template><button v-on:click.ctrl="foo"/></template>`,
+    `<template><button v-on:click.exact="foo"/></template>`,
+    `<template><button @click="foo" @click.stop="bar"/></template>`,
+    `<template><button @click="foo" @click.prevent="bar" @click.stop="baz"/></template>`,
+    `<template><button @click.prevent="foo" @click.stop="bar"/></template>`,
+    `<template><button @click.exact="foo" @click.ctrl="bar"/></template>`,
+    `<template><button @click.exact="foo" @click.ctrl.exact="bar" @click.ctrl.shift="baz"/></template>`,
+    `<template><button @click.ctrl.exact="foo" @click.ctrl.shift="bar"/></template>`,
+    `<template><button @click.exact="foo" @click.ctrl="foo"/></template>`,
+    `<template><button @click="foo" @focus="foo"/></template>`,
+    `<template><button @click="foo" @click="foo"/></template>`,
+    `<template><button @click="foo"/><button @click.ctrl="foo"/></template>`,
+    `<template><button v-on:click.exact="foo" v-on:click.ctrl="foo"/></template>`,
+    `<template><a @mouseenter="showTooltip" @mouseenter.once="attachTooltip"/></template>`,
+    `<template><input @keypress.exact="foo" @keypress.esc.exact="bar" @keypress.ctrl="baz"></template>`,
+    `<template><input @keypress.a="foo" @keypress.b="bar" @keypress.a.b="baz"></template>`,
+    `<template><input @keypress.shift="foo" @keypress.ctrl="bar"></template>`,
+    `
+      <template>
         <input
           @keypress.27="foo"
           @keypress.27.middle="bar"
         >
-      </template>`
-    },
-    {
-      code: `<template>
+      </template>
+    `,
+    `
+      <template>
         <input
           @keydown.a.b.c="abc"
           @keydown.a="a"
           @keydown.b="b"
           @keydown.c="c"
         >
-      </template>`
-    },
-    {
-      code: `<template>
+      </template>
+    `,
+    `
+      <template>
         <input
           @keydown.a.b="ab"
           @keydown.a="a"
@@ -116,69 +63,49 @@ ruleTester.run('use-v-on-exact', rule, {
           @keydown.c="c"
           @keydown.a.c="ac"
         >
-      </template>`
-    },
-    {
-      code: `<template>
+      </template>
+    `,
+    `
+      <template>
         <input
           @keydown.a.b="ab"
           @keydown.a="a"
           @keydown.b="b"
           @keydown.c="c"
         >
-      </template>`
-    },
-    {
-      code: `<template><UiButton @click="foo" /></template>`
-    },
-    {
-      code: `<template><UiButton @click="foo" @click.native="bar" /></template>`
-    },
-    {
-      code: `<template><UiButton @click="foo" @click.native.ctrl="bar" /></template>`
-    },
-    {
-      code: `<template><UiButton @click="foo" @click.native.exact="bar" @click.native.ctrl="baz" /></template>`
-    },
-    {
-      code: `<template><UiButton @click.native.exact="bar" @click.ctrl.native="baz" /></template>`
-    },
-    {
-      code: `<template><UiButton @click.native.ctrl.exact="foo" @click.native.ctrl.shift="bar" /></template>`
-    },
-    {
-      code: `<template><UiButton @click.native="foo" @click.native.stop="bar" /></template>`
-    },
-    {
-      code: `<template><UiButton @click.native.stop="foo" @click.native.prevent="bar" /></template>`
-    },
-    {
-      code: `<template><button @[click]="foo"/></template>`
-    },
-    {
-      code: `<template><button @[foo]="foo" @[bar].ctrl="bar"/></template>`
-    },
-    {
-      code: `<template>
+      </template>
+    `,
+    `<template><UiButton @click="foo" /></template>`,
+    `<template><UiButton @click="foo" @click.native="bar" /></template>`,
+    `<template><UiButton @click="foo" @click.native.ctrl="bar" /></template>`,
+    `<template><UiButton @click="foo" @click.native.exact="bar" @click.native.ctrl="baz" /></template>`,
+    `<template><UiButton @click.native.exact="bar" @click.ctrl.native="baz" /></template>`,
+    `<template><UiButton @click.native.ctrl.exact="foo" @click.native.ctrl.shift="bar" /></template>`,
+    `<template><UiButton @click.native="foo" @click.native.stop="bar" /></template>`,
+    `<template><UiButton @click.native.stop="foo" @click.native.prevent="bar" /></template>`,
+    `<template><button @[click]="foo"/></template>`,
+    `<template><button @[foo]="foo" @[bar].ctrl="bar"/></template>`,
+    `
+      <template>
         <input
           @keydown.enter="foo"
           @keydown.shift.tab="bar"/>
-      </template>`
-    },
-    {
-      code: `<template>
+      </template>
+    `,
+    `
+      <template>
         <input
           @keydown.enter="foo"
           @keydown.shift.tab.prevent="bar"/>
-      </template>`
-    },
-    {
-      code: `<template>
+      </template>
+    `,
+    `
+      <template>
         <input-component
           @keydown.enter.native="foo"
           @keydown.shift.tab.native="bar"/>
-      </template>`
-    }
+      </template>
+    `
   ],
 
   invalid: [
diff --git a/tests/lib/rules/v-bind-style.js b/tests/lib/rules/v-bind-style.js
index f7c67d6f9..f65099530 100644
--- a/tests/lib/rules/v-bind-style.js
+++ b/tests/lib/rules/v-bind-style.js
@@ -5,22 +5,16 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/v-bind-style')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
+const expectedShorthand = 'Expected same-name shorthand.'
+const unexpectedShorthand = 'Unexpected same-name shorthand.'
+
 tester.run('v-bind-style', rule, {
   valid: [
     {
@@ -43,7 +37,7 @@ tester.run('v-bind-style', rule, {
     {
       filename: 'test.vue',
       code: '<template><div v-bind:foo="foo"></div></template>',
-      options: ['longform']
+      options: ['longform', { sameNameShorthand: 'ignore' }]
     },
 
     // Don't enforce `.prop` shorthand because of experimental.
@@ -64,6 +58,78 @@ tester.run('v-bind-style', rule, {
       filename: 'test.vue',
       code: '<template><div .foo="foo"></div></template>',
       options: ['shorthand']
+    },
+    // same-name shorthand: never
+    {
+      filename: 'test.vue',
+      code: '<template><div :foo="foo" /></template>',
+      options: ['shorthand', { sameNameShorthand: 'never' }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-bind:foo="foo" /></template>',
+      options: ['longform', { sameNameShorthand: 'never' }]
+    },
+    {
+      // modifier
+      filename: 'test.vue',
+      code: `
+      <template>
+      <div :foo.prop="foo" />
+      <div .foo="foo" />
+      </template>
+      `,
+      options: ['shorthand', { sameNameShorthand: 'never' }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-bind:foo.prop="foo" /></template>',
+      options: ['longform', { sameNameShorthand: 'never' }]
+    },
+    {
+      // camel case
+      filename: 'test.vue',
+      code: '<template><div :foo-bar="fooBar" /></template>',
+      options: ['shorthand', { sameNameShorthand: 'never' }]
+    },
+    // same-name shorthand: always
+    {
+      filename: 'test.vue',
+      code: '<template><div :foo /></template>',
+      options: ['shorthand', { sameNameShorthand: 'always' }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-bind:foo /></template>',
+      options: ['longform', { sameNameShorthand: 'always' }]
+    },
+    {
+      // modifier
+      filename: 'test.vue',
+      code: `
+      <template>
+      <div :foo.prop />
+      <div .foo />
+      </template>
+      `,
+      options: ['shorthand', { sameNameShorthand: 'always' }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-bind:foo.prop /></template>',
+      options: ['longform', { sameNameShorthand: 'always' }]
+    },
+    {
+      // camel case
+      filename: 'test.vue',
+      code: '<template><div :foo-bar/></template>',
+      options: ['shorthand', { sameNameShorthand: 'always' }]
+    },
+    {
+      // https://github.com/vuejs/eslint-plugin-vue/issues/2409
+      filename: 'test.vue',
+      code: '<template><div :foo-bar="foo_bar" /></template>',
+      options: ['shorthand', { sameNameShorthand: 'always' }]
     }
   ],
   invalid: [
@@ -75,45 +141,158 @@ tester.run('v-bind-style', rule, {
     },
     {
       filename: 'test.vue',
-      options: ['shorthand'],
       code: '<template><div v-bind:foo="foo"></div></template>',
       output: '<template><div :foo="foo"></div></template>',
+      options: ['shorthand'],
       errors: ["Unexpected 'v-bind' before ':'."]
     },
     {
       filename: 'test.vue',
-      options: ['longform'],
       code: '<template><div :foo="foo"></div></template>',
       output: '<template><div v-bind:foo="foo"></div></template>',
+      options: ['longform'],
       errors: ["Expected 'v-bind' before ':'."]
     },
     {
       filename: 'test.vue',
-      options: ['longform'],
       code: '<template><div .foo="foo"></div></template>',
       output: '<template><div v-bind:foo.prop="foo"></div></template>',
+      options: ['longform'],
       errors: ["Expected 'v-bind:' instead of '.'."]
     },
     {
       filename: 'test.vue',
-      options: ['longform'],
       code: '<template><div .foo.sync="foo"></div></template>',
       output: '<template><div v-bind:foo.prop.sync="foo"></div></template>',
+      options: ['longform'],
       errors: ["Expected 'v-bind:' instead of '.'."]
     },
     {
       filename: 'test.vue',
-      options: ['longform'],
       code: '<template><div .foo.prop="foo"></div></template>',
       output: '<template><div v-bind:foo.prop="foo"></div></template>',
+      options: ['longform'],
       errors: ["Expected 'v-bind:' instead of '.'."]
     },
     {
       filename: 'test.vue',
-      options: ['longform'],
       code: '<template><div .foo.sync.prop="foo"></div></template>',
       output: '<template><div v-bind:foo.sync.prop="foo"></div></template>',
+      options: ['longform'],
       errors: ["Expected 'v-bind:' instead of '.'."]
+    },
+    // v-bind same-name shorthand (Vue 3.4+)
+    {
+      filename: 'test.vue',
+      code: '<template><div v-bind:foo /></template>',
+      output: '<template><div :foo /></template>',
+      options: ['shorthand'],
+      errors: ["Unexpected 'v-bind' before ':'."]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div :foo /></template>',
+      output: '<template><div v-bind:foo /></template>',
+      options: ['longform'],
+      errors: ["Expected 'v-bind' before ':'."]
+    },
+    // same-name shorthand: never
+    {
+      filename: 'test.vue',
+      code: '<template><div :foo /></template>',
+      output: '<template><div :foo="foo" /></template>',
+      options: ['shorthand', { sameNameShorthand: 'never' }],
+      errors: [unexpectedShorthand]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-bind:foo /></template>',
+      output: '<template><div v-bind:foo="foo" /></template>',
+      options: ['longform', { sameNameShorthand: 'never' }],
+      errors: [unexpectedShorthand]
+    },
+    {
+      // modifier
+      filename: 'test.vue',
+      code: '<template><div :foo.prop /></template>',
+      output: '<template><div :foo.prop="foo" /></template>',
+      options: ['shorthand', { sameNameShorthand: 'never' }],
+      errors: [unexpectedShorthand]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div .foo /></template>',
+      output: '<template><div .foo="foo" /></template>',
+      options: ['shorthand', { sameNameShorthand: 'never' }],
+      errors: [unexpectedShorthand]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div .foo /></template>',
+      output: '<template><div v-bind:foo.prop /></template>',
+      options: ['longform', { sameNameShorthand: 'never' }],
+      errors: [unexpectedShorthand, "Expected 'v-bind:' instead of '.'."]
+    },
+    {
+      // camel case
+      filename: 'test.vue',
+      code: '<template><div :foo-bar /></template>',
+      output: '<template><div :foo-bar="fooBar" /></template>',
+      options: ['shorthand', { sameNameShorthand: 'never' }],
+      errors: [unexpectedShorthand]
+    },
+    {
+      // https://github.com/vuejs/eslint-plugin-vue/issues/2409
+      filename: 'test.vue',
+      code: '<template><div :foo_bar /></template>',
+      output: '<template><div :foo_bar="foo_bar" /></template>',
+      options: ['shorthand', { sameNameShorthand: 'never' }],
+      errors: [unexpectedShorthand]
+    },
+    // same-name shorthand: always
+    {
+      filename: 'test.vue',
+      code: '<template><div :foo="foo" /></template>',
+      output: '<template><div :foo /></template>',
+      options: ['shorthand', { sameNameShorthand: 'always' }],
+      errors: [expectedShorthand]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div :foo_bar="foo_bar" /></template>',
+      output: '<template><div :foo_bar /></template>',
+      options: ['shorthand', { sameNameShorthand: 'always' }],
+      errors: [expectedShorthand]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-bind:foo="foo" /></template>',
+      output: '<template><div v-bind:foo /></template>',
+      options: ['longform', { sameNameShorthand: 'always' }],
+      errors: [expectedShorthand]
+    },
+    {
+      // modifier
+      filename: 'test.vue',
+      code: '<template><div :foo.prop="foo" /></template>',
+      output: '<template><div :foo.prop /></template>',
+      options: ['shorthand', { sameNameShorthand: 'always' }],
+      errors: [expectedShorthand]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div .foo="foo" /></template>',
+      output: '<template><div .foo /></template>',
+      options: ['shorthand', { sameNameShorthand: 'always' }],
+      errors: [expectedShorthand]
+    },
+    {
+      // camel case
+      filename: 'test.vue',
+      code: '<template><div :foo-bar="fooBar" /></template>',
+      output: '<template><div :foo-bar /></template>',
+      options: ['shorthand', { sameNameShorthand: 'always' }],
+      errors: [expectedShorthand]
     }
   ]
 })
diff --git a/tests/lib/rules/v-for-delimiter-style.js b/tests/lib/rules/v-for-delimiter-style.js
index 4b232a290..ebec2df56 100644
--- a/tests/lib/rules/v-for-delimiter-style.js
+++ b/tests/lib/rules/v-for-delimiter-style.js
@@ -6,20 +6,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/v-for-delimiter-style')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('v-for-delimiter-style', rule, {
@@ -44,6 +35,19 @@ tester.run('v-for-delimiter-style', rule, {
       filename: 'test.vue',
       code: '<template><div v-for="x    in    xs"></div></template>'
     },
+    {
+      // https://github.com/vuejs/vue-eslint-parser/issues/226
+      filename: 'test.vue',
+      code: '<template><div v-for="(x,) in xs"></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-for="(value, key, index) in xs"></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-for="{ x, y } in xs"></div></template>'
+    },
     {
       filename: 'test.vue',
       code: '<template><div v-for="x in xs"></div></template>',
@@ -67,6 +71,17 @@ tester.run('v-for-delimiter-style', rule, {
         }
       ]
     },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-for="(x, index) of xs"></div></template>',
+      output: '<template><div v-for="(x, index) in xs"></div></template>',
+      errors: [
+        {
+          message: "Expected 'in' instead of 'of' in 'v-for'.",
+          column: 23
+        }
+      ]
+    },
     {
       filename: 'test.vue',
       code: '<template><div v-for="x    of xs"></div></template>',
@@ -102,9 +117,9 @@ tester.run('v-for-delimiter-style', rule, {
     },
     {
       filename: 'test.vue',
-      options: ['in'],
       code: '<template><div v-for="x of xs"></div></template>',
       output: '<template><div v-for="x in xs"></div></template>',
+      options: ['in'],
       errors: [
         {
           message: "Expected 'in' instead of 'of' in 'v-for'.",
@@ -114,9 +129,9 @@ tester.run('v-for-delimiter-style', rule, {
     },
     {
       filename: 'test.vue',
-      options: ['of'],
       code: '<template><div v-for="x in xs"></div></template>',
       output: '<template><div v-for="x of xs"></div></template>',
+      options: ['of'],
       errors: [
         {
           message: "Expected 'of' instead of 'in' in 'v-for'.",
diff --git a/tests/lib/rules/v-if-else-key.js b/tests/lib/rules/v-if-else-key.js
new file mode 100644
index 000000000..46c42f52f
--- /dev/null
+++ b/tests/lib/rules/v-if-else-key.js
@@ -0,0 +1,581 @@
+/**
+ * @author Felipe Melendez
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/v-if-else-key')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('v-if-else-key', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>
+            <CustomComponent v-if="some-condition" key="key1" />
+            <CustomComponent v-else key="key2" />
+          </div>
+        </template>
+        <script>
+        export default {
+            components: {
+                CustomComponent
+            }
+        }
+        </script>
+        `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+    <div>
+      <CustomComponent v-if="some-condition" />
+      <CustomComponent />
+    </div>
+        </template>
+        <script>
+        export default {
+            components: {
+                CustomComponent
+            }
+        }
+        </script>
+        `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>
+            <div v-if="some-condition" >
+              <CustomComponent />
+            </div>
+            <CustomComponent v-else />
+          </div>
+        </template>
+        <script>
+        export default {
+            components: {
+                CustomComponent
+            }
+        }
+        </script>
+        `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>
+            <slot v-if="some-condition" />
+            <slot v-else />
+          </div>
+        </template>
+        <script>
+        export default {
+            components: {
+                CustomComponent
+            }
+        }
+        </script>
+        `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>
+            <div v-if="someCondition" />
+            <div v-else-if="otherCondition" />
+            <div v-else />
+          </div>
+        </template>
+        <script>
+        export default {
+            components: {
+                CustomComponent
+            }
+        }
+        </script>
+        `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>
+            <div v-if="foo" />
+            <span v-else />
+          </div>
+        </template>
+        <script>
+        export default {
+            components: {
+                CustomComponent
+            }
+        }
+        </script>
+        `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>
+            <div>
+              <ComponentA v-if="foo" /> 
+              <ComponentB v-else-if="bar" /> 
+            </div>
+            <div>
+              <div>
+                <ComponentA v-if="foo" />
+                <ComponentB v-else-if="baz" /> 
+              </div>
+              <div>
+                <ComponentA v-if="foo" />
+                <ComponentB v-else-if="baz" />
+              </div>
+            </div>
+            <div>
+              <ComponentA v-if="foo" />
+              <ComponentB v-else /> 
+            </div>
+            <div>
+              <div v-if="foo" />
+              <ComponentB v-else />
+            </div>
+          </div>
+        </template>
+        <script>
+        export default {
+          components: {
+            ComponentA,
+            ComponentB
+          }
+        }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>
+            <div>
+              <CustomComponent v-if="foo" />
+              <div v-else />
+            </div>
+      
+            <CustomComponent v-if="bar" />
+          </div>
+        </template>
+        <script>
+        export default {
+            components: {
+                CustomComponent
+            }
+        }
+        </script>
+        `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <tile>
+            <template v-if="state === 'foo'">
+                <ComponentA>…</ComponentA>
+                <ComponentB>…</ComponentB>
+            </template>
+            <ComponentA v-else-if="state === 'bar'" key="a">…</ComponentA>
+            <ComponentA v-else-if="state === 'bar'" key="b">…</ComponentA>
+          </tile>
+        </template>
+        <script>
+        export default {
+            components: {
+                ComponentA,
+                ComponentB
+            }
+        }
+        </script>
+        `
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>
+            <OuterComponent v-if="showOuterComponent">
+              <InnerComponent v-if="showInnerComponent1" />
+              <InnerComponent v-else />
+            </OuterComponent>
+            <OuterComponent v-else>
+              <InnerComponent :key="key1" />
+              <InnerComponent :key="key2" />
+            </OuterComponent>
+          </div>
+        </template>
+        <script>
+        export default {
+          components: {
+            OuterComponent,
+            InnerComponent
+          }
+        }
+        </script>
+        `,
+      output: `
+        <template>
+          <div>
+            <OuterComponent key="outer-component-1" v-if="showOuterComponent">
+              <InnerComponent key="inner-component-1" v-if="showInnerComponent1" />
+              <InnerComponent key="inner-component-2" v-else />
+            </OuterComponent>
+            <OuterComponent key="outer-component-2" v-else>
+              <InnerComponent :key="key1" />
+              <InnerComponent :key="key2" />
+            </OuterComponent>
+          </div>
+        </template>
+        <script>
+        export default {
+          components: {
+            OuterComponent,
+            InnerComponent
+          }
+        }
+        </script>
+        `,
+      errors: [
+        {
+          message:
+            "Conditionally rendered repeated component 'OuterComponent' expected to have a 'key' attribute.",
+          line: 4
+        },
+        {
+          message:
+            "Conditionally rendered repeated component 'InnerComponent' expected to have a 'key' attribute.",
+          line: 5
+        },
+        {
+          message:
+            "Conditionally rendered repeated component 'InnerComponent' expected to have a 'key' attribute.",
+          line: 6
+        },
+        {
+          message:
+            "Conditionally rendered repeated component 'OuterComponent' expected to have a 'key' attribute.",
+          line: 8
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>
+            <OuterComponent v-if="showOuterComponent">
+              <InnerComponent v-if="showInnerComponent1">
+                <DifferentScopeComponent />
+              </InnerComponent>
+              <InnerComponent v-else />
+            </OuterComponent>
+            <OuterComponent v-else>
+              <InnerComponent />
+              <InnerComponent />
+            </OuterComponent>
+            <DifferentScopeComponent />
+          </div>
+        </template>
+        <script>
+        export default {
+          components: {
+            OuterComponent,
+            InnerComponent
+          }
+        }
+        </script>
+        `,
+      output: `
+        <template>
+          <div>
+            <OuterComponent key="outer-component-1" v-if="showOuterComponent">
+              <InnerComponent key="inner-component-1" v-if="showInnerComponent1">
+                <DifferentScopeComponent />
+              </InnerComponent>
+              <InnerComponent key="inner-component-2" v-else />
+            </OuterComponent>
+            <OuterComponent key="outer-component-2" v-else>
+              <InnerComponent />
+              <InnerComponent />
+            </OuterComponent>
+            <DifferentScopeComponent />
+          </div>
+        </template>
+        <script>
+        export default {
+          components: {
+            OuterComponent,
+            InnerComponent
+          }
+        }
+        </script>
+        `,
+      errors: [
+        {
+          message:
+            "Conditionally rendered repeated component 'OuterComponent' expected to have a 'key' attribute.",
+          line: 4
+        },
+        {
+          message:
+            "Conditionally rendered repeated component 'InnerComponent' expected to have a 'key' attribute.",
+          line: 5
+        },
+        {
+          message:
+            "Conditionally rendered repeated component 'InnerComponent' expected to have a 'key' attribute.",
+          line: 8
+        },
+        {
+          message:
+            "Conditionally rendered repeated component 'OuterComponent' expected to have a 'key' attribute.",
+          line: 10
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>
+            <OuterComponent v-if="showOuterComponent">
+              <InnerComponent v-if="showInnerComponent1" />
+              <InnerComponent v-else />
+            </OuterComponent>
+            <InnerComponent v-else />
+          </div>
+        </template>
+        <script>
+        export default {
+          components: {
+            OuterComponent,
+            InnerComponent
+          }
+        }
+        </script>
+        `,
+      output: `
+        <template>
+          <div>
+            <OuterComponent v-if="showOuterComponent">
+              <InnerComponent key="inner-component-1" v-if="showInnerComponent1" />
+              <InnerComponent key="inner-component-2" v-else />
+            </OuterComponent>
+            <InnerComponent v-else />
+          </div>
+        </template>
+        <script>
+        export default {
+          components: {
+            OuterComponent,
+            InnerComponent
+          }
+        }
+        </script>
+        `,
+      errors: [
+        {
+          message:
+            "Conditionally rendered repeated component 'InnerComponent' expected to have a 'key' attribute.",
+          line: 5
+        },
+        {
+          message:
+            "Conditionally rendered repeated component 'InnerComponent' expected to have a 'key' attribute.",
+          line: 6
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>
+            <ComponentA v-if="foo" />
+            <ComponentA v-else-if="bar" />
+            <ComponentB v-else />
+          </div>
+        </template>
+        <script>
+        export default {
+          components: {
+            ComponentA,
+            ComponentB
+          }
+        }
+        </script>
+        `,
+      output: `
+        <template>
+          <div>
+            <ComponentA key="component-a-1" v-if="foo" />
+            <ComponentA key="component-a-2" v-else-if="bar" />
+            <ComponentB v-else />
+          </div>
+        </template>
+        <script>
+        export default {
+          components: {
+            ComponentA,
+            ComponentB
+          }
+        }
+        </script>
+        `,
+      errors: [
+        {
+          message:
+            "Conditionally rendered repeated component 'ComponentA' expected to have a 'key' attribute.",
+          line: 4
+        },
+        {
+          message:
+            "Conditionally rendered repeated component 'ComponentA' expected to have a 'key' attribute.",
+          line: 5
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>
+            <ComponentA v-if="foo" />
+            <ComponentB v-else-if="bar" />
+            <ComponentA v-else />
+          </div>
+        </template>
+        <script>
+        export default {
+          components: {
+            ComponentA,
+            ComponentB
+          }
+        }
+        </script>
+        `,
+      output: `
+        <template>
+          <div>
+            <ComponentA key="component-a-1" v-if="foo" />
+            <ComponentB v-else-if="bar" />
+            <ComponentA key="component-a-2" v-else />
+          </div>
+        </template>
+        <script>
+        export default {
+          components: {
+            ComponentA,
+            ComponentB
+          }
+        }
+        </script>
+        `,
+      errors: [
+        {
+          message:
+            "Conditionally rendered repeated component 'ComponentA' expected to have a 'key' attribute.",
+          line: 4
+        },
+        {
+          message:
+            "Conditionally rendered repeated component 'ComponentA' expected to have a 'key' attribute.",
+          line: 6
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>
+            <ComponentA v-if="foo" />
+            <ComponentA v-else />
+
+            <ComponentA v-if="bar" />
+            <ComponentA v-else-if="baz" />
+            <ComponentA v-else />
+          </div>
+        </template>
+        <script>
+        export default {
+          components: {
+            ComponentA
+          }
+        }
+        </script>
+        `,
+      output: `
+        <template>
+          <div>
+            <ComponentA key="component-a-1" v-if="foo" />
+            <ComponentA key="component-a-2" v-else />
+
+            <ComponentA key="component-a-3" v-if="bar" />
+            <ComponentA key="component-a-4" v-else-if="baz" />
+            <ComponentA key="component-a-5" v-else />
+          </div>
+        </template>
+        <script>
+        export default {
+          components: {
+            ComponentA
+          }
+        }
+        </script>
+        `,
+      errors: [
+        {
+          message:
+            "Conditionally rendered repeated component 'ComponentA' expected to have a 'key' attribute.",
+          line: 4
+        },
+        {
+          message:
+            "Conditionally rendered repeated component 'ComponentA' expected to have a 'key' attribute.",
+          line: 5
+        },
+        {
+          message:
+            "Conditionally rendered repeated component 'ComponentA' expected to have a 'key' attribute.",
+          line: 7
+        },
+        {
+          message:
+            "Conditionally rendered repeated component 'ComponentA' expected to have a 'key' attribute.",
+          line: 8
+        },
+        {
+          message:
+            "Conditionally rendered repeated component 'ComponentA' expected to have a 'key' attribute.",
+          line: 9
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/v-on-event-hyphenation.js b/tests/lib/rules/v-on-event-hyphenation.js
index 087e5d00a..3f58ce1f0 100644
--- a/tests/lib/rules/v-on-event-hyphenation.js
+++ b/tests/lib/rules/v-on-event-hyphenation.js
@@ -1,13 +1,10 @@
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/v-on-event-hyphenation.js')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
-    ecmaVersion: 2019
-  }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2019 }
 })
 
 tester.run('v-on-event-hyphenation', rule, {
@@ -47,6 +44,32 @@ tester.run('v-on-event-hyphenation', rule, {
       </template>
       `,
       options: ['never', { ignore: ['custom'] }]
+    },
+    {
+      code: `
+      <template>
+          <VueComponent v-on:custom-event="events"/>
+      </template>
+      `,
+      options: ['never', { ignore: ['custom-event'] }]
+    },
+    {
+      code: `
+      <template>
+          <VueComponent v-on:custom-event="events"/>
+          <custom-component v-on:custom-event="events"/>
+      </template>
+      `,
+      options: ['never', { ignoreTags: ['/^Vue/', 'custom-component'] }]
+    },
+    {
+      code: `
+      <template>
+          <VueComponent v-on:customEvent="events"/>
+          <custom-component v-on:customEvent="events"/>
+      </template>
+      `,
+      options: ['always', { ignoreTags: ['/^Vue/', 'custom-component'] }]
     }
   ],
   invalid: [
@@ -73,12 +96,12 @@ tester.run('v-on-event-hyphenation', rule, {
           <VueComponent @customEvent="onEvent"/>
       </template>
       `,
-      options: ['always', { autofix: true }],
       output: `
       <template>
           <VueComponent @custom-event="onEvent"/>
       </template>
       `,
+      options: ['always', { autofix: true }],
       errors: [
         {
           message: "v-on event '@customEvent' must be hyphenated.",
@@ -95,12 +118,12 @@ tester.run('v-on-event-hyphenation', rule, {
           <VueComponent v-on:custom-event="events"/>
       </template>
       `,
-      options: ['never', { autofix: true }],
       output: `
       <template>
           <VueComponent v-on:customEvent="events"/>
       </template>
       `,
+      options: ['never', { autofix: true }],
       errors: ["v-on event 'v-on:custom-event' can't be hyphenated."]
     },
     {
@@ -110,13 +133,13 @@ tester.run('v-on-event-hyphenation', rule, {
         <VueComponent @update:model-value="foo"/>
       </template>
       `,
-      options: ['always', { autofix: true }],
       output: `
       <template>
         <VueComponent @update:model-value="foo"/>
         <VueComponent @update:model-value="foo"/>
       </template>
       `,
+      options: ['always', { autofix: true }],
       errors: ["v-on event '@update:modelValue' must be hyphenated."]
     },
     {
@@ -126,13 +149,13 @@ tester.run('v-on-event-hyphenation', rule, {
         <VueComponent @update:model-value="foo"/>
       </template>
       `,
-      options: ['never', { autofix: true }],
       output: `
       <template>
         <VueComponent @update:modelValue="foo"/>
         <VueComponent @update:modelValue="foo"/>
       </template>
       `,
+      options: ['never', { autofix: true }],
       errors: ["v-on event '@update:model-value' can't be hyphenated."]
     },
     {
@@ -144,7 +167,6 @@ tester.run('v-on-event-hyphenation', rule, {
         <VueComponent @up-date:model-value="foo"/>
       </template>
       `,
-      options: ['always', { autofix: true }],
       output: `
       <template>
         <VueComponent @up-date:model-value="foo"/>
@@ -153,6 +175,7 @@ tester.run('v-on-event-hyphenation', rule, {
         <VueComponent @up-date:model-value="foo"/>
       </template>
       `,
+      options: ['always', { autofix: true }],
       errors: [
         "v-on event '@upDate:modelValue' must be hyphenated.",
         "v-on event '@up-date:modelValue' must be hyphenated.",
@@ -168,7 +191,6 @@ tester.run('v-on-event-hyphenation', rule, {
         <VueComponent @up-date:model-value="foo"/>
       </template>
       `,
-      options: ['never', { autofix: true }],
       output: `
       <template>
         <VueComponent @upDate:modelValue="foo"/>
@@ -177,11 +199,56 @@ tester.run('v-on-event-hyphenation', rule, {
         <VueComponent @upDate:modelValue="foo"/>
       </template>
       `,
+      options: ['never', { autofix: true }],
       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."
       ]
+    },
+    {
+      code: `
+      <template>
+        <VueComponent v-on:custom-event="events"/>
+        <CustomComponent v-on:custom-event="events"/>
+      </template>
+      `,
+      output: `
+      <template>
+        <VueComponent v-on:customEvent="events"/>
+        <CustomComponent v-on:custom-event="events"/>
+      </template>
+      `,
+      options: ['never', { autofix: true, ignoreTags: ['CustomComponent'] }],
+      errors: [
+        {
+          message: "v-on event 'v-on:custom-event' can't be hyphenated.",
+          line: 3,
+          column: 23
+        }
+      ]
+    },
+    {
+      code: `
+      <template>
+        <VueComponent v-on:customEvent="events"/>
+        <CustomComponent v-on:customEvent="events"/>
+      </template>
+      `,
+      output: `
+      <template>
+        <VueComponent v-on:custom-event="events"/>
+        <CustomComponent v-on:customEvent="events"/>
+      </template>
+      `,
+      options: ['always', { autofix: true, ignoreTags: ['CustomComponent'] }],
+      errors: [
+        {
+          message: "v-on event 'v-on:customEvent' must be hyphenated.",
+          line: 3,
+          column: 23
+        }
+      ]
     }
   ]
 })
diff --git a/tests/lib/rules/v-on-function-call.js b/tests/lib/rules/v-on-function-call.js
deleted file mode 100644
index cca7834da..000000000
--- a/tests/lib/rules/v-on-function-call.js
+++ /dev/null
@@ -1,361 +0,0 @@
-/**
- * @author Niklas Higi
- */
-'use strict'
-
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
-const rule = require('../../../lib/rules/v-on-function-call')
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
-const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2020, sourceType: 'module' }
-})
-
-tester.run('v-on-function-call', rule, {
-  valid: [
-    {
-      filename: 'test.vue',
-      code: ''
-    },
-    {
-      filename: 'test.vue',
-      code: '<template><div @click="foo(123)"></div></template>',
-      options: ['always']
-    },
-    {
-      filename: 'test.vue',
-      code: '<template><div @click="foo(123)"></div></template>',
-      options: ['never']
-    },
-    {
-      filename: 'test.vue',
-      code: '<template><div @click="foo()"></div></template>',
-      options: ['always']
-    },
-    {
-      filename: 'test.vue',
-      code: '<template><div @click="foo"></div></template>',
-      options: ['never']
-    },
-    {
-      filename: 'test.vue',
-      code: '<template><div @click="foo.bar()"></div></template>'
-    },
-    {
-      filename: 'test.vue',
-      code: '<template><div @click="foo.bar()"></div></template>',
-      options: ['always']
-    },
-    {
-      filename: 'test.vue',
-      code: '<template><div @[foo()]="bar"></div></template>'
-    },
-    {
-      filename: 'test.vue',
-      code: '<template><div @[foo]="bar()"></div></template>',
-      options: ['always']
-    },
-    {
-      filename: 'test.vue',
-      code: '<template><div @click="()=>foo.bar()"></div></template>'
-    },
-    {
-      filename: 'test.vue',
-      code: '<template><div @click="()=>foo.bar()"></div></template>',
-      options: ['always']
-    },
-    {
-      filename: 'test.vue',
-      code: `
-      <template>
-        <div @click="
-          fn()
-          fn()
-        "></div>
-      </template>`,
-      options: ['never']
-    },
-    {
-      filename: 'test.vue',
-      code: `
-      <template>
-        <div @click="{}"></div>
-      </template>`,
-      options: ['never']
-    },
-    {
-      filename: 'test.vue',
-      code: `
-      <template>
-        <div @click="{return}"></div>
-      </template>`,
-      options: ['never']
-    },
-    {
-      filename: 'test.vue',
-      code: `
-      <template>
-        <div @click="fn() /* comment */"></div>
-      </template>`,
-      options: ['never', { ignoreIncludesComment: true }]
-    },
-    {
-      filename: 'test.vue',
-      code: '<template><div @click="foo?.()"></div></template>',
-      options: ['never']
-    },
-    {
-      filename: 'test.vue',
-      code: `
-      <template><div @click="foo()" /></template>
-      <script>
-      export default {
-        methods: {
-          foo(a) {}
-        }
-      }
-      </script>`,
-      options: ['never']
-    },
-    {
-      filename: 'test.vue',
-      code: `
-      <template>
-        <div @click="foo()" />
-        <div @click="bar()" />
-        <div @click="baz()" />
-      </template>
-      <script>
-      export default {
-        methods: {
-          foo(a,b) {},
-          bar(...a) {},
-          baz(a = 42) {},
-        }
-      }
-      </script>`,
-      options: ['never']
-    },
-    {
-      filename: 'test.vue',
-      code: `
-      <template>
-        <div @click="foo()" />
-        <div @click="bar()" />
-        <div @click="baz()" />
-      </template>
-      <script>
-      export default {
-        methods: {
-          foo: (a,b) => {},
-          bar: (...a) => {},
-          baz: (a = 42) => {},
-        }
-      }
-      </script>`,
-      options: ['never']
-    }
-  ],
-  invalid: [
-    {
-      filename: 'test.vue',
-      code: '<template><div @click="foo"></div></template>',
-      output: null,
-      errors: [
-        "Method calls inside of 'v-on' directives must have parentheses."
-      ],
-      options: ['always']
-    },
-    {
-      filename: 'test.vue',
-      code: '<template><div @click="foo()"></div></template>',
-      output: `<template><div @click="foo"></div></template>`,
-      errors: [
-        "Method calls without arguments inside of 'v-on' directives must not have parentheses."
-      ],
-      options: ['never']
-    },
-    {
-      filename: 'test.vue',
-      code: '<template><div @click="foo( )"></div></template>',
-      output: `<template><div @click="foo"></div></template>`,
-      errors: [
-        "Method calls without arguments inside of 'v-on' directives must not have parentheses."
-      ],
-      options: ['never']
-    },
-    {
-      filename: 'test.vue',
-      code: '<template><div @click="foo(/**/)"></div></template>',
-      output: null,
-      errors: [
-        "Method calls without arguments inside of 'v-on' directives must not have parentheses."
-      ],
-      options: ['never']
-    },
-    {
-      filename: 'test.vue',
-      code: `
-      <template>
-        <div @click="/*comment*/fn()"></div>
-        <div @click="fn()/*comment*/"></div>
-        <div @click=fn()/*comment*/></div>
-        <div @click="fn()// comment
-          "></div>
-      </template>`,
-      output: null,
-      errors: [
-        "Method calls without arguments inside of 'v-on' directives must not have parentheses.",
-        "Method calls without arguments inside of 'v-on' directives must not have parentheses.",
-        "Method calls without arguments inside of 'v-on' directives must not have parentheses.",
-        "Method calls without arguments inside of 'v-on' directives must not have parentheses."
-      ],
-      options: ['never']
-    },
-    {
-      filename: 'test.vue',
-      code: `
-      <template>
-        <div @click="fn();"></div>
-      </template>`,
-      output: `
-      <template>
-        <div @click="fn"></div>
-      </template>`,
-      errors: [
-        "Method calls without arguments inside of 'v-on' directives must not have parentheses."
-      ],
-      options: ['never']
-    },
-    {
-      filename: 'test.vue',
-      code: `
-      <template>
-        <div @click=fn();></div>
-      </template>`,
-      output: `
-      <template>
-        <div @click=fn></div>
-      </template>`,
-      errors: [
-        "Method calls without arguments inside of 'v-on' directives must not have parentheses."
-      ],
-      options: ['never']
-    },
-    {
-      filename: 'test.vue',
-      code: `
-      <template>
-        <div @click=" beforeSpace()"></div>
-        <div @click='afterSpace() '></div>
-      </template>`,
-      output: `
-      <template>
-        <div @click="beforeSpace"></div>
-        <div @click='afterSpace'></div>
-      </template>`,
-      errors: [
-        "Method calls without arguments inside of 'v-on' directives must not have parentheses.",
-        "Method calls without arguments inside of 'v-on' directives must not have parentheses."
-      ],
-      options: ['never']
-    },
-    {
-      filename: 'test.vue',
-      code: `
-      <template>
-        <div @click=" &#x66;oo ( ) "></div>
-      </template>`,
-      output: `
-      <template>
-        <div @click="&#x66;oo"></div>
-      </template>`,
-      errors: [
-        "Method calls without arguments inside of 'v-on' directives must not have parentheses."
-      ],
-      options: ['never']
-    },
-    {
-      filename: 'test.vue',
-      code: `
-      <template>
-        <div @click="{(fn());;;}"></div>
-      </template>`,
-      output: `
-      <template>
-        <div @click="fn"></div>
-      </template>`,
-      errors: [
-        "Method calls without arguments inside of 'v-on' directives must not have parentheses."
-      ],
-      options: ['never']
-    },
-    {
-      filename: 'test.vue',
-      code: '<template>\r\n<div\r\n@click="foo()" /></template>',
-      output: '<template>\r\n<div\r\n@click="foo" /></template>',
-      errors: [
-        "Method calls without arguments inside of 'v-on' directives must not have parentheses."
-      ],
-      options: ['never']
-    },
-    {
-      filename: 'test.vue',
-      code: `
-      <template><div @click="foo()" /></template>
-      <script>
-      export default {
-        methods: {
-          foo() {}
-        }
-      }
-      </script>`,
-      output: `
-      <template><div @click="foo" /></template>
-      <script>
-      export default {
-        methods: {
-          foo() {}
-        }
-      }
-      </script>`,
-      errors: [
-        "Method calls without arguments inside of 'v-on' directives must not have parentheses."
-      ],
-      options: ['never']
-    },
-    {
-      filename: 'test.vue',
-      code: `
-      <template><div @click="foo()" /></template>
-      <script>
-      export default {
-        methods: {
-          foo: () => {}
-        }
-      }
-      </script>`,
-      output: `
-      <template><div @click="foo" /></template>
-      <script>
-      export default {
-        methods: {
-          foo: () => {}
-        }
-      }
-      </script>`,
-      errors: [
-        "Method calls without arguments inside of 'v-on' directives must not have parentheses."
-      ],
-      options: ['never']
-    }
-  ]
-})
diff --git a/tests/lib/rules/v-on-handler-style.js b/tests/lib/rules/v-on-handler-style.js
new file mode 100644
index 000000000..a169402f7
--- /dev/null
+++ b/tests/lib/rules/v-on-handler-style.js
@@ -0,0 +1,1141 @@
+/**
+ * @author Yosuke Ota <https://github.com/ota-meshi>
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/v-on-handler-style')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('v-on-handler-style', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: ''
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <button @click="foo" />
+        <template v-for="e in list">
+          <button @click="() => foo(e)" />
+        </template>
+      </template>`,
+      options: [['method', 'inline-function']]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <button @click="foo" />
+        <template v-for="e in list">
+          <button @click="() => foo(e)" />
+        </template>
+      </template>`
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <button @click="foo" />
+        <template v-for="e in list">
+          <button @click="foo(e)" />
+        </template>
+      </template>`,
+      options: [['method', 'inline']]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <button @click="foo()" />
+      </template>`,
+      options: ['inline']
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <button @click="() => foo()" />
+      </template>`,
+      options: ['inline-function']
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><button @[foo()]="bar" /></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><button :click="foo()" /></template>'
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <button @click="foo" />
+        <button @click="foo()" />
+        <button @click="() => foo()" />
+      </template>`,
+      output: `<template>
+        <button @click="foo" />
+        <button @click="foo" />
+        <button @click="foo" />
+      </template>`,
+      options: [['method', 'inline-function']],
+      errors: [
+        {
+          message: 'Prefer method handler over inline handler in v-on.',
+          line: 3,
+          column: 25
+        },
+        {
+          message: 'Prefer method handler over inline function in v-on.',
+          line: 4,
+          column: 25
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <button @click="foo" />
+        <button @click="foo()" />
+        <button @click="() => foo()" />
+      </template>`,
+      output: `<template>
+        <button @click="foo" />
+        <button @click="foo" />
+        <button @click="foo" />
+      </template>`,
+      errors: [
+        {
+          message: 'Prefer method handler over inline handler in v-on.',
+          line: 3,
+          column: 25
+        },
+        {
+          message: 'Prefer method handler over inline function in v-on.',
+          line: 4,
+          column: 25
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <button @click="foo" />
+        <button @click="foo()" />
+        <button @click="() => foo()" />
+      </template>`,
+      output: `<template>
+        <button @click="foo" />
+        <button @click="foo()" />
+        <button @click="foo()" />
+      </template>`,
+      options: ['inline'],
+      errors: [
+        {
+          message: 'Prefer inline handler over method handler in v-on.',
+          line: 2,
+          column: 25
+        },
+        {
+          message: 'Prefer inline handler over inline function in v-on.',
+          line: 4,
+          column: 25
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <button @click="foo" />
+        <button @click="foo()" />
+        <button @click="() => foo()" />
+      </template>`,
+      output: `<template>
+        <button @click="foo" />
+        <button @click="() => foo()" />
+        <button @click="() => foo()" />
+      </template>`,
+      options: ['inline-function'],
+      errors: [
+        {
+          message: 'Prefer inline function over method handler in v-on.',
+          line: 2,
+          column: 25
+        },
+        {
+          message: 'Prefer inline function over inline handler in v-on.',
+          line: 3,
+          column: 25
+        }
+      ]
+    },
+    // ['method', 'inline-function']
+    {
+      filename: 'test.vue',
+      code: '<template><div @click="foo( )" /></template>',
+      output: `<template><div @click="foo" /></template>`,
+      options: [['method', 'inline-function']],
+      errors: [
+        {
+          message: 'Prefer method handler over inline handler in v-on.',
+          line: 1,
+          column: 24
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <button @click="foo() /* comment */" />
+      </template>`,
+      output: null,
+      options: [['method', 'inline-function']],
+      errors: [
+        {
+          message: 'Prefer method handler over inline handler in v-on.',
+          line: 2,
+          column: 25
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <button @click="foo() /* comment */" />
+      </template>`,
+      output: `<template>
+        <button @click="() => foo() /* comment */" />
+      </template>`,
+      options: [['method', 'inline-function'], { ignoreIncludesComment: true }],
+      errors: [
+        {
+          message: 'Prefer inline function over inline handler in v-on.',
+          line: 2,
+          column: 25
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <button @click="foo(/**/)"/>
+        <button @click="/* comment */foo()"/>
+        <button @click=foo()/*comment*/ />
+        <button @click="foo()// comment
+        "/>
+      </template>`,
+      output: null,
+      options: [['method', 'inline-function']],
+      errors: [
+        {
+          message: 'Prefer method handler over inline handler in v-on.',
+          line: 2,
+          column: 25
+        },
+        {
+          message: 'Prefer method handler over inline handler in v-on.',
+          line: 3,
+          column: 38
+        },
+        {
+          message: 'Prefer method handler over inline handler in v-on.',
+          line: 4,
+          column: 24
+        },
+        {
+          message: 'Prefer method handler over inline handler in v-on.',
+          line: 5,
+          column: 25
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <button @click="fn();" />
+        <button @click="fn();;" />
+        <button @click="{ fn(); }" />
+        <button @click="{(fn());;;}" />
+      </template>`,
+      output: `
+      <template>
+        <button @click="fn" />
+        <button @click="fn" />
+        <button @click="fn" />
+        <button @click="fn" />
+      </template>`,
+      options: [['method', 'inline-function']],
+      errors: [
+        {
+          message: 'Prefer method handler over inline handler in v-on.',
+          line: 3,
+          column: 25
+        },
+        {
+          message: 'Prefer method handler over inline handler in v-on.',
+          line: 4,
+          column: 25
+        },
+        {
+          message: 'Prefer method handler over inline handler in v-on.',
+          line: 5,
+          column: 25
+        },
+        {
+          message: 'Prefer method handler over inline handler in v-on.',
+          line: 6,
+          column: 25
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div @click=" beforeSpace()" />
+        <div @click='afterSpace() ' />
+      </template>`,
+      output: `
+      <template>
+        <div @click="beforeSpace" />
+        <div @click='afterSpace' />
+      </template>`,
+      options: [['method', 'inline-function']],
+      errors: [
+        {
+          message: 'Prefer method handler over inline handler in v-on.',
+          line: 3,
+          column: 23
+        },
+        {
+          message: 'Prefer method handler over inline handler in v-on.',
+          line: 4,
+          column: 22
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <button @click=" &#x66;oo ( ) " />
+      </template>`,
+      output: `
+      <template>
+        <button @click="&#x66;oo" />
+      </template>`,
+      options: [['method', 'inline-function']],
+      errors: [
+        {
+          message: 'Prefer method handler over inline handler in v-on.',
+          line: 3,
+          column: 26
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template><button @click="foo()" /></template>
+      <script>
+      export default {
+        methods: {
+          foo() {}
+        }
+      }
+      </script>`,
+      output: `
+      <template><button @click="foo" /></template>
+      <script>
+      export default {
+        methods: {
+          foo() {}
+        }
+      }
+      </script>`,
+      options: [['method', 'inline-function']],
+      errors: [
+        {
+          message: 'Prefer method handler over inline handler in v-on.',
+          line: 2,
+          column: 33
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template><button @click="foo()" /></template>
+      <script>
+      export default {
+        methods: {
+          foo: () => {}
+        }
+      }
+      </script>`,
+      output: `
+      <template><button @click="foo" /></template>
+      <script>
+      export default {
+        methods: {
+          foo: () => {}
+        }
+      }
+      </script>`,
+      options: [['method', 'inline-function']],
+      errors: [
+        {
+          message: 'Prefer method handler over inline handler in v-on.',
+          line: 2,
+          column: 33
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <button @click="foo(123)" />
+        <button @click="foo.bar()" />
+        <button @click="foo?.()" />
+        <button @click="foo();foo();" />
+        <button @click="{}" />
+      </template>`,
+      output: null,
+      options: [['method', 'inline-function']],
+      errors: [
+        {
+          message: 'Prefer method handler over inline handler in v-on.',
+          line: 2,
+          column: 25
+        },
+        {
+          message:
+            'Prefer method handler over inline handler in v-on. Note that you may need to create a new method.',
+          line: 3,
+          column: 25
+        },
+        {
+          message:
+            'Prefer method handler over inline handler in v-on. Note that you may need to create a new method.',
+          line: 4,
+          column: 25
+        },
+        {
+          message:
+            'Prefer method handler over inline handler in v-on. Note that you may need to create a new method.',
+          line: 5,
+          column: 25
+        },
+        {
+          message:
+            'Prefer method handler over inline handler in v-on. Note that you may need to create a new method.',
+          line: 6,
+          column: 25
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template><button @click="foo()" /></template>
+      <script>
+      export default {
+        methods: {
+          foo(a) {}
+        }
+      }
+      </script>`,
+      output: null,
+      options: [['method', 'inline-function']],
+      errors: [
+        {
+          message: 'Prefer method handler over inline handler in v-on.',
+          line: 2,
+          column: 33
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <button @click="foo()" />
+        <button @click="bar()" />
+        <button @click="baz()" />
+      </template>
+      <script>
+      export default {
+        methods: {
+          foo(a, b) {},
+          bar(...a) {},
+          baz(a = 42) {},
+        }
+      }
+      </script>`,
+      output: null,
+      options: [['method', 'inline-function']],
+      errors: [
+        {
+          message: 'Prefer method handler over inline handler in v-on.',
+          line: 3,
+          column: 25
+        },
+        {
+          message: 'Prefer method handler over inline handler in v-on.',
+          line: 4,
+          column: 25
+        },
+        {
+          message: 'Prefer method handler over inline handler in v-on.',
+          line: 5,
+          column: 25
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <button @click="foo()" />
+        <button @click="bar()" />
+        <button @click="baz()" />
+      </template>
+      <script>
+      export default {
+        methods: {
+          foo: (a, b) => {},
+          bar: (...a) => {},
+          baz: (a = 42) => {},
+        }
+      }
+      </script>`,
+      output: null,
+      options: [['method', 'inline-function']],
+      errors: [
+        {
+          message: 'Prefer method handler over inline handler in v-on.',
+          line: 3,
+          column: 25
+        },
+        {
+          message: 'Prefer method handler over inline handler in v-on.',
+          line: 4,
+          column: 25
+        },
+        {
+          message: 'Prefer method handler over inline handler in v-on.',
+          line: 5,
+          column: 25
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <template v-for="e in list">
+          <button @click="e()" />
+        </template>
+      </template>`,
+      output: `<template>
+        <template v-for="e in list">
+          <button @click="e" />
+        </template>
+      </template>`,
+      options: [['method', 'inline-function']],
+      errors: [
+        {
+          message: 'Prefer method handler over inline handler in v-on.',
+          line: 3,
+          column: 27
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <template v-for="e in list">
+          <button @click="handler(e)" />
+          <button @click="handlers[e]()" />
+          <button @click="handler(a(b), c(d), e + f)" />
+          <button @click="e.foo()" />
+        </template>
+      </template>`,
+      output: `<template>
+        <template v-for="e in list">
+          <button @click="() => handler(e)" />
+          <button @click="() => handlers[e]()" />
+          <button @click="() => handler(a(b), c(d), e + f)" />
+          <button @click="() => e.foo()" />
+        </template>
+      </template>`,
+      options: [['method', 'inline-function']],
+      errors: [
+        {
+          message: 'Prefer inline function over inline handler in v-on.',
+          line: 3,
+          column: 27
+        },
+        {
+          message: 'Prefer inline function over inline handler in v-on.',
+          line: 4,
+          column: 27
+        },
+        {
+          message: 'Prefer inline function over inline handler in v-on.',
+          line: 5,
+          column: 27
+        },
+        {
+          message: 'Prefer inline function over inline handler in v-on.',
+          line: 6,
+          column: 27
+        }
+      ]
+    },
+    // 'inline-function'
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <button @click="foo( )" />
+        <button @click="count++" />
+      </template>`,
+      output: `<template>
+        <button @click="() => foo( )" />
+        <button @click="() => count++" />
+      </template>`,
+      options: ['inline-function'],
+      errors: [
+        {
+          message: 'Prefer inline function over inline handler in v-on.',
+          line: 2,
+          column: 25
+        },
+        {
+          message: 'Prefer inline function over inline handler in v-on.',
+          line: 3,
+          column: 25
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div @click="foo($event)" /></template>',
+      output: null,
+      options: ['inline-function'],
+      errors: [
+        {
+          message: 'Prefer inline function over inline handler in v-on.',
+          line: 1,
+          column: 24
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div @click=foo() /></template>',
+      output: null,
+      options: ['inline-function'],
+      errors: [
+        {
+          message: 'Prefer inline function over inline handler in v-on.',
+          line: 1,
+          column: 23
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><button @click="{foo();foo();}" /></template>',
+      output: '<template><button @click="() => {foo();foo();}" /></template>',
+      options: ['inline-function'],
+      errors: [
+        {
+          message: 'Prefer inline function over inline handler in v-on.',
+          line: 1,
+          column: 27
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><button @click="foo();foo();" /></template>',
+      output: '<template><button @click="() => {foo();foo();}" /></template>',
+      options: ['inline-function'],
+      errors: [
+        {
+          message: 'Prefer inline function over inline handler in v-on.',
+          line: 1,
+          column: 27
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><button @click="foo();" /></template>',
+      output: '<template><button @click="() => {foo();}" /></template>',
+      options: ['inline-function'],
+      errors: [
+        {
+          message: 'Prefer inline function over inline handler in v-on.',
+          line: 1,
+          column: 27
+        }
+      ]
+    },
+    // 'inline' with method
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <button @click="foo" />
+      </template>`,
+      output: null,
+      options: ['inline'],
+      errors: [
+        {
+          message: 'Prefer inline handler over method handler in v-on.',
+          line: 2,
+          column: 25
+        }
+      ]
+    },
+    // ['method', 'inline']
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <button @click="() => foo()" />
+        <button @click="(a, b) => foo(a, b)" />
+        <button @click="() => { foo() }" />
+      </template>`,
+      output: `<template>
+        <button @click="foo" />
+        <button @click="foo" />
+        <button @click="foo" />
+      </template>`,
+      options: [['method', 'inline']],
+      errors: [
+        {
+          message: 'Prefer method handler over inline function in v-on.',
+          line: 2,
+          column: 25
+        },
+        {
+          message: 'Prefer method handler over inline function in v-on.',
+          line: 3,
+          column: 25
+        },
+        {
+          message: 'Prefer method handler over inline function in v-on.',
+          line: 4,
+          column: 25
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <button @click="() => foo() /* comment */" />
+      </template>`,
+      output: null,
+      options: [['method', 'inline']],
+      errors: [
+        {
+          message: 'Prefer method handler over inline function in v-on.',
+          line: 2,
+          column: 25
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <button @click="() => foo() /* comment */" />
+      </template>`,
+      output: `<template>
+        <button @click="foo() /* comment */" />
+      </template>`,
+      options: [['method', 'inline'], { ignoreIncludesComment: true }],
+      errors: [
+        {
+          message: 'Prefer inline handler over inline function in v-on.',
+          line: 2,
+          column: 25
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <button @click="(a, b) => foo(a, b)" />
+      </template>
+      <script>
+      export default {
+        methods: {
+          foo(a, b) {}
+        }
+      }
+      </script>`,
+      output: `<template>
+        <button @click="foo" />
+      </template>
+      <script>
+      export default {
+        methods: {
+          foo(a, b) {}
+        }
+      }
+      </script>`,
+      options: [['method', 'inline']],
+      errors: [
+        {
+          message: 'Prefer method handler over inline function in v-on.',
+          line: 2,
+          column: 25
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <button @click="(a, b) => foo(a, b)" />
+      </template>
+      <script>
+      export default {
+        methods: {
+          foo
+        }
+      }
+      </script>`,
+      output: `<template>
+        <button @click="foo" />
+      </template>
+      <script>
+      export default {
+        methods: {
+          foo
+        }
+      }
+      </script>`,
+      options: [['method', 'inline']],
+      errors: [
+        {
+          message: 'Prefer method handler over inline function in v-on.',
+          line: 2,
+          column: 25
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <button @click="() => handler(foo)" />
+      </template>`,
+      output: null,
+      options: [['method', 'inline']],
+      errors: [
+        {
+          message: 'Prefer method handler over inline function in v-on.',
+          line: 2,
+          column: 25
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <button @click="() => foo?.()" />
+      </template>`,
+      output: null,
+      options: [['method', 'inline']],
+      errors: [
+        {
+          message:
+            'Prefer method handler over inline function in v-on. Note that you may need to create a new method.',
+          line: 2,
+          column: 25
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <button @click="() => count++" />
+      </template>`,
+      output: null,
+      options: [['method', 'inline']],
+      errors: [
+        {
+          message:
+            'Prefer method handler over inline function in v-on. Note that you may need to create a new method.',
+          line: 2,
+          column: 25
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <button @click="() => { count++ }" />
+      </template>`,
+      output: null,
+      options: [['method', 'inline']],
+      errors: [
+        {
+          message:
+            'Prefer method handler over inline function in v-on. Note that you may need to create a new method.',
+          line: 2,
+          column: 25
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <button @click="(a, b) => foo(b, a)" />
+        <button @click="(a, b) => foo(...a, b)" />
+        <button @click="(...a) => foo(a)" />
+      </template>`,
+      output: null,
+      options: [['method', 'inline']],
+      errors: [
+        {
+          message: 'Prefer method handler over inline function in v-on.',
+          line: 2,
+          column: 25
+        },
+        {
+          message: 'Prefer method handler over inline function in v-on.',
+          line: 3,
+          column: 25
+        },
+        {
+          message: 'Prefer method handler over inline function in v-on.',
+          line: 4,
+          column: 25
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <button @click="(a) => foo(a)" />
+        <button @click="(a) => bar(a)" />
+        <button @click="(a, b) => baz(a, b)" />
+      </template>
+      <script>
+      export default {
+        methods: {
+          foo(a, b) {},
+          bar(...a) {},
+          baz(a = 42) {},
+        }
+      }
+      </script>`,
+      output: null,
+      options: [['method', 'inline']],
+      errors: [
+        {
+          message: 'Prefer method handler over inline function in v-on.',
+          line: 3,
+          column: 25
+        },
+        {
+          message: 'Prefer method handler over inline function in v-on.',
+          line: 4,
+          column: 25
+        },
+        {
+          message: 'Prefer method handler over inline function in v-on.',
+          line: 5,
+          column: 25
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <button @click="(a) => foo(a)" />
+        <button @click="(a) => bar(a)" />
+        <button @click="(a, b) => baz(a, b)" />
+      </template>
+      <script>
+      export default {
+        methods: {
+          foo: (a, b) => {},
+          bar: (...a) => {},
+          baz: (a = 42) => {},
+        }
+      }
+      </script>`,
+      output: null,
+      options: [['method', 'inline']],
+      errors: [
+        {
+          message: 'Prefer method handler over inline function in v-on.',
+          line: 3,
+          column: 25
+        },
+        {
+          message: 'Prefer method handler over inline function in v-on.',
+          line: 4,
+          column: 25
+        },
+        {
+          message: 'Prefer method handler over inline function in v-on.',
+          line: 5,
+          column: 25
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <template v-for="e in list">
+          <button @click="() => e()" />
+          <button @click="(a) => e(a)" />
+          <button @click="(a, b) => e(a, b)" />
+        </template>
+      </template>`,
+      output: `<template>
+        <template v-for="e in list">
+          <button @click="e" />
+          <button @click="e" />
+          <button @click="e" />
+        </template>
+      </template>`,
+      options: [['method', 'inline']],
+      errors: [
+        {
+          message: 'Prefer method handler over inline function in v-on.',
+          line: 3,
+          column: 27
+        },
+        {
+          message: 'Prefer method handler over inline function in v-on.',
+          line: 4,
+          column: 27
+        },
+        {
+          message: 'Prefer method handler over inline function in v-on.',
+          line: 5,
+          column: 27
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <template v-for="e in list">
+          <button @click="() => handler(e)" />
+          <button @click="() => handlers[e]()" />
+          <button @click="() => handler(a(b), c(d), e + f)" />
+          <button @click="() => e.foo()" />
+        </template>
+      </template>`,
+      output: `<template>
+        <template v-for="e in list">
+          <button @click="handler(e)" />
+          <button @click="handlers[e]()" />
+          <button @click="handler(a(b), c(d), e + f)" />
+          <button @click="e.foo()" />
+        </template>
+      </template>`,
+      options: [['method', 'inline']],
+      errors: [
+        {
+          message: 'Prefer inline handler over inline function in v-on.',
+          line: 3,
+          column: 27
+        },
+        {
+          message: 'Prefer inline handler over inline function in v-on.',
+          line: 4,
+          column: 27
+        },
+        {
+          message: 'Prefer inline handler over inline function in v-on.',
+          line: 5,
+          column: 27
+        },
+        {
+          message: 'Prefer inline handler over inline function in v-on.',
+          line: 6,
+          column: 27
+        }
+      ]
+    },
+    // 'inline' with function
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <button @click="() => foo(a, b)" />
+        <button @click="() => count++" />
+        <button @click="() => { count++; foo(); }" />
+      </template>`,
+      output: `<template>
+        <button @click="foo(a, b)" />
+        <button @click="count++" />
+        <button @click=" count++; foo(); " />
+      </template>`,
+      options: ['inline'],
+      errors: [
+        {
+          message: 'Prefer inline handler over inline function in v-on.',
+          line: 2,
+          column: 25
+        },
+        {
+          message: 'Prefer inline handler over inline function in v-on.',
+          line: 3,
+          column: 25
+        },
+        {
+          message: 'Prefer inline handler over inline function in v-on.',
+          line: 4,
+          column: 25
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <button @click="(a) => foo(a, b)" />
+      </template>`,
+      output: null,
+      options: ['inline'],
+      errors: [
+        {
+          message: 'Prefer inline handler over inline function in v-on.',
+          line: 2,
+          column: 25
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <button @click="(a, b) => foo(a, b)" />
+      </template>`,
+      output: null,
+      options: ['inline'],
+      errors: [
+        {
+          message:
+            'Prefer inline handler over inline function in v-on. Note that the custom event must be changed to a single payload.',
+          line: 2,
+          column: 25
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/v-on-style.js b/tests/lib/rules/v-on-style.js
index 7ffd115b9..820f98c4b 100644
--- a/tests/lib/rules/v-on-style.js
+++ b/tests/lib/rules/v-on-style.js
@@ -5,20 +5,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/v-on-style')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('v-on-style', rule, {
@@ -55,16 +46,16 @@ tester.run('v-on-style', rule, {
     },
     {
       filename: 'test.vue',
-      options: ['shorthand'],
       code: '<template><div v-on:foo="foo"></div></template>',
       output: '<template><div @foo="foo"></div></template>',
+      options: ['shorthand'],
       errors: ["Expected '@' instead of 'v-on:'."]
     },
     {
       filename: 'test.vue',
-      options: ['longform'],
       code: '<template><div @foo="foo"></div></template>',
       output: '<template><div v-on:foo="foo"></div></template>',
+      options: ['longform'],
       errors: ["Expected 'v-on:' instead of '@'."]
     }
   ]
diff --git a/tests/lib/rules/v-slot-style.js b/tests/lib/rules/v-slot-style.js
index 72363f779..f35f1a9b8 100644
--- a/tests/lib/rules/v-slot-style.js
+++ b/tests/lib/rules/v-slot-style.js
@@ -4,20 +4,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/v-slot-style')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('v-slot-style', rule, {
@@ -225,13 +216,13 @@ tester.run('v-slot-style', rule, {
           <my-component #default="data"></my-component>
         </template>
       `,
+      options: [{ atComponent: 'shorthand' }],
       errors: [
         {
           messageId: 'expectedShorthand',
           data: { actual: 'v-slot:default', argument: 'default' }
         }
-      ],
-      options: [{ atComponent: 'shorthand' }]
+      ]
     },
     {
       code: `
@@ -244,13 +235,13 @@ tester.run('v-slot-style', rule, {
           <my-component #default="data"></my-component>
         </template>
       `,
+      options: [{ atComponent: 'shorthand' }],
       errors: [
         {
           messageId: 'expectedShorthand',
           data: { actual: 'v-slot', argument: 'default' }
         }
-      ],
-      options: [{ atComponent: 'shorthand' }]
+      ]
     },
     {
       code: `
@@ -263,13 +254,13 @@ tester.run('v-slot-style', rule, {
           <my-component v-slot:default="data"></my-component>
         </template>
       `,
+      options: [{ atComponent: 'longform' }],
       errors: [
         {
           messageId: 'expectedLongform',
           data: { actual: '#default', argument: 'default' }
         }
-      ],
-      options: [{ atComponent: 'longform' }]
+      ]
     },
     {
       code: `
@@ -282,13 +273,13 @@ tester.run('v-slot-style', rule, {
           <my-component v-slot:default="data"></my-component>
         </template>
       `,
+      options: [{ atComponent: 'longform' }],
       errors: [
         {
           messageId: 'expectedLongform',
           data: { actual: 'v-slot', argument: 'default' }
         }
-      ],
-      options: [{ atComponent: 'longform' }]
+      ]
     },
 
     {
@@ -350,13 +341,13 @@ tester.run('v-slot-style', rule, {
           </my-component>
         </template>
       `,
+      options: [{ default: 'longform' }],
       errors: [
         {
           messageId: 'expectedLongform',
           data: { actual: '#default', argument: 'default' }
         }
-      ],
-      options: [{ default: 'longform' }]
+      ]
     },
     {
       code: `
@@ -373,13 +364,13 @@ tester.run('v-slot-style', rule, {
           </my-component>
         </template>
       `,
+      options: [{ default: 'longform' }],
       errors: [
         {
           messageId: 'expectedLongform',
           data: { actual: 'v-slot', argument: 'default' }
         }
-      ],
-      options: [{ default: 'longform' }]
+      ]
     },
     {
       code: `
@@ -396,13 +387,13 @@ tester.run('v-slot-style', rule, {
           </my-component>
         </template>
       `,
+      options: [{ default: 'v-slot' }],
       errors: [
         {
           messageId: 'expectedVSlot',
           data: { actual: '#default', argument: 'default' }
         }
-      ],
-      options: [{ default: 'v-slot' }]
+      ]
     },
     {
       code: `
@@ -419,13 +410,13 @@ tester.run('v-slot-style', rule, {
           </my-component>
         </template>
       `,
+      options: [{ default: 'v-slot' }],
       errors: [
         {
           messageId: 'expectedVSlot',
           data: { actual: 'v-slot:default', argument: 'default' }
         }
-      ],
-      options: [{ default: 'v-slot' }]
+      ]
     },
 
     {
@@ -465,13 +456,13 @@ tester.run('v-slot-style', rule, {
           </my-component>
         </template>
       `,
+      options: [{ named: 'longform' }],
       errors: [
         {
           messageId: 'expectedLongform',
           data: { actual: '#foo', argument: 'foo' }
         }
-      ],
-      options: [{ named: 'longform' }]
+      ]
     },
 
     {
@@ -511,13 +502,13 @@ tester.run('v-slot-style', rule, {
           </my-component>
         </template>
       `,
+      options: [{ named: 'longform' }],
       errors: [
         {
           messageId: 'expectedLongform',
           data: { actual: '#[foo]', argument: '[foo]' }
         }
-      ],
-      options: [{ named: 'longform' }]
+      ]
     }
   ]
 })
diff --git a/tests/lib/rules/valid-attribute-name.js b/tests/lib/rules/valid-attribute-name.js
index 920231899..bb94ca427 100644
--- a/tests/lib/rules/valid-attribute-name.js
+++ b/tests/lib/rules/valid-attribute-name.js
@@ -4,12 +4,12 @@
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/valid-attribute-name')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
     ecmaVersion: 2020,
     sourceType: 'module'
   }
diff --git a/tests/lib/rules/valid-define-emits.js b/tests/lib/rules/valid-define-emits.js
index dd0b1f88f..57a130299 100644
--- a/tests/lib/rules/valid-define-emits.js
+++ b/tests/lib/rules/valid-define-emits.js
@@ -4,20 +4,15 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/valid-define-emits')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015, sourceType: 'module' }
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2015,
+    sourceType: 'module'
+  }
 })
 
 tester.run('valid-define-emits', rule, {
@@ -48,7 +43,9 @@ tester.run('valid-define-emits', rule, {
         defineEmits<(e: 'notify')=>void>()
       </script>
       `,
-      parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      languageOptions: {
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      }
     },
     {
       filename: 'test.vue',
@@ -77,9 +74,6 @@ tester.run('valid-define-emits', rule, {
     {
       // https://github.com/vuejs/eslint-plugin-vue/issues/1656
       filename: 'test.vue',
-      parserOptions: {
-        parser: require.resolve('@typescript-eslint/parser')
-      },
       code: `
       <script setup lang="ts">
       import type { PropType } from 'vue';
@@ -94,13 +88,15 @@ tester.run('valid-define-emits', rule, {
         myProp: (x: X) => true,
       });
       </script>
-      `
+      `,
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
     },
     {
       filename: 'test.vue',
-      parserOptions: {
-        parser: require.resolve('@typescript-eslint/parser')
-      },
       code: `
       <script setup lang="ts">
       import type { PropType } from 'vue';
@@ -116,7 +112,12 @@ tester.run('valid-define-emits', rule, {
         myProp: (x: typeof str) => true,
       });
       </script>
-      `
+      `,
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
     },
     {
       filename: 'test.vue',
@@ -141,7 +142,7 @@ tester.run('valid-define-emits', rule, {
       `,
       errors: [
         {
-          message: '`defineEmits` are referencing locally declared variables.',
+          message: '`defineEmits` is referencing locally declared variables.',
           line: 5
         }
       ]
@@ -154,7 +155,9 @@ tester.run('valid-define-emits', rule, {
         defineEmits<(e: 'notify')=>void>({ submit: null })
       </script>
       `,
-      parserOptions: { parser: require.resolve('@typescript-eslint/parser') },
+      languageOptions: {
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      },
       errors: [
         {
           message: '`defineEmits` has both a type-only emit and an argument.',
diff --git a/tests/lib/rules/valid-define-options.js b/tests/lib/rules/valid-define-options.js
new file mode 100644
index 000000000..330bc819f
--- /dev/null
+++ b/tests/lib/rules/valid-define-options.js
@@ -0,0 +1,218 @@
+/**
+ * @author Yosuke Ota <https://github.com/ota-meshi>
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/valid-define-options')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2015,
+    sourceType: 'module'
+  }
+})
+
+tester.run('valid-define-options', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      defineOptions({ name: 'foo' })
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      const def = { name: 'foo' }
+      </script>
+      <script setup>
+      defineOptions(def)
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      type X = string;
+
+      defineOptions({ name: 'foo' as X })
+      </script>
+      `,
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      const str = 'abc'
+
+      defineOptions({ name: 'foo' as (typeof str) })
+      </script>
+      `,
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      import { def } from './defs';
+
+      defineOptions(def);
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const def = 'foo';
+      defineOptions({ name: def });
+      </script>`
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+        const def = { name: 'Foo' }
+        defineOptions(def)
+      </script>
+      `,
+      errors: [
+        {
+          message: '`defineOptions` is referencing locally declared variables.',
+          line: 4
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+        defineOptions({ name: 'Foo' })
+        defineOptions({ name: 'Bar' })
+      </script>
+      `,
+      errors: [
+        {
+          message: '`defineOptions` has been called multiple times.',
+          line: 3
+        },
+        {
+          message: '`defineOptions` has been called multiple times.',
+          line: 4
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+        defineOptions()
+      </script>
+      `,
+      errors: [
+        {
+          message: 'Options are not defined.',
+          line: 3
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      defineOptions<{ name: 'Foo' }>()
+      </script>
+      `,
+      languageOptions: {
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      },
+      errors: [
+        {
+          message: 'Options are not defined.',
+          line: 3
+        },
+        {
+          message: '`defineOptions()` cannot accept type arguments.',
+          line: 3
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+        defineOptions({ props: { msg: String } })
+      </script>
+      `,
+      errors: [
+        {
+          message:
+            '`defineOptions()` cannot be used to declare `props`. Use `defineProps()` instead.',
+          line: 3
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+        defineOptions({ emits: ['click'] })
+      </script>
+      `,
+      errors: [
+        {
+          message:
+            '`defineOptions()` cannot be used to declare `emits`. Use `defineEmits()` instead.',
+          line: 3
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+        defineOptions({ expose: ['foo'] })
+      </script>
+      `,
+      errors: [
+        {
+          message:
+            '`defineOptions()` cannot be used to declare `expose`. Use `defineExpose()` instead.',
+          line: 3
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+        defineOptions({ slots: Object })
+      </script>
+      `,
+      errors: [
+        {
+          message:
+            '`defineOptions()` cannot be used to declare `slots`. Use `defineSlots()` instead.',
+          line: 3
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/valid-define-props.js b/tests/lib/rules/valid-define-props.js
index 2d866274b..d20209846 100644
--- a/tests/lib/rules/valid-define-props.js
+++ b/tests/lib/rules/valid-define-props.js
@@ -4,20 +4,15 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/valid-define-props')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015, sourceType: 'module' }
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2015,
+    sourceType: 'module'
+  }
 })
 
 tester.run('valid-define-props', rule, {
@@ -48,7 +43,9 @@ tester.run('valid-define-props', rule, {
         defineProps<{ msg?:string }>()
       </script>
       `,
-      parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      languageOptions: {
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      }
     },
     {
       filename: 'test.vue',
@@ -80,9 +77,6 @@ tester.run('valid-define-props', rule, {
     {
       // https://github.com/vuejs/eslint-plugin-vue/issues/1656
       filename: 'test.vue',
-      parserOptions: {
-        parser: require.resolve('@typescript-eslint/parser')
-      },
       code: `
       <script setup lang="ts">
       import type { PropType } from 'vue';
@@ -97,13 +91,15 @@ tester.run('valid-define-props', rule, {
         myProp: (x: X) => true,
       });
       </script>
-      `
+      `,
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
     },
     {
       filename: 'test.vue',
-      parserOptions: {
-        parser: require.resolve('@typescript-eslint/parser')
-      },
       code: `
       <script setup lang="ts">
       import type { PropType } from 'vue';
@@ -119,7 +115,12 @@ tester.run('valid-define-props', rule, {
         myProp: (x: typeof str) => true,
       });
       </script>
-      `
+      `,
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
     },
     {
       filename: 'test.vue',
@@ -144,7 +145,7 @@ tester.run('valid-define-props', rule, {
       `,
       errors: [
         {
-          message: '`defineProps` are referencing locally declared variables.',
+          message: '`defineProps` is referencing locally declared variables.',
           line: 5
         }
       ]
@@ -157,7 +158,9 @@ tester.run('valid-define-props', rule, {
         defineProps<{ msg?:string }>({ msg: String })
       </script>
       `,
-      parserOptions: { parser: require.resolve('@typescript-eslint/parser') },
+      languageOptions: {
+        parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+      },
       errors: [
         {
           message: '`defineProps` has both a type-only props and an argument.',
diff --git a/tests/lib/rules/valid-model-definition.js b/tests/lib/rules/valid-model-definition.js
index d9d8263ab..ed6013247 100644
--- a/tests/lib/rules/valid-model-definition.js
+++ b/tests/lib/rules/valid-model-definition.js
@@ -4,19 +4,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = require('../../../lib/rules/valid-model-definition')
-const RuleTester = require('eslint').RuleTester
-
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
+const RuleTester = require('../../eslint-compat').RuleTester
 
 const ruleTester = new RuleTester({
-  parserOptions: {
+  languageOptions: {
     ecmaVersion: 2018,
     sourceType: 'module'
   }
diff --git a/tests/lib/rules/valid-next-tick.js b/tests/lib/rules/valid-next-tick.js
index c6e263eeb..2e776e330 100644
--- a/tests/lib/rules/valid-next-tick.js
+++ b/tests/lib/rules/valid-next-tick.js
@@ -6,20 +6,12 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/valid-next-tick')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
     ecmaVersion: 2017,
     sourceType: 'module'
   }
@@ -164,6 +156,7 @@ tester.run('valid-next-tick', rule, {
           column: 11,
           suggestions: [
             {
+              messageId: 'addAwait',
               output: `<script>import { nextTick as nt } from 'vue';
       export default {
         async mounted() {
@@ -182,6 +175,7 @@ tester.run('valid-next-tick', rule, {
           column: 15,
           suggestions: [
             {
+              messageId: 'addAwait',
               output: `<script>import { nextTick as nt } from 'vue';
       export default {
         async mounted() {
@@ -200,6 +194,7 @@ tester.run('valid-next-tick', rule, {
           column: 16,
           suggestions: [
             {
+              messageId: 'addAwait',
               output: `<script>import { nextTick as nt } from 'vue';
       export default {
         async mounted() {
diff --git a/tests/lib/rules/valid-template-root.js b/tests/lib/rules/valid-template-root.js
index f530786d3..57799c372 100644
--- a/tests/lib/rules/valid-template-root.js
+++ b/tests/lib/rules/valid-template-root.js
@@ -5,20 +5,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/valid-template-root')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('valid-template-root', rule, {
diff --git a/tests/lib/rules/valid-v-bind-sync.js b/tests/lib/rules/valid-v-bind-sync.js
index 32f99bf53..8c614bc12 100644
--- a/tests/lib/rules/valid-v-bind-sync.js
+++ b/tests/lib/rules/valid-v-bind-sync.js
@@ -3,20 +3,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/valid-v-bind-sync')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2020 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2020 }
 })
 
 tester.run('valid-v-bind-sync', rule, {
diff --git a/tests/lib/rules/valid-v-bind.js b/tests/lib/rules/valid-v-bind.js
index 24a61bba7..bd04100ae 100644
--- a/tests/lib/rules/valid-v-bind.js
+++ b/tests/lib/rules/valid-v-bind.js
@@ -5,20 +5,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/valid-v-bind')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('valid-v-bind', rule, {
@@ -79,6 +70,15 @@ tester.run('valid-v-bind', rule, {
       filename: 'test.vue',
       code: "<template><input v-bind='$attrs' /></template>"
     },
+    // v-bind same-name shorthand (Vue 3.4+)
+    {
+      filename: 'test.vue',
+      code: '<template><div :foo /></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-bind:foo /></template>'
+    },
     // parsing error
     {
       filename: 'parsing-error.vue',
@@ -96,11 +96,6 @@ tester.run('valid-v-bind', rule, {
       code: '<template><div v-bind></div></template>',
       errors: ["'v-bind' directives require an attribute value."]
     },
-    {
-      filename: 'test.vue',
-      code: '<template><div v-bind:aaa></div></template>',
-      errors: ["'v-bind' directives require an attribute value."]
-    },
     {
       filename: 'test.vue',
       code: "<template><div :aaa.unknown='bbb'></div></template>",
diff --git a/tests/lib/rules/valid-v-cloak.js b/tests/lib/rules/valid-v-cloak.js
index abecacba4..f0f96f02b 100644
--- a/tests/lib/rules/valid-v-cloak.js
+++ b/tests/lib/rules/valid-v-cloak.js
@@ -5,20 +5,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/valid-v-cloak')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('valid-v-cloak', rule, {
diff --git a/tests/lib/rules/valid-v-else-if.js b/tests/lib/rules/valid-v-else-if.js
index 847632c56..87d82f5cb 100644
--- a/tests/lib/rules/valid-v-else-if.js
+++ b/tests/lib/rules/valid-v-else-if.js
@@ -5,20 +5,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/valid-v-else-if')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('valid-v-else-if', rule, {
diff --git a/tests/lib/rules/valid-v-else.js b/tests/lib/rules/valid-v-else.js
index e4513ca48..e8955f0f2 100644
--- a/tests/lib/rules/valid-v-else.js
+++ b/tests/lib/rules/valid-v-else.js
@@ -5,20 +5,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/valid-v-else')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('valid-v-else', rule, {
diff --git a/tests/lib/rules/valid-v-for.js b/tests/lib/rules/valid-v-for.js
index a29d3081e..451b86811 100644
--- a/tests/lib/rules/valid-v-for.js
+++ b/tests/lib/rules/valid-v-for.js
@@ -5,20 +5,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/valid-v-for')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('valid-v-for', rule, {
@@ -281,9 +272,6 @@ tester.run('valid-v-for', rule, {
     },
     {
       filename: 'test.vue',
-      errors: [
-        "Expected 'v-bind:key' directive to use the variables which are defined by the 'v-for' directive."
-      ],
       code: `
         <template>
           <template v-for="x in xs">
@@ -294,13 +282,13 @@ tester.run('valid-v-for', rule, {
             </template>
           </template>
         </template>
-      `
+      `,
+      errors: [
+        "Expected 'v-bind:key' directive to use the variables which are defined by the 'v-for' directive."
+      ]
     },
     {
       filename: 'test.vue',
-      errors: [
-        "Expected 'v-bind:key' directive to use the variables which are defined by the 'v-for' directive."
-      ],
       code: `
         <template>
           <template v-for="x in xs">
@@ -311,13 +299,13 @@ tester.run('valid-v-for', rule, {
             </template>
           </template>
         </template>
-      `
+      `,
+      errors: [
+        "Expected 'v-bind:key' directive to use the variables which are defined by the 'v-for' directive."
+      ]
     },
     {
       filename: 'test.vue',
-      errors: [
-        "Expected 'v-bind:key' directive to use the variables which are defined by the 'v-for' directive."
-      ],
       code: `
         <template>
           <template v-for="x in xs">
@@ -328,7 +316,10 @@ tester.run('valid-v-for', rule, {
             </template>
           </template>
         </template>
-      `
+      `,
+      errors: [
+        "Expected 'v-bind:key' directive to use the variables which are defined by the 'v-for' directive."
+      ]
     },
     // empty value
     {
diff --git a/tests/lib/rules/valid-v-html.js b/tests/lib/rules/valid-v-html.js
index afb312f74..771c936bb 100644
--- a/tests/lib/rules/valid-v-html.js
+++ b/tests/lib/rules/valid-v-html.js
@@ -5,20 +5,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/valid-v-html')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('valid-v-html', rule, {
diff --git a/tests/lib/rules/valid-v-if.js b/tests/lib/rules/valid-v-if.js
index 64232c3d2..f89860096 100644
--- a/tests/lib/rules/valid-v-if.js
+++ b/tests/lib/rules/valid-v-if.js
@@ -5,20 +5,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/valid-v-if')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('valid-v-if', rule, {
diff --git a/tests/lib/rules/valid-v-is.js b/tests/lib/rules/valid-v-is.js
index dd55ef7b3..73741cb7c 100644
--- a/tests/lib/rules/valid-v-is.js
+++ b/tests/lib/rules/valid-v-is.js
@@ -3,20 +3,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/valid-v-is')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2020 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2020 }
 })
 
 tester.run('valid-v-is', rule, {
diff --git a/tests/lib/rules/valid-v-memo.js b/tests/lib/rules/valid-v-memo.js
index 51f086213..8796f91c8 100644
--- a/tests/lib/rules/valid-v-memo.js
+++ b/tests/lib/rules/valid-v-memo.js
@@ -4,20 +4,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/valid-v-memo')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2021 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2021 }
 })
 
 tester.run('valid-v-memo', rule, {
diff --git a/tests/lib/rules/valid-v-model.js b/tests/lib/rules/valid-v-model.js
index 6ee60526e..7ef63d01e 100644
--- a/tests/lib/rules/valid-v-model.js
+++ b/tests/lib/rules/valid-v-model.js
@@ -5,20 +5,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/valid-v-model')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2020 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2020 }
 })
 
 tester.run('valid-v-model', rule, {
@@ -136,14 +127,13 @@ tester.run('valid-v-model', rule, {
       code: '<template><MyComponent v-model.modifier.modifierTwo="a"></MyComponent></template>'
     },
     // svg
-    {
-      code: `
+    `
       <template>
         <svg>
           <MyComponent v-model="slotProps"></MyComponent>
         </svg>
-      </template>`
-    },
+      </template>
+    `,
     // parsing error
     {
       filename: 'parsing-error.vue',
@@ -153,6 +143,51 @@ tester.run('valid-v-model', rule, {
     {
       filename: 'comment-value.vue',
       code: '<template><MyComponent v-model="/**/" /></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><MyComponent v-model="a as string"></MyComponent></template>',
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><MyComponent v-model="a!"></MyComponent></template>',
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><MyComponent v-model="a as unknown as string"></MyComponent></template>',
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><MyComponent v-model="a!!!!"></MyComponent></template>',
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><MyComponent v-model="(((a!) as unknown)! as string)!"></MyComponent></template>',
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
     }
   ],
   invalid: [
@@ -251,6 +286,66 @@ tester.run('valid-v-model', rule, {
       filename: 'test.vue',
       code: '<template><input v-model="(a?.b).c.d"></template>',
       errors: ["'v-model' directive has potential null object property access."]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><MyComponent v-model="a() as string"></MyComponent></template>',
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        "'v-model' directives require the attribute value which is valid as LHS."
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><MyComponent v-model="a()!"></MyComponent></template>',
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        "'v-model' directives require the attribute value which is valid as LHS."
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><MyComponent v-model="a() as unknown as string"></MyComponent></template>',
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        "'v-model' directives require the attribute value which is valid as LHS."
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><MyComponent v-model="a()!!!!"></MyComponent></template>',
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        "'v-model' directives require the attribute value which is valid as LHS."
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><MyComponent v-model="(((a()!) as unknown)! as string)!"></MyComponent></template>',
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        "'v-model' directives require the attribute value which is valid as LHS."
+      ]
     }
   ]
 })
diff --git a/tests/lib/rules/valid-v-on.js b/tests/lib/rules/valid-v-on.js
index 6f162e1df..eca5ea639 100644
--- a/tests/lib/rules/valid-v-on.js
+++ b/tests/lib/rules/valid-v-on.js
@@ -5,20 +5,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/valid-v-on')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('valid-v-on', rule, {
@@ -148,14 +139,14 @@ tester.run('valid-v-on', rule, {
     {
       filename: 'test.vue',
       code: '<template><div @keydown.bar.aaa="foo"></div></template>',
-      errors: ["'v-on' directives don't support the modifier 'aaa'."],
-      options: [{ modifiers: ['bar'] }]
+      options: [{ modifiers: ['bar'] }],
+      errors: ["'v-on' directives don't support the modifier 'aaa'."]
     },
     {
       filename: 'test.vue',
       code: '<template><div @keydown.bar.aaa="foo"></div></template>',
-      errors: ["'v-on' directives don't support the modifier 'bar'."],
-      options: [{ modifiers: ['aaa'] }]
+      options: [{ modifiers: ['aaa'] }],
+      errors: ["'v-on' directives don't support the modifier 'bar'."]
     },
     {
       filename: 'test.vue',
diff --git a/tests/lib/rules/valid-v-once.js b/tests/lib/rules/valid-v-once.js
index c9f3750c3..cb980c708 100644
--- a/tests/lib/rules/valid-v-once.js
+++ b/tests/lib/rules/valid-v-once.js
@@ -5,20 +5,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/valid-v-once')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('valid-v-once', rule, {
diff --git a/tests/lib/rules/valid-v-pre.js b/tests/lib/rules/valid-v-pre.js
index 3d9c9d883..5e4f95c02 100644
--- a/tests/lib/rules/valid-v-pre.js
+++ b/tests/lib/rules/valid-v-pre.js
@@ -5,20 +5,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/valid-v-pre')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('valid-v-pre', rule, {
diff --git a/tests/lib/rules/valid-v-show.js b/tests/lib/rules/valid-v-show.js
index 6b1d62015..656d47e86 100644
--- a/tests/lib/rules/valid-v-show.js
+++ b/tests/lib/rules/valid-v-show.js
@@ -5,20 +5,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/valid-v-show')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('valid-v-show', rule, {
diff --git a/tests/lib/rules/valid-v-slot.js b/tests/lib/rules/valid-v-slot.js
index cb6b8538d..7cfa702ad 100644
--- a/tests/lib/rules/valid-v-slot.js
+++ b/tests/lib/rules/valid-v-slot.js
@@ -4,20 +4,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/valid-v-slot')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('valid-v-slot', rule, {
@@ -132,16 +123,15 @@ tester.run('valid-v-slot', rule, {
       options: [{ allowModifiers: true }]
     },
     // svg
-    {
-      code: `
+    `
       <template>
         <svg>
           <MyComponent v-slot="slotProps">
             <MyChildComponent :thing="slotProps.thing" />
           </MyComponent>
         </svg>
-      </template>`
-    },
+      </template>
+    `,
     // parsing error
     {
       filename: 'parsing-error.vue',
@@ -415,8 +405,8 @@ tester.run('valid-v-slot', rule, {
           </MyComponent>
         </template>
       `,
-      errors: [{ messageId: 'disallowAnyModifier' }],
-      options: [{ allowModifiers: true }]
+      options: [{ allowModifiers: true }],
+      errors: [{ messageId: 'disallowAnyModifier' }]
     },
     {
       code: `
@@ -426,8 +416,8 @@ tester.run('valid-v-slot', rule, {
           </MyComponent>
         </template>
       `,
-      errors: [{ messageId: 'disallowAnyModifier' }],
-      options: [{ allowModifiers: false }]
+      options: [{ allowModifiers: false }],
+      errors: [{ messageId: 'disallowAnyModifier' }]
     },
     {
       code: `
diff --git a/tests/lib/rules/valid-v-text.js b/tests/lib/rules/valid-v-text.js
index 611b1a31a..33c179d93 100644
--- a/tests/lib/rules/valid-v-text.js
+++ b/tests/lib/rules/valid-v-text.js
@@ -5,20 +5,11 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
 const rule = require('../../../lib/rules/valid-v-text')
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
 tester.run('valid-v-text', rule, {
diff --git a/tests/lib/script-setup-vars.js b/tests/lib/script-setup-vars.js
index 90921984f..6e4438e6a 100644
--- a/tests/lib/script-setup-vars.js
+++ b/tests/lib/script-setup-vars.js
@@ -1,27 +1,19 @@
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
+const semver = require('semver')
+const { RuleTester, ESLint } = require('../eslint-compat')
+const { getCoreRule } = require('../../lib/utils')
+const ruleNoUnusedVars = getCoreRule('no-unused-vars')
+const ruleNoUndef = getCoreRule('no-undef')
 
-const eslint = require('eslint')
-const rules = new eslint.Linter().getRules()
-const ruleNoUnusedVars = rules.get('no-unused-vars')
-const ruleNoUndef = rules.get('no-undef')
-
-const RuleTester = eslint.RuleTester
 const ruleTester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
     ecmaVersion: 6,
     sourceType: 'module'
   }
 })
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 describe('vue-eslint-parser should properly mark the variables used in the template', () => {
   ruleTester.run('no-unused-vars', ruleNoUnusedVars, {
     valid: [
@@ -144,7 +136,7 @@ describe('vue-eslint-parser should properly mark the variables used in the templ
           {{post}}
         </template>
         `,
-        parserOptions: {
+        languageOptions: {
           ecmaVersion: 2022,
           sourceType: 'module'
         }
@@ -229,7 +221,38 @@ describe('vue-eslint-parser should properly mark the variables used in the templ
         errors: [
           {
             message: "'Bar' is defined but never used.",
-            line: 5
+            line: 5,
+            suggestions: semver.gte(ESLint.version, '9.17.0')
+              ? [
+                  {
+                    desc: "Remove unused variable 'Bar'.",
+                    output: `
+        <script setup>
+          // imported components are also directly usable in template
+          import Foo from './Foo.vue'
+          import './Bar.vue'
+          import { ref } from 'vue'
+
+          // write Composition API code just like in a normal setup()
+          // but no need to manually return everything
+          const count = ref(0)
+          const inc = () => {
+            count.value++
+          }
+          const foo = ref(42)
+          console.log(foo.value)
+          const bar = ref(42)
+          bar.value++
+          const baz = ref(42)
+        </script>
+
+        <template>
+          <Foo :count="count" @click="inc" />
+        </template>
+        `
+                  }
+                ]
+              : null
           },
           {
             message: "'baz' is assigned a value but never used.",
@@ -253,7 +276,23 @@ describe('vue-eslint-parser should properly mark the variables used in the templ
         errors: [
           {
             message: "'camelCase' is defined but never used.",
-            line: 3
+            line: 3,
+            suggestions: semver.gte(ESLint.version, '9.17.0')
+              ? [
+                  {
+                    desc: "Remove unused variable 'camelCase'.",
+                    output: `
+        <script setup>
+          import './component.vue'
+        </script>
+
+        <template>
+          <CamelCase />
+        </template>
+        `
+                  }
+                ]
+              : null
           }
         ]
       },
@@ -275,7 +314,25 @@ describe('vue-eslint-parser should properly mark the variables used in the templ
         errors: [
           {
             message: "'msg' is assigned a value but never used.",
-            line: 4
+            line: 4,
+            suggestions: semver.gte(ESLint.version, '9.17.0')
+              ? [
+                  {
+                    desc: "Remove unused variable 'msg'.",
+                    output: `
+        <script setup>
+          if (a) {
+            
+          }
+        </script>
+
+        <template>
+          <div>{{ msg }}</div>
+        </template>
+        `
+                  }
+                ]
+              : null
           }
         ]
       },
diff --git a/tests/lib/utils/comments.js b/tests/lib/utils/comments.js
new file mode 100644
index 000000000..9e567f6b1
--- /dev/null
+++ b/tests/lib/utils/comments.js
@@ -0,0 +1,67 @@
+'use strict'
+
+const assert = require('assert')
+const {
+  isBlockComment,
+  isJSDocComment
+} = require('../../../lib/utils/comments.js')
+
+// //foo
+const lineCommentNode = {
+  type: 'Line',
+  value: 'foo'
+}
+
+// /*foo*/
+const blockCommentNodeWithoutAsterisks = {
+  type: 'Block',
+  value: 'foo'
+}
+
+// //** foo */
+const blockCommentNodeWithOneAsterisk = {
+  type: 'Block',
+  value: '* foo'
+}
+
+// /*** foo */
+const blockCommentNodeWithTwoAsterisks = {
+  type: 'Block',
+  value: '** foo'
+}
+
+describe('isJSDocComment()', () => {
+  it('returns true for JSDoc comments', () => {
+    assert.equal(isJSDocComment(blockCommentNodeWithOneAsterisk), true)
+  })
+
+  it('returns false for block comments', () => {
+    assert.equal(isJSDocComment(blockCommentNodeWithoutAsterisks), false)
+  })
+
+  it('returns false for line comments', () => {
+    assert.equal(isJSDocComment(lineCommentNode), false)
+  })
+
+  it('returns false for block comments with two asterisks', () => {
+    assert.equal(isJSDocComment(blockCommentNodeWithTwoAsterisks), false)
+  })
+})
+
+describe('isBlockComment()', () => {
+  it('returns false for JSDoc comments', () => {
+    assert.equal(isBlockComment(blockCommentNodeWithOneAsterisk), false)
+  })
+
+  it('returns true for block comments', () => {
+    assert.equal(isBlockComment(blockCommentNodeWithoutAsterisks), true)
+  })
+
+  it('returns false for line comments', () => {
+    assert.equal(isBlockComment(lineCommentNode), false)
+  })
+
+  it('returns true for block comments with two asterisks', () => {
+    assert.equal(isBlockComment(blockCommentNodeWithTwoAsterisks), true)
+  })
+})
diff --git a/tests/lib/utils/core-rules/wrap-core-rule.js b/tests/lib/utils/core-rules/wrap-core-rule.js
index 912957aa6..b07b17e9e 100644
--- a/tests/lib/utils/core-rules/wrap-core-rule.js
+++ b/tests/lib/utils/core-rules/wrap-core-rule.js
@@ -1,22 +1,18 @@
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../../eslint-compat').RuleTester
 const utils = require('../../../../lib/utils/index')
 
 const rule = utils.wrapCoreRule('foo')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
     ecmaVersion: 2020,
     sourceType: 'module'
   }
 })
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 tester.run('wrap-core-rule-with-unknown', rule, {
   valid: [
     {
diff --git a/tests/lib/utils/html-comments.js b/tests/lib/utils/html-comments.js
index 066c73eb1..69992b09d 100644
--- a/tests/lib/utils/html-comments.js
+++ b/tests/lib/utils/html-comments.js
@@ -4,7 +4,7 @@ const fs = require('fs')
 const path = require('path')
 const assert = require('assert')
 
-const Linter = require('eslint').Linter
+const Linter = require('../../eslint-compat').Linter
 
 const htmlComments = require('../../../lib/utils/html-comments')
 
@@ -37,17 +37,25 @@ function tokenize(code, option) {
   const linter = new Linter()
   const result = []
 
-  linter.defineRule('vue/html-comments-test', (content) =>
-    htmlComments.defineVisitor(content, option, (commentTokens) => {
-      result.push(commentTokens)
-    })
-  )
-  linter.defineParser('vue-eslint-parser', require('vue-eslint-parser'))
   linter.verify(
     code,
     {
-      parser: 'vue-eslint-parser',
-      parserOptions: { ecmaVersion: 2018 },
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ecmaVersion: 2018
+      },
+      plugins: {
+        vue: {
+          rules: {
+            'html-comments-test': {
+              create: (content) =>
+                htmlComments.defineVisitor(content, option, (commentTokens) => {
+                  result.push(commentTokens)
+                })
+            }
+          }
+        }
+      },
       rules: { 'vue/html-comments-test': 'error' }
     },
     undefined,
diff --git a/tests/lib/utils/index.js b/tests/lib/utils/index.js
index 9b02ba46b..6afecaeaa 100644
--- a/tests/lib/utils/index.js
+++ b/tests/lib/utils/index.js
@@ -367,9 +367,9 @@ describe('getComponentProps', () => {
 
     assert.equal(props.length, 5, 'it detects all props')
 
-    assert.strictEqual(props[0].key, null)
+    assert.strictEqual(props[0].key, undefined)
     assert.strictEqual(props[0].node.type, 'SpreadElement')
-    assert.strictEqual(props[0].value, null)
+    assert.strictEqual(props[0].value, undefined)
 
     assert.strictEqual(props[1].key.type, 'Identifier')
     assert.strictEqual(props[1].node.type, 'Property')
diff --git a/tests/lib/utils/ref-object-references.js b/tests/lib/utils/ref-object-references.js
new file mode 100644
index 000000000..68c526b36
--- /dev/null
+++ b/tests/lib/utils/ref-object-references.js
@@ -0,0 +1,202 @@
+'use strict'
+
+const fs = require('fs')
+const path = require('path')
+const assert = require('assert')
+const vueESLintParser = require('vue-eslint-parser')
+
+const Linter = require('../../eslint-compat').Linter
+
+const {
+  extractRefObjectReferences,
+  extractReactiveVariableReferences
+} = require('../../../lib/utils/ref-object-references')
+
+const FIXTURE_ROOT = path.resolve(
+  __dirname,
+  '../../fixtures/utils/ref-object-references'
+)
+const REF_OBJECTS_FIXTURE_ROOT = path.resolve(FIXTURE_ROOT, 'ref-objects')
+const REACTIVE_VARS_FIXTURE_ROOT = path.resolve(FIXTURE_ROOT, 'reactive-vars')
+
+/**
+ * @typedef {object} LoadedPattern
+ * @property {string} code The code to test.
+ * @property {string} name The name of the pattern.
+ * @property {string} sourceFilePath
+ * @property {string} resultFilePath
+ * @property {object} [options]
+ * @property {string} [options.parser]
+ */
+/**
+ * Load test patterns from fixtures.
+ *
+ * @returns {LoadedPattern[]} The loaded patterns.
+ */
+function loadPatterns(rootDir) {
+  return fs.readdirSync(rootDir).map((name) => {
+    for (const [sourceFile, resultFile, options] of [
+      ['source.js', 'result.js'],
+      [
+        'source.vue',
+        'result.vue',
+        { languageOptions: { parser: 'vue-eslint-parser' } }
+      ]
+    ]) {
+      const sourceFilePath = path.join(rootDir, name, sourceFile)
+      if (fs.existsSync(sourceFilePath)) {
+        return {
+          code: fs.readFileSync(sourceFilePath, 'utf8'),
+          name,
+          sourceFilePath,
+          resultFilePath: path.join(rootDir, name, resultFile),
+          options
+        }
+      }
+    }
+  })
+}
+
+function extractRefs(code, extract, options) {
+  const linter = new Linter()
+  const references = []
+
+  const messages = linter.verify(
+    code,
+    {
+      ...options,
+      plugins: {
+        vue: {
+          rules: {
+            'extract-test': {
+              create: (context) => {
+                const refs = extract(context)
+
+                const processed = new Set()
+                return {
+                  '*'(node) {
+                    if (processed.has(node)) {
+                      // Old ESLint may be called twice on the same node.
+                      return
+                    }
+                    processed.add(node)
+                    const data = refs.get(node)
+                    if (data) {
+                      references.push(data)
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      },
+      languageOptions: {
+        ...options?.languageOptions,
+        ...(options?.languageOptions?.parser === 'vue-eslint-parser'
+          ? { parser: vueESLintParser }
+          : {}),
+        ecmaVersion: 2020,
+        sourceType: 'module',
+        globals: {
+          $ref: 'readonly',
+          $computed: 'readonly',
+          $shallowRef: 'readonly',
+          $customRef: 'readonly',
+          $toRef: 'readonly',
+          $: 'readonly',
+          $$: 'readonly'
+        }
+      },
+      rules: { 'vue/extract-test': 'error' }
+    },
+    undefined,
+    true
+  )
+
+  const errors = messages.map((message) => message.message)
+  if (errors.length > 0) {
+    assert.fail(errors.join(','))
+  }
+
+  return references
+}
+
+describe('extractRefObjectReferences()', () => {
+  for (const { code, sourceFilePath, resultFilePath, options } of loadPatterns(
+    REF_OBJECTS_FIXTURE_ROOT
+  )) {
+    describe(sourceFilePath, () => {
+      it('should to extract the references to match the expected references.', () => {
+        /** @type {import('../../../lib/utils/ref-object-references').RefObjectReference[]} */
+        const references = [
+          ...extractRefs(code, extractRefObjectReferences, options)
+        ]
+
+        let result = ''
+        let start = 0
+        let ref
+        while ((ref = references.shift())) {
+          result += code.slice(start, ref.node.range[0])
+          result += `/*>*/`
+          result += code.slice(...ref.node.range)
+          result += `/*<${JSON.stringify({
+            type: ref.type,
+            method: ref.method
+          })}*/`
+          start = ref.node.range[1]
+        }
+        result += code.slice(start)
+
+        const actual = result
+
+        if (!fs.existsSync(resultFilePath)) {
+          // update fixture
+          fs.writeFileSync(resultFilePath, actual, 'utf8')
+        }
+
+        const expected = fs.readFileSync(resultFilePath, 'utf8')
+        assert.strictEqual(actual, expected)
+      })
+    })
+  }
+})
+describe('extractReactiveVariableReferences()', () => {
+  for (const { code, sourceFilePath, resultFilePath, options } of loadPatterns(
+    REACTIVE_VARS_FIXTURE_ROOT
+  )) {
+    describe(sourceFilePath, () => {
+      it('should to extract the references to match the expected references.', () => {
+        /** @type {import('../../../lib/utils/ref-object-references').ReactiveVariableReference[]} */
+        const references = [
+          ...extractRefs(code, extractReactiveVariableReferences, options)
+        ]
+
+        let result = ''
+        let start = 0
+        let ref
+        while ((ref = references.shift())) {
+          result += code.slice(start, ref.node.range[0])
+          result += `/*>*/`
+          result += code.slice(...ref.node.range)
+          result += `/*<${JSON.stringify({
+            escape: ref.escape,
+            method: ref.method
+          })}*/`
+          start = ref.node.range[1]
+        }
+        result += code.slice(start)
+
+        const actual = result
+
+        if (!fs.existsSync(resultFilePath)) {
+          // update fixture
+          fs.writeFileSync(resultFilePath, actual, 'utf8')
+        }
+
+        const expected = fs.readFileSync(resultFilePath, 'utf8')
+        assert.strictEqual(actual, expected)
+      })
+    })
+  }
+})
diff --git a/tests/lib/utils/regexp.js b/tests/lib/utils/regexp.js
index 830fa2a11..e27a0596f 100644
--- a/tests/lib/utils/regexp.js
+++ b/tests/lib/utils/regexp.js
@@ -1,6 +1,10 @@
 'use strict'
 
-const { escape, toRegExp } = require('../../../lib/utils/regexp')
+const {
+  escape,
+  toRegExp,
+  toRegExpGroupMatcher
+} = require('../../../lib/utils/regexp')
 const assert = require('assert')
 
 const ESCAPED = '\\^\\$\\.\\*\\+\\?\\(\\)\\[\\]\\{\\}\\|\\\\'
@@ -35,4 +39,120 @@ describe('toRegExp()', () => {
     assert.deepEqual(toRegExp(`${/^bar/i}`), /^bar/i)
     assert.deepEqual(toRegExp(`${/[\sA-Z]+/u}`), /[\sA-Z]+/u)
   })
+
+  it('should handle simple patterns', () => {
+    const regex = toRegExp('foo')
+    assert.strictEqual(regex.test('foo'), true)
+    assert.strictEqual(regex.test('bar'), false)
+    assert.strictEqual(regex.test('foobar'), false)
+    assert.strictEqual(regex.test('afoo'), false)
+    assert.strictEqual(regex.test('afoobar'), false)
+    assert.strictEqual(regex.test('Foo'), false)
+  })
+
+  it('should handle simple patterns with added flags', () => {
+    const regex = toRegExp('foo', { add: 'i' })
+    assert.strictEqual(regex.test('foo'), true)
+    assert.strictEqual(regex.test('bar'), false)
+    assert.strictEqual(regex.test('foobar'), false)
+    assert.strictEqual(regex.test('afoo'), false)
+    assert.strictEqual(regex.test('afoobar'), false)
+    assert.strictEqual(regex.test('Foo'), true)
+  })
+
+  it('should handle regexp patterns', () => {
+    const regex = toRegExp('/^foo/')
+    assert.strictEqual(regex.test('foo'), true)
+    assert.strictEqual(regex.test('bar'), false)
+    assert.strictEqual(regex.test('foobar'), true)
+    assert.strictEqual(regex.test('afoo'), false)
+    assert.strictEqual(regex.test('afoobar'), false)
+    assert.strictEqual(regex.test('Foo'), false)
+  })
+
+  it('should handle regexp patterns with attached flags', () => {
+    const regex = toRegExp('/^foo/i')
+    assert.strictEqual(regex.test('foo'), true)
+    assert.strictEqual(regex.test('bar'), false)
+    assert.strictEqual(regex.test('foobar'), true)
+    assert.strictEqual(regex.test('afoo'), false)
+    assert.strictEqual(regex.test('afoobar'), false)
+    assert.strictEqual(regex.test('Foo'), true)
+  })
+
+  it('should handle regexp patterns with added flags', () => {
+    const regex = toRegExp('/^foo/', { add: 'i' })
+    assert.deepEqual(regex, /^foo/i)
+    assert.strictEqual(regex.test('foo'), true)
+    assert.strictEqual(regex.test('bar'), false)
+    assert.strictEqual(regex.test('foobar'), true)
+    assert.strictEqual(regex.test('afoo'), false)
+    assert.strictEqual(regex.test('afoobar'), false)
+    assert.strictEqual(regex.test('Foo'), true)
+  })
+
+  it('should handle regexp patterns with removed flags', () => {
+    const regex = toRegExp('/^foo/i', { remove: 'i' })
+    assert.deepEqual(regex, /^foo/)
+    assert.strictEqual(regex.test('foo'), true)
+    assert.strictEqual(regex.test('bar'), false)
+    assert.strictEqual(regex.test('foobar'), true)
+    assert.strictEqual(regex.test('afoo'), false)
+    assert.strictEqual(regex.test('afoobar'), false)
+    assert.strictEqual(regex.test('Foo'), false)
+  })
+})
+
+describe('toRegExpGroupMatcher()', () => {
+  it('should return a function missing input', () => {
+    const groupMatcher = toRegExpGroupMatcher()
+    assert.strictEqual(groupMatcher(''), false)
+    assert.strictEqual(groupMatcher('foo'), false)
+    assert.strictEqual(groupMatcher('bar'), false)
+  })
+
+  it('should return a function for empty array', () => {
+    const groupMatcher = toRegExpGroupMatcher([])
+    assert.strictEqual(groupMatcher(''), false)
+    assert.strictEqual(groupMatcher('foo'), false)
+    assert.strictEqual(groupMatcher('bar'), false)
+  })
+
+  it('should return a function for single simple pattern', () => {
+    const groupMatcher = toRegExpGroupMatcher(['foo'])
+    assert.strictEqual(groupMatcher(''), false)
+    assert.strictEqual(groupMatcher('foo'), true)
+    assert.strictEqual(groupMatcher('foo', 'early'), true)
+    assert.strictEqual(groupMatcher('late', 'matches', 'foo'), true)
+    assert.strictEqual(groupMatcher('foobar'), false)
+    assert.strictEqual(groupMatcher('afoo', 'fooa', 'afooa', 'bar'), false)
+  })
+
+  it('should return a function for multiple simple patterns', () => {
+    const groupMatcher = toRegExpGroupMatcher(['foo', 'bar'])
+    assert.strictEqual(groupMatcher('foo'), true)
+    assert.strictEqual(groupMatcher('bar', 'early'), true)
+    assert.strictEqual(groupMatcher('late', 'matches', 'foo'), true)
+    assert.strictEqual(groupMatcher('foobar'), false)
+    assert.strictEqual(groupMatcher('afoo', 'fooa', 'afooa'), false)
+  })
+
+  it('should return a function for single regexp pattern', () => {
+    const groupMatcher = toRegExpGroupMatcher(['/^foo/g'])
+    assert.strictEqual(groupMatcher(''), false)
+    assert.strictEqual(groupMatcher('foo'), true)
+    assert.strictEqual(groupMatcher('fooa', 'early'), true)
+    assert.strictEqual(groupMatcher('late', 'matches', 'fooa'), true)
+    assert.strictEqual(groupMatcher('barfoo'), false)
+    assert.strictEqual(groupMatcher('afoo', 'afooa', 'bar'), false)
+  })
+
+  it('should return a function for multiple regexp patterns', () => {
+    const groupMatcher = toRegExpGroupMatcher(['/^foo/', '/bar$/gi'])
+    assert.strictEqual(groupMatcher('foo'), true)
+    assert.strictEqual(groupMatcher('Bar', 'early'), true)
+    assert.strictEqual(groupMatcher('late', 'matches', 'foo'), true)
+    assert.strictEqual(groupMatcher('barfoo'), false)
+    assert.strictEqual(groupMatcher('afoo', 'afooa', 'bara'), false)
+  })
 })
diff --git a/tests/lib/utils/selector.js b/tests/lib/utils/selector.js
index 6677a9fa4..4fff7cfa9 100644
--- a/tests/lib/utils/selector.js
+++ b/tests/lib/utils/selector.js
@@ -4,7 +4,7 @@ const fs = require('fs')
 const path = require('path')
 const assert = require('assert')
 
-const Linter = require('eslint').Linter
+const Linter = require('../../eslint-compat').Linter
 
 const selector = require('../../../lib/utils/selector')
 const utils = require('../../../lib/utils')
@@ -32,24 +32,33 @@ function extractElements(code, inputSelector) {
   const linter = new Linter()
   const matches = []
 
-  linter.defineRule('vue/selector-test', (context) => {
-    const parsed = selector.parseSelector(inputSelector, context)
-    return utils.defineDocumentVisitor(context, {
-      VElement(node) {
-        if (parsed.test(node)) {
-          matches.push(
-            context.getSourceCode().text.slice(...node.startTag.range)
-          )
-        }
-      }
-    })
-  })
-  linter.defineParser('vue-eslint-parser', require('vue-eslint-parser'))
   const messages = linter.verify(
     code,
     {
-      parser: 'vue-eslint-parser',
-      parserOptions: { ecmaVersion: 2018 },
+      plugins: {
+        vue: {
+          rules: {
+            'selector-test': {
+              create: (context) => {
+                const parsed = selector.parseSelector(inputSelector, context)
+                return utils.defineDocumentVisitor(context, {
+                  VElement(node) {
+                    if (parsed.test(node)) {
+                      matches.push(
+                        context.sourceCode.text.slice(...node.startTag.range)
+                      )
+                    }
+                  }
+                })
+              }
+            }
+          }
+        }
+      },
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ecmaVersion: 2018
+      },
       rules: { 'vue/selector-test': 'error' }
     },
     undefined,
diff --git a/tests/lib/utils/ts-utils/index/get-component-emits.js b/tests/lib/utils/ts-utils/index/get-component-emits.js
new file mode 100644
index 000000000..8c9d5d34c
--- /dev/null
+++ b/tests/lib/utils/ts-utils/index/get-component-emits.js
@@ -0,0 +1,127 @@
+/**
+ * Test for getComponentEmitsFromTypeDefineTypes
+ */
+'use strict'
+
+const path = require('path')
+const fs = require('fs')
+const Linter = require('../../../../eslint-compat').Linter
+const parser = require('vue-eslint-parser')
+const tsParser = require('@typescript-eslint/parser')
+const utils = require('../../../../../lib/utils/index')
+const assert = require('assert')
+
+const FIXTURES_ROOT = path.resolve(
+  __dirname,
+  '../../../../fixtures/utils/ts-utils'
+)
+const TSCONFIG_PATH = path.resolve(FIXTURES_ROOT, './tsconfig.json')
+const SRC_TS_TEST_PATH = path.join(FIXTURES_ROOT, './src/test.ts')
+
+function extractComponentProps(code, tsFileCode) {
+  const linter = new Linter()
+  const result = []
+  const config = {
+    files: ['**/*.vue'],
+    languageOptions: {
+      parser,
+      ecmaVersion: 2020,
+      parserOptions: {
+        parser: tsParser,
+        project: [TSCONFIG_PATH],
+        extraFileExtensions: ['.vue']
+      }
+    },
+    plugins: {
+      test: {
+        rules: {
+          test: {
+            create(context) {
+              return utils.defineScriptSetupVisitor(context, {
+                onDefineEmitsEnter(_node, emits) {
+                  result.push(
+                    ...emits.map((emit) => ({
+                      type: emit.type,
+                      name: emit.emitName
+                    }))
+                  )
+                }
+              })
+            }
+          }
+        }
+      }
+    },
+    rules: {
+      'test/test': 'error'
+    }
+  }
+  fs.writeFileSync(SRC_TS_TEST_PATH, tsFileCode || '', 'utf8')
+  // clean './src/test.ts' cache
+  tsParser.clearCaches()
+  assert.deepStrictEqual(
+    linter.verify(code, config, path.join(FIXTURES_ROOT, './src/test.vue')),
+    []
+  )
+  // reset
+  fs.writeFileSync(SRC_TS_TEST_PATH, '', 'utf8')
+  return result
+}
+
+describe('getComponentEmitsFromTypeDefineTypes', () => {
+  for (const { scriptCode, tsFileCode, props: expected } of [
+    {
+      scriptCode: `defineEmits<{(e:'foo'):void,(e:'bar'):void}>()`,
+      props: [
+        { type: 'type', name: 'foo' },
+        { type: 'type', name: 'bar' }
+      ]
+    },
+    {
+      tsFileCode: `export type Emits = {(e:'foo'):void,(e:'bar'):void}`,
+      scriptCode: `import { Emits } from './test'
+      defineEmits<Emits>()`,
+      props: [
+        { type: 'infer-type', name: 'foo' },
+        { type: 'infer-type', name: 'bar' }
+      ]
+    },
+    {
+      tsFileCode: `export type Emits = any`,
+      scriptCode: `import { Emits } from './test'
+      defineEmits<Emits>()`,
+      props: [{ type: 'unknown', name: null }]
+    },
+    {
+      tsFileCode: `export type Emits = {(e:'foo' | 'bar'): void, (e:'baz',payload:number): void}`,
+      scriptCode: `import { Emits } from './test'
+      defineEmits<Emits>()`,
+      props: [
+        { type: 'infer-type', name: 'foo' },
+        { type: 'infer-type', name: 'bar' },
+        { type: 'infer-type', name: 'baz' }
+      ]
+    },
+    {
+      tsFileCode: `export type Emits = { a: [], b: [number], c: [string]}`,
+      scriptCode: `import { Emits } from './test'
+      defineEmits<Emits>()`,
+      props: [
+        { type: 'infer-type', name: 'a' },
+        { type: 'infer-type', name: 'b' },
+        { type: 'infer-type', name: 'c' }
+      ]
+    }
+  ]) {
+    const code = `<script setup lang="ts"> ${scriptCode} </script>`
+    it(`should return expected props with :${code}`, () => {
+      const props = extractComponentProps(code, tsFileCode)
+
+      assert.deepStrictEqual(
+        props,
+        expected,
+        `\n${JSON.stringify(props)}\n === \n${JSON.stringify(expected)}`
+      )
+    })
+  }
+})
diff --git a/tests/lib/utils/ts-utils/index/get-component-props.js b/tests/lib/utils/ts-utils/index/get-component-props.js
new file mode 100644
index 000000000..100d0a18c
--- /dev/null
+++ b/tests/lib/utils/ts-utils/index/get-component-props.js
@@ -0,0 +1,218 @@
+/**
+ * Test for getComponentPropsFromTypeDefineTypes
+ */
+'use strict'
+
+const path = require('path')
+const fs = require('fs')
+const Linter = require('../../../../eslint-compat').Linter
+const parser = require('vue-eslint-parser')
+const tsParser = require('@typescript-eslint/parser')
+const utils = require('../../../../../lib/utils/index')
+const assert = require('assert')
+
+const FIXTURES_ROOT = path.resolve(
+  __dirname,
+  '../../../../fixtures/utils/ts-utils'
+)
+const TSCONFIG_PATH = path.resolve(FIXTURES_ROOT, './tsconfig.json')
+const SRC_TS_TEST_PATH = path.join(FIXTURES_ROOT, './src/test.ts')
+
+function extractComponentProps(code, tsFileCode) {
+  const linter = new Linter()
+  const result = []
+  const config = {
+    files: ['**/*.vue'],
+    languageOptions: {
+      parser,
+      ecmaVersion: 2020,
+      parserOptions: {
+        parser: tsParser,
+        project: [TSCONFIG_PATH],
+        extraFileExtensions: ['.vue']
+      }
+    },
+    plugins: {
+      test: {
+        rules: {
+          test: {
+            create(context) {
+              return utils.defineScriptSetupVisitor(context, {
+                onDefinePropsEnter(_node, props) {
+                  result.push(
+                    ...props.map((prop) => ({
+                      type: prop.type,
+                      name: prop.propName,
+                      required: prop.required ?? null,
+                      types: prop.types ?? null
+                    }))
+                  )
+                }
+              })
+            }
+          }
+        }
+      }
+    },
+    rules: {
+      'test/test': 'error'
+    }
+  }
+  fs.writeFileSync(SRC_TS_TEST_PATH, tsFileCode || '', 'utf8')
+  // clean './src/test.ts' cache
+  tsParser.clearCaches()
+  assert.deepStrictEqual(
+    linter.verify(code, config, path.join(FIXTURES_ROOT, './src/test.vue')),
+    []
+  )
+  // reset
+  fs.writeFileSync(SRC_TS_TEST_PATH, '', 'utf8')
+  return result
+}
+
+describe('getComponentPropsFromTypeDefineTypes', () => {
+  for (const { scriptCode, tsFileCode, props: expected } of [
+    {
+      scriptCode: `defineProps<{foo:string,bar?:number}>()`,
+      props: [
+        { type: 'type', name: 'foo', required: true, types: ['String'] },
+        { type: 'type', name: 'bar', required: false, types: ['Number'] }
+      ]
+    },
+    {
+      scriptCode: `defineProps<{foo:string,bar?:number} & {baz?:string|number}>()`,
+      props: [
+        { type: 'type', name: 'foo', required: true, types: ['String'] },
+        { type: 'type', name: 'bar', required: false, types: ['Number'] },
+        {
+          type: 'type',
+          name: 'baz',
+          required: false,
+          types: ['String', 'Number']
+        }
+      ]
+    },
+    {
+      tsFileCode: `export type Props = {foo:string,bar?:number}`,
+      scriptCode: `import { Props } from './test'
+      defineProps<Props>()`,
+      props: [
+        { type: 'infer-type', name: 'foo', required: true, types: ['String'] },
+        { type: 'infer-type', name: 'bar', required: false, types: ['Number'] }
+      ]
+    },
+    {
+      tsFileCode: `export type Props = any`,
+      scriptCode: `import { Props } from './test'
+      defineProps<Props>()`,
+      props: [{ type: 'unknown', name: null, required: null, types: null }]
+    },
+    {
+      tsFileCode: `
+      interface Props {
+        a?: number;
+        b?: string;
+      }
+      export interface Props2 extends Required<Props> {
+        c?: boolean;
+      }`,
+      scriptCode: `import { Props2 } from './test'
+      defineProps<Props2>()`,
+      props: [
+        { type: 'infer-type', name: 'c', required: false, types: ['Boolean'] },
+        { type: 'infer-type', name: 'a', required: true, types: ['Number'] },
+        { type: 'infer-type', name: 'b', required: true, types: ['String'] }
+      ]
+    },
+    {
+      tsFileCode: `
+      export type Props = {
+        a: string
+        b?: number
+        c?: boolean
+        d?: boolean
+        e?: number | string
+        f?: () => number
+        g?: { foo?: string }
+        h?: string[]
+        i?: readonly string[]
+      }`,
+      scriptCode: `import { Props } from './test'
+      defineProps<Props>()`,
+      props: [
+        { type: 'infer-type', name: 'a', required: true, types: ['String'] },
+        { type: 'infer-type', name: 'b', required: false, types: ['Number'] },
+        { type: 'infer-type', name: 'c', required: false, types: ['Boolean'] },
+        { type: 'infer-type', name: 'd', required: false, types: ['Boolean'] },
+        {
+          type: 'infer-type',
+          name: 'e',
+          required: false,
+          types: ['String', 'Number']
+        },
+        { type: 'infer-type', name: 'f', required: false, types: ['Function'] },
+        { type: 'infer-type', name: 'g', required: false, types: ['Object'] },
+        { type: 'infer-type', name: 'h', required: false, types: ['Array'] },
+        { type: 'infer-type', name: 'i', required: false, types: ['Array'] }
+      ]
+    },
+    {
+      tsFileCode: `
+      export interface Props {
+        a?: number;
+        b?: string;
+      }`,
+      scriptCode: `import { Props } from './test'
+defineProps<Props & {foo?:string}>()`,
+      props: [
+        { type: 'infer-type', name: 'a', required: false, types: ['Number'] },
+        { type: 'infer-type', name: 'b', required: false, types: ['String'] },
+        { type: 'type', name: 'foo', required: false, types: ['String'] }
+      ]
+    },
+    {
+      tsFileCode: `
+      export type A = string | number`,
+      scriptCode: `import { A } from './test'
+defineProps<{foo?:A}>()`,
+      props: [
+        {
+          type: 'type',
+          name: 'foo',
+          required: false,
+          types: ['String', 'Number']
+        }
+      ]
+    },
+    {
+      scriptCode: `enum A {a = 'a', b = 'b'}
+defineProps<{foo?:A}>()`,
+      props: [{ type: 'type', name: 'foo', required: false, types: ['String'] }]
+    },
+    {
+      scriptCode: `
+const foo = 42
+enum A {a = foo, b = 'b'}
+defineProps<{foo?:A}>()`,
+      props: [
+        {
+          type: 'type',
+          name: 'foo',
+          required: false,
+          types: ['Number', 'String']
+        }
+      ]
+    }
+  ]) {
+    const code = `<script setup lang="ts"> ${scriptCode} </script>`
+    it(`should return expected props with :${code}`, () => {
+      const props = extractComponentProps(code, tsFileCode)
+
+      assert.deepStrictEqual(
+        props,
+        expected,
+        `\n${JSON.stringify(props)}\n === \n${JSON.stringify(expected)}`
+      )
+    })
+  }
+})
diff --git a/tests/lib/utils/ts-utils/index/get-component-slots.js b/tests/lib/utils/ts-utils/index/get-component-slots.js
new file mode 100644
index 000000000..410021b93
--- /dev/null
+++ b/tests/lib/utils/ts-utils/index/get-component-slots.js
@@ -0,0 +1,115 @@
+/**
+ * Test for getComponentSlotsFromTypeDefineTypes
+ */
+'use strict'
+
+const path = require('path')
+const fs = require('fs')
+const Linter = require('../../../../eslint-compat').Linter
+const parser = require('vue-eslint-parser')
+const tsParser = require('@typescript-eslint/parser')
+const utils = require('../../../../../lib/utils/index')
+const assert = require('assert')
+
+const FIXTURES_ROOT = path.resolve(
+  __dirname,
+  '../../../../fixtures/utils/ts-utils'
+)
+const TSCONFIG_PATH = path.resolve(FIXTURES_ROOT, './tsconfig.json')
+const SRC_TS_TEST_PATH = path.join(FIXTURES_ROOT, './src/test.ts')
+
+function extractComponentSlots(code, tsFileCode) {
+  const linter = new Linter()
+  const result = []
+  const config = {
+    files: ['**/*.vue'],
+    languageOptions: {
+      parser,
+      ecmaVersion: 2020,
+      parserOptions: {
+        parser: tsParser,
+        project: [TSCONFIG_PATH],
+        extraFileExtensions: ['.vue']
+      }
+    },
+    plugins: {
+      test: {
+        rules: {
+          test: {
+            create(context) {
+              return utils.defineScriptSetupVisitor(context, {
+                onDefineSlotsEnter(_node, slots) {
+                  result.push(
+                    ...slots.map((prop) => ({
+                      type: prop.type,
+                      name: prop.slotName
+                    }))
+                  )
+                }
+              })
+            }
+          }
+        }
+      }
+    },
+    rules: {
+      'test/test': 'error'
+    }
+  }
+  fs.writeFileSync(SRC_TS_TEST_PATH, tsFileCode || '', 'utf8')
+  // clean './src/test.ts' cache
+  tsParser.clearCaches()
+  assert.deepStrictEqual(
+    linter.verify(code, config, path.join(FIXTURES_ROOT, './src/test.vue')),
+    []
+  )
+  // reset
+  fs.writeFileSync(SRC_TS_TEST_PATH, '', 'utf8')
+  return result
+}
+
+describe('getComponentSlotsFromTypeDefineTypes', () => {
+  for (const { scriptCode, tsFileCode, slots: expected } of [
+    {
+      scriptCode: `
+        defineSlots<{
+          default(props: { msg: string }): any
+        }>()
+      `,
+      slots: [{ type: 'type', name: 'default' }]
+    },
+    {
+      scriptCode: `
+        interface Slots {
+          default(props: { msg: string }): any
+        }
+        defineSlots<Slots>()
+      `,
+      slots: [{ type: 'type', name: 'default' }]
+    },
+    {
+      scriptCode: `
+        type Slots = {
+          default(props: { msg: string }): any
+        }
+        defineSlots<Slots>()
+      `,
+      slots: [{ type: 'type', name: 'default' }]
+    }
+  ]) {
+    const code = `
+      <script setup lang="ts">
+      ${scriptCode}
+      </script>
+    `
+    it(`should return expected slots with :${code}`, () => {
+      const slots = extractComponentSlots(code, tsFileCode)
+
+      assert.deepStrictEqual(
+        slots,
+        expected,
+        `\n${JSON.stringify(slots)}\n === \n${JSON.stringify(expected)}`
+      )
+    })
+  }
+})
diff --git a/tests/lib/utils/vue-component.js b/tests/lib/utils/vue-component.js
index c2fb7aaf5..f2cce4331 100644
--- a/tests/lib/utils/vue-component.js
+++ b/tests/lib/utils/vue-component.js
@@ -5,10 +5,6 @@
 
 const utils = require('../../../lib/utils/index')
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const rule = {
   create(context) {
     return utils.executeOnVueComponent(context, (obj) => {
@@ -24,17 +20,19 @@ const rule = {
   }
 }
 
-const RuleTester = require('eslint').RuleTester
-const parserOptions = {
+const RuleTester = require('../../eslint-compat').RuleTester
+const languageOptions = {
   ecmaVersion: 6,
   sourceType: 'module'
 }
 
-function makeError(line) {
+function makeError(line, column, endLine, endColumn) {
   return {
     message: 'Component detected.',
     line,
-    type: 'ObjectExpression'
+    column,
+    endLine,
+    endColumn
   }
 }
 
@@ -43,77 +41,83 @@ function validTests(ext) {
     {
       filename: `test.${ext}`,
       code: `export const foo = {}`,
-      parserOptions
+      languageOptions
     },
     {
       filename: `test.${ext}`,
       code: `export var foo = {}`,
-      parserOptions
+      languageOptions
     },
     {
       filename: `test.${ext}`,
       code: `const foo = {}`,
-      parserOptions
+      languageOptions
     },
     {
       filename: `test.${ext}`,
       code: `var foo = {}`,
-      parserOptions
+      languageOptions
     },
     {
       filename: `test.${ext}`,
       code: `let foo = {}`,
-      parserOptions
+      languageOptions
     },
     {
       filename: `test.${ext}`,
       code: `foo({ })`,
-      parserOptions
+      languageOptions
     },
     {
       filename: `test.${ext}`,
       code: `foo(() => { return {} })`,
-      parserOptions
+      languageOptions
     },
     {
       filename: `test.${ext}`,
       code: `Vue.component('async-example', function (resolve, reject) { })`,
-      parserOptions
+      languageOptions
     },
     {
       filename: `test.${ext}`,
       code: `Vue.component('async-example', function (resolve, reject) { resolve({}) })`,
-      parserOptions
+      languageOptions
     },
     {
       filename: `test.${ext}`,
       code: `new Vue({ })`,
-      parserOptions
+      languageOptions
     },
     {
       filename: `test.${ext}`,
       code: `{
         foo: {}
       }`,
-      parserOptions
+      languageOptions
     },
     {
       filename: `test.${ext}`,
       code: `export default (Foo as FooConstructor<Foo>).extend({})`,
-      parser: require.resolve('@typescript-eslint/parser'),
-      parserOptions
+      languageOptions: {
+        ...languageOptions,
+        parser: require('@typescript-eslint/parser')
+      }
     },
     {
       filename: `test.${ext}`,
       code: `export default Foo.extend({})`,
-      parser: require.resolve('@typescript-eslint/parser'),
-      parserOptions
+      languageOptions: {
+        ...languageOptions,
+        parser: require('@typescript-eslint/parser')
+      }
     },
     {
       filename: `test.${ext}`,
       code: `export default Foo.extend({} as ComponentOptions)`,
-      parser: require.resolve('@typescript-eslint/parser'),
-      parserOptions
+      languageOptions: {
+        ...languageOptions,
+        parser: require('@typescript-eslint/parser')
+      }
     }
   ]
 }
@@ -129,65 +133,71 @@ function invalidTests(ext) {
         })
         // ${ext}
       `,
-      parserOptions,
-      errors: [makeError(4)]
+      languageOptions,
+      errors: [makeError(4, 19, 4, 21)]
     },
     {
       filename: `test.${ext}`,
       code: `Vue.component({})`,
-      parserOptions,
-      errors: [makeError(1)]
+      languageOptions,
+      errors: [makeError(1, 15, 1, 17)]
     },
     {
       filename: `test.${ext}`,
       code: `Vue.mixin({})`,
-      parserOptions,
-      errors: [makeError(1)]
+      languageOptions,
+      errors: [makeError(1, 11, 1, 13)]
     },
     {
       filename: `test.${ext}`,
       code: `Vue.extend({})`,
-      parserOptions,
-      errors: [makeError(1)]
+      languageOptions,
+      errors: [makeError(1, 12, 1, 14)]
     },
     {
       filename: `test.${ext}`,
       code: `app.component('name', {})`,
-      parserOptions,
-      errors: [makeError(1)]
+      languageOptions,
+      errors: [makeError(1, 23, 1, 25)]
     },
     {
       filename: `test.${ext}`,
       code: `app.mixin({})`,
-      parserOptions,
-      errors: [makeError(1)]
+      languageOptions,
+      errors: [makeError(1, 11, 1, 13)]
     },
     {
       filename: `test.${ext}`,
       code: `export default (Vue as VueConstructor<Vue>).extend({})`,
-      parser: require.resolve('@typescript-eslint/parser'),
-      parserOptions,
-      errors: [makeError(1)]
+      languageOptions: {
+        ...languageOptions,
+        parser: require('@typescript-eslint/parser')
+      },
+      errors: [makeError(1, 52, 1, 54)]
     },
     {
       filename: `test.${ext}`,
       code: `export default Vue.extend({})`,
-      parser: require.resolve('@typescript-eslint/parser'),
-      parserOptions,
-      errors: [makeError(1)]
+      languageOptions: {
+        ...languageOptions,
+        parser: require('@typescript-eslint/parser')
+      },
+      errors: [makeError(1, 27, 1, 29)]
     },
     {
       filename: `test.${ext}`,
       code: `export default Vue.extend({} as ComponentOptions)`,
-      parser: require.resolve('@typescript-eslint/parser'),
-      parserOptions,
-      errors: [makeError(1)]
+      languageOptions: {
+        ...languageOptions,
+        parser: require('@typescript-eslint/parser')
+      },
+      errors: [makeError(1, 27, 1, 29)]
     },
     {
       filename: `test.${ext}`,
       code: `createApp({})`,
-      parserOptions,
-      errors: [makeError(1)]
+      languageOptions,
+      errors: [makeError(1, 11, 1, 13)]
     },
     {
       filename: `test.${ext}`,
@@ -196,8 +206,8 @@ function invalidTests(ext) {
         export default { }
         // ${ext}
       `,
-      parserOptions,
-      errors: [makeError(3)]
+      languageOptions,
+      errors: [makeError(3, 24, 3, 27)]
     },
     {
       filename: `test.${ext}`,
@@ -206,8 +216,8 @@ function invalidTests(ext) {
         export default { }
         // ${ext}
       `,
-      parserOptions,
-      errors: [makeError(3)]
+      languageOptions,
+      errors: [makeError(3, 24, 3, 27)]
     },
     {
       filename: `test.${ext}`,
@@ -219,8 +229,8 @@ function invalidTests(ext) {
         export default { }
         // ${ext}
       `,
-      parserOptions,
-      errors: [makeError(6)]
+      languageOptions,
+      errors: [makeError(6, 24, 6, 27)]
     },
     {
       filename: `test.${ext}`,
@@ -231,8 +241,8 @@ function invalidTests(ext) {
         export var a = { }
         // ${ext}
       `,
-      parserOptions,
-      errors: [makeError(3), makeError(5)]
+      languageOptions,
+      errors: [makeError(3, 24, 3, 27), makeError(5, 24, 5, 27)]
     },
     {
       filename: `test.${ext}`,
@@ -243,8 +253,8 @@ function invalidTests(ext) {
         export default { }
         // ${ext}
       `,
-      parserOptions,
-      errors: [makeError(3), makeError(5)]
+      languageOptions,
+      errors: [makeError(3, 28, 3, 31), makeError(5, 24, 5, 27)]
     },
     {
       filename: `test.${ext}`,
@@ -254,8 +264,11 @@ function invalidTests(ext) {
         export let foo = { }
         // ${ext}
       `,
-      parserOptions,
-      errors: [...(ext === 'js' ? [] : [makeError(2)]), makeError(4)]
+      languageOptions,
+      errors: [
+        ...(ext === 'js' ? [] : [makeError(2, 24, 2, 27)]),
+        makeError(4, 26, 4, 29)
+      ]
     },
     {
       filename: `test.${ext}`,
@@ -265,8 +278,8 @@ function invalidTests(ext) {
         export let bar = { }
         // ${ext}
       `,
-      parserOptions,
-      errors: [makeError(4)]
+      languageOptions,
+      errors: [makeError(4, 26, 4, 29)]
     },
     {
       filename: `test.${ext}`,
@@ -277,8 +290,8 @@ function invalidTests(ext) {
         bar({ })
         // ${ext}
       `,
-      parserOptions,
-      errors: [makeError(4)]
+      languageOptions,
+      errors: [makeError(4, 13, 4, 16)]
     },
     {
       filename: `test.${ext}`,
@@ -292,8 +305,11 @@ function invalidTests(ext) {
         bar({ })
         // ${ext}
       `,
-      parserOptions,
-      errors: [...(ext === 'js' ? [] : [makeError(3)]), makeError(6)]
+      languageOptions,
+      errors: [
+        ...(ext === 'js' ? [] : [makeError(3, 24, 7, 10)]),
+        makeError(6, 16, 6, 19)
+      ]
     },
     {
       filename: `test.${ext}`,
@@ -309,49 +325,56 @@ function invalidTests(ext) {
         }
         // ${ext}
       `,
-      parserOptions,
-      errors: [...(ext === 'js' ? [] : [makeError(2)]), makeError(8)]
+      languageOptions,
+      errors: [
+        ...(ext === 'js' ? [] : [makeError(2, 24, 10, 10)]),
+        makeError(8, 20, 8, 22)
+      ]
     },
     {
       filename: `test.${ext}`,
       code: `export default defineComponent({})`,
-      parserOptions,
-      errors: [makeError(1)]
+      languageOptions,
+      errors: [makeError(1, 32, 1, 34)]
+    },
+    {
+      filename: `test.${ext}`,
+      code: `export default defineNuxtComponent({})`,
+      languageOptions,
+      errors: [makeError(1, 36, 1, 38)]
     }
   ]
 }
 
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
 const ruleTester = new RuleTester()
 ruleTester.run('vue-component', rule, {
   valid: [
     {
       filename: 'test.js',
       code: `export default { }`,
-      parserOptions
+      languageOptions
     },
     ...validTests('js'),
     ...validTests('jsx'),
+    ...validTests('tsx'),
     ...validTests('vue')
   ],
   invalid: [
     {
       filename: 'test.vue',
       code: `export default { }`,
-      parserOptions,
-      errors: [makeError(1)]
+      languageOptions,
+      errors: [makeError(1, 16, 1, 19)]
     },
     {
       filename: 'test.jsx',
       code: `export default { }`,
-      parserOptions,
-      errors: [makeError(1)]
+      languageOptions,
+      errors: [makeError(1, 16, 1, 19)]
     },
     ...invalidTests('js'),
     ...invalidTests('jsx'),
+    ...invalidTests('tsx'),
     ...invalidTests('vue')
   ]
 })
diff --git a/tests/test-utils/eslint-stylistic.js b/tests/test-utils/eslint-stylistic.js
new file mode 100644
index 000000000..81fc774f3
--- /dev/null
+++ b/tests/test-utils/eslint-stylistic.js
@@ -0,0 +1,16 @@
+const { existsSync, readFileSync } = require('node:fs')
+const path = require('node:path')
+
+const eslintStylisticPackagePath = path.join(
+  __dirname,
+  '../..',
+  'node_modules',
+  '@stylistic',
+  'eslint-plugin',
+  'package.json'
+)
+const eslintStylisticVersion = existsSync(eslintStylisticPackagePath)
+  ? JSON.parse(readFileSync(eslintStylisticPackagePath, 'utf8')).version
+  : undefined
+
+module.exports = { eslintStylisticVersion }
diff --git a/tests/test-utils/typescript.js b/tests/test-utils/typescript.js
new file mode 100644
index 000000000..0c6bbd437
--- /dev/null
+++ b/tests/test-utils/typescript.js
@@ -0,0 +1,28 @@
+const path = require('path')
+const tsParser = require('@typescript-eslint/parser')
+
+const FIXTURES_ROOT = path.resolve(__dirname, '../fixtures/typescript')
+const TSCONFIG_PATH = path.resolve(FIXTURES_ROOT, './tsconfig.json')
+const SRC_VUE_TEST_PATH = path.join(FIXTURES_ROOT, './src/test.vue')
+
+module.exports = {
+  getTypeScriptFixtureTestOptions
+}
+
+function getTypeScriptFixtureTestOptions() {
+  const parser = require('vue-eslint-parser')
+  const languageOptions = {
+    parser,
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    parserOptions: {
+      parser: { ts: tsParser },
+      project: [TSCONFIG_PATH],
+      extraFileExtensions: ['.vue']
+    }
+  }
+  return {
+    languageOptions,
+    filename: SRC_VUE_TEST_PATH
+  }
+}
diff --git a/tools/generate-typegen.mjs b/tools/generate-typegen.mjs
new file mode 100644
index 000000000..1f3b4a129
--- /dev/null
+++ b/tools/generate-typegen.mjs
@@ -0,0 +1,14 @@
+import fs from 'node:fs/promises'
+import { pluginsToRulesDTS } from 'eslint-typegen/core'
+import plugin from '../lib/index.js'
+
+const dts = await pluginsToRulesDTS(
+  {
+    vue: plugin
+  },
+  {
+    includeAugmentation: false
+  }
+)
+
+await fs.writeFile('lib/eslint-typegen.d.ts', dts)
diff --git a/tools/lib/categories.js b/tools/lib/categories.js
index 1d8550fb3..b0a01aa7d 100644
--- a/tools/lib/categories.js
+++ b/tools/lib/categories.js
@@ -9,48 +9,31 @@ const rules = require('./rules')
 
 const categoryTitles = {
   base: {
-    text: 'Base Rules (Enabling Correct ESLint Parsing)',
-    vuepress: 'Base Rules (Enabling Correct ESLint Parsing)'
+    text: 'Base Rules (Enabling Correct ESLint Parsing)'
   },
   'vue3-essential': {
-    text: 'Priority A: Essential (Error Prevention) for Vue.js 3.x',
-    vuepress:
-      'Priority A: Essential (Error Prevention) <badge text="for Vue.js 3.x" vertical="middle">for Vue.js 3.x</badge>'
+    text: 'Priority A: Essential (Error Prevention) for Vue.js 3.x'
   },
   'vue3-strongly-recommended': {
-    text: 'Priority B: Strongly Recommended (Improving Readability) for Vue.js 3.x',
-    vuepress:
-      'Priority B: Strongly Recommended (Improving Readability) <badge text="for Vue.js 3.x" vertical="middle">for Vue.js 3.x</badge>'
+    text: 'Priority B: Strongly Recommended (Improving Readability) for Vue.js 3.x'
   },
   'vue3-recommended': {
-    text: 'Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead) for Vue.js 3.x',
-    vuepress:
-      'Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead) <badge text="for Vue.js 3.x" vertical="middle">for Vue.js 3.x</badge>'
+    text: 'Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead) for Vue.js 3.x'
   },
   'vue3-use-with-caution': {
-    text: 'Priority D: Use with Caution (Potentially Dangerous Patterns) for Vue.js 3.x',
-    vuepress:
-      'Priority D: Use with Caution (Potentially Dangerous Patterns) <badge text="for Vue.js 3.x" vertical="middle">for Vue.js 3.x</badge>'
+    text: 'Priority D: Use with Caution (Potentially Dangerous Patterns) for Vue.js 3.x'
   },
-  essential: {
-    text: 'Priority A: Essential (Error Prevention) for Vue.js 2.x',
-    vuepress:
-      'Priority A: Essential (Error Prevention) <badge text="for Vue.js 2.x" vertical="middle" type="warn">for Vue.js 2.x</badge>'
+  'vue2-essential': {
+    text: 'Priority A: Essential (Error Prevention) for Vue.js 2.x'
   },
-  'strongly-recommended': {
-    text: 'Priority B: Strongly Recommended (Improving Readability) for Vue.js 2.x',
-    vuepress:
-      'Priority B: Strongly Recommended (Improving Readability) <badge text="for Vue.js 2.x" vertical="middle" type="warn">for Vue.js 2.x</badge>'
+  'vue2-strongly-recommended': {
+    text: 'Priority B: Strongly Recommended (Improving Readability) for Vue.js 2.x'
   },
-  recommended: {
-    text: 'Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead) for Vue.js 2.x',
-    vuepress:
-      '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>'
+  'vue2-recommended': {
+    text: 'Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead) for Vue.js 2.x'
   },
-  'use-with-caution': {
-    text: 'Priority D: Use with Caution (Potentially Dangerous Patterns) for Vue.js 2.x',
-    vuepress:
-      'Priority D: Use with Caution (Potentially Dangerous Patterns) <badge text="for Vue.js 2.x" vertical="middle" type="warn">for Vue.js 2.x</badge>'
+  'vue2-use-with-caution': {
+    text: 'Priority D: Use with Caution (Potentially Dangerous Patterns) for Vue.js 2.x'
   }
 }
 const categoryIds = Object.keys(categoryTitles)
@@ -69,12 +52,38 @@ for (const rule of rules) {
   }
 }
 
-module.exports = categoryIds
-  .map((categoryId) => ({
-    categoryId,
-    title: categoryTitles[categoryId],
-    rules: (categoryRules[categoryId] || []).filter(
-      (rule) => !rule.meta.deprecated
-    )
-  }))
-  .filter((category) => category.rules.length > 0)
+const CONFIG_NAME_CAPTIONS = {
+  base: ['"plugin:vue/base"', '*.configs["flat/base"]'],
+  'vue3-essential': ['"plugin:vue/essential"', '*.configs["flat/essential"]'],
+  'vue2-essential': [
+    '"plugin:vue/vue2-essential"',
+    '*.configs["flat/vue2-essential"]'
+  ],
+  'vue3-strongly-recommended': [
+    '"plugin:vue/strongly-recommended"',
+    '*.configs["flat/strongly-recommended"]'
+  ],
+  'vue2-strongly-recommended': [
+    '"plugin:vue/vue2-strongly-recommended"',
+    '*.configs["flat/vue2-strongly-recommended"]'
+  ],
+  'vue3-recommended': [
+    '"plugin:vue/recommended"',
+    '*.configs["flat/recommended"]'
+  ],
+  'vue2-recommended': [
+    '"plugin:vue/vue2-recommended"',
+    '*.configs["flat/vue2-recommended"]'
+  ]
+}
+
+module.exports = {
+  CONFIG_NAME_CAPTIONS,
+  categories: categoryIds
+    .map((categoryId) => ({
+      categoryId,
+      title: categoryTitles[categoryId],
+      rules: categoryRules[categoryId] || []
+    }))
+    .filter((category) => category.rules.length > 0)
+}
diff --git a/tools/lib/configs.js b/tools/lib/configs.js
deleted file mode 100644
index 031f41e67..000000000
--- a/tools/lib/configs.js
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * @author Michał Sajnóg <https://github.com/michalsnik>
- * See LICENSE file in root directory for full license.
- */
-
-'use strict'
-
-const fs = require('fs')
-const path = require('path')
-const ROOT = path.resolve(__dirname, '../../lib/configs')
-
-module.exports = fs
-  .readdirSync(ROOT)
-  .filter((file) => path.extname(file) === '.js')
-  .map((file) => path.basename(file, '.js'))
diff --git a/tools/lib/http.js b/tools/lib/http.js
new file mode 100644
index 000000000..27ff970f4
--- /dev/null
+++ b/tools/lib/http.js
@@ -0,0 +1,6 @@
+module.exports = {
+  httpGet
+}
+function httpGet(url) {
+  return fetch(url).then((res) => res.text())
+}
diff --git a/tools/lib/utils.js b/tools/lib/utils.js
index eb3f53fd7..937288ec4 100644
--- a/tools/lib/utils.js
+++ b/tools/lib/utils.js
@@ -2,11 +2,11 @@ module.exports = { getPresetIds, formatItems }
 
 const presetCategories = {
   base: null,
-  essential: 'base',
+  'vue2-essential': 'base',
   'vue3-essential': 'base',
-  'strongly-recommended': 'essential',
+  'vue2-strongly-recommended': 'vue2-essential',
   'vue3-strongly-recommended': 'vue3-essential',
-  recommended: 'strongly-recommended',
+  'vue2-recommended': 'vue2-strongly-recommended',
   'vue3-recommended': 'vue3-strongly-recommended'
   // 'use-with-caution': 'recommended',
   // 'vue3-use-with-caution': 'vue3-recommended'
diff --git a/tools/new-rule.js b/tools/new-rule.js
index 3009dfdd3..d9a155795 100644
--- a/tools/new-rule.js
+++ b/tools/new-rule.js
@@ -4,46 +4,32 @@ const cp = require('child_process')
 const logger = console
 
 // main
-;((ruleId) => {
-  if (ruleId == null) {
-    logger.error('Usage: npm run new <RuleID>')
+;((ruleName, authorName) => {
+  if (!ruleName || !authorName) {
+    logger.error('Usage: npm run new <rule name> <author name>')
     process.exitCode = 1
     return
   }
-  if (!/^[\w-]+$/u.test(ruleId)) {
-    logger.error("Invalid RuleID '%s'.", ruleId)
+  if (!/^[\w-]+$/u.test(ruleName)) {
+    logger.error("Invalid rule name '%s'.", ruleName)
     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`)
+  const ruleFile = path.resolve(__dirname, `../lib/rules/${ruleName}.js`)
+  const testFile = path.resolve(__dirname, `../tests/lib/rules/${ruleName}.js`)
+  const docFile = path.resolve(__dirname, `../docs/rules/${ruleName}.md`)
 
   fs.writeFileSync(
     ruleFile,
     `/**
- * @author *****your name*****
+ * @author ${authorName}
  * See LICENSE file in root directory for full license.
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
-// ...
-
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
@@ -72,23 +58,23 @@ module.exports = {
   fs.writeFileSync(
     testFile,
     `/**
- * @author *****your name*****
+ * @author ${authorName}
  * See LICENSE file in root directory for full license.
  */
 'use strict'
 
-const RuleTester = require('eslint').RuleTester
-const rule = require('../../../lib/rules/${ruleId}')
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/${ruleName}')
 
 const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
     ecmaVersion: 2020,
     sourceType: 'module'
   }
 })
 
-tester.run('${ruleId}', rule, {
+tester.run('${ruleName}', rule, {
   valid: [
     {
       filename: 'test.vue',
@@ -124,20 +110,20 @@ tester.run('${ruleId}', rule, {
     `---
 pageClass: rule-details
 sidebarDepth: 0
-title: vue/${ruleId}
+title: vue/${ruleName}
 description: xxx
 ---
-# vue/${ruleId}
+# vue/${ruleName}
 
 > xxx
 
-- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
+- :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']}">
+<eslint-code-block :rules="{'vue/${ruleName}': ['error']}">
 
 \`\`\`vue
 <template>
@@ -157,4 +143,4 @@ Nothing.
   cp.execSync(`code "${ruleFile}"`)
   cp.execSync(`code "${testFile}"`)
   cp.execSync(`code "${docFile}"`)
-})(process.argv[2])
+})(process.argv[2], process.argv[3])
diff --git a/tools/update-docs-rules-index.js b/tools/update-docs-rules-index.js
index 3db26c36b..c456cae44 100644
--- a/tools/update-docs-rules-index.js
+++ b/tools/update-docs-rules-index.js
@@ -9,27 +9,25 @@ const path = require('path')
 const rules = require('./lib/rules')
 const { getPresetIds, formatItems } = require('./lib/utils')
 const removedRules = require('../lib/removed-rules')
+const { CONFIG_NAME_CAPTIONS } = require('./lib/categories')
 
 const VUE3_EMOJI = ':three:'
 const VUE2_EMOJI = ':two:'
 
 // -----------------------------------------------------------------------------
 const categorizedRules = rules.filter(
-  (rule) =>
-    rule.meta.docs.categories &&
-    !rule.meta.docs.extensionRule &&
-    !rule.meta.deprecated
+  (rule) => rule.meta.docs.categories && !rule.meta.docs.extensionSource
 )
 const uncategorizedRules = rules.filter(
   (rule) =>
     !rule.meta.docs.categories &&
-    !rule.meta.docs.extensionRule &&
+    !rule.meta.docs.extensionSource &&
     !rule.meta.deprecated
 )
 const uncategorizedExtensionRule = rules.filter(
   (rule) =>
     !rule.meta.docs.categories &&
-    rule.meta.docs.extensionRule &&
+    rule.meta.docs.extensionSource &&
     !rule.meta.deprecated
 )
 const deprecatedRules = rules.filter((rule) => rule.meta.deprecated)
@@ -44,21 +42,19 @@ function toRuleRow(rule, kindMarks = []) {
   const mark = [
     rule.meta.fixable ? ':wrench:' : '',
     rule.meta.hasSuggestions ? ':bulb:' : '',
-    rule.meta.deprecated ? ':warning:' : ''
+    rule.meta.deprecated ? ':no_entry_sign:' : ''
   ].join('')
   const kindMark = [...kindMarks, TYPE_MARK[rule.meta.type]].join('')
-  const link = `[${rule.ruleId}](./${rule.name}.md)`
+  const link = `[${rule.ruleId}]`
   const description = rule.meta.docs.description || '(no description)'
 
   return `| ${link} | ${description} | ${mark} | ${kindMark} |`
 }
 
 function toDeprecatedRuleRow(rule) {
-  const link = `[${rule.ruleId}](./${rule.name}.md)`
+  const link = `[${rule.ruleId}]`
   const replacedRules = rule.meta.replacedBy || []
-  const replacedBy = replacedRules
-    .map((name) => `[vue/${name}](./${name}.md)`)
-    .join(', ')
+  const replacedBy = replacedRules.map((name) => `[vue/${name}]`).join(', ')
 
   return `| ${link} | ${replacedBy || '(no replacement)'} |`
 }
@@ -69,12 +65,11 @@ function toRemovedRuleRow({
   deprecatedInVersion,
   removedInVersion
 }) {
-  const link = `[vue/${ruleName}](./${ruleName}.md)`
+  const link = `[vue/${ruleName}]`
   const replacement =
-    replacedBy.map((name) => `[vue/${name}](./${name}.md)`).join(', ') ||
-    '(no replacement)'
-  const deprecatedVersionLink = `[${deprecatedInVersion}](https://github.com/vuejs/eslint-plugin-vue/releases/tag/${deprecatedInVersion})`
-  const removedVersionLink = `[${removedInVersion}](https://github.com/vuejs/eslint-plugin-vue/releases/tag/${removedInVersion})`
+    replacedBy.map((name) => `[vue/${name}]`).join(', ') || '(no replacement)'
+  const deprecatedVersionLink = `[${deprecatedInVersion}]`
+  const removedVersionLink = `[${removedInVersion}]`
 
   return `| ${link} | ${replacement} | ${deprecatedVersionLink} | ${removedVersionLink} |`
 }
@@ -91,19 +86,19 @@ const categoryGroups = [
   {
     title: 'Priority A: Essential (Error Prevention)',
     categoryIdForVue3: 'vue3-essential',
-    categoryIdForVue2: 'essential',
+    categoryIdForVue2: 'vue2-essential',
     useMark: true
   },
   {
     title: 'Priority B: Strongly Recommended (Improving Readability)',
     categoryIdForVue3: 'vue3-strongly-recommended',
-    categoryIdForVue2: 'strongly-recommended',
+    categoryIdForVue2: 'vue2-strongly-recommended',
     useMark: true
   },
   {
     title: 'Priority C: Recommended (Potentially Dangerous Patterns)',
     categoryIdForVue3: 'vue3-recommended',
-    categoryIdForVue2: 'recommended',
+    categoryIdForVue2: 'vue2-recommended',
     useMark: true
   }
 ]
@@ -126,11 +121,11 @@ ${group.description}
 `
     }
     if (group.useMark) {
-      const presetsForVue3 = getPresetIds([group.categoryIdForVue3]).map(
-        (categoryId) => `\`"plugin:vue/${categoryId}"\``
+      const presetsForVue3 = getPresetIds([group.categoryIdForVue3]).flatMap(
+        (categoryId) => CONFIG_NAME_CAPTIONS[categoryId]?.map((c) => `\`${c}\``)
       )
       const presetsForVue2 = getPresetIds([group.categoryIdForVue2]).map(
-        (categoryId) => `\`"plugin:vue/${categoryId}"\``
+        (categoryId) => CONFIG_NAME_CAPTIONS[categoryId]?.map((c) => `\`${c}\``)
       )
       content += `
 - ${VUE3_EMOJI} Indicates that the rule is for Vue 3 and is included in ${formatItems(
@@ -225,7 +220,7 @@ if (deprecatedRules.length > 0) {
   rulesTableContent += `
 ## Deprecated
 
-- :warning: We're going to remove deprecated rules in the next major release. Please migrate to successor/new rules.
+- :no_entry_sign: We're going to remove deprecated rules in the next major release. Please migrate to successor/new rules.
 - :innocent: We don't fix bugs which are in deprecated rules since we don't have enough resources.
 
 | Rule ID | Replaced by |
@@ -238,7 +233,7 @@ ${deprecatedRules.map(toDeprecatedRuleRow).join('\n')}
 rulesTableContent += `
 ## Removed
 
-- :no_entry_sign: These rules have been removed in a previous major release, after they have been deprecated for a while.
+- :no_entry: These rules have been removed in a previous major release, after they have been deprecated for a while.
 
 | Rule ID | Replaced by | Deprecated in version  | Removed in version |
 |:--------|:------------|:-----------------------|:-------------------|
@@ -246,7 +241,27 @@ ${removedRules.map(toRemovedRuleRow).join('\n')}
 `
 
 // -----------------------------------------------------------------------------
-const readmeFilePath = path.resolve(__dirname, '../docs/rules/README.md')
+const releases = [
+  ...new Set(
+    removedRules.flatMap((rule) => [
+      rule.deprecatedInVersion,
+      rule.removedInVersion
+    ])
+  )
+].sort()
+const ruleLinkDefinitions = rules.map(
+  (rule) => `[${rule.ruleId}]: ./${rule.name}.md`
+)
+const removedRuleLinkDefinitions = removedRules.map(
+  (rule) => `[vue/${rule.ruleName}]: ./${rule.ruleName}.md`
+)
+const releaseLinkDefinitions = releases.map(
+  (release) =>
+    `[${release}]: https://github.com/vuejs/eslint-plugin-vue/releases/tag/${release}`
+)
+
+// -----------------------------------------------------------------------------
+const readmeFilePath = path.resolve(__dirname, '../docs/rules/index.md')
 fs.writeFileSync(
   readmeFilePath,
   `---
@@ -259,7 +274,7 @@ pageClass: rule-list
 <!-- This file is automatically generated in tools/update-docs-rules-index.js, do not change! -->
 
 ::: tip Legend
-  :wrench: Indicates that the rule is fixable, and using \`--fix\` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the reported problems.
+  :wrench: Indicates that the rule is fixable, and using \`--fix\` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the reported problems.
 
   :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).
 :::
@@ -271,5 +286,17 @@ Mark indicating rule type:
 - :lipstick: Layout & Formatting: These rules care about how the code looks rather than how it executes.
 
 ${rulesTableContent.trim()}
+
+<!-- link definitions for rules -->
+
+${ruleLinkDefinitions.join('\n')}
+
+<!-- link definitions for removed rules -->
+
+${removedRuleLinkDefinitions.join('\n')}
+
+<!-- link definitions for releases -->
+
+${releaseLinkDefinitions.join('\n')}
 `
 )
diff --git a/tools/update-docs.js b/tools/update-docs.js
index 75f6dab6d..e70804981 100644
--- a/tools/update-docs.js
+++ b/tools/update-docs.js
@@ -13,8 +13,8 @@ For example:
 # rule description (vue/rule-name)
 
 - :gear: This rule is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
-- :warning: This rule was **deprecated**.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix) can automatically fix some of the problems reported by this rule.
+- :no_entry_sign: This rule was **deprecated**.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
 ```
 */
 
@@ -23,6 +23,7 @@ const path = require('path')
 const rules = require('./lib/rules')
 const removedRules = require('../lib/removed-rules')
 const { getPresetIds, formatItems } = require('./lib/utils')
+const { CONFIG_NAME_CAPTIONS } = require('./lib/categories')
 
 const ROOT = path.resolve(__dirname, '../docs/rules')
 
@@ -70,7 +71,7 @@ class DocFile {
     }
     const computed = `---\n${Object.entries(fileIntro)
       .map((item) => `${item[0]}: ${item[1]}`)
-      .join('\n')}\n---\n`
+      .join('\n')}\n---\n\n`
 
     const fileIntroPattern = /^---\n(.*\n)+---\n*/g
 
@@ -86,7 +87,10 @@ class DocFile {
     const description = meta.docs
       ? meta.docs.description
       : this.content.match(/^description: (.*)$/m)[1]
-    const title = `# ${ruleId}\n\n> ${description}`
+    const escapedDescription = description
+      .replace(/\*/g, String.raw`\*`)
+      .replace(/_/g, String.raw`\_`)
+    const title = `# ${ruleId}\n\n> ${escapedDescription}`
     const notes = []
 
     if (meta.removedInVersion) {
@@ -95,13 +99,13 @@ class DocFile {
           (name) => `[vue/${name}](${name}.md) rule`
         )
         notes.push(
-          `- :no_entry_sign: This rule was **removed** in eslint-plugin-vue ${
+          `- :no_entry: This rule was **removed** in eslint-plugin-vue ${
             meta.removedInVersion
           } and replaced by ${formatItems(replacedRules)}.`
         )
       } else {
         notes.push(
-          `- :no_entry_sign: This rule was **removed** in eslint-plugin-vue ${meta.removedInVersion}.`
+          `- :no_entry: This rule was **removed** in eslint-plugin-vue ${meta.removedInVersion}.`
         )
       }
     } else if (meta.deprecated) {
@@ -110,23 +114,24 @@ class DocFile {
           (name) => `[vue/${name}](${name}.md) rule`
         )
         notes.push(
-          `- :warning: This rule was **deprecated** and replaced by ${formatItems(
+          `- :no_entry_sign: This rule was **deprecated** and replaced by ${formatItems(
             replacedRules
           )}.`
         )
       } else {
-        notes.push(`- :warning: This rule was **deprecated**.`)
+        notes.push(`- :no_entry_sign: This rule was **deprecated**.`)
       }
-    } else if (meta.docs.categories) {
-      const presets = getPresetIds(meta.docs.categories).map(
-        (categoryId) => `\`"plugin:vue/${categoryId}"\``
+    }
+    if (meta.docs?.categories) {
+      const presets = getPresetIds(meta.docs.categories).flatMap((categoryId) =>
+        CONFIG_NAME_CAPTIONS[categoryId]?.map((c) => `\`${c}\``)
       )
 
       notes.push(`- :gear: This rule is included in ${formatItems(presets)}.`)
     }
     if (meta.fixable) {
       notes.push(
-        '- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.'
+        '- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.'
       )
     }
     if (meta.hasSuggestions) {
@@ -137,7 +142,7 @@ class DocFile {
 
     if (!this.since) {
       notes.unshift(
-        `- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>`
+        `- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> _**This rule has not been released yet.**_ </badge>`
       )
     }
 
@@ -194,9 +199,9 @@ This rule was introduced in eslint-plugin-vue ${this.since}
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/${name}.js)
 - [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/${name}.js)
 ${
-  meta.docs.extensionRule
+  meta.docs.extensionSource
     ? `
-<sup>Taken with ❤️ [from ESLint core](${meta.docs.coreRuleUrl})</sup>
+<sup>Taken with ❤️ [from ${meta.docs.extensionSource.name}](${meta.docs.extensionSource.url})</sup>
 `
     : ''
 }`
diff --git a/tools/update-html-resources.js b/tools/update-html-resources.js
new file mode 100644
index 000000000..aba02d13f
--- /dev/null
+++ b/tools/update-html-resources.js
@@ -0,0 +1,103 @@
+'use strict'
+
+const fs = require('fs')
+const jsdom = require('jsdom')
+const { httpGet } = require('./lib/http')
+
+main()
+
+async function main() {
+  const [bcdJson, obsoleteHtml] = await Promise.all([
+    httpGet('https://unpkg.com/@mdn/browser-compat-data/data.json'),
+    httpGet('https://html.spec.whatwg.org/multipage/obsolete.html')
+  ])
+  const bcd = JSON.parse(bcdJson)
+
+  updateDeprecatedHTMLElements()
+  updateHTMLElements()
+  updateSVGElements()
+
+  // ------------------------------------------------------------------------------
+  // Update deprecated-html-elements.json
+  // ------------------------------------------------------------------------------
+  function updateDeprecatedHTMLElements() {
+    const DEPRECATED_HTML_ELEMENTS_PATH =
+      require.resolve('../lib/utils/deprecated-html-elements.json')
+    const elements = new Set()
+
+    const domDl = jsdom.JSDOM.fragment(obsoleteHtml).querySelector(
+      '[id="non-conforming-features"] ~ dl'
+    )
+    for (const code of domDl.querySelectorAll('dt code')) {
+      const name = code.textContent.trim()
+      if (name) elements.add(name)
+    }
+
+    if (elements.size === 0) {
+      throw new Error('No deprecated HTML elements found')
+    }
+
+    fs.writeFileSync(
+      DEPRECATED_HTML_ELEMENTS_PATH,
+      `${JSON.stringify([...elements].sort(), null, 2)}\n`,
+      'utf8'
+    )
+  }
+
+  // ------------------------------------------------------------------------------
+  // Update html-elements.json
+  // ------------------------------------------------------------------------------
+  function updateHTMLElements() {
+    const HTML_ELEMENTS_PATH =
+      require.resolve('../lib/utils/html-elements.json')
+    const elements = new Set()
+    const deprecatedHtmlElements = new Set(
+      require('../lib/utils/deprecated-html-elements.json')
+    )
+
+    for (const [name, element] of Object.entries(bcd.html.elements)) {
+      if (deprecatedHtmlElements.has(name)) {
+        continue
+      }
+      if (element.__compat.status.deprecated) {
+        continue
+      }
+      elements.add(name)
+    }
+
+    if (elements.size === 0) {
+      throw new Error('No HTML elements found')
+    }
+
+    fs.writeFileSync(
+      HTML_ELEMENTS_PATH,
+      `${JSON.stringify([...elements].sort(), null, 2)}\n`,
+      'utf8'
+    )
+  }
+
+  // ------------------------------------------------------------------------------
+  // Update svg-elements.json
+  // ------------------------------------------------------------------------------
+  function updateSVGElements() {
+    const SVG_ELEMENTS_PATH = require.resolve('../lib/utils/svg-elements.json')
+    const elements = new Set()
+
+    for (const [name, element] of Object.entries(bcd.svg.elements)) {
+      if (element.__compat.status.deprecated) {
+        continue
+      }
+      elements.add(name)
+    }
+
+    if (elements.size === 0) {
+      throw new Error('No SVG elements found')
+    }
+
+    fs.writeFileSync(
+      SVG_ELEMENTS_PATH,
+      `${JSON.stringify([...elements].sort(), null, 2)}\n`,
+      'utf8'
+    )
+  }
+}
diff --git a/tools/update-lib-configs.js b/tools/update-lib-configs.js
index f75aff4fa..0c2845e45 100644
--- a/tools/update-lib-configs.js
+++ b/tools/update-lib-configs.js
@@ -11,20 +11,20 @@ This script updates `lib/configs/*.js` files from rule's meta data.
 
 const fs = require('fs')
 const path = require('path')
-const eslint = require('eslint')
-const categories = require('./lib/categories')
+const { FlatESLint } = require('eslint/use-at-your-own-risk')
+const { categories } = require('./lib/categories')
 
-const errorCategories = new Set(['base', 'essential', 'vue3-essential'])
+const errorCategories = new Set(['base', 'vue2-essential', 'vue3-essential'])
 
 const extendsCategories = {
   base: null,
-  essential: 'base',
+  'vue2-essential': 'base',
   'vue3-essential': 'base',
-  'strongly-recommended': 'essential',
+  'vue2-strongly-recommended': 'vue2-essential',
   'vue3-strongly-recommended': 'vue3-essential',
-  recommended: 'strongly-recommended',
+  'vue2-recommended': 'vue2-strongly-recommended',
   'vue3-recommended': 'vue3-strongly-recommended',
-  'use-with-caution': 'recommended',
+  'vue2-use-with-caution': 'vue2-recommended',
   'vue3-use-with-caution': 'vue3-recommended'
 }
 
@@ -56,19 +56,20 @@ function formatCategory(category) {
  * in order to update its content execute "npm run update"
  */
 module.exports = {
-  parser: require.resolve('vue-eslint-parser'),
   parserOptions: {
-    ecmaVersion: 2020,
+    ecmaVersion: 'latest',
     sourceType: 'module'
   },
-  env: {
-    browser: true,
-    es6: true
-  },
   plugins: [
     'vue'
   ],
-  rules: ${formatRules(category.rules, category.categoryId)}
+  rules: ${formatRules(category.rules, category.categoryId)},
+  overrides: [
+    {
+      files: '*.vue',
+      parser: require.resolve('vue-eslint-parser')
+    }
+  ]
 }
 `
   }
@@ -95,9 +96,9 @@ for (const category of categories) {
 
 // Format files.
 async function format() {
-  const linter = new eslint.ESLint({ fix: true })
+  const linter = new FlatESLint({ fix: true })
   const report = await linter.lintFiles([ROOT])
-  eslint.ESLint.outputFixes(report)
+  FlatESLint.outputFixes(report)
 }
 
 format()
diff --git a/tools/update-lib-flat-configs.js b/tools/update-lib-flat-configs.js
new file mode 100644
index 000000000..bc103cad1
--- /dev/null
+++ b/tools/update-lib-flat-configs.js
@@ -0,0 +1,122 @@
+/**
+ * @author 唯然<weiran.zsd@outlook.com>
+ * @copyright 2023- 唯然. All rights reserved.
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+/*
+This script updates `lib/configs/flat/*.js` files from rule's meta data.
+*/
+
+const fs = require('fs')
+const path = require('path')
+const { FlatESLint } = require('eslint/use-at-your-own-risk')
+const { categories } = require('./lib/categories')
+
+const errorCategories = new Set(['base', 'vue2-essential', 'vue3-essential'])
+
+const extendsCategories = {
+  base: null,
+  'vue2-essential': 'base',
+  'vue3-essential': 'base',
+  'vue2-strongly-recommended': 'vue2-essential',
+  'vue3-strongly-recommended': 'vue3-essential',
+  'vue2-recommended': 'vue2-strongly-recommended',
+  'vue3-recommended': 'vue3-strongly-recommended',
+  'vue2-use-with-caution': 'vue2-recommended',
+  'vue3-use-with-caution': 'vue3-recommended'
+}
+
+function formatRules(rules, categoryId) {
+  const obj = Object.fromEntries(
+    rules.map((rule) => {
+      let options = errorCategories.has(categoryId) ? 'error' : 'warn'
+      const defaultOptions =
+        rule.meta && rule.meta.docs && rule.meta.docs.defaultOptions
+      if (defaultOptions) {
+        const v = categoryId.startsWith('vue3') ? 3 : 2
+        const defaultOption = defaultOptions[`vue${v}`]
+        if (defaultOption) {
+          options = [options, ...defaultOption]
+        }
+      }
+      return [rule.ruleId, options]
+    })
+  )
+  return JSON.stringify(obj, null, 2)
+}
+
+function formatCategory(category) {
+  const extendsCategoryId = extendsCategories[category.categoryId]
+  if (category.categoryId === 'base') {
+    return `/*
+ * IMPORTANT!
+ * This file has been automatically generated,
+ * in order to update its content execute "npm run update"
+ */
+module.exports = [
+  {
+    name: 'vue/base/setup',
+    plugins: {
+      get vue() {
+        return require('../../plugin')
+      }
+    },
+    languageOptions: {
+      sourceType: 'module',
+    }
+  },
+  {
+    name: 'vue/base/setup-for-vue',
+    files: ['*.vue', '**/*.vue'],
+    plugins: {
+      get vue() {
+        return require('../../plugin')
+      }
+    },
+    languageOptions: {
+      parser: require('vue-eslint-parser'),
+      sourceType: 'module',
+    },
+    rules: ${formatRules(category.rules, category.categoryId)},
+    processor: 'vue/vue'
+  }
+]
+`
+  }
+  return `/*
+ * IMPORTANT!
+ * This file has been automatically generated,
+ * in order to update its content execute "npm run update"
+ */
+'use strict'
+const config = require('./${extendsCategoryId}.js')
+
+module.exports = [
+  ...config,
+  {
+    name: 'vue/${category.categoryId.replace(/^vue3-/u, '')}/rules',
+    rules: ${formatRules(category.rules, category.categoryId)},
+  }
+]
+`
+}
+
+// Update files.
+const ROOT = path.resolve(__dirname, '../lib/configs/flat/')
+for (const category of categories) {
+  const filePath = path.join(ROOT, `${category.categoryId}.js`)
+  const content = formatCategory(category)
+
+  fs.writeFileSync(filePath, content)
+}
+
+// Format files.
+async function format() {
+  const linter = new FlatESLint({ fix: true })
+  const report = await linter.lintFiles([ROOT])
+  FlatESLint.outputFixes(report)
+}
+
+format()
diff --git a/tools/update-lib-index.js b/tools/update-lib-index.js
deleted file mode 100644
index f57ae1e58..000000000
--- a/tools/update-lib-index.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * @author Toru Nagashima
- * @copyright 2017 Toru Nagashima. All rights reserved.
- * See LICENSE file in root directory for full license.
- */
-'use strict'
-
-/*
-This script updates `lib/index.js` file from rule's meta data.
-*/
-
-const fs = require('fs')
-const path = require('path')
-const eslint = require('eslint')
-const rules = require('./lib/rules')
-const configs = require('./lib/configs')
-
-// Update files.
-const filePath = path.resolve(__dirname, '../lib/index.js')
-const content = `/*
- * IMPORTANT!
- * This file has been automatically generated,
- * in order to update its content execute "npm run update"
- */
-'use strict'
-
-module.exports = {
-  rules: {
-    ${rules
-      .map((rule) => `'${rule.name}': require('./rules/${rule.name}')`)
-      .join(',\n')}
-  },
-  configs: {
-    ${configs
-      .map((config) => `'${config}': require('./configs/${config}')`)
-      .join(',\n')}
-  },
-  processors: {
-    '.vue': require('./processor')
-  },
-  environments: {
-    // TODO Remove in the next major version
-    /** @deprecated */
-    'setup-compiler-macros': {
-      globals: {
-        defineProps: 'readonly',
-        defineEmits: 'readonly',
-        defineExpose: 'readonly',
-        withDefaults: 'readonly'
-      }
-    }
-  }
-}
-`
-fs.writeFileSync(filePath, content)
-
-// Format files.
-async function format() {
-  const linter = new eslint.ESLint({ fix: true })
-  const report = await linter.lintFiles([filePath])
-  eslint.ESLint.outputFixes(report)
-}
-
-format()
diff --git a/tools/update-lib-plugin.js b/tools/update-lib-plugin.js
new file mode 100644
index 000000000..b9fa03870
--- /dev/null
+++ b/tools/update-lib-plugin.js
@@ -0,0 +1,50 @@
+/**
+ * @author Toru Nagashima
+ * @copyright 2017 Toru Nagashima. All rights reserved.
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+/*
+This script updates `lib/plugin.js` file from rule's meta data.
+*/
+
+const fs = require('fs')
+const path = require('path')
+const { FlatESLint } = require('eslint/use-at-your-own-risk')
+const rules = require('./lib/rules')
+
+// Update files.
+const filePath = path.resolve(__dirname, '../lib/plugin.js')
+const content = `/*
+ * IMPORTANT!
+ * This file has been automatically generated,
+ * in order to update its content execute "npm run update"
+ */
+'use strict'
+
+const plugin = {
+  meta: require('./meta'),
+  rules: {
+    ${rules
+      .map((rule) => `'${rule.name}': require('./rules/${rule.name}')`)
+      .join(',\n')}
+  },
+  processors: {
+    '.vue': require('./processor'),
+    'vue': require('./processor')
+  }
+}
+
+module.exports = plugin
+`
+fs.writeFileSync(filePath, content)
+
+// Format files.
+async function format() {
+  const linter = new FlatESLint({ fix: true })
+  const report = await linter.lintFiles([filePath])
+  FlatESLint.outputFixes(report)
+}
+
+format()
diff --git a/tools/update-resources.js b/tools/update-resources.js
new file mode 100644
index 000000000..a157c61ef
--- /dev/null
+++ b/tools/update-resources.js
@@ -0,0 +1,4 @@
+'use strict'
+
+require('./update-vue3-export-names')
+require('./update-html-resources')
diff --git a/tools/update-vue3-export-names.js b/tools/update-vue3-export-names.js
index 8a3de00ea..0dabecb3a 100644
--- a/tools/update-vue3-export-names.js
+++ b/tools/update-vue3-export-names.js
@@ -6,9 +6,8 @@
 
 const fs = require('fs')
 const path = require('path')
-const https = require('https')
-const { URL } = require('url')
 const tsParser = require('@typescript-eslint/parser')
+const { httpGet } = require('./lib/http')
 
 main()
 
@@ -24,7 +23,7 @@ async function main() {
     '../lib/utils/vue3-export-names.json'
   )
 
-  fs.writeFileSync(filePath, JSON.stringify([...names], null, 2))
+  fs.writeFileSync(filePath, `${JSON.stringify([...names], null, 2)}\n`)
 }
 
 async function* extractExportNames(m) {
@@ -144,32 +143,3 @@ async function resolveTypeContents(m) {
   }
   return await httpGet(`https://unpkg.com/${m}/${typesPath}`)
 }
-
-function httpGet(url) {
-  return new Promise((resolve, reject) => {
-    let result = ''
-    https
-      .get(url, (res) => {
-        if (res.statusCode && res.statusCode >= 300 && res.statusCode < 400) {
-          // redirect
-          let redirectUrl = res.headers.location
-          if (!redirectUrl.startsWith('http')) {
-            const baseUrl = new URL(url)
-            baseUrl.pathname = redirectUrl
-            redirectUrl = String(baseUrl)
-          }
-          resolve(httpGet(redirectUrl))
-          return
-        }
-        res.setEncoding('utf8')
-        res.on('data', (chunk) => {
-          result += String(chunk)
-        })
-        res.on('end', () => {
-          resolve(result)
-        })
-        res.on('error', reject)
-      })
-      .on('error', reject)
-  })
-}
diff --git a/tools/update.js b/tools/update.js
index 266aedbcc..f1a77c9a0 100644
--- a/tools/update.js
+++ b/tools/update.js
@@ -7,10 +7,7 @@
 
 require('./update-no-layout-rules-config')
 require('./update-lib-configs')
-require('./update-lib-index')
+require('./update-lib-flat-configs')
+require('./update-lib-plugin')
 require('./update-docs')
 require('./update-docs-rules-index')
-
-if (process.env.IN_VERSION_SCRIPT) {
-  require('./update-vue3-export-names')
-}
diff --git a/tsconfig.json b/tsconfig.json
index 40f2ceeee..2008bef78 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,8 +1,12 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
-    "module": "commonjs",
+    "target": "ES2019",
+    "module": "node16",
+    "moduleResolution": "Node16",
     "lib": ["es2020"],
+    "types": [
+      "vitest/globals"
+    ],
     "allowJs": true,
     "checkJs": true,
     "noEmit": true,
@@ -19,7 +23,14 @@
     "baseUrl": ".",
     "paths": {
       "*": ["typings/*"]
-    }
+    },
+    "skipLibCheck": true
   },
-  "include": ["lib/**/*", "typings/eslint-plugin-vue/global.d.ts"]
+  "include": [
+    "lib/**/*",
+    "tests/**/*.ts",
+    "typings/eslint-plugin-vue/global.d.ts",
+    "docs/.vitepress/**/*.ts",
+    "docs/.vitepress/**/*.mts"
+  ]
 }
diff --git a/typings/eslint-utils/index.d.ts b/typings/@eslint-community/eslint-utils/index.d.ts
similarity index 85%
rename from typings/eslint-utils/index.d.ts
rename to typings/@eslint-community/eslint-utils/index.d.ts
index 25e9ba8d4..8c27bca3e 100644
--- a/typings/eslint-utils/index.d.ts
+++ b/typings/@eslint-community/eslint-utils/index.d.ts
@@ -1,6 +1,6 @@
-import * as VAST from '../eslint-plugin-vue/util-types/ast'
-import { Token, Comment } from '../eslint-plugin-vue/util-types/node'
-import { ParserServices } from '../eslint-plugin-vue/util-types/parser-services'
+import * as VAST from '../../eslint-plugin-vue/util-types/ast'
+import { Token, Comment } from '../../eslint-plugin-vue/util-types/node'
+import { ParserServices } from '../../eslint-plugin-vue/util-types/parser-services'
 import eslint from 'eslint'
 
 export function findVariable(
@@ -44,25 +44,19 @@ export class ReferenceTracker {
     }
   )
 
-  iterateGlobalReferences(
-    traceMap: TYPES.TraceMap
-  ): IterableIterator<{
+  iterateGlobalReferences(traceMap: TYPES.TraceMap): IterableIterator<{
     node: VAST.ESNode
     path: string[]
     type: symbol
     info: any
   }>
-  iterateCjsReferences(
-    traceMap: TYPES.TraceMap
-  ): IterableIterator<{
+  iterateCjsReferences(traceMap: TYPES.TraceMap): IterableIterator<{
     node: VAST.ESNode
     path: string[]
     type: symbol
     info: any
   }>
-  iterateEsmReferences(
-    traceMap: TYPES.TraceMap
-  ): IterableIterator<{
+  iterateEsmReferences(traceMap: TYPES.TraceMap): IterableIterator<{
     node: VAST.ESNode
     path: string[]
     type: symbol
diff --git a/typings/eslint-plugin-vue/global.d.ts b/typings/eslint-plugin-vue/global.d.ts
index c2ae50632..a581b3f62 100644
--- a/typings/eslint-plugin-vue/global.d.ts
+++ b/typings/eslint-plugin-vue/global.d.ts
@@ -159,6 +159,7 @@ declare global {
   type TSLiteralType = VAST.TSLiteralType
   type TSCallSignatureDeclaration = VAST.TSCallSignatureDeclaration
   type TSFunctionType = VAST.TSFunctionType
+  type TypeNode = VAST.TypeNode
 
   // ---- JSX Nodes ----
 
diff --git a/typings/eslint-plugin-vue/util-types/ast/es-ast.ts b/typings/eslint-plugin-vue/util-types/ast/es-ast.ts
index 16a734d2e..010945c5b 100644
--- a/typings/eslint-plugin-vue/util-types/ast/es-ast.ts
+++ b/typings/eslint-plugin-vue/util-types/ast/es-ast.ts
@@ -227,8 +227,7 @@ interface BasePropertyDefinition extends HasParentNode {
   static: boolean
   parent: ClassBody
 }
-export interface PropertyDefinitionNonComputedName
-  extends BasePropertyDefinition {
+export interface PropertyDefinitionNonComputedName extends BasePropertyDefinition {
   computed: false
   key: Identifier | Literal
 }
@@ -268,11 +267,13 @@ export interface ImportDeclaration extends HasParentNode {
     | ImportNamespaceSpecifier
   )[]
   source: Literal & { value: string }
+  importKind?: 'type' | 'value'
 }
 export interface ImportSpecifier extends HasParentNode {
   type: 'ImportSpecifier'
   imported: Identifier
   local: Identifier
+  importKind?: 'type' | 'value'
 }
 export interface ImportDefaultSpecifier extends HasParentNode {
   type: 'ImportDefaultSpecifier'
@@ -339,6 +340,9 @@ export type Expression =
 export interface Identifier extends HasParentNode {
   type: 'Identifier'
   name: string
+
+  // for typescript-eslint
+  typeAnnotation?: any
 }
 export interface PrivateIdentifier extends HasParentNode {
   type: 'PrivateIdentifier'
@@ -346,7 +350,7 @@ export interface PrivateIdentifier extends HasParentNode {
 }
 export interface Literal extends HasParentNode {
   type: 'Literal'
-  value: string | boolean | null | number | RegExp | BigInt
+  value: string | boolean | null | number | RegExp | bigint
   raw: string
   regex?: {
     pattern: string
@@ -514,7 +518,10 @@ export interface CallExpression extends HasParentNode {
   callee: Expression | Super
   arguments: (Expression | SpreadElement)[]
   optional: boolean
-  typeParameters?: TS.TSTypeParameterInstantiation
+  typeArguments?: TS.TSTypeParameterInstantiation
+
+  /* @deprecated */
+  typeParameters?: never
 }
 export interface Super extends HasParentNode {
   type: 'Super'
@@ -523,6 +530,10 @@ export interface NewExpression extends HasParentNode {
   type: 'NewExpression'
   callee: Expression
   arguments: (Expression | SpreadElement)[]
+  typeArguments?: TSTypeParameterInstantiation
+
+  /* @deprecated */
+  typeParameters?: never
 }
 interface BaseMemberExpression extends HasParentNode {
   type: 'MemberExpression'
@@ -615,8 +626,7 @@ interface BaseAssignmentProperty extends HasParentNode {
   value: Pattern
   parent: ObjectPattern
 }
-export interface AssignmentPropertyNonComputedName
-  extends BaseAssignmentProperty {
+export interface AssignmentPropertyNonComputedName extends BaseAssignmentProperty {
   computed: false
   key: Identifier | Literal
 }
@@ -629,7 +639,7 @@ export type AssignmentProperty =
   | AssignmentPropertyComputedName
 export interface ArrayPattern extends HasParentNode {
   type: 'ArrayPattern'
-  elements: Pattern[]
+  elements: (Pattern | null)[]
 }
 export interface RestElement extends HasParentNode {
   type: 'RestElement'
diff --git a/typings/eslint-plugin-vue/util-types/ast/jsx-ast.ts b/typings/eslint-plugin-vue/util-types/ast/jsx-ast.ts
index 4f1b04af0..fc59d81f9 100644
--- a/typings/eslint-plugin-vue/util-types/ast/jsx-ast.ts
+++ b/typings/eslint-plugin-vue/util-types/ast/jsx-ast.ts
@@ -1,6 +1,6 @@
 /**
- * @see https://github.com/facebook/jsx/blob/master/AST.md
- * @see https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/typescript-estree/src/ts-estree/ts-estree.ts
+ * @see https://github.com/facebook/jsx/blob/main/AST.md
+ * @see https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/typescript-estree/src/ts-estree/ts-estree.ts
  */
 import { HasParentNode } from '../node'
 import * as ES from './es-ast'
diff --git a/typings/eslint-plugin-vue/util-types/ast/ts-ast.ts b/typings/eslint-plugin-vue/util-types/ast/ts-ast.ts
index a79d457f4..1e1844632 100644
--- a/typings/eslint-plugin-vue/util-types/ast/ts-ast.ts
+++ b/typings/eslint-plugin-vue/util-types/ast/ts-ast.ts
@@ -1,17 +1,19 @@
 /**
- * @see https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/typescript-estree/src/ts-estree/ts-estree.ts
+ * @see https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/typescript-estree/src/ts-estree/ts-estree.ts
  */
 import { HasParentNode } from '../node'
 import * as ES from './es-ast'
 import { TSESTree } from '@typescript-eslint/types'
 export type TSNode =
   | TSAsExpression
+  | TSNonNullExpression
   | TSTypeParameterInstantiation
   | TSPropertySignature
   | TSMethodSignatureBase
   | TSLiteralType
   | TSCallSignatureDeclaration
   | TSFunctionType
+  | TypeNode
 
 export interface TSAsExpression extends HasParentNode {
   type: 'TSAsExpression'
@@ -19,9 +21,14 @@ export interface TSAsExpression extends HasParentNode {
   typeAnnotation: any
 }
 
+export interface TSNonNullExpression extends HasParentNode {
+  type: 'TSNonNullExpression'
+  expression: ES.Expression
+}
+
 export interface TSTypeParameterInstantiation extends HasParentNode {
   type: 'TSTypeParameterInstantiation'
-  params: TSESTree.TypeNode[]
+  params: TypeNode[]
 }
 
 export type TSPropertySignature =
@@ -90,3 +97,12 @@ export interface TSCallSignatureDeclaration extends TSFunctionSignatureBase {
 export interface TSFunctionType extends TSFunctionSignatureBase {
   type: 'TSFunctionType'
 }
+
+type TypeNodeTypes = `${TSESTree.TypeNode['type']}`
+
+export type TypeNode =
+  | (HasParentNode & {
+      type: Exclude<TypeNodeTypes, 'TSFunctionType' | 'TSLiteralType'>
+    })
+  | TSFunctionType
+  | TSLiteralType
diff --git a/typings/eslint-plugin-vue/util-types/parser-services.ts b/typings/eslint-plugin-vue/util-types/parser-services.ts
index d59d76d3e..5f2b5a24c 100644
--- a/typings/eslint-plugin-vue/util-types/parser-services.ts
+++ b/typings/eslint-plugin-vue/util-types/parser-services.ts
@@ -1,13 +1,13 @@
 import * as VNODE from './node'
 import * as VAST from './ast'
 import * as eslint from 'eslint'
+import { ESNode, TSNode } from './ast'
 
 type TemplateListenerBase = {
   [T in keyof VAST.VNodeListenerMap]?: (node: VAST.VNodeListenerMap[T]) => void
 }
 export interface TemplateListener
-  extends TemplateListenerBase,
-    eslint.Rule.NodeListener {
+  extends TemplateListenerBase, eslint.Rule.NodeListener {
   [key: string]: ((node: VAST.ParamNode) => void) | undefined
 }
 
@@ -27,6 +27,13 @@ export interface ParserServices {
     }
   ) => eslint.Rule.RuleListener
   getDocumentFragment?: () => VAST.VDocumentFragment | null
+  // for typescript-eslint/parser
+  esTreeNodeToTSNodeMap?: Map<
+    ESNode | TSNode | import('@typescript-eslint/types').TSESTree.Node,
+    import('typescript').Node
+  >
+  program?: import('typescript').Program
+  hasFullTypeInformation?: boolean
 }
 export namespace ParserServices {
   export interface TokenStore {
diff --git a/typings/eslint-plugin-vue/util-types/utils.ts b/typings/eslint-plugin-vue/util-types/utils.ts
index d998761be..ebe9933d3 100644
--- a/typings/eslint-plugin-vue/util-types/utils.ts
+++ b/typings/eslint-plugin-vue/util-types/utils.ts
@@ -40,10 +40,20 @@ export interface ScriptSetupVisitor extends ScriptSetupVisitorBase {
   onDefinePropsExit?(node: CallExpression, props: ComponentProp[]): void
   onDefineEmitsEnter?(node: CallExpression, emits: ComponentEmit[]): void
   onDefineEmitsExit?(node: CallExpression, emits: ComponentEmit[]): void
+  onDefineOptionsEnter?(node: CallExpression): void
+  onDefineOptionsExit?(node: CallExpression): void
+  onDefineSlotsEnter?(node: CallExpression, slots: ComponentSlot[]): void
+  onDefineSlotsExit?(node: CallExpression, slots: ComponentSlot[]): void
+  onDefineExposeEnter?(node: CallExpression): void
+  onDefineExposeExit?(node: CallExpression): void
+  onDefineModelEnter?(node: CallExpression, model: ComponentModel): void
+  onDefineModelExit?(node: CallExpression, model: ComponentModel): void
   [query: string]:
     | ((node: VAST.ParamNode) => void)
     | ((node: CallExpression, props: ComponentProp[]) => void)
     | ((node: CallExpression, emits: ComponentEmit[]) => void)
+    | ((node: CallExpression, slots: ComponentSlot[]) => void)
+    | ((node: CallExpression, model: ComponentModel) => void)
     | undefined
 }
 
@@ -51,14 +61,12 @@ type ComponentArrayPropDetectName = {
   type: 'array'
   key: Literal | TemplateLiteral
   propName: string
-  value: null
   node: Expression | SpreadElement
 }
 type ComponentArrayPropUnknownName = {
   type: 'array'
   key: null
   propName: null
-  value: null
   node: Expression | SpreadElement
 }
 export type ComponentArrayProp =
@@ -85,41 +93,46 @@ export type ComponentObjectProp =
 
 export type ComponentUnknownProp = {
   type: 'unknown'
-  key: null
   propName: null
-  value: null
-  node: Expression | SpreadElement | null
+  node: Expression | SpreadElement | TypeNode | null
 }
 
 export type ComponentTypeProp = {
   type: 'type'
   key: Identifier | Literal
   propName: string
-  value: null
   node: TSPropertySignature | TSMethodSignature
 
   required: boolean
   types: string[]
 }
 
+export type ComponentInferTypeProp = {
+  type: 'infer-type'
+  propName: string
+  node: TypeNode
+
+  required: boolean
+  types: string[]
+}
+
 export type ComponentProp =
   | ComponentArrayProp
   | ComponentObjectProp
   | ComponentTypeProp
+  | ComponentInferTypeProp
   | ComponentUnknownProp
 
 type ComponentArrayEmitDetectName = {
   type: 'array'
   key: Literal | TemplateLiteral
   emitName: string
-  value: null
   node: Expression | SpreadElement
 }
 type ComponentArrayEmitUnknownName = {
   type: 'array'
   key: null
   emitName: null
-  value: null
   node: Expression | SpreadElement
 }
 export type ComponentArrayEmit =
@@ -146,22 +159,69 @@ export type ComponentObjectEmit =
 
 export type ComponentUnknownEmit = {
   type: 'unknown'
-  key: null
   emitName: null
-  value: null
-  node: Expression | SpreadElement | null
+  node: Expression | SpreadElement | TypeNode | null
 }
 
-export type ComponentTypeEmit = {
+export type ComponentTypeEmitCallSignature = {
   type: 'type'
   key: TSLiteralType
   emitName: string
-  value: null
   node: TSCallSignatureDeclaration | TSFunctionType
 }
+export type ComponentTypeEmitPropertySignature = {
+  type: 'type'
+  key: Identifier | Literal
+  emitName: string
+  node: TSPropertySignature | TSMethodSignature
+}
+export type ComponentTypeEmit =
+  | ComponentTypeEmitCallSignature
+  | ComponentTypeEmitPropertySignature
+
+export type ComponentInferTypeEmit = {
+  type: 'infer-type'
+  emitName: string
+  node: TypeNode
+}
 
 export type ComponentEmit =
   | ComponentArrayEmit
   | ComponentObjectEmit
   | ComponentTypeEmit
+  | ComponentInferTypeEmit
   | ComponentUnknownEmit
+
+export type ComponentUnknownSlot = {
+  type: 'unknown'
+  slotName: null
+  node: Expression | SpreadElement | TypeNode | null
+}
+
+export type ComponentTypeSlot = {
+  type: 'type'
+  key: Identifier | Literal
+  slotName: string
+  node: TSPropertySignature | TSMethodSignature
+}
+
+export type ComponentInferTypeSlot = {
+  type: 'infer-type'
+  slotName: string
+  node: TypeNode
+}
+
+export type ComponentSlot =
+  | ComponentTypeSlot
+  | ComponentInferTypeSlot
+  | ComponentUnknownSlot
+
+export type ComponentModelName = {
+  modelName: string
+  node: Literal | null
+}
+export type ComponentModel = {
+  name: ComponentModelName
+  options: Expression | null
+  typeNode: TypeNode | null
+}
diff --git a/typings/eslint/index.d.ts b/typings/eslint/index.d.ts
index 7bfda0245..f45f216d8 100644
--- a/typings/eslint/index.d.ts
+++ b/typings/eslint/index.d.ts
@@ -54,6 +54,9 @@ export namespace Scope {
     eslintExplicitGlobal?: boolean | undefined
     eslintExplicitGlobalComments?: Comment[] | undefined
     eslintImplicitGlobalSetting?: 'readonly' | 'writable' | undefined
+
+    isTypeVariable?: boolean
+    isValueVariable?: boolean
   }
   interface Reference {
     identifier: VAST.Identifier
@@ -227,6 +230,9 @@ export class SourceCode /*extends ESLintSourceCode*/ {
   getCommentsBefore(nodeOrToken: VNODE.HasLocation): VNODE.Comment[]
   getCommentsAfter(nodeOrToken: VNODE.HasLocation): VNODE.Comment[]
   getCommentsInside(node: VNODE.HasLocation): VNODE.Comment[]
+
+  markVariableAsUsed(name: string, node?: VNODE.HasLocation): void
+  getScope(node: VNODE.HasLocation): Scope.Scope
 }
 export namespace SourceCode {
   interface Config {
@@ -314,21 +320,37 @@ export namespace Rule {
     id: string
     options: ESLintRule.RuleContext['options']
     settings: { [name: string]: any }
-    parserPath: string
-    parserOptions: any
-    parserServices: parserServices.ParserServices
-
-    getAncestors(): VAST.ESNode[]
-
-    getDeclaredVariables(node: VAST.ESNode): Scope.Variable[]
-    getFilename(): string
-    getScope(): Scope.Scope
-    getSourceCode(): SourceCode
-    markVariableAsUsed(name: string): boolean
+    /** @deprecated removed in ESLint v10 */
+    parserPath?: string
+    /** @deprecated removed in ESLint v10 */
+    parserOptions?: ESLintLinter.ParserOptions
+    /** For flat config  */
+    languageOptions?: ESLintLinter.FlatConfig['languageOptions']
+    /** @deprecated removed in ESLint v9 */
+    parserServices?: parserServices.ParserServices
+
+    /** @deprecated removed in ESLint v9 */
+    getAncestors?(): VAST.ESNode[]
+    /** @deprecated removed in ESLint v9 */
+    getDeclaredVariables?(node: VAST.ESNode): Scope.Variable[]
+    /** @deprecated removed in ESLint v10 */
+    getFilename?(): string
+    filename: string
+    /** @deprecated removed in ESLint v10 */
+    getPhysicalFilename?(): string
+    physicalFilename: string
+    /** @deprecated removed in ESLint v9 */
+    getScope?(): Scope.Scope
+    /** @deprecated removed in ESLint v10 */
+    getSourceCode?(): SourceCode
+    sourceCode: SourceCode
+    /** @deprecated removed in ESLint v9 */
+    markVariableAsUsed?(name: string): boolean
     report(descriptor: ReportDescriptor): void
 
-    // eslint@6 does not have this method.
+    /** @deprecated removed in ESLint v10 */
     getCwd?: () => string
+    cwd: string
   }
 
   type ReportDescriptor =
@@ -366,17 +388,17 @@ export class Linter {
 export namespace Linter {
   type LintMessage = ESLintLinter.LintMessage
   type LintOptions = ESLintLinter.LintOptions
+  type LegacyConfig = ESLintLinter.LegacyConfig
+  type FlatConfig = ESLintLinter.FlatConfig
 }
-
+export type ReportDescriptorFix = (
+  fixer: Rule.RuleFixer
+) => null | Rule.Fix | IterableIterator<Rule.Fix> | Rule.Fix[]
 interface ReportDescriptorOptionsBase {
   data?: {
     [key: string]: string | number
   }
-  fix?:
-    | null
-    | ((
-        fixer: Rule.RuleFixer
-      ) => null | Rule.Fix | IterableIterator<Rule.Fix> | Rule.Fix[])
+  fix?: null | ReportDescriptorFix
 }
 
 interface SuggestionReportDescriptor1 extends ReportDescriptorOptionsBase {
diff --git a/vitest.config.mts b/vitest.config.mts
new file mode 100644
index 000000000..be1e63448
--- /dev/null
+++ b/vitest.config.mts
@@ -0,0 +1,24 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    include: ['tests/lib/**/*.js', 'tests/integrations/**/*.js'],
+    exclude: [
+      '**/node_modules/**',
+      '**/dist/**',
+      'tests/fixtures/**',
+      'tests/integrations/flat-config/eslint.config.js',
+      'tests/lib/rules/no-unsupported-features/utils.js'
+    ],
+    testTimeout: 60_000,
+    globals: true,
+    coverage: {
+      provider: 'v8',
+      include: ['lib/**/*.js'],
+      exclude: ['tests/**', 'dist/**', 'tools/**', 'node_modules/**'],
+      reporter: ['text', 'lcov', 'json-summary', 'html'],
+      all: true,
+      reportsDirectory: './coverage'
+    }
+  }
+})