My Boolean values in Datatable are not displayed Correctly

This issue has driven me nuts. I realized that data-table has issue showing boolean values and I am aware of the workaround. The problem is that it works for one field only and I couldn’t make it work for my 2nd one. Here are part of my code. It’s a big component and couldn’t copy everything. I am 100% sure that data are available and is nothing wrong there.

<v-data-table
            v-model="selectedItems"
            :headers="headers"
            :items="identities"
            :single-select="singleSelect"
            :search="search"
            item-key="email"
            show-select
            show-expand
            class="elevation-1"
            loading="false"
            fixed-header
         >

            <template v-slot:item.hasApiAccess="{ item }">
               {{ item.accessToAllSubAccounts ? 'true' : 'false' }}
            </template>

            <template v-slot:item.accessToAllSubAccounts="{ item }">
               <v-btn v-if="item.apiCredentials.length > 0" color="success darken-1" small text @click="manageCreds(item)">true</v-btn>
               <v-btn v-else color="primary darken-1" small text @click="manageCreds(item)">false</v-btn>
            </template>
         headers: [
            { text: 'Email', value: 'email', align: 'left', sortable: true, width: "20%" },
            { text: 'Account ID', value: 'aid', align: 'left', sortable: false, width: "10%" },
            { text: 'Associated Groups', value: 'groups', align: 'left', sortable: false, width: "38%" },
            { text: 'All Access', value: 'accessToAllSubAccounts', align: 'left', sortable: true, width: "10%" },
            { text: 'API Access', value: 'hasApiAccess:', align: 'left', sortable: true, width: "12%" },
            { text: '', value: 'action', align: 'right', sortable: false, width: "10%" },       
         ],

Whatever I put inside accessToAllSubAccounts template will be displayed but nothing will show inside hasApiAccess. Even removing the one that works doesn’t help. I also changed the field name to accessToApi but didn’t help. If I override any other field (i.e., Email or Account ID or Groups, it works fine but I have problem with this one field/property only.

This is a vue CLI 3 project and here are all dependencies:
“dependencies”: {
“axios”: “^0.19.0”,
“core-js”: “^2.6.5”,
“vue”: “^2.6.10”,
“vue-router”: “^3.0.3”,
“vuelidate”: “^0.7.4”,
“vuelidate-error-extractor”: “^2.4.0”,
“vuetify”: “^2.1.1”,
“vuex”: “^3.0.1”
},

Any help will be appreciated.