Carousel view not working on the Browser

[guruprasaad123]

I am developing a SPA using vuejs with materialize-css.I want to use carousal-slider in my project and I have read this official Document.Here's the code i tried.

App.vue

<template>
  <div id="app">

    <div class="navbar-fixed">
    <nav>
     ...
    </nav>
  </div> <!--navbar fixed end -->

  <div class="carousel carousel-slider center ">
    <div class="carousel-fixed-item center">
      <a class="btn waves-effect white grey-text darken-text-2">button</a>
    </div>
    <div class="carousel-item red white-text" href="#one!">
      <h2>First Panel</h2>
      <p class="white-text">This is your first panel</p>
    </div>
    <div class="carousel-item amber white-text" href="#two!">
      <h2>Second Panel</h2>
      <p class="white-text">This is your second panel</p>
    </div>
    <div class="carousel-item green white-text" href="#three!">
      <h2>Third Panel</h2>
      <p class="white-text">This is your third panel</p>
    </div>
    <div class="carousel-item blue white-text" href="#four!">
      <h2>Fourth Panel</h2>
      <p class="white-text">This is your fourth panel</p>
    </div>

</div>

  </div>

</template>

<script>
import M from 'materialize-css';

export default {
  mounted(){
 var elem = document.querySelector('.sidenav');
  var navigation = M.Sidenav.init(elem,{});

 var carousel = M.Carousel.init({
    fullWidth: true,
    indicators: true
  });

  },
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',

    }
  }
}
</script>

<style lang="scss">
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
@import url("https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.3/css/materialize.min.css");

</style>

Here's the screenshot of the weird behaviour of the carousel-view in chrome browser.

But the View I expected was...

[Dogfalo]

Seems like you are missing the element reference

var carousel = M.Carousel.init(element, {
    fullWidth: true,
    indicators: true
  });