Vue記述を簡略化したいです。

現在、携帯会社の最適料金プランシミュレーションのようなアプリをvue.jsを使用し制作しております。
私自身、プログラミング初心者な部分もあり、なんとか料金プランシミュレーションのようなアプリは完成したのですが、for文や変数等を使用していないため、繰り返しの記述が多くスマートではございません。

そこで、似たような記述は"v-for"等を使用して簡略したいと試みておりますが、知識に乏しいため、皆様のお力添えを頂戴できましたら幸いでございます。

現在のアプリは以下firebaseにデプロイされております。
https://simulation-app-65c4f.web.app/

ご確認、何卒よろしくお願いいたします。

vue.js
1<template>
2  <v-card flat>
3    <v-card-text>
4      <v-container fluid>
5        <v-row v-if="!isActive1 && !isActive2">
6          <v-col
7            class="d-flex justify-center align-center mb-6"
8            style="height: 50vh"
9          >
10            <v-btn @click="select1">選択1</v-btn>
11            <v-btn class="ml-10" @click="select2">選択2</v-btn>
12          </v-col>
13        </v-row>
14        <v-row
15          v-if="!isActive1_1 && !isActive1_2 && !isActive2_1 && !isActive2_2"
16        >
17          <v-col
18            class="d-flex justify-center align-center mb-6"
19            style="height: 50vh"
20            v-if="isActive1"
21          >
22            <v-btn @click="select1_1">選択1-1</v-btn>
23            <v-btn class="ml-10" @click="select1_2">選択1-2</v-btn>
24          </v-col>
25          <v-col
26            class="d-flex justify-center align-center mb-6"
27            style="height: 50vh"
28            v-if="isActive2"
29          >
30            <v-btn @click="select2_1">選択2-1</v-btn>
31            <v-btn class="ml-10" @click="select2_2">選択2-2</v-btn>
32          </v-col>
33        </v-row>
34        <v-row
35          v-if="
36            !isActive1_1_1 &&
37            !isActive1_1_2 &&
38            !isActive1_2_1 &&
39            !isActive1_2_2 &&
40            !isActive2_1_1 &&
41            !isActive2_1_2 &&
42            !isActive2_2_1 &&
43            !isActive2_2_2
44          "
45        >
46          <v-col
47            class="d-flex justify-center align-center mb-6"
48            style="height: 50vh"
49            v-if="isActive1_1"
50          >
51            <v-btn @click="select1_1_1">選択1-1-1</v-btn>
52            <v-btn class="ml-10" @click="select1_1_2">選択1-1-2</v-btn>
53          </v-col>
54          <v-col
55            class="d-flex justify-center align-center mb-6"
56            style="height: 50vh"
57            v-if="isActive1_2"
58          >
59            <v-btn @click="select1_2_1">選択1-2-1</v-btn>
60            <v-btn class="ml-10" @click="select1_2_2">選択1-2-2</v-btn>
61          </v-col>
62          <v-col
63            class="d-flex justify-center align-center mb-6"
64            style="height: 50vh"
65            v-if="isActive2_1"
66          >
67            <v-btn @click="select2_1_1">選択2-1-1</v-btn>
68            <v-btn class="ml-10" @click="select2_1_2">選択2-1-2</v-btn>
69          </v-col>
70          <v-col
71            class="d-flex justify-center align-center mb-6"
72            style="height: 50vh"
73            v-if="isActive2_2"
74          >
75            <v-btn @click="select2_2_1">選択2-2-1</v-btn>
76            <v-btn class="ml-10" @click="select2_2_2">選択2-2-2</v-btn>
77          </v-col>
78        </v-row>
79        <v-row>
80          <v-col
81            class="d-flex justify-center align-center mb-6"
82            style="height: 50vh"
83            v-if="isActive1_1_1"
84          >
85            <v-card class="pa-6">あなたの最適なプランは選択1-1-1</v-card>
86          </v-col>
87          <v-col
88            class="d-flex justify-center align-center mb-6"
89            style="height: 50vh"
90            v-if="isActive1_1_2"
91          >
92            <v-card class="pa-6">あなたの最適なプランは選択1-1-2</v-card>
93          </v-col>
94          <v-col
95            class="d-flex justify-center align-center mb-6"
96            style="height: 50vh"
97            v-if="isActive1_2_1"
98          >
99            <v-card class="pa-6">あなたの最適なプランは選択1-2-1</v-card>
100          </v-col>
101          <v-col
102            class="d-flex justify-center align-center mb-6"
103            style="height: 50vh"
104            v-if="isActive1_2_2"
105          >
106            <v-card class="pa-6">あなたの最適なプランは選択1-2-2</v-card>
107          </v-col>
108          <v-col
109            class="d-flex justify-center align-center mb-6"
110            style="height: 50vh"
111            v-if="isActive2_1_1"
112          >
113            <v-card class="pa-6">あなたの最適なプランは選択2-1-1</v-card>
114          </v-col>
115          <v-col
116            class="d-flex justify-center align-center mb-6"
117            style="height: 50vh"
118            v-if="isActive2_1_2"
119          >
120            <v-card class="pa-6">あなたの最適なプランは選択2-1-2</v-card>
121          </v-col>
122          <v-col
123            class="d-flex justify-center align-center mb-6"
124            style="height: 50vh"
125            v-if="isActive2_2_1"
126          >
127            <v-card class="pa-6">あなたの最適なプランは選択2-2-1</v-card>
128          </v-col>
129          <v-col
130            class="d-flex justify-center align-center mb-6"
131            style="height: 50vh"
132            v-if="isActive2_2_2"
133          >
134            <v-card class="pa-6">あなたの最適なプランは選択2-2-2</v-card>
135          </v-col>
136        </v-row>
137      </v-container>
138    </v-card-text>
139  </v-card>
140</template>
141
142<script>
143export default {
144  data() {
145    return {
146      isActive1: false,
147      isActive2: false,
148      isActive1_1: false,
149      isActive1_2: false,
150      isActive2_1: false,
151      isActive2_2: false,
152      isActive1_1_1: false,
153      isActive1_1_2: false,
154      isActive1_2_1: false,
155      isActive1_2_2: false,
156      isActive2_1_1: false,
157      isActive2_1_2: false,
158      isActive2_2_1: false,
159      isActive2_2_2: false,
160    };
161  },
162
163  methods: {
164    select1() {
165      this.isActive1 = !this.isActive1;
166    },
167    select2() {
168      this.isActive2 = !this.isActive2;
169    },
170    select1_1() {
171      this.isActive1_1 = !this.isActive1_1;
172    },
173    select1_2() {
174      this.isActive1_2 = !this.isActive1_2;
175    },
176    select2_1() {
177      this.isActive2_1 = !this.isActive2_1;
178    },
179    select2_2() {
180      this.isActive2_2 = !this.isActive2_2;
181    },
182    select1_1_1() {
183      this.isActive1_1_1 = !this.isActive1_1_1;
184    },
185    select1_1_2() {
186      this.isActive1_1_2 = !this.isActive1_1_2;
187    },
188    select1_2_1() {
189      this.isActive1_2_1 = !this.isActive1_2_1;
190    },
191    select1_2_2() {
192      this.isActive1_2_2 = !this.isActive1_2_2;
193    },
194    select2_1_1() {
195      this.isActive2_1_1 = !this.isActive2_1_1;
196    },
197    select2_1_2() {
198      this.isActive2_1_2 = !this.isActive2_1_2;
199    },
200    select2_2_1() {
201      this.isActive2_2_1 = !this.isActive2_2_1;
202    },
203    select2_2_2() {
204      this.isActive2_2_2 = !this.isActive2_2_2;
205    },
206  },
207};
208</script>
209