Solved it!
Solution summary:
Don’t generate LiveView controlled tags inside x-data scope. Use alpine’s templates to render and pass data to x-data.
Do this:
<div x-data={"{elements: #{render_elements(elements)}}"}>
<#Raw><template x-for="ele in elements"></#Raw>
<span x-text="ele" @click="console.log('click')"/>
<#Raw></template></#Raw>
</div>
Not this:
<div x-data>
{#for ele in elements}
<span @click="console.log('click')">{ele}</span>
{/for}
</div>