Why doesn't following a link work in edge (vue.js)?

Question

Microsoft Edge

Hello.
I have a link component.

<a :href="link"
       @click="clickFacebook"
       class="NS-button NS-button__facebook-ico"
       target="_self"
    >
        <span class="ico--wrap">
           <svg>...</svg>
        </span>
        <span v-if="!isLoaded" v-html="title"></span>
        <i class="fa reg__next--spin" v-else></i>
    </a>

methods: {
    async clickFacebook () {
        this.isLoaded = true;
        await this.clickEventSave(this.someEventsName.clickButton.buttonThroughFacebook);
        this.$emit('click');
    }
},

The parent component has a click event

<facebook-link
    class="hide-icon-xs"
    :link="links.facebook"
    :title="$t('landings_registration.pageSignup_RegFacebook')"
    @click="dataLayerPush(facebookDataLayer)"
>
</facebook-link>

The problem is that the Edge browser does not follow the link, only after the second click.
How to be?
What am I doing wrong?
"vue": "^2.5.17",

Answer 1

If the problem is with JavaScript and not with CSS (for example, if some element covers part of the button), then perhaps you just need to expand the "radius" of Babel.
https://webpack.js.org/loaders/babel-loader/
https://cli.vuejs.org/config/#babel
My "native" (i.e. without vue-cli) webpack.common.js :

module.exports = {
    entry: {},
    resolve: {
        alias: { },
        extensions: []
    },
    plugins: [ ],
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                options: {
                    presets: ['@babel/preset-env'],
                    plugins: [
                        '@babel/plugin-proposal-object-rest-spread',
                        '@babel/plugin-syntax-dynamic-import',
                        'transform-es2015-arrow-functions'
                    ]
                }
            },
        ]
    }
};