Hmm, I’m seeing some unexpected behavior when I switched from the non-recursive to this suggested recursive integration. It seems to be breaking reactivity within a LiveComponent when nesting AlpineJS components.
To illustrate, the following with the recursive integration works as expected and both the button and span’s text accurately reflect the boolean state of editMode in the parent x-data as it is toggled/updated by clicking the button.
<div x-data="{editMode: false}">
<button x-on:click="editMode = !editMode" x-text="editMode ? 'Editing' : 'Edit'"></button>
<span x-text="editMode"></span>
</div>
But by introducing an x-data declaration to the span, the span suddenly loses reactivity and the span text remains unchanged at false even when the parent state successfully updates as evidenced by the continued reactivity of the button text.
<div x-data="{editMode: false}">
<button x-on:click="editMode = !editMode" x-text="editMode ? 'Editing' : 'Edit'"></button>
<span x-data="{}" x-text="editMode"></span>
</div>
And if I switch back to the non-recursive integration, the span regains reactivity and the span text begins reacting again to the parent state. Still investigating, but any ideas what’s going on?
