Vue Js Enable Disable Dropdown

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h3>Vue Js Enable Disable Dropdown</h3>
    <select v-model="selectedOption" :disabled="isDisabled">
      <option disabled value="">Please select one</option>
      <option v-for="option in options" :value="option.id">{{ option.language }}</option>
    </select>
    <button @click="isDisabled = !isDisabled">Toggle Disabled</button>
  </div>
  <script type="module">
    const app = new Vue({
      el: "#app",
      data() {
        return {
          isDisabled: true,
          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' },
          ]
        }
      }
    });
  </script>
</body>
<style scoped>
  /* Center the app container */
  #app {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 50px auto;
  }

/* Style the dropdown */
  select {
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
    outline: none;
    margin-top: 10px;
    cursor: pointer;
  }

/* Style the button */
  button {
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    border: none;
    outline: none;
    margin-top: 10px;
    cursor: pointer;
    background-color: #4CAF50;
    color: #fff;
  }

/* Style the button on hover */
  button:hover {
    background-color: #3e8e41;
  }
</style>

</html>