Unable to use Custom Component - "Forgot to wrap search component" error

The error I am getting:

TypeError: It looks like you forgot to wrap your Algolia search component 
            "<undefined>" inside of an "<ais-index>" component. You can also pass a 
            search store as a prop to your component.

My template:

<template>
<div id="app" class="container is-fluid">
  
  <ais-index
             :search-store="searchStore" index-name="contact_list"
             :query-parameters="{'page': page}"
  >

    <ais-results :search-store="searchStore">

      <b-table :data="contactResults">

        <template scope="props">

          <b-table-column field="rank" label="ID" width="40" sortable numeric>
            {{ props.row.id }}
          </b-table-column>

          <b-table-column field="name" label="Name" sortable>
            {{ props.row.name }}
          </b-table-column>
        </template>
      </b-table>
    </ais-results>
  </ais-index>
</div>
</template>

My JS:

import { createFromAlgoliaCredentials, Component } from 'vue-instantsearch';

export default {
    name: 'app',
    data: function() {
        return {
            searchStore: createFromAlgoliaCredentials('APPID', 'APPKEY'),
        };
    },
    mixins: [Component],
    computed: {
        contactResults() {
            return this.searchStore.results;
        },
    }
}

Thank you for your help on this. I’ve been working on it for much longer than I’d care to admit!

I should let you know that I am using the latest Vue 2.4.4

Hi there,

You don’t seem to add InstantSearch to Vue (the corresponding step in the getting started) If that’s not related, can you send us a link to reproducible test on jsFiddle?