I want to run a javascript method called makeFinalAdjustments(), but it needs to happen after the page has finished re-rendering the content following a click event inside this livewire component:

//CHILD LIVEWIRE COMPONENT

//Child.blade.php
<div>
     <div wire:click="updateContent($id)">Click here</div>
     <div>{{ $content }}</div>
     ....
</div>

//Child.php
public $content;
public $id;
public function updateContent()
{
    $this->dispatch('updateContent');
}


//PARENT LIVEWIRE COMPONENT

//Parent.php
protected $listeners = [
    'updateContent' => 'handleUpdateContent',
];

public function handleUpdateContent($child_id): void
{
    $this->content[$child_id] = $this->getSomeContent($child_id);
}

//parent.blade.php
<div>
    @foreach(child in list)
        <livewire:child :content=content[child->id]>
    @endforeach
    ...
</div>

I’ve tried adding an eventlistener based on the documentation here….

document.addEventListener('livewire:init', function () {
        Livewire.on('updateContent', () => {
            Livewire.hook('commit', ({ component, commit, respond, succeed, fail }) => { 
                succeed(({ snapshot, effect }) => {
                    queueMicrotask(() => {
                        makeFinalAdjustments();
                    })
                })
            })
        });
    });

…but it doesn’t work because makeFinalAdjustments() fires too early, before the new content has finished rendering.