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"
    v-on:mouseover="onMouseOver"
    v-on:mouseout="onMouseOut"
  >
    {{ $t(alert.message) }}
  </v-alert>
</template>

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

  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>