Why is my data not changing?

Question

Vue.js

I have such a problem that the class or variable this.selected should change and everything changes in data, but for some reason in the template it says that there is a constant false. Who can tell what's wrong. https://pyvjxxnnvj.codesandbox.io/#/
The code itself can be large in the sandbox https://codesandbox.io/s/pyvjxxnnvj
but here

example

<template>
  <div class="calendar">
    <div class="calendar-header bold">
      <i class="material-icons" @click="prevMonth">keyboard_arrow_left</i>
      {{ getFullMonth }}
      <i class="material-icons" @click="nextMonth">keyboard_arrow_right</i>
    </div>
    <div class="calendar-body">
      <div class="week bold">
        <div class="dayOfWeek">ПН</div>
        <div class="dayOfWeek">ВТ</div>
        <div class="dayOfWeek">СР</div>
        <div class="dayOfWeek">ЧТ</div>
        <div class="dayOfWeek">ПТ</div>
        <div class="dayOfWeek">СБ</div>
        <div class="dayOfWeek">ВС</div>
      </div>
      <div class="week" v-for="date in getDate">
        <div
          v-for="item in date"
          :ref="`${year}-${month}-${item.date}`"
          :class="{ 'week-day': true, 'active-day': selected[item.date] }"
          @click="onSelect(item.date);"
        >
          {{ selected[item.date] }}
          <span :class="{ active: item.today }">{{ item.date }}</span>
          <div v-for="shedule in item.shedule" class="week-day_time">
            {{ shedule }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import calendarDate from "../class/calendar";
import moment from "moment";
import dateCalendar from "../data/date_calendar.json";
import axios from "axios";

export default {
  name: "full-calendar",
  data() {
    return {
      year: null,
      month: null,
      shedules: [],
      selected: []
    };
  },
  computed: {
    getFullMonth() {
      let date = dateCalendar.month[this.month];
      return `${date} ${this.year} г.`;
    },
    getDate() {
      let dataCalendar = new calendarDate(
        this.year,
        this.month
      ).getCalendarWeek();
      let dateMonthCalendar = null;
      let arrRes = [];
      for (let i = 0; i < this.shedules.length; i++) {
        let shedule = this.shedules[i];
        let dateStart = moment(shedule.start);
        let dateEnd = moment(shedule.end);
        if (dateStart.month() === this.month) {
          for (let n = 0; n < dataCalendar.length; n++) {
            for (let key in dataCalendar[n]) {
              arrRes[dateStart.date()] = arrRes[dateStart.date()] || [];
              if (dataCalendar[n][key].date === parseInt(dateStart.date())) {
                dateMonthCalendar = dataCalendar[n][key];
                arrRes[dateStart.date()].push(
                  `${dateStart.format("HH:mm")}-${dateEnd.format("HH-mm")}`
                );
              }
            }
          }
          dateMonthCalendar.shedule = arrRes[dateStart.date()];
        }
      }
      return dataCalendar;
    }
  },
  methods: {
    nextMonth() {
      let month = `${this.year}-${this.month + 1}`;
      let next = moment(month, "YYYY-MM").add(1, "month");
      this.month = next.month();
      this.year = next.year();
    },
    prevMonth() {
      let month = `${this.year}-${this.month + 1}`;
      let next = moment(month, "YYYY-MM").add(-1, "month");
      this.month = next.month();
      this.year = next.year();
    },
    onSelect(day) {
      console.log(this.selected);
      this.selected[day] = !this.selected[day];
    }
  },
  created() {
    let date = moment();
    this.year = date.year();
    this.month = date.month();
    for (
      let i = 1;
      i < moment(`${this.year}-${this.month + 1}`, "YYYY-MM").daysInMonth() + 1;
      i++
    ) {
      this.selected[i] = false;
    }
    axios.get("../data/data_shift.json").then(res => {
      this.shedules = res.data;
    });
  }
};
</script>

<style lang="scss">
.calendar {
  .calendar-header {
    display: flex;
    align-items: center;
  }
  .calendar-body {
    display: flex;
    flex-direction: column;
    .week {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      .dayOfWeek {
        text-align: center;
        height: 35px;
        line-height: 35px;
      }
      div {
        display: inline-block;
        text-align: right;
        width: 14%;
        border: 1px solid #e6e6e6;
        height: 100px;
        span {
          padding-right: 5px;
        }
      }
    }
  }
}
</style>

Answer 1

Firstly, you clearly have selected an object, not an array, so in data we change the line
selected: []
to
selected: {}
Secondly, vue cannot track data that is not originally in data and you need to explicitly indicate that we we change them, so in the onSelect method we change the line
this.selected[day] = !this.selected[day];
on
this.$set(this.selected, day, !this.selected[day]);
https://ru.vuejs.org/v2/api/#vm-set