title: vue.js arrowkey binding issues
body: <p>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.</p>
  <p>I've created <a href="https://jsfiddle.net/james_doe/0zuqxeya/" rel="nofollow noreferrer">a simple alert test</a> (and attached my code at the bottom of my ask) to demonstrate the problem I'm facing. When using <code>v-on:click</code>, the alert method I created works perfectly fine. I've tried using <code>v-on:keyup</code>, <code>v-on:keydown</code>, and <code>v-on:keypress</code>and neither option triggered an alert to indicate the arrowkey functionality was working.</p>
  <p>I discovered this <a href="https://github.com/vuejs/vue/issues/1250" rel="nofollow noreferrer">3+ year old thread</a> 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 <a href="https://v2.vuejs.org/v2/guide/events.html#Key-Modifiers" rel="nofollow noreferrer">the key modifier documentation</a> of the current version of Vue and it seems as though I am doing everything correctly.</p>
  <p>I'm most likely missing something crucial, but after much experimentation and research, I could use some help. Thanks in advance!</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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");
      },
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/vue@2.5.13/dist/vue.js"&gt;&lt;/script&gt;
  &lt;div id="app"&gt;
    &lt;button @keyup.left="popupLeft"&gt;Prev Page&lt;/button&gt;
    &lt;button @keyup.right="popupRight"&gt;Next Page&lt;/button&gt;
    &lt;button @click="popupClose"&gt;Close Page&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>