Ref objects should be used after unwrapping

• VUE_MISSING_REF_UNWRAP
• Error
• Medium
• vue

This rule applies when a ref object is used without unwrapping the value.

The ref object is a reactive wrapper object of a value and the actual value is stored in its value property.

Inside <template>, Vue provides auto-unwrapping of ref objects, so that one can directly access the wrapped value without the value property.

However, caution is needed when using ref objects inside <script setup> including function definitions. For example, if a ref object is used as an operand of + operator without unwrapping, it is likely a programmer's mistake.

Noncompliant Code Example

<script setup>
import { ref } from 'vue';

const count = ref(0);
function nextCount() {
  count.value = count + 100; // VUE_MISSING_REF_UNWRAP alarm
}
</script>

<template>
  <div>{{ count }}</div>
  <button @click="nextCount">Next</button>
</template>

Compliant Code Example

<script setup>
import { ref } from 'vue';

const count = ref(0);
function nextCount() {
  count.value = count.value + 100;
}
</script>

<template>
  <div>{{ count }}</div>
  <button @click="nextCount">Next</button>
</template>

Version

This rule was introduced in DeepScan 1.43.0.

See

• Reactivity Fundamentals - ref()