Vue custom optional time calendar component

<div class="dateContent-body-day" v-for="item in 42" :key="item">
            <div
              v-if="item - beginDay > 0 && item - beginDay <= nowMdays"
              :class="{
                'active-day': `${year}/${month}/${item - beginDay}` == curDate
              }"
              @click="dayHandler"
              :data-year="year"
              :data-month="month"
              :data-day="item-beginDay"
              :data-dates="year + '/' + month + '/' + (item - beginDay)"
            >
              {{ item-beginDay }}
            </div>
            <div class="other-day" v-else-if="item - beginDay <= 0">
              {{ item - beginDay + prevMdays }}
    </div>
  <div class="other-day" v-else>{{ item - beginDay - nowMdays }}</div>
</div>

//Click to switch day dayHandler(e) {
      console.log(e);
      var daNum = e.target.dataset;
      if (this.cantTime.indexOf(daNum.dates) > -1) {
        this.$toast("Not an open date, cannot be selected");
        return;
      }
      if (
        `${daNum.year}/${daNum.month}/${daNum.day}` >=
        `${new Date().getFullYear()}/${new Date().getMonth() +
          1}/${new Date().getDate()}`
      ) {
        this.date = e.target.dataset.day;
        this.$emit(
          "chooseDate",
          this.year + "/" + this.month + "/" + this.date
        );
      } else {
        this.$toast("Past time cannot be selected");
      }
    },
    //Switch to next month``nextMonth() {
      if (this.month == 12) {
        this.month = 1;
        this.year++;
      } else {
        this.month++;
      }
},

```javascript
watch:
    date(val, oldval) {
      if (val) {
        this.curDate = `${this.year}/${this.month}/${this.date}`;
      }
    },
    month(val, oldval) {
      if (val) {
        var ndate;
        for (var i = 1; i <= 31; i++) {
          console.log(`${this.year}/${this.month}/${i}`);
          if (this.cantTime.indexOf(`${this.year}/${this.month}/${i}`) < 0) {
            console.log("No value exists, stop, date stays at " + i);
            ndate = i;
            break;
          }
        }
        console.log(ndate, `${this.year}/${this.month}/${ndate}`);
        //Compare the current month with the current day. The default for future months is 1, and the default for the current month is today if (
          `${this.year}/${this.month}/1` >
          `${new Date().getFullYear()}/${new Date().getMonth() +
            1}/${new Date().getDate()}`
        ) {
          this.curDate = `${this.year}/${this.month}/${ndate}`;
          this.date = ndate;
        } else {
          for (var i = new Date().getDate(); i <= 31; i++) {
            console.log(2`${this.year}/${this.month}/${i}`);
            if (this.cantTime.indexOf(`${this.year}/${this.month}/${i}`) < 0) {
              this.curDate = `${new Date().getFullYear()}/${new Date().getMonth() +
            1}/${i}`;
          this.date = i;
              break;
            }
          }
        }
        this.$emit(
          "chooseDate",
          this.year + "/" + this.month + "/" + this.date
        );
      }
    }
  },

<calendar :timeArray="timeArray" @chooseDate="chooseHandler"></calendar>
import { calendar ,alertBox} from '@/components/index.js';
export default {
    components:{calendar,alertBox
    },