shipping-portal/resources/assets/vue/components/orders/sections/OrderSearchSectionComponent.vue

<template>
    <div class="row">
        <div class="col">
            <div class="row m-b-20 flex-sm-row flex-column-reverse" v-if="$store.getters.isAdmin">
                <div class="col-12 col-md">
                    <div class="row mt-3 mt-md-0">
                        <div class="col">
                            <div class="input-group form-group no-margin form-group-default">
                                <input class="form-control p-t-10" placeholder="Search Order No." v-model="query">
                                <button type="button" class="btn btn-primary" @click="search">
                                    <i class="fa fa-search"></i>
                                </button>
                                <button type="button" class="btn btn-default bg-master-light m-l-5" @click="$store.dispatch('toggleSection', {name: 'searchOrderSection', status: false})">
                                    Reset
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <list-component section="searchOrderListSection" :endpoint="route('api.order.list')" :options="{reference_like:query, with_packing_lists: true}" :columns=3 v-if="$store.getters.isShowing('searchOrderSection')">
                <template slot="list" slot-scope="{data}">
                    <order-component :data="data"></order-component>
                </template>
            </list-component>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                query: ''
            }
        },
        methods: {
            search() {
                this.$store.dispatch('toggleSection', {name: 'searchOrderSection', status: true});
                this.$store.dispatch('updateListQueue', {name: 'searchOrderListSection', filters: {reference_like:query, with_packing_lists: true}});
            }
        }
    }
</script>