<div id="app">
  <select v-model="selectedMonth">
    <option v-for="(month, index) in months"
            :value="index + 1">{{ month }}</option>
  </select>
  <select v-model="selectedYear">
    <option v-for="year in years"
            :value="year">{{ year }}</option>
  </select>
  <h1>{{ dayOfWeek }}</h1>
  <h1>{{ dayOfWeekName }}</h1>
  
  <h1>{{ startWithSunday }}</h1>
  <h1>{{ dayOfWeekName }}</h1>
</div>

html, body {
  display: grid;
  justify-content: center;
  align-content: center;
  height: 100%;
}

#app {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: 1fr 1fr;
}

h1 {
  text-align: center;
}

const DateTime = luxon.DateTime
const Info = luxon.Info

const app = Vue.createApp({
  data: function () {
    return {
      months: Info.months(),
      years: [2021, 2022, 2023, 2024, 2025],
      selectedMonth: 8,
      selectedYear: 2021
    }
  },
  computed: {
    dayOfWeek: function () {
      return DateTime.local(this.selectedYear, this.selectedMonth).weekday
    },
    startWithSunday: function () {
      const date = DateTime.local(this.selectedYear, this.selectedMonth)
      return date.weekday === 7 ? 0 : date.weekday
    },
    dayOfWeekName: function () {
      return DateTime.local(this.selectedYear, this.selectedMonth).weekdayLong
    }
  }
})

const vm = app.mount('#app')