title: Multiple Vue.js components with same Vuex store
body: <p>In component 1, there is some data being loaded using async method and stored in Vuex store. Same store is being used by other component 2 and data must be  cleared when the user navigates from component 1 to component 2.</p>
  
  <p>Below is the normal workflow which is working fine.</p>
  
  <ol>
  <li>Component 1 - load data completed (async, await)</li>
  <li>User navigates to Component 2</li>
  <li>Component 1 data is cleared in deactivated event</li>
  <li>Component 2 is displayed fine</li>
  </ol>
  
  <p>Now, when the user opens the component 1 and quickly navigates to the component 2.</p>
  
  <ol>
  <li>Component 1 - <strong>data request initiated but data is not loaded yet</strong> </li>
  <li>User navigates to Component 2</li>
  <li>Component 1 data is cleared in deactivated event</li>
  <li>Component 1 async operation completed and data is loaded into the state now</li>
  <li>Component 2 will display data meant for Component 1</li>
  </ol>