Cannot read properties of undefined (reading 'value')

[Shadecute]

I'm using this code for OTP input Field

    <div class="py-6 px-6 w-80 border mx-auto text-center my-6">
            <form action="#" x-data="otpForm()" method="POST">
                <div class="flex justify-between">
                  <template x-for="(input, index) in length" :key="index">
                    <input
                        type="tel"
                        maxlength="1"
                        class="border border-gray-500 w-10 h-10 text-center"
                        :x-ref="index"
                        x-on:input="handleInput($event)"
                        x-on:paste="handlePaste($event)"
                        x-on:keydown.backspace="$event.target.value || handleBackspace($event.target.getAttribute('x-ref'))"
                    />
                  </template>
                </div>
                <input type="hidden" name="otp" x-model="value">
                <button type="submit" class="btn-primary mx-auto block bg-gray-500 w-full p-2 mt-2 text-white">
                    Verify OTP!
                </button>
            </form>
        </div>
        <script>
            function otpForm() {
                return {
                    length: 6,
                    value: "",

                    handleInput(e) {
                        const input = e.target;

                        this.value = Array.from(Array(this.length), (element, i) => {
                        return this.$refs[i].value || "";
                        }).join("");

                        if (input.nextElementSibling && input.value) {
                            input.nextElementSibling.focus();
                            input.nextElementSibling.select();
                        }
                    },

                    handlePaste(e) {
                        const paste = e.clipboardData.getData('text');
                        this.value = paste;

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

                        inputs.forEach((element, i) => {
                            this.$refs[i].value = paste[i] || '';
                        });
                    },

                    handleBackspace(e) {
                        const previous = parseInt(e, 10) - 1;
                        this.$refs[previous] && this.$refs[previous].focus();
                    },
              };
            }
        </script>

It works well in [email protected] but after upgrade to v3 show me this error
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'value')

please guide me

[SimoTod]

In v3, you can't dynamically bind x-ref (:x-ref="index" doesn't work), see https://alpinejs.dev/upgrade-guide#x-ref-no-more-dynamic