how to run side effect on value change in Vue.js? - vuejs2

Question

my goal is to run a sideeffect when the "monthIndex" changes. In react I would use a useEffect hook with the dependency, but I am new to vue. I am basically incrementing the "monthIndex" via buttons, which changes the index in the array "daysInMonth". Every time the month index changes it should run the updateCalendar method and render the days of the calendar. That is my goal, thanks!
<template>
<div id="app">
<div class="header">
<div class="controls">
<button v-on:click="prevMonthHandler">prev</button>
<h2>Date</h2>
<button v-on:click="nextMonthHandler">next</button>
</div>
</div>
<div class="weekdays">
<p class="weekday" v-for="(weekday, index) in weekdays" :key="index">
{{ weekday }}
</p>
</div>
<div class="grid">
{{ calendarDays }}
<!-- <div class="day" v-for="(day, index) in calendarDays" :key="index">
{{ day }}
</div> -->
</div>
</div>
</template>
<script>
export default {
name: "App",
mounted() {
this.updateCalendar();
},
data() {
return {
monthIndex: 0,
calendarDays: [],
daysInMonth: [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30],
weekdays: [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
],
};
},
methods: {
updateCalendar() {
for (let i = 0; i < this.daysInMonth[this.monthIndex]; i++) {
this.calendarDays.push(i);
}
},
nextMonthHandler() {
if (this.monthIndex > 12) {
this.monthIndex++;
}
},
prevMonthHandler() {
if (this.monthIndex < 0) {
this.monthIndex--;
}
},
},
};
</script>

Answer 1

You can use watch property to detect changes to a variable.
You can see more functionalities of watch here
watch : {
monthIndex(newVal, oldVal) {
console.log(`Value updated from ${oldVal} to ${newVal}`)
}
}