update array

I want to create component with table which have add, update, delete operations. But when I try to add some test element to array I got this error

Uncaught TypeError: this.documents is not iterable at HTMLButtonElement.addNewDocument

This is simple code, but I can’t figure where is bug.

@State()
documents: string[] = [];

addNewDocument() {
 this.documents= [... this.documents, "test2"];
}

render() {

   return (
      <Host>
          <button onClick={this.addNewDocument} type="button" class="btn btn-success">
            <i class="fa fa-plus"></i>
            <span class="btn-text">add new</span>
          </button>

          {this.documents && this.documents.length ? (

            <div>

              <table>
                <thead>
                  <tr>
                    <th>Name</th>
                  </tr>
                </thead>
                <tbody>
                  {this.documents.map(document => (
                    <tr>
                      <td>{document}</td>
                    </tr>
                  ))}
                </tbody>
              </table>

            </div>
          ) : (
            <div>Loading...</div>
          )}

        </div>
      </Host>
    );
  }