I am trying to pass a dynamic component (ChildA) to another component (ChildB) and then append the ChildA component to the dom from ChildB via jquery.. Is there any way to make this work? I know this is not not the best solution but the real case is much more complicated and i think the easiest way would be if i got this to work.

Parent

<template>
  <ChildB :component="component" />
</template>
import ChildA from './ChildA.vue';
<script>
export default {
  data() {
    return { component: ChildA } 
  };
</script>

ChildA

<template>
  <div>
    <h3>I am Child A</h3>
  </div>
</template>

<script>
export default {}
</script>

ChildB

<template>
  <div>
    <div id="child"></div>
  </div>
</template>

<script>
export default {
  props: ['component'],
  mounted() {
  $('#child').append(this.component);
  }
}
</script>