Dropdown Autocomplete Search Anything in Laravel course with Nuxt

The problem I'm facing is that when I click on a search result link, the page refreshes instead of navigating within the SPA. I want to prevent the page from reloading and use Nuxt's router to navigate programmatically.

item({ item, html }) {
  return html`
    <a href="${item.url}" class="flex items-center space-x-2">
      <img src="${item.image}" class="w-20 h-20 rounded-full" />
      <span>${item.title}</span>
    </a>
  `;
},

<script setup>

import { autocomplete } from '@algolia/autocomplete-js';
import {
  meilisearchAutocompleteClient,
  getMeilisearchResults,
} from '@meilisearch/autocomplete-client';
const client = meilisearchAutocompleteClient({
  url: 'http://localhost:7700',
  apiKey: 'masterkey',
  // http://backend.test:3000/products/1
  // http://backend/api/products/1
  
});
onMounted(() => {
  autocomplete({
    container: '#search',
    placeholder: 'What are you looking for?',
    autoFocus: true,
    getSources() {
      return [
        {
          sourceId: 'products',
          getItems({ query }) {
            return getMeilisearchResults({
              client,
              searchClient: client,
              queries: [
                {
                  indexName: 'products',
                  query: query,
                },
              ],
            });
          },
          getItemUrl({ item }) {
            return item.url;
        
          },  
          templates: {
            header({html}){
              return html`<span className="aa-SourceHeaderTitle">Products</span>
              <div className="aa-SourceHeaderLine"></div>
              `
              
            },
            item({ item, html }) {
              return html`
                <a href="${item.url}" class="flex items-center space-x-2">
                  <img src="${item.image}" class="w-20 h-20 rounded-full" />
                  <span>${item.title}</span>
                </a>
              `;
            },
          },
        },
        {
          sourceId: 'users',
          getItems({ query }) {
            return getMeilisearchResults({
              client,
              searchClient: client,
              queries: [
                {
                  indexName: 'users',
                  query: query,
                },
              ],
            });
          },
          templates: {
            header({html}){
              return html`<span className="aa-SourceHeaderTitle">Users</span>
              <div className="aa-SourceHeaderLine"></div>
              `
              
            },
            item({ item, html }) {
              return html`
                <a href="" class="flex items-center space-x-2">
                  <span>${item.name}</span>
                </a>
              `;
            },
          },
        },
      ];
    },
  });
});
</script>

<template>
  <div id="search"></div>
</template>