Estoy tratando de mover algunos alpine.js en línea a un archivo JavaScript externo, con la idea de poder manipular el estado de, por ejemplo, un modal después de enviar un formulario con ajax.

Así que mi modal con viento de cola:

 <div x-data="showFileModal" class="inline-block"> <button type="button" @click="toggle">{{ __('Open Model') }}</button> <div x-show="openFileModal" class="flex fixed overflow-auto z-10 top-O right-0 bottom-0 left-0"> <div x-show="openFileModal" class="w-2/5 p-5 mx-auto" @click.away="toggle"> <form action="" method=""> <button id="form-submit" type="submit">{{ __('Submit') }}</button> </form> </div> </div> </div>

Mi archivo JavaScript externo:

 window.showFileModal = () => { return { openFileModal: false, toggle() { this.openFileModal = ! this.openFileModal; } } }; $('#form-submit').click(function (e) { e.preventDefault(); $.ajax({ success: function (s) { showFileModal().toggle(); } }) });

La función de alternar en el botón para abrir y cerrar el modelo funciona, pero intentar llamarlo dentro de la función de éxito de ajax no funciona. Incluso si lo intento en un botón normal sin ninguna lógica ajax, tampoco funciona. No recibo ningún error en la consola, o recibo un error que dice que alternar no es una función si intento con una variación de usar 'esto'.

¿Cómo puedo llamar a esa función de alternancia fuera de la función showFileModal?