vue3 simple-time-picker bug

Question

I recently came across the Vue-time-picker repository (https://github.com/phoenixwong/vue3-timepicker) while searching for a simple time picker solution. Despite being in Beta mode, it seemed compatible and capable of fulfilling the job requirements.

However, I encountered an issue: after changing the state by clicking on a button, the state changes successfully, but the value of the time picker does not update. I'm wondering if anyone has any insights, bug fixes, or recommendations for alternative libraries? here is my code :

<template>
  <div>
    <h1>Time Picker</h1>
    state : {{ rest_time }}
    <vue-timepicker format="hh:mm:ss" v-model="rest_time"></vue-timepicker>
    <button @click="change">make time 10:20:40</button>
  </div>
</template>
<script>
// import axios from "@axios";
import VueTimePicker from "vue3-timepicker";
import "vue3-timepicker/dist/VueTimepicker.css";
export default {
  components: {
    "vue-timepicker": VueTimePicker,
  },
  data: () => ({
    rest_time: {
      hh: "10",
      mm: "20",
      ss: "20",
    },
  }),
  methods: {
    change() {
      this.rest_time = {
        hh: "10",
        mm: "20",
        ss: "40",
      };
    },
  },
  mounted() {
    this.rest_time = {
      hh: "10",
      mm: "20",
      ss: "30",
    };
  },
};
</script>

Here's a playground showcasing the issue

Answer 1

I stumbled upon the @vuepic/vue-datepicker library, and it was okay for what I needed!

Answer 2

You can use a native <input>-element with a type of time:

<input type="time" v-model="rest_time" step="1">

In this case, rest_time is a string like 18:00:00.