vue/no-mutating-props

Why

Props flow one way, from parent to child. Assigning to a prop is refused with a warning; pushing into a prop array or setting a field of a prop object silently changes the parent's state from inside the child, so the data changes without the parent knowing who changed it, and the next parent render can overwrite it.

Fix

Emit an event and let the owner change its state (emit('update:modelValue', value), or defineModel() for a two-way binding). For a value the child edits locally, copy it: const draft = ref(props.initialValue), or computed for a derived value. Sort a copy: [...props.items].sort(...) or toSorted().

Examples

<!-- bad -->
<script setup>
const props = defineProps({ items: Array, count: Number })
function add(item) { props.items.push(item); props.count++ }
</script>
<!-- good -->
<script setup>
const props = defineProps({ items: Array, count: Number })
const emit = defineEmits(['add'])
const sorted = computed(() => props.items.toSorted((a, b) => a.rank - b.rank))
function add(item) { emit('add', item) }
</script>

Sources

• Vue docs, Props (one-way data flow, mutating object and array props)
• eslint-plugin-vue, no-mutating-props

Read it in the terminal

npx github:dawidolko/frontend-skills explain vue/no-mutating-props