【初心者】要素の高さが取得出来ない

要素の高さが上手く取得出来ない

配列内にあるアイテムのリストを一覧表示する画面をVue.js3で実装しています。
アイテムのリストの高さが、使用者の画面の表示領域の高さより大きい場合にスクロールバーを表示させたいと考えています。（アイテムリストの高さは文字数やアイテム数によって変化し、heightは決まっておりません）
その際比較をするための「アイテムのリストが表示されている要素の高さ」を上手く取得できず困っています。

「使用者の画面表示領域」についてはdiv要素にテンプレート参照を使うことで取得ができたのですが、
「画面表示領域外も含めたアイテムのリスト自体の高さ」に関しては以下の式だと
まだ要素が構成されていないタイミングで式が実行されているのか、「０」が返ってきてしまったり
「使用者の画面表示領域」と同じ値が返ってきてしまいます。

適切な表記方法についてお伺いしたく思っております。
どうぞ宜しくお願いいたします。

現在のコード

<script setup>
items = ref([])
<div　ref = "elm">//テンプレート参照
・・・
<ul><li>のリストにitemsを表示
・・・
</div>
</script>

<template>
const elm = ref(null)
onMounted(() => {
  const rect = elm.value.getBoundingClientRect();
  console.log(rect.height)
})
  const domLength = items.value.lengthX
  console.log(domLength)//ここが０になってしまう
</template>