How can I smoothly change images in Vue.Js?

Question

Vue.js

Guys, hello, how can I smoothly change pictures in vue?
I attached the element via ref, after the mousover and mouseout events I change the pictures (icons), but how can I achieve smoothness?

a(href="#" class="_available-a" @mouseover="changeIcon" @mouseout="changeIconBack")
    img(src="~assets/img/chrome_icon-white(png).png", 
    alt="chrome icon" 
    ref='icon' 
    width='25')
    span Chrome

changeIconLogo(){
  this.$refs.logoSite.src = require("~/assets/img/logoNotEmpty.png")},
 changeIconBackLogo(){
  this.$refs.logoSite.src = require("~/assets/img/logo_empty.png")}

Answer 1

transition :

data: () => ({
  image: 0,
  images: [ 'раз картинка', 'два картинка', 'три картинка' ],
}),

<button v-for="(n, i) in images" @click="image = i">
  Показать картинку #{{ i }}
</button>

<transition name="image" mode="out-in">
  <img :key="image" :src="images[image]">
</transition>

.image-enter-active,
.image-leave-active {
  transition: opacity .3s;
}

.image-enter,
.image-leave-to {
  opacity: 0;
}

https://jsfiddle.net/po6ge103/