Manipulating tailwind data using Vue

Question

I am using tailwind (flowbite) css for web components that comes with respective css and js. I want to implement acordion component ( https://flowbite.com/docs/components/accordion/ ) and fill its data dynamically using Vue.

        <li
          v-for="({ username, email, role }, index) in myUsers"
          :key="username"
        >
          <h2 v-bind:id="`accordion-open-heading-${{ index }}`">
            <button
              type="button"
              class="flex items-center justify-between w-full p-2 font-medium text-left text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
              v-bind:data-accordion-target="`#accordion-open-body-${index}`"
              aria-expanded="true"
              v-bind:aria-controls="`accordion-open-body-${index}`"
            >

Seems that the vue part works fine, it grabs the data, creates respective HTML li - lists and changes its HTML tags for accordion access (accordion-open-body-1, accordion-open-heading-1..) However, JS that cmes with flowbite can not grab that changes and throws the following error:

Please, advice how can I fix this issue.

Answer 1

Change

<h2 v-bind:id="`accordion-open-heading-${{ index }}`">

to

<h2 v-bind:id="`accordion-open-heading-${ index }`">
                                        👆     👆