Vue Disable select option

<!DOCTYPE html>
<html>

<body>
  <div id="app">
    <h3>Vue Disable select option</h3>
    <select v-model="selectedOption" @change="onChange">
      <option disabled value="">Please select one</option>
      <option v-for="(option, index) in options" :value="option.value" :key="index">{{ option.label }}</option>
    </select>
   
  </div>
  <script type="module">
    const app = Vue.createApp({
      data() {
        return {
          options: [
            { label: 'Vue', value: 'Vue' },
            { label: 'React', value: 'React' },
            { label: 'Angular', value: 'Angular' },
          ],
          selectedOption: '',
        };
      },
   
    });

app.mount("#app");
  </script>
  <style scoped>
    #app {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

select {
      padding: 8px;
      font-size: 16px;
      border-radius: 4px;
      border: 1px solid #ccc;
      margin-bottom: 16px;
    }

p {
      font-size: 14px;
    }
  </style>
</body>

</html>