<template>
  <div id="app">
      <button @click="add">ADD</button>
      <h1>{{ reversedMessage }}</h1>
  </div>
</template>

<script>
export default {
  data(){
    return {
      // Getter, Setter
      msg: 'Hello Computed!'
    }
  },
  computed: {
    // Getter, Setter
    reversedMessage : {
      get() {
        return this.msg.split('').reverse().join('')
      },
      set(newValue) {
        this.msg = newValue;
      }
    }
  },
  methods: {
    add(){
      this.reversedMessage += '!?'
      // this.msg += '!?'
    }
  }
}
</script>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.