How to make website header in vue-click?

Question

Vue.js

Hello. I want to make a website header for vue. But the problem is that I will have a site with authentication. If the user is not logged in, then there will be fields: Login and Create an account. And if he entered the site, then Profile, News, etc.

Here is what I did:

//App.vue
<template>
  <div id="app">
  <header-view />
  <content-view />
  <footer-view />
  </div>
</template>

<script>
import Header from './components/Header.vue'
import Content from './components/Content.vue'
import Footer from './components/Footer.vue'

console.log(jQuery.fn.jquery)

export default {
  name: 'App',
  components: {
    'header-view': Header,
    'content-view': Content,
    'footer-view': Footer
  }

}
</script>

Here is the Header.vue file

<template>
<header>
  <a href="#">Новости</a>
  <a href="#">Профиль</a>
</header>
</template>

<script>
export default {}
</script>

<style scoped>
</style>

I will be glad for help.

PS I'm not waiting for the finished code.