Почему не выполняется скролл к последнему добавленному элементу?
Потому что его нет. Обновление DOM происходит не сразу же после изменения данных. Используйте nextTick.

И избавьтесь от jquery. Поставьте ref на список:

<ul class="chat--messages__wrapper" ref="messages">
А после добавления данных делайте так:

this.$nextTick(() => {
  const { messages } = this.$refs;
  messages.scrollTop = messages.scrollHeight;
});
Да, DOM не может меняться сразу, и реактивность тут не работает.
Функция должна завершиться и вернуться к основному потоку.
$nextTick или setTimeout(() => {}); , что одно и то же.
Потому что объекта для listenForWhisper сейчас нет.