[Vue warn]: Cannot find element: #app With Symfony

My problem is in the title. I use Symfony 5 and i would like to make appear in my template "Chat -> "Index.html.twig" what i have in my App.vue but i have this error "cannot find element: #app.

I installed webpack-encore with Vuejs 2

I let you see my code :

My Index.html.twig :

{% extends 'base.html.twig' %}

{% block title %}Hello IndexController!{% endblock %}

{% block body %}
    <div id="app"></div>
{% endblock %}

{% block javascripts %}

    {{ encore_entry_script_tags('app') }}
{% endblock %}

My base.html.twig:

                {% block javascripts %}
                    {{ encore_entry_script_tags('app') }} 

                {% endblock %}
                <script src="{{ asset('assets/js/main.js') }}"></script>
            </body>

My Webpack.config.js :

.addEntry('app', './assets/app.js')



.enableVueLoader()

My app.js:

import Vue from 'vue';
import App from './components/App';

new Vue({
    render: h => h(App)
}).$mount('#app');

My App.vue:

<template>

    <div> Magnam obcaecati architecto cupiditate earum ipsum possimus fuga itaque libero nam, quis eveniet officia harum eligendi sint dolorum minus rerum laborum repudiandae consequuntur, fugiat dolorem adipisci reiciendis? Quas non ut cum, a aut culpa architecto repudiandae hic!</div>
</template>

<script>

    export default {}
</script>

What's wrong in my code?

Thanks for your feedback!!!!