app_vue2/components/Layout/Alert/Content.vue

<template>
  <v-alert
    v-model="show"
    :type="alert.type"
    class="position"
    border="left"
    width="400"
    dismissible
    transition="fade-transition"
    @mouseover="onMouseOver"
    @mouseout="onMouseOut"
  >
    {{ $t(alert.message) }}
  </v-alert>
</template>

<script lang="ts">
import { defineComponent, ref, Ref } from '@vue/composition-api'
import { useContext } from '@nuxtjs/composition-api'
import { alert } from '~/types/interfaces'

export default defineComponent({
  props: {
    alert: {
      type: Object as () => alert,
      required: true
    }
  },
  setup () {
    const { store } = useContext()
    const show:Ref<boolean> = ref(true)
    let timeout: any = null

    const clearAlert = (time:number = 2000) => {
      timeout = setTimeout(() => {
        show.value = false
        store.dispatch('page/removeSlowlyAlert')
      }, time)
    }

    const onMouseOver = () => {
      clearTimeout(timeout)
    }

    const onMouseOut = () => {
      clearAlert(1000)
    }

    clearAlert()

    return {
      show,
      onMouseOver,
      onMouseOut
    }
  }
})
</script>

<style scoped>
</style>