在我的Vue应用程序中，我的父组件中有一个月份列表，如下所示-

当点击任何月份时，我想把它的id传递给名为timeComponent的子组件。

父组件-

<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>

问题是，当我第一次点击任何月份时，month_id值会完美地传递给子组件，但当我第二次点击另一个月份时，它就不起作用了。
在子组件中，我访问prop值，如下所示-

<script>     
       export default {         
            props: ['month_id'],         
            created: function () {
              console.log(this.month_id);  
            }    
       }
 
</script>

这样做正确吗？