مشکل ویرایش فیلد در alpinejs و livewire

سلام دوستان
من یه کدی دارم که با استفاده از livewire و alpinejs نوشته شده و یه سری پارامتر رو از طریق entangle از لایو وایر میگیرم و توسط آلپاین اونهارو میخوام ویرایش کنم و ذخیره کنم.
کد هارو میذارم که شما هم ببینید بعد میگم مشکل کجاست

<div x-data="handler()" >
    <a href="javascript:void(0)" @click="addNewSlide()"  class="btn btn-success mb-2">افزودن تصویر جدید</a>

    <template x-for="(slide, index) in slides" :key="index">
        <div class="row" style="margin-bottom: 10px;" id="image_item"  >
            <div class="col-lg-6">
                <div class="input-group">
                <span class="input-group-prepend">
                    <a href="javascript:void(0)" @click="removeSlide(index)" class="btn btn-danger btn-icons"><i class="fa fa-times"></i> </a>
                </span>
                    <div class="input-group-prepend">
                        <span class="input-group-text">آدرس تصویر </span>
                    </div>
                    <input name="slider" x-model="slide.path" class="form-control" id="image_value" autocomplete="off">
                    <div class="input-group-append">
                        <a href="javascript:void(0)"  id="image_button" class="btn btn-info btn-icons">انتخاب </a>
                    </div>
                </div>
            </div>
            <div class="col-lg-5">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">آدرس صفحه </span>
                    </div>
                    <input x-model="slide.url" class="form-control" autocomplete="off">
                </div>
            </div>
            <hr>
        </div>
    </template>
</div>

<script>

    function handler() {

        return {
            slides : @entangle('options.slider.slides').defer,
            addNewSlide() {
                console.log(this.slides);
                this.slides.push({
                    path: '',
                    url: ''
                });

                console.log(this.slides);
            },
            removeSlide(index) {
                this.slides.splice(index, 1);
            },
        }
    }

</script>

خب همونطور که میبینید من با استفاده از entangle لایووایر میام و پارامترهارو میگیرم و توسط آلپاین با استفاده از x-for نمایش میدم و مشکلی هم نداره و اوکیه. ولی زمانی که میام مقادیر فیلدهارو تغییر میدم و ذخیره میخوام بکنم مقادیر جدید ذخیره نمیشه ولی اگه بیام و دکمه افزودن تصویر جدید رو بزنم و متد addNewSlide رو از handler صدا بزنم که طبیعتا فیلد جدید اضافه میشه اونموقع همه فیلدهای قبلی و جدید قابل تغییر و اضافه شدن هستن و مقادیر ذخیره میشه ولی وقتی زمانی که بخوام صفحه رو مجددا بارگذاری کنم و بدون اینکه کار خاصی بکنم اگه بیام مقادیر رو ذخیره کنم مقادیر جدید ذخیره نمیشه. انگار اول کار هیچ متغیری به نام this.slides وجود نداره ولی وقتی یکی از دکمه های افزودن یا حذف یکی از ردیف هارو که میزنم یادش میوفته که قراره کار کنه.
ممنون میشم از دوستان اگه تجربه ای در این زمینه داره کمک کنه
از آقای موسوی هم ممنون میشم اگه میتونن کمکی بکنن.
@hesammousavi