vue.js arrowkey binding issues

I am in the process of building my first Vue.js project, and I would like to navigate between pages (prev page/next page) through the left and right keyboard arrow keys.

I've created a simple alert test (and attached my code at the bottom of my ask) to demonstrate the problem I'm facing. When using v-on:click, the alert method I created works perfectly fine. I've tried using v-on:keyup, v-on:keydown, and v-on:keypressand neither option triggered an alert to indicate the arrowkey functionality was working.

I discovered this 3+ year old thread detailing a similar problem, and one of the comments described the method I'm using as being a working solution since v1.0.0. I've checked the key modifier documentation of the current version of Vue and it seems as though I am doing everything correctly.

I'm most likely missing something crucial, but after much experimentation and research, I could use some help. Thanks in advance!

new Vue({
  el: "#app",
  methods: {
    popupLeft: function(){
        alert("You have gone to the previous page");
    },
    
    popupRight: function(){
        alert("You have gone to the next page");
    },
    
    popupClose: function(){
        alert("You have closed this page");
    },
  }
})

<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
<div id="app">
  <button @keyup.left="popupLeft">Prev Page</button>
  <button @keyup.right="popupRight">Next Page</button>
  <button @click="popupClose">Close Page</button>
</div>