Vue Good Table Component, insert html in filter select options

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?