globally access specific / tagged elements

[PierreSchwang]

Hi! I'm looking for a more "Vue-like" way to access specific elements (in particular their BoundingClientRect) - especially if they are in another component (due to routing).

Basically, what I'm having my App.vue including a Navigation and the RouterView. The pages / routes itself contain multiple sections with different background-colors. The navigation should adjust it's color accordingly to match those.
For now, I'm simply using the scroll event listener, request an animation frame and check which sections bounding rect overlaps with the navigation. What I'm not really happy with, is how I'm retrieving the individual sections from all rendered components - I'm basically querySelectorAll in nextTick:

nextTick(() => {
  updateElements();
  scrollHandler();
});

const updateElements = () => {
  sections = [...document.querySelectorAll(`.${LIGHT_CLASS},.${DARK_CLASS}`)].filter((value) => value.id !== "global_nav");
};

Is there something more appropriate for such a use-case?