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.