Why shouldn't you mutate props directly, and what should you do instead?

Props establish a one-way data flow from parent to child. If a child mutates a prop directly, the change won't propagate back correctly and can cause confusing bugs when the parent later re-renders and overwrites the child's local change — Vue also emits a runtime warning for this.

Instead:

1. Create local state derived from the prop (e.g., with ref) if the child needs its own copy.
2. Emit an event so the parent updates the source of truth, following Vue's unidirectional flow.

const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

function updateValue(v) {
  emit('update:modelValue', v)
}