Improve a vue.js + Firestore app

Hey, I have an app with vue.js working with Firestore database.
In this app, we have an appointment booking plugin, but the config data (spot durations, available day, choosen service) are not from Firestore yet.
In Firestore, for each day we have this value stored :
- isOpen : true or false (depends if we are open or closed this day)
- OpeningHour : 8 (Morning)
- ClosingHour : 12 (Morning)
- OpeningHour1 : 14 (Afternoon)
- OpeningHour2 : 20 (Afternoon)

We also have this value (only one, not for each day) :
- Spot Duration : 30 (minutes)

What we want to do :
- Based on the opening Hour and spot duration, create a time array for each day stored in firestore
- If we change the spot duration, the arrays should update automatically
- If the day is closed, we should not be able to book an appointment (but we can now)
- If an appointment is booked : make the spot unavailable

Optional :
- We want to add a provider selector field (providers should be stored in database too, with name value)
- We want to add a time duration for each services

We use this plugin :
https://github.com/ibonkonesa/barber-shop

current script :
<script>
import Datepicker from "vuejs-datepicker";
export default {
name: "MeetingSelector",
components: {
Datepicker,
},
data() {
return {
date: new Date(),
times: [
"08: 00",
"8: 30",
"09: 00",
"09: 30",
"10: 00",
"10: 30",
"11: 00",
"11: 30",
"13: 00",
"13: 30",
"14: 00",
"14: 30",
"15: 00",
"15: 30",
"16: 00",
"16: 30",
"17: 00",
"17: 30",
"18: 00",
"18: 30",
"19: 00",
"19: 30",
],
selectedTime: "",
};
},
methods: {
onSelectTime(time) {
this.selectedTime = time;
const dateTime = `${this.date.toISOString().split("T")[0]} ${
this.selectedTime
}`;
this.$emit("select-date-time", dateTime);
},
},
};
</script>