如何在悬停时更改图像并在使用 nuxtjs 时处于活动状态？

Question

[这是我的代码]

<nav>
    <ul>
      <li v-for="(link, i) in bottomNavLinks" :key="i" >
        <nuxt-link :to="link.path">
          <img :src="link.inactive" width="20px" alt="Home" class="mx-auto">
          <span class="link-name">{{link.title}}</span>
        </nuxt-link>
      </li>
    </ul>
  </nav>

[这是我的脚本，我在数据中有活动和非活动图标]

<script>
export default {
  name: 'bottomNav',

  data() {
    return {
      bottomNavLinks: [
        { 
          title: 'link 1', 
          path: '/' , 
          inactive: './Icons/home-icon.svg', //icon 1
          active: './Icons/home-active-icon.svg' //icon 2
        },
        { 
          title: 'Link 2', 
          path: '/' , 
          inactive: './Icons/work-icon.svg', 
          active: './Icons/work-active.svg'
        },
        { 
          title: 'Link 3', 
          path: '/' , 
          inactive: './Icons/pro-icon.svg', 
          active: './Icons/pro-active-icon.svg'
        }
      ]
    }
  },

  
</script>

[当链接处于活动状态以及用户将鼠标悬停在其上时，我想将图标更改为活动状态]