Modify Search State with Vue InstantSearch

Open Q&A
,
#1

Hi everyone
I’m using Vue InstantSearch 2.2.1

I’m unable to figure out if it’s possible to apply a refinement programatically, like widgets do (ais-refinement-list)

Eg:

<template>
  <ais-instant-search :search-client="myClient" :index-name="myIndex">

    <!-- This works -->
    <ais-refinement-list :attribute='genre'>
       <template slot-scope="{ items, refine }">
            <span v-for="item in items" :key='item.customId' @click.prevent="refine(item.value)">
                 {{ item.label }}
             </span> 
       </template>
    </ais-refinement-list>

    <!-- Is something like this possible? -->
    <button @click="setFacet('genre', 'fantasy')" />

    <ais-hits>
       <template slot-scope="{ items }">
            <pre> {{ items }} </pre>
       </template>
    </ais-hits>
  </ais-instant-search>
</template>

<!-- JS code -->
const client = algoliasearch('MyAppId', 'MySearchKey')
export default {
  name: 'testApp',
  data ()  {
    return {
      myClient: client,
      myIndex: 'bestTvShows'
    }
  },
  methods: {
      setFacet (param1, param2) {
        ...
      }
   }
}
<!-- js -->

algoliasearch-helper looked like it was the way to go, and indeed i can see the request returning hits after doing the search but i don’t know how to pass those hits to the Vue Component, or update its state

function setFacet(facetName, facetValue) {
  helper.toggleFacetRefinement(facetName, facetValue)
  helper.search()
}

Any ideas/tips?
I’m thinking on making my own widget to achieve something like this