How to make multiple elements disappear randomly in vuejs?

Question

Vue.js

I am new to vue. I can't think. It is necessary to make several messages, which will disappear at different speeds.
those.

<message>Сообщение исчезнет через 5 секунд</message>
<message>Сообщение исчезнет через 20 секунд</message>
<message>Сообщение исчезнет через 15 секунд</message>

So far, all I have figured out is what needs to be done through v-for, for each message do v-if , the visible field, I will change it by timeout, it will disappear. But this doesn't seem optimal to me.
There is some other way to insert a piece of html / component in the right place, and most importantly - to remove it. Ideally, a function that itself adds an element removes it itself.
UPD : As I just did. ( code with a minor error, in removing an element from an array )
The component that is being inserted.

<template>
    <div class="alert alert-dismissible fade show"
         v-bind:class="[currentClass]"
    >
        <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
            <i class="nc-icon nc-simple-remove"></i>
        </button>
        <span>    {{ message }}</span>
    </div>
</template>
<script>
    export default {
        name: "Alert",
        props: [
            'message', 'currentClass'
        ],
    }
</script>

How to insert into html:

<alert
                    v-for="(item,index) in alertsArr"
                    :key="index"
                    :message="item.message"
                    :current-class="item.currentClass"
                ></alert>

And a piece of code that handles it.

export default {
        components: {
            alert: Alert
        },

        methods: {
            setAlert() {
                this.addAlert("da", "alert-danger ", 1000);
            },
            addAlert(message, currentClass, time) {
                this.$set(this.alertsArr, this.indexOfAlerts, {
                    'message': message,
                    'currentClass': currentClass,
                });
                
                setTimeout(function () {
                    this.$delete(this.alertsArr, this.indexOfAlerts);
                //    console.info(this.alertsArr);
                    this.indexOfAlerts++;
                }.bind(this), time);
            },
        },
        data() {
            return {
                alertsArr: [],
                indexOfAlerts: 0,

It seems to me somehow irrational. All this fuss with the array creates a lot of movement and I can't insert this component somewhere else on the same page.
Ideally, I need the ability, let's say by id html element to insert.

Answer 1

So far, all I have figured out is what needs to be done through v-for, for each message do v-if , the visible field, I will change it by timeout, it will disappear. But this doesn't seem optimal to me.

Almost so. You need to make the "visible" field, the key field and display not the entire array, but a computed property with an already filtered array.