Tinymce 4 + AlpineJS, x-model value is not updating

I am developing a Invoice/Estimate module using Laravel + AlpineJS. The Estimate/Invoice screen has option to dynamically add rows from existing product db as well as manually. Dynamically added rows has item title, item description, qty, price etc. The rows are sortable as well.

For item description i am using TinyMCE4, which is creating problems now. The template code looks like

<template x-for="(estimate, index) in items" :key="index">
    <section class="estimate-items  " :x-ref="index" @dragstart="dragstart($event)"
        @dragend="$event.target.setAttribute('draggable', false)" @dragover="updateListOrder($event)"
        draggable="false" class=" odd:bg-gray-900 even:bg-gray-800"
        :class="{
            'border-2 border-lime-400': indexBeingDragged == index,
        }">

        <div class="flex relative -mx-1 p-2 border-b border-l border-r  border-dashed dark:border-gray-700  "
            :class="{ 'pointer-events-none': indexBeingDragged }">

            <div class="px-1 w-12 text-right">
                <div class="relative" aria-haspopup="true">

                    <button aria-label="Sorting menu" @mousedown="setParentDraggable(event)"
                        @mouseup="openContextMenu($event)" @click="openContextMenu($event)"
                        @click.away.stop.prevent="closeAllContextMenus()"
                        @keydown.space="openContextMenu($event)" @keyup.stop.prevent
                        @keydown.arrow-down="highlightFirstContextButton($event)"
                        @keydown.tab="closeAllContextMenus()" @dragover.stop.prevent
                        :class="{ 'focus:outline-none': !usedKeyboard }">
                        MOVE
                    </button>

                </div>
            </div>


            <div class="lg:w-3/6 2xl:4/6 px-1">

                <input required type="text" name="item_title[]"
                    class="bg-gray-800 bg-gray-800 w-full mb-3" x-model="estimate.title">

                {{-- <p class="text-gray-800 dark:text-gray-100" x-text="estimate.name"></p> --}}
                <textarea :id="`descrip_id_${index}`" required type="text" name="item_description[]"
                    class="bg-gray-800 bg-gray-800 w-full item_description h-[198px]" x-model="estimate.desc" :key="index"></textarea>
            </div>


            <div class="px-1 w-9 text-right">
                <a href="#" class="text-red-500 hover:text-red-600 text-sm font-semibold"
                    @click.prevent="deleteItem(estimate.id)">remove
                </a>
            </div>
        </div>

    </section>

</template>

**I have tinymce4 initiated on the item_description textarea, but the changes on the editor wont reflect on x-model value. ** so when the drag and sort it shows the old content instead changed content from TinyMCE.

I tried some function here

setup: function(editor) {
    editor.on('Change Keyup blur', function() {
        editor.save();
    });
} 

but nothing seems working

I finally fixed it. As mentioned by @Yinci I had added a event on TinyMCE update and added .lazy with x-model (x-model.lazy="estimate.desc"). Since x-model updates the property on every keystroke, TinyMCE changes wont be picked up by default, for which we need to add .lazy modifier so that the model will update when user focuses away from the input element

https://alpinejs.dev/directives/model#lazy