Loading data in select vue js?

Question

JavaScript

There is a select component

<template>
    <div>
        <div class="vue-dropdown" :class="{'vue-active':toggle}">
            <span @click="toggle = !toggle">{{ value.length ? value : defaultValue }}</span>
            <div class="vue-dropdown-collapsed" v-if="this.toggle">
                <input type="text" v-model="search" v-if="showSearch === 'true'" :placeholder="inputPlaceholder" @click="toggle == true">
                <ul>
                    <li v-for="(option, index) in options" :key="index" @click="toggle = false, value = option.name, selectedItem(option)" v-if="option.name.toLowerCase().indexOf(search.toLowerCase()) !== -1">{{ option.name }}</li>
                </ul>
            </div>
        </div>
    </div>
</template>

And there is such a component for the form

<template>
    <div>
        <div v-for="(field, index) in formFields" :key="index"> 
            <dropdown :id="field.id" @open="fetchDropdownData(field.id)" v-else-if="field.type == 'select'" :options="dropdownsData[field.id]" default-value="Make a choice" show-search="false" input-placeholder="Выберите"></dropdown>
        </div>
    </div>
</template>

Form generated from JSON

formFields: [
    {
        name: 'my_field',
        class: 'moi_class',
        type: 'input',
        component: 'ui_input',
        id: 1
    },
    {
        name: 'brand',
        class: 'moi_class',
        type: 'select',
        component: 'dropdown',
        id: 2
    },
    {
        name: 'model',
        class: 'moi_class',
        type: 'select',
        component: 'dropdown',
        id: 3
    },
    {
        name: 'brand',
        class: 'moi_class',
        type: 'select',
        component: 'dropdown',
        id: 4
    },
    {
        name: 'model',
        class: 'moi_class',
        type: 'select',
        component: 'dropdown',
        id: 5
    },
    {
        name: 'brand',
        class: 'moi_class',
        type: 'select',
        component: 'dropdown',
        id: 6
    },
    {
        name: 'model',
        class: 'moi_class',
        type: 'select',
        component: 'dropdown',
        id: 7
    },
    {
        name: 'brand',
        class: 'moi_class',
        type: 'select',
        component: 'dropdown',
        id: 8
    },
    {
        name: 'model',
        class: 'moi_class',
        type: 'select',
        component: 'dropdown',
        id: 9
    }
]

So I'm trying to load data in select

fetchDropdownData(id) {
    const currentDropdownData = axios.get('../../../static/json/v1/auto.json').then(response => {
        this.dropdownsData.push(response.data);
    }).catch(e => {
        console.log(e)
    })
    console.log(this.dropdownsData)
}

Now about the problems:
1) this.dropdownsDataarrays of objects fall;
in :options="dropdownsData[field.id]"we select by id
But after all, the index in the array will not always be equal to this id, how to be in this situation?
2) for example, there will be two selects, 1 - car brands, 2 - models.
json itself will look something like this

{
   "id": 17,
   "name": "BMW",
   "value": "BMW",
   "models": [
      "i3",
      "i8",
      "M3",
      "M4",
      "M5",
      "M6",
      "X1",
      "X3",
      "X4",
      "X5",
      "X6"
   ]
}

so the second select should not work until select 1 is selected, and in select 2 pass an array = to the value of the first select;

Answer 1

well, look.
1) well, it would be nice to return this information along with information about the field

formFields: [
    {
        name: 'my_field',
        data: [/** your data **/],
        class: 'moi_class',
        type: 'input',
        component: 'ui_input',
        id: 1
    },
    {
        name: 'brand',
        data: [/** your data **/],
        class: 'moi_class',
        type: 'select',
        component: 'dropdown',
        id: 2
    },
]

then you don't need to do extra requests.
2) well, here, through the loop, display all the brands of the car. when choosing, you pass the selected entity, which contains the models, into the function as a parameter. this entity must reactively appear in the second select and un-disable it (disable it until the entity is thrown into it)