Al usar vuejs3 con la API de composición, obtengo datos de una API de forma asíncrona.

 const accounts = ref([]) const credits = ref([]) const debits = ref([]) const summary = ref([]) const getaccounts = async () => { try { // getData is a preformatted axios function const response = await getData.get(`/myurl/${route.params.month}/${route.params.year}`) accounts.value = [...response.data.accounts] debits.value = [...response.data.accounts].filter(obj => { return obj.amount < 0 }) summary.value = [...debits.value] // DOESN'T WORK setSummary(summary.value) // THEREFORE ALSO DOESN'T WORK credits.value = [...response.data.comptes].filter(obj => { return obj.amount > 0 }) } catch (error) { console.log(error) } }

debits.value es y Array con 55 objetos que se ve así:

 const data = [ { id: 12, amount : 45, category: "alim" }, { id: 15, amount : 32, category: "misc" }, { id: 11, amount : 145, category: "bla" }, { id: 20, amount : 40, category: "misc" }, { id: 22, amount : 12, category: "alim" }, { id: 33, amount : 5, category: "bla" } ]

Quiero agrupar cantidades totales por categoría en una nueva matriz de objetos. El código funciona en javascript simple y así es como se ve la función setSummary:

 const setSummary = (debs) => { let arr = debs.reduce((acc, item) => { let existItem = acc.find(({categorie}) => item.categorie === categorie); if(existItem) { existItem.amount += item.amount; } else { acc.push(item); } return acc; }, []) resume.value = arr }

Cualquier manipulación que haga en summary.value afecta a debits.value . Sé que la reactividad de Vue se basa en la documentación de Proxy , pero no veo cómo clonar o deconstruir un objeto de tal manera que las manipulaciones en el objeto clonado no afecten al "principal".