Time picker on vue 2 (stateful computed property example)

TimePicker.vue

<template>
    <div>
        <vm-clock
                v-if="! showMinutes"
                type="hours"
                v-model="hours"
                @input="showMinutes = true"
        >
            <vm-am-pm-switch v-model="amPm"/>
        </vm-clock>
        <vm-clock
                v-else
                type="minutes"
                v-model="minutes"
                @input="$emit('submit')"
        ></vm-clock>
    </div>
</template>


<script>
  import Time from '../../../classes/Calendar/Time.js'

  import vmClock from './Clock.vue'
  import vmAmPmSwitch from './AmPmSwitch.vue'

  export default {
    data () {
      return {
        timeTemporary: null,
        showMinutes: false,
      }
    },
    props: {
      value: {
        type: Time,
      },
    },
    computed: {
      amPm: {
        get () {
          const time = this.timeTemporary || this.time
          return time.getAmPm()
        },
        set (amPm) {
          const time = this.timeTemporary || this.time
          this.timeTemporary = time.setAmPm(amPm)
        },
      },
      minutes: {
        get () {
          return this.time.getMinutes()
        },
        set (minutes) {
          this.time = this.timeTemporary.setMinutes(minutes)
        },
      },
      hours: {
        get () {
          const time = this.timeTemporary || this.time
          return time.getHours12()
        },
        set (hours) {
          const time = this.timeTemporary || this.time
          this.timeTemporary = time.setHours12(hours)
        },
      },
      time: {
        get (): Time {
          return this.value || new Time('12:00:00')
        },
        set (time: Time) {
          this.$emit('input', time)
        }
      }
    },
    components: {
      vmClock,
      vmAmPmSwitch,
    },
  }
</script>