JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.js"></script>
<div id="demo">
  <div v-on="listeners" class="box">
    {{ count }}
   </div>
   
   <button @click="enabled = !enabled">{{ enabled ? 'Disable' : 'Enable' }}</button>
</div>

CSS

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  background: #ccc;
  font-size: 2rem;
  user-select: none;
}

JavaScript

console.clear()

new Vue({
	data: {
  	count: 0,
    enabled: true,
  },
  computed: {
  	listeners() {
    	if (this.enabled) {
      	return { click: this.increment }
      }
      
      return null
    }
  },
  methods: {
  	increment() {
    	this.count++;
    }
  }
}).$mount('#demo')