<div id="app">
  <select v-model="selectedMonth">
    <option v-for="(month, index) in months"
            :value="index">{{ month }}</option>
  </select>
  <select v-model="selectedYear">
    <option v-for="year in years"
            :value="year">{{ year }}</option>
  </select>
  <h1>{{ daysInMonth }}</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;
  grid-column: 1 / -1;
}

const app = Vue.createApp({
  data: function () {
    return {
      months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      years: [2021, 2022, 2023, 2024, 2025],
      selectedMonth: 0,
      selectedYear: 2021
    }
  },
  computed: {
    daysInMonth: function () {
      return new Date(this.selectedYear, this.selectedMonth + 1, 0).getDate()
    }
  }
})

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