How can I reflect changes on an array to my rendered html in lit-element?

Question

I have a simple array of 1,2,3 that I loop to render paragraphs. The problem is that whenever I add something like 4 to the array it doesn't appear on screen but the log shows the number 4 was added successfuly. How can I do it? I'm using lit-element 2.0.0 (version is very important, this.requestUpdate() doesn't work here but does in 2.3.1) Here's the code:

class XApp extends LitElement {

  static get properties() {
    return {
      items:{
        type:Array,
      }
    }
  }

  constructor() {
    super();
    this.items = [1,2,3];
  }

  firstUpdated(changedProperties) {
    if (super.firstUpdated) {
      super.firstUpdated(changedProperties);
    }
    const list = document.querySelector(".list");

    list.addEventListener("click", e => {
        console.log(e.target);
        'Origin: ', event.composedPath()[0];
    })
  }

  render() {
    return html`

      <ul class="list" @click="${(e) => console.log(e.currentTarget)}">
        <li class="item">Wash dishes</li>
        <li class="item">Walk your dog</li>
      </ul>

      <div
        <slot></slot>
        ${this.items.map(item => html`<p>${item}</p>`)}
      </div>

      <button @click="${this.change}">Change</button>

    `;
  }

  change(e){
    console.log("Try Change");
    this.items.unshift(4);
    console.log(this.items);
  }  
}

Answer 1

You need this.requestUpdate to update state in your function

change(e){
    console.log("Try Change");
    this.items.unshift(4);
    console.log(this.items);
    this.requestUpdate();
}

You can check here stackblitz, hope it helps