Floating buttton not works after landing different page and come back

[bitdom8]

Expected Behavior

I want to go to different site page and coma back see it working again.

Current Behavior

I need to reload the page to mount to event lisstener again. It breeaks somewhere between.

Here is the code:

<div class="fixed-action-btn">
  <a class="btn-floating btn-large red">
    <i class="large material-icons" @click="lop">mode_edit</i>
  </a>
  <ul>
    <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
    <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
    <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
    <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
  </ul>
</div>

  mounted() {
    this.items = this.recipes
    document.addEventListener('DOMContentLoaded', function () {
      var elems = document.querySelectorAll('.fixed-action-btn')
      var instances = M.FloatingActionButton.init(elems)
    })
  },

[bitdom8]

It NOT works when I use this Nuxtlink:

            <li class="tab col s3">
              <NuxtLink :to="localePath('/account/login')"
                ><i class="material-icons">history</i>Hesap</NuxtLink
              >
            </li>

It WORKS with this one though:

            <li class="tab col s3">
              <a href="/tr">Sass</a>
            </li>

[bitdom8]

Have solved:

     ```

// document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.carousel');
var instances = M.Carousel.init(elems, {fullWidth: false, indicators: true});
// });

You need to remove document.addEventListener('DOMContentLoaded', function() {, otherwisee DOM elementts only bind to event listeners when page is fully reloaded again