Vue detect doubleclick and single click on the same item

A simple fiddle to show how I detect single vs double clicks on the same element.

by Martin Sandstrom

HTML

<div id="app">
  <div 
    class="round"
    @click="clicked().then((text) => {clickType = text})">
      {{clickType}}
   </div>
</div>

CSS

body {
  background: white;
  padding: 20px;
  font-family: Helvetica;
  user-select: none;
}

.round {
  text-align: center;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2em;
  background: purple;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

Vue

new Vue({
  el: "#app",
  data: {
    click: undefined,
    clickType: 'Click or Doubleclick ME'
  },
  methods: {
  	clicked () {
    	return new Promise ((resolve, reject) => {
      	if (this.click) {
          clearTimeout(this.click)
          resolve('Detected DoubleClick')
        }
        this.click = setTimeout(() => {
         this.click = undefined
         resolve('Detected SingleClick')
        }, 200)
      })
    }
  }
})