Vue.js - How to set only available dates in V-Calendar?

I'm using the V-Calendar and Vue.js for printing a calendar showing the available dates.

My code:

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

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

This only allow me to select these two dates, but how can I set these values inside the javascript and not the html? I want to load data from API, and this values should not be listed inside the html?

Response from API: [ "2020-09-01", "2020-09-02", "2020-09-03", "2020-09-04", "2020-09-05", "2020-09-06", "2020-09-07" ]

Link to calendar: https://vcalendar.io

Try to map the API response, then bind dates property to available-dates prop like :

:available-dates='dates'

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