QML Dynamically Update ListModel

Question

I'm confused at some point in QML as I'm new to it. The simplified QML codes define a window that includes one ListView which includes my delegate Items. One button loads and unloads this ListView Element. When I load and unload the ListView Element, all text that I wrote inside the TextInput is reset from listModel as I expected. So I need to dynamically update listModel thus I will not lose the text that I wrote in TextInput. I added a Keys.onPressed in TextInput to achieve that. But it works with some logical error. When I type, let's say "aaaa", then I unload the ListView and load again via Button, what I get is "aaa" (the last letter is not passed to listModel). This is understandable but how can I update the list model roles dynamically in this example?

main.qml

ApplicationWindow {
    id: applicationWindow

    width: 300
    height: 200
    visible: true
    title: qsTr("01_Change_Model_Data")

    ListModel {
        id: listModel1
        ListElement {labelText: "Text Field 1:"; textInput_text : "This is text 1"}
        ListElement {labelText: "Text Field 2:"; textInput_text : "This is text 2"}
    }


    Button {
        id: loadUnloadBtn
        height: 24
        width: 50
        text: "Load"

        anchors {
            right: parent.right
            rightMargin: 20
            top: parent.top
            topMargin: 10
        }
        onClicked: {
            if(listAreaLoader.source == "") {
                listAreaLoader.source = "ListArea.qml"
            }else {
                listAreaLoader.source = ""
            }

        }
    }

    Loader {
        id: listAreaLoader
        anchors {
            top: parent.top
            topMargin: 10
            bottom: parent.bottom
            bottomMargin: 10
            left: parent.left
            leftMargin: 10
            right: parent.right
            rightMargin: 80
        } 
        source: ""
    }
}

ListArea.qml:

Item {
    id: listViewDelegate
    ListView {
        id: listView1
        anchors.fill: parent

        model: listModel1
        delegate: listElementDelegate
        spacing: 6
    }

    Component {
        id: listElementDelegate

        Rectangle {
            color: "#00000000"
            height: 24
            width: 50

            Label {
                id: label1
                text: labelText
            }

            Rectangle {
                color: "grey"
                radius: 4
                width: 100
                height: 20
                anchors {
                    verticalCenter: label1.verticalCenter
                    left: label1.right
                    leftMargin: 10
                }

                TextInput {
                    id: textInput1
                    anchors.fill: parent
                    leftPadding: 5
                    rightPadding: 5
                    clip: true
                    verticalAlignment: Text.AlignVCenter
                    text: textInput_text

                    Keys.onPressed: {
                        listView1.currentIndex = index
                        listModel1.setProperty(index, "textInput_text", textInput1.text)
                    }
                }
            }
        }
    }
}