Vue.jsでのv-on:clickについて

閲覧ありがとうございます。
下記につきまして困っております。ご教授いただけますと幸いです。

前提・実現したいこと

Vue.jsにて同じ要素を使用して作成したプルダウンをv-on:clickを使用して"個別に"開閉したい。

発生している問題・エラーメッセージ

全てv-on:click="active"にて制御してしまっているため、1つのタブを開くとすべてのタブが反応してしまう。
また、2つめ、3つめのindexをクリックしても1つ目のindexをクリックした判定になる。

該当のソースコード

vue
1<template>
2  <ul id="explaining_list" class="explaining_list">
3    <li id="aaa" class="explaining_list_item" v-on:click="active">
4      <h3 id="explaining_index" class="explaining_index alphabetic_font">DESCRIPTION</h3>
5      <transition name="slidein">
6        <div class="explaining_detail" v-if="show">
7          <p class="explaining_detail_text">test</p>
8        </div>
9      </transition>
10    </li>
11    <li id="size_guide" class="explaining_list_item" v-on:click="active">
12      <h3 id="bbb" class="explaining_index alphabetic_font">SIZE GUIDE</h3>
13      <transition name="slidein">
14        <div class="explaining_detail" v-if="show">
15          <p class="explaining_detail_text">test</p>
16        </div>
17      </transition>
18    </li>
19    <li id="care_guide" class="explaining_list_item" v-on:click="active">
20      <h3 id="ccc" class="explaining_index alphabetic_font">CARE GUIDE</h3>
21      <transition name="slidein">
22        <div class="explaining_detail" v-if="show">
23          <p class="explaining_detail_text">test</p>
24        </div>
25      </transition>
26    </li>
27    <li id="about_delivery" class="explaining_list_item" v-on:click="active">
28      <h3 id="ddd" class="explaining_index">配送</h3>
29      <transition name="slidein">
30        <div class="explaining_detail" v-if="show">
31          <p class="explaining_detail_text">test</p>
32        </div>
33      </transition>
34    </li>
35    <li id="about_exchange" class="explaining_list_item" v-on:click="active">
36      <h3 id="eee" class="explaining_index">返品</h3>
37      <transition name="slidein">
38        <div class="explaining_detail" v-if="show">
39          <p class="explaining_detail_text">test</p>
40        </div>
41      </transition>
42    </li>
43  </ul>
44</template>
45
46<script>
47
48export default {
49  name: 'Index',
50  data() {
51   return {
52    show: false
53   }
54  },
55  methods: {
56    active: function () {
57      this.show = !this.show;
58      var target = document.getElementById('explaining_index');
59      target.classList.toggle('open');
60    }
61  }
62}
63</script>
64<style>
65.slidein-enter-active, .slidein-leave-active {
66  transform: translate(0px, 0px);
67  transition: 0.3s;
68}
69.slidein-enter, .slidein-leave-to {
70  transform: translateY(-30%) translateY(0px);
71  transition: 0.3s;
72}
73.explaining_list {
74  padding: 0 3%;
75  margin-top: 22%;
76}
77.explaining_list_item {
78  border-top: 1px solid #000;
79}
80.explaining_list_item:last-child {
81  border-bottom: 1px solid #000;
82}
83.explaining_index {
84  position: relative;
85  font-size: 1.0rem;
86  font-weight: normal;
87  text-align: center;
88  padding: 6% 0;
89}
90.explaining_index::after {
91  content: "";
92  position: absolute;
93  top: 34%;
94  right: 20%;
95  display: block;
96  background-image: url(/img/icons/icon_plus.svg);
97  background-repeat: no-repeat;
98  background-size: contain;
99  height: 16px;
100  width: 16px;
101  transition: 0.3s;
102}
103.explaining_index.open::after {
104  content: "";
105  background-image: url(/img/icons/icon_minus.svg);
106  transition: 0.3s;
107}
108.explaining_detail {
109  padding: 4% 0 9%;
110}
111</style>
112

試したこと

v-on:click="active"をv-on:click="active02", v-on:click="active03"...と各プルダウンに量産し、それに対応するv-if="show02", v-if="show03"...を各プルダウンに対応させたが、変わらず1つ目のみが開いてしまった。