Фильтрация в таблице quasar vue

Всем привет, стоит такая задача, в таблицей под каждый элементом th необходимо сделать input который будет фильтровать. В колонке с числовыми значениями нужно добавить возможность фильтровать по диапазону (прим. 8-10) поддержка операторов > и <. Сделал таблицу без quasar, фильтрация работает нормально пример ниже. Над каждой колонкой, где мне нужна фильтрация я расставил input и написал функцию фильтрации.

  <th @click="performSortThumbnails('ctr')">
    CTR <br />
    <input type="text" v-model="filterCTR" placeholder="Filter by ctr" @click.stop>
  </th>
  <th @click="performSortThumbnails('title')">
    Title <br />
    <input type="text" v-model="filterTitle" placeholder="Filter by title" @click.stop>
  </th>

Текущая проблема в том, что просто не отображается input формы для фильтрации, все перепробовал и информацию никакую найти не могу. Мой код ниже:

   <template>
    <div class="q-pa-md">
        <q-table :rows="filteredRows" :columns="columns" title="Таблица обложек" :rows-per-page-options="[5, 10]"
            row-key="name" wrap-cells>
            <template v-slot:top="props">
                <q-tr>
                    <q-th v-for="column in props.cols" :key="column.name" :props="props">
                        <div class="q-gutter-sm">
                            <div>{{ column.label }}</div>
                            <q-input v-model="filterValues[column.field]" @keyup.enter="applyFilter(column.field)" />
                        </div>
                    </q-th>
                </q-tr>
            </template>

            <template v-slot:body="props">
                <q-tr :props="props">
                    <q-td key="desc" :props="props">
                        {{ props.row.name }}
                        <q-popup-edit v-model="props.row.name" v-slot="scope">
                            <q-input v-model="scope.value" dense autofocus counter @keyup.enter="scope.set" />
                        </q-popup-edit>
                    </q-td>

                    <q-td key="comment" :props="props">
                        <div v-html="props.row.comment"></div>
                        <q-popup-edit buttons v-model="props.row.comment" v-slot="scope">
                            <q-editor v-model="scope.value" min-height="5rem" autofocus @keyup.enter.stop />
                        </q-popup-edit>
                    </q-td>

                    <q-td key="calories" :props="props">
                        {{ props.row.calories }}
                        <q-popup-edit v-model.number="props.row.calories" v-slot="scope">
                            <q-input type="number" v-model.number="scope.value" dense autofocus @keyup.enter="scope.set" />
                        </q-popup-edit>
                    </q-td>

                    <q-td key="fat" :props="props">
                        <div class="text-pre-wrap">{{ props.row.fat }}</div>
                        <q-popup-edit v-model.number="props.row.fat" v-slot="scope">
                            <q-input type="number" v-model.number="scope.value" dense autofocus @keyup.enter="scope.set" />
                        </q-popup-edit>
                    </q-td>
                </q-tr>
            </template>
        </q-table>
    </div>
</template>
  
<script lang="ts">
import { ref, computed } from 'vue'
import { QInput } from 'quasar'

const columns = [
    { name: 'desc', style: 'min-width: 160px; width: 160px', align: 'left', label: 'Dessert', field: 'name' },
    { name: 'comment', style: 'min-width: 200px; width: 200px', align: 'left', label: 'Comment (editable)', field: 'comment' },
    { name: 'calories', align: 'center', label: 'Calories', field: 'calories', sortable: true },
    { name: 'fat', label: 'Fat (g)', field: 'fat', sortable: true }
]

const rows = [
    {
        name: 'Frozen Yogurt',
        comment: '<p>It\'s cold but great and tastes different than normal ice cream, but it\'s great too!</p><p><strong>Have a taste!</strong></p>',
        calories: 159,
        fat: 6.0
    },
    {
        name: 'Ice cream sandwich',
        comment: '<p>It\'s also cold but great!</p><p><strong>Have a taste!</strong></p>',
        calories: 237,
        fat: 9.0
    },
    {
        name: 'Eclair',
        comment: '<p>It\'s not cold and also great!</p><p><strong>Have a taste!</strong></p>',
        calories: 262,
        fat: 16.0
    },
    {
        name: 'Cupcake',
        comment: '<p>It could be warm and it\'s great!</p><p><strong>Have a taste!</strong></p>',
        calories: 305,
        fat: 3.7
    },
]

export default {
    components: {
        QInput
    },
    setup() {
        type FilterValues = {
            name: string;
            comment: string;
            calories: string;
            fat: string;
        }

        const filterValues = ref<FilterValues>({
            name: '',
            comment: '',
            calories: '',
            fat: ''
        })

        const filteredRows = computed(() => {
            const nameFilter = filterValues.value.name.toLowerCase().trim()
            const commentFilter = filterValues.value.comment.toLowerCase().trim()
            const caloriesFilter = parseFloat(filterValues.value.calories)
            const fatFilter = parseFloat(filterValues.value.fat)

            return rows.filter(row => {
                const nameMatch = row.name.toLowerCase().includes(nameFilter)
                const commentMatch = row.comment.toLowerCase().includes(commentFilter)
                const caloriesMatch = isNaN(caloriesFilter) || row.calories === caloriesFilter
                const fatMatch = isNaN(fatFilter) || row.fat === fatFilter

                return nameMatch && commentMatch && caloriesMatch && fatMatch
            })
        })

        function applyFilter(field) {
            const filterValue = parseFloat(filterValues.value[field])
            if (isNaN(filterValue)) {
                filterValues.value[field] = ''
            }
        }

        return {
            filterValues,
            filteredRows,
            columns,
            applyFilter
        }
    }
}
</script>