Исправить поведение qml компонента

import QtQuick 2.0

Rectangle {
    Component {
        id: squareComponent
        Rectangle {
            property int sideLenght: 500
            width: sideLenght
            height: sideLenght
            color: "orange"
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    var first = squareComponent.createObject(parent)
                    var second = squareComponent.createObject(parent)
                    var third = squareComponent.createObject(parent)
                    var fourth = squareComponent.createObject(parent)

                    var sideLenght = parent.sideLenght / 2

                    first.sideLenght = sideLenght
                    second.sideLenght = sideLenght
                    third.sideLenght = sideLenght
                    fourth.sideLenght = sideLenght

                    var x = parent.x
                    var y = parent.y
                    console.log(x, y)

                    first.x = x
                    first.y = y
                    first.color = "red"
                    console.log("first", first.x, first.y)

                    second.x = first.x + sideLenght
                    second.y = first.y
                    second.color = "orange"
                    console.log("second", second.x, second.y)

                    third.x = first.x
                    third.y = first.y + sideLenght
                    third.color = "blue"
                    console.log("third", third.x, third.y)

                    fourth.x = first.x + sideLenght
                    fourth.y = first.y + sideLenght
                    fourth.color = "black"
                    console.log("fourth", fourth.x, fourth.y, "\n\n")

                    parent.sideLenght = 0
                }
            }
        }
    }

    Component.onCompleted: squareComponent.createObject(parent)
}