JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <p>{{ counter }}</p>
  <p>{{ fullName }}</p>
  <p>{{ fullName }}</p>
  
  <button v-on:click="counter++">Increase Counter</button>
  <button v-on:click="changeName">Change Name</button>
  <button v-on:click="changeNameSetter">Change Name (setter)</button>
</div>

JavaScript

new Vue({
	el: '#app',
  data: {
    counter: 1,
    firstName: 'Bo',
    lastName: 'Andersen'
  },
  methods: {
  	changeName: function() {
    	this.firstName = 'Mark';
      this.lastName = 'Gonzales';
    },
    changeNameSetter: function() {
    	this.fullName = 'Mark Gonzales yyyy';
    }
  },
  computed: {
  	fullName: {
    	get: function() {
      	alert("Assembling full name...");
    		return this.firstName + ' ' + this.lastName;
      },
      set: function(newValue) {
      	alert("Setting new name: " + newValue);
        var parts = newValue.split(' ');
	      this.firstName = parts[0];
  	    this.lastName = parts[parts.length - 1];
      }
    }
  }
});