I have a problem. I'm doing a software project for university but they want us to use python. Front end in javascript is allowed though and since this is a special course for non CompSci people or programmers even I decided to use the CDN version of vue and vue-router to avoid npm, node, etc to make it easier for them.

So now I have my routes defined like this in index.html inside a script tag defined below everything,

<script src="views/dashboard/dashboard.js"></script>
<script src="views/input/input.js"></script>
<script src="views/info/info.js"></script>
<script src="views/settings/settings.js"></script>

const routes = [
{ path: '/', component: Dashboard },
{ path: '/input', component: Inputpage },
{ path: '/info', component: Infopage },
{ path: '/settings', component: Settingspage },
{ path: '/index.html', redirect: '/' } //default route. Leave this as such to
];

and Dashboard/Inputpage/.. etc are .js files I import. Info.js looks like this for example

var Infopage = {
template: '<h1>This page is for information</h1>'
};

And that displays just fine. However, when I add anything else like a p or something simpler like a second heading, a paragraph or an input, nothing happens. What can I do to have it display more than just a heading?

EDIT 1: I tried

var Infopage = {
    template:`<div id='info_page'>
                    <h1>This page is for information</h1>
                </div>`
};

And now I get the error [Vue warn]: Error in nextTick: "InvalidCharacterError: String contains an invalid character".