Estoy usando jQuery y sockets para crear un chat. Este es el evento que escucha el socket para enviar mensajes al servidor que luego se mostrarán en las pantallas y funciona.

socket.on('new message', function(data) {
        if(data === "") return false;
 
        $chat.append(`${data} <br />`);
        $chat.scrollBottom = $chat.scrollHeight;
        });
  });

yo vi por internet que si ponias $chat.scrollBottom = $chat.scrollHeight; el problema que comentaré más adelanta se arreglaba, pero hasta ahora nada. La variable $chat esta declarada como una constante fuera del scope del callback, no se si esto afecte. Esta variable encierra lo que es el chat como tal donde se escriben los datos con el metodo append();

por otro lado coloque

#chat {
        overflow:auto;
      }

y esto me permite hacer el scroll.

Mi problema es que cuando esta haciendo scroll la barra se queda arriba y no baja junto con los mensajes, probé con overflow: scroll pero nada, es lo mismo ¿Alguien tiene alguna idea? Estoy usando vuejs para esto, y quisiera saber si existe alguna forma de hacerlo sin tener que usar jquery y usando vuejs.