Error: Cannot read property "add" of undefined

[jmrlib]

Hello, I'm trying a very simple test of vue-shepherd and I'm getting the following error after clicking on the first "Next" button associated with first Step ('Welcome to the JMRL Staff-Portal Tour.'). Part of the issue is when this is still available as the main Vue prototype, but I don't think that's it (and the same problem occurs if I use this.$el or that.$el in the first Step.

Console code and code for App.vue follows (I've scrubbed some mapActions from the <script> section because they aren't pertinent.

Uncaught TypeError: Cannot read property 'add' of undefined
    at Step._show (shepherd.esm.js:5063)
    at Step.show (shepherd.esm.js:4891)
    at Tour.show (shepherd.esm.js:5724)
    at Tour.next (shepherd.esm.js:5671)
    at HTMLButtonElement.<anonymous> (shepherd.esm.js:2670)
_show @ shepherd.esm.js:5063
show @ shepherd.esm.js:4891
show @ shepherd.esm.js:5724
next @ shepherd.esm.js:5671
(anonymous) @ shepherd.esm.js:2670

/**
App.vue
*/

<template>
  <div>
    <TheNavbar ref="app-navbar-id" />

    <router-view />
  </div>
</template>

<script>
import { TheNavbar } from '@/components/Nav/index.js'
import { mapActions } from 'vuex'

export default {
  name: 'App',
  data() {
    return {}
  },

  components: {
    TheNavbar,
  },

  async created() {
    console.log('App created', new Date().getTime())
    try {
      debugger
      await this.loadLoginStates()
      debugger
    } catch (e) {
      console.log(e)
    }
  },

  mounted() {
    console.log('App mounted', new Date().getTime())
    let that = this

    this.$nextTick(() => {
      const tour = this.$shepherd({
        defaultStepOptions: {
          classes: 'shadow-md bg-purple-dark',
          scrollTo: true,
        },
        useModalOverlay: true,
      })

      tour.addSteps([
        {
          attachTo: { element: this.$el, on: 'top' },
          classes: 'example-step-extra-class',
          buttons: [{ text: 'Next', action: tour.next }],
          text: 'Welcome to the JMRL Staff-Portal Tour.',
        },
        {
          attachTo: { element: that.$refs['app-navbar-id'], on: 'bottom' },
          classes: 'example-step-extra-class',
          buttons: [
            {
              text: 'Next',
              action() {
                tour.next()
                return this.$router.push({ name: 'hr-leave-user' })
              },
            },
          ],
          text: 'And continue with the tour!',
        },
      ])

      tour.start()
    })
  }
}
</script>

[RobbieTheWagner]

@jmrlib from the stack trace it looks like this line https://github.com/shipshapecode/shepherd/blob/master/src/js/step.js#L395

Basically, this.$el or that.$refs['app-navbar-id'] seem to be undefined, so it is trying to add classes to a classList of an undefined element.