I use v-data-table to display my data:

<v-data-table  
  show-select
  :headers="headers"
  :items="items"  
>
  <template
    slot="header.data-table-select"
    slot-scope="{ on, props }"
  >
    <v-simple-checkbox
      v-bind="props"
      v-on="on"
      :value="props.value"
    />
  </template>
  <template
    slot="item.data-table-select"
    slot-scope="{ isSelected, select}"
  >
    <v-simple-checkbox
      :value="isSelected"
      @input="select($event)"
    />
  </template>
  <template
    slot="item.icon"
    slot-scope="{ item }"
  >
    <v-tooltip bottom>
      <template v-slot:activator="{ on, attrs }">
        <v-icon
          :color="item.icon ? 'green' : 'blue'"
          v-bind="attrs"
          v-on="on"
        >
          'east'
        </v-icon>
      </template>
      <span>test</span>
    </v-tooltip>
  </template>
  <template
    slot="item.objectName"
    slot-scope="{ item }"
  >
    <v-tooltip top>
      <template v-slot:activator="{ on }">
        <div
          v-on="on"
          @click="toDocs( item )"
        >
          {{ item.objectName }}
        </div>
      </template>
      <span> {{ item.objectName }} </span>
    </v-tooltip>
  </template>
  
  <template
    slot="item.objectType"
    slot-scope="{ item }"
  >
    <resizable-text :text="item.objectType" />
  </template>
</v-data-table>

How can I bind mouseover and mouseleave events for rows in current v-data-table?