element plus library for vue 3 / Nuxt 3 collapse component scroll to open panel

Question

I'm hooking into the @change event on the el-collapse component and trying to scroll to the top of the open / active panel. It is a bit janky sometimes and scrolls to the middle of the content and NOT the top of the panel. I tried using refs but was having no luck so decided to try to use a dynamic ID but still same behavior.

Any ideas?

  <el-collapse v-model="activePatient" @change="onCollapseChange" accordion>
    <el-collapse-item
      class="my-4"
      v-for="patient in patients"
      :name="patient.name"
      :key="patient.name"
    >
      <template #title>
        <div
          :id="patient.name"
          @click="togglePatientProfile(patient.name)"
          :class="[patient.color, patient.name.toLowerCase()]"
          class="relative"
        >
          <div class="flex items-center justify-between">
            <p
              class="text-3xl"
            >
              {{ patient.name }}, {{ patient.age }}
            </p>
            <div class="flex">
              <el-icon
                :size="30"
                class="transition-all duration-300"
                :class="{
                  'rotate-180': patient.isActive
                }"
              >
                <el-icon-arrow-down-bold class="text-white" />
              </el-icon>
            </div>
          </div>

          <p
            class="text-xs font-medium"
          >
            {{ patient.leading }}
          </p>
        </div>
      </template>

      <div class="px-5">CONTENT</div>
    </el-collapse-item>
  </el-collapse>



<script setup>
const onCollapseChange = (activeNames) => {
  if (activeNames.length > 0) {
    const targetElement = document.getElementById(activeNames);
    if (targetElement) {
        targetElement.scrollIntoView({ behavior: 'smooth' });   
    }
  }
};
</script>