Create dynamic components

I have a doubt on how to create dynamic components, and not by the label <component :is=''>, if not, this component does not exist in the DOM, and through javascript insert it.

As in jquery add a $("body").append("<div class="modal"></div>"), to add a new modal

Example: https://jsfiddle.net/yu9oca2n/
Code: https://codesandbox.io/embed/vue-template-5cx5l?fontsize=14

code example JQuery

<button id="button">add input tag</button>

$("#button").click(function() {
	$("body").append("<div class="modal"></div>");
});

Component parent

<template>
  <div>
    <p>Hola</p>
    <hr>
    <a @click="insertModal">Insert Modal</a>
    <hr>

    <modal num="1"></modal>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {},
  methods: {
    insertModal() {
      /**
       * How to do so that when you enter here,
       * add one more modal, without putting this in a list,
       * because this modal can be called from anywhere on the web
       *
       * MODAL : <modal num="_x_" @clickEvent="eventClick"></modal>
       */
      // ??
    }
  },
  eventClick() {
    /** modal event click */
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

Component modal

<template>
  <div>MODAL {{num}}</div>
</template>

<script>
export default {
  name: "modal",
  props: ["num"],

  data: function() {
    return {};
  },

  methods: {}
};
</script>

Please, your question is not clear