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

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?