JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
  <vue-example/>
</div>

CSS

#app {
  min-height: 200px;
  padding: 20px 4px;
  margin: 10px 4px;
}

input {
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #000000;
  font-size: 1.2em
}

label {
  display: block;
  margin-bottom: 8px;
}

JavaScript

const VueExample = Vue.defineComponent({
  setup() {
    const name = Vue.ref("")
    const now = new Date(); // 👈 This allocation happens only once.

    console.log("Rendering") // 👈 This is called only once.

    // 👇 Only this reactive function is executed again.
    Vue.watch (name, (val) => {      
      console.log(val)
      // ... Other effects
    })
  
    return {
      name,
      now
    }
  },
  template: `
    <label>
      Your name is: {{ name === "" ? "(Start typing...)" : name }} 
      ({{ now.toISOString() }})
    </label>
    <input type="text" v-model="name"/>
  `
})

// 👇 Create and mount the app
const app = Vue.createApp({});
app.component('VueExample', VueExample) // 👈 Register our component
app.mount('#app');