Soy un poco nuevo en Vue3 y encontré ese problema en un proyecto. A continuación se muestran mis bloques de pseudocódigo:

declaración de variable anidada:

 const testData = ref([ { type: '', title: '', data: { labels: [] as string[], datasets: [ { type: '', label: '', data: [] as number[], }, ], }, }, ])

y aquí es donde arroja el error

 GetData().then(response=>{ if(response != undefined){ response.result.forEach(value=>{ testData.value[0].data.datasets[0].data.push(value)//this line throws out the error }) } ... }).catch(err=>console.log(err))

y el mensaje de error se encuentra a continuación:

 RangeError: Maximum call stack size exceeded at Array.value (helpers.segment.js:1550:26) at Array.instrumentations.<computed> (reactivity.esm-bundler.js:398:42) at Array.value (helpers.segment.js:1550:26) at Array.instrumentations.<computed> (reactivity.esm-bundler.js:398:42) at Array.value (helpers.segment.js:1550:26) at Array.instrumentations.<computed> (reactivity.esm-bundler.js:398:42) at Array.value (helpers.segment.js:1550:26) at Array.instrumentations.<computed> (reactivity.esm-bundler.js:398:42) at Array.value (helpers.segment.js:1550:26) at Array.instrumentations.<computed> (reactivity.esm-bundler.js:398:42)

De acuerdo con otros artículos en línea, todos dijeron que este error ocurre debido al bucle, pero aquí el bucle foreach solo tiene que repetirse menos de 15 veces, y una vez que cambié testData a una matriz simple sin usar ref (), todo funcionó bien y el resultado final se presentó como lo que esperaba. ¿Puede alguien decirme la razón?