Правильный вариант работы компонента с моделью. Например есть свойство объекта типа дата, необходимо сделать так чтобы компонент делил его на составные части (день, месяц, год) и при изменении которых изменялась бы сама модель :
Vue.component('my-date',{
template: '\
<table>\
<tr>\
<td>day:<input type="text" class="width50" v-model="day" v-on:input="updateValue($event.target.value)" /></td>\
<td>month:<input type="text" class="width50" v-model="month" v-on:input="updateValue($event.target.value)" /></td>\
<td>year:<input type="text" class="width50" v-model="year" v-on:input="updateValue($event.target.value)" /></td>\
</tr>\
</table>',
props:["value"],
data: function () {
return {
day:0,
month:0,
year:0
}
},
mounted: function(){
this.day = moment(this.value).date();
this.month = moment(this.value).month()+1;
this.year = moment(this.value).year();
},
methods: {
updateValue: function(value){
this.$emit('input', moment().year(this.year).month(this.month-1).date(this.day));
}
}
});
new Vue({
el: '#app',
data: {
parentDateModel:moment()
}
})
Пример на codepen.io