Как управлять параметром для отдельного элемента DOM из Vue.js компонента?

<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>

<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>