Reactivity caveats and limitations in Vue

Introduction

Reactivity helps Vue update the page when data changes. But some things don't work automatically, so you need to know the limits.

When you delete properties from a reactive object using the delete operator

When you shorten an array by directly setting its length

When you want to watch deeply nested changes in objects

When you use non-reactive values inside reactive code

When you want to track changes on complex data structures like Maps or Sets

Syntax

Vue

const obj = reactive({ a: 1 })
delete obj.a // This won't be reactive

// Correct way to delete reactive property
Reflect.deleteProperty(obj, 'a') // triggers reactivity

// For arrays
const arr = reactive([1, 2, 3])
arr.length = 1 // direct length shortening is not reliably reactive
arr.splice(1) // reactive way

Vue 3's reactive can track most changes but property deletion with delete and direct array length shortening may not trigger updates reliably.

Use Reflect.deleteProperty() for deletions and array methods like splice to keep changes reactive.

Examples

Changing existing properties works fine.

Vue

const state = reactive({ count: 0 })
state.count = 1 // reactive update

Deleting properties with delete does not trigger reactivity.

Vue

const state = reactive({ prop: 'hello' })
delete state.prop // not reactive

Directly shortening array with length assignment is not reliably reactive; use splice instead.

Vue

const arr = reactive([1, 2, 3])
arr.length = 1 // not reliably reactive
arr.splice(1) // reactive update

Sample Program

This Vue component shows reactivity caveats with deleting a property using delete and shortening an array by setting length directly vs. using splice. Direct methods do not update the UI.

Vue

<template>
  <div>
    <p>Count: {{ state.count }}</p>
    <p>Prop: {{ state.prop }}</p>
    <button @click="deleteProp">Delete Prop</button>
    <p>Array: {{ arr }}</p>
    <button @click="shortenArrayDirect">Shorten Array Directly</button>
    <button @click="shortenArraySplice">Shorten Array with Splice</button>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const state = reactive({ count: 0, prop: 'hello' })
const arr = reactive([1, 2, 3])

function deleteProp() {
  delete state.prop
}

function shortenArrayDirect() {
  arr.length = 1
}

function shortenArraySplice() {
  arr.splice(1)
}
</script>

Important Notes

Vue 3 improved reactivity but delete on properties and direct array length shortening do not reliably trigger updates.

Use Reflect.deleteProperty() for deletions and array methods like splice to ensure updates.

For deeply nested objects, consider using watch with deep option or toRefs for better tracking.

Summary

Vue reactivity tracks most changes but has limits with delete operator on properties and direct array length shortening.

Use Reflect.deleteProperty() and array methods like splice to keep UI updated.

Understanding these limits helps avoid bugs and keeps your app reactive.