In charts array I have the chartData object for every platform

I am rendering Bar component from vue-chartjs/legacy like this :

<div class="row">
    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 text-center">
      <Bar v-if="loaded" :key="platform" :chart-id="platform" :chart-data="charts[platform]" :width="300" :height="100" :styles="{ 'padding-left': '20px', 'padding-right': '20px'}" />
    </div>
</div>

This is how I am populating my charts array where key is platform like facebook, youtube etc

                 this.platforms.forEach(platform => {
                    this.chartData = new getChartDataObject();


                    this.stats.forEach((s, i) => {
                        this.chartData.labels.push(s.type);
                        // this.chartData.datasets[0].label.push(s.type);
                        this.chartData.datasets[0].data.push(s.short_leads_count);
                    })

                    this.charts[platform] = this.chartData;
                
                    this.loaded = true;

                    
                })

Sample data of charts['facebook'] of a platform facebook :

{ "labels": [ "GroupMembers", "Likes", "Friends", "Comments", "Messages" ], "datasets": [ { "label": "Statistics", "backgroundColor": [ "rgba(255, 99, 132, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(54, 162, 235, 0.2)" ], "borderColor": [ "rgb(255, 99, 132)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(255, 159, 64)", "rgb(54, 162, 235)" ], "borderWidth": 1, "data": [ "0", "0", "0", "6", "0" ] } ] }

But in loop it only renders the last graph, how can i fix it ?