unwanted repeated Firing of datalayer.push in vue

Configuration

• Google Tag Manager, single container
• GA4, web data stream
• GA is connected to GTM with GA4 through GA4 Configuration Tag
• GTM initialisation has been copy/pasted under and as per instructions in GTM
• Created add_to_cart tag
• Created dataLayer, trigger in various ways

My code is this in .vue file

addToCart() {
        var payload = {
                'id': this.id,
                'odoo':this.odoo,
                'wine': this.wine,
                'url': this.url,
                'vintage': this.vintage,
                'volume': this.volume,
                'price': this.price,
                'quantity': this.quantity,
                'totalQuantity': this.quantity,
                'available': this.available,
                'labelurl': this.labelurl,
                'estate': this.estate,
        };

        this.$store.dispatch( 'updateCartline', payload );

        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
                    event: "add_to_cart",
                    currency: "EUR",
                    value: payload.quantity * payload.price,
                    items: [
                        {
                            item_id: payload.id,
                            item_name: payload.wine + " " + payload.vintage + " " + payload.volume,
                            price: payload.price,
                            quantity: payload.quantity
                        }
                    ]
                }
            )
    },

When checking network in developer mode it appears that every time addToCart is invoked, 20 dataLayer.push are fired! On GA-4, the event add_to_cart reports 20 event calls.

What happens? How can I obtain a correct behaviour (single firing)