I want to toggle an element's visibility on keypress in Vue. The problem is I see the event is attached to the element but is not firing. the template is :

    <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

Vue:

<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;
  }); 

From the DOM inspector I see the event is attached to the element but eventlistener callback is never invoked. If I change el.addEventListener to document.addEventListener it works. But then event fires on any keystroke on page which is not efficient or necessary. Any insights welcome...