title: Adding externally handled elements in Vue.js?
body: <p>I found lots of libraries that somehow marry an external library (and their DOM elements) with Vue.js. All of them though seem to only <em>add child elements</em> to the Vue.js-managed DOM node.</p>
  
  <p>I wrote <a href="https://www.npmjs.com/package/vue-stripe-elements" rel="nofollow noreferrer" title="Vue-Stripe-Elements">Vue-Stripe-Elements</a> to make the use of the new Stripe V3 easier but struggled to mount Stripes elements to the Vue component.</p>
  
  <p>The obvious way would be a <code>.vue</code> component like this:</p>
  
  <pre><code>&lt;template&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    // could also be `mounted()`
    beforeMount () {
      const el = Stripe.elements.create('card')
      el.mount(this.$el)
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>This would work if Stripe only adds children to the element it is mounted too but it looks like Stripe instead transcludes or replaces the given DOM node. Stripe of course also doesn't support any <code>VNode</code>s.</p>
  
  <p>My current solution to the problem is to create a real DOM node and add it as a child:</p>
  
  <pre><code>&lt;template&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    mounted () {
      const dom_node = document.createElement('div')
      const el = Stripe.elements.create('card')
      el.mount(dom_node)
      this.$el.appendChild(el)
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>It works but it feels like I'm fighting against Vue.js here and I might create odd side effects here. Or am I just doing what other <em>appending</em> libraries do manually and it is the best way to go?</p>
  
  <p><strong>Is there an "official" way to do this?</strong></p>
  
  <p>Thanks in advance for any helpful comment about it.</p>