Disclosure with ref in VueJS3 Composite

[SDJeff]

Hi,

i tried to give the DisclosurePanels which are generated in a v-for a ref. So the idea is, when anybody is clicking on a button elsewhere at the page, we open the panel and scroll the browser window down to the current open panel. For this i defined this at the setup:

setup() { const accordions = ref([]); }

in my v-for loop i gave the panel the ref dynamical:

<job-accordion-panel :current-region="index" :panel-jobs="jobs[index]" :key="region" :ref=" (el) => { if (el !=== undefined) { accordions[region] = el; } } " ></job-accordion-panel>

Finally the page has only 10 Panels in the Disclosure.

But i don't understand what is the problem with the ref array. The are around 45 items and a lot ar undefined.
How can i just getting the rendered 10 by the key to hopefully jump to it later with a call like this?

goto(refName) { var element = this.$refs[refName]; var top = element.offsetTop; window.scrollTo(0, top); }