Vue Js Disable Checkbox after being Checked

<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

<div id="app">
        <h3>Vue js Disable Checkbox after being Checked</h3>
        <input type="checkbox" id="checkbox" v-model="isChecked" :disabled="isDisabled">
        <label for="checkbox">Checkbox</label>
    </div>

<script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    isChecked: false,
                    isDisabled: false
                };
            },
            watch: {
                isChecked(value) {
                    if (value) {
                        this.isDisabled = true;
                    }
                }
            }
        });
    </script>
    <style>
        #app {
            text-align: center;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
            width: 600px;
            margin: 0 auto;
            padding: 20px
        }

h3 {
            margin-bottom: 20px;
        }

input[type="checkbox"] {
            margin-right: 10px;
        }

label {
            font-weight: bold;
        }

input[type="checkbox"]:disabled+label {
            color: #999999;
            cursor: not-allowed;
        }
    </style>
</body>

</html>