asss

In my approach, Header and Footer are global, like a SPA, where this elements don't change very often. ServerList and ServerLogs are local components to be used inside a dashboard or something like that.

ServerList

<template>
<div class="col-xs-12 col-sm-6">
  <ul class="list-group">
    <li class="list-group-item" v-for="index in 5">
      Server #{{ index }}
    </li>
  </ul>
</div>
</template>
<script>
export default {}
</script>
ServerLogs

<template>
<div class="col-xs-12 col-sm-6">
  <p>Server Details are currently not updatet</p>
</div>
</template>
<script>
export default {}
</script>
Header

<template>
<div class="row">
  <div class="col-xs-12">
    <header>
      <h1>Server Status</h1>
    </header>
  </div>
</div>
</template>
<script>
export default {}
</script>
Footer

<template>
<div class="row">
  <div class="col-xs-12">
    <footer>
      <p>All Servers are managed here</p>
    </footer>
  </div>
</div>
</template>
<script>
export default {}
</script>
App

<template>
<div class="container">
  <app-header />
  <hr>
  <div class="row">
    <app-server-list />
    <app-server-logs />
  </div>
  <hr>
  <app-footer />
</div>
</template>
<script>
import ServerList from './components/ServerList.vue';
import ServerLogs from './components/ServerLogs.vue';
export default {
  components: {
    'app-server-list': ServerList,
    'app-server-logs': ServerLogs
  }
}
</script>
<style></style>
main.js

import Vue from 'vue'
import App from './App.vue'
//Components
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'
Vue.component('app-header', Header);
Vue.component('app-footer', Footer);
new Vue({
  el: '#app',
  render: h => h(App)
})