vue JS component import without webpack

I am building a flask app and jinja2 template. So I am planning to use Vue functionality asn per my requiremnt and not planning for single page app.

I am trying to use vue-carousel but not able to import it.

here is my html code for index.

<!DOCTYPE html>
<html lang="en">

<head>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet"
        href="{{ url_for('static', filename='node_modules/materialize-css/dist/css/materialize.min.css')}}"
        media="screen,projection" />
    <!--Import custom css-->
    <link type="text/css" rel="stylesheet"
        href="{{ url_for('static', filename='css/landing-page-style.css')}}" />
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>
    <header class="landing-page-header">
        <div class="primary-overlay">
            <!--Nav Bar-->
            <div class="navbar-fixed">
                <nav class="transparent">
                    <div class="container">
                        <div class="nav-wrapper">
                            <a href="#home" class="brand-logo">artext</a>
                            <a href="#" data-activates="mobile-nav" class="button-collapse">
                                <i class="material-icons">menu</i>
                            </a>
                            <ul class="right hide-on-med-and-down">
                                <li>
                                    <a href="#home" id="login"><i class="small material-icons left">login</i>Login</a>
                                </li>
                                <li>
                                    <a href="#home"><i class="medium material-icons left">how_to_reg</i>Register</a>
                                </li>
                                <li>
                                    <a href="#home" id="home"><i class="medium material-icons left">home</i>Home</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
            <!--Side Nav-->
            <ul class="side-nav" id="mobile-nav">
                <li>
                    <a href="#home"><i class="material-icons left">login</i>Login</a>
                </li>
                <li>
                    <a href="#home"><i class="material-icons left">how_to_reg</i>Register</a>
                </li>
                <li>
                    <a href="#home"><i class="material-icons left">home</i>Home</a>
                </li>
            </ul>
            <div id="app">
                <carousel :data="data"></carousel>
            </div>
            <section class="slider" id="slider">
                <ul class="slides transparent">
                    <li>
                        <div class="caption center-align">
                            <h2>Take Your Dream Vacation</h2>
                            <h5 class="light grey-text text-lighten-3 hide-on-small-only">Lorem ipsum dolor sit amet
                                consectetur
                                adipisicing elit. Veniam non illo earum cumque id est!</h5>
                            <a href="#" class="btn btn-large">Learn More</a>
                        </div>
                    </li>
                    <li>
                        <div class="caption left-align">
                            <h2>We Work With All Budgets</h2>
                            <h5 class="light grey-text text-lighten-3 hide-on-small-only">Lorem ipsum dolor sit amet
                                consectetur
                                adipisicing elit. Veniam non illo earum cumque id est!</h5>
                            <a href="#" class="btn btn-large">Learn More</a>
                        </div>
                    </li>
                    <li>
                        <div class="caption right-align">
                            <h2>Group & Individual Getaways</h2>
                            <h5 class="light grey-text text-lighten-3 hide-on-small-only">Lorem ipsum dolor sit amet
                                consectetur
                                adipisicing elit. Veniam non illo earum cumque id est!</h5>
                            <a href="#" class="btn btn-large">Learn More</a>
                        </div>
                    </li>
                </ul>
            </section>
        </div>
    </header>
    <!--Import jQuery before materialize.js-->
    <script type="text/javascript"
        src="{{ url_for('static', filename='node_modules/jquery/dist/jquery.min.js')}}"></script>
    <!--Import materialize.js-->
    <script type="text/javascript"
        src="{{ url_for('static', filename='node_modules/materialize-css/dist/js/materialize.min.js')}}"></script>
  
    <!--Import app-custom.js-->
    <script type="text/javascript"
        src="{{ url_for('static', filename='js/landing-page-js.js')}}"></script>
    <!--Import vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="{{ url_for('static', filename='node_modules/vue-carousel/dist/vue-carousel.min.js')}}"></script>
    <script type="module">
        import Carousel from '/static/node_modules/vue-carousel/src/Carousel.vue';
        var app = new Vue({
            el: '#app',
            delimiters: ['[[', ']]'],
            data() {
                return {
                    data: [
                        '<div class="example-slide">Slide 1</div>',
                        '<div class="example-slide">Slide 2</div>',
                        '<div class="example-slide">Slide 3</div>',
                    ],
                }
            },
        })
    </script>
</body>

</html>

I am using npm to install the component. inside static folder I am keeping all the module.

While running the app getting the following error.

Loading module from “http://127.0.0.1:6009/static/node_modules/vue-carousel/src/Carousel.vue” was blocked because of a disallowed MIME type (“application/octet-stream”).

any help appriciated.