앞서 computed 는 기본적으로 읽기 전용이기 때문에 값을 얻어내는 것만 가능하다.
그런데 Vue.js 문법을 통해서 setter 를 지정을 해 줄 수 있다.

<template>
  <button @click="add">
    Add
  </button>
  <h1>{{ reversedMessage }}</h1>
  <h1>{{ reversedMessage }}</h1>
  <h1>{{ reversedMessage }}</h1>
  <h1>{{ reversedMessage }}</h1>
</template>

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