Reactive element changing the initial assigned constant value.

[leonardo-cactus-gaming]

Vue version

3

Link to minimal reproduction

https://stackblitz.com/edit/nuxt-starter-dpnpuc?file=app.vue

Steps to reproduce

const obj = { main: false };
const el = reactive(obj);

el.main = true;
console.log(obj.main);

// true

What is expected?

// false

What is actually happening?

Using vue 3, I have a constant "const obj = { main: false }" and I assign that value to a vue reactive constant "const el = reactive(obj)". When changing the "el.main" value, the same value changes in obj.main. This should not happen.

System Info

No response

Any additional comments?

No response

[Thorsten Lünborg]

That's literally how Vue reactivity works. a reactive proxy wraps the original object, intercepts mutations on the object and tracks those as dependencies of reactive effect.