Skip to main content

Why must props be immutable?

VueMiddle~2 min read
Suggest an edit

Props in Vue must be immutable, because they represent data that is controlled by the parent component, not the child. If a child component could change props directly, it would break the application's logic, make data unpredictable, and lead to bugs.

Let's break this down as clearly as possible.

1. One-way data flow

Vue uses the model:

javascript
Parent → Child

That is:

  • the parent passes data (props),
  • the child uses this data, but does not change it.

If a child component could change props, confusion would arise:

  • who controls the data?
  • the parent or the child?

A one-way flow makes the system predictable and stable.

2. If you change props, the parent will not know about it

Example:

Parent:

javascript
<UserCard :name="userName" />

Child:

javascript
props.name = 'New name' // bad

The parent's state userName will not change, even though the child changed name.

As a result:

  • the parent has one value,
  • the child has another,
  • the dependency graph breaks.

3. This breaks reactivity

Vue tracks reactions based on the props → template dependency.

If a component changed props:

  • Vue would not be able to correctly track what changed,
  • this would create chaos in updating the component tree.

4. Component composition would become unpredictable

Imagine there is a chain:

javascript
App → UserList → UserCard

If UserCard suddenly starts changing its props:

  • UserList will not know about the changes,
  • neither will App,
  • UI updates will become uncontrollable.

Components will stop being pure, predictable, and isolated.

5. Props are like function arguments

If a function receives an argument:

javascript
function greet(name) { name = 'John' // bad }

this is also considered bad practice - arguments should be immutable.

Components are the same as functions, just visual.

6. Vue protects props with a warning

If you try to change a prop:

javascript
props.count++

Vue will issue an error:

javascript
[Vue warn]: Attempting to mutate prop "count".

This is protection against incorrect use.

How do you correctly change values that came through props?

Way 1. Use local state

If the value needs to be changed inside the component:

javascript
<script setup> const props = defineProps(['initialValue']) const value = ref(props.initialValue) </script>

Way 2. Notify the parent through emit

javascript
<script setup> const props = defineProps(['modelValue']) const emit = defineEmits(['update:modelValue']) function increment() { emit('update:modelValue', props.modelValue + 1) } </script>

The parent updates the state → the new value comes back through props.

This is one-way data flow plus two-way interaction through events.

Summary (cheat sheet)

Why props are immutable:

  • They ensure one-way data flow
  • The parent remains the single source of truth
  • Reactivity works correctly
  • Components remain predictable
  • Confusion between parent and child state is avoided
  • Vue warns about their mutation

If you need to change data, create a local copy or use emit to ask the parent to change the state.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit