There is this code:
<ul class="priceWrap" ref="priceWrap">
<priceElement class="priceElement" v-for="(item, index) in priceWrapElements"
:item="item"
:index="index"
:key="item.someKey"
:ref="`keyRef-${index}`"
>
{{ Number(item.priceElementText).toFixed(5) }}
</priceElement>
<!-- <priceElement> end -->
</ul>
<!-- <ul class="priceWrap"> end -->
setup: function () {
const store = useStore()
const priceWrapElements:any = ref([])
const count = 4
const priceWrap = ref(null)
const priceWrapSizes = useElementSize(priceWrap)
const priceWrapHeight = priceWrapSize
watch(priceWrapHeight, (currentValue) => {
for (let i = 0; i < count; i++) {
const tempObject:any = {}
tempObject.someKey = `someValue-${i}`
tempObject[`keyRef-${i}`] = ref(null)
tempObject[`priceElementSizes-${i}`] = useElementSize(tempObject[`keyRef-${i}`])
tempObject.priceElementText = '12' + I
priceWrapElements.value[i] = tempObject
}
})
}
The question is about assigning an import module useElementSize() to a variable.
We take the first case with the element <ul class="priceWrap" ref="priceWrap">
where is the normal static assignment of the value of the imported module in the date section
There are no problems with this, and on the next screen you can see that in the dev tool we get the calculated value:

Further, I tried to implement the same trick only with complication already with the elements (the priceElement component) <li>
and generating date properties on the fly as described above.
But this implementation does not work correctly and does not get the height of the elements:

Question:
Why can't I get the height values in the second case?
Is it possible to implement this correctly in the current code structure?