main.qml

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Material 2.12
import QtQuick.Layouts 1.12

ApplicationWindow {
    id: window
    visible: true

    width: 400; height: 200

    Material.theme: Material.Dark
    Material.accent: Material.Purple

    ListModel {
      id: todos
      property int counter: 0

      ListElement { text: 'do this'; todoId: 0 }
    }

    RowLayout {
      TodoInput {
        width: window.width
        model: todos
        onAdd: {
          ++todos.counter;
          console.log(todo, todos.counter)
          todos.append({
            text: todo,
            todoId: todos.counter,
          });
          console.log(todos.count)
        }
      }

      TodoList {
        width: window.width
        model: todos

        onRemove: {
          todos.remove(todos.findIndex(t => t.todoId === todoId));
        }
      }
    }
}

TodoInput.qml

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

Item {
  id: root
  signal add(string todo)
  property var model

  RowLayout {
    anchors.horizontalCenter: parent.horizontalCenter

    TextField {
      id: input

      Text {
        anchors.fill: parent
        anchors.verticalCenter: input.verticalCenter
        id: placeholder
        text: 'Remember the milk'
        color: '#aaa'
        visible: !input.text && !input.activeFocus
      }
    }

    Button {
      text: 'add'

      onClicked: {
        add(input.text)
        input.text = '';
      }
    }
  }
}

TodoItem.qml

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

Item {
  id: root
  signal remove()

  Text {
    text: text
  }

  Button {
    text: 'x'
    onClicked: root.remove()
  }
}

TodoList.qml

import QtQuick 2.12
import QtQuick.Controls 2.12

Item {
  id: root
  signal remove(int todoId)
  property var model

  Component {
    id: testing

    Text {
      Component.onCompleted: console.log('fromtext', text, todoId)

      text: text + ' ' + todoId
    }
  }
  ListView {
    model: model
    delegate: testing
    //TodoItem {
    //  onRemove: remove(id)
    //}
    Component.onCompleted: console.log('list completed')
  }
}