refactor(Header): separated header into its own component

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <div class="container">
-      <h1 class="title">tilde<strong>tv</strong></h1>
+      <app-header></app-header>
       <router-view></router-view>
       <footer>
         <router-link to="/">home</router-link>
@@ -11,8 +11,13 @@
 </template>
 
 <script>
+import Header from './components/Header.vue'
+
 export default {
-  name: 'app'
+  name: 'app',
+  components: {
+    'app-header': Header
+  }
 }
 </script>
 
@@ -65,8 +70,4 @@ a:focus {
   margin-left: auto;
   margin-right: auto;
 }
-
-.title {
-  font-weight: 400;
-}
 </style>

src/components/Header.vue

@@ -0,0 +1,17 @@
+<template>
+  <header>
+    <h1 class="title">tilde<strong>tv</strong></h1>
+  </header>
+</template>
+
+<script>
+export default {
+  name: 'app-header'
+}
+</script>
+
+<style scoped>
+.title {
+  font-weight: 400;
+}
+</style>