vue3 chart.js 圖表顯示問題

想請問我在Vue3 中繪製了chart.js折線圖
在意一次都會顯示出來，但只要網頁刷新就會造成圖表無法顯示(變成空白的)
想請問該如何解決

中間的只是我用來設定不同螢幕大小的寬度顯示最主要不知是否我的這3行有錯
const canvas:any = document.getElementById('HitrateCurvetable');
const ctx:any = canvas.getContext('2d');
new Chart(ctx, this.planetChartData);

    mounted() {
        const canvas:any = document.getElementById('HitrateCurvetable');
        const ctx:any = canvas.getContext('2d');
        if(this.windowWidth>1679){
            canvas.height = 425;
        }
        else if(this.windowWidth<=1679 &&this.windowWidth>1024){
            canvas.height = 425;
        }
        else if(this.windowWidth<=1024 &&this.windowWidth>767){
            canvas.height = 300;
        }
        else if(this.windowWidth<=767){
            canvas.height =250;            
        }
        new Chart(ctx, this.planetChartData);
    },

重新整理前 :

img

重新整理後 :

img