Inline Edit (how to render a vuetifiy component based on the condition) - vue.js

Question

Haii can anyone help me. I'm looping a array I want to render a field based on the condition. which I loop in simple table.my problem is that I'm directly
comparing the index value (which is index === 0 and secondIndex === 0 ) like that it seems to be a hardcode. It could be dynamic. I couldn't able to get as a dynamic.Could Anyone help me.
<v-row v-for="(item, index) in list" :key="index" no-gutters>
<v-col cols="12" sm="12" lg="12" xl="12">
<v-card class="mt-2 rounded-xl" hover>
<v-card-title v-if="index === 0" #mouseover="mouseOver = true" #mouseleave="mouseOver = false">
</v-card-title>
<v-card-subtitle class="pb-5 mt-3">
<v-row class="ml-1 mt-1 text--primary">
<v-icon color="primary">{{item.icon}}</v-icon>
<div class="ml-1 text-button">{{item.name}}</div>
</v-row>
<v-file-input style="display: none" ref="file" accept="image/*" v-model="systemAndTenantConfig.systemconfiguration.logo" #change="uploadProfile()"></v-file-input>
</v-card-subtitle>
<v-card-text>
<v-form ref="configReference">
<div class="ml-9">
<tr>
<v-simple-table align="justify" style="text-align:justify" v-for="(record, secondIndex) in item.tableValue" :key="secondIndex">
<v-hover v-slot:default="{ hover }">
<tr>
<th style="width:160px">{{record.label}}</th>
<td>
<p v-if="indexValue === index && secondIndexValue === secondIndex ? showText: true">{{record.value}}</p>
<v-col cols="12" md="12" lg="12" xl="12" v-if=" index === 0 && secondIndex === 0 && indexValue === index && secondIndexValue === secondIndex ? show : false">
<v-text-field dense hide-details outlined :rules="systemAndTenantConfig.systemconfiguration.email ? $_emailValidation : []" :label="$t('email')" v-model="systemAndTenantConfig.systemconfiguration.email"></v-text-field>
</v-col>
<v-col cols="12" lg="12" v-if="index === 0 && secondIndex === 1 && indexValue === index && secondIndexValue === secondIndex ? show : false">
<v-autocomplete dense hide-details outlined :label="$t('timezone')" v-model="systemAndTenantConfig.systemconfiguration.timezone" :items="listOfTimeZones" item-text="displayname" item-value="standardname"></v-autocomplete>
</v-col>
</v-col>
<v-col cols="12" lg="12" v-if="index === 0 && secondIndex === 2 && indexValue === index && secondIndexValue === secondIndex ? show : false">
<v-textarea dense hide-details outlined :label="$t('companyAddress')" v-model="systemAndTenantConfig.systemconfiguration.companyaddress"></v-textarea>
</v-col></td><td>
<v-expand-transition>
<v-layout justify-end v-if="hover">
<v-fade-transition>
<td>
<v-btn text x-small icon color="info" v-if="showEdit">
<v-icon style="float:right" small #click="getSingleRecord(index, secondIndex)" color="primary">{{record.icon}}</v-icon>
</v-btn>
</td>
</v-fade-transition>
</v-layout>
</v-expand-transition>
</td>
</tr>
</v-row>
list: [
{
name: this.$t('general'),
icon: 'mdi-folder-multiple-outline',
tableValue: [
{
label: 'Email',
value: this.systemAndTenantConfig.systemconfiguration.email,
icon: 'mdi-pencil',
name: 'email'
},
{
label: 'Phone',
value: this.systemAndTenantConfig.systemconfiguration.phone,
icon: 'mdi-pencil',
name: 'phone'
},
{
label: 'Company Address',
value: this.systemAndTenantConfig.systemconfiguration.companyaddress,
icon: 'mdi-pencil',
name: 'address'
}
]
}]
indexValue: ''
secondIndexValue: ''
getSingleRecord (firstIndex, secondIndex) {
this.indexValue = firstIndex
this.secondIndexValue = secondIndex
}