Updating Alpine's DOM without user-interaction

[tiptronic]

Hey there,
maybe I'm misunderstanding something, but here's what I can't figure out:
I have some external data, e.g 'itemList':

const itemList = ['one', 'two']
function adata() {
   return items: itemList 
}

and that's in the page:

 <div class="alpine" x-data="adata()">
<template x-for="item in items" :key="item">
        <div x-text="item"></div>
    </template>
</div>

Now, if I update itemList I'd expect the DOM gets updated... but it doesn't...

If I create a second node and initalize Vue with it (sticking the itemList variable into the Vue-instances' data portion), Vue's part gets updated, but Alpine's doesn't.

If I put some link inside the '.alpine' node - which then inserts a new item - both (Vue and Alpine) are properly updated.

So my question is: How can I update the DOM without user-input? (e.g. by regularily fetching data)

Or does Alpine only provide reactivity in response to user-interaction?

Any hint?

[SimoTod]

Only changes triggered by the component are reactive. If you need external changes, you need to use events to notify the component that something has changed. The component will listen for that event on the window object and you can update a timestamp variable which will trigger the reactivity.

[tiptronic]

Ah - thx for the info!

How would I do that? Which events does the component listen to?

[SimoTod]

Any custom event. You need to dispatch the event in your external function using vanilla javascript and listen to the event on the component using Alpine. You need to make sure that you use the same name and that you tell the listener to use window or document.
https://codepen.io/SimoTod/pen/pogRZdR
You can use more examples in old threads.
You can also read an article on Hugo's blog: https://codewithhugo.com/alpinejs-component-communication-event-bus/

[tiptronic]

OK - understood... and thanks for the pen! For my current use-case I am going to stick with Vue, but it's good to have options 😊