JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue-global-events"></script>
<div id="app">
  <global-events
    @keydown.ctrl.49="minusOne"
    @keydown.ctrl.50="plusOne"
    @keydown.ctrl.tab.exact="plusOne"
    @keydown.ctrl.shift.tab="minusOne"
    @keydown.space="reset"
    @click="plusOne"
    @contextmenu.prevent="minusOne"
  ></global-events>
  <h1>
    {{ counter }}
  </h1>
  <dl>
    <dt>Ctrl+1, Ctrl+Tab, Left Mouse Click</dt>
    <dd>Increase counter</dd>
    <dt>Ctrl+2, Ctrl+Shift+Tab, Right Mouse Click</dt>
    <dd>Increase counter</dd>
    <dt>Space</dt>
    <dd>Reset counter</dd>
  </dl>
</div>

CSS

* {
  font-family: sans-serif;
}

dt {
  font-weight: bold;
  font-size: 14px;
}

dd {
  margin: 0 0 10px;
}

JavaScript

new Vue({
	components: {
  	GlobalEvents: window.VueGlobalEvents
  },
  data: {
  	counter: 0
  },
  methods: {
  	plusOne () {
    	this.counter++
    },
    minusOne () {
    	this.counter--
    },
    reset () {
    	this.counter = 0
    }
  }
}).$mount('#app')