Is there any way to change props value of a Vue Component from method?

Question

I'm using two "vuejs-datepicker" components in my Vue when i click on of the datepicker which is been named as a "activityFrom" and select the date upon the closing the datepicker I'm triggering the component defined function "@selected" where am I need to the change the props of second datepicker "activityTo" which is disabledDates props.

This is my first component

<datepicker  @selected="changeNextDate" v-model="$v.fields.activityFrom.$model" :disabledDates="disabledDates" ></datepicker>

And this is my second component

<datepicker ref="activityTo" v-model="$v.fields.activityTo.$model" :disabledDates="disabledDates" ></datepicker>

This is my code

<script>
import Datepicker from 'vuejs-datepicker';     
import moment from 'moment'; 
export default {
    name:'Home',
    data(){
        return{
            fields:{
                destination:'',
                activityFrom:'',
                activityTo:'',
            },
            disabledDates:{
                to: new Date((new Date().getTime()+(2*24*60*60*1000)) -  8640000)
            },
            disabledDates2:{
              to: new Date((new Date().getTime()+(3*24*60*60*1000)) -  8640000)
            }

        }
    },
    components:{
        Datepicker
    },
    methods:{
       customFormatter(date) {
          return moment(date).format('MM/DD/YYYY');
       },
        changeNextDate(event){
            console.log('Date has been seleced');
            this.$refs.activityTo.disabledDates = disabledDates2;
       }
    }
}
</script> 

But when i tried to change the props from method it is sending me the following error

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "disabledDates"

Is there any solution for changing the props becasue i really do change the second element upon clicking on the function of first element. Please tell me how to fix this.

Answer 1

You don't need to access this.$refs.activityTo in order to update the props for your second component. Since the props are being passed down from your parent you can just update them there, e.g.:

changeNextDate(event){
  this.disabledDates = this.disabledDates2;
}

Also I'm not sure why you're using that v-model syntax; I've never seen that before and I don't think it should be necessary. You can just do it like this: v-model="fields.activityFrom" and v-model="fields.activityTo".