How to interact with WMS tile layer served by GeoServer using Vuelayers?

I'm developing a web mapping application using the Vuelayers library which is Web map Vue components with the power of OpenLayers,

i have the following code in my template :

<vl-map @singleclick="hideOverlay" @postcompose="onMapPostCompose"
 :load-tiles-while-animating="true" ref="map" 
:load-tiles-while-interacting="true" data-projection="EPSG:4326" 
style="height: 900px" @mounted="onMapMounted">
 ....

  <component v-for="layer in layers" :ref="layer.id" overlay
    :is="layer.cmp"  
    :key="layer.id" v-bind="layer">
        <component :is="layer.source.cmp" v-if="layer.visible" v-bind="layer.source">
        </component>
    </component>
     ....
</vl-map>

and in the data object i have the following property :

     layers: [

            {
                id: 'sections',
                title: 'Sections',
                cmp: 'vl-layer-tile',
                visible: true,

                source: {
                    cmp: 'vl-source-wms',
                    url: 'http://localhost:8080/geoserver/sager/wms',
                    layers: 'sections',
                    tiled: true,
                    format: 'image/png',
                    serverType: 'geoserver',
                },
            },
     ....
    ]

So i would like to get the layer properties when i click on it? knowing that vl-tile-layer doesn't have @click event as mentioned here

from How to interact with WMS tile layer served by GeoServer using Vuelayers?