external script doesn't always loads when we navigate between components nuxt 3

external script doesn't always loads when we navigate between components nuxt 3 , i have created component dashboard/index.vue added this code

useHead({
    script: [
        {
            src: 'https://code.highcharts.com/highcharts.js',
            type: 'text/javascript',
            async: true,
            body: true
        },
    ],
});

this it the function i am using in onMounted

const initializeCharts = () => {
    window.Highcharts.chart('highchart-1', {
        chart: {
            type: 'spline',
            height: 310
        },
        title: {
            text: 'Monthly Average Temperature'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            accessibility: {
                description: 'Months of the year'
            }
        },
        yAxis: {
            title: {
                text: 'Temperature'
            },
            labels: {
                format: '{value}°'
            }
        },
        tooltip: {
            crosshairs: true,
            shared: true
        },
        plotOptions: {
            spline: {
                marker: {
                    radius: 4,
                    lineColor: '#666666',
                    lineWidth: 1
                }
            }
        },
        series: [{
            name: 'Tokyo',
            marker: {
                symbol: 'square'
            },
            data: [5.2, 5.7, 8.7, 13.9, 18.2, 21.4, 25.0, {
                y: 26.4,
                marker: {
                    symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
                },
                accessibility: {
                    description: 'Sunny symbol, this is the warmest point in the chart.'
                }
            }, 22.8, 17.5, 12.1, 7.6]

        }, {
            name: 'Bergen',
            marker: {
                symbol: 'diamond'
            },
            data: [{
                y: 1.5,
                marker: {
                    symbol: 'url(https://www.highcharts.com/samples/graphics/snow.png)'
                },
                accessibility: {
                    description: 'Snowy symbol, this is the coldest point in the chart.'
                }
            }, 1.6, 3.3, 5.9, 10.5, 13.5, 14.5, 14.4, 11.5, 8.7, 4.7, 2.6]
        }]
    });

when we navigate from one page to dashboard page it doesn't loads , when we reload the dashboard page then it works fine as expected

i have tried adding onMounted, onBeforeUpdate and many other lifecycle hooks but at the end i see the same error, i am using nuxt3 here is the stackblitz code

https://stackblitz.com/edit/github-kqvufh

The error happens because your using the initializeCharts in the page onMounted hook which may happen before fetching the script from the CDN. This leads to initializeCharts not finding the window.Highcharts provided by the script.

The solution is ensure running the function only after the script is fetched. This can be done by calling initializeCharts inside the onload hook in useHead like the following

useHead({
  script: [
    {
    src: 'https://code.highcharts.com/highcharts.js',
    onload: () => { initializeCharts() },
    }
  ]
});

onMounted(() => {
  // This is no longer needed and can be removed
  // initializeCharts(); 
});

Check this Stackblitz Link with the applied changes, you'll find the script tag present in both cases (directly opening the dashboard page or naviagting to it from the index page using the link)