Phone input with intlTelInput + Livewire + Alpine

app.js

import intlTelInput from 'intl-tel-input';
import { fr } from "intl-tel-input/i18n";

window.setupPhoneInput = function (element, options) {
    return intlTelInput(element, {...{
        loadUtils: () => import("intl-tel-input/utils"),
        i18n: fr,
        nationalMode: false
    }, ...options});
}

form.blade.php

<form wire:submit="submit">
  <x-phone wire:model="phone" label="Numéro de téléphone" required />
</form>

phone.blade.php

@props(['type'=>'tel'])

<div x-data="{
    iti: null,
    initIntlTelInput() {
        this.iti = setupPhoneInput(this.$refs.phoneInput, {
            initialCountry: 'fr'
        });

        this.$refs.phoneInput.addEventListener('countrychange', () => {
            this.updateInternationalNumber();
        });

        this.$refs.phoneInput.addEventListener('input', () => {
            this.updateInternationalNumber();
        });
    },
    updateInternationalNumber() {
        $wire.{{ $attributes->whereStartsWith('wire:model')->first() }} = this.iti.getNumber();
    }
}" x-init="initIntlTelInput()">

    <div wire:ignore>
        <x-front.form.input {{ $attributes->whereDoesntStartWith('wire:model')->merge(['type'=>$type]) }} x-ref="phoneInput" />
    </div>

    <input type="hidden" x-ref="phoneOutput" wire:model.live="{{ $attributes->whereStartsWith('wire:model')->first() }}" />
</div>