Soy un novato en JS y Phoenix (pila PETAL en general). Surgió un problema cuando quiero implementar contenido oculto con Alpine JS. Aquí hay algo de código:

 <div x-data="{ open: false }"> <button @click=" open = ! open ">toggle</button> <div x-show="open" class="text-center" x-cloak> <p>content</p> </div> </div>

Entonces, mi idea es mostrar el contenido solo cuando un usuario hace clic en el botón Mostrar. Pero cuando cargo la página, el contenido es visible y necesito presionar el botón dos veces para ocultarlo. Traté de usar x-cloak y x-if . ¿Quizás Alpine no funciona bien por alguna razón en mi proyecto?

PD: agregué el estilo de diseño raíz, pero aún no puedo obtener el resultado correcto

 [x-cloak] { display: none !important; }