title: Access dynamic child component
body: <p>How do I access my subcomponent? For example my parent component has the following 'dynamic' component (the component changes all the time at runtime).</p>
  
  <pre><code>&lt;template&gt;
    &lt;!-- The below component count be Component1 or Component2, etc. --&gt;
    &lt;component id="my-cmp" v-if="templateComponent" :is="templateComponent"&gt;&lt;/component&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>How can I access <code>myCmp</code> to call a function...<code>this.myCmp.doSomething()</code> doesn't work. Please note using emit here isn't a solution because emit will call <code>doSomething()</code> on all 'dynamic' components not just the current one.</p>
  
  <p>Below is an example of my usage:</p>
  
  <pre><code>&lt;template&gt;
    &lt;!-- The below component count be Component1 or Component2, etc. --&gt;
    &lt;component id="my-cmp" v-if="templateComponent" :is="templateComponent"&gt;&lt;/component&gt;
  &lt;/template&gt;
  
  &lt;script type="text/javascript"&gt;
  export default {
  
    components: {
      'cmp1': Component1,
      'cmp2': Component1,
    },
  
    computed: {
      templateComponent() {
        // ...some logic that will determine if to use/chage to Component1 or Component2
        return 'cmp1'
      },
    },
  
    methods: {
      someTrigger() {
        // how can I reference #my-cmp?
        // For the purpose of; myCmp.doSomething()
  
        // I have tried the below technique BUT this will call doSomething 
        // on BOTH components not just the current/visible one
  
        this.$emit('doSomethingNow') // Component1 and Component2 register using this.$parent.$on('doSomethingNow', this.doSomething)
      }
    }
  }
  &lt;/script&gt;
  </code></pre>