load google recaptcha inside a modal

[hai-shift]

i have a modal with a form
and i want to load google recaptcha

<script src="https://www.google.com/recaptcha/api.js"> when i try to put in the modal like this: @once @Push('js') <script src="https://www.google.com/recaptcha/api.js?render={{ config('services.recaptcha.CAPTCHA_SITE_KEY') }}" async defer></script>

@endpush
@EndOnce

isnt work
how i can fix that?

i didnt want to load in my layout app becuse the seo get bad performance

[hai-shift]

i try to do that
but is isnt work :/
what i can do? to protected my from in wire modal??
@PhiloNL

  <div x-data="recaptchaComponent()" x-init="initRecaptcha()">
    
</div>

<script>
    function recaptchaComponent() {
        return {
            recaptchaLoaded: false,
            initRecaptcha() {
                this.loadRecaptcha();
            },
            loadRecaptcha() {
              console.log('gg');
                if (!document.getElementById('recaptcha-script')) {
                    let script = document.createElement('script');
                    script.id = 'recaptcha-script';
                    script.src = 'https://www.google.com/recaptcha/api.js?render={{ config('services.recaptcha.CAPTCHA_SITE_KEY') }}';
                    script.async = true;
                    script.defer = true;
                    
                    script.onload = () => {
                        this.recaptchaLoaded = true;
                        console.log('reCAPTCHA loaded');
                    };

                    document.head.appendChild(script);
                } else {
                    this.recaptchaLoaded = true;
                }
            },
            executeRecaptcha() {
                if (this.recaptchaLoaded) {
                    grecaptcha.execute();
                } else {
                    console.error('reCAPTCHA is not loaded yet');
                }
            }
        }
    }
</script>