accordion plus and minus icon not changing

I have this accordion and a collapse (as a component because I need to loop it). Here’s the code


<div class="accordion col-lg-8 mx-auto" role="tablist">
    <b-card no-body class="mb-1 py-2" v-for="each in questions" :key="">
        <Collapses v-bind:each="each"/>


    <b-button @click="isActive = !isActive" role="tab" block v-b-toggle="'accordion-'">{{ each.question }}
     <i class="float-right fa" :class="{ 'fa-plus': !isActive, 'fa-minus': isActive }"></i>

     <b-collapse v-bind:id="'accordion-'" visible accordion="my-accordion" role="tabpanel">
              <b-card-text>{{ each.answer }}</b-card-text>


export default {
    props: ["each"],
    data() {
        return {
            isActive: false

The accordion works fine, except the icons. The accordion only shows one (expanded) collapse at a time. Whenever I click another collapse, the previous collapse closes, but the icon doesn’t change (because I did not click it). My question is how to automatically change the icon whenever the collapse closes? Thank you