Using a two-way computed property

We can use Vue's built-in, two-way computed property with a setter for handling forms with a v-model with the help of the following steps:

1. Create a method for mutating the state in the mutations property, just as in the previous section.
2. Apply the get and set methods to the message key, as follows:

// vuex-sfc/form-handling/getter-setter/components/app.vue
<input v-model="message" />

export default {
  computed: {
    message: {
      get () {
        return this.$store.state.message
      },
      set (value) {
        this.$store.commit('updateMessage', value)
      }
    }
  }
}

However, this probably works well for simple computed properties. If you have a deep level object with more than 10 keys to update, you will need 10 sets of two-way computed properties (the getter and setter). The code will eventually get more repetitive and verbose than the event-based solution.

Well done! You have managed to get through the foundation...