Quiero alternar la visibilidad de un elemento al presionar una tecla en Vue. El problema es que veo que el evento está adjunto al elemento pero no se activa. la plantilla es:

 <h1 v-show="typeWriterEffectVisible"> <div id="game-board" data-v-d95dafd8=""> <div class="letter-row"> <div class="letter-box"></div> <div class="letter-box"></div> // etc

Vista:

 <script setup> let typeWriterEffectVisible = ref(true); onMounted(() => { const el = document.querySelector( "#game-board > .letter-row:first-child > .letter-box:first-child" ); // add eventlistener to toggle off typewriter effect on page el.addEventListener("keyup", () => { console.log("Im in toggle"); typeWriterEffectVisible.value = false; });

Desde el inspector DOM, veo que el evento está adjunto al elemento, pero nunca se invoca la devolución de llamada del detector de eventos. Si cambio el.addEventListener a document.addEventListener, funciona. Pero luego el evento se activa con cualquier pulsación de tecla en la página que no sea eficiente o necesaria. Cualquier idea es bienvenida...