JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  Display reactive values: {{ count }} {{ doubledCount }}
  <button @click="count++">Modify reactive value from template</button>
  <button @click="increment">Modify reactive value in methods section</button>
</div>

SASS

body
    font-family: sans-serif

button
    display: block

JavaScript

console.clear();
const app = Vue.createApp({
  data: function () {
    return {
      count: 0
    };
  },
  methods: {
    increment: function () {
      this.count++;
    }
  },
  computed: {
    doubledCount: function () {
      return this.count * 2;
    }
  }
}).mount('#app');