Проверить в Vue.js если позиция элемента с анимацией за 100%?

Есть компонент Toy.vue, при анимации falls-toy в top: 100% у меня элемент скрывается за окно браузера. Как отследить, если элемент в позиции top: 100%, то вызвать метод который обработает это? Напишет console.log('Элемент скрылся')

<template>
 <div>
  <transition name="fade">
    <div v-if="show">
      <img :style="`top: ${randomInt(-50, -300)}%;
                    left: ${randomInt(0, 80)}%;
                    padding: ${randomInt(40, 50)}px`
        "
        @click="goCart"
        class="toy"
        v-if="toyImg"
        :src="toyImg"
      >
    </div>
  </transition>
 </div>
</template>

<script>
 export default {
 name: 'Toy',
 props: {
   randomInt: { type: Function },
   randomFromArr: { type: Function },
 },
 data() {
   return {
    show: true,
    toysImg: [
      'default', 'purple', 'gold',
      'blue', 'green'
    ],
    toyImg: ''
 }
},
methods: {
  goCart() {
    this.show = false
    this.soundClickOK()

    // Добавить в корзину
    this.$emit('inCart')
    this.$emit('newToy')

    setTimeout(() => {
       this.show = true
    }, 3000)
  },
  soundClickOK() {
    let audio = new Audio(require('../assets/sounds/toy.mp3'))
    audio.play();
  },
  getRandomToyImg() {
    return require(`../assets/images/toys/toy_${this.randomFromArr(this.toysImg)}.png`)
  },
  },
  created () {
    this.toyImg = this.getRandomToyImg()
  }
}
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.toy {
  cursor: pointer;
  position: absolute;
  width: 100px;
  animation: falls-toy 13s infinite;
 }

 @keyframes falls-toy {
  0% {
     transform: rotate(0);
  }

  20% {
     transform: rotate(-10deg);
  }

  50% {
     transform: rotate(-30deg);
  }

  80% {
     transform: rotate(10deg);
  }

  100% {
     top: 100%;
     transform: rotate(30deg);
  }
 }
</style>