Почему при работе с Vue белый экран?

<script>
export default {
  data() {
    return {
      showFAQ: false,
      activeIndex: null,
      faqItems: [
        { question: 'Вопрос 1', answer: 'Ответ на вопрос 1' },
        { question: 'Вопрос 2', answer: 'Ответ на вопрос 2' },
        { question: 'Вопрос 3', answer: 'Ответ на вопрос 3' },
             ]
    };
  },
  methods: {
    toggleAnswer(index) {
      this.activeIndex = (this.activeIndex === index) ? null : index;
    }
  }
};
</script>
<template>
 <button class="btn">test</button>
 <div id="faq" v-if="showFAQ">
      <div v-for="(item, index) in faqItems" :key="index" class="faq-item" @click="toggleAnswer(index)" :class="{ active: activeIndex === index }">
        {{ item.question }}
        <div v-if="activeIndex === index">{{ item.answer }}</div>
      </div>
      FAQ
    </div>
  <router-view/>
 
</template>

<style>
.faq-item {
      margin-bottom: 10px;
      cursor: pointer;
    }
    .faq-item.active {
      color: red;
    }
</style>

Почему на экране отображается только кнопка, а остальное нет? подскажите как это можно исправить?