Vue.js integration with blade

I have an application developed with Laravel 10 and I want to integrate vue.js into blade templates. More exactly, I want to use vue components wherever I need in my templates. For example, I have the following:

app.js

import { createApp } from 'vue';
import App from './App.vue';
import TestComponent from "./components/TestComponent.vue";
import ExampleComponent from "./components/ExampleComponent.vue";

const app = createApp(App);

app.component('test-component', TestComponent);
app.component('example-component', ExampleComponent)
app.mount("#app");

App.vue

<template>
    <test-component></test-component>
    <example-component></example-component>
</template>

And the 2 components:

TestComponent.vue

<template>
    <div @click="showMore" class="card card-header col-md-3 col-sm-6 text-center m-auto"
         style="cursor: pointer;">
        Show more <span class="icon-arrow-circle-down"></span>
    </div>
</template>

<script setup>
    const showMore = () => {
        alert('show');
    }
</script>

ExampleComponent.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                    <button @click="showAlert">Show alert</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
    const showAlert = () => {
        alert('example');
    }
</script>

If I write the following <div id="app"></div> in an app.blade.php, the rendering and javascript work as expected. However, what if I need to use one component in a file and the other component in another file? I tried to place the components in separate files but it doesn't work.