title: vue-clock-picker doesn't work properly in for loop in vue js
body: <p>I am trying to use vue-clock-picker to select time.<br>
  Here is what I have done -     </p>
  
  <pre><code>&lt;template&gt;
        &lt;div&gt;
          &lt;p class="margin-top-30" id="time-section"&gt;Timing&lt;/p&gt;
          &lt;form @submit.prevent="frmStoreTime"&gt;
            &lt;div class="box-with-radius margin-top-30 clearfix"&gt;
              &lt;div class="col-sm-12" v-for="(dayVal,index) in days"&gt;
                &lt;div class="checkbox"&gt;
                  &lt;input :id="'day'+dayVal.id" type="checkbox" @change="manageTiming(dayVal.id,dayVal.day,$event)" :value="dayVal.day" v-model="dayVal.status" /&gt;
                  &lt;label :for="'day'+dayVal.id"&gt;{{dayVal.day}}&lt;/label&gt;
                  &lt;div class="space"&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="container" id="app-container" v-show="dayVal.status"&gt;
                  &lt;div class="row" v-for="time, idx in dayVal.times"&gt;
                    &lt;div class="time-slot"&gt;
                      &lt;div class="col-sm-9 col-md-4"&gt;
                        &lt;label for="chkTest"&gt;Time&lt;/label&gt;
                        &lt;vue-clock-picker
                        mode="24" :defaultHour="'12'"
                        :defaultMinute="'30'"
                        :onTimeChange="timeChangeHandler" class="form-control form-input start-time" style="padding:0px;height: auto;"
                        &gt;
                      &lt;/vue-clock-picker&gt;
                    &lt;/div&gt;
                    &lt;div class="col-sm-3 col-md-4"&gt;
                      &lt;button class="delete-button" type="button" @click="removeSlot(index,idx)"&gt;
                        &lt;i class="fa fa-trash" aria-hidden="true"&gt;&lt;/i&gt;
                      &lt;/button&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="col-sm-12"&gt;
                  &lt;button class="add-more-time-slot" type="button" @click="dayVal.times.push('')"&gt;
                    ADD MORE TIME SLOT
                  &lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt; 
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;div class="row"&gt;
                &lt;div class="col-sm-4"&gt; 
                  &lt;button class="btn btn-save" type="submit"&gt;SAVE&lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
   &lt;/template&gt;
  </code></pre>
  
  <p>Script: </p>
  
  <pre><code>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) =&gt; {
  
            if (response.data.status == 200) {
              let data = response.data.doctorDetails;
  
              var doctorSlots = response.data.doctorSlots;
  
              var defaultDays = this.days;
  
              for (var i = 0; i &lt; defaultDays.length; i++) {
                var counter = 0;
  
                for (var j = 0; j &lt; 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();
      }
    }
  }
  </code></pre>
  
  <p>As time picker component in for loop so that it creates multiple time fields. My problem is that only first time picker field works well, If I click on others except first then nothing happens just not able to select time.<br>
  How to solve this issue?<br>
  Any help would be appreciated.<br>
  Thanks.</p>