Laravel、Vue组件模板未显示？

对不起，我的英语太差了

文件：app.js

window.auth_id = 0;
Vue.component('block-header-user-control', require('./HeaderComponent.vue'));
new Vue({
    el: '#application'
});

文件HeaderComponent.vue

<template lang="html">
    <header-guest v-if="!auth"></header-guest>
    <header-auth v-else></header-auth>
</template>

<script>

    import HeaderGuest from './HeaderUserGuest.vue';
    import HeaderAuth from './HeaderUserAuth.vue';

    export default {
        data: function () {
            return {
                auth: window.auth_id
            }
        },
        components: {
            'header-guest': HeaderGuest,
            'header-auth': HeaderAuth,
        },
        methods: {},
    }
</script>

从“/HeaderUserGuest.vue”导入HeaderGuest；
从“/HeaderUserAuth.vue”导入HeaderAuth；
导出默认值{
数据：函数（）{
返回{
auth:window.auth\u id
}
},
组成部分：{
“header guest”：HeaderGuest，
“header auth”：HeaderAuth，
},
方法：{}，
}

文件：HeaderUserGuest.vue

<script>
    export default {
        template: '#header-user-auth', // Not working,
        // template: `<div>cascaaSA</div>`, // working
        data() {
            return {}
        },
        mounted() {
            console.log('Created Guest');
        },
    }
</script>

导出默认值{
模板：“#头用户身份验证”，//不工作，
//模板：`cascaaSA`，//正在工作
数据（）{
返回{}
},
安装的（）{
console.log（'Created Guest'）；
},
}

文件：HeaderUserAuth.vue

<script>
    export default {
        template: '#header-user-auth',
        name: 'header-auth',
        data() {
            return {}
        },
        created() {
            console.log('Created Auth');
        },
    }
</script>

导出默认值{
模板：“#头用户身份验证”，
名称：'头身份验证'，
数据（）{
返回{}
},
创建（）{
log（'Created Auth'）；
},
}

文件：index.blade.php

<div id="application">
    <script type="text/x-template" id="header-user-guest">
       Guest
    </script>
    <script type="text/x-template" id="header-user-auth">
       Logged
    </script>
    <block-header-user-control></block-header-user-control> 
</div>

客人
记录

“已创建的来宾”显示在浏览器控制台中，但“块标题用户控制”菜单不显示“来宾”

请帮帮我。特别感谢

====================

谢谢大家！它与html一起工作。文本不起作用

<div id="application">
    <script type="text/x-template" id="header-user-guest">
       <div>Guest</div>
    </script>
    <script type="text/x-template" id="header-user-auth">
       <div>Logged</div>
    </script>
    <block-header-user-control></block-header-user-control> 
</div>

客人
记录

您可能需要将模板移到应用程序范围之外-将其移到

#应用程序下方

谢谢您的回复！我把它移到外面了，但还是不起作用