Bootstrap 5 collapse does not work correctly with Nuxt 3 Routing

Question

I use Nuxt 3 and Bootstrap 5.

//template

<button type="button" class="btn hide-me" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="false" aria-controls="collapse1">Read More 1</button>
<div class="collapse multi-collapse" id="collapse1">
 some text
 <button type="button" class="btn hide-me" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="false" aria-controls="collapse2">Read More 2</button>
</div>
<div class="collapse multi-collapse" id="collapse2">
 other text
<button type="button" class="btn" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="collapse1 collapse2">Read Less</button>
</div>

//css

.hide-me {
    opacity: 1;
    height: auto;
    transition: opacity .35s ease;
}

.hide-me[aria-expanded="true"] {
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: none;
}

It works perfectly until I go to other page and return. Use case 1:

1. Click Read More 1 button. Result: Read More 1 button disappears, div.collapse1 appears.
2. Click Read More 2 button. Result: Read More 2 button disappears, div.collapse2 appears.
3. Click Read Less button. Result: div.collapse1 and div.collapse1 disappears. Read More 1 button appears. Correct.

Use case 2:

1. Click Read More 1 button. Result: Read More 1 button disappears, div.collapse1 appears.
2. Click Read More 2 button. Result: Read More 2 button disappears, div.collapse2 appears.
3. Go to other page.
4. Go to current page. Result: Read More 1 button appears (ok). div.collapse1 appears (Incorrect). Read More 1 button aria-expanded="false", but div.collapse1 has class 'show'.

I tried to add:

mounted() {
  const collapseList = document.querySelectorAll('.collapse');
  [...collapseList].map(el => el.classList.remove("show"));
}

but in this case: Use case 3:

1. Click Read More 1 button. Result: Read More 1 button disappears, div.collapse1 appears.
2. Click Read More 2 button. Result: Read More 2 button disappears, div.collapse2 appears.
3. Go to other page.
4. Go to current page. Result: Read More 1 button appears (ok). div.collapse1 and div.collapse2 disappear (Correct).
5. Click Read More 1 button. Result: div.collapse1 appears but Read More 2 button is hiden (aria-expanded="true").