Tengo un problema de sintaxis con '="collapse-{{ product.id }}"' tanto en el botón b como en el colapso b. ¿Cómo debe formarse esto? Solo trato de crear una identificación única que vincule el botón a la etiqueta de colapso.

 <b-list-group header="List Product 1"> <b-list-group-item :variant="product.inventoryStatus? 'success': 'danger'" style="min-width: 30%; max-width: 30%" :border-variant="product.inventoryStatus ? 'success' : 'danger'" align="center" v-for="product in productList" :key="product.id"> <b-button vb-toggle="collapse-{{ product.id }}" class="m-1">{{ product.name }}</b-button> <b-collapse id="collapse-{{ product.id }}"> Price: {{ product.price }}<br> Brand: {{ product.brand }}<br> <p :bg-variant="product.inventoryStatus? 'success': 'danger'">{{product.inventoryStatus ? 'IN STOCK': 'OUT OF STOCK'}}</p> <table> <tr> <td> <b-button variant="danger" @click="deleteProduct(product.id)"> <i class="fa fa-trash"></i></b-button> </td> <td> <UpdateProduct :product="product"/> </td> </tr> </table> </b-collapse> </b-list-group-item> </b-list-group>