Vue-good-table, search in custom field

Hello,
I use vue-good-table.

The column “spoken_languages” is an array and return: {{ item.name }} {{ item.local_name }} of each language.

Main search work for all columns except the column “Spoken languages”.

There is the code:

<vue-good-table
:columns=“columns”
:rows=“persons”
:line-numbers=“false”
theme=“polar-bear”
compactMode
@on-row-click=“onRowClick”
styleClass=“vgt-table bordered striped condensed”
:search-options="{
enabled: true,
trigger: ‘keyup’,
skipDiacritics: true,
placeholder: ‘Search this table’
}"
:sort-options="{
enabled: true,
initialSortBy: {field: ‘id’, type: ‘desc’}
}"
:pagination-options="{
enabled: true,
perPage: 25,
perPageDropdown: [25, 50, 75]
}">

    <template slot="table-row" slot-scope="props">
        
        <span v-else-if="props.column.field == 'spoken_languages'"
              v-for="item in props.row.spoken_languages">
                {{ item.name }} {{ item.local_name }}<br>
        </span>

        <span v-else>
          {{ props.formattedRow[props.column.field] }}
        </span>

    </template>

</vue-good-table>
...

<script>

import {VueGoodTable} from 'vue-good-table';

export default {
    components: {
        VueGoodTable,
    },
    data() {
        return {

            persons: [],

            columns: [
                {label: 'ID', field: 'id', type: 'number', hidden: true},
                {label: 'Forename', field: 'forename'},
                {label: 'Name', field: 'name'},
                {
                    label: 'Spoken languages',
                    field: 'spoken_languages',
                    filterOptions: {
                        styleClass: 'class1', // class to be added to the parent th element
                        enabled: false, // enable filter for this column
                        placeholder: 'Type here', // placeholder for filter input
                        trigger: 'keyup', //only trigger on enter not on keyup
                        filterFn: this.columnFilterFn, //custom filter function that
                    }
                },
            ],

        }
    },

    created() {
        this.axios
            .get('/api/persons/')
            .then(response => {
                this.persons = response.data;
            });
    },


    methods: {

        onRowClick(params) {
            //console.log(params);
            this.$router.push({name: 'viewPerson', params: {id: params.row.id}})
        },

    },

}
</script>

<style lang="scss">

@import '~vue-good-table/src/styles/style';

</style>

There is json to generate a table:
{
“id”: 1,
“forename”: “Johan”,
“name”: “De Smet”,
“geboortedatum”: “1951-06-17”,
“sex”: “M”,
“function”: “Medewerker”,
“volunteer”: 1,
“oral_coach”: null,
“spoken_languages”: [
{
“id”: 168,
“name”: “Dutch”,
“code”: “nl”,
“local_name”: “Nederlands”,
“dutch_name”: “Nederlands”,
“laravel_through_key”: 1
},
{
“id”: 242,
“name”: “Ukrainian”,
“code”: “uk”,
“local_name”: “Українська”,
“dutch_name”: null,
“laravel_through_key”: 1
},
{
“id”: 60,
“name”: “English”,
“code”: “en”,
“local_name”: “English”,
“dutch_name”: null,
“laravel_through_key”: 1
}
]
}

How to create search function in this array?

{{ item.name }} {{ item.local_name }}

Thank you.

Anybody can help me, please?

Hello,
Where can i find some information or guide?