Avoid mutating a prop directly Vue Origin: On your device Last updated 14 Oct 2026

Vue: [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders

A child component assigned to a prop. Props flow one way — the parent owns the value.

Exact message you may see Avoid mutating a prop directlyAttempting to mutate propSet operation on key failed: target is readonly
Seen on: Vue

Meaning

Copy the prop into local state if the child needs its own version, or emit an event (v-model with defineModel) so the parent updates it.

Common causes

  • Assigning to props.x in the child
  • v-model bound directly to a prop
  • Mutating nested prop objects (works but unsafe)

⚡ Quick fix

  1. Emit update events / use defineModel()
  2. Copy to a local ref for local edits
  3. Use a computed with get/set

Detailed fix by platform

Vue

  1. javascript
    <script setup>
    const model = defineModel();   // parent: <Child v-model="title" />
    </script>
    <template><input v-model="model"></template>

How to diagnose

  1. Child — Which prop is assigned?
  2. Parent — Should it own the change?

🔧 Still not fixed?

Many errors look alike. If the steps above didn’t solve it, one of these is probably what you’re facing:

Where this error sits

Origin: On your device. Errors that are often confused with or caused by this one (click to open):

Failed to resolve component — Vue: [Vue warn]: Failed to resolve component: x (Vue)Failed to resolve com…key is not a prop — Warning: `key` is not a prop. Trying to access it will result in `undefined` being returned. (React)key is not a propnon-boolean attribute — Warning: Received `true` for a non-boolean attribute `x`. (React)non-boolean attributeProperty was accessed during render but is not defined — Vue: [Vue warn]: Property "x" was accessed during render but is not defined on instance (Vue)Property was accessed…Avoid mut…

Explore the map of this error Full error map →

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.

💬 What worked for others

No tips yet — did something else fix this for you?

Share what worked for you

Tips are checked by an editor before they appear. Links are removed.