Cannot update charts dynamically, it shows "Uncaught RangeError: Maximum call stack size exceeded" error

[premflash16]

it shows this error
"Uncaught RangeError: Maximum call stack size exceeded"

below is my code, can anyone help me out: it only updates the month not the y - axis values

<template>
<h1>Learning Charts</h1>
<div class="chartss">
<button @click="updateMonth()">Click here to update</button>
<Chart ref="primeChart" type="line" :data="basicData" />
</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'





function updateMonth() {
basicData.value.labels.push('September')
basicData.value.datasets[0].data.push(Math.floor(Math.random() * 60))
basicData.value.datasets[1].data.push(Math.floor(Math.random() * 60))

}

const basicData = ref(
{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August'],
datasets: [
{
label: 'My First dataset',
backgroundColor: '#42A5F5',
data: [64, 23, 58, 12, 66, 16, 32, 44]
},

{
label: 'My Second dataset',
backgroundColor: '#f2df74',
data: [24, 65, 45, 36, 59, 84, 21, 10]
}



],

options: {
responsive: true,
hoverMode: 'index',
stacked: false,
scales: {
yAxes: [{
type: 'linear',
display: true,
position: 'left',
id: 'y-axis-1',
},
{
type: 'linear',
display: true,
position: 'right',
id: 'y-axis-2',
gridLines: {
drawOnChartArea: false
}
}]
}
}

}
);


</script>

<style>

h1{
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
}

.chartss{
padding: 25px 200px 200px;
}

button{
align-items: center;
justify-content: center;
margin-top: 20px;
}

</style>

[Melloware]

Why not just create a Code Sandbox reproducer it is easier for people to look at than pasted code in the forum: https://codesandbox.io/s/mqilc2

You can use that link its already started for you with Line Charts