VueJS generating random "whitespace" in list loop - vue.js

Question

I have this weird problem where my v-if loop generates a random whitespace in the DOM. I can also visually see it (see image). You see the whitespace to the left of the upload link. The code used to generate the links are pretty simple, but I cannot find out where the whitespace is coming from. Any ideas? Or am I doing something wrong? I tried to reset the cache also to see if that fixed it, but nope.
<template>
<nav class="navbar">
<ul class="nav">
<li class="nav-item nav-brand">
<router-link class="brand nav-link" :to="{ name: 'home' }">{{ this.$appName }}</router-link>
</li>
<template v-for="(link, index) in links">
<li class="nav-item" :key="index">
<router-link class="nav-link" :to="{ name: link.name }">{{ link.title }}</router-link>
</li>
</template>
</ul>
</nav>
</template>
And here is how I use the template:
<AppNavigation :links="[
{ name: 'upload', title: 'Upload' },
{ name: 'login', title: 'Login' }
]" />
<style lang="scss">
// Import variables and mixins
#use '../../scss/vars';
#use '../../scss/mixins';
.navbar {
height:vars.$headerHeight;
.nav {
margin:0;
padding:0;
list-style:none;
height:inherit;
}
.nav-brand {
.brand {
background:-moz-linear-gradient(-35deg, #33b2d9 0%, #e368f5 100%);
background-size:100% 100%;
transition:background-size .25s ease-in-out!important;
&:hover {
background:-moz-linear-gradient(-35deg, #33b2d9 0%, #e368f5 100%)!important;
background-size:100% 200%!important;
}
}
}
.nav-item {
display:inline-flex;
height:inherit;
.nav-link {
height:100%;
display:flex;
align-items:center;
padding:0 20px;
color:vars.$navLinkColor;
font-size:vars.$navLinkSize;
transition:background .05s ease-in-out;
&:hover {
background:lighten(vars.$navItemBg, 5%);
}
}
}
}
</style>

Answer 1

I reproduced the problem by having a predefined <li> element. Then following that, a v-for on a <li> element. Like this:
<li ...>Test</li>
<li v-for="" ...></li>
The whitespace gets added above the v-for.
Solved it by just adding the brand to the list of links to be rendered, and removing the predefined brand element.