Vue.jsで画面に要素を追加した時に一番下にスクロールしない

以下を参考に実装したがうまくいかなかった。

stackoverflow.com

原因はボタンクリックイベントでデータをpushした時にscrollTopを設定していたが、そのタイミングではまだDOMが更新されていないため。 以下のようにDOM描画が終わってからscrollTopを設定するとBottomにスクロールできた。

  public addItem() {
    this.items.push(1);

    this.$nextTick(() => {
      const rightArea = this.$el.querySelector('#right-area');
      rightArea.scrollTop = rightArea.scrollHeight - rightArea.clientHeight;
    });
  }