How to stay in the same place while scrolling while adding elements in Vue?

Question

Vue.js

Friends! Tell! I'm making a type of messenger, an element on which the messages themselves scroll. So, when adding elements through vuex, the position seems to go astray. that is, you are on a specific message, as soon as the elements are added to the beginning of the array, the scrolling flies to another position.
maybe there is a hack :)

Answer 1

Keep the scrollHeight value. And do a watch on an array of elements - in the handler, calculate the difference between the old and new scrollHeight values, adjust the scrollTop accordingly. Somehow so .

Answer 2

Data from vuex is passed through computed, right? Add watch to this variable, there already calculate the height of the added element ($nextTick I think), and change the scrollTop

Answer 3

In general, after playing around, I came to the conclusion that when you add elements to the DOM in the old fashioned way, ParentNode.prepend(),
then everything is fine. But now the problem is this. I want to take a template as in mustache.js, push variables (in a loop) and prepend to DOM.
Is there any way to do this in Vue?