Vue version

3.2.45

Link to minimal reproduction

https://sfc.vuejs.org/#__DEV__eNqNVM2OmzAQfhWLy7ISsRWgF5REWfUFethb6YEFp9Dlx7JNohXKu3fGxgRIut2L5fn5vs8ej2fwXoSg5557ibdTuayEJorrXhzSllSN6KQmr1xpcpJdQ54oQwPzn27xgUh+ItcxxcYgmnct4DIpyR4T/J/bIPz1jKEds0qgAYbmjagzzVEx1bDsiuqMBiG43CzyWlbKEKIebJWu6hqMTJ8rbuXzsqoLA2MOZywhkT/VwwD46xW3O2adY4a5ZQLRferBmnrMnWGiwu10Wi/w7P03TSboH9W1UMLB0I0BlXoJMR70QV3QTr1Sa6ESxvpWvP+medewI8SY7FtdNXxTdM0xoiGNv4Gs0nM/5arZvMnuorgExdQLZuQMnGcuN5K3BZccLvCJ2Cp3IbiK3YmiJhTwCgVwzfCgeTDL9Qc8V3DJdF4ue8QW3raJkJ1Q0CgFP1Ut/4GWP5YOHiMZt4ToD8GTFymzD+uBg8ACXWXJGCMa33F7Y275BfK3tgeNDAVGg7AJCNiCtP9M9geXTs9Z3XMqelX60R19eEObfgK0YV6rhmPr3wtiZC4YPhacFKNZrSwict+KUjpdC//XXAaT5jLRf2TiO5nYyaypMTCnju+pzZv7/vP+MB0wQGsBAJrlFYKhahpeVPDJEi177l7331MDg+63T5tUf7ezAH+6dZr4W69115JjXlf5O/x18/ypN46YW/fsmM38DBcucaYtvoKLlrjoq7h4iYsf4Urpdm68ETIMY1vj5Js7wrUjWjti63DDcj5W58Pw+hd+oxRm

Steps to reproduce

Press test1, test2, test3, test4 and watch output

What is expected?

Ref arr in app.vue should be changed (mutated) from child by any function test1, test2, test3, test4 from Test.vue.

What is actually happening?

Function test1 and test2 in Test.vue is changeing original arr value passed frrom app.vue. (In my app also have same issue with test3 and test4 buct cant reproduce it. I am sure that it is the same issue as in test 1 and test 2.)

System Info

Mac os, chrome

Any additional comments?

No response

In Javascript, reassigning an array (or any object, for that matter) to a new variable does not create a "new array". it just creates a new reference to the same array.

Consequently, the behavior you are seeing it expected - the first two functions operate on the original array, mutating it. the latter two operate on actual new arrays that you created from the original.

@LinusBorg this is the real issue that cant be reproduced in SFC

https://www.loom.com/share/ea78c49c6714493996390a88d2f62df122

If it is still issue let me know i will make minimalistc version of the app and push it to git.

You are creating a shallow copy of the array. the objects in the new array are still the same objects as in the old array.

So the same explanation still applies, basically. you are mutating the same objects in the array.

if you need a deep copy , there are multiple small or larger libs on npm that do that for you, including lodash's deepClone().

I see, thanks for help. This should be better explained in docs.

But this has nothing to do with Vue or Reactivity. It's a fundamental Javascript behavior.