Vue dropdown change event

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@3.2.21/dist/vue.global.js"></script>
</head>
<body>
  <div id="app" class="container">
    <h3>Vue Dropdown Change event </h3>
    <label for="country">Country:</label>
    <select id="country" v-model="selectedCountry" @change="handleCountryChange">
      <option value="" disabled>Select a country</option>
      <option v-for="country in countries" :key="country.code" :value="country.code">
        {{ country.name }}
      </option>
    </select>
    <label for="city">City:</label>
    <select id="city" v-model="selectedCity" :disabled="!selectedCountry">
      <option value="" disabled>Select a city</option>
      <option v-for="city in cities" :key="city" :value="city">{{ city }}</option>
    </select>
  </div>
  <script type="module">
    const app = Vue.createApp({
      data() {
        return {
          selectedCountry: '',
          selectedCity: '',
          cities: [],
          countries: [
            { code: 'us', name: 'United States', cities: ['New York', 'Los Angeles', 'Chicago'] },
            { code: 'uk', name: 'United Kingdom', cities: ['London', 'Manchester', 'Birmingham'] },
            { code: 'fr', name: 'France', cities: ['Paris', 'Marseille', 'Lyon'] },
          ],
        };
      },
      methods: {
        handleCountryChange() {
          // update the cities based on the selected country
          const selectedCountry = this.countries.find(country => country.code === this.selectedCountry);
          this.cities = selectedCountry ? selectedCountry.cities : [];
          // reset the selected city
          this.selectedCity = '';
        },
      },
    });
    app.mount('#app');
  </script>
  <style scoped>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

.container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }

label {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
    }

select {
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 16px;
      margin-bottom: 20px;
      width: 250px;
      max-width: 100%;
    }

.disabled {
      opacity: 0.5;
      pointer-events: none;
    }
  </style>
</body>

</html>