how to hide an image with the hover event on it and show another?

I have two images whose behavior I want to see next. By default the image will be shown with the name 'home' and with the event 'mouseover' I want to hide and show the image with the name 'blackhome'. I don't know if this is possible.

this is my template

                      <li class="nav-item" @mouseover="homeLink = !homelink" @mouseleave="!homeLink" >
                        <a class='nav-link home'  href="https://www.google.com/">
                        <img v-if="homeLink" class="logo" src="../../assets/home.png">
                        <img v-if="!homelink" src="../../assets/blackhome.png">
                        </a>
                      </li>

and my script

export default {
  data: function () {
    return {
     
      homeLink: false
    }
  },
  computed: {
      auth () {
        return this.$store.getters.isAuthenticated
      }
    },
  methods: {
    onLogout() {
      this.$store.dispatch('logout')
    },
  }
}
</script>

Thank you in advance for your time and help