Why are the variable and component not displayed?

Question

JavaScript

I have an app.js with this code:

import Vue from 'vue';

Vue.component('user-name', {
    props: ['name'],
    template: '<p>Hi {{ name }}</p>'
});

new Vue({
    el: "#headerApp",
    mounted(){
        alert(2);
    }
});

I also have an index.php in which the script src of the compiled js bundle occurs, and in the body it is

<div id="headerApp">
            <user-name name="Flavio">!</user-name>!
        </div>

So.
alert fires, but the component doesn't render. There are no errors in the console.
If you build using gulp, then everything works.
But the task is to fasten webpack
Here is webpack.config.common.js : https://pastebin.com/K2xtumpD
Then it is merged with the prod: https://pastebin.com/DaJXneis
Why is nothing displayed? , and alert works?
----------------
And if you add a variable:

<div id="headerApp">{{test}}
            <user-name name="Flavio">!</user-name>!
        </div>

new Vue({
    el: "#headerApp",
    mounted(){
        alert(2);
    },
    data() {
        return {
            test: 222,
        };
    },
});

then everything is also empty.
By the way, when the alert fires, you can see the variable {{test}} (template tag)
then everything disappears

Answer 1

the answer is here https://stackoverflow.com/questions/49334815/vue-r...
this shit needs to be like this alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': helpers.root('src')
}