Vue-query returned data is read only. How to make it mutable?

The accepted answer did not work for me, even if I used the [...] operator. What did work was using the toRaw function from Vue, to remove the proxy wrapper around each object before assigning the data to my reactive variable.

watch(
  () => productsQuery.data.value,
  (newData) => {
    products.value = toRaw(newData ?? []);
  }
);

You can use the method toRaw , worked for me

TL;DR - Do not use toRaw(). Use something like structuredClone(toRaw(...)).

I tested using toRaw() and it seems to work on the surface, but I don't think it's going to work as intended. What's actually happening is that it gives you a reference to the underlying object that bypasses vue-query's read-only proxy.

So if you use toRaw() and store that in a mutable ref, mutating that ref is going to end up mutating the data in the vue-query cache as well.

This is why the Vue docs do not recommend using toRaw() to get a persistent reference to an object (https://vuejs.org/api/reactivity-advanced.html#toraw):

toRaw() can return the original object from proxies created by reactive(), readonly(), shallowReactive() or shallowReadonly().
This is an escape hatch that can be used to temporarily read without incurring proxy access / tracking overhead or write without triggering changes. It is not recommended to hold a persistent reference to the original object. Use with caution.

A better solution here is to do something like structuredClone(toRaw(...)). This will give you an actual copy of the vue-query data that can be mutated without affecting the vue-query cache.