JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app" >
	<p>Scroll in the div below to see all the items and then press the button to add new  item and be scrolled back to top</p>
	<div id="test-div" ref="testDiv">
    	<p v-for="i in test">{{i}}</p>
	</div>
	<button @click="addItem">add item</button>
</div>

CSS

#test-div{
    background: pink;
    overflow: auto;
    height: 100px;
}

JavaScript

new Vue({
    el: '#app',
    data: {
        test: ['one', 'two', 'three', 'four', 'five']
    },
    methods: {
        addItem(){
            this.test.unshift('new item');
            this.$nextTick(function(){
				this.$refs.testDiv.scrollTop = 0;
			});
        }
    }
});