Laravel, шаблон компонента Vue не отображается?

Question

Извините, мой английский такой плохой!

Файл: 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

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

Файл: HeaderUserAuth.vue

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

Файл: 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>

«Созданный гость» отображается в консоли браузера, ноВ меню «block-header-user-control» не отображается «Гость».

Пожалуйста, помогите мне.СПЕЦИАЛЬНОЕ СПАСИБО !!

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

Спасибо всем!Это работало с 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>

Answer 1

Возможно, вам придется переместить ваши шаблоны за пределы области приложения - переместите их ниже #application.