vue-clock-picker не работает должным образом в цикле for в vue js

Question

Я пытаюсь использовать vue-clock-picker для выбора времени.
Вот что я сделал -

<template>
      <div>
        <p class="margin-top-30" id="time-section">Timing</p>
        <form @submit.prevent="frmStoreTime">
          <div class="box-with-radius margin-top-30 clearfix">
            <div class="col-sm-12" v-for="(dayVal,index) in days">
              <div class="checkbox">
                <input :id="'day'+dayVal.id" type="checkbox" @change="manageTiming(dayVal.id,dayVal.day,$event)" :value="dayVal.day" v-model="dayVal.status" />
                <label :for="'day'+dayVal.id">{{dayVal.day}}</label>
                <div class="space"></div>
              </div>
              <div class="container" id="app-container" v-show="dayVal.status">
                <div class="row" v-for="time, idx in dayVal.times">
                  <div class="time-slot">
                    <div class="col-sm-9 col-md-4">
                      <label for="chkTest">Time</label>
                      <vue-clock-picker
                      mode="24" :defaultHour="'12'"
                      :defaultMinute="'30'"
                      :onTimeChange="timeChangeHandler" class="form-control form-input start-time" style="padding:0px;height: auto;"
                      >
                    </vue-clock-picker>
                  </div>
                  <div class="col-sm-3 col-md-4">
                    <button class="delete-button" type="button" @click="removeSlot(index,idx)">
                      <i class="fa fa-trash" aria-hidden="true"></i>
                    </button>
                  </div>
                </div>
              </div>
              <div class="col-sm-12">
                <button class="add-more-time-slot" type="button" @click="dayVal.times.push('')">
                  ADD MORE TIME SLOT
                </button>
              </div>
            </div> 
          </div>
          <div class="form-group">
            <div class="row">
              <div class="col-sm-4"> 
                <button class="btn btn-save" type="submit">SAVE</button>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
 </template>

Сценарий:

import VueClockPicker from 'vue-clock-picker'

export default {
  name: 'Profile',
  components: {
    VueClockPicker
  },
  data() {
    return {
      days: [{
          id: 1,
          day: 'MONDAY',
          status: false,
          times: ['']
        },
        {
          id: 2,
          day: 'TUESDAY',
          status: false,
          times: ['']
        },
        {
          id: 3,
          day: 'WEDNESDAY',
          status: false,
          times: ['']
        },
        {
          id: 4,
          day: 'THURSDAY',
          status: false,
          times: ['']
        },
        {
          id: 5,
          day: 'FRIDAY',
          status: false,
          times: ['']
        },
        {
          id: 6,
          day: 'SATURDAY',
          status: false,
          times: ['']
        },
        {
          id: 7,
          day: 'SUNDAY',
          status: false,
          times: ['']
        }
      ]
    }
  },
  methods: {

    timeChangeHandler() {
      // ...
    },
    basicInfoGet() {
      var userData = JSON.parse(localStorage.user);

      this.$http.get('/api/v1/doctor/basic-info-get', {
          headers: {
            'x-access-token': localStorage.jwt,
            'client-key': userData.client_key,
            'Accept': 'application/json'
          }
        })
        .then((response) => {

          if (response.data.status == 200) {
            let data = response.data.doctorDetails;

            var doctorSlots = response.data.doctorSlots;

            var defaultDays = this.days;

            for (var i = 0; i < defaultDays.length; i++) {
              var counter = 0;

              for (var j = 0; j < doctorSlots.length; j++) {
                if (doctorSlots[j].day_id == defaultDays[i].id) {
                  defaultDays[i].status = true;
                  defaultDays[i].times[counter] = doctorSlots[j].time;
                  counter++;
                }
              }
            }
          }
        })
    },

    beforeMount() {
      this.basicInfoGet();
    }
  }
}

Как компонент выбора времени в цикле for, который создает несколько временных полей. Моя проблема в том, что работает только поле выбора первого раза. Если я нажму на другие, кроме первого, то ничего не произойдет, просто не смог выбрать время.
Как решить эту проблему?
Любая помощь будет оценена.
Спасибо.