Ant Design Vue中DatePicker日期选择框默认绑定dayjs对象数据格式问题

我的需求是选择日期后，提交的数据可以是我期望的格式。
然而遇到的问题却是：

代码：

<template>
  <a-date-picker v-model:value="receive" />
  {{ receive }}
</template>

<script lang='ts'>
import { defineComponent, reactive } from "vue";
import dayjs from "dayjs";
export default defineComponent({
  setup() {
    const receive = reactive(dayjs());
    return {
      receive,
    };
  },
});
</script>

正常来说，我选中了2021-10-23，那么显示的值也应该是2021-10-23，但事实并非如此。
这里有两个坑：
1、本身绑定的就是dayjs()对象
2、应该用ref而不是reactive

根据Ant Design Vue官方提示，DatePicker必须绑定的是一个dayjs()对象，如果是字符串，则控制台会报错。

继续寻找其他方法。
找到在官方文档上有这么一个api

按上面的提示，我们只需要给a-date-picker加上value-format属性，就可以按照我们想要的设置了，点开具体格式

页面已经移除…
但是看着添转的页面为dayjs，也大概能猜到它具体的格式应该是怎样的，打开dayjs中文网

于是代码变为：

<template>
  <a-date-picker v-model:value="receive" value-format="YYYY-MM-DD" />
  {{ receive }}
</template>

<script lang='ts'>
import { defineComponent, reactive } from "vue";
import dayjs from "dayjs";
export default defineComponent({
  setup() {
    const receive = reactive(dayjs());
    return {
      receive,
    };
  },
});
</script>

按理说问题应该解决，但是并没有

最后发现我被思想禁锢了，觉得是对象，于是便用了reactive,但其实这里应该用ref
于是最后代码：

<template>
  <a-date-picker v-model:value="receive" value-format="YYYY-MM-DD" />
  {{ receive }}
</template>

<script lang='ts'>
import { defineComponent, ref } from "vue";
import dayjs from "dayjs";
export default defineComponent({
  setup() {
    const receive = ref(dayjs());
    return {
      receive,
    };
  },
});
</script>

<style lang='less'>
</style>