Vue Good Table Component, insert html in filter select options - vuejs2

Question

I am a web-designer, i am working in laravel 5.8 with vue js 2, this is a work for my company.
I have a vue good table component and i want in the flags(languages) column a filter with a drop-down options.
The options(list of languages(example: pt,fr and gb)) are coming from database by a axios request.
Don't want the languages to appear in the filter options with name of the languages but with "span" for a flags icon
(Example: "<span :class="'flag-icon flag-icon-gb
flag-icon-squared'"></span>" ).
This examples works just fine with a row scope and get the flags but in the filter I can get it to translate to html just gives the line as plain text.
I have already tried with "html: true," and "htmlContent: <span></span>"
The scop for the row flag works just fine
vue component scop
<template slot="table-row" slot-scope="row">
<span class="text-center" v-if="row.column.field == 'language.name'">
<span :class="'flag-icon flag-icon-' + row.formattedRow[row.column.field] + ' flag-icon-squared'"></span>
</span>
<span v-else>
{{ row.formattedRow[row.column.field] }}
</span>
</template>
The table data
data() {
return {
columns: [
{
label: 'Name',
field: 'user.name',
filterOptions: {
enabled: true
}
},
{
label: 'Country',
field: 'language.name',
html: true,
filterOptions: {
enabled: true,
filterDropdownItems: []
}
},
{
label: 'Status',
field: 'status.name',
filterOptions: {
enabled: true,
filterDropdownItems: []
}
},
{
label: 'Property',
field: 'property.title',
filterOptions: {
enabled: true,
filterDropdownItems: []
}
},
{
label: 'Last Reply',
field: 'updated_at',
type: 'date',
dateInputFormat: 'YYYY-MM-DD hh:mm:ss',
dateOutputFormat: 'Do MMM YYYY',
filterOptions: {
enabled: true
}
},
{
label: 'Create Date',
field: 'created_at',
type: 'date',
dateInputFormat: 'YYYY-MM-DD hh:mm:ss',
dateOutputFormat: 'Do MMM YYYY',
filterOptions: {
enabled: true
}
},
],
rows: [],
totalRecords: 0,
serverParams: {
columnFilters: {},
sort: {
field: '',
type: '',
},
page: 1,
perPage: 10
}
}
},
The axios request where i get the language list and try to put the span in the filter options
vue
getLanguages() {
let url = '/manage/data/request-language';
axios.get(url)
.then(({status, data}) => {
if (status === 200) {
data.records.forEach(item => {
let newData = {value: item.id, html: true, text: "<span :class='flag-icon flag-icon-" + item.name + " flag-icon-squared'></span>"};
this.columns[1].filterOptions.filterDropdownItems.push(newData);
});
}
}).catch(error => Alert.handleRequestError(error));
},
I expect to appear a flag list and not a span list of the flags.
Is it possible to override that specific filter or to force it html instead of plain text?