Dependency of several selects?

Question

Vue.js

Hello, please tell me
there is such a custom select

<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,
                selectedItem: '',
                value: "",
                search: ""
            };
        },
        watch: {
            toggle: function (val) {
                if(val) {
                    this.$emit('open');
                    
                } else {
                    this.search = '';
                }
            },
            selectedItem: function(val) {
                this.$emit('selectedItem', val)
            }
        },
        methods: {}
    }
</script>

There is something like this JSON from the server

formFields: [
    {
        name: 'brand',
        type: 'select',
        active: true,
        fields: [
            {
                id: 0,
                name: 'audi',
                value: 'audi'
            },
            {
                id: 1,
                name: 'bmw',
                value: 'bmw'
            },
            {
                id: 2,
                name: 'feat',
                value: 'feat'
            },
            {
                id: 3,
                name: 'shkoda',
                value: 'shkoda'
            },
            {
                id: 4,
                name: 'MB',
                value: 'MB'
            },
            {
                id: 5,
                name: 'seat',
                value: 'seat'
            },
            {
                id: 6,
                name: 'mazda',
                value: 'mazda'
            },
        ]
    },
    {
        name: 'model',
        type: 'select',
        depend: ["brand"],
        active: false,
        fields: []
    },
    {
        name: 'country',
        type: 'select',
        depend: ["brand"],
        active: false,
        fields: []
    },
    {
        name: 'country',
        type: 'input',
        depend: ["brand"],
        active: false,
        fields: []
    }
]

According to this JSON, the form should be generated.
Here I am generating the form

<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" @selectedItem="selected($event)" v-else-if="field.type == 'select'" :options="field.fields" default-value="Make a choice" show-search="true" input-placeholder="Выберите"></dropdown>
</div>

Here is the output to the console

methods: {
    selected(val) {
        axios.get('../../../static/json/v1/models/' + val.id + '.json').then(response => {
            console.log(response.data)
        }).catch(e => {
            console.log(e)
        })
    }
},

The object that we have selected is displayed in the console, now I have two questions:
1) how to make a dependency? That is, the select model should not be active until the select brand is selected
2) how to transfer the data that is displayed to the console after the object is selected in the select model?
Moreover, you need to take into account that item 1 and item 2 should work for all objects that have the depend property

Answer 1

how to make dependency? That is, select model should not be active until select brand is selected.

For example, yes. You add the value property to the objects on the basis of which the controls are created, pass it to the v-model of the corresponding element (you will need to implement the v-model for your dropdown). You make a computed formData property based on these value. And you set v-if elements - if the element has a dependency, then until the corresponding field in formData is filled, the element is not created (or you implement disabled - with similar logic).
Well, PROBABLY, instead of outputting to the console, this data needs to be saved somewhere - and transferred from there to the appropriate dropdown.