Vue js Disable selected dropdown options

<!DOCTYPE html>
<html>

</head>

<body>
  <div id="app">
    <h3>Vue Js Disable selected dropdown options Example</h3>
    <select v-model="selectedValue">
      <option value="">Select Option</option>
      <option v-for="option in options" :value="option.value" :disabled="selectedValue === option.value">
        {{ option.label }}
      </option>
    </select>
    <p>Selected Value: {{ selectedValue }}</p>
  </div>

app.mount('#app');
  </script>

/* Styling for the select element */
    select {
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 4px;
      width: 200px;
      margin-bottom: 10px;
    }

/* Styling for the disabled options */
    option[disabled] {
      color: #ccc;
    }

/* Styling for the selected value paragraph */
    p {
      font-size: 16px;
      margin: 0;
    }
  </style>

</body>

</html>