Maybe I'm not understanding well enough how nuxt works, but apparently my b-modals (bootstrap vue) are being declared twice whenever I use async fetch on a page. I'll explain how my code is structured (can't upload all of the code because of company policies):

I have a default layout in the layouts folder.

<template>
 <div>
  <wrapper-navbar />
  <nuxt class="body" />
  <wrapper-footer />
 </div>
</template>

Very simple stuff. The wrappers are declared in my components folder. The wrapper-navbar is a normal bootstrap navbar with modifications, and there I declare a b-modal with the unique id #login-modal which gets called whenever a user wants to login pressing a button with the attribute v-b-modal.login-modal. Everything works as expected, the user clicks the login button and a modal appears. The problem comes when in a page (in the pages folder) I call async fetch(). In these cases, when the user presses the login button, the login modal appears twice. I noticed that in these pages the methods created() and mounted() get called twice too, so I think that somehow the modal is getting declared twice.

// Inside pages/index.vue for example
async fetch() {
  try {
    this.data = await getSomeAsyncData();
  } catch (ex) {
    console.log(ex);
  }
}

This only happens when I have an await inside it. If I only print something or just avoid using fetch, the modal just appears once. What am I doing wrong? How can I avoid this? Thanks for your feedback.