Passing value to Child Component is updating only once - vue.js

Question

In my Vue application, I have a list of months in my parent component like this-
When clicking on any month, I would like to pass its id to the child component named timeComponent. Below is the code.
Parent Component-
<template>
<div class="content container-fluid" id="prayer_time">
<div class="col-md-12">
<div class="card">
<div class="card-header p-2">
<ul class="nav nav-pills">
<li class="nav-item" v-for="(month, index) in months" :key="index">
<a class="nav-link" v-on:click="monthId(index + 1)">
{{ month }}
</a>
</li>
</ul>
</div><!-- /.card-header -->
</div>
<!-- /.card -->
</div>
<div v-if="prayertimeshow">
<timeComponent :month_id=month_id :mosque_id=this.mosque_id />
</div>
</div>
</template>
<script>
import timeComponent from './TimeComponent.vue';
export default {
props: ['mosque_id'],
components: {
timeComponent
},
data(){
return {
month_id: '',
prayertimeshow: '',
months : ['January', 'February', 'March','April','May','June','July','August','September','October','November','December']
}
},
methods:{
monthId(event) {
this.month_id = event;
this.prayertimeshow = true;
}
}
}
</script>
The problem is that when I click on any month for the first time, the month_id value is passed to the child component perfectly.
But it is not working when I click on another month for the second time.
In the child component, I am accessing the prop value like this-
<script>
export default {
props: ['month_id'],
created: function () {
console.log(this.month_id);
}
}
</script>
Is it the correct way to do this?

Answer 1

The issue is that created hook runs only once when the child component has been created.
The better approach to check the updated prop value in the child is to use a watch hook.
You can check the update in month_id like this-
Child Component-
<template>
<div>{{ month_id }}</div>
</template>
<script>
export default {
props: ["month_id"],
watch: {
month_id(newVal, oldVal) {
// newVal = updated month_id
this.getTime(newVal);
},
},
methods: {
getTime(input) {
console.log(input);
},
},
};
</script>