Vue.js dynamic components - passing data
<p>I'm new to Vue.js. I followed the tutorial here - <a href="https://coligo.io/dynamic-components-in-vuejs/" rel="nofollow noreferrer">https://coligo.io/dynamic-components-in-vuejs/</a> - on dynamic components, to give me a dynamic layout I liked, for listing products and allowing the user to switch to an edit view when they click on one of the products in the table. So, I have a 'list-products' component and an 'edit-product' component, and which one is displayed is dependent on the state of 'currentView' in the main Vue instance.</p>

<pre><code>&lt;div id="content"&gt;
  &lt;keep-alive&gt;
    &lt;component :is="currentView"&gt;&lt;/component&gt;
  &lt;/keep-alive&gt;
&lt;/div&gt;
</code></pre>

<p>The switching is all working fine when currentView is changed. What I haven't got figured out is how best to pass the product information to the edit component such that it ends up as data. I suppose the list and edit components are two sibling components of the main Vue instance, instantiated at the same time. What I need to do is when I click on a row in listing table, have the product object used for building that row made available to the edit component. I'm not sure how I do that (at least, in a proper Vue way). When the displayed component is switched (via the change in 'currentView'), is some event called for the newly (re)displayed component? If so, I could presumably call some function?</p>

<p>LATER: I have determined that the 'activated' hook is called when I switch to the edit-product component, which I imagine I should be able to use somehow. Now to figure that out. </p>