Как сделать объект реактивным во Vue

В своем проекте использую библиотеку Vue Datepicker для выбора времени. Пример - https://skr.sh/sJjWrDKBySf Данный объект вывожу через цикл - https://skr.sh/sJjvbnTO8jf, передавая в него дефолтные значения startTime:

data() {
   return {
      time: {},
      startTime: {
         hours: 0,
         minutes: 0,
         seconds: 0
      },
   };
}

Задача - вместо дефолтных значений подставлять текущие. Для мутации объекта startTime использую функцию handlePicker, в которую передаю текущее значение времени строкой в формате "00:00:01":

<Datepicker
    v-model="time[index]"
    enable-seconds
    time-picker
    :placeholder="getTime(item.startTime)"
    :start-time="startTime"
    @open="handlePicker(getTime(item.startTime))"
/>

Сама функция handlePicker:

handlePicker(time) {
    this.startTime['hours'] = time.split(':')[0]
    this.startTime['minutes'] = time.split(':')[1]
    this.startTime['seconds'] = time.split(':')[2]
}

В результате вызова функции объект startTime мутирует, но рендер срабатывает с опозданием. То есть, при первом вызове подставляются дефолтные значения объекта startTime, а уже при повторном вызове рендерятся значения с предыдущего вызова.

Первый вызов - https://skr.sh/sJjMofTA9ad Второй вызов - https://skr.sh/sJjrmHXMLSV

Пробовал мутировать объект, как указано в документации vue,

handlePicker(time) {
   this.startTime = Object.assign({}, this.startTime, {
       hours: time.split(':')[0],
       minutes: time.split(':')[1],
       seconds: Math.floor(time.split(':')[2])
   })
}

Результат тот же :(