<template>
    <div>
        <filter-box class="form-control form-control-sm" @filter="loadData" v-model="searchKey"></filter-box>
    </div>
</template>
<script>
    export default {
        data()
        {
            return {
                searchKey: '', 
                results: [],
            }
        }
        mounted()
        {
            this.loadData();
        }
        methods: {
            loadData(filterString=null)
            {
                // the function argument filterString will also have the filter string. You can use wither that or the v-model.
                
                let filter = this.filterString == null ? '' : this.filterString;

                axios.get(`/api/countries?filter=${filter}`)
                    .then(response => this.results = response.data);
            }
        }
    }
</script>