How to ensure hits within <ais-highlight> are clickable and redirect user to item page?

For example, the following works perfectly fine:

        <ais-hits v-show="query.length > 1" v-slot:item="{ item }">
            <a class="service" :href=item.URL>All services in {{ item.category }}</a>
        </ais-hits>

This displays a list of hits in my dropdown which are all clickable and redirect the user to the appropriate category page.

However, when I try to implement the functionality, it makes the links redundant and just appears as text. This is the script im using:

        <ais-hits v-show="query.length > 1" v-slot:item="{ item }">
          <ais-highlight attribute="category" :hit="item" highlightedTagName="mark">
            <a class="service" :href=item.URL>All services in {{ item.category }}</a>
          </ais-highlight>
        </ais-hits>

Is there a way that I could use the tag whilst still ensuring the hits are links?