flash message sometimes does not disappear in vue2.js - vue.js

Question

I have just made a flash message component, which receives flash messages from the eventBus and then displays the flash message for 3 seconds before disappearing. The component is as follows:
<template>
<transition name="fade">
<div v-if="visible" v-bind:class="type" role="alert">{{ message }}</div>
</transition>
</template>
<style scoped>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-to {
opacity: 0
}
</style>
<script>
import EventBus from '../../config/EventBus';
export default {
name: 'flash-view',
data() {
return {
type: '',
message: '',
visible: false,
};
},
mounted() {
EventBus.subscribeFlashMessage(data => this.setData(data));
setTimeout(() => (
this.visible = false
), 3000);
},
methods: {
setData(data) {
this.setType(data.type);
this.message = data.message;
this.visible = true;
},
setType(type) {
this.type = `alert alert-${type}`;
},
},
};
</script>
The component works perfectly for the first flash message, however if flash messages are triggered subsequently or if I change routes (VueRouter) then the flash message does not disappear. I presume this is because javascript is retriggered, which nulls the effect of setTimeout, however I have no idea how to fix this in Vue.

Answer 1

I have managed to fix the bug, thanks to Belmin Bedak's help. The following is now implemented with created() instead of mounted(), as mounted gets retriggered for every update cycle. Created() sets the listener once, and watch is used to check if the visible has been changed (this happens when a new event is pushed to the listener). If the visible is changed, the setTimeout gets triggered properly.
<template>
<transition name="fade">
<div
v-if="visible"
v-bind:class="type"
role="alert"
v-text="message"
>
</div>
</transition>
</template>
<style scoped>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-to {
opacity: 0
}
</style>
<script>
export default {
name: 'flash-view',
data() {
return {
type: '',
message: '',
visible: false,
};
},
created() {
this.$on('flashMessage', data => this.setData(data));
},
methods: {
setData(data) {
this.type = `alert alert-${data.type}`;
this.message = data.message;
this.visible = true;
},
setFadeOut() {
setTimeout(() => (
this.visible = false
), 2500);
},
},
watch: {
visible: 'setFadeOut',
},
};
</script>