Vue Js Disable Button for 5 Seconds

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>Vue Js Disable Button for 5 Seconds</h3>
        <button :disabled="isDisabled" @click="disableButton">
        {{ isDisabled ? 'Wait for 5 seconds...' : 'Click me' }}
        </button>
    </div>
    <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    isDisabled: false
                }
            },
            methods: {
                disableButton() {
                    this.isDisabled = true
                    setTimeout(() => {
                        this.isDisabled = false
                    }, 5000)
                }
            }
        });
    </script>
    <style scoped>
        #app {
            text-align: center;
        }

button {
            background-color: #4CAF50;
            /* Green */
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }

button:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
    </style>
</body>

</html>