Why does Vue.nextTick() fire before the changes are rendered?

Question

Vue.js

I am making a prototype of a step carousel / infinite horizontal scroll for the columns of a wide table. Only visible columns are rendered.
On the right/left click event, a new column is added behind the scenes and their property is changed for the columns left, and the pre-assigned transitionone makes a smooth scrolling by 1 step.
Column components are rendered through v-forfrom an array. On click, I add 1 new element to the array at the beginning / at the tail through wrapped methods push()or unshift(). After that Vue.nextTick()and in it, when, in theory, the new element has already been rendered with the “before” position, I update the position for all elements to “after”, which changes their property leftand the transition begins.
That's why new elements appearimmediately in the final position and the animation is not applied to them.
How to let components render after being added to the array, and call a function after they are rendered?
Upd. prototype brought to the desired behavior . With repeated clicks, the elements on the left / right are completed and everything “goes” in a common container with transform: translate() But now a new problem, if you brutally jump along the arrows left and right, and without letting the animation complete, run it in the opposite direction, “turning” it at least 2 times, upon completion, the error of Vue itself flies in the console:TypeError: "e is undefined"

Answer 1

the problem is not in Vue. the problem (and it's really not a problem) is in the browser rendering peculiarities. for a negligibly small period of time, two identical style patches are applied to the element, therefore, for optimization purposes, it does not render them twice, but immediately renders the second position. You can change this behavior if you forcibly provoke reflow / repaint between two patches, you can do this, for example, by requesting some property for reading, for example, the width of an element. those. something like this:

<Box v-for="(item, index) in subset"
  ...
  :ref="`ref${index}`">

Vue.nextTick( () => {
  this.$refs.ref2[0].$el.clientWidth;
  ...
});

https://jsfiddle.net/f4qao1xt/
https://jsfiddle.net/dyuct4x9/