'Sharing reCaptcha token between alpine and livewire

I am trying to build a reCapture component for a Laravel application using Livewire and Alpine and I can't figure out how to pass the recaptcha token value into the livewire component to complete the validation.

If I understand correctly this is because when I submit the form I am setting a hidden input value (recaptchaToken), however, livewire can not access hidden inputs so I need to use wire:model to bind to the data.

How can I pass the recaptchaToken.value in the submitForm() method, or how do I set the $recaptchaToken value with wire:model

<form x-data="{
        execute(){
            grecaptcha.ready(() => {
                grecaptcha.execute('{{ env('RECAPTCHA_SITE_KEY') }}', { action: 'contact' })
                .then((token) => {
                    {{-- how can i bind to wire:model instead of setting input.value ??? --}}
                    this.$refs.recaptchaToken.value = token;
                })
            })
        }
    }"
    x-on:submit.prevent="execute" class="flex-col gg"
    
    {{-- how can I access the recaptchaToken.value to pass into the submitForm() method ??? --}}
    wire:submit.prevent="submitForm()">
    
    <input wire:model="recaptchaToken" type="hidden" name="recaptchaToken" x-ref="recaptchaToken">
    
    <button type="submit" class="w-fc btn primary">SUBMIT</button>
    
</form>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source