Vue3 Как указать ссылку на компонент по текстовому значению его имени?

А зачем текстовое значение?

Сейчас массив table_headers задекларирован в коде компонента, а на след. этапе будет получен из Ajax, и виды компонентов придут в текстовом виде.

Получилось реализовать через дополнительный биндинг текстового наименование и ссылки на объект, спасибо за идею.:

<template>
<tr>
  <th
      v-for="col in table_headers"
  >
    <a href="" :data-filter_name='[[col.name]]' :data-widget_type='[[ col.widget_type ]]' @click.prevent="showWidget">[[ col.label ]]</a>
    <component
      :is="loadedComponents[col.widget_type]"
      :widget_name="[[col.name]]"
      :widget_label="[[col.label]]"
    ></component>
  </th>
</tr>
</template>

<script setup>
    import TextWidget from "@/components/Widgets/TextWidget.vue";

    import { ref, shallowRef, onMounted } from 'vue'

    const loadedComponents = shallowRef({
        TextWidget: TextWidget
    })

    onMounted(() => {
      console.log(`Loaded comp: ${loadedComponents.value['TextWidget']}`)

    })

    const table_headers = ref([
        {name: "family_name", label: "Фамилия", widget_type: 'TextWidget'},
        {name: "given_name", label: "Имя", widget_type: 'TextWidget'},
        {name: "date_of_birth", label: "Дата рождения", widget_type: 'TextWidget'},
    ])
</script>

Как сделать правильно работающую пагинацию при использовании django-filters?

django_filters в вашем случае на пагинацию не влияет, т.к. участвует только в формировании queryset.

Попробуйте при генерации ссылок для перехода на следующую страницу не использовать текущий урл, а генерировать новый, используя параметры из контекста шаблона.

Например:

<a href="{% url 'view_my_city' slug='Казань' %}?page={{ page_obj.next_page_number }}&square_for_filter_min={{ square_for_filter_min }}&floor={{ floor }}">Страница №2</a>

Пример шаблона стандартной пагинации тут.