Modal com problemas na estilização e elementos

Salve, Luciano!

Então, no seu componente BarraLateral.vue, a sessão de estilos não está scoped:

<style>
header {
  padding: 1rem;
  background: #0d3b66;
  width: 100%;
  height: 100vh;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  header {
    padding: 2.5rem;
    height: auto;
  }
}
.panel li {
    margin: 8px 0;
}
.link {
    color: #fff;
}
.link:hover {
    color: #FAF0CA;
}
.link.router-link-active {
    color: #FAF0CA;
}
</style>

Assim, o estilo aplicado para a tag header está vazando. Isso faz com que ela fique com 100vh de altura:

header {
  padding: 1rem;
  background: #0d3b66;
  width: 100%;
  height: 100vh; /* esse carinha aqui */
  text-align: center;
}

Basta você alterar para <style scoped> no BarraLateral.vue que tudo funciona conforme o esperado ;)

Bons estudos!