How to correctly load data in select?

Question

Vue.js

Made some dropdown 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>

<script>
    import axios from 'axios';

    export default {
        props: [
            "options",
            "defaultValue",
            "showSearch",
            "inputPlaceholder"
        ],
        data() {
            return {
                toggle: false,
                value: "",
                search: ""
            };
        },
        watch: {
            toggle: function (val) {
                if(val === false) {
                    this.search = '';
                }
            }
        },
        methods: {
            selectedItem(value) {
                console.log(value)
            }
        }
    }
</script>

Now in methods to display the object that we have chosen.

<template>
    <div>
        <div v-for="(field, index) in formFields" :key="index"> 
            <ui_input v-if="field.type == 'input'" v-model="input" @change="change($event)"></ui_input>
            <dropdown :id="field.id" v-else-if="field.type == 'select'" :options="getAuto" default-value="Make a choice" show-search="true" input-placeholder="Выберите"></dropdown>
        </div>
    </div>
</template>

In general, the essence of the issue.
JSON arrives

formFields: [
    {
        name: 'my_field',
        class: 'moi_class',
        type: 'input',
        component: 'ui_input',
        id: 'moi_id1'
    },
    {
        name: 'brand',
        class: 'moi_class',
        type: 'select',
        component: 'dropdown',
        id: 'moi_id2'
    },
    {
        name: 'model',
        class: 'moi_class',
        type: 'select',
        component: 'dropdown',
        id: 'moi_id4'
    }
]

I am displaying elements from this JSON on the page, but each select must have its own data loaded, is this how to implement it? Moreover, some selects are tied to each other. Tipo you choose the brand of the car in one select, in the other you choose the models for this car. And some selects are not connected in any way.
I can't figure out how to implement this.

Answer 1

In the component:

watch: {
  toggle: function (val) {
    if(val) {
       this.$emit('open');
    } else {
       this.search = '';
    }
  }
},

Where do you use:

<dropdown @open="fetchData1"></dropdown>
<dropdown @open="fetchData2"></dropdown>
<dropdown @open="fetchData3"></dropdown>