VUE 3: Infinity loop within template - How to solve?

I let Vue generate a Table (Using Element Plus for it (component Table)). Within the template itself I make several exceptions with if/else to ensure that the various values in the fields of the tables are filled. Given the data in these fields is not always representative to show in terms of value. I then use a function that I call to then make the value, for example, more beautiful.

Option 1: I'm trying to do it with returning data (refs). However when I try this I get some kind of loop, which I can't place. Check out the scripts below for more clarity. First I call {{ createLabelField }}, because it needs to change the ref of labelStatus.

Option 2: Is there any other option besides option 1 (If someone has the solution) to apply? Table.vue
The function createTableField is external loaded from useTable.ts (composable)

<template v-else-if="itemIn.type === 'status'">
 {{ createTableField }}
 <span>{{ labelStatus.label }}</span>
</template>

<script lang="ts">
import useTable from '@/composables/v2/useTable';

export default defineComponent({
  name: "",

  setup(props, {emit}) {
    const { createTableField, labelStatus } = useTable();

    return {
     createTableField,
     labelStatus
    }
  }
});

useTable.ts

import { ref, computed, reactive } from "vue";
import { useStore } from "vuex";
import useApp from "@/composables/v2/useApp";

export default function useTable() {
  const store = useStore();
  const { getSettingOptions, matchSetting1 } = useApp();

  interface Status {
    colorClass: string
    label: string
  }

  const labelStatus = ref({ colorClass: '', label: ''})

  const createTableField = (fieldType, fieldName, fieldValue, fieldSettings, id) => {
    if (fieldType == 'status') {
      const options = getSettingOptions(fieldName, fieldSettings); // Works
      const match = matchSetting1(fieldValue, options); // Works
      labelStatus.value.colorClass = match[0].class // Works
      labelStatus.value.label = match[0].label // Works
    }
  }

  return {
    createTableField,
    labelStatus
  }
}

Then I visit the page and Vue loads Table.vue, it generates a very big loop with more then 4000 times. It says in console.log: "[Vue warn]: Maximum recursive updates exceeded in component . This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.".

Question: How can I manage this in a correct way?