I trying to make a COVID19 visualization site using Chart.js and VueJs

this is My App.vue that contains the API call and stores the data into arrays

<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>

and this is my lineChart.vue that contains the Line chart code the data stored correctly in both the dates and totals

<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>

the error in the console says

want to know what is the solution, all the data are stored correctly in both files