Quasar q-select display nothing when I choose one of the options - vue.js

Question

New to Quasar, and I try to create a q-select that getting as options a list of objects. So far, I achieved to display the options in the dropdown, but when I select an element, the q-select remains empty although the page component data value is filled properly.
See the following git for more info:
My q-select implementation is like this:
<template>
<!-- ... -->
<q-select
v-model="parentCategory"
clearable
use-input
input-debounce="350"
label="Parent Category"
:options="businessCategoriesToSelect"
:option-label="opt => Object(opt) === opt && 'title' in opt ? opt.title : null"
:option-value="opt => Object(opt) === opt && '#id' in opt ? opt['#id'] : null"
:display-value="Object(parentCategory) === parentCategory && 'title' in parentCategory ? parentCategory.title : null"
emit-value
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
No Business Categories Found
</q-item-section>
</q-item>
</template>
</q-select>
<!-- ... -->
</template>
<script>
// ...
export default {
// ...
data() {
return {
// ...
parentCategory : null,
// ...
businessCategoriesToSelect: [],
// ...
};
},
// ...
}
</script>
The objects loaded in the businessCategoriesToSelect have the following form:
And when I select one of the options in the q-select item the data property that is responsible to hold the selected value it has a value like this:
But although all seems to be OK with what I did, the q-select still don't like to display the proper value.
Any idea on how to solve that issue?

Answer 1

I answer to my self just to provide my solution in order to help any other person has the same problem with me.
Finally I solved the problem by using the slot selected-item. The final solution is like that:
<q-select
v-model="parentCategory"
clearable
use-input
input-debounce="350"
label="Parent Category"
:options="businessCategoriesToSelect"
:option-label="opt => Object(opt) === opt && 'title' in opt ? opt.title : null"
:option-value="opt => Object(opt) === opt && '#id' in opt ? opt['#id'] : null"
:display-value="Object(parentCategory) === parentCategory && 'title' in parentCategory ? parentCategory.title : null"
emit-value
map-options
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
No Business Categories Found
</q-item-section>
</q-item>
</template>
<template v-slot:selected-item="scope">
{{ scope.opt.title }}
</template>
</q-select>