Vue3-Timepicker组件v-model值无法随状态更新的问题求助

找简易时间选择器方案时用了vue3-timepicker，虽处于Beta版本，但功能基本满足。不过遇到一个问题：点击按钮更新rest_time状态后，状态已成功变更，但时间选择器的显示值并未同步更新。

问题分析 #

核心原因是vue3-timepicker内部只监听了传入对象的属性变化，没有处理对象引用替换的情况。组件初始化时会将v-model绑定的对象复制到内部状态，当外部直接替换整个对象（比如this.rest_time = {...}）时，组件无法检测到引用变更，因此不会更新视图显示。

修复方案 #

方案1：修改现有对象属性（推荐） #

利用Vue的响应式追踪机制，直接修改已有对象的属性，而不是重新赋值新对象：

methods: {
  change() {
    this.rest_time.hh = "10";
    this.rest_time.mm = "20";
    this.rest_time.ss = "40";
  }
},
mounted() {
  this.rest_time.hh = "10";
  this.rest_time.mm = "20";
  this.rest_time.ss = "30";
}

方案2：强制组件重新渲染 #

给时间选择器组件添加key属性，当rest_time的数值变化时，更新key触发组件重新渲染：

<vue-timepicker 
  format="hh:mm:ss" 
  v-model="rest_time"
  :key="`${rest_time.hh}-${rest_time.mm}-${rest_time.ss}`"
></vue-timepicker>

替代库推荐 #

如果不想折腾Beta版组件的兼容性问题，可以考虑这些成熟的Vue3时间选择器：

• Element Plus TimePicker：官方生态组件，稳定可靠，支持多格式时间选择，文档完善
• Vuetify TimePicker：Material Design风格，功能丰富，适合使用Vuetify的项目
• FlatPickr（Vue3封装版）：轻量级，自定义程度高，支持时间、日期等多种选择场景

原问题代码 #

<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 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>

内容的提问来源于stack exchange，提问作者Elias