Initialize VueJs after opening new tab - vue.js

Question

At the moment I use php to collect data needs to be printed in one pdf and open pdf in new browser tab. The problem is that it generate to much traffic as soon as I've a lot of users and a lot of docs to be printed in a same time. So I'm looking for a way to collect everything in one html, open it in new tab, fill with data from back-end and print it after.
My issue is to initialize VueJS for the new browser tab. I always have the following warning in console:
vue.js:1141 [Vue warn]: Cannot find element: #app
I guess the reason is that VueJS works with SPA. Is there any way to implement my idea?
Here is template for a new tab needs to be opened in a new tab.
<div id="app">
<printing-form v-for="printedForm in printedForms" track-by="id" :printed-form="printedForm"></printing-form>
</div>
<template id="printingForm-template">
Some HTML need to be printed in new tab.
</template>
Below my JS code to init VueJS
var printButton = $('#print-button');
printButton.on('click', function(e) {
e.preventDefault();
printButton.unbind('click');
printButton.css('color', '#008000');
var idNumbers = TopPanel.getArrayOfId();
if (idNumbers == '') {
idNumbers = TopPanel.getIdNumber();
}
var url = window.location.href + '/form';
$.ajax({
url: url,
data: 'id=[' + idNumbers + ']',
success: function(data) {
var newWindow = window.open(url); //Open URL in new tab
var printedIds = $.parseJSON('[' + idNumbers + ']');
printedIds.forEach(function(item, i, arr) {
var printedField = $('#top-row-'+item).find('.table-field-printed');
if (!printedField.hasClass('true-value')) {
printedField.addClass('fa');
printedField.addClass('fa-check');
printedField.addClass('true-value');
}
});
printButton.css('color', '#4f5762');
printButtonInit();
newWindow.onload = function() {
VuePrinting.vueInit(newWindow); //Here I initialize VueJS module
}
},
error: function(xhr, textStatus, errorThrown) {
alert($.parseJSON(xhr.responseText));
printButton.css('color', '#4f5762');
printButtonInit();
},
});
});
}
This separate module for VueJs
var VuePrinting = (function() {
return {
vueInit: function() {
Vue.component('printingForm', {
temlate: newWindow.document.getElementById('printingForm-template')
});
var vm = new Vue({
el: newWindow.document.getElementById('app'),
data: {
printedForms: [
{ obj1 },
{ obj3 },
{ obj3 }
]
}
});
}
}
})();
UPDATE: I've corrected my code after RoyJ comment, so now it works correct. Only one note... template should also be changed from selector to:
newWindow.document.getElementById('printingForm-template')

Answer 1

When you specify a selector for your el, Vue will look in the current document for it. The new tab will not be part of the current document.
Save a reference when you open the tab. Write the HTML into its document. Query the #app out of the document, and use the actual element instead of a selector in your Vue setup:
var vm = new Vue({
el: newWindow.document.getElementById('app')
});