Laravel 5 Can'；t访问我的刀片文件中的组件方法

我试图访问刀片文件中的一个方法，单击

@按钮，但我得到一个错误

注册模式.vue

<template>
    <div>
        <div v-if="modal" class="animated fadeIn fixed z-50 pin overflow-auto bg-black flex">
            <div class="animated fadeInUp fixed shadow-inner max-w-md md:relative pin-b pin-x align-top m-auto justify-end md:justify-center p-8 bg-white md:rounded w-full md:h-auto md:shadow flex flex-col">

                <p class="text-xl leading-normal mb-8 text-center">
                    {{ __("Sign up to name to start socializing") }}
                </p>

                <div class="justify-center">
                    <form action="/auth/register" method="post">

                        <div class="mb-4">
                            <label class="block text-grey-darker text-sm font-bold mb-2" for="username">
                                {{ __("Name" )}}
                            </label>
                            <input class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight" id="username" type="text" placeholder="Username">
                        </div>

                        <div class="mb-4">
                            <label class="block text-grey-darker text-sm font-bold mb-2" for="username">
                                {{ __("Email" )}}
                            </label>
                            <input class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight" id="username" type="text" placeholder="Username">
                        </div>

                        <div class="mb-4">
                            <label class="block text-grey-darker text-sm font-bold mb-2" for="username">
                                {{ __("Password" )}}
                            </label>
                            <input class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight" id="username" type="text" placeholder="Username">
                        </div>

                        <div class="flex items-center justify-end">
                            <button class="bg-teal hover:bg-teal-dark text-white font-bold py-2 px-4 rounded" type="button">
                                {{ __("Sign up") }}
                            </button>
                        </div>

                    </form>
                </div>

                <span @click="toggleModal" class="absolute pin-t pin-r pt-4 px-4">
                    <svg class="h-6 w-6 text-grey hover:text-grey-darkest" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Close</title><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
                </span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data: function()
        {
            return {
                modal: false
            }
        }, 
        methods: {
            toggleModal: function() {
                console.log("djdjd")
                //this.modal = !this.modal
            }
        }
    }
</script>

我的刀片文件：

<div id="app">
    <button class="bg-blue w-full rounded-full text-white py-2 mb-2" @click="toggleModal">
            {{ __("Sign up") }}
        </button>
    </div>


    <div>
        <signup-modal></signup-modal>
    </div>

</div>

这是为什么？我如何解决它？
为了实现我的目标，我采用了基于事件的方式。例如，在我的组件中，我添加了方法mounted，并添加了以下内容：

mounted()
{
    eventHub.$on('signup-click', this.toggleModal)
}

我的主要Vue方法是添加了一个简单的事件发射器方法，如下所示：

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

    methods: {
        generateEvent: (event) => {
            eventHub.$emit(event);
        }
    } 
});

<button class="bg-blue w-full rounded-full text-white py-2 mb-2" @click="generateEvent('signup-click')">
    {{ __("Sign up") }}
</button>

然后在我的blade文件中，我简单地调用了该方法，如下所示：

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

    methods: {
        generateEvent: (event) => {
            eventHub.$emit(event);
        }
    } 
});

<button class="bg-blue w-full rounded-full text-white py-2 mb-2" @click="generateEvent('signup-click')">
    {{ __("Sign up") }}
</button>


{{{（“注册”）}

哪个简单函数会发出事件，因此我的组件会侦听它，然后调用该子方法。
toggleModal
必须在父函数中定义，以便父函数从父函数的模板调用它。此外，你的应用程序模板无效。
signup model
组件出现在
#app
div之外。