Vuetify Disable Button for Certain Amount of Time

<!DOCTYPE html>
<html>

<body>
    <div id="app">
        <v-app>
            <v-container>
                <h3>Vuetify Disable Button for Certain Amount of Time</h3>
                <v-btn @click="disableButton" color="primary" :disabled="isButtonDisabled">
                    {{ isButtonDisabled ? 'Wait for 5 sec' : 'Click Me' }}
                </v-btn>

</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();

createApp({
            data() {
                return {
                    isButtonDisabled: false, // Initially, the button is not disabled
                };
            },
            methods: {
                disableButton() {
                    // Disable the button
                    this.isButtonDisabled = true;

// Set a timeout to re-enable the button after a certain amount of time (e.g., 5 seconds)
                    setTimeout(() => {
                        this.isButtonDisabled = false;
                    }, 5000); // 5000 milliseconds = 5 seconds
                },
            },
        })
            .use(vuetify)
            .mount('#app'); // Mount the app to the #app element
    </script>
</body>

</html>