# vue/no-ref-object-destructure
disallow destructuring of ref objects that can lead to loss of reactivity
# 📖 Rule Details
This rule reports the destructuring of ref objects causing the value to lose reactivity.
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 */)
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 (opens new window) for more information on Reactivity Transform.
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 */)
# 🔧 Options
Nothing.
# 🚀 Version
This rule was introduced in eslint-plugin-vue v9.5.0