<template>
<div>
<div class="section">
<div class="d-flex p-3 bg-danger text-white">
<span>
{{section.title}}
<span v-if="isActive!==true">
<span class="section-drop" v-on:click="activate">
<v-icon name="angle-down" scale="2"></v-icon>
</span>
</span >
<span v-else="isActive==true">
<span class="section-drop" v-on:click="deactivate">
<v-icon name="angle-up" scale="2"></v-icon>
</span>
</span >
</span>
</div>
</div>
</div>
</template>
<script>
import api from '../api';
export default {
name: 'Section',
props: {
isActive: Boolean
},
methods: {
activate: function () {
this.isActive = true;
},
deactivate: function () {
this.isActive = false;
},
createSection: function () {
let section = this.newSection;
if(!section) {
return
}
api.createSection(section)
this.sections.push({
title: section
});
},
deleteSection: function (id) {
api.deleteSection(id)
}
}
}
</script>
<style>
.section-drop {
position: fixed;
left: 80%;
}
.section-drop :hover {
cursor: pointer;
}
.section {
margin-top: 10px;
}
</style><template>
<div id="app">
<div class="container">
<div class="sections">
<section-item v-for="section in sections"
:sectionData="section"></section-item>
</div>
<div class = "footer">
<a>MARKUS Corporation</a>
</div>
</div>
</div>
</template>
<script>
import Section from "./components/Section";
import api from './api';
export default {
name: 'app',
components: {
'section-item': Section
},
data() {
return {
newSection: '',
sections: []
}
},
mounted() {
api.getSections().then(response => {
this.$log.debug("Data loaded: ", response.data)
this.sections = response.data
}).catch(error => {
this.$log.debug(error)
})
}
}
</script>
<style>
.sections {
margin-top: 15%;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
color: DARKRED;
text-align: center;
}
</style>
<template>
<div id="app">
<div class="container">
<Sections/>
<div class = "footer">
<a>MARKUS Corporation</a>
</div>
</div>
</div>
</template>
<script>
import Sections from './components/Sections.vue'
export default {
name: 'app',
components: {
Sections
}
}
</script>
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
color: DARKRED;
text-align: center;
}
</style>
Проблема не в этом скорей всего, спасибо за Ваши ответы. Разбираюсь как воспользоватся поиском отладчика что-бы найти в чем ошибка. 
но при выполнении заметил следующее в консоли 