Vue Simple Component

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>
<div id="app">
  <div v-for="(field, index) in getFields" :key="index"> 
    <dropdown
      v-if="!field.depend || formData[field.depend]"
      :id="field.id"
      :value="field.value"
      @input="onInput(field.name, $event)"
      :options="getOptions(field)"
      default-value="Make a choice"
      show-search="true"
      input-placeholder="Выберите"
    />
  </div>
</div>

Babel + JSX

const store = new Vuex.Store({
    state: {
        fields: []
    },
    getters: {
    	getFields(state) {
      	return state.fields;
      }
    },
    mutations: {
        setFields(state, payload) {
            state.fields = payload
            console.log(state.fields)
        },
        updateValue(state, payload) {
            state.fields.find(n => n.name === payload.field).value = payload.value
        }
    },
    actions: {
        getData({ commit }) {
            axios.get('https://api.myjson.com/bins/q9pu2').then(response => {
              commit('setFields', response.data.formFields.map(n => ({ ...n, value: '' })))
            }).catch(errors => {
              console.error(errors);
            });
        }
    }
})


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',
  store,
  data: {
    dependentData: {}
  },
  methods: {
    getOptions(field) {
      if (!field.depend) {
   ...