【vuejs-datepicker】フォーム要素の位置によって、カレンダーの表示位置を切り替える

Question

実現したいこと

• vuejs-datepickerを使用して、フォームをクリックするとカレンダーが表示され、カレンダーから選択した日付をフォームにセットしています。(デフォルトの挙動)
• デフォルトでは、フォームをクリックしたとき表示されるカレンダーは、フォームの下側ですが、フォームがブラウザの下の方に存在する場合は、フォームの上側にカレンダーを表示したいです。

前提

• サーバサイドから取得した一覧データのリストを<table>に表示し、特定の項目を更新できるようにしています。
• ページングは行っておらず、<table>は「overflow:scroll」でスクロールして参照するようになっています。
• したがって、ブラウザ上、上のほうの行は、フォームの下側にカレンダーが表示され必要があり、下の方の行はフォームの上側にカレンダーが表示される必要があります。

発生している問題

• その要素がブラウザ上、どの高さに存在しているのかを取得する方法が分かりません。

該当のソースコード

<template>
  <div>
    <table class="scroll-table">
      <thead>
　　　　　/*ヘッダ設定(略)*/
      </thead>
      <tbody>
        <tr v-for="result in results" :key='result.id'>
          <td v-for="(value, key) in columns" :key="key">
            <!--中略-->
            <!--他にも属性は色々指定していますが、省略。calendarClassにcalendar-upクラスを付与すると上側に表示はされます-->
            <input-datepicker :value="result[key]" @input="result[key]=$event; :calendarClass="{ 'calendar-up' : true }"/>
            <!--中略-->
            </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import InputDatepicker from 'vuejs-datepicker'
export default {
  components: {
    InputDatepicker 
  },
  data() {
     retun {
       results: [],/*データ省略*/
       colums: []/*データ省略*/
     }
  }
}
</script>

.calendar-up {
    top: -282px;
}

補足情報

• :calendarClass="{ 'calendar-up' : true }"のtrueの部分を、要素のY位置 > 1000とかにできれば、下の方のフォームだけcalendar-upクラスが適用されるのではないかと考えています。

よろしくお願いいたします。