VUE v2 + Instant search not working - rendering nothing

Open Q&A
1

I’m on Vue 2 and attempting to use instant search version 4.8.7. When the Vue component renders, I only see an empty structure. I can see the searchbar and results divs but they have no contents. The console doesn’t have any errors, but I can see the Algolia calls are made and returned successfully. If I change the index to something invalid it complains that the index in invalid, so I know it’s doing something.

My component:

<template>
  <ais-instant-search :search-client="searchClient" index-name="demo_index">
    <ais-search-box />
    <ais-hits>
      <template v-slot:item="{ item }">
        <h2>{{ item.name }}</h2>
      </template>
    </ais-hits>
  </ais-instant-search>
</template>

<scrpt lang="js">
import algoliasearch from 'algoliasearch/lite';


  export default  {
    name: 'federated-search-results',
    props: {
    },
    computed: {
    },
    mounted () {
    },
    methods: {
    },
    data () {
      return {
        searchParam: null,
        searchClient: algoliasearch(
          'xxxxxxxx',
          'xxxxxxxx'
        ),
      }
    }
}
</scipt>

<style lang="scss">
@import "federated-search-results";
</style>

note: I had to change the script tag to scrpt in the example because Cloudflare blocks script tags in payloads