<script setup lang="ts">
import type { CountUpOptions } from 'countup.js'
import { CountUp } from 'countup.js'

interface Props {
  endVal: number
  options?: CountUpOptions
}
const props = defineProps<Props>()

const myRef = $ref<HTMLElement>()

let countUp: CountUp | null = null
onMounted(() => {
  if (!myRef) return
  countUp = new CountUp(myRef, props.endVal, props.options)
  if (!countUp.error) {
    countUp.start()
  } else {
    console.error(countUp.error)
  }
})
watch(
  () => props.endVal,
  value => {
    countUp?.update(value)
  }
)
</script>

<template>
  <span ref="myRef"></span>
</template>
