Having trouble registering insights click event with Vue

Algolia vue instantsearch is working fine for us. I am attempting now to set up the insights widget according to the docs here

I do not need custom events or individual user tracking. I only want to track clicks on search results.

I am using the Insights Validator Chrome extension to help me with this. It shows search events, but no click events.

I’m really not sure where I am going wrong, but I’m hoping someone who has implemented the insights widget with vue can spot what I am missing.

This is my site search vue file. It works fine for search, just not registering any click events as far as I can tell:

<template>
  <ais-instant-search :search-client="searchClient" :index-name="algoliaIndex" :routing="routing"  :middlewares="middlewares">
    <header class="search-header">
      <div class="container">
        <div class="inset">
          <h1 class="h6">Search</h1>
          <ais-search-box placeholder="Search..."/>
          
          <!-- Search help tips from craft global -->
          <div v-if="tips.length > 0">
            <div v-for="tip in tips" v-html="tip.tipHtml"></div>
          </div>

          <ais-menu-select attribute="section"/>
        </div>
      </div>

    </header>
    <ais-state-results class="container pb-16">
      <template slot-scope="{ results: { hits, query } }">
        <ais-infinite-hits v-if="hits.length > 0" class="inset pb-8 pt-8"
          :class-names="{
            'ais-InfiniteHits-loadMore': 'button button-more'
          }">
            <div slot="item" slot-scope="{ item }">
              <figure v-if="item.image">
                <a :href="item.uri">
                  <img :src="item.image" :alt="item.title" class="w-full"/>
                </a>
              </figure>
              <div class="text-container">
                <div class="mb-1">{{ item.section }}<span v-if="item.displayDate"> | <b>{{ item.displayDate }}</b></span></div>
                <h2 class="h5"><a :href="item.uri" class="heading-link">{{ item.title }}</a></h2>
                <div class="search-result-meta">
                  <p>{{ item.description }}</p>
                </div>
              </div>
          </div>
        </ais-infinite-hits>
        <ul v-else class="search-results inset pb-8">
          <li class="message text-center unlist bg-off-white px-16 py-16">
            <h2 class="h3 mt-0">No results</h2>
            <p>We couldn't find anything matching <b>{{ query }}</b>.</p>
          </li>
        </ul>
      </template>
    </ais-state-results>
  </ais-instant-search>
</template>

My code is getting truncated or I hit a 403 trying to post it… working on it!

Since the forum here won’t let me paste my code, here is what I have in the same template inside script tags:

Any help is appreciated!