onServerPrefetch, onBeforeUnmount, and onUnmounted Warnings

[paltman]

I have a component working as expected, however, I'm getting bizarre warnings that I'd like to clear up.

Here is my code:

TypedAutocomplete Component:

<script setup lang="ts">
  import { toRef, computed, PropType, ref } from 'vue';
  import {
    Combobox,
    ComboboxButton,
    ComboboxInput,
    ComboboxOptions,
    ComboboxOption,
    ComboboxLabel,
  } from '@headlessui/vue';

  import useAutocomplete from '@/compositions/useAutocomplete';
  import { ISelectOption, TAutoCompleteKind } from './types';

  const props = defineProps({
    kind: {
      type: String as PropType<TAutoCompleteKind>,
      required: true,
    },
    modelValue: {
      type: Object as PropType<ISelectOption | undefined>
    },
  });
  const emit = defineEmits(['update:modelValue']);
  const modelValue = toRef(props, 'modelValue');
  const query = ref('');

  const options = computed(() => {
    const { items } = useAutocomplete(query.value, props.kind);
    return items.value;
  });

  const selectedOption = computed<ISelectOption | undefined>({
    get() {
      return options.value.find((option) => option.id === modelValue.value?.id);
    },
    set(value) {
      console.log('setting value to', value);
      emit('update:modelValue', value);
    },
  });

  const displayValue = (option: any) => option.label;
</script>

<template>
  <Combobox v-model="selectedOption" as="div">
    <ComboboxLabel class="block text-sm font-medium text-slate-700"><slot /></ComboboxLabel>
    <div class="relative mt-1">
      <ComboboxInput
        class="w-full rounded-md border-0 bg-white py-1.5 pl-3 pr-12 text-slate-900 shadow-sm ring-1 ring-inset ring-slate-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
        @change="$event => query = $event.target.value"
        :displayValue="displayValue"
      />
      <ComboboxButton class="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none">
        <font-awesome-icon icon="fa-duotone fa-chevron-down" class="h-5 w-5 text-slate-400" aria-hidden="true" />
      </ComboboxButton>
      <ComboboxOptions class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
        <ComboboxOption
          v-for="option in options"
          :key="option.id"
          :value="option"
          as="template"
          v-slot="{ active, selected }"
        >
          <li :class="['relative cursor-default select-none py-2 pl-3 pr-9', active ? 'bg-blue-600 text-white' : 'text-slate-900']">
            <div class="flex">
              <span :class="['mr-2 font-light', active ? 'text-blue-300' : 'text-slate-400']">
                {{ option.secondary }}
              </span>
              <span :class="['truncate', selected && 'font-semibold']">
                {{ option.label }}
              </span>
            </div>

            <span v-if="selected" :class="['absolute inset-y-0 right-0 flex items-center pr-4', active ? 'text-white' : 'text-blue-600']">
              <font-awesome-icon icon="fa-duotone fa-check" class="h-5 w-5" aria-hidden="true" />
            </span>
          </li>
        </ComboboxOption>
      </ComboboxOptions>
    </div>
  </Combobox>
</template>

In use in another component (in this instance, selectedCustomer is undefined because there hasn't been a selection yet):

<TypedAutocomplete class="mb-4" v-model="selectedCustomer" kind="customers">Customer</TypedAutocomplete>

The warnings I'm getting:

 [Vue warn]: onUnmounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement. 
  at <TypedAutocomplete class="mb-4" modelValue=undefined onUpdate:modelValue=fn  ... > 
  at <ContentCard title="Customer" > 
  at <QuoteForm onSaved=fn<onSave> > 
  at <MainContentContainer> 
  at <MainContent> 
  at <QuotationEntry onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <MainLayout> 
  at <App> 
  at <App>

[Vue warn]: onBeforeUnmount is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement. 
  at <TypedAutocomplete class="mb-4" modelValue=undefined onUpdate:modelValue=fn  ... > 
  at <ContentCard title="Customer" > 
  at <QuoteForm onSaved=fn<onSave> > 
  at <MainContentContainer> 
  at <MainContent> 
  at <QuotationEntry onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <MainLayout> 
  at <App> 
  at <App>

[Vue warn]: onServerPrefetch is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement. 
  at <TypedAutocomplete class="mb-4" modelValue=undefined onUpdate:modelValue=fn  ... > 
  at <ContentCard title="Customer" > 
  at <QuoteForm onSaved=fn<onSave> > 
  at <MainContentContainer> 
  at <MainContent> 
  at <QuotationEntry onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <MainLayout> 
  at <App> 
  at <App>

These occur several times on initial page render.

When i comment out the v-model in my component then i don't get any of these warnings but of course then my component doesn't work.

Any ideas?

[paltman]

Figured this out.

My useAutocomplete composable imports ref from 'vue' and therefore using it inside a computed property instead of directly inside the setup "method", I broke the rules.

rewrote:

  const options = computed(() => {
    const { items } = useAutocomplete(query.value, props.kind);
    return items.value;
  });

To return a function that I could wire up to the event to force the requery:

  const { items, reQuery } = useAutocomplete(query.value, props.kind);

  const onQueryChange = ($event: Event) => {
    // Might want to debounce this
    reQuery({ query: ($event.target as HTMLInputElement)?.value });
  };