Проблема с “деревом” на vue.js

< script > 
  import Support from '../components/Support' 
export default { 
  name: 'Help', 
  components: { 
    Support 
  }, 
  data() { 
    return { 
      isActive: true, 
      main_question: 'ОБЩИЕ ВОПРОСЫ', 
      sub_question: 'Как быстро происходит обмен?', 
      answer: 'Большинство обменов на нашем сервисе автоматические. Они происходят в течений 1-й минуты после оплаты заявки. В тех случаях когда обмен происходит в полу-автоматическом режиме (перед обменом Вы увидите предупреждение об этом: скорость выполнения заявки зависит от степени загруженности оператора и обычно составляет 2-20 минут.', 
      show: true, 
      small: true 
    } 
  }, 
  methods: { 
    changeStatus: function() { 
      this.isActive = !this.isActive 
    } 
  } 
} 
 
< 
/script>

.trans_border_m_20 { 
  padding-bottom: 20px; 
} 
 
.answers_bl { 
  margin-top: 35px; 
  .answer_item_title_main { 
    font-family: "SFUIDisplay-Medium", sans-serif; 
    font-size: 16px; 
    color: $greyD3; 
    display: flex; 
    align-items: center; 
    border-top: 1px solid $greyL; 
    padding: 15px 0 12px 0px; 
    cursor: pointer; 
  } 
  .answer_item_title_main.disabled { 
    &:last-child { 
      border-bottom: 1px solid $greyL; 
    } 
  } 
  .answer_item_title_main.active { 
    border-bottom: 1px solid $greyL; 
    .ico_trigger { 
      transform: rotate(180deg); 
      transition: -webkit-transform .2s ease; 
      transition: transform .2s ease; 
      transition: transform .2s ease, -webkit-transform .2s ease; 
    } 
  } 
  .answer_item_main .answer_item:last-child .answer_item_title_minor.active+.answer_item_txt { 
    border-bottom: none; 
  } 
  .ico_trigger { 
    margin-right: 17px; 
    display: inline-block; 
    width: 16px; 
    height: 16px; 
  } 
  .answer_item_title_minor.active+.answer_item_txt { 
    border-bottom: 1px solid $greyL; 
  } 
  .answer_item { 
    padding-left: 70px; 
    .answer_item_title_minor, 
    .trigger_symbol { 
      color: $blueD; 
      font-family: "SFUIDisplay-Medium", sans-serif; 
      font-size: 16px; 
      cursor: pointer; 
    } 
    .answer_item_title_minor { 
      padding: 14px 0 11px 0px; 
      display: block; 
      border-bottom: 1px solid $greyL; 
    } 
    .answer_item { 
      .answer_item_title_minor.disabled { 
        &:last-child { 
          border-bottom: none; 
        } 
      } 
    } 
    .answer_item_title_minor.active { 
      border: none; 
      .trigger_symbol { 
        display: inline-block; 
        vertical-align: middle; 
        border: none; 
        transform: rotate(90deg); 
        transition: -webkit-transform .2s ease; 
        transition: transform .2s ease; 
        transition: transform .2s ease, -webkit-transform .2s ease; 
      } 
    } 
    .trigger_symbol { 
      display: inline-block; 
      margin-left: 8px; 
    } 
    .txt_container { 
      font-family: "SFNS-display-thin", sans-serif; 
      font-size: 14px; 
      color: $greyD3; 
      text-align: justify; 
      padding: 12px 0 25px 0; 
    } 
    .txt_container.active { 
      border-bottom: 1px solid $greyL; 
    } 
  } 
}

<template> 
  <div> 
    <div class="top_bl trans_border trans_border_m_20"> 
      <h1 class="big_title">Помощь по работе с сервисом</h1> 
    </div> 
    <div class="answers_bl main_center_bl "> 
      <div class="answer_item_main"> 
        <div @click="show = !show" class="answer_item_title_main" v-on:click="changeStatus" v-bind:class="{ active: isActive }"><span class="ico_trigger"></span>{{main_question}}</div> 
        <div v-if="show" class="answer_item"> 
          <div @click="small = !small" class="answer_item_title_minor" v-on:click="changeStatus" v-bind:class="{ active: isActive }">{{sub_question}}<span class="trigger_symbol">></span></div> 
          <div v-if="small" class="answer_item_txt"> 
            <p class="txt_container">{{answer}}</p> 
          </div> 
        </div> 
        <div v-if="show" class="answer_item"> 
          <div @click="small = !small" class="answer_item_title_minor" v-on:click="changeStatus" v-bind:class="{ active: isActive }">{{sub_question}}<span class="trigger_symbol">></span></div> 
          <div v-if="small" class="answer_item_txt"> 
            <p class="txt_container">{{answer}}</p> 
          </div> 
        </div> 
        <div v-if="show"  class="answer_item"> 
          <div  @click="small = !small" class="answer_item_title_minor" v-on:click="changeStatus" v-bind:class="{ active: isActive }">{{sub_question}}<span class="trigger_symbol">></span></div> 
          <div v-if="small" class="answer_item_txt"> 
            <p class="txt_container">{{answer}}</p> 
          </div> 
        </div> 
      </div> 
 
      <div class="answer_item_main"> 
        <div @click="show = !show" class="answer_item_title_main" v-on:click="changeStatus" v-bind:class="{ active: isActive }"><span class="ico_trigger"></span>{{main_question}}</div> 
        <div v-if="show" class="answer_item"> 
          <div @click="small = !small" class="answer_item_title_minor" v-on:click="changeStatus" v-bind:class="{ active: isActive }">{{sub_question}}<span class="trigger_symbol">></span></div> 
          <div v-if="small" class="answer_item_txt"> 
            <p class="txt_container">{{answer}}</p> 
          </div> 
        </div> 
      </div> 
    </div> 
  </div> 
</template>