Very basic question on how to setup a QT quick checkbox.

[philp]

I am new to QT quick and am having difficulty understanding the basic sequence of how items are executed. Sorry if the question is so basic. I have worked my way through an example that has the date/time and weather information. The top level item is a Rectangle and it has a bool property called forceOffline. Now this property can be changed by either a Config button which brings up a dialog set of checkboxes (one of which modifies it) or a single button at the top level.
My problem is that if I tick the checkbox to change the forceOffline property and then use the single button to switch back and then go back to the dialog the checkbox remains checked. Sorry if I have not made this very clear. Below I have my checkbox item

import QtQuick 2.3
 
Item {
    id: root
    property bool checked: true
    width: checkBox.width
    height: checkBox.height
 
    Image {
        id: checkBox
        source: root.checked ?
                    "../../content/resources/checkbox.png" :
                    "../../content/resources/draw-rectangle.png"
        Keys.onPressed: {
            if (event.key == Qt.Key_Return ||
                    event.key == Qt.Key_Enter ||
                    event.key == Qt.Key_Space)
                root.checked = !root.checked;
        }
        MouseArea {
            anchors.fill: parent
            onClicked: {
                root.checked = !root.checked;
           }
        }
    }
}

import QtQuick 2.3

Item {
    id: root
    property bool checked: true
    width: checkBox.width
    height: checkBox.height

    Image {
        id: checkBox
        source: root.checked ?
                    "../../content/resources/checkbox.png" :
                    "../../content/resources/draw-rectangle.png"
        Keys.onPressed: {
            if (event.key == Qt.Key_Return ||
                    event.key == Qt.Key_Enter ||
                    event.key == Qt.Key_Space)
                root.checked = !root.checked;
        }
        MouseArea {
            anchors.fill: parent
            onClicked: {
                root.checked = !root.checked;
           }
        }
    }
}

To copy to clipboard, switch view to plain text mode 

I use code like

CheckBox {
            id: offlineCheckBox
            checked: root.forceOffline
            KeyNavigation.up: secondsCheckBox
            KeyNavigation.down: locationTextInput
        }

CheckBox {
            id: offlineCheckBox
            checked: root.forceOffline
            KeyNavigation.up: secondsCheckBox
            KeyNavigation.down: locationTextInput
        }

To copy to clipboard, switch view to plain text mode 

to create an instance of the Checkbox. I thought that the binding of "checked: root.forceOffline" would ensure that the checkbox was correctly ticked or not depending on its boolean state. Can anybody help me understand this?
AS another quick question, when dealing with ordinary QT C++ you can always add a diagnostic to discover the current status of a variable. Not sure how you do this in QT quick..the closest I seem to be able to do is to do things like:

onForceOfflineChanged: {
             console.log ("onForceOfflineChanged= " + forceOffline)
 
    }

onForceOfflineChanged: {
             console.log ("onForceOfflineChanged= " + forceOffline)

    }

To copy to clipboard, switch view to plain text mode 

QT Quick is very different to what I have been used to.

Thank you for reading this.