I'm building a photo upload form with Livewire, Alpine, and FilePond. After the photos have finished processing I want to show a "Save" button to persist the files.

I'm using Alpine to handle the show/hide. Both event listeners are working correctly when separated, but I just can't seem to get them to work together. The below code is not throwing errors, but it's also not showing the buttons inside the showSaveButtons div.

What am I doing wrong?

<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>