QML MouseArea unable to receive mouse events

Question

So my goal was to implement a way to implement a resizable Rectangle in QML and I stumble across this. However the code is not working as expected. Here is a minimal example to reproduce the issue:

I have a SelectionRectangle.qml component:

import QtQuick 2.12

Rectangle {
    id: selComp
    border {
        width: 2
        color: "steelblue"
    }
    color: "#354682B4"

    property int rulersSize: 18

     Rectangle {
         width: rulersSize
         height: rulersSize
         radius: rulersSize
         x: parent.x / 2
         y: 0
         color: "steelblue"
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.verticalCenter: parent.top

         MouseArea {
             anchors.fill: parent
             drag{ target: parent; axis: Drag.YAxis }
             propagateComposedEvents: true
             onMouseYChanged: {
                 if(drag.active){
                     selComp.height = selComp.height - mouseY
                     selComp.y = selComp.y + mouseY
                     if(selComp.height < 50)
                         selComp.height = 50
                 }
             }
             onPressed:  console.debug("pressed") // this never gets called
         }
     }


}

And in my main file:

import QtQuick 2.4
import QtQuick.Controls 2.12

ApplicationWindow {
    title: qsTr("Test Crop")
    width: 640
    height: 480
    visible: true
    property var selection: undefined

    Rectangle {
        id: image1
        anchors.fill: parent
        color: "red"
        SelectionRectangle{
            width: 200; height: 300
            x: 200; y: 200
        }
    }

}

However my MouseArea never receives the events (onPressed is never triggered) and so I am unable to resize the rectangle.