Javascript Vue.js-如何在V-Calendar中仅设置可用日期？

我正在使用V-Calendar和Vue.js打印显示可用日期的日历

我的代码：

<v-date-picker
    v-model="date"
    :value="null"
    color="red"
    is-inline
    :available-dates='[
        {start: new Date(2020, 06, 28),end: new Date(2020, 06, 28)},
        {start: new Date(2020, 06, 30),end: new Date(2020, 06, 30)}
    ]'
/>

脚本：

<script>
    var app = new Vue({
        el: "#div",
        data: {
            dates: [],
        },
        watch: {
            result: function () {
                app.result.forEach(function(item, index){
                    let formatedDate = moment(item.date).format('YYYY-MM-DD');
                    if(!app.dates.includes(formatedDate)){
                        app.dates.push(formatedDate)
                    }
                });
            }
        }
    });
</script>

这只允许我选择这两个日期，但是如何在javascript而不是html中设置这些值呢？我想从API加载数据，这个值不应该在html中列出

API的回复：[2020-09-012020-09-022020-09-032020-09-042020-09-052020-09-062020-09-07]

---

链接到日历：

尝试映射API响应，然后将dates属性绑定到available dates属性，如：

:available-dates='dates'

---

您的API响应看起来如何？请提供脚本的相关部分。我还需要返回该数据的脚本。确定，您的回答是指可用日期，以便只选择该日期的开始和结束日期？只选择这几天。如果您只想要2020-09-01和2020-09-07，则示例中应提供Rest？

if(!app.dates.find(date=>new Date(date).getTime()===new Date(formatedDate).getTime())){
  app.dates.push(  {start: new Date(formatedDate),end: new Date(formatedDate)})
}