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

Question

import { useQuery } from "vue-query";
const { isLoading, data /* read only */, error, isError, refetch } = useQuery("todo", todo)

I just found out data returned by vue-query is read only. Vue-query is similary project to React-query. You can find it here.
If I do data.todoList.push(newTodo) then I got the following warning

[Vue warn] Set operation on key "xxx" failed: target is readonly

My question is 1) How do I change the value returned by vue-query? 2) If I need to change the returned data, what is the best way to do it?

Answer 1

it is intentional to NOT be able to change the returned content, see github issue.

just save/copy the returned data into a reactive variable and modify it as u wish.

Answer 2

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 ?? []);
  }
);