Vue multiselect dropdown with checkbox

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@3.2.21/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <h3>Vue Dropdown Multiple Select with Checkbox</h3>
    <div class="dropdown" @click="isDropdownOpen = !isDropdownOpen">
      <div class="selected-options">
        <span v-if="selectedOptions.length === 0">Select options</span>
        <span v-else-if="selectedOptions.length === 1">{{ selectedOptions[0].label }}</span>
        <span v-else>{{ selectedOptions.length }} options selected</span>
      </div>
      <div class="dropdown-menu" v-show="isDropdownOpen">
        <div class="option" v-for="option in options" :key="option.value">
          <label>
            <input type="checkbox" :value="option.value" v-model="option.checked" @change="updateSelectedOptions">
            {{ option.label }}
          </label>
        </div>
      </div>
    </div>
  </div>
  <script type="module">
    const app = Vue.createApp({
      data() {
        return {
          options: [
            { label: 'Vue', value: 'Vue', checked: false },
            { label: 'React', value: 'React', checked: false },
            { label: 'Angular', value: 'Angular', checked: false },
            { label: 'PHP', value: 'PHP', checked: false },
          ],
          selectedOptions: [],
          isDropdownOpen: false
        };
      },
      methods: {
        updateSelectedOptions() {
          this.selectedOptions = this.options.filter(option => option.checked);
        }
      }
    });
    app.mount('#app');
  </script>
  <style scoped>
    #app {
      font-family: Arial, sans-serif;
      padding: 20px;
      margin: 0;
    }

h3 {
      font-size: 1.5rem;
      margin-bottom: 10px;
    }

.dropdown {
      position: relative;
      display: inline-block;
      width: 200px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

.dropdown .selected-options {
      display: block;
      padding: 10px;
      cursor: pointer;
    }

.dropdown .dropdown-menu {
      position: absolute;
      top: 100%;
      left: 0;
      z-index: 1;
      background-color: #fff;
      border: 1px solid #ccc;
      border-top: none;
      border-radius: 0 0 4px 4px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      overflow: auto;
      max-height: 200px;
      width: 100%;
    }

.dropdown .dropdown-menu .option {
      display: block;
      padding: 10px;
      border-bottom: 1px solid #ccc;
      transition: background-color 0.3s ease;
    }

.dropdown .dropdown-menu .option:last-child {
      border-bottom: none;
    }

.dropdown .dropdown-menu .option label {
      display: block;
    }

.dropdown .dropdown-menu .option input[type="checkbox"] {
      margin-right: 10px;
    }

.dropdown .dropdown-menu .option input[type="checkbox"]:checked+span {
      font-weight: bold;
    }

.dropdown .dropdown-menu .option input[type="checkbox"]:focus+span {
      outline: 2px solid #7fb3d5;
    }

.dropdown .dropdown-menu .option:hover {
      background-color: #f2f2f2;
    }

.dropdown .dropdown-menu .option span {
      display: inline-block;
      width: calc(100% - 30px);
    }

.dropdown .dropdown-menu .option .checkbox-container {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 1px solid #ccc;
      border-radius: 4px;
      vertical-align: middle;
      position: relative;
    }

.dropdown .dropdown-menu .option .checkbox-container:after {
      content: "";
      display: block;
      position: absolute;
      top: 4px;
      left: 8px;
      width: 5px;
      height: 9px;
      border: solid #fff;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
      opacity: 0;
      transition: opacity 0.2s ease;
    }

.dropdown .dropdown-menu .option input[type="checkbox"]:checked+span .checkbox-container:after {
      opacity: 1;
    }
  </style>
</body>

</html>