How to use Algolia autocomplete within an existing form?

I have the following form in my blade and the filter works fine. Now, I would like to use Algolia Vue autocomplete for the search bar but when I create a Vue component as per the docs and replace the HTML with a component, now the search bar is enclosed in form tags. So, I end up with the current form in the blade and another one inside it enclosing the search bar. How can I just have one form like before or how can I achieve the same functionality as before after adding the autocomplete support?

<form action="{{ route('properties.index') }}" class="properties-search-form" method="get">
    <!-- one more filter here -->
    <!-- dropdown -->
    <select name="property_type">
        <option value="all">All types</option>
        @foreach ($categories as $category)
            <option value="{{ $category->name }}" {{ request('property_type') === $category->name ? 'selected' : '' }}>
                {{ ucfirst($category->name) }}
            </option>
        @endforeach
    </select>
    <div class="search-bar">
        <input type="text" placeholder="Enter a Location" name="location" value="{{ request('location') }}" />
        <button class="search-btn">
            <i class="fa-sharp fa-solid fa-magnifying-glass"></i>
        </button>
    </div>
</form>

Index method

 public function index()
  {
    $categories = Category::select(['name', 'id'])->latest()->get();

    $properties = Property::latest()
      ->filter(request(['property_type', 'status', 'location']))
      ->get();

    return view('pages.properties.index', compact('categories', 'properties',));
  }