How to use select option-label function?

[iamtetea]

    :option-label="(deliveryBoyOptions) => deliveryBoyOptions === null ? 'Null Value' : deliveryBoyOptions.user.display_name"

below is how i query my data list:

apollo: {
    vehicles: {
      prefetch: true,
      query: getDeliveryAgents,

      update (data) {
        this.deliveryBoyOptions = data.delivery_agents
      }
    }
  }

and i want to show display_name in option-label

{data: {delivery_agents: [{id: "0dc65e15-c624-44f2-8dce-5b66995d1fdb",…}]}}
data: {delivery_agents: [{id: "0dc65e15-c624-44f2-8dce-5b66995d1fdb",…}]}
delivery_agents: [{id: "0dc65e15-c624-44f2-8dce-5b66995d1fdb",…}]
0: {id: "0dc65e15-c624-44f2-8dce-5b66995d1fdb",…}
booking_counter_id: "caa68d7f-6bc0-42b4-9645-b60958514e9b"
id: "0dc65e15-c624-44f2-8dce-5b66995d1fdb"
user: {display_name: "Tetea", __typename: "users"}
display_name: "Tetea"
__typename: "users"
user_id: "1d20117d-1256-4800-9bb2-d6a5916d2277"
__typename: "delivery_agents"

the display_name is coming from delivery_agents.user.display_name

i cannot show in the option label and it shows display_name of undefined

Please Help. Thanks

[dobbel]

@iamtetea

Please create a codepen.io to get better support.