Vue.js: Using Pre-completed Templates without "Root"-Element

This is my Setup:

• Existing Frontend-Application (with a lot of jQuery)
• Vue.js 2.5 with Webpack and vue-loader
• Some environment that have CSP restrictions

To transform the app step by step I started creating a frist Single File Component and add them a few times to the existing HTML. Because I have an existing Server-Side-Template-rendering I cannot add a wrapper and move all the html in a Vue Template.

I simply add my new custom elements to existing HTML and want Vue.js to replace them after Document.ready and "inject" the logic.

So I have these 2 Problems:

• Mounting all appearances of my new element in the DOM
• Using Pre-Rendered template functions to avoid CSP-Problems

So i ended up building this (for my new custom element ):

import Vue from 'vue';
import ProductFavorite from './ProductFavorite/ProductFavorite.vue';

const toCamelCase = (string) => string.replace(/-([a-z])/g, g => g[1].toUpperCase());

const modulesToMount = [
  {
    domSelector: 'product-favorite',
    vueModule: ProductFavorite
  }
];


// For all Modules
modulesToMount.forEach(module => {

  // For each appear of the element in de DOM
  document.querySelectorAll(module.domSelector).forEach(e => {

    // Create Props-Object from HTML
    const bindProps = {};
    for (let i = 0; i < e.attributes.length; i++) {
      bindProps[toCamelCase(e.attributes[i].name)] = e.attributes[i].value;
    }

    // Init the Module
    new Vue({
      el: e,
      render: h => h(module.vueModule, { props: bindProps })
    });
  });

});

I'm feeling like implementing things again Vue.js already has (like creating props out of html-nodes or finding all elements to bind).

Is there any other way for dealing with this Problem?