<div 
  x-data="{
    query: new URLSearchParams(location.search).get('q')
  }" class="flex flex-col">
  <p class="mb-2">location.search: "<span x-text="location.search">?q=</span>"</p>
  <p class="mb-2">Param "q" (from URL): "<span x-text="query"></span>"</p>
  <p class="mb-2">
    Some sample links with "q" in the URL:
    <a class="text-blue-500 hover:text-blue-800 hover:underline" href="?q=my search">my search</a>,
    <a class="text-blue-500 hover:text-blue-800 hover:underline" href="?q=another search">another search</a>,
    <a class="text-blue-500 hover:text-blue-800 hover:underline" href="?q=">reset</a>
  </p>
</div>