Dynamically integrate Vuetify v-stepper with Vue router

I was able to achieve this by doing the following:

<v-stepper-step @click="goToRoute('step1')">

with

goToRoute(name) {   this.$router.push({'name': name})}

You should be able to do this:

<v-stepper-step @click="$router.push({'name': name})">

As an additional answer to @tmfmaynard, in order to align the correct highlighted stepper with your current route after a page refresh, here is the code.

 <v-stepper v-model="e1" alt-labels non-linear>    <v-stepper-header class="elevation-0">      <v-stepper-step         step="1"         class="caption"         editable        @click="$router.push({name: 'name'}).catch(err => {})"       >      </v-stepper-step>    </v-stepper-header>    <v-stepper-items>      <v-stepper-content step="1">        <router-view />      </v-stepper-content>    </v-stepper-items>  </v-stepper><script>export default {  data () {    return {      e1: 1    }  },  created() {    this.getStepper()  },  methods: {    getStepper() {      const path = this.$route.path.split('/')      if(path[path.length-1].toLowerCase() === 'your-router-path') {        this.e1 = 1        // this.e1 = 1 = <v-stepper-step step="1" />        // this.e1 = 2 = <v-stepper-step step="2" />        // and so on.      }    }  }}