Stepper is not working at all about tailwind-elements

[ramonov]

Actually i was using tw-element at my intertiajs project. Stepper from tw-element was working in cdn version. I tried using it in one of my page component which was not working. Now i found solution by calling Stepper object explicitly from vue by mounting/binding it manually . here is the code which worked for me.

<template>
<ul class="stepper" data-mdb-stepper="stepper" ref="stepper">
    <li class="stepper-step stepper-active">
      <div class="stepper-head">
        <span class="stepper-head-icon"> 1 </span>
        <span class="stepper-head-text"> step1 </span>
      </div>
      <div class="stepper-content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua.
      </div>
    </li>
    <li class="stepper-step">
      <div class="stepper-head">
        <span class="stepper-head-icon"> 2 </span>
        <span class="stepper-head-text"> step2 </span>
      </div>
      <div class="stepper-content">
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </div>
    </li>
    <li class="stepper-step">
      <div class="stepper-head">
        <span class="stepper-head-icon"> 3 </span>
        <span class="stepper-head-text"> step3 </span>
      </div>
      <div class="stepper-content">
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      </div>
    </li>
  </ul>

</template>

<script>
import LayoutUltrafi from "@/Shared/Layouts/LayoutUltrafi"
export default {
    layout: LayoutUltrafi,
    mounted(){
        this.loadStepper();
    },
    methods: {
        loadStepper(){
            var stepper = new Stepper(this.$refs.stepper);
        }
    }
}
</script>