<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>

When I enter page my animation(blink) works good,but when i go to another page when animation work i have thih error in console I think that i need to stop function but how can i do it? How can i stop this function when i leave page?