我试图在我的Vue 3/InertiaJS/Laravel应用程序中实现一个令牌化的支付表单，并且无法加载外部脚本，以便在<script setup>中定义一个值并将其附加到DOM元素。根据文件，我正在做这个

<script setup> 
        const tokenizerScript = document.createElement("script");
        tokenizerScript.setAttribute(
            "src",
            "https://app.2apgateway.com/tokenizer/tokenizer.js"
        );
        tokenizerScript.setAttribute(
            'language',
            'javascript'
        )
        document.head.appendChild(tokenizerScript);

        const tokenizer = new Tokenizer({
            url: apiUrl, 
            apikey: publicApiKey,
            container: '#container', 
            // Callback after submission request has been made
            submission: (resp) => { // Figure out what response you got back
                switch(resp.status) {
                    case 'success':
                        // Successful submission
                        console.log(resp.token)
                        Inertia.post(`/users/${props.user.id}/dues/submit-online-payment`, {
                            token: resp.token
                        })
                        break;
                    case 'error':
                        // Encountered an error while performing submission
                        console.log(resp.msg)
                        break;
                    case 'validation':
                        // Encountered form validation specific errors
                        console.log(resp.invalid)
                        break;
                }
            }
        })
</script>

<template>
    <div id="container" />
</template>

不管我怎么做，无论是用这种方式，还是使用<link rel="prefetch">，或者试图在onMounted或onBeforeMount钩子中加载它，我都会得到一个错误，Tokenizer is not defined.通常如果我使用浏览器返回按钮返回到前一页并返回，它会工作，但并不总是如此
如何加载此脚本，以便在<script setup>中调用它时完全可用？