title: Vue Font-awesome icon even binding
body: <p>I have some code that is similar to the Simon game. When used buttons for the arrows everything worked perfectly using the @mousedown event. I wanted to spruce it up a little with font awesome icons but keep the look the same and as soon as I swapped out the <code>&lt;button&gt;</code> for <code>&lt;icon&gt;</code> the @mousedown event stopped firing. Everything else seems to work the same.</p>
  
  <p>From my template:</p>
  
  <pre><code>&lt;div id="top-row"&gt;
    &lt;icon name="arrow-left" class="but-0" v-bind:class="{ active: pushed0 }" aria-hidden="true" @mousedown="toneButtonPushed(0)"&gt;&lt;/icon&gt;
    &lt;icon name="arrow-left" class="but-1" v-bind:class="{ active: pushed1 }" aria-hidden="true" @mousedown="toneButtonPushed(1)"&gt;&lt;/icon&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The toneButtonPushed even is here:</p>
  
  <pre><code>methods: {
      toneButtonPushed: function (buttonPushed) {
        console.log('hit')
        if (this.compTurn === false) {
          if (buttonPushed === this.compTones[this.playerTone]) {
            const toneName = 'simonSound' + buttonPushed.toString()
            this.$refs[toneName].play()
            if (this.playerTone === this.compTones.length - 1) {
              if (this.compTones.length === this.winLevel) {
                this.msg = 'YOU WIN!!!!'
                setTimeout(() =&gt; {
                  this.initGame()
                }, 2500)
              } else this.toggleTurn()
            } else {
              this.playerTone++
            }
          } else {
            if (this.strict === true) {
              this.$refs.wrong.play()
              this.initGame()
            } else {
              this.$refs.wrong.play()
              this.compTurn = true
              this.showTones()
            }
          }
        } else {
          this.$refs.wrong.play()
        }
      },
  </code></pre>
  
  <p>I have some vague feeling it has to do with how components are imported so I'm including the import statements as well. If you need more code the full project is here. <a href="https://github.com/CliffSmith25/simon" rel="nofollow noreferrer">https://github.com/CliffSmith25/simon</a></p>
  
  <pre><code>import Icon from 'vue-awesome/components/Icon.vue'
  
  export default {
    name: 'app',
    data: function () {
      return {
        compTones: [],
        playerTone: 0,
        compTurn: true,
        intervalID: '',
        strict: false,
        winLevel: 20,
        pushed0: false,
        pushed1: false,
        pushed2: false,
        pushed3: false,
        msg: ''
      }
    },
    components: {
      Icon
    },
  </code></pre>