Vue Simple Component

HTML

<div id="app">

  <div v-for="(field, index) in formFields" :key="index"> 
    <dropdown
      v-if="!field.depend || formData[field.depend]"
      :id="field.id"
      v-model="field.value"
      :options="field.depend ? dependentData[field.depend][field.name] : field.fields"
      default-value="Make a choice"
      show-search="true"
      input-placeholder="Выберите"
    />
  </div>

</div>

Babel + JSX

Vue.component('dropdown', {
  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="update(option)" v-if="option.name.toLowerCase().indexOf(search.toLowerCase()) !== -1">{{ option.name }}</li>
                </ul>
            </div>
        </div>
    </div>
`,
  props: [ 'value', "options", "defaultValue", "showSearch", "inputPlaceholder" ],
  data() {
    return {
      toggle: false,
      search: ""
    };
  },
  watch: {
    toggle: function (val) {
      if(val) {
        this.$emit('open');
      } else {
        this.search = '';
      }
    },
  },
  methods: {
    update(option) {
      this.toggle = false
      this.$emit('input', option.name)
    }
  }
});

new Vue({
  el: '#app',
  data: {
    dependentData: {},
    formFields: [ {
      name: 'brand',
      type: 'select',
      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',
    }, {
      name: 'country',
      type: 'select',
      depend: 'brand',
    } ].map(n => ({ ...n, value: '' })),
  },
  computed: {
    formData() {
      return this.formFields.reduce((data, f) => ({ ...data, [f.name]: f.value }), {})
    }
  },
  watch: {
    'formData.brand'(val) {
      this.dependentData.brand = {
     ...