<script setup lang="ts">
const { as = 'div', active } = defineProps<{
  as: any
  active: boolean
}>()

const el = ref()

watch(() => active, (active) => {
  const _el = unrefElement(el)

  if (active && _el)
    _el.scrollIntoView({ block: 'nearest', inline: 'start' })
})
</script>

<template>
  <component :is="as" ref="el">
    <slot />
  </component>
</template>