From 8828bbb69dcbb1b36dd4c79a2ce05cec86586dbe Mon Sep 17 00:00:00 2001
From: Yosuke Ota <otameshiyo23@gmail.com>
Date: Sun, 11 Sep 2022 07:53:36 +0900
Subject: [PATCH] Add `vue/no-ref-object-destructure` rule (#1965)

* Add `vue/no-ref-object-destructure` rule

* add test cases

* fix test case

* Apply suggestions from code review

Co-authored-by: Flo Edelmann <florian-edelmann@online.de>

* remove comment in testcases

* add rfc link to doc

Co-authored-by: Flo Edelmann <florian-edelmann@online.de>
---
 docs/rules/README.md                          |   1 +
 docs/rules/no-ref-object-destructure.md       |  55 ++
 lib/index.js                                  |   1 +
 lib/rules/no-ref-as-operand.js                |  79 +--
 lib/rules/no-ref-object-destructure.js        | 183 ++++++
 lib/utils/property-references.js              | 104 ++-
 lib/utils/ref-object-references.js            | 621 ++++++++++++++++++
 .../$-with-destructuring/result.js            |  16 +
 .../$-with-destructuring/source.js            |  16 +
 .../reactive-vars/$/result.js                 |   6 +
 .../reactive-vars/$/source.js                 |   6 +
 .../reactive-vars/$computed/result.js         |   5 +
 .../reactive-vars/$computed/source.js         |   5 +
 .../reactive-vars/$customRef/result.js        |  10 +
 .../reactive-vars/$customRef/source.js        |  10 +
 .../reactive-vars/$ref/result.js              |   5 +
 .../reactive-vars/$ref/source.js              |   5 +
 .../reactive-vars/$shallowRef/result.js       |   5 +
 .../reactive-vars/$shallowRef/source.js       |   5 +
 .../reactive-vars/$toRef/result.js            |   5 +
 .../reactive-vars/$toRef/source.js            |   5 +
 .../ref-objects/computed/result.js            |   5 +
 .../ref-objects/computed/source.js            |   5 +
 .../ref-objects/customRef/result.js           |  10 +
 .../ref-objects/customRef/source.js           |  10 +
 .../ref-objects/ref-to-pattern/result.js      |   9 +
 .../ref-objects/ref-to-pattern/source.js      |   9 +
 .../ref-objects/ref/result.js                 |   5 +
 .../ref-objects/ref/source.js                 |   5 +
 .../ref-objects/shallowRef/result.js          |   5 +
 .../ref-objects/shallowRef/source.js          |   5 +
 .../ref-objects/toRef/result.js               |   5 +
 .../ref-objects/toRef/source.js               |   5 +
 .../ref-objects/toRefs-to-pattern/result.js   |   5 +
 .../ref-objects/toRefs-to-pattern/source.js   |   5 +
 .../ref-objects/toRefs/result.js              |  18 +
 .../ref-objects/toRefs/source.js              |  18 +
 tests/lib/rules/no-ref-object-destructure.js  | 449 +++++++++++++
 tests/lib/utils/ref-object-references.js      | 164 +++++
 39 files changed, 1804 insertions(+), 81 deletions(-)
 create mode 100644 docs/rules/no-ref-object-destructure.md
 create mode 100644 lib/rules/no-ref-object-destructure.js
 create mode 100644 lib/utils/ref-object-references.js
 create mode 100644 tests/fixtures/utils/ref-object-references/reactive-vars/$-with-destructuring/result.js
 create mode 100644 tests/fixtures/utils/ref-object-references/reactive-vars/$-with-destructuring/source.js
 create mode 100644 tests/fixtures/utils/ref-object-references/reactive-vars/$/result.js
 create mode 100644 tests/fixtures/utils/ref-object-references/reactive-vars/$/source.js
 create mode 100644 tests/fixtures/utils/ref-object-references/reactive-vars/$computed/result.js
 create mode 100644 tests/fixtures/utils/ref-object-references/reactive-vars/$computed/source.js
 create mode 100644 tests/fixtures/utils/ref-object-references/reactive-vars/$customRef/result.js
 create mode 100644 tests/fixtures/utils/ref-object-references/reactive-vars/$customRef/source.js
 create mode 100644 tests/fixtures/utils/ref-object-references/reactive-vars/$ref/result.js
 create mode 100644 tests/fixtures/utils/ref-object-references/reactive-vars/$ref/source.js
 create mode 100644 tests/fixtures/utils/ref-object-references/reactive-vars/$shallowRef/result.js
 create mode 100644 tests/fixtures/utils/ref-object-references/reactive-vars/$shallowRef/source.js
 create mode 100644 tests/fixtures/utils/ref-object-references/reactive-vars/$toRef/result.js
 create mode 100644 tests/fixtures/utils/ref-object-references/reactive-vars/$toRef/source.js
 create mode 100644 tests/fixtures/utils/ref-object-references/ref-objects/computed/result.js
 create mode 100644 tests/fixtures/utils/ref-object-references/ref-objects/computed/source.js
 create mode 100644 tests/fixtures/utils/ref-object-references/ref-objects/customRef/result.js
 create mode 100644 tests/fixtures/utils/ref-object-references/ref-objects/customRef/source.js
 create mode 100644 tests/fixtures/utils/ref-object-references/ref-objects/ref-to-pattern/result.js
 create mode 100644 tests/fixtures/utils/ref-object-references/ref-objects/ref-to-pattern/source.js
 create mode 100644 tests/fixtures/utils/ref-object-references/ref-objects/ref/result.js
 create mode 100644 tests/fixtures/utils/ref-object-references/ref-objects/ref/source.js
 create mode 100644 tests/fixtures/utils/ref-object-references/ref-objects/shallowRef/result.js
 create mode 100644 tests/fixtures/utils/ref-object-references/ref-objects/shallowRef/source.js
 create mode 100644 tests/fixtures/utils/ref-object-references/ref-objects/toRef/result.js
 create mode 100644 tests/fixtures/utils/ref-object-references/ref-objects/toRef/source.js
 create mode 100644 tests/fixtures/utils/ref-object-references/ref-objects/toRefs-to-pattern/result.js
 create mode 100644 tests/fixtures/utils/ref-object-references/ref-objects/toRefs-to-pattern/source.js
 create mode 100644 tests/fixtures/utils/ref-object-references/ref-objects/toRefs/result.js
 create mode 100644 tests/fixtures/utils/ref-object-references/ref-objects/toRefs/source.js
 create mode 100644 tests/lib/rules/no-ref-object-destructure.js
 create mode 100644 tests/lib/utils/ref-object-references.js

diff --git a/docs/rules/README.md b/docs/rules/README.md
index 4343ba647..de00e7e53 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -227,6 +227,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-restricted-block](./no-restricted-block.md) | disallow specific block |  | :hammer: |
 | [vue/no-restricted-call-after-await](./no-restricted-call-after-await.md) | disallow asynchronously called restricted methods |  | :hammer: |
 | [vue/no-restricted-class](./no-restricted-class.md) | disallow specific classes in Vue components |  | :warning: |
diff --git a/docs/rules/no-ref-object-destructure.md b/docs/rules/no-ref-object-destructure.md
new file mode 100644
index 000000000..4c4b837a8
--- /dev/null
+++ b/docs/rules/no-ref-object-destructure.md
@@ -0,0 +1,55 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-ref-object-destructure
+description: disallow destructuring of ref objects that can lead to loss of reactivity
+---
+# vue/no-ref-object-destructure
+
+> disallow destructuring 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 destructuring of ref objects causing the value to lose reactivity.
+
+<eslint-code-block :rules="{'vue/no-ref-object-destructure': ['error']}" language="javascript" filename="example.js" >
+
+```js
+import { ref } from 'vue'
+const count = ref(0)
+const v1 = count.value /* ✗ BAD */
+const { value: v2 } = count /* ✗ BAD */
+const v3 = computed(() => count.value /* ✓ GOOD */)
+const v4 = fn(count.value) /* ✗ BAD */
+const v5 = fn(count) /* ✓ GOOD */
+const v6 = computed(() => fn(count.value) /* ✓ GOOD */)
+```
+
+</eslint-code-block>
+
+This rule also supports Reactivity Transform, but Reactivity Transform is an experimental feature and may have false positives due to future Vue changes.  
+See the [RFC](https://github.com/vuejs/rfcs/pull/420) for more information on Reactivity Transform.
+
+<eslint-code-block :rules="{'vue/no-ref-object-destructure': ['error']}" language="javascript" filename="example.js" >
+
+```js
+const count = $ref(0)
+const v1 = count /* ✗ BAD */
+const v2 = $computed(() => count /* ✓ GOOD */)
+const v3 = fn(count) /* ✗ BAD */
+const v4 = fn($$(count)) /* ✓ GOOD */
+const v5 = $computed(() => fn(count) /* ✓ GOOD */)
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-ref-object-destructure.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-ref-object-destructure.js)
diff --git a/lib/index.js b/lib/index.js
index c4979a98c..ca3a93084 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -104,6 +104,7 @@ module.exports = {
     'no-parsing-error': require('./rules/no-parsing-error'),
     'no-potential-component-option-typo': require('./rules/no-potential-component-option-typo'),
     'no-ref-as-operand': require('./rules/no-ref-as-operand'),
+    'no-ref-object-destructure': require('./rules/no-ref-object-destructure'),
     'no-reserved-component-names': require('./rules/no-reserved-component-names'),
     'no-reserved-keys': require('./rules/no-reserved-keys'),
     'no-reserved-props': require('./rules/no-reserved-props'),
diff --git a/lib/rules/no-ref-as-operand.js b/lib/rules/no-ref-as-operand.js
index 4f536dafe..067be4ec3 100644
--- a/lib/rules/no-ref-as-operand.js
+++ b/lib/rules/no-ref-as-operand.js
@@ -3,9 +3,14 @@
  * See LICENSE file in root directory for full license.
  */
 'use strict'
-const { ReferenceTracker, findVariable } = require('eslint-utils')
+
+const { extractRefObjectReferences } = require('../utils/ref-object-references')
 const utils = require('../utils')
 
+/**
+ * @typedef {import('../utils/ref-object-references').RefObjectReferences} RefObjectReferences
+ */
+
 module.exports = {
   meta: {
     type: 'suggestion',
@@ -24,20 +29,14 @@ module.exports = {
   },
   /** @param {RuleContext} context */
   create(context) {
-    /**
-     * @typedef {object} ReferenceData
-     * @property {VariableDeclarator} variableDeclarator
-     * @property {VariableDeclaration | null} variableDeclaration
-     * @property {string} method
-     */
-    /** @type {Map<Identifier, ReferenceData>} */
-    const refReferenceIds = new Map()
+    /** @type {RefObjectReferences} */
+    let refReferences
 
     /**
      * @param {Identifier} node
      */
     function reportIfRefWrapped(node) {
-      const data = refReferenceIds.get(node)
+      const data = refReferences.get(node)
       if (!data) {
         return
       }
@@ -54,59 +53,7 @@ module.exports = {
     }
     return {
       Program() {
-        const tracker = new ReferenceTracker(context.getScope())
-        const traceMap = utils.createCompositionApiTraceMap({
-          [ReferenceTracker.ESM]: true,
-          ref: {
-            [ReferenceTracker.CALL]: true
-          },
-          computed: {
-            [ReferenceTracker.CALL]: true
-          },
-          toRef: {
-            [ReferenceTracker.CALL]: true
-          },
-          customRef: {
-            [ReferenceTracker.CALL]: true
-          },
-          shallowRef: {
-            [ReferenceTracker.CALL]: true
-          }
-        })
-
-        for (const { node, path } of tracker.iterateEsmReferences(traceMap)) {
-          const variableDeclarator = node.parent
-          if (
-            !variableDeclarator ||
-            variableDeclarator.type !== 'VariableDeclarator' ||
-            variableDeclarator.id.type !== 'Identifier'
-          ) {
-            continue
-          }
-          const variable = findVariable(
-            context.getScope(),
-            variableDeclarator.id
-          )
-          if (!variable) {
-            continue
-          }
-          const variableDeclaration =
-            (variableDeclarator.parent &&
-              variableDeclarator.parent.type === 'VariableDeclaration' &&
-              variableDeclarator.parent) ||
-            null
-          for (const reference of variable.references) {
-            if (!reference.isRead()) {
-              continue
-            }
-
-            refReferenceIds.set(reference.identifier, {
-              variableDeclarator,
-              variableDeclaration,
-              method: path[1]
-            })
-          }
-        }
+        refReferences = extractRefObjectReferences(context)
       },
       // if (refValue)
       /** @param {Identifier} node */
@@ -148,11 +95,9 @@ module.exports = {
           return
         }
         // Report only constants.
-        const data = refReferenceIds.get(node)
-        if (!data) {
-          return
-        }
+        const data = refReferences.get(node)
         if (
+          !data ||
           !data.variableDeclaration ||
           data.variableDeclaration.kind !== 'const'
         ) {
diff --git a/lib/rules/no-ref-object-destructure.js b/lib/rules/no-ref-object-destructure.js
new file mode 100644
index 000000000..85754d18e
--- /dev/null
+++ b/lib/rules/no-ref-object-destructure.js
@@ -0,0 +1,183 @@
+/**
+ * @author Yosuke Ota <https://github.com/ota-meshi>
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const utils = require('../utils')
+const {
+  extractRefObjectReferences,
+  extractReactiveVariableReferences
+} = require('../utils/ref-object-references')
+
+// ------------------------------------------------------------------------------
+// Helpers
+// ------------------------------------------------------------------------------
+
+/**
+ * @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
+}
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'disallow destructuring of ref objects that can lead to loss of reactivity',
+      categories: undefined,
+      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.'
+    }
+  },
+  /**
+   * @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/lib/utils/property-references.js b/lib/utils/property-references.js
index beb3118d6..d1b1e6f65 100644
--- a/lib/utils/property-references.js
+++ b/lib/utils/property-references.js
@@ -15,11 +15,23 @@ const eslintUtils = require('eslint-utils')
  * @typedef {object} IHasPropertyOption
  * @property {boolean} [unknownCallAsAny]
  */
+/**
+ * @typedef {object} NestPropertyNodeForExpression
+ * @property {'expression'} type
+ * @property {MemberExpression} node
+ *
+ * @typedef {object} NestPropertyNodeForPattern
+ * @property {'pattern'} type
+ * @property {MemberExpression | Identifier | ObjectPattern | ArrayPattern} node
+ *
+ * @typedef {NestPropertyNodeForExpression | NestPropertyNodeForPattern} NestPropertyNode
+ */
 /**
  * @typedef {object} IPropertyReferences
  * @property { (name: string, option?: IHasPropertyOption) => boolean } hasProperty
- * @property { () => Map<string, {nodes:ASTNode[]}> } allProperties
- * @property { (name: string) => IPropertyReferences } getNest
+ * @property { () => Map<string, {nodes:ASTNode[]}> } allProperties Get all properties.
+ * @property { (name: string) => IPropertyReferences } getNest Get the nesting property references.
+ * @property { (name: string) => Iterable<NestPropertyNode> } getNestNodes Get the nesting property nodes.
  */
 
 // ------------------------------------------------------------------------------
@@ -30,14 +42,16 @@ const eslintUtils = require('eslint-utils')
 const ANY = {
   hasProperty: () => true,
   allProperties: () => new Map(),
-  getNest: () => ANY
+  getNest: () => ANY,
+  getNestNodes: () => []
 }
 
 /** @type {IPropertyReferences} */
 const NEVER = {
   hasProperty: () => false,
   allProperties: () => new Map(),
-  getNest: () => NEVER
+  getNest: () => NEVER,
+  getNestNodes: () => []
 }
 
 /**
@@ -137,7 +151,7 @@ function definePropertyReferenceExtractor(context) {
 
   /**
    * Collects the property references for member expr.
-   * @implements IPropertyReferences
+   * @implements {IPropertyReferences}
    */
   class PropertyReferencesForMember {
     /**
@@ -172,10 +186,23 @@ function definePropertyReferenceExtractor(context) {
         ? extractFromExpression(this.node, this.withInTemplate)
         : NEVER
     }
+
+    /**
+     * @param {string} name
+     * @returns {Iterable<NestPropertyNodeForExpression>}
+     */
+    *getNestNodes(name) {
+      if (name === this.name) {
+        yield {
+          type: 'expression',
+          node: this.node
+        }
+      }
+    }
   }
   /**
    * Collects the property references for object.
-   * @implements IPropertyReferences
+   * @implements {IPropertyReferences}
    */
   class PropertyReferencesForObject {
     constructor() {
@@ -210,6 +237,35 @@ function definePropertyReferenceExtractor(context) {
           )
         : NEVER
     }
+
+    /**
+     * @param {string} name
+     * @returns {Iterable<NestPropertyNodeForPattern>}
+     */
+    *getNestNodes(name) {
+      const properties = this.properties[name]
+      if (!properties) {
+        return
+      }
+      const values = properties.map((property) => property.value)
+      let node
+      while ((node = values.shift())) {
+        if (
+          node.type === 'Identifier' ||
+          node.type === 'MemberExpression' ||
+          node.type === 'ObjectPattern' ||
+          node.type === 'ArrayPattern'
+        ) {
+          yield {
+            type: 'pattern',
+            node
+          }
+        } else if (node.type === 'AssignmentPattern') {
+          values.unshift(node.left)
+        }
+      }
+      return properties ? properties.map((p) => p.value) : []
+    }
   }
 
   /**
@@ -249,7 +305,9 @@ function definePropertyReferenceExtractor(context) {
       switch (parent.type) {
         case 'AssignmentExpression': {
           // `({foo} = arg)`
-          return !withInTemplate && parent.right === node
+          return !withInTemplate &&
+            parent.right === node &&
+            parent.operator === '='
             ? extractFromPattern(parent.left)
             : NEVER
         }
@@ -404,7 +462,8 @@ function definePropertyReferenceExtractor(context) {
           return Boolean(options && options.unknownCallAsAny)
         },
         allProperties: () => new Map(),
-        getNest: () => ANY
+        getNest: () => ANY,
+        getNestNodes: () => []
       }
     }
 
@@ -422,7 +481,8 @@ function definePropertyReferenceExtractor(context) {
           return Boolean(options && options.unknownCallAsAny)
         },
         allProperties: () => new Map(),
-        getNest: () => ANY
+        getNest: () => ANY,
+        getNestNodes: () => []
       }
     }
 
@@ -477,7 +537,8 @@ function definePropertyReferenceExtractor(context) {
         hasProperty: (name) => name === segmentName,
         allProperties: () => new Map([[segmentName, { nodes: [node] }]]),
         getNest: (name) =>
-          name === segmentName ? extractFromSegments(segments.slice(1)) : NEVER
+          name === segmentName ? extractFromSegments(segments.slice(1)) : NEVER,
+        getNestNodes: () => []
       }
     }
   }
@@ -496,7 +557,8 @@ function definePropertyReferenceExtractor(context) {
       ? {
           hasProperty: (name) => name === referenceName,
           allProperties: () => new Map([[referenceName, { nodes: [node] }]]),
-          getNest: (name) => (name === referenceName ? ANY : NEVER)
+          getNest: (name) => (name === referenceName ? ANY : NEVER),
+          getNestNodes: () => []
         }
       : NEVER
   }
@@ -513,7 +575,8 @@ function definePropertyReferenceExtractor(context) {
       hasProperty: (name) => name === referenceName,
       allProperties: () => new Map([[referenceName, { nodes: [nameNode] }]]),
       getNest: (name) =>
-        name === referenceName ? (getNest ? getNest() : ANY) : NEVER
+        name === referenceName ? (getNest ? getNest() : ANY) : NEVER,
+      getNestNodes: () => []
     }
   }
 
@@ -548,7 +611,8 @@ function definePropertyReferenceExtractor(context) {
     return {
       hasProperty: (name, option) => base.hasProperty(name, option),
       allProperties: () => base.allProperties(),
-      getNest: (name) => base.getNest(name).getNest('value')
+      getNest: (name) => base.getNest(name).getNest('value'),
+      getNestNodes: (name) => base.getNest(name).getNestNodes('value')
     }
   }
 
@@ -634,7 +698,7 @@ function mergePropertyReferences(references) {
 
 /**
  * Collects the property references for merge.
- * @implements IPropertyReferences
+ * @implements {IPropertyReferences}
  */
 class PropertyReferencesForMerge {
   /**
@@ -681,4 +745,16 @@ class PropertyReferencesForMerge {
     }
     return mergePropertyReferences(nest)
   }
+
+  /**
+   * @param {string} name
+   * @returns {Iterable<NestPropertyNode>}
+   */
+  *getNestNodes(name) {
+    for (const ref of this.references) {
+      if (ref.hasProperty(name)) {
+        yield* ref.getNestNodes(name)
+      }
+    }
+  }
 }
diff --git a/lib/utils/ref-object-references.js b/lib/utils/ref-object-references.js
new file mode 100644
index 000000000..1b3781bbb
--- /dev/null
+++ b/lib/utils/ref-object-references.js
@@ -0,0 +1,621 @@
+/**
+ * @author Yosuke Ota
+ * @copyright 2022 Yosuke Ota. All rights reserved.
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('./index')
+const eslintUtils = require('eslint-utils')
+const { definePropertyReferenceExtractor } = require('./property-references')
+const { ReferenceTracker } = eslintUtils
+
+// ------------------------------------------------------------------------------
+// Helpers
+// ------------------------------------------------------------------------------
+
+/**
+ * @typedef {object} RefObjectReferenceForExpression
+ * @property {'expression'} type
+ * @property {MemberExpression | CallExpression} node
+ * @property {string} method
+ * @property {CallExpression} define
+ *
+ * @typedef {object} RefObjectReferenceForPattern
+ * @property {'pattern'} type
+ * @property {ObjectPattern} node
+ * @property {string} method
+ * @property {CallExpression} define
+ *
+ * @typedef {object} RefObjectReferenceForIdentifier
+ * @property {'expression' | 'pattern'} type
+ * @property {Identifier} node
+ * @property {VariableDeclaration | null} variableDeclaration
+ * @property {string} method
+ * @property {CallExpression} define
+ *
+ * @typedef {RefObjectReferenceForIdentifier | RefObjectReferenceForExpression | RefObjectReferenceForPattern} RefObjectReference
+ */
+/**
+ * @typedef {object} ReactiveVariableReference
+ * @property {Identifier} node
+ * @property {boolean} escape Within escape hint (`$$()`)
+ * @property {VariableDeclaration} variableDeclaration
+ * @property {string} method
+ * @property {CallExpression} define
+ */
+
+/**
+ * @typedef {object} RefObjectReferences
+ * @property {<T extends Identifier | Expression | Pattern | Super> (node: T) =>
+ *   T extends Identifier ?
+ *     RefObjectReferenceForIdentifier | null :
+ *   T extends Expression ?
+ *     RefObjectReferenceForExpression | null :
+ *   T extends Pattern ?
+ *     RefObjectReferenceForPattern | null :
+ *   null} get
+ */
+/**
+ * @typedef {object} ReactiveVariableReferences
+ * @property {(node: Identifier) => ReactiveVariableReference | null} get
+ */
+
+const REF_MACROS = [
+  '$ref',
+  '$computed',
+  '$shallowRef',
+  '$customRef',
+  '$toRef',
+  '$'
+]
+
+/** @type {WeakMap<Program, RefObjectReferences>} */
+const cacheForRefObjectReferences = new WeakMap()
+/** @type {WeakMap<Program, ReactiveVariableReferences>} */
+const cacheForReactiveVariableReferences = new WeakMap()
+
+/**
+ * Iterate the call expressions that define the ref object.
+ * @param {import('eslint').Scope.Scope} globalScope
+ * @returns {Iterable<{ node: CallExpression, name: string }>}
+ */
+function* iterateDefineRefs(globalScope) {
+  const tracker = new ReferenceTracker(globalScope)
+  const traceMap = utils.createCompositionApiTraceMap({
+    [ReferenceTracker.ESM]: true,
+    ref: {
+      [ReferenceTracker.CALL]: true
+    },
+    computed: {
+      [ReferenceTracker.CALL]: true
+    },
+    toRef: {
+      [ReferenceTracker.CALL]: true
+    },
+    customRef: {
+      [ReferenceTracker.CALL]: true
+    },
+    shallowRef: {
+      [ReferenceTracker.CALL]: true
+    },
+    toRefs: {
+      [ReferenceTracker.CALL]: true
+    }
+  })
+  for (const { node, path } of tracker.iterateEsmReferences(traceMap)) {
+    const expr = /** @type {CallExpression} */ (node)
+    yield {
+      node: expr,
+      name: path[path.length - 1]
+    }
+  }
+}
+
+/**
+ * Iterate the call expressions that define the reactive variables.
+ * @param {import('eslint').Scope.Scope} globalScope
+ * @returns {Iterable<{ node: CallExpression, name: string }>}
+ */
+function* iterateDefineReactiveVariables(globalScope) {
+  for (const { identifier } of iterateRefMacroReferences()) {
+    if (
+      identifier.parent.type === 'CallExpression' &&
+      identifier.parent.callee === identifier
+    ) {
+      yield {
+        node: identifier.parent,
+        name: identifier.name
+      }
+    }
+  }
+
+  /**
+   * Iterate ref macro reference.
+   * @returns {Iterable<Reference>}
+   */
+  function* iterateRefMacroReferences() {
+    yield* REF_MACROS.map((m) => globalScope.set.get(m))
+      .filter(utils.isDef)
+      .flatMap((v) => v.references)
+    for (const ref of globalScope.through) {
+      if (REF_MACROS.includes(ref.identifier.name)) {
+        yield ref
+      }
+    }
+  }
+}
+
+/**
+ *  Iterate the call expressions that the escape hint values.
+ * @param {import('eslint').Scope.Scope} globalScope
+ * @returns {Iterable<CallExpression>}
+ */
+function* iterateEscapeHintValueRefs(globalScope) {
+  for (const { identifier } of iterateEscapeHintReferences()) {
+    if (
+      identifier.parent.type === 'CallExpression' &&
+      identifier.parent.callee === identifier
+    ) {
+      yield identifier.parent
+    }
+  }
+
+  /**
+   * Iterate escape hint reference.
+   * @returns {Iterable<Reference>}
+   */
+  function* iterateEscapeHintReferences() {
+    const escapeHint = globalScope.set.get('$$')
+    if (escapeHint) {
+      yield* escapeHint.references
+    }
+    for (const ref of globalScope.through) {
+      if (ref.identifier.name === '$$') {
+        yield ref
+      }
+    }
+  }
+}
+
+/**
+ * Extract identifier from given pattern node.
+ * @param {Pattern} node
+ * @returns {Iterable<Identifier>}
+ */
+function* extractIdentifier(node) {
+  switch (node.type) {
+    case 'Identifier': {
+      yield node
+      break
+    }
+    case 'ObjectPattern': {
+      for (const property of node.properties) {
+        if (property.type === 'Property') {
+          yield* extractIdentifier(property.value)
+        } else if (property.type === 'RestElement') {
+          yield* extractIdentifier(property)
+        }
+      }
+      break
+    }
+    case 'ArrayPattern': {
+      for (const element of node.elements) {
+        if (element) {
+          yield* extractIdentifier(element)
+        }
+      }
+      break
+    }
+    case 'AssignmentPattern': {
+      yield* extractIdentifier(node.left)
+      break
+    }
+    case 'RestElement': {
+      yield* extractIdentifier(node.argument)
+      break
+    }
+    case 'MemberExpression': {
+      // can't extract
+      break
+    }
+    // No default
+  }
+}
+
+/**
+ * Iterate references of the given identifier.
+ * @param {Identifier} id
+ * @param {import('eslint').Scope.Scope} globalScope
+ * @returns {Iterable<import('eslint').Scope.Reference>}
+ */
+function* iterateIdentifierReferences(id, globalScope) {
+  const variable = eslintUtils.findVariable(globalScope, id)
+  if (!variable) {
+    return
+  }
+
+  for (const reference of variable.references) {
+    yield reference
+  }
+}
+
+/**
+ * @param {RuleContext} context The rule context.
+ */
+function getGlobalScope(context) {
+  const sourceCode = context.getSourceCode()
+  return (
+    sourceCode.scopeManager.globalScope || sourceCode.scopeManager.scopes[0]
+  )
+}
+// ------------------------------------------------------------------------------
+// Public
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  extractRefObjectReferences,
+  extractReactiveVariableReferences
+}
+
+/**
+ * @implements {RefObjectReferences}
+ */
+class RefObjectReferenceExtractor {
+  /**
+   * @param {RuleContext} context The rule context.
+   */
+  constructor(context) {
+    this.context = context
+    /** @type {Map<Identifier | MemberExpression | CallExpression | ObjectPattern, RefObjectReference>} */
+    this.references = new Map()
+
+    /** @type {Set<Identifier>} */
+    this._processedIds = new Set()
+  }
+
+  /**
+   * @template {Identifier | Expression | Pattern | Super} T
+   * @param {T} node
+   * @returns {T extends Identifier ?
+   *     RefObjectReferenceForIdentifier | null :
+   *   T extends Expression ?
+   *     RefObjectReferenceForExpression | null :
+   *   T extends Pattern ?
+   *     RefObjectReferenceForPattern | null :
+   *   null}
+   */
+  get(node) {
+    return /** @type {never} */ (
+      this.references.get(/** @type {never} */ (node)) || null
+    )
+  }
+
+  /**
+   * @param {CallExpression} node
+   * @param {string} method
+   */
+  processDefineRef(node, method) {
+    const parent = node.parent
+    /** @type {Pattern | null} */
+    let pattern = null
+    if (parent.type === 'VariableDeclarator') {
+      pattern = parent.id
+    } else if (
+      parent.type === 'AssignmentExpression' &&
+      parent.operator === '='
+    ) {
+      pattern = parent.left
+    } else {
+      if (method !== 'toRefs') {
+        this.references.set(node, {
+          type: 'expression',
+          node,
+          method,
+          define: node
+        })
+      }
+      return
+    }
+
+    if (method === 'toRefs') {
+      const propertyReferenceExtractor = definePropertyReferenceExtractor(
+        this.context
+      )
+      const propertyReferences =
+        propertyReferenceExtractor.extractFromPattern(pattern)
+      for (const name of propertyReferences.allProperties().keys()) {
+        for (const nest of propertyReferences.getNestNodes(name)) {
+          if (nest.type === 'expression') {
+            this.processMemberExpression(nest.node, method, node)
+          } else if (nest.type === 'pattern') {
+            this.processPattern(nest.node, method, node)
+          }
+        }
+      }
+    } else {
+      this.processPattern(pattern, method, node)
+    }
+  }
+
+  /**
+   * @param {Expression} node
+   * @param {string} method
+   * @param {CallExpression} define
+   */
+  processExpression(node, method, define) {
+    const parent = node.parent
+    if (parent.type === 'AssignmentExpression') {
+      if (parent.operator === '=' && parent.right === node) {
+        // `(foo = obj.mem)`
+        this.processPattern(parent.left, method, define)
+        return true
+      }
+    } else if (parent.type === 'VariableDeclarator' && parent.init === node) {
+      // `const foo = obj.mem`
+      this.processPattern(parent.id, method, define)
+      return true
+    }
+    return false
+  }
+  /**
+   * @param {MemberExpression} node
+   * @param {string} method
+   * @param {CallExpression} define
+   */
+  processMemberExpression(node, method, define) {
+    if (this.processExpression(node, method, define)) {
+      return
+    }
+    this.references.set(node, {
+      type: 'expression',
+      node,
+      method,
+      define
+    })
+  }
+
+  /**
+   * @param {Pattern} node
+   * @param {string} method
+   * @param {CallExpression} define
+   */
+  processPattern(node, method, define) {
+    switch (node.type) {
+      case 'Identifier': {
+        this.processIdentifierPattern(node, method, define)
+        break
+      }
+      case 'ArrayPattern':
+      case 'RestElement':
+      case 'MemberExpression': {
+        return
+      }
+      case 'ObjectPattern': {
+        this.references.set(node, {
+          type: 'pattern',
+          node,
+          method,
+          define
+        })
+        return
+      }
+      case 'AssignmentPattern': {
+        this.processPattern(node.left, method, define)
+        return
+      }
+      // No default
+    }
+  }
+
+  /**
+   * @param {Identifier} node
+   * @param {string} method
+   * @param {CallExpression} define
+   */
+  processIdentifierPattern(node, method, define) {
+    if (this._processedIds.has(node)) {
+      return
+    }
+    this._processedIds.add(node)
+
+    for (const reference of iterateIdentifierReferences(
+      node,
+      getGlobalScope(this.context)
+    )) {
+      const def =
+        reference.resolved &&
+        reference.resolved.defs.length === 1 &&
+        reference.resolved.defs[0].type === 'Variable'
+          ? reference.resolved.defs[0]
+          : null
+      if (def && def.name === reference.identifier) {
+        continue
+      }
+      if (
+        reference.isRead() &&
+        this.processExpression(reference.identifier, method, define)
+      ) {
+        continue
+      }
+      this.references.set(reference.identifier, {
+        type: reference.isWrite() ? 'pattern' : 'expression',
+        node: reference.identifier,
+        method,
+        define,
+        variableDeclaration: def ? def.parent : null
+      })
+    }
+  }
+}
+
+/**
+ * Extracts references of all ref objects.
+ * @param {RuleContext} context The rule context.
+ * @returns {RefObjectReferences}
+ */
+function extractRefObjectReferences(context) {
+  const sourceCode = context.getSourceCode()
+  const cachedReferences = cacheForRefObjectReferences.get(sourceCode.ast)
+  if (cachedReferences) {
+    return cachedReferences
+  }
+  const references = new RefObjectReferenceExtractor(context)
+
+  for (const { node, name } of iterateDefineRefs(getGlobalScope(context))) {
+    references.processDefineRef(node, name)
+  }
+
+  cacheForRefObjectReferences.set(sourceCode.ast, references)
+
+  return references
+}
+
+/**
+ * @implements {ReactiveVariableReferences}
+ */
+class ReactiveVariableReferenceExtractor {
+  /**
+   * @param {RuleContext} context The rule context.
+   */
+  constructor(context) {
+    this.context = context
+    /** @type {Map<Identifier, ReactiveVariableReference>} */
+    this.references = new Map()
+
+    /** @type {Set<Identifier>} */
+    this._processedIds = new Set()
+
+    /** @type {Set<CallExpression>} */
+    this._escapeHintValueRefs = new Set(
+      iterateEscapeHintValueRefs(getGlobalScope(context))
+    )
+  }
+
+  /**
+   * @param {Identifier} node
+   * @returns {ReactiveVariableReference | null}
+   */
+  get(node) {
+    return this.references.get(node) || null
+  }
+
+  /**
+   * @param {CallExpression} node
+   * @param {string} method
+   */
+  processDefineReactiveVariable(node, method) {
+    const parent = node.parent
+    if (parent.type !== 'VariableDeclarator') {
+      return
+    }
+    /** @type {Pattern | null} */
+    const pattern = parent.id
+
+    if (method === '$') {
+      for (const id of extractIdentifier(pattern)) {
+        this.processIdentifierPattern(id, method, node)
+      }
+    } else {
+      if (pattern.type === 'Identifier') {
+        this.processIdentifierPattern(pattern, method, node)
+      }
+    }
+  }
+
+  /**
+   * @param {Identifier} node
+   * @param {string} method
+   * @param {CallExpression} define
+   */
+  processIdentifierPattern(node, method, define) {
+    if (this._processedIds.has(node)) {
+      return
+    }
+    this._processedIds.add(node)
+
+    for (const reference of iterateIdentifierReferences(
+      node,
+      getGlobalScope(this.context)
+    )) {
+      const def =
+        reference.resolved &&
+        reference.resolved.defs.length === 1 &&
+        reference.resolved.defs[0].type === 'Variable'
+          ? reference.resolved.defs[0]
+          : null
+      if (!def || def.name === reference.identifier) {
+        continue
+      }
+      this.references.set(reference.identifier, {
+        node: reference.identifier,
+        escape: this.withinEscapeHint(reference.identifier),
+        method,
+        define,
+        variableDeclaration: def.parent
+      })
+    }
+  }
+
+  /**
+   * Checks whether the given identifier node within the escape hints (`$$()`) or not.
+   * @param {Identifier} node
+   */
+  withinEscapeHint(node) {
+    /** @type {Identifier | ObjectExpression | ArrayExpression | SpreadElement | Property | AssignmentProperty} */
+    let target = node
+    /** @type {ASTNode | null} */
+    let parent = target.parent
+    while (parent) {
+      if (parent.type === 'CallExpression') {
+        if (
+          parent.arguments.includes(/** @type {any} */ (target)) &&
+          this._escapeHintValueRefs.has(parent)
+        ) {
+          return true
+        }
+        return false
+      }
+      if (
+        (parent.type === 'Property' && parent.value === target) ||
+        (parent.type === 'ObjectExpression' &&
+          parent.properties.includes(/** @type {any} */ (target))) ||
+        parent.type === 'ArrayExpression' ||
+        parent.type === 'SpreadElement'
+      ) {
+        target = parent
+        parent = target.parent
+      } else {
+        return false
+      }
+    }
+    return false
+  }
+}
+
+/**
+ * Extracts references of all reactive variables.
+ * @param {RuleContext} context The rule context.
+ * @returns {ReactiveVariableReferences}
+ */
+function extractReactiveVariableReferences(context) {
+  const sourceCode = context.getSourceCode()
+  const cachedReferences = cacheForReactiveVariableReferences.get(
+    sourceCode.ast
+  )
+  if (cachedReferences) {
+    return cachedReferences
+  }
+
+  const references = new ReactiveVariableReferenceExtractor(context)
+
+  for (const { node, name } of iterateDefineReactiveVariables(
+    getGlobalScope(context)
+  )) {
+    references.processDefineReactiveVariable(node, name)
+  }
+
+  cacheForReactiveVariableReferences.set(sourceCode.ast, references)
+
+  return references
+}
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$-with-destructuring/result.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$-with-destructuring/result.js
new file mode 100644
index 000000000..805890a33
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$-with-destructuring/result.js
@@ -0,0 +1,16 @@
+let { a, b: c, d: [,f], g: [...h], ...i } = $(foo)
+let [ x, y = 42 ] = $(bar)
+
+console.log(
+  /*>*/a/*<{"escape":false,"method":"$"}*/,
+  b,
+  /*>*/c/*<{"escape":false,"method":"$"}*/,
+  d,
+  e,
+  /*>*/f/*<{"escape":false,"method":"$"}*/,
+  g,
+  /*>*/h/*<{"escape":false,"method":"$"}*/,
+  /*>*/i/*<{"escape":false,"method":"$"}*/,
+  /*>*/x/*<{"escape":false,"method":"$"}*/,
+  /*>*/y/*<{"escape":false,"method":"$"}*/
+)
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$-with-destructuring/source.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$-with-destructuring/source.js
new file mode 100644
index 000000000..bfb92574f
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$-with-destructuring/source.js
@@ -0,0 +1,16 @@
+let { a, b: c, d: [,f], g: [...h], ...i } = $(foo)
+let [ x, y = 42 ] = $(bar)
+
+console.log(
+  a,
+  b,
+  c,
+  d,
+  e,
+  f,
+  g,
+  h,
+  i,
+  x,
+  y
+)
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$/result.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$/result.js
new file mode 100644
index 000000000..80d709dee
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$/result.js
@@ -0,0 +1,6 @@
+let v = $(foo)
+let { x, y } = $(bar)
+console.log(/*>*/v/*<{"escape":false,"method":"$"}*/, /*>*/x/*<{"escape":false,"method":"$"}*/, /*>*/y/*<{"escape":false,"method":"$"}*/)
+let a = /*>*/v/*<{"escape":false,"method":"$"}*/
+console.log(a)
+console.log($$({ /*>*/v/*<{"escape":true,"method":"$"}*/, /*>*/x/*<{"escape":true,"method":"$"}*/ }))
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$/source.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$/source.js
new file mode 100644
index 000000000..28c98cbc9
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$/source.js
@@ -0,0 +1,6 @@
+let v = $(foo)
+let { x, y } = $(bar)
+console.log(v, x, y)
+let a = v
+console.log(a)
+console.log($$({ v, x }))
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$computed/result.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$computed/result.js
new file mode 100644
index 000000000..a45a0ae6f
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$computed/result.js
@@ -0,0 +1,5 @@
+let v = $computed(() => 42)
+console.log(/*>*/v/*<{"escape":false,"method":"$computed"}*/)
+let a = /*>*/v/*<{"escape":false,"method":"$computed"}*/
+console.log(a)
+console.log($$(/*>*/v/*<{"escape":true,"method":"$computed"}*/))
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$computed/source.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$computed/source.js
new file mode 100644
index 000000000..ff0f34766
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$computed/source.js
@@ -0,0 +1,5 @@
+let v = $computed(() => 42)
+console.log(v)
+let a = v
+console.log(a)
+console.log($$(v))
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$customRef/result.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$customRef/result.js
new file mode 100644
index 000000000..a8a3ae90a
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$customRef/result.js
@@ -0,0 +1,10 @@
+let v = $customRef((track, trigger) => {
+  return {
+    get() { return count },
+    set(newValue) { count = newValue }
+  }
+})
+console.log(/*>*/v/*<{"escape":false,"method":"$customRef"}*/)
+let a = /*>*/v/*<{"escape":false,"method":"$customRef"}*/
+console.log(a)
+console.log($$(/*>*/v/*<{"escape":true,"method":"$customRef"}*/))
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$customRef/source.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$customRef/source.js
new file mode 100644
index 000000000..dd62754bc
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$customRef/source.js
@@ -0,0 +1,10 @@
+let v = $customRef((track, trigger) => {
+  return {
+    get() { return count },
+    set(newValue) { count = newValue }
+  }
+})
+console.log(v)
+let a = v
+console.log(a)
+console.log($$(v))
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$ref/result.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$ref/result.js
new file mode 100644
index 000000000..518f0c56b
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$ref/result.js
@@ -0,0 +1,5 @@
+let v = $ref(0)
+console.log(/*>*/v/*<{"escape":false,"method":"$ref"}*/)
+let a = /*>*/v/*<{"escape":false,"method":"$ref"}*/
+console.log(a)
+console.log($$(/*>*/v/*<{"escape":true,"method":"$ref"}*/))
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$ref/source.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$ref/source.js
new file mode 100644
index 000000000..5c8d7248e
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$ref/source.js
@@ -0,0 +1,5 @@
+let v = $ref(0)
+console.log(v)
+let a = v
+console.log(a)
+console.log($$(v))
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$shallowRef/result.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$shallowRef/result.js
new file mode 100644
index 000000000..dbe345a19
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$shallowRef/result.js
@@ -0,0 +1,5 @@
+let v = $shallowRef({ count: 0 })
+console.log(/*>*/v/*<{"escape":false,"method":"$shallowRef"}*/)
+let a = /*>*/v/*<{"escape":false,"method":"$shallowRef"}*/
+console.log(a)
+console.log($$(/*>*/v/*<{"escape":true,"method":"$shallowRef"}*/))
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$shallowRef/source.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$shallowRef/source.js
new file mode 100644
index 000000000..da4c19320
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$shallowRef/source.js
@@ -0,0 +1,5 @@
+let v = $shallowRef({ count: 0 })
+console.log(v)
+let a = v
+console.log(a)
+console.log($$(v))
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$toRef/result.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$toRef/result.js
new file mode 100644
index 000000000..a7bff1219
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$toRef/result.js
@@ -0,0 +1,5 @@
+let v = $toRef(foo, 'bar')
+console.log(/*>*/v/*<{"escape":false,"method":"$toRef"}*/)
+let a = /*>*/v/*<{"escape":false,"method":"$toRef"}*/
+console.log(a)
+console.log($$(/*>*/v/*<{"escape":true,"method":"$toRef"}*/))
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$toRef/source.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$toRef/source.js
new file mode 100644
index 000000000..b94ddea93
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$toRef/source.js
@@ -0,0 +1,5 @@
+let v = $toRef(foo, 'bar')
+console.log(v)
+let a = v
+console.log(a)
+console.log($$(v))
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/computed/result.js b/tests/fixtures/utils/ref-object-references/ref-objects/computed/result.js
new file mode 100644
index 000000000..2217a8182
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/computed/result.js
@@ -0,0 +1,5 @@
+import { computed } from 'vue'
+let v = computed(() => 42)
+console.log(/*>*/v/*<{"type":"expression","method":"computed"}*/.value)
+let a = v
+console.log(/*>*/a/*<{"type":"expression","method":"computed"}*/.value)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/computed/source.js b/tests/fixtures/utils/ref-object-references/ref-objects/computed/source.js
new file mode 100644
index 000000000..2b4a6412d
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/computed/source.js
@@ -0,0 +1,5 @@
+import { computed } from 'vue'
+let v = computed(() => 42)
+console.log(v.value)
+let a = v
+console.log(a.value)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/customRef/result.js b/tests/fixtures/utils/ref-object-references/ref-objects/customRef/result.js
new file mode 100644
index 000000000..e7af0774e
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/customRef/result.js
@@ -0,0 +1,10 @@
+import { customRef } from 'vue'
+let v = customRef((track, trigger) => {
+  return {
+    get() { return count },
+    set(newValue) { count = newValue }
+  }
+})
+console.log(/*>*/v/*<{"type":"expression","method":"customRef"}*/.value)
+let a = v
+console.log(/*>*/a/*<{"type":"expression","method":"customRef"}*/.value)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/customRef/source.js b/tests/fixtures/utils/ref-object-references/ref-objects/customRef/source.js
new file mode 100644
index 000000000..c94db730f
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/customRef/source.js
@@ -0,0 +1,10 @@
+import { customRef } from 'vue'
+let v = customRef((track, trigger) => {
+  return {
+    get() { return count },
+    set(newValue) { count = newValue }
+  }
+})
+console.log(v.value)
+let a = v
+console.log(a.value)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/ref-to-pattern/result.js b/tests/fixtures/utils/ref-object-references/ref-objects/ref-to-pattern/result.js
new file mode 100644
index 000000000..a0681af4a
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/ref-to-pattern/result.js
@@ -0,0 +1,9 @@
+import { ref } from 'vue'
+let v = ref(0)
+const /*>*/{ value: a }/*<{"type":"pattern","method":"ref"}*/ = v
+const /*>*/{ value = 42 }/*<{"type":"pattern","method":"ref"}*/ = v
+console.log(a)
+console.log(value)
+
+const [x] = v
+console.log(x)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/ref-to-pattern/source.js b/tests/fixtures/utils/ref-object-references/ref-objects/ref-to-pattern/source.js
new file mode 100644
index 000000000..3a2c5c330
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/ref-to-pattern/source.js
@@ -0,0 +1,9 @@
+import { ref } from 'vue'
+let v = ref(0)
+const { value: a } = v
+const { value = 42 } = v
+console.log(a)
+console.log(value)
+
+const [x] = v
+console.log(x)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/ref/result.js b/tests/fixtures/utils/ref-object-references/ref-objects/ref/result.js
new file mode 100644
index 000000000..c356f2c2b
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/ref/result.js
@@ -0,0 +1,5 @@
+import { ref } from 'vue'
+let v = ref(0)
+console.log(/*>*/v/*<{"type":"expression","method":"ref"}*/.value)
+let a = v
+console.log(/*>*/a/*<{"type":"expression","method":"ref"}*/.value)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/ref/source.js b/tests/fixtures/utils/ref-object-references/ref-objects/ref/source.js
new file mode 100644
index 000000000..836b45777
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/ref/source.js
@@ -0,0 +1,5 @@
+import { ref } from 'vue'
+let v = ref(0)
+console.log(v.value)
+let a = v
+console.log(a.value)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/shallowRef/result.js b/tests/fixtures/utils/ref-object-references/ref-objects/shallowRef/result.js
new file mode 100644
index 000000000..206f3e88d
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/shallowRef/result.js
@@ -0,0 +1,5 @@
+import { shallowRef } from 'vue'
+let v = shallowRef({ count: 0 })
+console.log(/*>*/v/*<{"type":"expression","method":"shallowRef"}*/.value)
+let a = v
+console.log(/*>*/a/*<{"type":"expression","method":"shallowRef"}*/.value)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/shallowRef/source.js b/tests/fixtures/utils/ref-object-references/ref-objects/shallowRef/source.js
new file mode 100644
index 000000000..98496ae7f
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/shallowRef/source.js
@@ -0,0 +1,5 @@
+import { shallowRef } from 'vue'
+let v = shallowRef({ count: 0 })
+console.log(v.value)
+let a = v
+console.log(a.value)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/toRef/result.js b/tests/fixtures/utils/ref-object-references/ref-objects/toRef/result.js
new file mode 100644
index 000000000..28bea16dc
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/toRef/result.js
@@ -0,0 +1,5 @@
+import { toRef } from 'vue'
+let v = toRef(foo, 'bar')
+console.log(/*>*/v/*<{"type":"expression","method":"toRef"}*/.value)
+let a = v
+console.log(/*>*/a/*<{"type":"expression","method":"toRef"}*/.value)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/toRef/source.js b/tests/fixtures/utils/ref-object-references/ref-objects/toRef/source.js
new file mode 100644
index 000000000..df884f003
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/toRef/source.js
@@ -0,0 +1,5 @@
+import { toRef } from 'vue'
+let v = toRef(foo, 'bar')
+console.log(v.value)
+let a = v
+console.log(a.value)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/toRefs-to-pattern/result.js b/tests/fixtures/utils/ref-object-references/ref-objects/toRefs-to-pattern/result.js
new file mode 100644
index 000000000..527acdc78
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/toRefs-to-pattern/result.js
@@ -0,0 +1,5 @@
+import { toRefs } from 'vue'
+let bar = toRefs(foo)
+const { x, y = 42 } = bar
+console.log(/*>*/x/*<{"type":"expression","method":"toRefs"}*/.value)
+console.log(/*>*/y/*<{"type":"expression","method":"toRefs"}*/.value)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/toRefs-to-pattern/source.js b/tests/fixtures/utils/ref-object-references/ref-objects/toRefs-to-pattern/source.js
new file mode 100644
index 000000000..b2c39b4a9
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/toRefs-to-pattern/source.js
@@ -0,0 +1,5 @@
+import { toRefs } from 'vue'
+let bar = toRefs(foo)
+const { x, y = 42 } = bar
+console.log(x.value)
+console.log(y.value)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/toRefs/result.js b/tests/fixtures/utils/ref-object-references/ref-objects/toRefs/result.js
new file mode 100644
index 000000000..809dfc902
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/toRefs/result.js
@@ -0,0 +1,18 @@
+import { toRefs } from 'vue'
+let { x, y } = toRefs(foo)
+console.log(/*>*/x/*<{"type":"expression","method":"toRefs"}*/.value)
+let a = y
+console.log(/*>*/a/*<{"type":"expression","method":"toRefs"}*/.value)
+console.log(/*>*/y/*<{"type":"expression","method":"toRefs"}*/.value)
+
+let bar = toRefs(foo)
+console.log(bar)
+console.log(/*>*/bar.x/*<{"type":"expression","method":"toRefs"}*/.value)
+console.log(/*>*/bar.y/*<{"type":"expression","method":"toRefs"}*/.value)
+
+const z = bar.z
+console.log(/*>*/z/*<{"type":"expression","method":"toRefs"}*/.value)
+
+let b;
+/*>*/b/*<{"type":"pattern","method":"toRefs"}*/ = bar.b
+console.log(/*>*/b/*<{"type":"expression","method":"toRefs"}*/.value)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/toRefs/source.js b/tests/fixtures/utils/ref-object-references/ref-objects/toRefs/source.js
new file mode 100644
index 000000000..638e69296
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/toRefs/source.js
@@ -0,0 +1,18 @@
+import { toRefs } from 'vue'
+let { x, y } = toRefs(foo)
+console.log(x.value)
+let a = y
+console.log(a.value)
+console.log(y.value)
+
+let bar = toRefs(foo)
+console.log(bar)
+console.log(bar.x.value)
+console.log(bar.y.value)
+
+const z = bar.z
+console.log(z.value)
+
+let b;
+b = bar.b
+console.log(b.value)
diff --git a/tests/lib/rules/no-ref-object-destructure.js b/tests/lib/rules/no-ref-object-destructure.js
new file mode 100644
index 000000000..4ef92acff
--- /dev/null
+++ b/tests/lib/rules/no-ref-object-destructure.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-destructure')
+
+const tester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('no-ref-object-destructure', 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
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/utils/ref-object-references.js b/tests/lib/utils/ref-object-references.js
new file mode 100644
index 000000000..66ee89d0c
--- /dev/null
+++ b/tests/lib/utils/ref-object-references.js
@@ -0,0 +1,164 @@
+'use strict'
+
+const fs = require('fs')
+const path = require('path')
+const assert = require('assert')
+
+const Linter = require('eslint').Linter
+
+const {
+  extractRefObjectReferences,
+  extractReactiveVariableReferences
+} = require('../../../lib/utils/ref-object-references')
+
+const FIXTURE_ROOT = path.resolve(
+  __dirname,
+  '../../fixtures/utils/ref-object-references'
+)
+const REF_OBJECTS_FIXTURE_ROOT = path.resolve(FIXTURE_ROOT, 'ref-objects')
+const REACTIVE_VARS_FIXTURE_ROOT = path.resolve(FIXTURE_ROOT, 'reactive-vars')
+
+/**
+ * Load test patterns from fixtures.
+ *
+ * @returns {object} The loaded patterns.
+ */
+function loadPatterns(rootDir) {
+  return fs.readdirSync(rootDir).map((name) => {
+    const code0 = fs.readFileSync(path.join(rootDir, name, 'source.js'), 'utf8')
+    const code = code0.replace(/^<!--(.+?)-->/, `<!--${name}-->`)
+    return { code, name }
+  })
+}
+
+function extractRefs(code, extract) {
+  const linter = new Linter()
+  const references = []
+
+  linter.defineRule('vue/extract-test', (context) => {
+    const refs = extract(context)
+
+    const processed = new Set()
+    return {
+      '*'(node) {
+        if (processed.has(node)) {
+          // Old ESLint may be called twice on the same node.
+          return
+        }
+        processed.add(node)
+        const data = refs.get(node)
+        if (data) {
+          references.push(data)
+        }
+      }
+    }
+  })
+  const messages = linter.verify(
+    code,
+    {
+      parserOptions: { ecmaVersion: 2020, sourceType: 'module' },
+      rules: { 'vue/extract-test': 'error' },
+      globals: {
+        $ref: 'readonly',
+        $computed: 'readonly',
+        $shallowRef: 'readonly',
+        $customRef: 'readonly',
+        $toRef: 'readonly',
+        $: 'readonly',
+        $$: 'readonly'
+      }
+    },
+    undefined,
+    true
+  )
+
+  const errors = messages.map((message) => message.message)
+  if (errors.length > 0) {
+    assert.fail(errors.join(','))
+  }
+
+  return references
+}
+
+describe('extractRefObjectReferences()', () => {
+  for (const { name, code } of loadPatterns(REF_OBJECTS_FIXTURE_ROOT)) {
+    describe(`'test/fixtures/utils/ref-object-references/ref-objects/${name}/source.vue'`, () => {
+      it('should to extract the references to match the expected references.', () => {
+        /** @type {import('../../../lib/utils/ref-object-references').RefObjectReference[]} */
+        const references = [...extractRefs(code, extractRefObjectReferences)]
+
+        let result = ''
+        let start = 0
+        let ref
+        while ((ref = references.shift())) {
+          result += code.slice(start, ref.node.range[0])
+          result += `/*>*/`
+          result += code.slice(...ref.node.range)
+          result += `/*<${JSON.stringify({
+            type: ref.type,
+            method: ref.method
+          })}*/`
+          start = ref.node.range[1]
+        }
+        result += code.slice(start)
+
+        const actual = result
+
+        // update fixture
+        // fs.writeFileSync(
+        //   path.join(REF_OBJECTS_FIXTURE_ROOT, name, 'result.js'),
+        //   actual,
+        //   'utf8'
+        // )
+
+        const expected = fs.readFileSync(
+          path.join(REF_OBJECTS_FIXTURE_ROOT, name, 'result.js'),
+          'utf8'
+        )
+        assert.strictEqual(actual, expected)
+      })
+    })
+  }
+})
+describe('extractReactiveVariableReferences()', () => {
+  for (const { name, code } of loadPatterns(REACTIVE_VARS_FIXTURE_ROOT)) {
+    describe(`'test/fixtures/utils/ref-object-references/reactive-vars/${name}/source.vue'`, () => {
+      it('should to extract the references to match the expected references.', () => {
+        /** @type {import('../../../lib/utils/ref-object-references').ReactiveVariableReference[]} */
+        const references = [
+          ...extractRefs(code, extractReactiveVariableReferences)
+        ]
+
+        let result = ''
+        let start = 0
+        let ref
+        while ((ref = references.shift())) {
+          result += code.slice(start, ref.node.range[0])
+          result += `/*>*/`
+          result += code.slice(...ref.node.range)
+          result += `/*<${JSON.stringify({
+            escape: ref.escape,
+            method: ref.method
+          })}*/`
+          start = ref.node.range[1]
+        }
+        result += code.slice(start)
+
+        const actual = result
+
+        // update fixture
+        // fs.writeFileSync(
+        //   path.join(REACTIVE_VARS_FIXTURE_ROOT, name, 'result.js'),
+        //   actual,
+        //   'utf8'
+        // )
+
+        const expected = fs.readFileSync(
+          path.join(REACTIVE_VARS_FIXTURE_ROOT, name, 'result.js'),
+          'utf8'
+        )
+        assert.strictEqual(actual, expected)
+      })
+    })
+  }
+})