ElementRef not finding DOM node with MutationObserver

Ionic Framework
1

I am trying to scroll to the bottom of the view when a new message comes in. However, it is not finding it and not scrolling down and I cannot find any solution to it. I was following a ionic-3 version of this however, the way that we reference the Dom nodes has changed??

<ion-content #content>
  <ng-container *ngIf="messages$.length; else loading">
    <ion-grid>
      <ion-row *ngFor="let message of messages$">
        <ion-col
          *ngIf="id === message.id"
          size="9"
          offset="3"
          class="message my-message"
          [ngStyle]="{ background: message.isUrgent ? 'var(--ion-color-danger)' : 'var(--ion-color-primary)' }"
        >
<!-- hiding  more divs for brevity -->
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-content>

component.ts

  private mutationObserver: MutationObserver;

  @ViewChild(IonContent) private content: IonContent;
  @ViewChild(IonCol, { read: ElementRef }) private chatList: ElementRef
//note, above I have tried, IonList/Row/Col/Grid

  public ngAfterViewInit(): void {
    this.mutationObserver = new MutationObserver((mutations: MutationRecord[]): void => {
      console.log('here', mutations); //<--never in console
      this.content.scrollToBottom();
    });
    this.mutationObserver.observe(this.chatList.nativeElement, {
      childList: true,
    });
  }

any help greatly appreciated, thanks