deepmerge with arrayMerge option adds proxy to nested array

[youri-spendcloud]

Vue version

^3.5.13

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-4umr7oj9?file=src%2FApp.vue

Steps to reproduce

Run the stackblitz and open the console.

What is expected?

These weird proxied arrays should not be created?

What is actually happening?

With the arrayMerge option, the nested arrays are merged with proxies. Now for example a localForage can't clone the object.

Without the option, both the reactive objects are merged and they have no nested arrays with proxy.

System Info

Any additional comments?

Related issue on vuex-persist

championswimmer/vuex-persist#271 (mine)

Other users reporting the same "cannot clone error" when migrating from Vue 2 to Vue 3.

championswimmer/vuex-persist#232
championswimmer/vuex-persist#235

[jamesnakagawa]

• Perhaps try shallowReactive if you don't want deeply-nested Vue proxies
• If that doesn't work for you, try Vue's toRaw in your array merge handler:

const overwriteMerge = (destinationArray, sourceArray, options) =>
  toRaw(sourceArray);

[youri-spendcloud]

@jamesnakagawa that would be a solution, but my question is how is is possible, that the deepmerge creates a proxy on the nested arrays

[edison1105]

This is the expected behavior. When accessing the internal Objects/Arrays of a reactive object, they are processed to become reactive. The overwriteMerge function internally accessed s1.l, so it turned into a Proxy array.

As @jamesnakagawa said, you need to use toRaw.

[youri-spendcloud]

@edison1105 thanks for your clarification