Vue Checkbox Checked Event

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h3>Vue Checkbox Checked Event</h3>
        <label>
            <input type="checkbox" v-model="isChecked" @change="handleCheckedChange">
            Checkbox Label
        </label>
        <Pre v-if="result">Output: {{result}}</Pre>
   </div>
    <script type="module">
        const app = Vue.createApp({
            data() {
                return {
                    isChecked: false,
                    result: ''
                };
            },
            methods: {
                handleCheckedChange() {
                    // Get the current value of the checkbox
                    const isChecked = this.isChecked;

// Do something based on the value of the checkbox
                    if (isChecked) {
                        this.result = 'Checkbox is checked!';
                        // ... do something else when the checkbox is checked ...
                    } else {
                        this.result = 'Checkbox is unchecked!';
                        // ... do something else when the checkbox is unchecked ...
                    }
                }
            }
        });
        app.mount('#app');
    </script>
    <style>
        #app {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-family: Arial, sans-serif;
            margin-top: 50px;
        }
  </style>
</body>

</html>