使用Firebase和VueJS验证电话号码时出现TypeError错误

Question

我正在尝试遵循Firebase文档，该文档概述了如何使用JavaScript（下面链接）对电话号码进行身份验证。

Authenticate with Firebase with a Phone Number Using JavaScript

在将代码片段复制粘贴到基本的VueJS组件中之后，尽管在控制台中出现以下错误，但我仍成功地向电话号码发送了验证码。

backend.js:formatted:665 Uncaught TypeError: Cannot read property 'source' of null
    at n (backend.js:formatted:665)
n @ backend.js:formatted:665

以下图像是以上错误所指的内容（似乎是一些与vue-devtools相关的源代码）。

下面是我的VueJS代码：

<template>
    <div>
        <button id="sign-in-button"
            v-on:click="onSubmit">Submit</button>
    </div>
</template>

<script>
    import firebase from 'firebase';

    export default {
        data() {
            return {
                recaptchaVerifier: ""
            };
        },
        methods: {
            onSubmit() {
                console.log("Hello");
                firebase.auth()
                    .signInWithPhoneNumber("PHONE NUMBER HERE", this.recaptchaVerifier)
                .then((confirmationResult) => {
                    console.log("Success");
                    console.log(confirmationResult);
                }).catch((error) => {
                    console.error(error);
                    this.recaptchaVerifier.render()
                        .then((widgetId) => {
                            grecaptcha.reset(widgetId);
                        });
                });
            }
        },
        mounted() {
            this.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
                'sign-in-button',
                {
                    'size': 'invisible',
                    'callback': (response) => {
                        // reCAPTCHA solved, allow signInWithPhoneNumber.
                        // console.log(response)
                        this.onSubmit();
                    }
                }
            );
        }
    };
</script>

似乎“ onSubmit”方法总是被调用两次，如控制台打印的内容所示。但是，我总是收到一个验证文本，这更加令人困惑。

有人可以解释为什么我收到未捕获的TypeError以及为什么onSubmit似乎被调用了两次吗？我感觉这与reCAPTCHA有关，但我不确定我是否理解那里发生了什么。