Reactivity not triggered when setting state to the same value

[Gonzalo-Bruna]

Issue Description

I'm encountering a situation where Vue's reactivity system doesn't trigger an update when setting a state value to the same value it currently holds. This becomes problematic in scenarios where we need to ensure the UI reflects the current state, even if it hasn't changed.

Example

Consider this simplified component:

<template>
  <input :value="quantity" @input="updateQuantity" type="number" min="1" />
</template>

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

const quantity = ref(1)

const updateQuantity = (event) => {
  let newQuantity = parseInt(event.target.value)
  if (isNaN(newQuantity) || newQuantity < 1) newQuantity = 1
  quantity.value = newQuantity
}
</script>

Current Behavior

1. The input shows "1".
2. User deletes the "1", leaving the input empty.
3. The updateQuantity function sets quantity.value back to 1.
4. The input remains empty because Vue doesn't trigger a re-render (the value was already 1).

Expected Behavior

The input should show "1" again after step 3, reflecting the current state of quantity.

Workaround

I've found a workaround by forcing a state change before setting the actual value:

const updateQuantity = (event) => {
  let newQuantity = parseInt(event.target.value)
  if (isNaN(newQuantity) || newQuantity < 1) newQuantity = 1
  
  // Force reactivity
  quantity.value = -1
  quantity.value = newQuantity
}

While this works, it feels like a hack. Is there a more idiomatic way to handle this scenario in Vue 3?

Environment

• Vue version: 3.5.10
• Nuxt version: 3.13.0

[LinusBorg]

Vue's Reactivity is based on state changes. When state doesn't change, there seems to be no need for updates of effects, so Vue skips them. That's kind of a core assuption.

In edge cases like this one, you can use triggerRef(quantity)

[Shyam-Chen]

In this scenario, I would use the blur event or handle it with a mask.