The error means that structuredClone
was executed on Proxy
instance, which cannot be cloned. In order to allow this, it should be used on raw object that a proxy wraps:
const b = structuredClone(toRaw(a.value));
Notice that toRaw
is used on a.value
because both a
and a.value
are reactive objects, and toRaw
works shallowly and needs to be applied to the innermost object.
Since ref
and reactive
allow to compose reactive objects, toRaw
still may not work for them due to how it works:
ref({ foo: { bar: barRef } })
This would require to recursively use toRaw
on reactive objects before using structuredClone
. At this point this doesn’t make it easier than cloning the objects manually, unless more exotic objects like Set
, Map
, etc are in use.