@calebporzio Sorry for the gravedigging, but this bug is still happening in the current version (alpinejs@3.14.7).

It seems the bug is somehow related to the <button> element. When i move the x-show directive to a div everything works as expected.

This code does not work in alpinejs > 2.4:
Button hides after click, then shows up again even if card.cleared = true

<template x-for="card in cards">
    <div>
        <button                        
            x-show="! card.cleared"
            x-transition
            :style="'background: ' + (card.flipped ? card.color : '#999')" 
            class="w-full h-32"
            @click="flipCard(card)"
            x-text="card.cleared"
        ></button>
    </div>
</template>

https://i.imgur.com/fTo4xGG.png

This code works in alpinejs > 2.4:

<template x-for="card in cards">
    <div>
        <div x-show="! card.cleared">
            <button              
                :style="'background: ' + (card.flipped ? card.color : '#999')" 
                class="w-full h-32"
                @click="flipCard(card)"
                x-text="card.cleared"
            ></button>
        </div>
    </div>
</template>

Let's Build a Memory Game