<template lang="pug"> .tasks h2 .task(v-for='(task, index) in tasks' :key='task.index' :ref="`task${index}`" class="list-item" ) .name(@click="taskModal(index)") | {{task.name}} .description(@click="taskModal(index)") | {{task.description1}} .time(@click="taskModal(index)") | {{task.time}} button(class='delete-task' @click="deleteCart(index)") - </template> <script lang="ts"> import { computed, defineComponent } from 'vue' import { TaskInterface } from '@/types/task.interface' import { useStore } from 'vuex' export default defineComponent({ setup () { const store = useStore() const tasks = computed(() => store.state.tasks) return { tasks } }, data () { return { TaskStatusEnum, showModal: 'none', showDetailsModal: false, task: '' } }, methods: { blink () { for (let i = 0; i < Object.values(this.$refs).length; i++) { setTimeout(() => { Object.values(this.$refs as unknown as HTMLElement)[i].classList.add('increase') }, 2000 * i) setTimeout(() => { Object.values(this.$refs as unknown as HTMLElement)[i].classList.remove('increase') }, 2000 * Object.values(this.$refs).length) } } }, mounted () { this.blink() } }) </script>

Cuando entro en la página, mi animación (parpadeo) funciona bien, pero cuando voy a otra página cuando la animación funciona, tengo este error en la consola. Creo que necesito detener la función, pero ¿cómo puedo hacerlo? ¿Cómo puedo detener esta función cuando salgo de la página?