Adding html to Vue component template breaks it - vue.js

Question

I am using the following code as a Vue component in order to register it in the root component.
const RegisterForm = {
data() {
return {
test: 'bonjour',
user: {
email: '',
firstName: 'test',
lastName: '',
password: '',
passwordConfirm: '',
terms: false,
receiveUpdates: false
}
};
},
methods: {
handleSubmit() {
const data = this.user;
if (!isFormValid()) {
return;
}
},
template: `
<div>
<form class="flex flex-col mt-2" #submit.prevent="handleSubmit()">
<label class="text-xs block mt-6 mb-3" for="firstName">
First Name
</label>
<input v-model="user.firstName" required type="text" class="text-register border-b focus:border-pink font-MuseoSans-medium outline-none pb-4 text-lg focus:outline-none w-full" name="firstName" id="firstName" value="">
<label class="text-xs block mt-6 mb-3" for="lastName">
Last Name
</label>
<input v-model="user.lastName" required type="text" class="text-register border-b focus:border-pink font-MuseoSans-medium outline-none pb-4 text-lg focus:outline-none w-full" name="lastName" id="lastName" value="">
<label class="text-xs block mt-6 mb-3" for="emailAdress">
Email Address
</label>
<input v-model="user.email"required type="text" class="text-register border-b focus:border-pink font-MuseoSans-medium outline-none pb-4 text-lg focus:outline-none w-full" name="emailAdress" id="emailAdress" value="">
<label class="text-xs block mt-6 mb-3" for="password">
Password
</label>
<input v-model="user.password" placeholder="Set password for your account" required type="password" class="text-register border-b focus:border-pink font-MuseoSans-medium outline-none pb-4 text-lg focus:outline-none w-full" name="password" id="password" value="">
<label for="confirmTerms" class="cursor-pointer select-none flex items-start mt-8 mb-3 text-xs leading-none">
<input v-model="user.terms" type="checkbox" name="confirmTerms" id="confirmTerms" checked class="mr-3 inline-block">
<span class="flex-auto leading-normal -mt-1">Check this box to agree to our <a class="texspt-pink no-underline" href="#">Terms of Use</a>, <a class="text-pink no-underline" href="#">Privacy Policy</a> and consent to us storing your name and email address as highlighted in our <a class="text-pink no-underline" href="#">GDPR compliance</a>.</span>
</label>
<label for="receiveUpdates" class="cursor-pointer select-none flex items-start mt-2 mb-8 text-xs leading-none">
<input v-model="user.receiveUpdates" type="checkbox" name="receiveUpdates" id="receiveUpdates" class="mr-3 inline-block">
<span class="flex-auto leading-normal -mt-1">We would like to send you emails with tips to help you get started and details on new features.</span>
</label>
<button type="submit" class="bg-pink hover:bg-pink-dark flex-none text-white px-4 py-6 rounded text-lg font-MuseoSans-medium" name="button">Sign up</button>
</form>
</div>
`
};
This renders fine and works as a form, however I have been trying to add an error section to the top. When ever I add any HTML to the top of this template code (i.e. between the <div> and the <form>) it breaks the whole thing and it doesn't render.

Answer 1

This is because you have an end label tag which has no start tag.
<div>
<form class="flex flex-col mt-2" #submit.prevent="handleSubmit()">
<label class="text-xs block mt-6 mb-3" for="firstName">First Name</label>
<input v-model="user.firstName" required type="text" class="[...]" name="firstName" id="firstName" value="">
<label class="text-xs block mt-6 mb-3" for="firstName">Last Name</label>
<input v-model="user.lastName" required type="text" class="[...]" name="lastName" id="lastName" value="">
<label class="text-xs block mt-6 mb-3" for="emailAdress">Email Adress</label>
<input v-model="user.email"required type="text" class="[...]" name="emailAdress" id="emailAdress" value="">
<label class="text-xs block mt-6 mb-3" for="password">Password</label>
<input v-model="user.password" placeholder="[...]" required type="password" class="[...]" name="password" id="password" value="">
<input v-model="user.receiveUpdates" type="checkbox" name="receiveUpdates" id="receiveUpdates" class="mr-3 inline-block">
<span class="flex-auto leading-normal -mt-1">[...]</span>
</label <!-- Just here -->
<button type="submit" class="[...]" name="button">Sign up</button>
</form>
</div>