Vue-ChartJS keeps throwing [Vue warn]: Error in mounted hook: "RangeError: Maximum call stack size exceeded" keeps showing

Question

Every time I include a chart in a page I keep getting this in the console: [Vue warn]: Error in mounted hook: "RangeError: Maximum call stack size exceeded".

The chart loads and acts as expected but I keep getting this warning.

I am using vue-chartjs v4.0.7 with chart.js v3.7.1 in Vue 2.6.14.

The usage of the component is basic. I include it in another component like this:

<StatisticsGraph :statisticsGraph="statisticsGraph" style="max-height:490px; width:100%;"/>

And then the component looks like this:

<template>
    <LineChart :chart-data="chartData" :chart-options="chartOptions"/>
</template>
<script>
    import 'chart.js/auto';
    import { Line } from 'vue-chartjs/legacy';

    export default{
        components: {LineChart: Line},
        props: {
            statisticsGraph: Object
        },
        data: function(){
            var labels = [
                        'Monday','Monday-end','Friday','Friday-end'];
             return {
                chartData: {
                    labels: labels,
                    datasets: [
                        {   
                            type: 'line',
                            steppedLine: true,
                            data: this.statisticsGraph.last_week,
                            borderColor: '#d0d7e1',
                            pointRadius: 0,
                            borderWidth: 2,
                            fill: false,
                        },
                        {
                            type:'line',
                            steppedLine: true,
                            data: this.statisticsGraph.this_week,
                            borderColor: '#77c0b4',
                            backgroundColor: '#77c0b4',
                            pointRadius: 0,
                            borderWidth: 2,
                            fill: false,
                        },
                    ]
                },
                chartOptions: {
                    plugins: {
                        legend: {
                            display: false,
                            labels: {
                                boxWidth: 20,
                            }
                        },
                    },
                    scales: {
                        x: {
                            grid: {
                                display: false,
                            },
                            ticks: {
                                padding: 10,
                                fontColor: '#95AAC9',
                                fontSize: 13,
                                autoSkip: false,
                                maxRotation: 0,
                                callback: (value) => {return (labels[value] === 'Monday' ||  labels[value] === 'Friday') ? labels[value] : ' '}
                            },
                        },
                        y: {
                            grid: {
                                drawBorder: false,
                            },
                            ticks: {
                                fontColor: '#95AAC9',
                                fontSize: 13,
                            }
                        }
                    },
                    responsive: true,
                    maintainAspectRatio: false
                }
            }
        }
    }
</script>

Any idea what might cause this?