Child1.vue

<template>
  <!--    Dropdown 1-->
  <div class="dropdown-container">
    <div class="dropdown-title-container">
      <label data-test="dropdown-title">Fruits</label>
    </div>
    <DropdownContainer :model-value="this.firstDropdownValue"
              :options="this.firstDropdownOptions"
              placeholder="Please select a fruit" @update:model-value="(event) =>
          updateFirstDropdownValueAndLoadSecondDropdownOptions(event)">
    </DropdownContainer>
  </div>

  <!--    Dropdown 2-->
  <div class="dropdown-container">
    <div class="dropdown-title-container">
      <label data-test="dropdown-title">Vegetables</label>
    </div>
    <DropdownContainer :model-value="this.secondDropdownValue"
              :options="this.secondDropdownOptions" @update:model-value="(event) => updateModelValue(event, 'secondDropdownValue')"
              placeholder="Please select a weight">
    </DropdownContainer>
  </div>
</template>

<script>
import DropdownContainer from "@/components/DropdownContainer";
export default {
  name: "Child1",
  components: {DropdownContainer},
  data() {
    return {
      response: [
        {
          name: 'apple',
          weights: [12, 15, 18, 20]
        }, {
          name: 'watermelon',
          weights: [40, 50, 20, 30]
        }, {
          name: 'mango',
          weights: [20, 30, 40, 50]
        }],
      firstDropdownOptions: ['apple', 'watermelon', 'mango'],
      secondDropdownOptions: []
    }
  },
  props: {
    firstDropdownValue: String,
    secondDropdownValue: String
  },
  methods: {
    async updateFirstDropdownValueAndLoadSecondDropdownOptions(event) {
      await this.updateModelValue(event, 'firstDropdownValue')
      this.loadSecondDropdownOptions('secondDropdownValue', '')
    },
    loadSecondDropdownOptions(type, value) {
      this.$emit(`update:secondDropdownValue`, '')
      this.secondDropdownOptions = this.response
          .find(firstDropdownOption => firstDropdownOption.name === this.firstDropdownValue)
          .weights;
    },
    updateModelValue(event, type) {
      this.$emit(`update:${type}`, event.value);
    }
  }
}
</script>

<style scoped>

</style>