Alpine: Eventos

 <div x-data="getDataUno()" @resize.window="mostrar=window.outerWidth > 768 ? true:false">
        <p x-show="mostrar">Este mensaje solo en pantalla grande</p>
    </div>

    <div x-data="getDataDos()" >
        <form action="" @submit.prevent="console.log(mensaje1)"> <!-- prevent es para q no se envie el form -->
            <input type="text" x-model="mensaje1">
        
            <button @click.away="console.log('Has hecho click fuera del botón')">
                Enviar
            </button>
        </form>
        <hr>
        KEYDOWN: <input type="text" x-model="mensaje2" @keydown="console.log(mensaje2)">
        <hr>
        ENTER: <input type="text" x-model="mensaje3" @keydown.enter="console.log(mensaje3)">
        <hr>
        ESCAPE: <input type="text" x-model="mensaje4" @keydown.escape="console.log(mensaje4)">
        <hr>
        CTRL+A: <input type="text" x-model="mensaje5" @keydown.ctrl.a="console.log(mensaje5)">
    </div>

    <script>
        function getDataUno() {
            return {
                mostrar:true
            }
        }

        function getDataDos() {
            return {
                mensaje1: null,
                mensaje2: null,
                mensaje3: null,
                mensaje4: null,
                mensaje5: null
            }
        }
    </script>