Vue.js 如何将ui组件（materialize stepper）添加到vue项目中？

我正在为vue项目寻找一个材料设计步进器ui组件。我有一个使用Vue Cli构建的项目。Vuetify有一个stepper组件，但它有一些内置的样式，比如取代了原始样式的textarea，所以我不想使用它。所以我找到了这个物化步进器

此用法没有说明如何在vue项目中使用它。那么，如何将此组件（或类似的任何组件）添加到vue中呢

我在index.html中添加了这两行

然后我创建了一个新的text.vue文件，如下所示，但它不起作用。怎么办

<template>
  <div class="test">
      <ul class="stepper linear">
        <li class="step active">
          <div class="step-title waves-effect">E-mail</div>
          <div class="step-content">
            <!-- Your step content goes here (like inputs or so) -->
            <div class="step-actions">
              <!-- Here goes your actions buttons -->
              <button class="waves-effect waves-dark btn next-step">CONTINUE</button>
            </div>
          </div>
        </li>
      </ul>
  </div>
</template>

<script>
var stepper = document.querySelector(".stepper");
var stepperInstace = new MStepper(stepper, {
  // options
  firstActive: 0 // this is the default
});
</script>
<style scoped>
</style>

mstepper.min.js:10 Uncaught TypeError: Cannot read property 'children' of null
    at mstepper.min.js:10
    at E._init (mstepper.min.js:10)
    at new E (mstepper.min.js:10)
    at eval (test.vue?1174:178)
    at Object../node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/test.vue (app.js:774)
    at __webpack_require__ (app.js:679)
    at fn (app.js:89)
    at eval (test.vue?edbc:1)
    at Object../src/components/test.vue (app.js:2019)
    at __webpack_require__ (app.js:679)