Vue组合式API下封装适配Dayjs的vue-date-picker组件

我想封装<vue-date-picker/>组件，该组件的v-model基于原生Date类型，需要修改为适配全项目统一使用的Dayjs库。当前使用的是最新版Vue组合式API，该如何实现？

我明白需要将双向绑定拆分为:model-value（单向传入）和@update:model-value（单向触发更新），在中间做类型转换，但不清楚如何正确将v-model的值传入ref，同时触发父组件可直接用v-model消费的事件。我尝试了多种写法，当前代码如下：

const convertedValue = ref(dayjs(props.value).toDate());
watchEffect(() => {
  convertedValue.value = dayjs(props.value).toDate();
});
watchEffect(() => {
  emit('update:value', dayjs(convertedValue.value));
});
...
<vue-date-picker :model-value="convertedValue" />

但这段代码无法正常工作，这应该是很常见的场景，正确的实现方式是什么？

编辑：感谢Alexander和同事的解答，我最终实现的代码如下：

const value = computed(() => convertToDatePicker(props.modelValue));
const emit = defineEmits<{
  'update:model-value': [date: dayjs.Dayjs | null];
}>();
function handleEmit(event: ModelValue) {
  emit('update:model-value', convertToDayjs(event));
}
...
<vue-date-picker :model-value="value" @update:model-value="handleEmit" />

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