Avoid mutating a prop directly 🟩 Vue

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.

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:

🧠 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.