Scroll To Bottom of Div with Alpine JS or Livewire?

I am trying to get scrolling to the bottom working for chat messages as default with Alpine Js or Livewire. Sorta how regular chat messengers work.

I am currently doing some JS tutorials, but having trouble with understanding how to get this to work with alpine. I found a bunch of examples of this.

<div class="flex h-80 w-48 bg-blue-100  m-4 p-4 overflow-hidden">
    <div class="chat_container h-full w-full overflow-y-auto flex flex-col space-y-4 bg-green-200 "
        x-ref="scrollToBottom"
        x-data="{scroll: () => {
            var el = this.$refs.scrollToBottom;
            el.scrollTop = el.scrollHeight;
        } }"
        x-init="scroll()"
        >

        <div class="h-56 w-full flex flex-none bg-red-200">
                Test Content
        </div>
        <div class="h-56 w-full flex flex-none bg-red-200">
            Test Content
        </div>
        <div class="h-56 w-full flex flex-none bg-red-200">
            Test Content
        </div>

    </div>
</div>

I am getting this error, but honestly my entire code could be wrong

Some examples I found https://stackoverflow.com/questions/270612/scroll-to-bottom-of-div

function scrollToBottom (id) {
   var div = document.getElementById(id);
   div.scrollTop = div.scrollHeight - div.clientHeight;
}

https://codepen.io/jakub003/pen/xxdLYgr

$(function scrollToBottom() {
    var ChatDiv = $('.chat_container');
    var height = ChatDiv[0].scrollHeight;
    ChatDiv.scrollTop(height);
});

Is there some tips on how to convert js code to work with alpine in general?