Vue Checkbox Disabled After Checked

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h3>Vue Checkbox Disabled After Checked</h3>
        <input type="checkbox" v-model="isChecked" v-bind:disabled="isDisabled">{{isChecked?'Checked':'Uncheck'}}
    </div>
    <script type="module">
        const app = Vue.createApp({
            data() {
                return {
                    isChecked: false,
                    isDisabled: false
                }
            },
            watch: {
                isChecked() {
                    if (this.isChecked) {
                        this.isDisabled = true;
                    }
                }
            }
        });
        app.mount('#app');
    </script>
    <style scoped>
        /* Style for the container element */
        #app {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

/* Style for the checkbox element */
        input[type=checkbox] {
            margin-right: 10px;
        }

/* Style for the label text */
        label {
            font-size: 18px;
        }
    </style>

</body>

</html>