I am trying to get driver related to vehicle using vue js

I have shown vechicle data just I want to get driver data related to vehicle but unfortuntly i am getting error undefined please help me how can i show into draggablelist thank u ?

Controller

public function index(){

  return $vehicles = Vehicle::with('driver')->get();
   
  
}

template view

<div class="row">
            <div class="col-6">
                <q-card-section>
                    <div class="tw-grid">
                        <div class="tw-col-span-6">
                            <DraggableList
                                v-model="api.drivers"
                                label-key="username"
                                :colors="colors"
                            />
                        </div>
                    </div>
                </q-card-section>
            </div>
        </div>

vue js

export default {
    data () {
        return {

            api: {
                vehicles: [],
                drivers: []
            }
        }
    },
    mounted () {
        this.fetchVehiclesDriver()
    },
    methods: {
        fetchVehiclesDriver () {
            this.$api.get(this.apiRoute('client.vector.driver', {
            }))
                .then(({ data }) => {
                    this.api.vehicles = data.vehicles
                    this.api.drivers  = data.vehicles.driver

                    console.log(data.vehicles.driver) // undefined
                })
        }
    }
}