change EncounterEntry component communication with vuex

[kissmygritts]

Below is how components are currently communicating with vuex:

export default {
  name: 'Handling',

  data () {
    return {
      handling: cloneDeep(this.$store.state.encounterEntry.handling)
    }
  },

  methods: {
    updateField (model) {
      this.$store.commit('encounterEntry/updateModel', {
        model: model,
        data: cloneDeep(this[model])
      })
    }
  }
}

I'm cloning empty data from the global state to generate the data field. This is an attempt at 2 way data binding. Via a blog article I found as an alternative to writing out each setter and getter as a computed property. Instead I should try the following.

export default {
  name: 'Handling',

  data () {
    return {
      handling: {
        capture_time: '00:00:00',
        start_time: '00:00:00',
        end_time: '00:00:00',
        enc_method: '',
        enc_reason: ''
      }
    }
  },

  computed: {
    formatData () {
      format data ....
    }
  },

  methods: {
    updateField (model) {
      this.$store.commit('encounterEntry/updateModel', {
        model: model,
        data: this.formatData
      })
    }
  }
}