From 101cabf6a09cbfc31f3df073093e1b1765ccbfdc Mon Sep 17 00:00:00 2001
From: Vincent Rubinetti <vince.rubinetti@gmail.com>
Date: Tue, 1 Aug 2023 03:51:13 -0400
Subject: [PATCH 1/5] Improve docs and error message for `vue/no-dupe-keys`
 (#2260)

---
 docs/rules/no-dupe-keys.md                  |   5 +-
 docs/rules/no-duplicate-attr-inheritance.md |   2 +-
 docs/rules/no-duplicate-attributes.md       |   5 +-
 lib/rules/no-dupe-keys.js                   |   7 +-
 tests/lib/rules/no-dupe-keys.js             | 108 +++++++++++++-------
 5 files changed, 82 insertions(+), 45 deletions(-)

diff --git a/docs/rules/no-dupe-keys.md b/docs/rules/no-dupe-keys.md
index 41f4a962f..1d9d20f24 100644
--- a/docs/rules/no-dupe-keys.md
+++ b/docs/rules/no-dupe-keys.md
@@ -11,11 +11,12 @@ since: v3.9.0
 
 - :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"`.
 
-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']}">
 
diff --git a/docs/rules/no-duplicate-attr-inheritance.md b/docs/rules/no-duplicate-attr-inheritance.md
index 00662ac60..093b9c35c 100644
--- a/docs/rules/no-duplicate-attr-inheritance.md
+++ b/docs/rules/no-duplicate-attr-inheritance.md
@@ -11,7 +11,7 @@ since: v7.0.0
 
 ## :book: Rule Details
 
-This rule aims to prevent duplicated attribute inheritance.  
+This rule aims to prevent duplicate attribute inheritance.  
 This rule to warn to apply `inheritAttrs: false` when it detects `v-bind="$attrs"` being used.
 
 <eslint-code-block :rules="{'vue/no-duplicate-attr-inheritance': ['error']}">
diff --git a/docs/rules/no-duplicate-attributes.md b/docs/rules/no-duplicate-attributes.md
index 5d843a154..b516fa116 100644
--- a/docs/rules/no-duplicate-attributes.md
+++ b/docs/rules/no-duplicate-attributes.md
@@ -11,13 +11,12 @@ since: v3.0.0
 
 - :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"`.
 
-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']}">
 
diff --git a/lib/rules/no-dupe-keys.js b/lib/rules/no-dupe-keys.js
index c1df4d670..c690d8aa5 100644
--- a/lib/rules/no-dupe-keys.js
+++ b/lib/rules/no-dupe-keys.js
@@ -79,7 +79,8 @@ module.exports = {
       }
     ],
     messages: {
-      duplicatedKey: "Duplicated key '{{name}}'."
+      duplicateKey:
+        "Duplicate key '{{name}}'. May cause name collision in script or template tag."
     }
   },
   /** @param {RuleContext} context */
@@ -96,7 +97,7 @@ module.exports = {
           if (usedNames.has(o.name)) {
             context.report({
               node: o.node,
-              messageId: 'duplicatedKey',
+              messageId: 'duplicateKey',
               data: {
                 name: o.name
               }
@@ -131,7 +132,7 @@ module.exports = {
 
             context.report({
               node: variable.defs[0].node,
-              messageId: 'duplicatedKey',
+              messageId: 'duplicateKey',
               data: {
                 name: prop.propName
               }
diff --git a/tests/lib/rules/no-dupe-keys.js b/tests/lib/rules/no-dupe-keys.js
index 29384f567..72ea22620 100644
--- a/tests/lib/rules/no-dupe-keys.js
+++ b/tests/lib/rules/no-dupe-keys.js
@@ -529,19 +529,23 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 5
         },
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 10
         },
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 14
         },
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 21
         }
       ]
@@ -575,19 +579,23 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 5
         },
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 10
         },
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 14
         },
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 21
         }
       ]
@@ -612,15 +620,18 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 5
         },
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 9
         },
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 12
         }
       ]
@@ -656,19 +667,23 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 7
         },
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 13
         },
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 16
         },
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 23
         }
       ]
@@ -688,7 +703,8 @@ ruleTester.run('no-dupe-keys', rule, {
       options: [{ groups: ['foo'] }],
       errors: [
         {
-          message: "Duplicated key 'bar'.",
+          message:
+            "Duplicate key 'bar'. May cause name collision in script or template tag.",
           line: 7
         }
       ]
@@ -713,7 +729,8 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 12
         }
       ]
@@ -736,7 +753,8 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 10
         }
       ]
@@ -757,7 +775,8 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 9
         }
       ]
@@ -778,7 +797,8 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 9
         }
       ]
@@ -799,7 +819,8 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 9
         }
       ]
@@ -820,7 +841,8 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 9
         }
       ]
@@ -840,7 +862,8 @@ ruleTester.run('no-dupe-keys', rule, {
       options: [{ groups: ['foo'] }],
       errors: [
         {
-          message: "Duplicated key 'bar'.",
+          message:
+            "Duplicate key 'bar'. May cause name collision in script or template tag.",
           line: 7
         }
       ]
@@ -860,7 +883,8 @@ ruleTester.run('no-dupe-keys', rule, {
       options: [{ groups: ['foo'] }],
       errors: [
         {
-          message: "Duplicated key 'bar'.",
+          message:
+            "Duplicate key 'bar'. May cause name collision in script or template tag.",
           line: 7
         }
       ]
@@ -884,7 +908,8 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 6
         }
       ]
@@ -904,7 +929,8 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 7
         }
       ]
@@ -923,7 +949,8 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 6
         }
       ]
@@ -943,7 +970,8 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 7
         }
       ]
@@ -963,7 +991,8 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 7
         }
       ]
@@ -981,7 +1010,8 @@ ruleTester.run('no-dupe-keys', rule, {
       parser: require.resolve('vue-eslint-parser'),
       errors: [
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 6
         }
       ]
@@ -1008,15 +1038,18 @@ ruleTester.run('no-dupe-keys', rule, {
       parser: require.resolve('vue-eslint-parser'),
       errors: [
         {
-          message: "Duplicated key 'baz'.",
+          message:
+            "Duplicate key 'baz'. May cause name collision in script or template tag.",
           line: 4
         },
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 12
         },
         {
-          message: "Duplicated key 'bar'.",
+          message:
+            "Duplicate key 'bar'. May cause name collision in script or template tag.",
           line: 15
         }
       ]
@@ -1038,11 +1071,13 @@ ruleTester.run('no-dupe-keys', rule, {
       parserOptions: { parser: require.resolve('@typescript-eslint/parser') },
       errors: [
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 8
         },
         {
-          message: "Duplicated key 'bar'.",
+          message:
+            "Duplicate key 'bar'. May cause name collision in script or template tag.",
           line: 9
         }
       ]
@@ -1059,7 +1094,8 @@ ruleTester.run('no-dupe-keys', rule, {
       parser: require.resolve('vue-eslint-parser'),
       errors: [
         {
-          message: "Duplicated key 'bar'.",
+          message:
+            "Duplicate key 'bar'. May cause name collision in script or template tag.",
           line: 5
         }
       ]

From 181e857c7aa7f49adbf619640ee43d3ccf8e777d Mon Sep 17 00:00:00 2001
From: Flo Edelmann <git@flo-edelmann.de>
Date: Sat, 5 Aug 2023 04:52:40 +0200
Subject: [PATCH 2/5] Support template literals in
 `vue/no-deprecated-model-definition` (#2258)

---
 lib/rules/no-deprecated-model-definition.js   | 16 +++--
 .../rules/no-deprecated-model-definition.js   | 66 +++++++++++++++++++
 2 files changed, 75 insertions(+), 7 deletions(-)

diff --git a/lib/rules/no-deprecated-model-definition.js b/lib/rules/no-deprecated-model-definition.js
index 9540ffc06..d88a5028a 100644
--- a/lib/rules/no-deprecated-model-definition.js
+++ b/lib/rules/no-deprecated-model-definition.js
@@ -12,7 +12,7 @@ const allowedEventNames = new Set(['update:modelValue', 'update:model-value'])
 /**
  * @param {ObjectExpression} node
  * @param {string} key
- * @returns {Literal | undefined}
+ * @returns {Literal | TemplateLiteral | undefined}
  */
 function findPropertyValue(node, key) {
   const property = node.properties.find(
@@ -24,7 +24,7 @@ function findPropertyValue(node, key) {
   if (
     !property ||
     property.type !== 'Property' ||
-    property.value.type !== 'Literal'
+    !utils.isStringLiteral(property.value)
   ) {
     return undefined
   }
@@ -33,7 +33,7 @@ function findPropertyValue(node, key) {
 
 /**
  * @param {RuleFixer} fixer
- * @param {Literal} node
+ * @param {Literal | TemplateLiteral} node
  * @param {string} text
  */
 function replaceLiteral(fixer, node, text) {
@@ -93,10 +93,12 @@ module.exports = {
       if (
         !propName ||
         !eventName ||
-        typeof propName.value !== 'string' ||
-        typeof eventName.value !== 'string' ||
-        !allowedPropNames.has(propName.value) ||
-        !allowedEventNames.has(eventName.value)
+        !allowedPropNames.has(
+          utils.getStringLiteralValue(propName, true) ?? ''
+        ) ||
+        !allowedEventNames.has(
+          utils.getStringLiteralValue(eventName, true) ?? ''
+        )
       ) {
         context.report({
           node: modelProperty,
diff --git a/tests/lib/rules/no-deprecated-model-definition.js b/tests/lib/rules/no-deprecated-model-definition.js
index 908be654a..ebdcb8599 100644
--- a/tests/lib/rules/no-deprecated-model-definition.js
+++ b/tests/lib/rules/no-deprecated-model-definition.js
@@ -52,6 +52,20 @@ tester.run('no-deprecated-model-definition', rule, {
         </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: [
@@ -320,6 +334,58 @@ tester.run('no-deprecated-model-definition', rule, {
           ]
         }
       ]
+    },
+    {
+      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>
+      `
+            }
+          ]
+        }
+      ]
     }
   ]
 })

From 4112be528e831995d6fd09a2d727ec19e99e865c Mon Sep 17 00:00:00 2001
From: Yosuke Ota <otameshiyo23@gmail.com>
Date: Wed, 9 Aug 2023 20:07:32 +0900
Subject: [PATCH 3/5] Rename `vue/no-setup-props-destructure` to
 `vue/no-setup-props-reactivity-loss` and remove from config (#2268)

---
 docs/rules/index.md                           |   3 +-
 docs/rules/no-setup-props-destructure.md      |   6 +-
 docs/rules/no-setup-props-reactivity-loss.md  | 102 +++
 lib/configs/essential.js                      |   1 -
 lib/configs/vue3-essential.js                 |   1 -
 lib/index.js                                  |   1 +
 lib/rules/no-setup-props-destructure.js       | 265 +------
 lib/rules/no-setup-props-reactivity-loss.js   | 272 +++++++
 .../rules/no-setup-props-reactivity-loss.js   | 682 ++++++++++++++++++
 9 files changed, 1071 insertions(+), 262 deletions(-)
 create mode 100644 docs/rules/no-setup-props-reactivity-loss.md
 create mode 100644 lib/rules/no-setup-props-reactivity-loss.js
 create mode 100644 tests/lib/rules/no-setup-props-reactivity-loss.js

diff --git a/docs/rules/index.md b/docs/rules/index.md
index 6b06a7c71..d5525a785 100644
--- a/docs/rules/index.md
+++ b/docs/rules/index.md
@@ -79,7 +79,6 @@ Rules in this category are enabled for all presets provided by eslint-plugin-vue
 | [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: |
@@ -245,6 +244,7 @@ For example:
 | [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-root-v-if](./no-root-v-if.md) | disallow `v-if` directives on root element |  | :hammer: |
+| [vue/no-setup-props-reactivity-loss](./no-setup-props-reactivity-loss.md) | disallow usages that lose the reactivity of `props` passed to `setup` |  | :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" | :bulb: | :warning: |
 | [vue/no-this-in-before-route-enter](./no-this-in-before-route-enter.md) | disallow `this` usage in a `beforeRouteEnter` method |  | :warning: |
@@ -339,6 +339,7 @@ The following rules extend the rules provided by ESLint itself and apply them to
 |:--------|:------------|
 | [vue/component-tags-order](./component-tags-order.md) | [vue/block-order](./block-order.md) |
 | [vue/no-invalid-model-keys](./no-invalid-model-keys.md) | [vue/valid-model-definition](./valid-model-definition.md) |
+| [vue/no-setup-props-destructure](./no-setup-props-destructure.md) | [vue/no-setup-props-reactivity-loss](./no-setup-props-reactivity-loss.md) |
 | [vue/script-setup-uses-vars](./script-setup-uses-vars.md) | (no replacement) |
 | [vue/v-on-function-call](./v-on-function-call.md) | [vue/v-on-handler-style](./v-on-handler-style.md) |
 
diff --git a/docs/rules/no-setup-props-destructure.md b/docs/rules/no-setup-props-destructure.md
index 8db330355..37fdcf8b5 100644
--- a/docs/rules/no-setup-props-destructure.md
+++ b/docs/rules/no-setup-props-destructure.md
@@ -2,14 +2,14 @@
 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_sign: This rule was **deprecated** and replaced by [vue/no-setup-props-reactivity-loss](no-setup-props-reactivity-loss.md) rule.
 
 ## :book: Rule Details
 
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..bc90415ec
--- /dev/null
+++ b/docs/rules/no-setup-props-reactivity-loss.md
@@ -0,0 +1,102 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-setup-props-reactivity-loss
+description: disallow usages that lose the reactivity of `props` passed to `setup`
+---
+# vue/no-setup-props-reactivity-loss
+
+> disallow usages that lose the reactivity of `props` passed to `setup`
+
+- :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 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)
+
+## :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/lib/configs/essential.js b/lib/configs/essential.js
index 944a162ea..e2c66ceba 100644
--- a/lib/configs/essential.js
+++ b/lib/configs/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/vue3-essential.js b/lib/configs/vue3-essential.js
index 5fe530beb..f71508f75 100644
--- a/lib/configs/vue3-essential.js
+++ b/lib/configs/vue3-essential.js
@@ -42,7 +42,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',
diff --git a/lib/index.js b/lib/index.js
index ace37ce59..d69a03f43 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -131,6 +131,7 @@ module.exports = {
     'no-restricted-v-bind': require('./rules/no-restricted-v-bind'),
     'no-root-v-if': require('./rules/no-root-v-if'),
     'no-setup-props-destructure': require('./rules/no-setup-props-destructure'),
+    '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'),
diff --git a/lib/rules/no-setup-props-destructure.js b/lib/rules/no-setup-props-destructure.js
index 653a0b449..7b49b0a45 100644
--- a/lib/rules/no-setup-props-destructure.js
+++ b/lib/rules/no-setup-props-destructure.js
@@ -3,269 +3,22 @@
  * See LICENSE file in root directory for full license.
  */
 'use strict'
-const { findVariable } = require('@eslint-community/eslint-utils')
-const utils = require('../utils')
+const baseRule = require('./no-setup-props-reactivity-loss')
 
 module.exports = {
+  // eslint-disable-next-line eslint-plugin/require-meta-schema, eslint-plugin/prefer-message-ids, internal/no-invalid-meta, eslint-plugin/require-meta-type -- inherit schema from base rule
   meta: {
-    type: 'suggestion',
+    ...baseRule.meta,
+    // eslint-disable-next-line eslint-plugin/require-meta-docs-description, internal/no-invalid-meta-docs-categories, eslint-plugin/meta-property-ordering
     docs: {
-      description: 'disallow destructuring of `props` passed to `setup`',
-      categories: ['vue3-essential', 'essential'],
+      ...baseRule.meta.docs,
       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.'
-    }
+    deprecated: true,
+    replacedBy: ['no-setup-props-reactivity-loss']
   },
-  /**
-   * @param {RuleContext} context
-   * @returns {RuleListener}
-   **/
+  /** @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()
-    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)
-      ) {
-        return report(rightNode, 'getProperty', propsReferences.scopeName)
-      }
-
-      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)
-      }
-    }
-
-    /**
-     * @param {Expression} node
-     * @param {ScopePropsReferences} propsReferences
-     */
-    function isPropsMemberAccessed(node, propsReferences) {
-      const propRefs = [...propsReferences.refs.values()]
-
-      return propRefs.some((props) => {
-        const isPropsInExpressionRange = utils.inRange(node.range, props)
-        const isPropsMemberExpression =
-          props.parent.type === 'MemberExpression' &&
-          props.parent.object === props
-
-        return isPropsInExpressionRange && isPropsMemberExpression
-      })
-    }
-
-    /**
-     * @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 is in another scope, we can't check it.
-        if (reference.from !== context.getScope()) {
-          continue
-        }
-
-        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 {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
-          }
-          processPattern(id, context.getSourceCode().ast, '<script setup>')
-        }
-      }),
-      utils.defineVueVisitor(context, {
-        onSetupFunctionEnter(node) {
-          const propsParam = utils.skipDefaultParamValue(node.params[0])
-          processPattern(propsParam, node, 'setup()')
-        }
-      })
-    )
+    return baseRule.create(context)
   }
 }
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..1292ace7a
--- /dev/null
+++ b/lib/rules/no-setup-props-reactivity-loss.js
@@ -0,0 +1,272 @@
+/**
+ * @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')
+
+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 {Set<Identifier>} refs
+     * @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)
+      ) {
+        return report(rightNode, 'getProperty', propsReferences.scopeName)
+      }
+
+      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)
+      }
+    }
+
+    /**
+     * @param {Expression} node
+     * @param {ScopePropsReferences} propsReferences
+     */
+    function isPropsMemberAccessed(node, propsReferences) {
+      const propRefs = [...propsReferences.refs.values()]
+
+      return propRefs.some((props) => {
+        const isPropsInExpressionRange = utils.inRange(node.range, props)
+        const isPropsMemberExpression =
+          props.parent.type === 'MemberExpression' &&
+          props.parent.object === props
+
+        return isPropsInExpressionRange && isPropsMemberExpression
+      })
+    }
+
+    /**
+     * @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 is in another scope, we can't check it.
+        if (reference.from !== context.getScope()) {
+          continue
+        }
+
+        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 {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
+          }
+          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/tests/lib/rules/no-setup-props-reactivity-loss.js b/tests/lib/rules/no-setup-props-reactivity-loss.js
new file mode 100644
index 000000000..2e2480631
--- /dev/null
+++ b/tests/lib/rules/no-setup-props-reactivity-loss.js
@@ -0,0 +1,682 @@
+/**
+ * @author Yosuke Ota
+ */
+'use strict'
+
+const RuleTester = require('eslint').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' }
+})
+
+tester.run('no-setup-props-reactivity-loss', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        setup(props) {
+          watch(() => {
+            console.log(props.count) // ok
+          })
+
+          return () => {
+            return h('div', props.count) // ok
+          }
+        }
+      }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        setup(props) {
+          watch(() => {
+            const { count } = props // ok
+            console.log(count)
+          })
+
+          return () => {
+            const { count } = props // ok
+            return h('div', count)
+          }
+        }
+      }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        _setup({count}) {
+        }
+      }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        setup() {
+        }
+      }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        setup(...args) {
+        }
+      }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        setup(props) {
+          watch(() => {
+            ({ count } = props)
+          })
+        }
+      }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      var noVue = {
+        setup(props) {
+          const { count } = props
+        }
+      }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        setup(props) {
+          const {x} = noProps
+          ({y} = noProps)
+          const z = noProps.z
+        }
+      }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        setup(props) {
+          ({props} = x)
+        }
+      }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        watch: {
+          setup({val}) { }
+        }
+      }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        setup(props) {
+          const props2 = props
+        }
+      }
+      </script>
+      `
+    },
+    `
+      Vue.component('test', {
+        el: a = b
+      })
+    `,
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const props = defineProps({count:Number})
+      watch(() => {
+        const {count} = props
+      })
+      watch(() => {
+        const count = props.count
+      })
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'getProperty',
+          line: 4
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const props = defineProps({count:Number})
+      watch(() => {
+        ({ count } = props)
+      })
+      watch(() => {
+        count = props.count
+      })
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'getProperty',
+          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>
+      `
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        setup({ count }) { // error
+          watch(() => {
+            console.log(count) // not going to detect changes
+          })
+
+          return () => {
+            return h('div', count) // not going to update
+          }
+        }
+      }
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'destructuring',
+          line: 4,
+          column: 15,
+          endLine: 4,
+          endColumn: 24
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        setup(props) {
+          const { count } = props // error
+        }
+      }
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'getProperty',
+          line: 5,
+          column: 17,
+          endLine: 5,
+          endColumn: 26
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        setup: (props) => {
+          const { count } = props
+        }
+      }
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'getProperty',
+          line: 5
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        setup(props) {
+          ({ count } = props)
+        }
+      }
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'getProperty',
+          line: 5
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        setup(p) {
+          const { count } = p
+        }
+      }
+
+      Vue.component('component', {
+        setup(p) {
+          const { count } = p
+        }
+      })
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'getProperty',
+          line: 5
+        },
+        {
+          messageId: 'getProperty',
+          line: 11
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        setup(p) {
+          const { count } = p
+        },
+        _setup(p) {
+          const { count } = p
+        },
+      }
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'getProperty',
+          line: 5
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        setup(p) {
+          const { x } = p
+          const { y } = p
+        }
+      }
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'getProperty',
+          line: 5
+        },
+        {
+          messageId: 'getProperty',
+          line: 6
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        setup(p) {
+          const foo = p.bar
+        }
+      }
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'getProperty',
+          line: 5
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        setup(p) {
+          const x = p.foo
+          const y = p?.bar
+          const z = (p?.baz).qux
+
+          const xc = p?.foo?.()
+          const yc = (p?.bar)?.()
+          const zc = (p?.baz.qux)?.()
+        }
+      }
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'getProperty',
+          line: 5
+        },
+        {
+          messageId: 'getProperty',
+          line: 6
+        },
+        {
+          messageId: 'getProperty',
+          line: 7
+        },
+        {
+          messageId: 'getProperty',
+          line: 9
+        },
+        {
+          messageId: 'getProperty',
+          line: 10
+        },
+        {
+          messageId: 'getProperty',
+          line: 11
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        setup(p) {
+          let foo
+          foo = p.bar
+        }
+      }
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'getProperty',
+          line: 6
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        setup(p) {
+          const {foo} = p.bar
+        }
+      }
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'getProperty',
+          line: 5
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        setup(p) {
+          foo.bar = p.bar
+        }
+      }
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'getProperty',
+          line: 5
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const {count} = defineProps({count:Number})
+      </script>
+      `,
+      errors: [
+        {
+          message:
+            'Destructuring the `props` will cause the value to lose reactivity.',
+          line: 3
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const props = defineProps({count:Number})
+      const {count} = props
+      ;({count} = props)
+      </script>
+      `,
+      errors: [
+        {
+          message:
+            'Getting a value from the `props` in root scope of `<script setup>` will cause the value to lose reactivity.',
+          line: 4
+        },
+        {
+          message:
+            'Getting a value from the `props` in root scope of `<script setup>` will cause the value to lose reactivity.',
+          line: 5
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const props = defineProps({count:Number})
+      const count = props.count
+      count = props.count
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'getProperty',
+          line: 4
+        },
+        {
+          messageId: 'getProperty',
+          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
+        }
+      ]
+    }
+  ]
+})

From 7422a0e855a76cf5cc8d00ebbe46868ca4c465a8 Mon Sep 17 00:00:00 2001
From: Yosuke Ota <otameshiyo23@gmail.com>
Date: Wed, 9 Aug 2023 20:18:03 +0900
Subject: [PATCH 4/5] Rename `vue/no-ref-object-destructure` to
 `vue/no-ref-object-reactivity-loss` (#2269)

---
 docs/rules/index.md                           |   3 +-
 docs/rules/no-ref-object-destructure.md       |   6 +-
 docs/rules/no-ref-object-reactivity-loss.md   |  55 +++
 lib/index.js                                  |   1 +
 lib/rules/no-ref-object-destructure.js        | 167 +------
 lib/rules/no-ref-object-reactivity-loss.js    | 171 +++++++
 .../rules/no-ref-object-reactivity-loss.js    | 449 ++++++++++++++++++
 7 files changed, 692 insertions(+), 160 deletions(-)
 create mode 100644 docs/rules/no-ref-object-reactivity-loss.md
 create mode 100644 lib/rules/no-ref-object-reactivity-loss.js
 create mode 100644 tests/lib/rules/no-ref-object-reactivity-loss.js

diff --git a/docs/rules/index.md b/docs/rules/index.md
index d5525a785..224cddc7d 100644
--- a/docs/rules/index.md
+++ b/docs/rules/index.md
@@ -231,7 +231,7 @@ For example:
 | [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-ref-object-destructure](./no-ref-object-destructure.md) | disallow destructuring of ref objects that can lead to loss of reactivity |  | :warning: |
+| [vue/no-ref-object-reactivity-loss](./no-ref-object-reactivity-loss.md) | disallow usages of ref objects that can lead to loss of reactivity |  | :warning: |
 | [vue/no-required-prop-with-default](./no-required-prop-with-default.md) | enforce props with default values to be optional | :wrench::bulb: | :warning: |
 | [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: |
@@ -339,6 +339,7 @@ The following rules extend the rules provided by ESLint itself and apply them to
 |:--------|:------------|
 | [vue/component-tags-order](./component-tags-order.md) | [vue/block-order](./block-order.md) |
 | [vue/no-invalid-model-keys](./no-invalid-model-keys.md) | [vue/valid-model-definition](./valid-model-definition.md) |
+| [vue/no-ref-object-destructure](./no-ref-object-destructure.md) | [vue/no-ref-object-reactivity-loss](./no-ref-object-reactivity-loss.md) |
 | [vue/no-setup-props-destructure](./no-setup-props-destructure.md) | [vue/no-setup-props-reactivity-loss](./no-setup-props-reactivity-loss.md) |
 | [vue/script-setup-uses-vars](./script-setup-uses-vars.md) | (no replacement) |
 | [vue/v-on-function-call](./v-on-function-call.md) | [vue/v-on-handler-style](./v-on-handler-style.md) |
diff --git a/docs/rules/no-ref-object-destructure.md b/docs/rules/no-ref-object-destructure.md
index a3b9d7758..fd3534c6f 100644
--- a/docs/rules/no-ref-object-destructure.md
+++ b/docs/rules/no-ref-object-destructure.md
@@ -2,12 +2,14 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/no-ref-object-destructure
-description: disallow destructuring of ref objects that can lead to loss of reactivity
+description: disallow usages of ref objects that can lead to loss of reactivity
 since: v9.5.0
 ---
 # vue/no-ref-object-destructure
 
-> disallow destructuring of ref objects that can lead to loss of reactivity
+> disallow usages of ref objects that can lead to loss of reactivity
+
+- :no_entry_sign: This rule was **deprecated** and replaced by [vue/no-ref-object-reactivity-loss](no-ref-object-reactivity-loss.md) rule.
 
 ## :book: Rule Details
 
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..22bca127d
--- /dev/null
+++ b/docs/rules/no-ref-object-reactivity-loss.md
@@ -0,0 +1,55 @@
+---
+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
+---
+# vue/no-ref-object-reactivity-loss
+
+> disallow usages of ref objects that can lead to loss of reactivity
+
+- :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 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.
+
+## :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/lib/index.js b/lib/index.js
index d69a03f43..edbe34a2c 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -114,6 +114,7 @@ module.exports = {
     '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-destructure': require('./rules/no-ref-object-destructure'),
+    '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'),
diff --git a/lib/rules/no-ref-object-destructure.js b/lib/rules/no-ref-object-destructure.js
index 859a3cb14..221c20b3d 100644
--- a/lib/rules/no-ref-object-destructure.js
+++ b/lib/rules/no-ref-object-destructure.js
@@ -1,171 +1,24 @@
 /**
- * @author Yosuke Ota <https://github.com/ota-meshi>
+ * @author Yosuke Ota
  * 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
-}
+const baseRule = require('./no-ref-object-reactivity-loss')
 
 module.exports = {
+  // eslint-disable-next-line eslint-plugin/require-meta-schema, eslint-plugin/prefer-message-ids, internal/no-invalid-meta, eslint-plugin/require-meta-type -- inherit schema from base rule
   meta: {
-    type: 'problem',
+    ...baseRule.meta,
+    // eslint-disable-next-line eslint-plugin/require-meta-docs-description, internal/no-invalid-meta-docs-categories, eslint-plugin/meta-property-ordering
     docs: {
-      description:
-        'disallow destructuring of ref objects that can lead to loss of reactivity',
-      categories: undefined,
+      ...baseRule.meta.docs,
       url: 'https://eslint.vuejs.org/rules/no-ref-object-destructure.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.'
-    }
+    deprecated: true,
+    replacedBy: ['no-ref-object-reactivity-loss']
   },
-  /**
-   * @param {RuleContext} context
-   * @returns {RuleListener}
-   */
+  /** @param {RuleContext} context */
   create(context) {
-    /**
-     * @typedef {object} ScopeStack
-     * @property {ScopeStack | null} upper
-     * @property {Program | FunctionExpression | FunctionDeclaration | ArrowFunctionExpression} node
-     */
-    /** @type {ScopeStack} */
-    let scopeStack = { upper: null, node: context.getSourceCode().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)
-      }
-    }
+    return baseRule.create(context)
   }
 }
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..8f61804b9
--- /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.getSourceCode().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/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..a40f8619f
--- /dev/null
+++ b/tests/lib/rules/no-ref-object-reactivity-loss.js
@@ -0,0 +1,449 @@
+/**
+ * @author Yosuke Ota <https://github.com/ota-meshi>
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('eslint').RuleTester
+const rule = require('../../../lib/rules/no-ref-object-reactivity-loss')
+
+const tester = new RuleTester({
+  parserOptions: {
+    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
+        }
+      ]
+    },
+    // 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
+        }
+      ]
+    }
+  ]
+})

From f607af7d0c41014c9d5267221b4d58bd290543cf Mon Sep 17 00:00:00 2001
From: yosuke ota <otameshiyo23@gmail.com>
Date: Wed, 9 Aug 2023 20:22:26 +0900
Subject: [PATCH 5/5] 9.17.0

---
 docs/rules/no-ref-object-reactivity-loss.md  | 7 +++++--
 docs/rules/no-setup-props-reactivity-loss.md | 7 +++++--
 package.json                                 | 2 +-
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/docs/rules/no-ref-object-reactivity-loss.md b/docs/rules/no-ref-object-reactivity-loss.md
index 22bca127d..5f70a8303 100644
--- a/docs/rules/no-ref-object-reactivity-loss.md
+++ b/docs/rules/no-ref-object-reactivity-loss.md
@@ -3,13 +3,12 @@ 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
 
-- :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 reports the usages of ref objects causing the value to lose reactivity.
@@ -49,6 +48,10 @@ const v5 = $computed(() => fn(count) /* ✓ GOOD */)
 
 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)
diff --git a/docs/rules/no-setup-props-reactivity-loss.md b/docs/rules/no-setup-props-reactivity-loss.md
index bc90415ec..ade3ee62c 100644
--- a/docs/rules/no-setup-props-reactivity-loss.md
+++ b/docs/rules/no-setup-props-reactivity-loss.md
@@ -3,13 +3,12 @@ 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`
 
-- :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 reports the destructuring or member expression of `props` passed to `setup` causing the value to lose reactivity.
@@ -96,6 +95,10 @@ Nothing.
 - [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)
diff --git a/package.json b/package.json
index ecc3c79fd..eb3750f4a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-vue",
-  "version": "9.16.1",
+  "version": "9.17.0",
   "description": "Official ESLint plugin for Vue.js",
   "main": "lib/index.js",
   "scripts": {