import QtQuick
import QtQuick.Window
import QtQuick.Controls as QtC

Window {
    id: root
    width: 640
    height: 480
    visible: true

    // Very basic component for creating Rectangle items.
    Component {
        id: comp

        Rectangle {
            id: _root

            // We set an implicitHeight here just so the rect is visually
            // visible for testing. implicitWidth is where the issue is.
            implicitHeight: 100
            color: "red"
        }
    }

    // A Rectangle instance from "comp" that we want to display the width of.
    property Item rectItem: null

    Column {
        id: column

        QtC.Button {
            width: 200

            // THE ISSUE IS HERE:
            // This binding will not always update correctly when root.rectItem
            // exists. It will either give 1200 (CORRECT) or 0 (INCORRECT).
            text: root.rectItem?.width ?? "Create Object"

            onClicked: {
                let rectItem = root.rectItem

                // If rectItem exists destory it.
                if (rectItem) {
                    rectItem.destroy()
                    return
                }

                // Otherwise create a new object
                let newRectItem = comp.createObject(column, {})


                // Setting the width before setting root.rectItem seems to work.
                // newRectItem.width = 1200

                root.rectItem = newRectItem

                // But setting the width after setting root.rectItem seems to
                // cause the issue.
                newRectItem.width = 1200
            }
        }

        QtC.Button {
            width: 200
            text: "print width"
            enabled: root.rectItem
            onClicked: console.log(root.rectItem.width)
        }
    }
}