I'm not entirely sure how to toggle the popover based on a boolean, in my case: if there are search results. I thought I could just use the open attribute. Any help is appreciated!

To sum up this component:

• Type in a search term in the input
• An API call is being made and results are returned from te API
• The PopoverPanel should then be opened

<template>
  <form :action="action" method="GET" class="flex-1">
    <Popover :open="searchResults.length > 0" class="relative w-full">
      <PopoverOverlay
        :class="`bg-black ${open ? 'fixed inset-0 opacity-10' : 'opacity-0'}`"
        @click="() => emptySearchResults()"
      />

      <div class="relative">
        <label for="search" class="sr-only">Search...</label>
        <input
          id="search"
          v-model="searchTerm"
          type="search"
          placeholder="Search..."
          class="h-10 w-full px-4 py-2 text-sm rounded-lg placeholder-gray-400 focus:outline-none"
        >
      </div>

      <PopoverPanel class="absolute top-full right-0 w-full mt-3 py-2 px-2 bg-gray-700 rounded-lg shadow-lg">
        <a
          v-for="result in searchResults"
          :key="result.id"
          :href="result.url"
          class="flex items-center font-semibold p-2 text-sm text-white leading-none rounded-lg hover:bg-gray-600"
        >
          <span class="mr-3 py-1 px-2 text-xs text-gray-900 leading-none bg-gray-300 rounded-full">
            {{ result.module }}
          </span>

          {{ result.title }}
        </a>
      </PopoverPanel>
    </Popover>
  </form>
</template>

<script setup>
import { ref, watch } from 'vue';
import { Popover, PopoverPanel } from '@headlessui/vue';
import debounce from '@/Helpers/debounce';
import xhr from '@/Helpers/xhr';

const searchTerm = ref('');
const searchResults = ref([]);
const getSearchResults = debounce(async (value) => {
  if (value === '') return;

  const { data } = await xhr.post('search', { q: value });
  const { results } = await data;

  searchResults.value = results;
}, 250);
const emptySearchResults = () => {
  searchTerm.value = '';
  searchResults.value = [];
};

watch(searchTerm, (value) => getSearchResults(value));
</script>