JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div class="wrapper" id="index">
<!-- content -->

  <div class="questions-and-answers-preview" >
    <div class="questions-list">
      <div class="questions-item" v-for="(item, index) in faq">
        <div class="accordion" v-bind:class="{ active: item.isActive }" @click.prevent="toggle(index)"><span>{{ item.title }}</span><i class="fa fa-angle-down" aria-hidden="true"></i></div>
        <div class="panel" v-show="item.isActive">
          <p>{{ item.text }}</p>
        </div>
      </div>
    </div>
  </div>

  <!-- content -->
</div>

JavaScript

new Vue({
  el: '#index',

  data: {
    loading: false,
    offset: 6,
    faq: [],
  },

  methods: {
    getFaq() {
			this.faq.push({ title: 'foo', text: 'bar' });
    },

    toggle: function (n) {
            this.faq.forEach( (el, index) => {
            	el.isActive = index == n ? true : false;
            });
        }
  },

  mounted() {
    this.getFaq();
  }
});