Vuejs : how to hide a component <div> on keyup escape?

Question

Using Vue 2.5 I'm trying to hide a component if the esc key is pressed.

Inspired by the documentation on key modifiers, I wrote the following code but with no effect (for the moment I'm not hiding, just displaying a message):

Vue.component('my-component', {
    data: function () {
    return {isVisible:true,
    message:'no key pressed'}
  },
  template: '<div v-on:keyup.esc="myMethod" v-if="isVisible">This is my component<div>{{message}}</div>',
  methods:{
    myMethod : function(){
    this.message = 'esc key pressed'
    //My hiding action...
    }
  }
})

new Vue({
  el: '#app',
  data: {
  }
})

Fiddle

EDIT : looks like the issue is related to the fact I'm trying to implement this on a regular div, not on an input as it's usually used

Answer 1

To make static elements accessible to keyboard event use tabindex

<div v-on:keyup.esc="myMethod" tabindex="0" v-if="isVisible">This is my component<div>{{message}}</div>