title: Append bootstrap-vue modal to app template
body: <p>I use <a href="https://bootstrap-vue.js.org/docs/components/modal/" rel="noreferrer"><strong>bootstrap-vue modal</strong></a>:</p>
  
  <p>In my project <a href="https://codesandbox.io/s/vue-template-cfp1b?fontsize=14" rel="noreferrer"><strong>codesandbox</strong></a>:</p>
  
  <p><strong>Template:</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;b-button variant="link" class="btn-remove" @click="removeItemFromOrder(index)"&gt;
      Remove item
    &lt;/b-button&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p><strong>Script generating modal with custom content:</strong> </p>
  
  <pre><code>&lt;script&gt;
  export default {
    name: "HelloWorld",
    methods: {
      removeItemFromOrder: async function (position) {
          let self = this
  
          const h = this.$createElement
  
          const titleVNode = h('div', { domProps: { innerHTML: '&lt;h2&gt;Remove this item?&lt;/h2&gt;' } })
  
          const messageVNode = h('div', { class: ['modal-complete'] }, [
  
            h('div', {
              domProps: {
                innerHTML:  '&lt;h2&gt;Remove this item?&lt;/h2&gt;'+
                            '&lt;span class="popup-meta"&gt;'+
                              'Are you sure you want to remove this item?'+
                            '&lt;/span&gt;'
              }
            })
          ])
  
  
          this.$bvModal.msgBoxConfirm([messageVNode], {
            title: [],
            centered: true,
            modalClass: 'success-popup',
            hideHeader:true,
            footerClass: 'd-flex justify-content-center align-items-center',
            cancelVariant: 'outline-danger',
            okVariant: 'danger',
            okTitle: 'YES',
            cancelTitle: 'NO',
            ststic: false
          })
            .then(async function (result) {
              if (result) {
                self.currentOrder.items.splice(position, 1)
                await self.sync()
              }
            })
            .catch(err =&gt; {
              // An error occurred
            })
        },
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>Now bootstrap modal after open append to <code>body</code>. So, that's why I have a <strong>quastion</strong>:</p>
  
  <p>How I can append bootstrap-vue modal to <code>#app</code> or another template\ tag?</p>
  
  <p><strong>P.S:</strong> only for <code>this.$bvModal.msgBoxConfirm</code> with <code>then</code> ... So as not to create unnecessary methods ... 
  due to amount of popups with diffetent logic </p>