Vue js Disable selected dropdown options

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <select v-model="selected" multiple>
            <option v-for="option in options" v-bind:value="option.value" :disabled="selected.includes(option.value)">
                {{ option.text }}
            </option>
        </select>
        <p>Selected: {{ selected }}</p>
    </div>
    <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    selected: ['A', 'B', 'D'],
                    options: [
                        { text: 'One', value: 'A' },
                        { text: 'Two', value: 'B' },
                        { text: 'Three', value: 'C' },
                        { text: 'Four', value: 'D' },
                        { text: 'Five', value: 'E' },
                        { text: 'Six', value: 'F' },
                        { text: 'Seven', value: 'G' },
                    ]
                }

}
        });
    </script>
    <style>
        #app {
            margin: 20px auto;
            font-family: Arial, sans-serif;
            width: 400px;
        }

#app p{
            font-weight: bold;
        }

select {
            width: 200px;
            height: 150px;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
            outline: none;
            transition: border-color 0.3s ease;
        }

select:focus {
            border-color: #5c7cfa;
        }

/* CSS styles for the options */
        option {
            padding: 5px;
            font-size: 14px;
            background-color: #f7f7f7;
            color: #333;
        }

option:checked {
            background-color: #5c7cfa;
            color: #fff;
        }

option:disabled {
            background-color: #f2f2f2;
            color: #999;
        }
    </style>
</body>

</html>