我正在从alpinejs v2.8.2升级到v3.2.1，一个组件无法再工作了。我正在将laravel v8.4与livewire v2.4结合使用
我曾经做过以下工作，效果很好，

<div class="w-full">
        <input x-data="{ value: '' }"
               x-ref="input"
                x-init="iti = window.intlTelInput($refs.input, {
                  dropdownContainer: document.body,
                  preferredCountries: ['us', 'gb'],
                  separateDialCode: true,
                    nationalMode: false,
                    autoHideDialCode: false,
                    placeholderNumberType: 'MOBILE',
                    utilsScript: '/js/utils.js',
                    initialCountry: 'auto'
                })"
               x-on:change="value = $event.target.value;"
               wire:change="updatePhone($event.target.value)"
            {{ $disabled ? 'disabled' : '' }}
            {{ $attributes->merge(['class' => 'px-3 py-'.($attributes['vertical-padding'] ?? 5).' border block w-full rounded-md shadow-sm  focus:ring focus:ring-secondary focus:ring-opacity-50']) }}>
        <x-form-errors name="{{$attributes['name']}}"/>
        <x-form-errors name="phone_number"/>
        <x-form-errors name="phone"/>
    </div>

但是对于alpinejs v3，intltelinput是未定义的，所以我用settimeout来包围它，然后它工作了，所以我最终得到了以下代码，

<div class="w-full">
        <input x-data="{ value: '', loaded: false, init(){
        setTimeout(function(){
                if(!self.loaded){
                const iti = window.intlTelInput($refs.input, {
                  dropdownContainer: document.body,
                  preferredCountries: ['us', 'gb'],
                  separateDialCode: true,
                    nationalMode: false,
                    autoHideDialCode: false,
                    placeholderNumberType: 'MOBILE',
                    utilsScript: '/js/utils.js',
                    initialCountry: 'auto'
                     });
                } self.loaded=true; }, 100)
                }}"
               x-ref="input"
               x-on:change="value = $event.target.value; self.loaded = false"
               wire:change="updatePhone($event.target.value)"
            {{ $disabled ? 'disabled' : '' }}
            {{ $attributes->merge(['class' => 'px-3 py-'.($attributes['vertical-padding'] ?? 5).' border block w-full rounded-md shadow-sm  focus:ring focus:ring-secondary focus:ring-opacity-50']) }}
        >
        <x-form-errors name="{{$attributes['name']}}"/>
        <x-form-errors name="phone_number"/>
        <x-form-errors name="phone"/>
     </div>

在你输入一个无效的电话号码之前，这一切都很正常。当您输入一个无效的电话号码时，它不会正确地将js加载到数据标记中。它将其加载到html中，但从未执行javascript，因此成为一种正常的输入形式。
我试着用一根绳子把它围起来 wire:ignore 但这会妨碍我尝试使用js库正确格式化输入，我还尝试从 on:change 但这也没用。
这就是它应该看起来的样子
输入电话号码时的外观
提交无效号码时看到的内容
如果有人能提出有效的解决方案，我将不胜感激。