Vuetify dynamic data-table component - vue-component

Question

I'm quite new to Vue development and I made a dynamic list component, using Vuetify v-data-table. In this component I receive a config object as a prop and get the configuration of the headers, links for redirections and some other stuff aswell.
Now I'm stuck with a problem: I can't format my cell's content because I can't use the normal v-slot:item.<property> approach to apply the filter. Is there any way of receiving a pointer of the filter and applying it to every value at the specified column?
Thanks.
edit:
Component =>
<template>
<div class="container">
<v-app>
<v-data-table :headers="config.cabecalho" :items="data" sort-by="id" class="elevation-1">
<template v-slot:top>
<v-toolbar flat color="white">
<v-toolbar-title>{{ config.titulo }}</v-toolbar-title>
<v-divider class="mx-4" inset vertical></v-divider>
<div class="flex-grow-1"></div>
<v-dialog v-model="dialog" max-width="500px">
<template v-slot:activator="{ on }">
<v-btn color="primary" dark class="mb-2" #click="novoItem">Novo</v-btn>
</template>
</v-dialog>
</v-toolbar>
</template>
<template v-slot:item.acoes="{ item }">
<v-icon small class="mr-2" #click="editItem(item)">edit</v-icon>
<v-icon small #click="deleteItem(item)">delete</v-icon>
</template>
</v-data-table>
</v-app>
</div>
</template>
<script>
import { mapState } from 'vuex'
import axios from 'axios'
export default {
data: () => ({
dialog: false,
data: []
}),
props: {
config:{
type: Object
}
},
methods:{
editItem(item) {
return this.$router.push(this.config.linkEdit + item.id)
},
deleteItem(item) {
const index = this.data.indexOf(item)
confirm("Tem certeza que quer excluir o item?") &&
axios.get(this.config.linkDelete)
.then(res => {
if (res.status == '200') {
alert('Item excluído com sucesso.')
}
else {
alert('Falha ao excluir item, tente novamente.')
}
})
.catch( e => console.log(e))
},
novoItem () {
this.$router.push(this.config.linkNovo)
}
},
async mounted() {
await setTimeout(() => {
this.data = [
{ id: 1, numero: '1', entidade:'Cliente Um', dtIni: '2019-06-01', dtFim: '2020-06-02', vlrTotal: 3500.00, diaVenc: '5' },
{ id: 2, numero: '2', entidade:'Cliente Dois', dtIni: '2019-07-01', dtFim: '2020-07-02', vlrTotal: 7000.00, diaVenc: '15' },
{ id: 3, numero: '3', entidade:'Cliente Três', dtIni: '2019-08-01', dtFim: '2020-08-02', vlrTotal: 1200.00, diaVenc: '10' },
{ id: 4, numero: '4', entidade:'Cliente Quatro', dtIni: '2019-09-01', dtFim: '2020-09-02', vlrTotal: 800.00, diaVenc: '25' },
{ id: 5, numero: '5', entidade:'Cliente Cinco', dtIni: '2019-09-10', dtFim: '2020-09-11', vlrTotal: 25000.00, diaVenc: '5' }
]
}, 100)
},
}
</script>
Page that calls the component passing config prop =>
template>
<div class="container">
<lista-base :config="this.config"></lista-base>
</div>
</template>
<script>
import ListaBase from '~/components/padrao/ListaBase.vue'
export default {
data(){
return {
config: {
linkBusca: '',
linkNovo: '/contrato/create',
linkEdit: '',
linkDelete: '',
titulo: 'Cadastro de Contratos',
cabecalho: [
{
text: "#",
align: "right",
value: "id"
},
{
text: "Entidade",
value: "entidade",
align: "left"
},
{
text: "Início",
value: "dtIni",
align: "center"
},
{
text: "Fim",
value: "dtFim",
align: "center"
},
{
text: "Valor Total (R$)",
value: "vlrTotal",
align: "right",
filtro: "formataNumero"
},
{
text: "Ações",
value: "acoes",
sortable: false,
align: "center"
}
],
}
}
},
components: {
ListaBase
},
}
</script>
I used dummy data object because it's an experimental project still.