refactoring

maybe the headline component is overkill :D

Author: LukaHarambasic

components/LhCvList.vue

@@ -1,10 +1,10 @@
 <template>
   <section>
-    <h2
+    <lh-cv-list-headline
       v-if="object.title"
       v-text="object.title" />
     <ul>
-      <LhCvListItem
+      <lh-cv-list-item
         v-for="(item, index) in object.items"
         :key="index"
         :item="item"
@@ -15,10 +15,12 @@
 
 <script>
 import LhCvListItem from '~/components/LhCvListItem'
+import LhCvListHeadline from '~/components/LhCvListHeadline'
 export default {
   name: 'LhCvList',
   components: {
-    LhCvListItem
+    LhCvListItem,
+    LhCvListHeadline
   },
   props: {
     object: {
@@ -40,21 +42,6 @@ section {
   &:last-of-type {
     margin: 0;
   }
-  h2 {
-    position: relative;
-    color: $c-primary;
-    text-align: left;
-    margin: 0 0 $s-s 0;
-    font-weight: 600;
-    &:after {
-      position: absolute;
-      content: ' ';
-      bottom: 0;
-      left: 0;
-      width: 3rem;
-      border-bottom: 2px solid $c-accent;
-    }
-  }
   ul {
     padding: 0;
     margin: $s-xs 0 0 $s-xs;

components/LhCvListHeadline.vue

@@ -0,0 +1,34 @@
+<template>
+  <h2
+    v-text="title" />
+</template>
+
+<script>
+export default {
+  name: 'LhCvListHeadline',
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  h2 {
+    position: relative;
+    color: $c-primary;
+    text-align: left;
+    margin: 0 0 $s-s 0;
+    font-weight: 600;
+    &:after {
+      position: absolute;
+      content: ' ';
+      bottom: 0;
+      left: 0;
+      width: 3rem;
+      border-bottom: 2px solid $c-accent;
+    }
+  }
+</style>

components/LhCvSkills.vue

@@ -1,6 +1,5 @@
 <template>
-  <section
-    class="list">
+  <section>
     <h3
       v-if="object.title"
       v-text="object.title" />
@@ -26,7 +25,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.list {
+section {
   margin: 0;
   h3 {
     font-weight: 600;

components/LhCvSkillsList.vue

@@ -1,9 +1,9 @@
 <template>
   <aside>
-    <h2
+    <lh-cv-list-headline
       v-if="object.title"
       v-text="object.title" />
-    <LhCvSkills
+    <lh-cv-skills
       class="skillsList"
       v-for="(object, index) in object.items"
       :key="index"
@@ -13,10 +13,12 @@
 
 <script>
 import LhCvSkills from '~/components/LhCvSkills'
+import LhCvListHeadline from '~/components/LhCvListHeadline'
 export default {
   name: 'LhCvSkillsList',
   components: {
-    LhCvSkills
+    LhCvSkills,
+    LhCvListHeadline
   },
   props: {
     object: {