Why editing data in trix-editor of livewire page rendor method is called again?

Question

Reading this https://devdojo.com/tnylea/laravel-livewire-trix-editor-component article I added trix-editor on laravel 10 / livewire 3 app / kubuntu 22.04 / Google Chrome Version 123 / trix 1.3.1 . I dispatch event when I need to update state of parent editor component. It works, but problem is that changing state with dispatch render method(I retrieve data from db in it) is called again and I lose all changes in the editor.

I have a trix editor component app/Livewire/TrixEditor.php :

namespace App\Livewire;

use Illuminate\Support\Facades\Storage;
use Livewire\Component;
use Livewire\WithFileUploads;

class TrixEditor extends Component
{
    const EVENT_VALUE_UPDATED = 'trix_value_updated';
    const IMAGES_PATH = 'public/photos';
    public $value;
    public $imagesPath;
    public $trixId;

    public function mount($value = '', $imagesPath = ''){
        $this->value = $value;
        }
        $this->imagesPath = $imagesPath;
        $this->trixId = 'trix-' . uniqid();
    }

    public function updatedValue($value){
        $this->value = $value;
        $this->dispatch(self::EVENT_VALUE_UPDATED, $this->value);  // DISPATCH DATA TO PARENT COMPONENT
    }


    public function render()
    {
        return view('livewire.trix-editor');
    }
}

in resources/views/livewire/trix-editor.blade.php :

<div wire:ignore>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/trix/1.3.1/trix.min.css"/>

    <input id="{{ $trixId }}" type="hidden" name="trix_content" value="{{ $value }}">
    <trix-editor
        wire:ignore input="{{ $trixId }}"
    ></trix-editor>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/trix/1.3.1/trix.min.js"></script>
</div>


<script>

    addEventListener('runInitTrixEditor', event => {
        console.log('runInitTrixEditor event.detail::')
        console.log(event.detail)
        initTrixEditor();
        event.stopPropagation();
        return false;
    })

    function initTrixEditor() {
        // alert( 'initTrixEditor::' )
        console.log('trixEditor FROM initTrixEditor::')
        var trixEditor = document.getElementById("{{ $trixId }}")
        var mimeTypes = ["image/png", "image/jpeg", "image/jpg"];

        addEventListener("trix-blur", function (event) {
            console.log('trix-blur  trixEditor.getAttribute(value)::')
            console.log(trixEditor.getAttribute('value'))

            @this.set('value', trixEditor.getAttribute('value')); // I SET VALUE OF app/Livewire/TrixEditor.php component
        })

    } // function initTrixEditor() {


</script>

and in parent component editor app/Livewire/Admin/NewsCategoryEditor.php I try to use $pageInited var to fetch data only once :

namespace App\Livewire\Admin;

use App\Enums\AppColorEnum;
use App\Enums\DispatchAlertTypeEnum;
use App\Enums\NewsCategory\NewsCategoryActiveEnum;
use App\Library\GetImageProps;
use App\Models\NewsCategory;
use Livewire\Component;
use App\Livewire\Forms\NewsCategoryForm;
use App\Livewire\TrixEditor;

class NewsCategoryEditor extends Component
{
    public NewsCategoryForm $form;
    public string $id = '';
    public array $activeSelectionItems = [];
    public array $appColorSelectionItems = [];
    public string $updateMode = 'edit';
    public bool $pageInited = false;

    protected $listeners = [TrixEditor::EVENT_VALUE_UPDATED  => 'trixValueUpdated' ];

    public function mount(string $id)
    {
        $this->id = $id;
        $this->activeSelectionItems = NewsCategoryActiveEnum::getActiveSelectionItems();
        $this->appColorSelectionItems = AppColorEnum::getAppColorSelectionItems();
    }

    public function render()
    {
        \Log::info(varDump($this->id, ' -1 NewsCategoryEditor $this->id::'));
        \Log::info(varDump($this->pageInited, ' -199 NewsCategoryEditor $this->pageInited::'));
//        if(!$this->pageInited) return; // THAT DOES NOT WORK - IT RAISE ERROR
        if(!$this->pageInited) {
            $newsCategory = NewsCategory
                ::getById($this->id)
                ->withCount('news')
                ->first();
            $this->form->setNewsCategory($newsCategory);
            $this->form->id = $this->id;
            $this->form->created_at = \App\Library\Facades\DateConv::getFormattedDateTime($this->form->created_at);
            $this->form->updated_at = ! empty($this->form->updated_at) ? \App\Library\Facades\DateConv::getFormattedDateTime($this->form->updated_at) : '';

            $this->dispatch('runInitTrixEditor', ['description'=> $this->form->description]); // I CALL JS METHOD TO FIIL IT WITH DATA FROM DB

            $this->dispatch('adminPageChanged', [
                    'item' => 'NewsCategory',
                    'item_id' => $this->form->id,
                    'browser_title' => 'News category editing',
                    'template_container_id' => "news_category_admin_page_container"
                ]
            );
        }
        $this->pageInited = true;

        return view('livewire.admin.news-category-editor')->layout('components.layouts.admin');
    }

    public function trixValueUpdated($value){ // THIS METHOD IS USED TO GET DATA FROM TRIX EDITOR
        $this->form->setDescription($value);
    }

}

When in opened editor I edit data in trix component it works ok only once, but next editing of trix component nothing happens and console output inside of

addEventListener("trix-blur", function (event) {
    

mehods show text value I entered first time and I can not catch why so and how that can be fixed ?