스크롤 최하단으로 내려주기(Vue)

하나의 컴포넌트내에서 스크롤이 필요한 영역만큼만 스크롤을 주고 특정 버튼 클릭시 스크롤을 최하단으로 내려주는 기능이 필요해 구현해보았다.

<template>
	<div>
		<!-- 코드들 -->
        
        <!-- 스크롤 영역 -->
        <div ref="scrollArea"
			 style="overflow: scroll; height: 350px">  
         <!-- 스크롤 영역 코드 -->
         <button @click="scrollDown">스크롤 내려줘</button>
        </div>
    </div>
</template>

<script>
// 기타 데이터, 설정및 함수들...

private scrollDown() {
	// 브라우저에 요소 출력 후 스크롤 적용
	this.$nextTick(() => {
    	const SCROLL_AREA = this.$refs.scrollArea;
	 	SCROLL_AREA.scrollTo({ top: separateSettingArea.scrollHeight, behavior: 'smooth',});    
     })
}
</script>