我有一个简单的刀片，里面有一个组件：

<section>
    <h1>Carousel</h1>
    <carousel :slides="@json($data->slides)">
</carousel>

该组件如下所示：

<template>
    <fragment>
        <h1>My component</h1>
        {{ slides }}
    </fragment>
</template>

export default {
    props: [
      'slides'
    ],
    mounted() {
        console.log("mounted")
    }
}

当然，我在app.js中有它（路径是正确的）：

require('./bootstrap');

window.Vue = require('vue').default;

Vue.component('carousel', require('./components/web/partials/Carousel.vue').default);

const app = new Vue({`
    el: '#app',`
});

我的webpack.mix.js还包含：

mix.js('resources/js/app.js', 'public/js')     .vue()     .sass('resources/sass/app.scss', 'public/css');

但是当我访问页面时，我看不到组件。我只看到刀片中的<h1>Carousel</h1>。控制台中也没有错误，这让我觉得很奇怪。安装vue后创建的"ExampleComponent"也没有呈现（我从app.js中删除了它）。
我正在使用：

"laravel/ui": "^3.3" 
"vue": "^3.2.26", 
"vue-template-compiler": "^2.6.11" 
"sass": "^1.32.11", 
"sass-loader": "^11.0.1", 
"vue-loader": "^16.2.0"

我一直试图在vue版本之间切换，也vue加载器版本，我一直在滚动通过所以与类似的问题，但没有一个解决方案为我工作。