alasql and alpine.js: reactivity from updates outside of Alpine - alpine.js

Question

I would like to use Alpine.js while keeping as much application state inside of alasql.js as possible. The problem is that data which is loaded after Alpine.start() does not show up in the x-for section. If there is a way to force a wasteful full-refresh (without running Alpine.start() again) I would be interested to know. I tried the customEvents workaround several times but that did not work.
Is there any other way to make something like this work? Without changing too much of the architecture..? I'm curious / stubborn
await fetch(`${API_domain}?playlist=` + playlist)
.then(response => response.json())
.then(data => {
alasql('ATTACH localStorage DATABASE RuntimeDB')
alasql('SET AUTOCOMMIT ON')
alasql(`DELETE from videos where webpage_url = "${data.webpage_url}"`)
alasql(`INSERT INTO videos SELECT * FROM ?`, [[data]])
app.updateView()
})
<div x-data="{
playlistToAdd: '',
async submit($event) {
await app.fetchPlaylist(this.playlistToAdd)
}
}">
<label for="add_new">Add New Playlist or Channel:</label>
<input type="text" name="add_new" id="add_new" x-model="playlistToAdd"
placeholder="https://www.youtube.com/playlist?list=PL8A83124F1D79BD4F" #keyup.enter="submit" />
<button type="button" #click="submit">Submit</button>
</div>
<div x-data>
<template x-for="(pl, index) in app.view.table" :key="index">
<div>
<details x-html="`<summary><a href='${pl.webpage_url}'>${pl.title}</a> by
<a href='${pl.channel_url}'>${pl.uploader}</a> (watched ${pl.playlist_count-pl.entries.length} of ${pl.playlist_count}; ${(pl.playlist_count-pl.entries.length)/pl.playlist_count*100.0}%)</summary>
<template x-for='(v, index) in pl.entries' :key='index'>
<div><span x-text='v.title'></span></div>
</template>
`"></details>
</div>
</template>
</div>
full code here: https://github.com/chapmanjacobd/lb-lite/tree/main/client

Answer 1

As you noticed app.view.table is not reactive. For this purpose you can use the Alpine.store() which is externally accessible and reactive as well:
Alpine.store('table', [])
updateView: function () {
Alpine.store('table', alasql('select * from videos'))
}
And in the template just use $store.table:
<template x-for="(pl, index) in $store.table" :key="index">