Vue: Avoid mutating a prop directly

Educational use only. Content explains errors and defensive fixes for systems you own or are authorised to test. Do not use any technique here to access data, accounts, or networks without permission.

Root Cause

Vue enforces a strict one-way data flow from parent components to child components. Props passed down to a child are meant to be read-only. This error occurs when a child component attempts to reassign a value to a prop directly (e.g., `this.myProp = 'new value'` in Vue 2, or mutating a prop in the script setup of Vue 3). Doing so is an anti-pattern because whenever the parent component re-renders, it will overwrite the child's mutation, leading to inconsistent state and difficult-to-track bugs.

Fix / Solution

Child components should never modify props. If a child needs to change data based on user interaction, it should emit an event (`this.$emit` or `defineEmits`) to the parent, and the parent should update its own state, which then naturally flows back down to the child via the prop. If the child just needs a local mutable copy of the prop for internal use, initialize a local `data` or `ref` property using the prop's initial value.

Code Snippet

<!-- ❌ Child mutating prop directly -->
<script setup>
const props = defineProps(['count']);
// ERROR: Attempting to mutate prop
const increment = () => { props.count++; }; 
</script>

<!-- ✅ Emit event to parent to handle the state change -->
<script setup>
const emit = defineEmits(['updateCount']);
const increment = () => { emit('updateCount'); };
</script>