GA4 setup for Vue 2

[shkipan]

Environment *

npm ls vue-gtag:
└── vue-gtag@1.16.0
npm ls vue:
└── vue@2.7.10 dedupedThen, specify:

1. Operating system:
   MacOs Monterey 12.5
2. Browser and version:
   Google Chrome Version 106.0.5249.119

Description *

Event is not fired into google analytics for Google Analytics GA-4

I have an event, which is set up in vuex store and fired after user login. Code looks like this

    import { event } from 'vue-gtag'

    event("login", {
      'event_category': "user",
      'event_label': user.email,
      'value': 1
    })

And this event works correctly for UA-XXXXXXXXX-X key works perfectly fine. However, when I have migrated to G-XXXXXXXXXX, events have stopped firing. Worth to mention, that page views are registered correctly for both keys.

vue-gtag setup looks like this

import Vue from "vue"
import VueGtag from "vue-gtag"

import router from "@/router"

Vue.use(VueGtag, {
  config: {
    id: "G-**********",
  }
}, router)

I have switched to this library, since it was mentioned, that this lib works with GA-4 keys and supports Vue 2. Could you give me a hint, what should I do to fix this issue?

[SliderCO-007]

I had to create a whole new property for G4 but once I did the legacy version of the plugin worked fine.

Add a Google Analytics 4 property

For reference, my site was built using Vue 2 and is deployed to Firebase hosting.