Vue Js Dropdown Option Color change on select

<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 </head>
<body>
    <div id="app">
      
        <h3>Vue Js Change Color Dropdown Option</h3>
        <select v-model="selectedOption" style="width:250px" @change="changeColor">
            <option disabled value="">Please select one</option>
            <option v-for="option in options" :value="option.language"
                :style="{ color: option.color,backgroundColor:option.bgColor }">
                {{option.language}}</option>
        </select>
     </div>
    <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    selectedOption: '',
                    options: [
                        { id: 1, language: 'React', },
                        { id: 2, language: 'Vue', },
                        { id: 3, language: 'Angular' },
                        { id: 4, language: 'Node' },
                        { id: 5, language: 'Express' },
                        { id: 6, language: 'Bootstrap' },
                        { id: 7, language: 'MongoDb' },
                    ]
                }
            },
            methods: {
                changeColor() {
                    this.options.forEach(option => {
                        if (option.language === this.selectedOption) {
                            option.color = 'yellow';
                            option.bgColor = 'black'
                        }
                        else {
                            option.color = 'initial'
                            option.bgColor = 'initial'
                        }
                    }
                    )
                }
            }
        });
    </script>
</body>
</html>