How to grab the input's value of an input using Algolia's autocomplete with Vue library

I have a form in my blade which I'm using to filter the properties. It's all working but now I'd like the search bar to support autocomplete. I'm not sure if my approach is the best way to do it but this is what I've come up with... I've used Algolia's autocomplete library to replace the search bar with a Vue component that supports autocomplete and it's working.

Now, I'm wondering how to grab the input from the search bar like before when a user selects a location from the suggested ones. I'm also open to an alternative if there is a simpler way to achieve the same. Kindly assist and let me know if more info is required.

My form

<!-- 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>

My 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'));

}

The working Vue component replacing the search bar.

  <div class="app-container">
    <h1>Vue Application</h1>
    <div id="autocomplete" />
  </div>
</template>

<script lang="jsx">
import { h, Fragment, render, onMounted } from "vue";
import algoliasearch from "algoliasearch/lite";
import { autocomplete, getAlgoliaResults } from "@algolia/autocomplete-js";
import "@algolia/autocomplete-theme-classic";

export default {
  name: "AutoComplete",
  setup() {
    onMounted(() => {
      autocomplete({
        container: "#autocomplete",
        getSources({ query }) {
          return [
            {
              sourceId: "properties",
              getItems({query}) {
                return getAlgoliaResults({
                  searchClient: algoliasearch(
                    "5ALV3LSLJ1",
                    "bde35d15e4037209a089a5731721c6c1"
                  ),
                  queries: [
                    {
                      indexName: "properties",
                      query,
                      params: {
                        hitsPerPage: 5,
                      },
                    },
                  ],
                });
              },
      templates: {
                item({ item, components }) {
                  return (
                    <div className="aa-ItemWrapper">
                      <div className="aa-ItemContent">
                        <div className="aa-ItemContentBody">
                          <div className="aa-ItemContentTitle">
                            <components.Highlight hit={item} attribute="location" />
                          </div>
                        </div>
                      </div>
                    </div>
                  );
                },
              },
          
            },
          ];
        },
        renderer: { createElement: h, Fragment, render },
      });
    });
  },
};
</script>```