title: Vuejs update a list in reactive manner
body: <p>I've two components
  1. <code>viewAndUpdateDish.vue</code>
  2. <code>updateDish.vue</code></p>
  
  <p>In <code>viewAndUpdateDish</code>,</p>
  
  <ol>
  <li>user pick a restaurant from the drop down</li>
  <li>dishes of that particular restaurant will filter out and loaded to the table.</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/lIKqr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lIKqr.png" alt="enter image description here"></a> </p>
  
  <ol start="3">
  <li>then the user hit the update button on a dish and go to <code>updateDish.vue</code> component and update the dish.</li>
  <li>then after he update the dish user is redirected to the <code>viewAndUpdateDish</code></li>
  </ol>
  
  <p>When the user redirected to the <code>viewAndUpdateDish</code> that previously selected restaurant should be selected and dishes should loaded. This is my use case.</p>
  
  <p>What I did so far is,</p>
  
  <ol>
  <li>create a variable called pickedRestaurantId in vuex store and when user select a restaurant I updated that Id.</li>
  <li>And in the updateDish component at the end of the update function, I emit a event like this, <code>this.$root.$emit("clickedUpdate");</code></li>
  <li><p>And then in the viewAndUpdateDish compoent I did </p>
  
  <pre><code>mounted() {
   this.$root.$on("clickedSomething", () =&gt; {
   this.loadDishes(this.pickedResViewAndUpdateDish);
  });
  },
  </code></pre></li>
  </ol>
  
  <p>But this doesn't seems work!
  How do I achieve this using vuejs?
  Hope my question is clear to you.</p>