String template vs DOM template

We use a templating engine (handlebars) along with Vue JS 2. There are two ways in which we can pass template to Vue components

  1. Include the template in the main HTML that gets loaded on page load. Then use document.querySelector and inner HTML to get the template and pass it into template property

  2. Use the compiled version of handlebars template to generate a string that can be passed to the Vue component template property. The compiled version is literally a JS function that would return HTML code as string when executed.

Which is the best approach? Which is more performant ?