JSFiddle - React, Tailwind, and code Playground

by Alexey Ryazhskikh

HTML

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="component">


  <div id="title"><h1>{{ title }}</h1></div>

  <div id="title-input">
    <input type="text" v-model="title">
  </div>

</div>

JavaScript

new Vue({
  el: '#component',
  data: {
    title_text: "Hello"
  },
  computed: {   
    title: {
      // геттер:
      get: function () {
        return this.title_text;
      },
      // сеттер:
      set: function (newValue) {
        this.title_text = newValue + "!";        
      }
    }
  }
});