Cannot render multiple times the same amchart3 graph in a vue component - vue.js

Question

I'm using amcharts3 to generate graphs, Bootstrap 4 for the style and Vue2 for the components. I have a parent component which shows a donut chart which is a component on its own, and I want to render those charts many times as I need
Parent component
<template>
<div class="w-100 container-fluid">
<div class="row">
<!-- Here it goes the Donut Charts -->
</div>
</div>
</template>
<script>
import donutChart from './donutChart';
export default {
components:{
'donut-chart': donutChart
},
data(){
return{
graficos: [
{id: 'grafico', valor:100, valor2: 0},
{id: 'dona', valor:75, valor2: 25},
{id: 'homero', valor:50, valor2:50},
]
}
}
}
</script>
<style></style>
donutChart.vue (the amcharts3 library is already loaded in the Vue project)
<template>
<div class="col">
<div :id="this.dato.id"></div>
</div>
</template>
<script>
export default {
props:{
dato: {
type: Object,
default: {id: 'chartdiv', valor:50, valor2:50}
}
},
data() {
return {
}
},
created: function(){
console.log(this.dato)
AmCharts.makeChart( this.dato.id, {
"type": "pie",
"theme": "none",
"responsive": {
"enabled": true
},
"minWidth": 200,
"maxWidth": 400,
"dataProvider": [ {
"title": "et0",
"value": this.dato.valor
},
{
"title": "Restante",
"value": this.dato.valor2
} ],
"startDuration": 0,
"titleField": "title",
"valueField": "value",
"labelRadius": 5,
"radius": "40%",
"innerRadius": "80%",
"allLabels": [{
"y": "46%",
"align": "center",
"size": 14,
"text": "50%",
"color": "#555"
}]
});
},
mounted: function(){
},
methods:{
}
}
</script>
<style></style>
The problem is the donutChart.vue component is rendered in the parent, and it shows the chart
<donut-chart></donut-chart>
But when I try to render multiple times the same component and/or passing data via props the chart doesn't render at all
<donut-chart :dato="{id: 'grafico', valor: 100, valor2: 0}"></donut-chart>
<donut-chart :dato="{id: 'dona', valor: 75, valor2: 25}"></donut-chart>
<donut-chart :dato="{id: 'homero', valor: 50, valor2 :50}"></donut-chart>
I'm doing something wrong?

Answer 1

Well. I've managed to see what's going on and it looks so stupid. In donutChart.vue there´s an style that only applies to #chartdiv element, I didn't post in the question because I didn't figure that code until now. Now I'm applying the same style for every component and now the charts are renderized