AlpineJs Custom Event Example

HTML

<ul 
id="app" 
x-data="{items:[]}" 
@my-event.window="items = $event.detail.items">
  <template x-for="item in items">
    <li x-text="item"></li>
  </template>
</ul>

<script>
  window.onload = () => {
    setTimeout(() => {
    	// Our data
      let data = {
      	items: ['my', 'array', 'of', 'items']
      }
      
      // Dispatch our new event
      window.dispatchEvent(new CustomEvent('my-event', {detail: data}));
	  }, 500);
  }
</script>