Understanding AlpineJS x-init and x-for

I have something that i've been working on which I got working but I'm not really sure why, hoping you can help understand.

The idea was to essentially have a console box which I update with logs that I receive through laravel echo.

         <div x-data="appState" class="w-10/12 m-auto" x-init="getLogs()" x-show="consoleShow">
            <div
                class="coding inverse-toggle h-60 overflow-y-scroll px-5 pt-4 shadow-lg text-gray-100 text-xs font-mono subpixel-antialiased 
              bg-gray-800  pb-6 pt-4 rounded-lg leading-normal overflow-hidden" id="consoleBox">
                <div class="top mb-2 flex flow-root static">
                    <div class="h-4 w-4 bg-red-500 rounded-full float-right cursor-pointer" x-on:click="consoleShow = false"></div>
                </div>
                <div class="mt-4 flex">
                    {{-- <span class="text-green-400">computer:~$</span> --}}
                    <p class="flex-1 typing items-center pl-2">
                        <template x-for="(log, index) in logs" :key="index">
                            <li class="list-none" x-text="log"></li>
                        </template>
                        <br>
                    </p>
                </div>
            </div>
        </div>

Then I within my appState in <script> tags

getLogs() {
                Echo.channel('logs').listen('.logs', (log) => {
                    // do what you need to do based on the event name and data
                    console.log(log);
                    this.logs.push(log.message.function+': '+log.message.task+' - '+log.message.status);
                
                    window.dispatchEvent(new CustomEvent("scrollDown"));



                });

            }

It took my quite a while to get working, essentially i had issues with the x-for updating with new additions to the logs var. However i managed to resolve it by adding getLogs() to the x-init of my container div.

My understanding was that the x-init was only there to execute when the element is rendered. I don't really understand why having the function in x-init would allow the x-for to update correctly. Could anyone provide some insights to help wrap my head around this?

Adding in a cutback example of the code:

const appState = {
events: [],


async loadEvent(event) {
                fetch("/admin/scrapeEvent", {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json",
                            'X-CSRF-TOKEN': document.head.querySelector('meta[name=csrf-token]').content,
                            Accept: "application/json",
                        },
                        body: JSON.stringify(event)
                    })
                    .then(() => {
      
                    })
                    .catch(() => {
 
                    })
                    .finally(() => {
                        
                        this.retrieveLoadedEventsTable();  
                        
                    });
            },
 async retrieveLoadedEventsTable() {


                try {
                    let response = await fetch('/admin/findNewEvents/loaded');
                    let data = await response.json();

                    for (let item of data) item.disabled = true;
                    this.events = data;
                } catch (itsTheErrorObject) {
                    console.log("something went wrong");
                }

                

            }

}


<div x-data="appState" x-init="retrieveLoadedEventsTable()">
<template x-for="event, index in events" :key="event.id">
/** HTML that renders event.atrributes - Works fine on first load **/

</template>
</div>


<div x-data="appState" x-init="retrieveIncompleteEventsTable()">
 <x-button class="ml-3" x-bind:disabled="event.disabled" x-on:click="loadEvent(unloadedEvents[index])">
Load Event
</x-button>

/** This works fine to load my event into the sql table, i can confirm that it runs through and executes the finally in loadEvent, but the events in the template contained in the div with x-init with retrieveLoadedEventsTable does not update **/

</div>

> My understanding was that the x-init was only there to execute when the element is rendered.

No, x-init directive is called at initialization phase of an element. At that point Alpine.js has already created the data variables from x-data but it has not rendered anything (has not modified the DOM) yet. The x-init is the recommended place to put a function that e.g. calls an API then appends some variables defined in x-data or to create an event listener that (later) mutates the data like in your example.

After executing the functions from x-init, Alpine.js renders the component with the actual logs variable. When the event listener in your getLogs() function catches a new event and appends the logs variable, Alpine.js detects it and re-renders the respective parts of the DOM.