I have a v-data-table with headers I define in advance,
one of the columns I get from my API an array on objects (application_tags) like so:

[ { "application_id": 1, "application_name": "m***" }, { "application_id": 2, "application_name": "str***" }, { "application_id": 3, "application_name": "r***" } ]

the header itself is defined like so:

...
{ key: 'application_tags',      title: 'Application Tags'},
...

I defined the table and the search bar like so:

<template v-slot:text>
            <v-text-field 
                v-model="search" 
                density="comfortable" 
                clearable
                placeholder="Search for any attribute of a resource" 
                prepend-inner-icon="mdi-magnify" 
                variant="outlined" 
                theme="light"
                hide-details 
                single-line
            ></v-text-field>
        </template>
<v-data-table 
    headers="Resources" 
    :items="records" 
    :search="search" 
    :loading="loading"
>
<template v-slot:item.application_tags="{item}">
    <v-chip-group v-model="search" selected-class="text-primary" column>
        <v-chip
        size="small"
        v-for="tag in item.application_tags"
        :key="tag.application_name"
        :text="tag.application_name"
        :value="tag.application_name"
        ></v-chip>
    </v-chip-group>
</template>
</v-data-table>

when I click on a chip, the text in the chip does move to the search bar,
but the actual results is empty…
without anything:
enter image description here

clicking on a chip:
enter image description here

and the weird thing (or maybe not) is that when I write 1 in the search bar, the chip for str*** is marked.
enter image description here

If I return an array of application_name values ( instead of array of application_id&application_name)
it does work…
but I need to match it with its id…