How to reactively change the number of months in a calendar?

[atach]

I want to change the number of displayed months depending on the size of the screen. I change the "calendarsCount" property conditionally, but the calendar is not redrawn. How can this be done?

<FunctionalCalendar
            class="event-calendar"
            :calendarsCount="calendarCount"
        ></FunctionalCalendar>

export default {
    data() {
        return {
            calendarCount: 2
        }
    },
    methods: {
        updateWidth() {
            this.calendarCount = (window.innerWidth > 768) ? 2 : 1;
        }
    }
}
</script>

[TitanFighter]

Add v-if="showCalendar":

<FunctionalCalendar v-if="showCalendar" ... />

and when you need to redraw do it like:

this.showCalendar = false
this.$nextTick(() => {
  this.showCalendar = true
})

[atach]

Thank you