Vuejs 3 как присвоение элементам класса в массиве

Доброе время суток, пытаюсь сделать календарь со слотами времени для записи. Имеет json ответ axios с датами и слотами:

{
    "text": "02 May \u2014 15 May",
    "results": [{
        "date": "2022-05-02",
        "day": "2",
        "toDay": true,
        "availability": false,
        "slots": [{
            "time": "10:30",
            "time": "11:30",
            "time": "12:00"
        }]
    }, ...
]}

Компонент Vue js выглядит следуюшим образом

<template>
    <div class="calendar">
        <div class="text-sm">{{ text }}</div>
        <div class="grid grid-cols-7 gap-2 mb-5">
            <div v-for="day in daysWeek" class="text-xs p-3">{{ day }}</div>
            <button type="button" v-for="(date, index) in dates" v-on:click="openSlots(index)" :class="dateActive===index ? 'bg-sky-600 text-white' : 'bg-sky-50 text-sky-700'" class="relative p-3 text-xs rounded font-semibold hover:ring-4 focus:ring-4 ring-sky-100 transition duration-130">
                <span v-if="date.toDay" class="flex absolute h-2.5 w-2.5 top-0 right-0 -mt-1 -mr-1">
                    <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-red-500"></span>
                </span>
                <time>{{ date.day }}</time>
            </button>
        </div>
        <!-- <p class="text-slate-400 mb-5 text-sm">Выберите время 30 апреля</p> -->
        <div v-if="slots" class="grid grid-cols-5 md:gap-2.5 gap-1.5">
            <button v-for="(slot, index) in slots" type="button" class="bg-sky-600 text-sm hover:bg-sky-500 focus:ring-4 ring-sky-200 p-2 rounded text-white">
                <time>{{ slot.time }}</time>
            </button>
        </div>
    </div>
</template>

<script>
export default {
    props: {
      resultId: String,
      addressId: String,
      context: String
    },
    data() {
        return {
            text: '',
            dateActive: '',
            daysWeek: [
              'пн',
              'вт',
              'ср',
              'чт',
              'пт',
              'сб',
              'вс',
            ],
            dates: null,
            slots: null
        };
    },
    methods: {
        openSlots(index) {
            this.slots = this.data.results[index].slots;

            this.dateActive = index;
        }
    },
    mounted() {
        axios.get('/api/doctor/calendar', { params: { resultId: this.resultId } })
        .then(response => {
            this.data = response.data

            this.dates = this.data.results

            this.text = this.data.text

            const toDay = this.data.results.findIndex(el => el.toDay === true);

            this.openSlots(toDay);
        });
    },
}
</script>

Беда в том что каждая дата может быть доступна или не достуана в json за это отвичает параметр "availability": false... Вопрос как сделать даты которые недоступны другим классом и с атрибутом button disabled? И если что то заметите не то в коде, буду очень признателен за подсказку