title: VueJS: @keydown, @keyup, and this.$refs works with input, but not with md-textarea
body: <p>I have successfully completed a basic speed typing game using <code>vue.js</code>. For the "typing box", I used <code>&lt;input&gt;</code>, and everything worked fine. However, when I added more levels to my game, with longer sentences for the user to type, I have identified the need to change my <code>&lt;input&gt;</code> element into <code>&lt;md-textarea&gt;</code> - a <code>vue.js</code> component.</p>
  
  <p><strong>THE PROBLEM:</strong></p>
  
  <p>The following attributes that were working fine with <code>&lt;input&gt;</code> won't work as expected with <code>&lt;md-textarea&gt;</code>:</p>
  
  <ul>
  <li><code>@keyup="checkAnswer()"</code></li>
  <li><code>@keydown="keymonitor"</code></li>
  <li><code>@keydown.ctrl.86="noPaste"</code> (prevents paste via <code>Ctrl+V</code>)</li>
  <li><code>@keydown.shift.45="noPaste"</code> (prevents paste via <code>Shift+Insert</code>)</li>
  <li><code>ref="typeBox"</code> (allows focusing on the element via <code>this.$refs.typeBox[0].focus()</code>)</li>
  </ul>
  
  <p>Please refer to the codes below.</p>
  
  <p>Am I missing anything? Please help me debug this. Thank you.</p>
  
  <p><strong>NOTE:</strong> I know it throws an error here in SO snippet feature, but that error does not exist in my development environment.</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>export default {
    name: 'game',
  
    data () {
      return {
        disabledKeys: ['ArrowLeft', 'Home']
      }
    },
  
    methods: {
      /**
       * prevents pasting via 'Ctrl + V' (@keydown.ctrl.86) and 'Shift + Insert' (@keydown.shift.45)
       */
      noPaste: function (event) {
        event.preventDefault()
      },
  
      /**
       * Monitors every single key input in the answer text box.
       *
       * Prevents using of disabled keys in the text input.
       */
      keymonitor: function (event) {
        if (this.disabledKeys.indexOf(event.key) &gt;= 0) {
          event.preventDefault()
        }
      }, /*END keymonitor*/
      
      startTimer () {
        this.timer.id = setInterval(this.updateTimer, 1000)
        
        this.$nextTick(() =&gt; {
          this.$refs.typeBox[0].focus()
        })
  
        this.game.status = 'in progress'
      }, /*END startTimer*/
    } /* END methods */
  } /* END export default */</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"&gt;&lt;/script&gt;
  &lt;template&gt;
    &lt;md-input-container md-flex="100"&gt;
    
      &lt;!-- this one is working --&gt;
      &lt;input id="typeBox" autocomplete="off" placeholder="Type here..." ref="typeBox" v-model="answer" @keydown="keymonitor" @keydown.ctrl.86="noPaste" @keydown.shift.45="noPaste"/&gt;
      
      &lt;!-- this one is not working --&gt;
      &lt;md-textarea id="typeBox" autocomplete="off" placeholder="Type here..." ref="typeBox" v-model="answer" @keydown="keymonitor" @keydown.ctrl.86="noPaste" @keydown.shift.45="noPaste"&gt;&lt;/md-textarea&gt;
      
    &lt;/md-input-container&gt;
  &lt;/template&gt;</code></pre>
  </div>
  </div>
  </p>