尝试向Laravel刀片添加vue-password-strength-meter

Question

我正在尝试在Laravel 6项目中使用vue-password-strength-meter

我安装了npm i zxcvbn和npm vue-password-strength-meter，将PasswrodMeeter.vue文件添加到了components文件夹，然后更新了我的app.js文件

.vue内容

<template>
    <password
            v-model="password"
            :toggle="true"
            @score="showScore"
            @feedback="showFeedback"
    />
</template>

<script>
    import Password from 'vue-password-strength-meter'
    export default {
        components: { Password },
        data: () => ({
            password: null
        }),
        methods: {
            showFeedback ({suggestions, warning}) {
                console.log('?', suggestions)
                console.log('⚠', warning)
            },
            showScore (score) {
                console.log('?', score)
            }
        }
    }
</script>

我的app.js内容

    /* Plugins*/
import Meeter from './components/PasswordMeeter';
//Vue.component('Meeter', require('./components/PasswordMeeter'));
import VTooltip from 'v-tooltip';
Vue.use(VTooltip);
Vue.use(Meeter);
/* Components */
Vue.component('version', require('./components/Version').default);
Vue.component('chatbox', require('./components/chat/Chatbox').default);
Vue.component('bookmark', require('./components/BookmarkButton').default);
Vue.component('Meeter', require('./components/PasswordMeeter').default);

const app = new Vue({
    el: '#app',
    components: {

        'Meeter': require('./components/PasswordMeeter.vue'),
    }
});

在我的register.blade文件中添加

 <div id="app">
    <div class="Password__field">
        <Meeter></Meeter>
        @yield('content')
     </div>

形式

            <form role="form" method="POST" action="{{ route('register', ['code' => $code]) }}">
            @csrf
            <label for="username"></label><input type="text" id="username" class="fadeIn second" name="username"
                placeholder="@lang('auth.username')" required autofocus>
            <label for="email"></label><input type="email" id="email" class="fadeIn third" name="email"
                placeholder="@lang('auth.email')" required>

            <label for="password"></label><input type="password" id="password" class="fadeIn third" name="password"
                placeholder="@lang('auth.password')" required>
            <div id="app">
                <div class="Password__field">
                    <Meeter></Meeter>
                    @yield('content')
                </div>
            </div>
            @if (config('captcha.enabled') == true)
                @hiddencaptcha
            @endif
            <button type="submit" class="fadeIn fourth">@lang('auth.signup')</button>
        </form>

但是我运行npm install && npm运行dev并加载注册页面后，虽然在检查器中显示

，但我没有看到聚会者

<div id="app"><div class="Password__field"><!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }--></div></div>

关于如何使其正常工作的任何建议