vue-slick-carousel dots not showing properly

Question

When I run yarn build my nuxtjs application and see it on my browser, I don't see the dots properly from my carousel. Here's the image of how I see it:

To be precise, this is what it shows •

I can see the dots in dev, they are dots with this content: •. Any ideas why is this happening?

My component:

<template>
  <div class="mx-10">
    <VueSlickCarousel :dots="true">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <!-- <template #customPaging>
        <div class="custom-dot">
          <div
          class="rounded-full bg-black"
            style="width: 5px; height: 5px"
          ></div>
        </div>
      </template> -->
    </VueSlickCarousel>
  </div>
</template>

<script>
import VueSlickCarousel from "vue-slick-carousel";
import "vue-slick-carousel/dist/vue-slick-carousel.css";
import "vue-slick-carousel/dist/vue-slick-carousel-theme.css";
export default {
  components: { VueSlickCarousel }
};
</script>
<style scoped>
</style>