I am completely re-editing this, as it has grown in complexity. Let me explain it with a simpler reproducible scenario: https://codepen.io/ozeru/pen/oNEQYpd
<div x-data="{hasValue: false, categories: [{label: 'hey', id: 'first'}, {label: 'yow', id: 'second'}], htmlTest:'<input type=\'checkbox\'>'}">
<template x-for="(category, index) in categories">
<div>
<div x-html="htmlTest">
</div>
<label class="c-system-tile" x-bind:for="category.id">
<span class="hello" x-text="category.label"></span>
</label>
</div>
</template>
In the code, if you check the checkbox, and then click on test, you will see that the checkbox will loose its state.
The reason for that is, clicking on test means that the hasValue property gets updated. This update, triggers a COMPLETE re-evaluation of the all the bindings we have. So anything put in the x-html just plainly gets re-added causing all kinds of other troubles for us (in this case, a simple checkbox state, but can be different things.)
My question is, is this normal? Is this how alpinejs works? Or are there ways to circumvent this? Seems like its a bug or something, to update all bindings because some random property gets updated?
Edit: I am accepting the answer of this question, as the comments contain the solution. Its a V2 problem, need to update to V3.
You should add an unique key attribute to the for-loop, so Alpine.js can track its items:
<template x-for="category in categories" x-bind:key="\`systemCategory-\${category.id}\`">
Furthermore instead of x-on:click="selectCategory(category.key)" on the labels, you can use x-model on the radio buttons and use a $watch to respond to category changing.