[Vue warn]: Set operation on key failed: target is readonly Vue Origin: On your device OSI layer 7 · Application Last updated 5 Nov 2026

Vue: [Vue warn]: Set operation on key "name" failed: target is readonly.

You mutated a readonly reactive object (props, readonly(), shallowReadonly, or a frozen/store state).

Exact message you may see [Vue warn]: Set operation on key "name" failed: target is readonly.Set operation on key failed: target is readonly[Vue warn]: Delete operation on key failed: target is readonlySet operation on key "value" failed: target is readonly
Explore the map of this error Full error map →
Seen on: Vue

Meaning

Props are readonly: emit an event or copy to local state. For Pinia/Vuex store state use actions/mutations. If you called readonly(obj) intentionally, mutate the original object instead of the readonly proxy.

Common causes

  • Mutating props.user.name
  • Assigning to a readonly() proxy
  • provide(key, readonly(state)) mutated in a child
  • Vuex strict mode
  • Frozen objects

⚡ Quick fix

  1. Emit changes to the parent (emit("update:user", copy))
  2. Copy props into local refs (structuredClone/ref({...props.user}))
  3. Mutate via store actions

Detailed fix by platform

Vue

  1. const local = reactive({ ...props.user });

How to diagnose

  1. Target — Props/readonly?
  2. Mutation — Direct?
  3. Fix — Emit/copy?

🔧 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):

[Vue warn]: Avoid adding reactive properties to a Vue instance or its root $data at runtime — Vue 2: [Vue warn]: Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option (Vue)[Vue warn]: Avoid add…[Vue warn]: Invalid prop: type check failed — Vue: [Vue warn]: Invalid prop: type check failed for prop "count". Expected Number with value 5, got String with value "5" (Vue)[Vue warn]: Invalid p…[Vue warn]: Maximum recursive updates exceeded — Vue: [Vue warn]: Maximum recursive updates exceeded in component <Foo>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself (Vue)[Vue warn]: Maximum r…[Vue warn]: Missing required prop — Vue: [Vue warn]: Missing required prop: "title" (Vue)[Vue warn]: Missing r…[Vue warn]: Write operation failed: computed value is readonly — Vue: [Vue warn]: Write operation failed: computed value is readonly (Vue)[Vue warn]: Write ope…Avoid mutating a prop directly — Vue: [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders (Vue)Avoid mutating a prop…Error: [vuex] do not mutate vuex store state outside mutation handlers — Vuex (strict mode): Error: [vuex] do not mutate vuex store state outside mutation handlers. (Vue)Error: [vuex] do not …ESLint Parsing error in .vue files — ESLint: Parsing error: Unexpected token < / Parsing error: '>' expected (vue-eslint-parser not configured) (Vue)ESLint Parsing error …[Vue warn…

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.