title: How to disable available times looping through an array using watch?
body: <p>I'm creating a booking application in Vue CLI. I decided to use vue-ctk-date-time-picker for choosing date and time. I'm planning to disable some times, depending on the date, but i'm running to a problem. My code only disables the times of last date specified in array and ignores the rest.</p>
  
  <p>I've logged the times array to console depending on the date and it prints correct values. Other than that console displays no errors.</p>
  
  <pre><code>&lt;VueCtkDateTimePicker only-date v-model="date"/&gt;
  &lt;VueCtkDateTimePicker only-time :disabled-hours="disabledHours"/&gt;
  date: null,
  disabledHours: [],
  testArray: [
    {
      date: "2019-05-28",
      times: ["10", "11"]
    },
    {
      date: "2019-05-29",
      times: ["10", "11", "12"]
    }
  ]
  
  watch: {
    date(newVal, oldVal) {
      for (let i = 0; i &lt; this.testArray.length; i++) {
        if (newVal == this.testArray[i].date) {
          for (let j = 0; j &lt; this.testArray[i].times.length; j++) {
            this.disabledHours.push(this.testArray[i].times[j]);
          }
        } else {
          this.defaultHours();
        }
      }
    }
  },
  created() {
    this.defaultHours();
  }
  
  defaultHours() {
    this.disabledHours = ["00","01","02","03"]
  }
  </code></pre>
  
  <p>If date is <code>"2019-05-28"</code>, then i expect disabled hours to be 10 and 11.
  If date is <code>"2019-05-29"</code>, then i expect disabled hours to be 10, 11 and 12 etc.</p>
  
  <p>But what happen is, that it takes the last date specified in the array and only disables its hours.</p>