set watcher on props of vuejs component - laravel

Question

I have created datepicker vuejs component.
I have set two date picker in page to select start date and end date. So startDate and endDate of one datepicker is depend on value of another. So for that, I need to set watcher on selected value.
It was working fine with VueJS (< 2.3.0) using this.$emit('input', value). But in VueJS (2.4.4), it is not working.
I'm very poor in front-end development. So I got nothing even after spending two days on vuejs. I just come to know that it is just because of vue version > 2.2.6.
If anyone know the solution, it will be realy very much helpful for me.
Here is my code.
DatePicker.vue
<template>
<div class="input-append date form_datetime">
<input size="16" type="text" readonly>
<span class="add-on"><i class="icon-th fa fa-calendar"></i></span>
</div>
</template>
<script>
export default {
twoWay: true,
props: ['slctd', 'startDate', 'endDate'],
mounted: function () {
var self = this;
$(this.$el).datetimepicker({
format: "mm/dd/yyyy",
autoclose: true,
minView: 2,
maxView: 3,
daysShort: true,
initialDate: this.slctd,
startDate: this.startDate,
endDate: this.endDate,
}).on('changeDate', function (ev) {
var value = new Date(ev.date.valueOf()).toString('MM/dd/yyyy');
self.$emit('input', value);
});
},
watch: {
slctd: function (value) {
console.log('watch:value ' + value);
$(this.$el).find("input").val(value);
},
startDate: function (value) {
console.log('watch:start ' + value);
$(this.$el).datetimepicker('setStartDate', value);
},
endDate: function (value) {
console.log('watch:end ' + value);
$(this.$el).datetimepicker('setEndDate', value);
}
},
}
</script>
JS
window.Vue = require('vue');
Vue.component('component-date-picker', require('./components/DatePicker.vue'));
window.app = new Vue({
el: '#app',
data: {
queries: {
start_date: '10/04/2017',
end_date: '10/05/2017',
}
},
});
HTML
<component-date-picker v-bind:end-date="queries.end_date" v-bind:slctd="queries.start_date" v-model="queries.start_date"></component-date-picker>
<component-date-picker v-bind:start-date="queries.start_date" v-bind:slctd="queries.end_date" v-model="queries.end_date"></component-date-picker>
VueJS - 2.2.6 (working)
VueJS - 2.4.4 (not working)
I have also tried this too. But didn't get success
HTML
<component-date-picker v-bind:end-date="queries.end_date" v-bind:slctd="queries.start_date" v-model="queries.start_date" v-on:input="set_start_date"></component-date-picker>
<component-date-picker v-bind:start-date="queries.start_date" v-bind:slctd="queries.end_date" v-model="queries.end_date" v-on:input="set_end_date"></component-date-picker>
JS
methods: {
set_start_date: function(value){
console.log('called');
this.queries.start_date = value;
},
set_end_date: function(value){
this.queries.end_date = value;
},
}
In this code, I method was called and I was getting 'called' in console. But watcher of component not working. It should work as startDate/endDate is changed in these methods. I don't know what is the new working concept of VueJS 2.4.4.
Solved
It was my stupid mistake due to lack of knowledge in front-end. I was re-creating queries object in create method of vue root instance. And in previous code, there was nothing in create so it was working fine.
Here is my mistake
JS
created: function () {
/* my mistake starts */
this.queries = queryString.parse(location.search, {arrayFormat: 'bracket'});
/* my mistake ends */
this.queries.start_date = (this.queries.start_date) ? this.queries.start_date : null;
this.queries.end_date = (this.queries.end_date) ? this.queries.end_date : null;
},