Column {
    Button {
        text: "Add"
        property int counter: 0
        onClicked: {
            var list = gridView.model;
            list.push( counter );
            gridView.model = list;
            counter += 1;
        }
    }
    Button {
        text: "Remove"
        enabled: gridView.currentItem !== null
        onClicked: {
            var list = gridView.model
            list.splice( gridView.currentIndex, 1 );
            gridView.model = list;
        }
    }
    
    Button {
        text: "Remove 2"
        // NOTE This only works as gridView.count gets updated
        enabled: ( gridView.currentIndex >= 0 ) &&
                 ( gridView.currentIndex < gridView.count )
        onClicked: {
            var list = gridView.model
            list.splice( gridView.currentIndex, 1 );
            gridView.model = list;
        }
    }

    GridView {
        id: gridView
        model: []
        clip: true
        width: 200
        height: 200

        onCountChanged: console.log("count changed", count)
        onCurrentIndexChanged: console.log("currentIndex changed", currentIndex)
        onCurrentItemChanged: console.log("currentItem changed", currentItem)

        cellWidth: 50
        cellHeight: 50
        delegate: Rectangle {
            width: 45
            height: 45
            color: (index === gridView.currentIndex) ? "red" : "green"
            MouseArea {
                anchors.fill: parent
                onClicked: gridView.currentIndex = index
            }
            Text {
                anchors.centerIn: parent
                text: modelData
            }
        }
    }
}