Vuetify Alert fade after a duration

<!DOCTYPE html>
<html>

<body>
    <div id="app">
        <v-app>
            <v-container elevation="1">
                <h3>Vuetify Alert Fade After a duration</h3>
                <v-btn @click="showAlert" color="primary">Show Alert</v-btn>
                <v-alert v-if="visible" type="success" closable transition="fade-transition">
                    {{ message }}
                </v-alert>
                <v-alert v-if="visible" type="warning" closable transition="fade-transition">
                    {{ message }}
                </v-alert>
                <v-alert v-if="visible" type="info" closable transition="fade-transition">
                    {{ message }}
                </v-alert>
                <v-alert v-if="visible" type="error" closable transition="fade-transition">
                    {{ message }}
                </v-alert>

</v-container>

</v-app>
    </div>
    
    <script src="https://unpkg.com/vue@3.2.21/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@3.1.11/dist/vuetify.min.js"></script>
    
    <script type="module">
        const { createApp } = Vue;
        const { createVuetify } = Vuetify;
        const vuetify = createVuetify();
        const app = createApp({
            data() {
                return {
                    visible: false,
                    message: "",
                };
            },
            methods: {
                showAlert() {
                    this.message = "This is your alert message";
                    this.visible = true;
                    setTimeout(() => {
                        this.visible = false;
                    }, 5000); // Duration in milliseconds (e.g., 5 seconds)
                },
            },

}).use(vuetify).mount('#app'); // Mount the app to the #app element
    </script>
</body>

</html>