Cómo implementar ais-refinement-list con algoliaSearchBox, cuando se usa Vue Instant Search en Algolia. ¿Aquí adjunto mi código y espero el resultado?

código:

 <ais-refinement-list attribute="color"> <template scope="{items,refine}"> <div v-if="listColor.length > 1" class="filtersbox Colors"> <h4 @click="showColor()"> {{ filterTitle.colors | uppercase }} <div id="Coloricon" class="plus-minus-toggle collapsed"></div> </h4> <div id="Colorbox" class="content-filter"> <div class="web-filter-search"> <input v-model="searchColor" type="text" placeholder="Search color" /> <i class="iconf iconf-iconSearch"></i> </div> <div v-for="(item, index) in items" :key="index" class="filter-content"> <label class="check"> {{ item.label }} <input :id="item" :value="item.value" v-model="checkedProductType" type="checkbox" @click.prevent="refine(item.value)" /> <span class="checkmark"></span> </label> </div> </div> </div> </template> </ais-refinement-list>

suponer: