JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <p>
    {{ firstName}} - {{ lastName }} - {{ fullName }}
  </p>
  <button @click="update">
    Update
  </button>
  <button @click="update2">
    Update2
  </button>
</div>

JavaScript

const app = Vue.createApp({
  data () {
    return {
      firstName: 'A',
      lastName: 'B'
    }
  },
  
  computed: {
    fullName: {
      // getter
      get() {
        return this.firstName + ' ' + this.lastName
      },
      // setter
      set(newValue) {
        const names = newValue.split(' ')
        this.firstName = names[0]
        this.lastName = names[names.length - 1]
      }
    }
  },
  methods: {
    update () {
      this.fullName = 'With this'
    },
    
    update2 () {
      vm.fullName = 'John Doe'
    }
  }
})

const vm = app.mount('#app')