Динамическое присваивание модуля по ссылке ref
Есть такой код:
<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
}
})
}
Вопрос касается присвоения импортируемого модуля useElementSize() переменной.
Берем первый кейс с элементом <ul class="priceWrap" ref="priceWrap">
где происходит обычное статическое присваивание значения импортируемого модуля в разделе даты
проблем с этим никаких не возникает и на следующем скрине можно увидеть что в дев тулзе мы получаем вычисляемое значение:

Далее такой же трюк только с усложнением я попытался реализовать уже с элементами(компонентом priceElement) <li>
и генерацию св-в даты на лету по вышеописанному примеру.
Но данная реализация не работает корректно и не получает значения высоты елементов:

Вопрос:
Почему не удаеться взять значения высоты во втором кейсе?
Возможно ли это реализовать корректно +- в текущей конструкции кода?