En la matriz de gráficos tengo el objeto chartData para cada plataforma

Estoy representando el componente Bar de vue-chartjs/legacy de esta manera:

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

Así es como estoy completando mi matriz de gráficos donde la clave es una plataforma como 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; })

Datos de muestra de gráficos ['facebook'] de una plataforma 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" ] } ] }

Pero en bucle solo muestra el último gráfico, ¿cómo puedo solucionarlo?