Get help when update data parent component with 1st child component then pass it as prop in another child component

Hi guys,

I’m new to Vuejs so i wasn’t clear if what i’m trying to do is possible, can you guys help me to explain this and tell me are there any other ways to do this. My problem is quite complicated.

First, i have a parent component, in which contained 2 child components. 1st component is a drop-down select component. After choose an object in the 1st child, i will call a function to $emit to parent component with selected object => Parent component have a function to update its object with 1st child returned data then call a function in 2nd child component through $refs within the same parent function. The 2nd child component will use props which is the updated data of parent component which updated through 1st child component action.

The problem is after parent component updated data from 1st child, the 2nd child still can’t use latest data but still call action with the previous data even though i used props in 2nd child to make sure all the data is re-active.

Here is the code, please take a look and show me where did i get it wrong
1st component function:
changeShop()
{
var self = this;
self.$emit(“changeValue”, self.selectedShop);
},


Parent html:

Parent function:
searchResults(shop)
{
var self = this;

    self.selectedShop = shop;
   if(self.$refs.isTracking)
   {
        self.$refs.shiftByCashTracking.getReport();
   }

},

2nd Child component will use props
props: [‘selectedShop’],

then call a function getReport(){}

Using $nextTick should solve your problem. Read more about Async Update Queue in the guide.