Component.vue

<template>
    <div class="regions container">
        <div v-if="regions.length == 0" class="regions-group text-center">
          <div class="loader-container">
            <div class="loader">
              <div class="ball-beat">
                 <div></div>
                 <div></div>
                 <div></div>
              </div>
            </div>
          </div>
        </div>
        <div v-else v-for="regions in regionsGroup" class="regions-group columns">
            <div v-for="region in regions" class="column col-3">
                <p>{{region.name}}</p>
                <div class="form-group" v-for="province in region.provinces">
                    <label class="form-checkbox">
                      <input type="checkbox" :value="province.name" v-model="locationProxy" @change="updateLocation"/>
                      <i class="form-icon"></i> {{province.name}}
                    </label>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import isEmpty from 'lodash/isEmpty'
    import chunk from 'lodash/chunk'
    export default {
        name: 'region-selector',
        props: ['location'],
        data() {
            return {
                regions: [],
                locationProxy: []
            }
        },
        computed: {
            regionsGroup() {
                return chunk(this.regions, 4)
            }
        },
        methods: {
            updateLocation(name) {
                this.$emit('input', this.locationProxy)
            }
        },
        created() {
            const host = location.host
            const protocol = location.protocol
            const headers = new Headers({
                Accept: 'application/json',
                'Content-Type': 'application/json'
            })
            const url = new URL(`${protocol}/${host}/region`)
            if(isEmpty(this.options)) {
                fetch(url, {
                    method: 'GET',
                    headers,
                }).then(res => {
                    return res.json()
                }).then(({ regions }) => {
                    this.isFetching = false
                    this.regions = [].concat(this.regions, regions)
                }).catch(err => console.log(err))
            }
        }
    }
</script>

Selectbox.issue.vue

<template>
    <div class="search-box">
        <div class="container grid-960">
            <form @submit.prevent="search({ keywords, location })">
                <div class="input-group">
                    <input type="text" class="form-input" @blur="handleBlur" v-model="keywords" placeholder="Search" />
                    <button @click.prevent="toggle" class="btn btn-primary input-group-btn"><i class="icon icon-location"></i></button>
                    <button @click.prevent="toggle" class="btn btn-primary input-group-btn"><i class="icon icon-more-vert"></i></button>
                    <button class="btn btn-primary input-group-btn"><i class="icon icon-search"></i></button>
                </div>
                <transition name="slide">
                    <region-selector v-if="isOpen" v-model="location"></region-selector>
                </transition>
            </form>
        </div>
    </div>
</template>

<script>
    import debounce from 'lodash/debounce'
    import RegionSelector from './regions'
    export default {
        name: 'search',
        props: ['clearCollection', 'restoreCollection'],
        data() {
            return {
                isOpen: false,
                keywords: '',
                location: [],
                isFetching: false
            }
        },
        components: {
            RegionSelector
        },
        methods: {
            search: debounce(function({keywords, location}) {
                this.isOpen = true
                console.log(keywords, location)
            }, 1000, { maxWait: 1000 }),
            toggle() {
                this.isOpen = !this.isOpen
                this.isFetching = true
            },
            handleBlur() {
                this.isOpen = false;
                this.restoreCollection()
            },
            scrollObserver() {
                const base = document.querySelector('.navbar-container')
                const baseOffset = base.offsetHeight
                this.$el.classList.remove('scrolled')
                if(window.pageYOffset >= baseOffset) {
                    this.$el.classList.add('scrolled')
                }
            }
        },
        created () {
            window.addEventListener('scroll', this.scrollObserver);
        },
        destroyed () {
            window.removeEventListener('scroll', this.scrollObserver);
        }
    }
</script>

<style scoped>
    form {
        position: relative;
    }
</style>