А зачем текстовое значение?
<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>
<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>