Vue Good Table Component, вставьте HTML в фильтр выберите параметры

Question

Я веб-дизайнер, я работаю в laravel 5.8 с vue js 2, это работа для моей компании.

У меня есть vue хороший компонент таблицы, и я хочу вФлаги (языки) столбца фильтр с раскрывающимися опциями.

Опции (список языков ( пример: pt, fr и gb )) поступают из базы данных по запросу axios.

Не нужно, чтобы языки отображались в опциях фильтра с именами языков, но с "span" для значка флагов

(Пример: "<span :class="'flag-icon flag-icon-gb flag-icon-squared'"></span> ").

Этот пример прекрасно работает с областью видимости строки и получает флаги, но в фильтре я могу его перевести в html, просто выдаю строку в виде простого текста.

У меня естьуже пробовал с "html: true," и "htmlContent: <span></span>"

Scop для флага строки работает просто отлично

vue компонент 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>

Данные таблицы

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
        }
    }
},

Запрос axios, где я получаю список языков и пытаюсь добавить диапазон в опциях фильтра

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));
},

Я ожидаю появления списка флагов, а не диапазонасписок флагов.

Можно ли переопределить этот конкретный фильтр или заставить его использовать html вместо обычного текста?