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

**Code:** `Avoid mutating a prop directly` · **Category:** Vue · **Seen on:** Vue

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

## 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?

---
Source: [WhatIsMyError](https://whatismyerror.com/errors/vue/avoid-mutating-a-prop-directly)