Vue chart.js条形图有时仅显示x轴和y轴，缺少条形和标签

Question

我试图找出为什么有时该组件无法正常运行的原因，但是我仍然找不到原因，控制台没有信息（没有错误，没有警告..），我将以下脚本用于条形图组件：

    // Chart.js
    import { Bar } from 'vue-chartjs'

    export default {
        extends: Bar,
        props: ['data', 'labels'],
        mounted() {
            // Overwriting base render method with actual data.
            this.renderBarChart();
        },
        computed: {
            chartData: function () {
                return this.data;
            }
        },
        methods: {
            renderBarChart() {
                var cdata = {
                    labels: this.labels,
                    datasets: [
                        {
                            label: '',
                            backgroundColor: globalSetting.backgroundColors, //global.js loading before 
                            borderColor: globalSetting.borderColor,
                            borderWidth: 1,
                            data: this.chartData
                        }
                    ]
                }
                let options = {
                     legend: {
                        display: false
                    },
                    scales: {
                        xAxes: [{
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'Levels'
                            }
                        }],
                        yAxes: [{
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'Numbers'
                            }
                        }]
                    }
                }
                this.renderChart(cdata, options);
            }
        },
        watch: {
            data: function () {
                this.renderBarChart();
            },
            deep: true
        }
    }

在我的html中，

<div v-if="!loading">
<p>{{c.chartData}} {{labels}}</p>
 <bar :data="c.chartData" :labels="labels"></bar>
</div>

有时，该图表在绘制时没有条形和标签信息（如下图所示），但<p>{{c.chartData}}{{labels}}</p>有值。刷新页面后，一切正确。任何想法？谢谢