Firebase RecaptchaVerifier: Unknown element

I have been trying to implement Firebase Phone Number Authentication with my VueJS project. I had setup everything as required: firebase project setup, enabling sign-in method, required HTML. Whenever the application tries to verify firebase recaptcha, it is constantly throwing errors What am I missing here? What needs to be done more?

<template>
  <div>
    <h1></h1>
    <template v-if="'verify' === state.value">
      <input type="number" v-model="verificationCode"/>
      <button id="verify-button" :class="{ 'disabled' : !verificationCode }" @click="verifyCode">Verify</button>
    </template>
    <template v-else>
      <vue-tel-input class="phone-input"
                     :disabled="loading"
                     :required="true"
                     v-model="phoneNumber"
                     @onInput="onNumberChange"></vue-tel-input>
      <button id="signInButton" :class="{ 'disabled' : !isPhoneValid, 'allowed': isPhoneValid }"
              @click="signInWithPhoneNumber">
        Receive verification code
      </button>
    </template>
  </div>
</template>

<script>
import 'vue-tel-input/dist/vue-tel-input.css'
import firebase from 'firebase'

export default {
  name: 'login',
  data () {
    return {
      state: {
        value: 'login',
        title: 'Login'
      },
      loading: false,
      phoneNumber: '',
      isPhoneValid: false,
      verificationCode: 0,
      recaptchaWidgetId: null,
      recaptchaVerifier: null,
      confirmationResult: null
    }
  },
  mounted () {
    const self = this
    this.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('signInButton', {
      'size': 'invisible',
      'callback': function (response) {
        console.log('solveRecaptcha', response)
        self.signInWithPhoneNumber()
      }
    })
    this.recaptchaVerifier.render()
      .then(function (widgetId) {
        self.recaptchaWidgetId = widgetId
      })
  },
  methods: {
    /**
     * listen to change in phone number and check if input is valid
     *
     * @param number
     * @param isValid
     * @param country
     */
    onNumberChange ({ number, isValid, country }) {
      this.isPhoneValid = isValid
    },
    /**
     * sign in into the application with phone number
     */
    signInWithPhoneNumber () {
      if (this.isPhoneValid) {
        this.loading = true

        const phoneNumber = this.phoneNumber
        const appVerifier = this.recaptchaVerifier

        firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
          .then(function (confirmationResult) {
            this.confirmationResult = confirmationResult
            this.loading = false
            this.state = { value: 'verify', title: 'Verify your phone' }
          })
          .catch(function (error) {
            console.log(error)
            this.loading = false
          })
      }
    }
  }
}
</script>

<style scoped>
  .phone-input {
    width: 255px;
    height: 45px;
    padding: 5px 0;
    margin: 10px auto;
    border: 1px solid lightgray;
  }

  .phone-input:focus {
    border: 1px solid lightgray;
  }

  button {
    width: 215px;
    height: 45px;
    cursor: pointer;
    text-transform: uppercase;
    background-color: lightgray;
  }

  button.disabled {
    cursor: not-allowed !important;
  }

  button.allowed {
    color: white;
    background-color: steelblue;
  }
</style>