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

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { CountUp } from 'countup.js';

const props = defineProps({
  end: {
    type: Number,
    required: true
  },
  options: {
    type: Object,
    default: () => ({}),
    required: false
  }
});

const countRef = ref<any>(null);
let countUp: any;
onMounted(() => {
  countUp = new CountUp(countRef.value, props.end, props.options);
  if (countUp.error) {
    console.error(countUp.error);
    return;
  }
  countUp.start();
});

watch(
  () => props.end,
  (newVal) => {
    if (countUp) {
      countUp.update(newVal);
    }
  }
);
</script>
