Laravel和vue.js模板：javascript作为文本处理，而不是执行

我有一个home.blade.php以

@section('page_specific_scripts')
    <script type="text/javascript"> 
        const slider_base_img_url = '{{ $slider_base_img_url }}'
    </script>
    <script src="{{ mix('js/home.js') }}"></script>
@endsection

问题是vue模板被呈现，但图像的src仍然是文本javascript。这是生成的HTML

<div class="VueCarousel-inner" style="transform: translateX(-3806px); transition: transform 0.5s ease; flex-basis: 1903px; visibility: visible;">

<div class="VueCarousel-slide">
<img src="{{ slider_base_img_url + '0' + n + '.png' }}" class="autosize"></div>

... [cut] ... 

... [切]。。。

我做错了什么

作为参考，这是从浏览器加载的mix后的home.js文件

Vue.component('slide', Vue.Slide);
Vue.component('carousel', Vue.Carousel);


var slider_app = new Vue({
    el: '#home-page-slider',
    //language=HTML
    template: "\n        <carousel :perPage=\"1\" :autoplay=\"true\"  :autoplayLoop=\"true\" >\n           \n            <slide v-for=\"n in 3\">\n                <IMG\n                    class='autosize'\n                    src=\"{{ slider_base_img_url + '0' + n + '.png' }}\"\n                />\n            </slide>\n        </carousel>\n    "
});

Vue.component（'slide'，Vue.slide）；
Vue.组件（“旋转木马”，Vue.旋转木马）；
var slider_app=新的Vue({
el:“#主页滑块”，
//语言=HTML
模板：“\n\n\n\n\n\n\n”
});

模板本身正在工作，因为for循环创建了3张幻灯片

但为什么不执行内部javascript？

---

是否有一种我还不知道的特定Vue方式？

完成了这两个修改，现在可以工作了：

这是home.blade.php中的

@section('page_specific_scripts')
    <script type="text/javascript">
        window.slider_base_img_url = '{{ $slider_base_img_url }}'
    </script>
    <script src="{{ mix('js/home.js') }}"></script>
@endsection

@节（“特定于页面的脚本”）
window.slider_base_img_url='{{$slider_base_img_url}'
@端部

这是home.js

const slider_app = new Vue({
    el: '#home-page-slider',
    //language=HTML
    computed: {
        slider_base_img_url: function () { return window.slider_base_img_url; }
    },
    template: `
        <carousel :perPage="1" :autoplay="true"  :autoplayLoop="true" >

            <slide v-for="n in 3" :key="n">
                <IMG
                    class='autosize'
                    :src="slider_base_img_url + '0' + n + '.png'"
                />
            </slide>
        </carousel>
    `
});

const slider\u app=新Vue({
el:“#主页滑块”，
//语言=HTML
计算：{
slider\u base\u img\u url:function（）{return window.slider\u base\u img\u url；}
},
模板：`
`
});

@section('page_specific_scripts')
    <script type="text/javascript">
        window.slider_base_img_url = '{{ $slider_base_img_url }}'
    </script>
    <script src="{{ mix('js/home.js') }}"></script>
@endsection

const slider_app = new Vue({
    el: '#home-page-slider',
    //language=HTML
    computed: {
        slider_base_img_url: function () { return window.slider_base_img_url; }
    },
    template: `
        <carousel :perPage="1" :autoplay="true"  :autoplayLoop="true" >

            <slide v-for="n in 3" :key="n">
                <IMG
                    class='autosize'
                    :src="slider_base_img_url + '0' + n + '.png'"
                />
            </slide>
        </carousel>
    `
});