child templates in custom component v-data-table

Question

I am creating a general component based on v-data-table. This component has templates that are displayed anywhere, such as: ..template v-slot:item.index="{ item }"> .... The idea is to be able to pass custom templates as children of the component, in this case I would like to pass "..template v-slot:item.state="{ item }"> ..."

As you can see, in the source code of the ..[DataTableFuntional>] <v-data-table... component there is a commented template (..template v-slot:item.state="{ item }">) which works perfectly. But it does not suit my need since that way I would have to pass props to activate or deactivate the template because not all tables would always carry that field called "state"

DataTableFuntional component

<template>
  <div>
    <v-data-table
      class="tableBackground"
      :dense="dense"
      :headers="headers"
      :items="items.data"
      :options.sync="options"
      no-data-text="No hay datos disponibles"
      :loading-text="$t('comunes.general.cargando')"
    >

     <!-- Custom templates -->

      <template v-slot:body.append>
        <slot name="body2"></slot>
      </template>


      <template v-slot:item.state="{ item }">
        <slot name="state"></slot>
      </template>

      <!-- <template v-slot:item.state="{ item }">
        <div class="">
          <span v-if="item.state === 1" color="red">Close</span>
          <span v-else-if="item.state === 2" color="green">Open</span>
        </div>
      </template> -->

     <!-- Default templates -->

    <template v-slot:item.index="{ item }">
        {{ items.data.indexOf(item) + 1 }}
      </template>

    </v-data-table>
  </div>
</template>

Now, if we see this code, which is the previous component imported in any page of the site. We see that there are two "slots": v-slot: state" and "v-slot: body2" that are shown correctly, but if we see the code of the v-data-table> ... we can see that it is necessary to specify the v -slot in the template, for example:

 <template v-slot: item.state = "{item}">
        <slot name = "state"> </slot>
      </template>.

now, if we see the first tamplate:

<template v-slot: item.state = "{item}">
                    <div class = "">
                      <span v-if = "item.state === 1" color = "red"> Close </span>
                      <span v-else-if = "item.state === 2" color = "green"> Open </ span
                      >
                    </div>
                  </template>

This would be the way I would more or less like to be able to assign new templates to the v-data-table component. but it does not work.

if we see the following template

<template v-slot: state>
                 {{'Hello'}}
                  </template>

This does work but I don't know how to access the item to be able to set the conditions according to the state.

imported DataTableFuntional component whit child templates

 <DataTableFuntional
                  :ref="'reference'"
                  :endpoint="item.endpoint"
                  :headers="item.headers"
                  :actions="item.actions"
                  :btsmall="true"
                >

                  <!-- Custom templates -->

                  <template v-slot:item.state="{ item }">
                    <div class="">
                      <span v-if="item.state === 1" color="red">Close</span>
                      <span v-else-if="item.state === 2" color="green">Open</span
                      >
                    </div>
                  </template>

                   <template v-slot:state>
                 {{'Hello'}}
                  </template>

                  <template v-slot:body2>
                    <tr>
                      <td></td>
                      <td>
                        <v-text-field
                          type="number"
                          label="Less than"
                        ></v-text-field>
                      </td>
                      <td colspan="4"></td>
                    </tr>
                  </template>
 </DataTableFuntional>