In public/index.html there is a <div id="app"></div>

And then once again in src/App.vue

When the app is rendered to the browser there are now two div elements of the same id which is not HTML5 compliant code. I end up with:

<div id="app" data-v-app="">
<div id="app">
<!-- router content here -->
</div>
</div>

Why is this so and how can we change it so that the ids are unique for each div.