vue3 simple-time-picker bug

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

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