vue.js - Vue js sync parent and child data with Vue-Router -

in vuejs application using vue-router routing. working fine except one.

in parent have list view having link below on left side .

<div class="col-md-5"> <ul>     ....     <a v-link="{ name: 'task-detail', params: { taskid: task.id }}">{{ task.title }}</a> </ul> </div>  <div class="col-md-7">   <router-view></router-view> </div> 

when click it, nested route gets activated , display detail view on right side.

now problem in parent view can toggle if task completed or not.

i have label showing if task completed or not in child view.

<label class="label label-success pull-right" v-show="task.is_completed">completed</label> 

how reflect status change on child view when in parent view. need refresh page ? or there simpler solution.

in simpler terms when toggle completion status on parent view label should change on child view.

so vue wants implement 'data down/actions up' pattern. if data loaded in parent (eg collection) , again loaded - separately in child (eg model instance) - have 2 sets of starts same data. when change one, independent of other. so, either need communicate between 2 (which can fiddly), use central data store, both routes access same instance of data (possibly using vuex, if you're inclined), or if have data need in collection, pass downstream with, example: <router-view :task="selectedtask" /> selected task driven $route.params.id in url (as computed property in parent, likely)

for example if task list called 'tasks' in parent, computed property might (in es6 js):

selectedtask () {   return this.tasks.find(t => t.id === this.$route.params.id) } 

this data-down easiest implement, if find you're doing lot, suggest using central data store.