title: How to capture any keypress event in Vuejs without using input element
body: <p>I am making kind of game in which I want user to enter a particular word and then I want to check if the particular word is pressed. If the word is pressed I will fetch the next word. Currently I am using a form and have used <strong>v-model</strong> shown below : </p>
  
  <pre><code> &lt;input v-model="inputSpell"&gt;
  </code></pre>
  
  <p>In the Vue instance I have used the <strong>watch</strong> property which constantly checks the if the input word matches the asked word. </p>
  
  <pre><code>watch : {
  
      inputSpell : function() {
          var spellCount = this.spellCount;
          var inputSpell = this.inputSpell.toUpperCase();
          var presentSpell = this.presentSpell;
  
          console.log("Spell Count " + spellCount);
          console.log("Input Spell " + inputSpell);
          console.log("Present Spell" + presentSpell);
  
          if (inputSpell.length === 3 &amp;&amp; inputSpell === presentSpell) {
              this.$set(this, 'inputSpell', '');
              if (spellCount === 3) {
                  return this.completeCombo();
              }
              return this.fetchSpell(spellCount);
          }
  
          if (inputSpell.length &gt;=3) {
              this.$set(this, 'inputSpell', '');
          }
      }
  }
  </code></pre>
  
  <p>There are three ideas I thought of : </p>
  
  <ol>
  <li><p>Above way what I am doing is showing the form. The user enters for word in that form. Does not look good. </p></li>
  <li><p>Make the input element hidden and focus on it when the game loads. But the disadvantage is if the user click anywhere on the page the focus on the form will be lost. </p></li>
  <li><p>Making a custom directive or calling a method which captures the keypress event to check for words. </p></li>
  </ol>
  
  <p>Any help will be appreciated. </p>
  
  <p>Thanks. </p>