Column filter containing relationships return name instead of Vuejs ID

Question

Hello, I have an application Laravel api and front Vuejs, in the employee table I have 2 columns 'Nationality and Subcontractor' that make relationship with their respective tables. Each column has its input to filter the records individually, what happens is that in the nationality filter and subcontracted it is filtering by ID instead of name. How to solve?

My table:

<b-table
  :items="filtered"
  :fields="fields"

  :per-page="perPage"
  
  responsive
  small
  striped
  hover
  
>

  <template slot="top-row" slot-scope="{ fields }">
      <td v-for="field in fields" :key="field.key">
          <b-form-input v-if="fieldIsFiltered(field)" v-model="filters[field.key]" :placeholder="field.label" />
      </td>
  </template>

  <template v-slot:cell(actions)="{ item }">
    <a href="#" size="sm" data-toggle="modal" data-target="#showItem" @click="setStore(item)">Detalhes</a>
    <a href="#" size="sm" data-toggle="modal" data-target="#editItem" @click="setStore(item)">Editar</a>
  </template>
</b-table>

The filter on computed:

filtered() {
            if (this.items.length > 0) {
                const filtered = this.items.filter(item => {
                    return Object.keys(this.filters).every(key => String(item[key]).includes(this.filters[key])
                    );
                });
                return filtered.length > 0
                    ? filtered
                    : [
                        Object.keys(this.items[0]).reduce(function (obj, value) {
                            obj[value] = '';
                            return obj;
                        }, {})
                    ];
            }
  },

The methods that dynamically pull the Fields:

fieldIsFiltered(field)  {
            return Object.keys(this.filters).includes(field.key)
        }

And finally, my component "Employees.See":

<table-component
                        :items="items"
                        :fields="[
                            { key: 'id', label: 'ID', sortable: true},
                            { key: 'nome', label: 'Nome', sortable: true},
                            { key: 'subcontratada_id', label: 'Subcontratada', formatter: (value, key, items) => { return items.subcontratada.nome }, sortable: true},
                            { key: 'numnacional', label: 'N.N.', sortable: true},
                            { key: 'validadeid', label: 'Vencimento.', sortable: true},
                            { key: 'nacionalidade', label: 'Nacionalidade', formatter: (value, key, items) => { return items.nacionalidade.nome }, sortable: true},
                            { key: 'cidade', label: 'Cidade', sortable: true},
                            { key: 'status', label: 'Ativo?', formatter: (value, key, items) => { return value ? 'Sim' : 'Não' }, sortable: true},
                            { key: 'actions', label: 'Ações'}
                        ]"
                        :filters="filters"
                        tituloadd="Adicionar funcionário"
                    >
                </table-component>

My date inside Employees.Select which columns will receive the input filter and send to table via props:

filters:{
                nome: '',
                subcontratada_id: '',
                numnacional: '',
                nacionalidade: '',
                cidade: '',
                status: '',
            },

Basically I have this screen (When filtering Subcontractor or Nationality I have to enter the ID, through the name it does not return results):

In the Status column I also could not insert a checkbox in place of the input, it would have some simple method to add a checkbox only for a status column to filter the active or inactive records and the others remain with the input?