How to use this stepper in a Vue project?

[ghost]

I have a project built using Vue Cli. Vuetify has a stepper component, but it has some builtin styles like textarea I don't want to use. So I found this Materialize-stepper.

I want to use it in a component, there is no guide for Vue I don't know how to use it. ..

I added these two lines in index.html

 <script src="https://unpkg.com/materialize-stepper@3.0.1/dist/js/mstepper.min.js"></script>
 <link rel="stylesheet" href="https://unpkg.com/materialize-stepper@3.0.1/dist/css/mstepper.min.css">

Then I make a new text.vue file like this, but it's not working. What to do?

<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>

Then it shows this error, what to do?

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)

[JuanxCursed]

+1

[Kinark]

Unfortunately there's currently no plans to support Vue. I'm sorry.