How to show different value on hover of a particular row of table in vue.js?

Here I have a table with 3 columns and what I want to do is, on hover of a particular row the value of one column should change and other two column's value remain same.

For example suppose I have a table of 5 rows with columns name, address, phone number. And without hover name shows full name So when I hover on a particular row, it should show nickname, address and phone number in that particular row.

I was doing with mouseover and mouseout on that row. But when I hover on a particular row instead of showing changed value of name for that particular row, it is showing changed value of name in all rows.

Where am I doing wrong ? can anyone help me out from here. Below is my code for table.

<b-tbody>
  <b-tr
    v-for="student in studentList"
    :key="student.ID"
    @mouseover="onHover = true"
    @mouseout="onHover = false"
  >
    <b-td>
      <span class="student-list" v-show="onHover">
        {{ student.nickName }}
      </span>
      <span v-show="!onHover">
        {{ student.fullName }}
      </span>
    </b-td>
    <b-td>{{ student.address }}</b-td>
    <b-td class="text-right">
      {{ student.phoneNumber }}
    </b-td>
  </b-tr>
</b-tbody>