Vue Js Category Subcategory Dropdown List

<!DOCTYPE html>
<html>

<body>
  <div id="app">
    <h3>Vue js Category Subcategory Dropdown Example</h3>
    <h2>Category Dropdown</h2>
    <select v-model="selectedCategory" @change="updateSubcategories">
      <option value="">Select Category</option>
      <option v-for="category in categories" :key="category" :value="category">{{ category }}</option>
    </select>

<h2>Subcategory Dropdown</h2>
    <select v-model="selectedSubcategory" :disabled="!selectedCategory">
      <option value="">Select Subcategory</option>
      <option v-for="subcategory in subcategories[selectedCategory]" :key="subcategory" :value="subcategory">{{
        subcategory
        }}</option>
    </select>

<div>
      <h2>Selected:</h2>
      <p>Category: {{ selectedCategory }}</p>
      <p>Subcategory: {{ selectedSubcategory }}</p>
    </div>

</div>
  <script type="module">
    const app = Vue.createApp({
      data() {
        return {
          selectedCategory: '',
          selectedSubcategory: '',
          categories: ['Home Decor', 'Sports Gear', 'Beauty Products', 'Toys'],
          subcategories: {
            'Home Decor': ['Furniture', 'Lighting', 'Wall Art', 'Candles'],
            'Sports Gear': ['Running Shoes', 'Fitness Trackers', 'Sports Apparel', 'Outdoor Gear'],
            'Beauty Products': ['Skincare', 'Makeup', 'Haircare', 'Fragrances'],
            Toys: ['Action Figures', 'Board Games', 'Dolls', 'Educational Toys'],
          },

};
      },
      methods: {
        updateSubcategories() {
          // Reset subcategory when the category changes
          this.selectedSubcategory = '';
        },
      },
    });
    app.mount("#app");
  </script>
  <style>
    #app {
      margin: 0 auto;
      width: 500px;
      text-align: center;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
      padding: 20px;
    }

h3 {
      color: #333;
    }

h2 {
      margin-top: 20px;
      margin-bottom: 10px;
      color: #555;
    }

select {
      padding: 10px;
      margin-bottom: 10px;
      width: 100%;
      box-sizing: border-box;
    }

div {
      margin-top: 20px;
    }

p {
      margin: 5px 0;
      color: #777;
    }
  </style>
</body>

</html>