MouseArea in Flipable: different behavior between QtQuick 1.1 and 2.0

import QtQuick 2.0
Flipable {
    id: flipable
    width: 240
    height: 240
    property bool flipped: false
    front: Rectangle {
        width: 100;
        height: 100;
        color: "pink";
        anchors.centerIn: parent;
        MouseArea{
            anchors.fill: parent;
            onClicked: {
                flipable.flipped = !flipable.flipped;
                console.log("Pink");
            }
        }
    }
    back: Rectangle {
        width: 100;
        height: 100;
        color: "green";
        anchors.centerIn: parent;
        MouseArea{
            anchors.fill: parent;
            onClicked: {
                flipable.flipped = !flipable.flipped;
                console.log("Green");
            }
        }
    }
    transform: Rotation {
        id: rotation
        origin.x: flipable.width/2
        origin.y: flipable.height/2
        axis.x: 0; axis.y: 1; axis.z: 0     // set axis.y to 1 to rotate around y-axis
        angle: 0    // the default angle
    }
    states: State {
        name: "back"
        PropertyChanges { target: rotation; angle: 180 }
        when: flipable.flipped
    }
    transitions: Transition {
        NumberAnimation { target: rotation; property: "angle"; duration: 0 }
    }
}