Estoy creando un formulario de carga de fotos con Livewire, Alpine y FilePond. Después de que las fotos hayan terminado de procesarse, quiero mostrar un botón "Guardar" para conservar los archivos.

Estoy usando Alpine para manejar el mostrar/ocultar. Ambos detectores de eventos funcionan correctamente cuando están separados, pero parece que no puedo hacer que funcionen juntos. El siguiente código no arroja errores, pero tampoco muestra los botones dentro del div showSaveButtons.

¿Qué estoy haciendo mal?

 <div x-data="showSaveButtons"> <div x-show="open"> Buttons Go Here </div> </div>

 <script> document.addEventListener('alpine:init', () => { Alpine.data('showSaveButtons', () => ({ open: false, })); document.addEventListener("FilePond:processfiles", () => { Alpine.data('showSaveButtons', () => ({ open: true, })); }); }) </script>