Как отобразить результаты поиска в другом компоненте для другого компонента в algolia vue -instantsearch

Question

Это в моем publishers.blade.php файле

<section class="w-1/2x">
    <div class="ml-8">
        <p class="font-basic tracking-normal text-3xl mb-4 mt-4 font-normal text-black mr-2">All Wanted Publishers
        </p>

        @include('partials.filter',['countries'=> $countries])      
    </div>

    @forelse ($publishers as $publisher)    
    <publishers-view :publishers="{{ strip_tags($publisher) }}" inline-template> 

Так в моем файле лезвия partials.filter

    <div class="flex" v-show="publisherName && !publisher.sortBy && !publisher.country">
                <input v-show="publisherName && !publisher.sortBy && !publisher.country" placeholder="Search by Name" type="text" v-model="publisher.name" class="bg-grey-lightest border p-2 border-gray mr-4 h-10 w-full rounded-sm font-basic mt-2 mb-4">

                <publisher-search></publisher-search>
            </div>

так в моем PublisherSearch.vue

I Я поместил туда только мою строку поиска, например

<template>
  <ais-instant-search
  :search-client="searchClient"
  index-name="publishers"
  >
  <ais-search-box class="bg-grey-lightest border p-2 border-gray mr-4 h-10 w-full rounded-sm font-basic mt-2 mb-4" placeholder="Search publishers..."></ais-search-box>
  <ais-hits>
    <template
    slot="item"
    slot-scope="{ item }"
    >

  </template>
</ais-hits>
</ais-instant-search>
</template>

<script>
import algoliasearch from 'algoliasearch/lite';
export default {
  data() {
    return {
      searchClient: algoliasearch(
        process.env.MIX_ALGOLIA_APP_ID,
        process.env.MIX_ALGOLIA_SEARCH
        ),
    };
  },
};
</script>

, и я хочу отобразить результаты в первом блейд-файле: publishers.blade.php файл, аналогичный этому

@forelse ($publishers as $publisher)    
    <publishers-view :publishers="{{ strip_tags($publisher) }}" inline-template> 
        <article class="timeline-feeds">    
            <div class="flex" id="userProfile"> 
                <a href=""></a>
                <router-link :to="{ name : 'publisherView', params : { publisherId : publisher.id , publishers : publisher }}" tag="a">
                    @if(file_exists(public_path('/storage/publishers/'.$publisher->photo))) 
                    <img class="h-18 w-18 mr-4 mt-2" src="{{ asset('/storage/publishers/'.$publisher->photo)  }}" id="publishersPhoto" alt="publishers View" >
                    @else
                    <img class="h-18 w-18 rounded-full mr-4 mt-2" src="{{ asset('assets/images/default_avatar.jpg')  }}" id="publishersPhoto"  alt="publishers View" >
                    @endif
                </router-link>
                {{-- showing the names of the publishers --}}
                <div class="flex-1">
                    @verbatim
                    <h3 class="mt-4 font-basic">{{  publisher.full_name }}</h3>
                    <p class="mt-2">aka <em class="font-basic roman">{{ publisher.alias  }}</em></p>
                    @endverbatim
                </div>
            </div>
        </article>
    </publishers-view>
    {{-- @include("partials.publishers-view", ['publishers' => $publisher]) --}}
    @empty
    <h3>No publishers are added yet..</h3>
    @endforelse

    {{ $publishers->links() }}