element not updating value on html Polymer V3

Question

I want to update the todoList in my PARENT COMPONENT after I have added a new item in my child using the AddItem() method. Nothing gets added the first time. EX. if I add "take test" doesn't get render, then if I add "take shower" doesn't get rendered but now "take test" does. Then if I add "take a leak" "take shower" gets rendered.

PARENT COMPONENT

firstUpdated(changedProperties) {
    this.addEventListener('addItem', e => {
      this.todoList = e.detail.todoList;
    });
  }

  render() {
    return html`
      <p>Todo App</p>
      <add-item></add-item>//Child item that triggers the add
      <list-items todoList=${JSON.stringify(this.todoList)}></list-items>
    `;
  }

CHILD COMPONENT

AddItem() {
    if (this.todoItem.length > 0) {
      let storedLocalList = JSON.parse(localStorage.getItem('todo-list'));
      storedLocalList = storedLocalList === null ? [] : storedLocalList;
      const todoList = [
        ...storedLocalList,
        {
          id: this.uuidGenerator(),
          item: this.todoItem,
          done: false
        }
      ];

      localStorage.setItem('todo-list', JSON.stringify(todoList));
      this.dispatchEvent(
        new CustomEvent('addItem', {
          bubbles: true,
          composed: true,
          detail: { todoList: storedLocalList }
        })
      );
      this.todoItem = '';
    }
  }

  render() {
    return html`
      <div>
        <input .value=${this.todoItem} @keyup=${this.inputKeyup} />
        <button @click="${this.AddItem}">Add Item</button>
      </div>
    `;
  }

Answer 1

Found my error. I was passing to detail: { todoList : storedLocalList } which is the old array without the updated value.

 AddItem() {
        if (this.todoItem.length > 0) {
          let storedLocalList = JSON.parse(localStorage.getItem('todo-list'));
          storedLocalList = storedLocalList === null ? [] : storedLocalList;
          const todoList = [
            ...storedLocalList,
            {
              id: this.uuidGenerator(),
              item: this.todoItem,
              done: false
            }
          ];

          localStorage.setItem('todo-list', JSON.stringify(todoList));
          this.dispatchEvent(
            new CustomEvent('addItem', {
              bubbles: true,
              composed: true,
              detail: { todoList: todoList }
            })
          );
          this.todoItem = '';
        }
      }