Почему переменная и компонент не отображаются?

Есть у меня app.js с таким кодом:

import Vue from 'vue';

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

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

Также у меня есть index.php в котором происходит script src скомпилированного js бандла, а в body это

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

Так вот.
alert срабатывает, но компонент не рендерится. Ошибок в консоле нет.
если собирать c помощью gulp то всё работает.
Но задача стоит прикрутить webpack

Вот webpack.config.common.js : https://pastebin.com/K2xtumpD
Потом он мерджится с продом: https://pastebin.com/DaJXneis

почему ничего не отображается? , а alert работает?

----------------
А если добавить переменную:

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

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

то всё также пусто.

кстате когда alert срабатывает, то видно переменную {{test}} (тег шаблона)
потом всё пропадает