Tw-elements carousel in Nuxt 3 can not add a tag in first loop

Question

I am facing an issue with my Tw-elements carousel with Nuxt 3, in the example carousel the first image has a tag of data-te-carousel-active not in class. I tried to do this but with no success.

      <div
        class="relative float-left -mr-[100%] w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
        data-te-carousel-item
        v-for="(image, index) in $props.images"
        :key="image.url"
        {{ 'data-te-carousel-active': index === 0 }}
      >
        <img :src="image.url" class="block w-full" alt="Wild Landscape" />
      </div>

I get error of Attribute name cannot contain U+0022 ("), U+0027 ('), and U+003C (<).

I tried to put it in a class but still not working. It must be a tag.