@entangle not working with x-for elements

[ariaieboy]

hello everyone i have a problem with alpine and livewire @entangle let me show the code and explain what's wrong in code :

here is my blade :

<div>
    <form wire:submit.prevent="submit" x-data="
        {
                        length: 6,
                        value: $wire.entangle('code'),
                        handleInput(e) {
                            const input = e.target;
                            this.value = Array.from(Array(this.length), (element, i) => {
                                return document.getElementById(i).value || '';
                            }).join('');
                            if (input.nextElementSibling && input.value) {
                                input.nextElementSibling.focus();
                                input.nextElementSibling.select();
                            } else if(this.value.length === this.length) {
                                $wire.submit();
                            }
                        },
                        handlePaste(e) {
                            const paste = e.clipboardData.getData('text');
                            this.value = paste;

                            const inputs = Array.from(Array(this.length));

                            inputs.forEach((element, i) => {
                                document.getElementById(i).value = paste[i] || '';
                            });
                        },
                        handleBackspace(e) {
                            const previous = parseInt(e, 10) - 1;
                            document.getElementById(previous) && document.getElementById(previous).focus();
                        }
                    }
">
        <label for="code" class="text-gray-700 dark:text-gray-100 block">
            کد فعال سازی :
        </label>
        <div class="flex flex-row-reverse">
            <template x-for="(value,key) in length" :key="key">
                <input
                    type="tel"
                    maxlength="1"
                    :id="key"
                    x-on:input="handleInput($event)"
                    x-on:paste="handlePaste($event)"
                    x-on:keydown.backspace="$event.target.value || handleBackspace($event.target.getAttribute('id'))"
                />
            </template>
        </div>
        <button type="submit">
            <span class="inline-block">تایید کد</span>
        </button>
    </form>
</div>

i am using the code above for 1 digit input form for otp code validation.
its sth like this :

when user insert the first digit according to the code livewire must send a request to the server with new value that set in the handleInput method but livewire won't send any request to the server .

if i add 6 input instead of using x-for with the same event listeners and functions livewire will send data to the server with no problem.

[ariaieboy]

i forgot to remember that the same code works with alpine v2 like a charm but in alpine v3 its not working

[ariaieboy]

i changed the property named value to code and everything start working normally :|