Estoy tratando de hacer un sitio de visualización de COVID19 usando Chart.js y VueJs

este es My App.vue que contiene la llamada API y almacena los datos en matrices

 <template> <div id="app" class="container"> <div class="row mt-5" v-if="PositiveCases.length > 0"> <div class="col"> <h2>Positives</h2> <lineChart :chartData="PositiveCases" :options="chartOptions" label="Positive" /> </div> </div> </div> </template> <script> import axios from "axios"; import moment from 'moment' import lineChart from "./components/lineChart.vue"; export default { name: 'App', components: { lineChart }, data(){ return{ PositiveCases : [], Deaths: [], Recoverd: [], chartOptions: { responsive: true, maintainAspectRatio: false } } }, async created(){ const {data} = await axios.get('https://api.covid19api.com/live/country/egypt') //console.log(data); data.forEach(d => { const date = moment(d.Date,"YYYYMMDD").format("MM/DD") const {Confirmed,Deaths,Recovered} = d this.PositiveCases.push({date, total : Confirmed}) this.Deaths.push({date, total : Deaths}) this.Recoverd.push({date, total : Recovered}) // console.log("PositiveCases",this.PositiveCases); // console.log("Deaths",this.Deaths); // console.log("Recoverd",this.Recoverd); }); } } </script>

y este es mi lineChart.vue que contiene el código del gráfico de líneas, los datos almacenados correctamente tanto en las fechas como en los totales

 <script> import {Line} from 'vue-chartjs' export default { extends: Line, props: { label:{ type: String, }, chartData:{ type: Array, }, options:{ type: Object, } }, mounted(){ const dates = this.chartData.map(d => d.date).reverse() const totals = this.chartData.map(d => d.total).reverse() console.log("dates",dates); console.log("totals",totals); this.renderChart({ labels: dates, datasets: [{ label: this.label, data: totals, }], },this.options ) } } </script>

el error en la consola dice

quiero saber cual es la solucion, todos los datos estan guardados correctamente en ambos archivos