signal handlers not invoked in some situations

import QtQuick 2.0

// some forms of access cause the target to the updated properly.

Item {
    id: root
    width: 400
    height: 400

    Rectangle {
        id: tophalf
        width: 400
        height: 200
        anchors.top: parent.top
        color: "black"

        function updateColor() {
            color = colorPicker.color;
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                console.log("Top area clicked; generating connection.");
                colorSelector.onColorChanged.connect(tophalf.updateColor); // dynamic connection...
            }
        }
    }

    Item {
        id: colorSelector
        width: 400
        height: 200
        anchors.top: tophalf.bottom
        property alias color: colorPicker.color    // the problem goes away if this is not an alias property.

        Item {
            id: colorPicker
            property color color: "red"
        }

        Rectangle {
            id: bottomhalf
            anchors.fill: parent
            color: "green"

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    if (colorPicker.color == Qt.rgba(1,0,0)) {
                        colorPicker.color = Qt.rgba(0,0,1);
                        console.log("Bottom area clicked... updated color to: " + colorPicker.color.toString());
                    } else {
                        colorPicker.color = Qt.rgba(1,0,0);
                        console.log("Bottom area clicked... updated color to: " + colorPicker.color.toString());
                    }

                    // The problem is fixed if we uncomment either of the following two lines...
                    //if (colorSelector.color == Qt.rgba(1,0,0)) console.log("IT'S RED!");          // fixes
                    //if (colorSelector.color === Qt.rgba(1,0,0)) console.log("IT'S RED!");         // fixes

                    // Oh well, it's not just _resolving_ which fixes it...
                    //colorSelector.color;                                                          // doesn't fix
                    //if (colorSelector.color) console.log("IT'S...");                              // doesn't fix

                    // Maybe it's equality testing!
                    //if (colorSelector.color == "hello, world") console.log("IT'S SAYING HELLO!"); // fixes

                    // Oh well, it's not equality that causes it...
                    //if (colorSelector.color === null) console.log("IT'S NULL");                   // doesn't fix
                    //if (colorSelector.color == null) console.log("IT'S NULL");                    // doesn't fix
                    //if (colorSelector.color === undefined) console.log("IT'S UNDEFINED");         // doesn't fix
                    //if (colorSelector.color == undefined) console.log("IT'S UNDEFINED");          // doesn't fix

                    // CRAZY!!!
                    //if (colorSelector.color === 42) console.log("IT'S THE ANSWER!");              // doesn't fix
                    //if (colorSelector.color == 42) console.log("IT'S THE ANSWER!");               // fixes
                }
            }
        }
    }
}