Bootstrap гармошка не рушится в VueJS

Question

У меня есть небольшая проблема здесь, и я не уверен, как это исправить. Это, наверное, что-то очень маленькое и глупое, но я смотрю на это ...

У меня есть этот аккордеон в начальной загрузке, и обычно открытые элементы разрушаются, когда вы выбираете новый. Этого не происходит в моей версии.

Код ниже:

<template>
  <div class='monsters'>
    <div class="loading" v-if="loading">
      <div class="loading">Loading&#8230;</div>
    </div>
    <div v-if="error" class="error">
        {{ error }}
    </div>
    <ul v-if="monsters">
      <div class="panel-group" id="accordion">
        <div class="panel panel-default" v-for="monster in monsters">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" :href="'#monster'+monster.id">{{ monster.name }}</a>
            </h4>
          </div>
          <div :id="'monster'+monster.id" class="panel-collapse collapse in">
            <monster-lg  v-bind:monster="monster"></monster-lg>
          </div>
        </div>
      </div>
    </ul>
  </div>
</template>

Любые идеи о том, почему, как и т.д.?