Unexpected error when attempting to update chart data in Chart.js, in a Vue app

Question

I am using Chart.js 3.5 and Vue 3. I was successfully able to draw a chart, and I am trying to trigger a data change, inside a Vue method. Unfortunately, I encounter the following issue: "Uncaught TypeError: Cannot set property 'fullSize' of undefined".

Edit2: Added a missed }. Code should now be runnable

MyChart.vue:

<template>
    <canvas id="chartEl" width="400" height="400" ref="chartEl"></canvas>
    <button @click="addData">Update Chart</button>
</template>

<script>
import Chart from 'chart.js/auto';

export default {
    name: "Raw",
    data() {
        return {
            chart: null
            
        }
    },
    methods: {
        createChart() {             

            this.chart= new Chart(this.$refs["chartEl"], {
                type: 'doughnut',
                data: {
                    labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
                    datasets: [
                        {
                        backgroundColor: [
                        '#41B883',
                        '#E46651',
                        '#00D8FF',
                        '#DD1B16'
                        ],
                        data: [100, 20, 80, 20]
                        }
                    ]
                },

                options: {
                    plugins: {}
                }
            })
        },


        addData() {
            const data = this.chart.data;
            if (data.datasets.length > 0) {
                data.labels.push('data #' + (data.labels.length + 1));

                for (var index = 0; index < data.datasets.length; ++index) {
                data.datasets[index].data.push(123);
                }
// Edit2: added missed }
            this.chart.update(); } // this line seems to cause the error}

        }
    },

    mounted () {

    this.createChart()
},

}
</script>

Edit1: Adding the following to the options makes the chart update successfully, but the error is still present and the animation does not work. The chart flickers and displays the final (updated) state. Other animations, such as hiding/showing arcs do not seem to be afected

options: {
        
    responsive: true,

}

Edit3: Adding "maintainAspectRatio:false" option seems to again stop chart from updating (the above mentioned error is still present)

By walking through the debugger, the following function from 'chart.esm.js' seems to be called successfully a few times, and then error out on last call:

  beforeUpdate(chart, _args, options) {
    const title = map.get(chart);  // this returns null, which will cause the next call to error with the above mentioned exception.
    layouts.configure(chart, title, options);
    title.options = options;
  },

//////////////////////
  configure(chart, item, options) {
    item.fullSize = options.fullSize;
    item.position = options.position;
    item.weight = options.weight;
  },

Answer 1

This may be a stale post but I just spent several hours wrestling with what seems like the same problem. Perhaps this will help you and/or future people with this issue:

Before assigning the Chart object as an attribute of your Vue component, call Object.seal(...) on it.

Eg:

const chartObj = new Chart(...);
Object.seal(chartObj);
this.chart = chartObj;

This is what worked for me. Vue aggressively mutates attributes of objects under its purview to add reactivity, and as near as I can tell, this prevents the internals of Chart from recognising those objects to retrieve their configurations from its internal mapping when needed. Object.seal prevents this by barring the object from having any new attributes added to it. I'm counting on Chart having added all the attributes it needs at init time - if I notice any weird behaviour from this I'll update this post.