Vue 3 - Transitioned Component Scroll Position Jumps

Question

I am loading a component into a layout - a side panel with content that is taller than the layout container.

The layout container has overflow-y: auto set on it, so the side panel can scroll up/down to show all it's content without scrolling the container. This is what I want to happen.

My issue is that when the component is loaded into the DOM via a v-if condition being met, after a short delay the scroll position within the side panel jumps to some indeterminate scrollTop position down the height of the inner content. It is not the top nor the bottom.

I want the scroll position of this newly loaded component to stay at the very top.

Note #1: I am wrapping the new component in a <transition>

Note #2: I am using Inertia.js if that has any bearing on this, although I am not performing a page transition, simply loading a new component into my layout.

I have tried hooking in to the onMounted lifecycle, and using a ref for the root of the component forcing the scroll to the top.

  const root = ref(null)

  onMounted(() => {
    root.value.scrollTop = 0
  })

This works briefly, but then jumps further down.

Note: if I instead use a setTimeout function and a delay of something like a second, I do get the desired result, however I don't always know how long the component will take to initialise and render.