diff --git a/docs/rules/README.md b/docs/rules/README.md
index 867cbe2bc..cdec9c55b 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -29,7 +29,6 @@ Rules in this category are enabled for all presets provided by eslint-plugin-vue
 |:--------|:------------|:--:|:--:|
 | [vue/comment-directive](./comment-directive.md) | support comment-directives in `<template>` |  | :warning: |
 | [vue/jsx-uses-vars](./jsx-uses-vars.md) | prevent variables used in JSX to be marked as unused |  | :warning: |
-| [vue/script-setup-uses-vars](./script-setup-uses-vars.md) | prevent `<script setup>` variables used in `<template>` to be marked as unused |  | :warning: |
 
 </rules-table>
 
@@ -320,3 +319,4 @@ The following rules extend the rules provided by ESLint itself and apply them to
 | [vue/name-property-casing](./name-property-casing.md) | [vue/component-definition-name-casing](./component-definition-name-casing.md) |
 | [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) |
 | [vue/no-unregistered-components](./no-unregistered-components.md) | [vue/no-undef-components](./no-undef-components.md) |
+| [vue/script-setup-uses-vars](./script-setup-uses-vars.md) | (no replacement) |
diff --git a/docs/rules/jsx-uses-vars.md b/docs/rules/jsx-uses-vars.md
index a21279b10..1c854a623 100644
--- a/docs/rules/jsx-uses-vars.md
+++ b/docs/rules/jsx-uses-vars.md
@@ -40,7 +40,6 @@ If you are not using JSX or if you do not use the `no-unused-vars` rule then you
 
 ## :couple: Related Rules
 
-- [vue/script-setup-uses-vars](./script-setup-uses-vars.md)
 - [no-unused-vars](https://eslint.org/docs/rules/no-unused-vars)
 
 ## :rocket: Version
diff --git a/docs/rules/script-setup-uses-vars.md b/docs/rules/script-setup-uses-vars.md
index 42de582bd..f4d68926a 100644
--- a/docs/rules/script-setup-uses-vars.md
+++ b/docs/rules/script-setup-uses-vars.md
@@ -9,7 +9,13 @@ since: v7.13.0
 
 > prevent `<script setup>` variables used in `<template>` 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"`.
+- :warning: This rule was **deprecated**.
+
+::: tip
+
+This rule is not needed when using `vue-eslint-parser` v9.0.0 or later.
+
+:::
 
 ESLint `no-unused-vars` rule does not detect variables in `<script setup>` used in `<template>`.
 This rule will find variables in `<script setup>` used in `<template>` and mark them as used.
@@ -47,7 +53,11 @@ After turning on, `Foo` is being marked as used and `no-unused-vars` rule doesn'
 
 ## :mute: When Not To Use It
 
-If you are not using `<script setup>` or if you do not use the `no-unused-vars` rule then you can disable this rule.
+You can disable this rule in any of the following cases:
+
+- You are using `vue-eslint-parser` v9.0.0 or later.
+- You are not using `<script setup>`.
+- You do not use the `no-unused-vars` rule.
 
 ## :couple: Related Rules
 
diff --git a/docs/user-guide/README.md b/docs/user-guide/README.md
index b083a6bd3..033964ebb 100644
--- a/docs/user-guide/README.md
+++ b/docs/user-guide/README.md
@@ -342,36 +342,15 @@ See also: "[Visual Studio Code](#editor-integrations)" section and [Vetur - Lint
 
 #### The variables used in the `<template>` are warned by `no-unused-vars` rule
 
-You must use [vue/script-setup-uses-vars](../rules/script-setup-uses-vars.md) rule.  
-In your configuration, use the rule set provided by `eslint-plugin-vue` or enable it rule.
+You need to use [vue-eslint-parser] v9.0.0 or later.
 
-Example **.eslintrc.js**:
-
-```js
-module.exports = {
-  // Use the rule set.
-  extends: ['plugin:vue/base'],
-  rules: {
-    // Enable vue/script-setup-uses-vars rule
-    'vue/script-setup-uses-vars': 'error',
-  }
-}
-```
+Previously you had to use the [vue/script-setup-uses-vars](../rules/script-setup-uses-vars.md) rule, this is no longer needed.
 
 #### Compiler macros such as `defineProps` and `defineEmits` generate `no-undef` warnings
 
-You need to enable the compiler macros environment in your ESLint configuration file.
-If you don't want to expose these variables globally, you can use `/* global defineProps, defineEmits */` instead.
+You need to use [vue-eslint-parser] v9.0.0 or later.
 
-Example **.eslintrc.js**:
-
-```js
-module.exports = {
-  env: {
-    'vue/setup-compiler-macros': true
-  }
-}
-```
+Previously you had to use the `vue/setup-compiler-macros` environment, this is no longer needed.
 
 #### Parsing error with Top Level `await`
 
@@ -411,3 +390,5 @@ module.exports = {
 
 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/lib/configs/base.js b/lib/configs/base.js
index 145991976..3724461e2 100644
--- a/lib/configs/base.js
+++ b/lib/configs/base.js
@@ -16,7 +16,6 @@ module.exports = {
   plugins: ['vue'],
   rules: {
     'vue/comment-directive': 'error',
-    'vue/jsx-uses-vars': 'error',
-    'vue/script-setup-uses-vars': 'error'
+    'vue/jsx-uses-vars': 'error'
   }
 }
diff --git a/lib/index.js b/lib/index.js
index 39f91b515..3d50e1be7 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -236,6 +236,7 @@ module.exports = {
     '.vue': require('./processor')
   },
   environments: {
+    // Deprecated
     'setup-compiler-macros': {
       globals: {
         defineProps: 'readonly',
diff --git a/lib/rules/script-setup-uses-vars.js b/lib/rules/script-setup-uses-vars.js
index 3cb5eef30..40b8e54ac 100644
--- a/lib/rules/script-setup-uses-vars.js
+++ b/lib/rules/script-setup-uses-vars.js
@@ -32,9 +32,10 @@ module.exports = {
     docs: {
       description:
         'prevent `<script setup>` variables used in `<template>` to be marked as unused', // eslint-disable-line eslint-plugin/require-meta-docs-description
-      categories: ['base'],
+      categories: undefined,
       url: 'https://eslint.vuejs.org/rules/script-setup-uses-vars.html'
     },
+    deprecated: true,
     schema: []
   },
   /**
diff --git a/package.json b/package.json
index 093aab994..632cc0bb8 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,7 @@
     "url": "https://github.com/vuejs/eslint-plugin-vue/issues"
   },
   "engines": {
-    "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+    "node": "^14.17.0 || >=16.0.0"
   },
   "peerDependencies": {
     "eslint": "^6.2.0 || ^7.0.0 || ^8.0.0"
@@ -59,7 +59,7 @@
     "nth-check": "^2.0.1",
     "postcss-selector-parser": "^6.0.9",
     "semver": "^7.3.5",
-    "vue-eslint-parser": "^8.0.1"
+    "vue-eslint-parser": "^9.0.1"
   },
   "devDependencies": {
     "@types/eslint": "^7.28.1",
diff --git a/tests/lib/script-setup-vars.js b/tests/lib/script-setup-vars.js
new file mode 100644
index 000000000..90921984f
--- /dev/null
+++ b/tests/lib/script-setup-vars.js
@@ -0,0 +1,384 @@
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+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: {
+    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: [
+      {
+        filename: 'test.vue',
+        code: `
+        <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++
+          }
+        </script>
+
+        <template>
+          <Foo :count="count" @click="inc" />
+        </template>
+        `
+      },
+      {
+        filename: 'test.vue',
+        code: `
+        <script setup>
+          const msg = 'Hello!'
+        </script>
+
+        <template>
+          <div>{{ msg }}</div>
+        </template>
+        `
+      },
+      {
+        filename: 'test.vue',
+        code: `
+        <script setup>
+          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>
+          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>
+          import { directive as vClickOutside } from 'v-click-outside'
+        </script>
+
+        <template>
+          <div v-click-outside />
+        </template>
+        `
+      },
+
+      // Resolve component name
+      {
+        filename: 'test.vue',
+        code: `
+        <script setup>
+          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>
+          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>
+          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>
+          import {ref} from 'vue'
+          const v = ref(null)
+        </script>
+
+        <template>
+          <div ref="v"/>
+        </template>
+        `
+      },
+
+      //style vars
+      {
+        filename: 'test.vue',
+        code: `
+        <script setup>
+          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>
+        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>
+          // 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: 5
+          },
+          {
+            message: "'baz' is assigned a value but never used.",
+            line: 18
+          }
+        ]
+      },
+
+      // Resolve component name
+      {
+        filename: 'test.vue',
+        code: `
+        <script setup>
+          import camelCase from './component.vue'
+        </script>
+
+        <template>
+          <CamelCase />
+        </template>
+        `,
+        errors: [
+          {
+            message: "'camelCase' is defined but never used.",
+            line: 3
+          }
+        ]
+      },
+
+      // Scope tests
+      {
+        filename: 'test.vue',
+        code: `
+        <script setup>
+          if (a) {
+            const msg = 'Hello!'
+          }
+        </script>
+
+        <template>
+          <div>{{ msg }}</div>
+        </template>
+        `,
+        errors: [
+          {
+            message: "'msg' is assigned a value but never used.",
+            line: 4
+          }
+        ]
+      },
+      {
+        filename: 'test.vue',
+        code: `
+        <script setup>
+          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: 3
+          }
+        ]
+      },
+
+      // Not `<script setup>`
+      {
+        filename: 'test.vue',
+        code: `
+        <script>
+          const msg = 'Hello!'
+        </script>
+
+        <template>
+          <div>{{ msg }}</div>
+        </template>
+        `,
+        errors: [
+          {
+            message: "'msg' is assigned a value but never used.",
+            line: 3
+          }
+        ]
+      },
+
+      //style vars
+      {
+        filename: 'test.vue',
+        code: `
+        <script setup>
+          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."]
+      }
+    ]
+  })
+
+  ruleTester.run('no-undef', ruleNoUndef, {
+    valid: [
+      {
+        filename: 'test.vue',
+        code: `
+        <script setup>
+        const props = defineProps({
+          foo: String
+        })
+
+        const emit = defineEmits(['change', 'delete'])
+        </script>
+        `
+      }
+    ],
+    invalid: [
+      {
+        filename: 'test.vue',
+        code: `
+        <script setup>
+        const props = defineUnknown({
+          foo: String
+        })
+
+        const emit = defineUnknown(['change', 'delete'])
+        </script>
+        `,
+        errors: [
+          {
+            message: "'defineUnknown' is not defined.",
+            line: 3
+          },
+          {
+            message: "'defineUnknown' is not defined.",
+            line: 7
+          }
+        ]
+      }
+    ]
+  })
+})
diff --git a/tools/update-lib-index.js b/tools/update-lib-index.js
index b9a5dcbd9..f57ae1e58 100644
--- a/tools/update-lib-index.js
+++ b/tools/update-lib-index.js
@@ -39,6 +39,8 @@ module.exports = {
     '.vue': require('./processor')
   },
   environments: {
+    // TODO Remove in the next major version
+    /** @deprecated */
     'setup-compiler-macros': {
       globals: {
         defineProps: 'readonly',