I've defined a custom vue component in Dropdown.vue:

<template>
  <q-select
    v-model="model"
    use-input
    use-chips
    input-debounce="100"
    :options="filteredOptions"
    label="Categories"
    @filter="filterFn"
    multiple
    @keydown.enter="addFirstOption"
    ref="qSelect"
  >
    <template v-slot:no-option>
      <q-item>
        <q-item-section class="text-grey">
          No results
        </q-item-section>
      </q-item>
    </template>
  </q-select>
</template>

<script setup lang="ts">
import { QSelect } from 'quasar'
import { Ref, ref, useTemplateRef } from 'vue'

const model: Ref<string[]> = defineModel({required: true})
const {options} = defineProps<{options: string[]}>()
const filteredOptions = ref<string[]>(options)

const qSelect = useTemplateRef<QSelect>("qSelect")

function filterFn(val: string, update: any) {
  if (val === '') {
    update(() => {
      filteredOptions.value = options
    })
  } else {
    update(() => {
      const query = val.toLowerCase()
      filteredOptions.value = options.filter(v => v.toLowerCase().includes(query))
    })
  }
}

function addFirstOption() {
  if (filteredOptions.value.length > 0 && !model.value.includes(filteredOptions.value[0])) {
    model.value.push(filteredOptions.value[0])
  }
  qSelect.value?.updateInputValue("")
}
</script>

that I'm including in another component like

<Dropdown
  v-model="searchCategories"
  :options="searchAllDates? allCategories : allCategoriesForDate"
/>

I had essentially the same code in-lined before I pulled it into a separate component for reuse. Now, however, the component isn't showing up visually at all, and in the console I get multiple warnings / errors:

[Vue warn]: Invalid vnode type when creating vnode: null. 
  at <Dropdown modelValue= Array(0) onUpdate:modelValue=fn options= Array(0) > 
  at <QPageContainer> 
  at <QLayout id="home" > 
  at <Transactions onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <KeepAlive> 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition key=0 mode="out-in" > 
  at <RouterView> 
  at <AppInner> 
  at <App>

[Vue warn]: The data option must be a function. Plain object usage is no longer supported. 
  at <Anonymous modelValue= Array(0) onUpdate:modelValue=fn use-input=""  ... > 
  at <Dropdown modelValue= Array(0) onUpdate:modelValue=fn options= Array(0) > 
  at <QPageContainer> 
  at <QLayout id="home" > 
  at <Transactions onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) > > 
  at <KeepAlive> 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition key=0 mode="out-in" > 
  at <RouterView> 
  at <AppInner> 
  at <App>

chunk-FRARDBO4.js?v=99d98bba:2085 [Vue warn]: Unhandled error during execution of component update 
  at <Dropdown modelValue= 
Array(0)
 onUpdate:modelValue=fn options= 
Array(0)
 > 
  at <QPageContainer> 
  at <QLayout id="home" > 
  at <Transactions onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< 
Proxy(Object)
 > > 
  at <KeepAlive> 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition key=0 mode="out-in" > 
  at <RouterView> 
  at <AppInner> 
  at <App>

Uncaught (in promise) TypeError: dataOptions.call is not a function
    at applyOptions (chunk-FRARDBO4.js?v=99d98bba:5418:30)
    at finishComponentSetup (chunk-FRARDBO4.js?v=99d98bba:9852:7)
    at setupStatefulComponent (chunk-FRARDBO4.js?v=99d98bba:9775:5)
    at setupComponent (chunk-FRARDBO4.js?v=99d98bba:9700:36)
    at mountComponent (chunk-FRARDBO4.js?v=99d98bba:7111:7)
    at processComponent (chunk-FRARDBO4.js?v=99d98bba:7077:9)
    at patch (chunk-FRARDBO4.js?v=99d98bba:6621:11)
    at ReactiveEffectponentUpdateFn [as fn] (chunk-FRARDBO4.js?v=99d98bba:7302:9)
    at ReactiveEffect.run (chunk-FRARDBO4.js?v=99d98bba:463:19)
    at ReactiveEffect.runIfDirty (chunk-FRARDBO4.js?v=99d98bba:498:12)

[Vue warn]: Unhandled error during execution of component update 
  at <QPageContainer> 
  at <QLayout id="home" > 
  at <Transactions onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) > > 
  at <KeepAlive> 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition key=0 mode="out-in" > 
  at <RouterView> 
  at <AppInner> 
  at <App>

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'component')
    at locateNonHydratedAsyncRoot (chunk-FRARDBO4.js?v=99d98bba:7991:41)
    at locateNonHydratedAsyncRoot (chunk-FRARDBO4.js?v=99d98bba:7996:14)
    at ReactiveEffectponentUpdateFn [as fn] (chunk-FRARDBO4.js?v=99d98bba:7257:40)
    at ReactiveEffect.run (chunk-FRARDBO4.js?v=99d98bba:463:19)
    at updateComponent (chunk-FRARDBO4.js?v=99d98bba:7154:18)
    at processComponent (chunk-FRARDBO4.js?v=99d98bba:7088:7)
    at patch (chunk-FRARDBO4.js?v=99d98bba:6621:11)
    at patchKeyedChildren (chunk-FRARDBO4.js?v=99d98bba:7491:9)
    at patchChildren (chunk-FRARDBO4.js?v=99d98bba:7405:11)
    at patchElement (chunk-FRARDBO4.js?v=99d98bba:6906:7)

I've used vue 2 more previously, and this component is using multiple new vue 3 things, so I think I've just set something up wrong while converting to a standalone component, but I can't tell what to change from the errors.

I've defined a custom vue component in Dropdown.vue:

<template>
  <q-select
    v-model="model"
    use-input
    use-chips
    input-debounce="100"
    :options="filteredOptions"
    label="Categories"
    @filter="filterFn"
    multiple
    @keydown.enter="addFirstOption"
    ref="qSelect"
  >
    <template v-slot:no-option>
      <q-item>
        <q-item-section class="text-grey">
          No results
        </q-item-section>
      </q-item>
    </template>
  </q-select>
</template>

<script setup lang="ts">
import { QSelect } from 'quasar'
import { Ref, ref, useTemplateRef } from 'vue'

const model: Ref<string[]> = defineModel({required: true})
const {options} = defineProps<{options: string[]}>()
const filteredOptions = ref<string[]>(options)

const qSelect = useTemplateRef<QSelect>("qSelect")

function filterFn(val: string, update: any) {
  if (val === '') {
    update(() => {
      filteredOptions.value = options
    })
  } else {
    update(() => {
      const query = val.toLowerCase()
      filteredOptions.value = options.filter(v => v.toLowerCase().includes(query))
    })
  }
}

function addFirstOption() {
  if (filteredOptions.value.length > 0 && !model.value.includes(filteredOptions.value[0])) {
    model.value.push(filteredOptions.value[0])
  }
  qSelect.value?.updateInputValue("")
}
</script>

that I'm including in another component like

<Dropdown
  v-model="searchCategories"
  :options="searchAllDates? allCategories : allCategoriesForDate"
/>

I had essentially the same code in-lined before I pulled it into a separate component for reuse. Now, however, the component isn't showing up visually at all, and in the console I get multiple warnings / errors:

[Vue warn]: Invalid vnode type when creating vnode: null. 
  at <Dropdown modelValue= Array(0) onUpdate:modelValue=fn options= Array(0) > 
  at <QPageContainer> 
  at <QLayout id="home" > 
  at <Transactions onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <KeepAlive> 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition key=0 mode="out-in" > 
  at <RouterView> 
  at <AppInner> 
  at <App>

[Vue warn]: The data option must be a function. Plain object usage is no longer supported. 
  at <Anonymous modelValue= Array(0) onUpdate:modelValue=fn use-input=""  ... > 
  at <Dropdown modelValue= Array(0) onUpdate:modelValue=fn options= Array(0) > 
  at <QPageContainer> 
  at <QLayout id="home" > 
  at <Transactions onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) > > 
  at <KeepAlive> 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition key=0 mode="out-in" > 
  at <RouterView> 
  at <AppInner> 
  at <App>

chunk-FRARDBO4.js?v=99d98bba:2085 [Vue warn]: Unhandled error during execution of component update 
  at <Dropdown modelValue= 
Array(0)
 onUpdate:modelValue=fn options= 
Array(0)
 > 
  at <QPageContainer> 
  at <QLayout id="home" > 
  at <Transactions onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< 
Proxy(Object)
 > > 
  at <KeepAlive> 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition key=0 mode="out-in" > 
  at <RouterView> 
  at <AppInner> 
  at <App>

Uncaught (in promise) TypeError: dataOptions.call is not a function
    at applyOptions (chunk-FRARDBO4.js?v=99d98bba:5418:30)
    at finishComponentSetup (chunk-FRARDBO4.js?v=99d98bba:9852:7)
    at setupStatefulComponent (chunk-FRARDBO4.js?v=99d98bba:9775:5)
    at setupComponent (chunk-FRARDBO4.js?v=99d98bba:9700:36)
    at mountComponent (chunk-FRARDBO4.js?v=99d98bba:7111:7)
    at processComponent (chunk-FRARDBO4.js?v=99d98bba:7077:9)
    at patch (chunk-FRARDBO4.js?v=99d98bba:6621:11)
    at ReactiveEffectponentUpdateFn [as fn] (chunk-FRARDBO4.js?v=99d98bba:7302:9)
    at ReactiveEffect.run (chunk-FRARDBO4.js?v=99d98bba:463:19)
    at ReactiveEffect.runIfDirty (chunk-FRARDBO4.js?v=99d98bba:498:12)

[Vue warn]: Unhandled error during execution of component update 
  at <QPageContainer> 
  at <QLayout id="home" > 
  at <Transactions onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) > > 
  at <KeepAlive> 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition key=0 mode="out-in" > 
  at <RouterView> 
  at <AppInner> 
  at <App>

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'component')
    at locateNonHydratedAsyncRoot (chunk-FRARDBO4.js?v=99d98bba:7991:41)
    at locateNonHydratedAsyncRoot (chunk-FRARDBO4.js?v=99d98bba:7996:14)
    at ReactiveEffectponentUpdateFn [as fn] (chunk-FRARDBO4.js?v=99d98bba:7257:40)
    at ReactiveEffect.run (chunk-FRARDBO4.js?v=99d98bba:463:19)
    at updateComponent (chunk-FRARDBO4.js?v=99d98bba:7154:18)
    at processComponent (chunk-FRARDBO4.js?v=99d98bba:7088:7)
    at patch (chunk-FRARDBO4.js?v=99d98bba:6621:11)
    at patchKeyedChildren (chunk-FRARDBO4.js?v=99d98bba:7491:9)
    at patchChildren (chunk-FRARDBO4.js?v=99d98bba:7405:11)
    at patchElement (chunk-FRARDBO4.js?v=99d98bba:6906:7)

I've used vue 2 more previously, and this component is using multiple new vue 3 things, so I think I've just set something up wrong while converting to a standalone component, but I can't tell what to change from the errors.

• typescript
• vue.js
• quasar-framework

1 Answer 1

Based on this reddit post, it seems the issue is that you need to ensure no variable is named the same as a component. I have qSelect as a variable here, but it seems that still clashes with the QSelect widget from Quasar. When I change that to const selectWidget = useTemplateRef<QSelect>("selectWidget") instead, the components are found + rendered properly again.