Suggested changes from review

Use Vue's built-in .once instead of importing and using lodash's once
Remove localVue.extend from grouped reports app specs

ee/app/assets/javascripts/reports/load_performance_report/grouped_load_performance_reports_app.vue

 <script>
-import { once } from 'lodash';
 import { componentNames } from 'ee/reports/components/issue_body';
 import ReportSection from '~/reports/components/report_section.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -46,13 +45,11 @@ export default {
     },
   },
   componentNames,
-  computed: {
+  methods: {
     handleLoadPerformanceToggleEvent() {
-      return once(() => {
-        if (this.glFeatures.usageDataITestingLoadPerformanceWidgetTotal) {
-          api.trackRedisHllUserEvent(this.$options.expandEvent);
-        }
-      });
+      if (this.glFeatures.usageDataITestingLoadPerformanceWidgetTotal) {
+        api.trackRedisHllUserEvent(this.$options.expandEvent);
+      }
     },
   },
   expandEvent: 'i_testing_load_performance_widget_total',
@@ -71,6 +68,6 @@ export default {
     :component="$options.componentNames.PerformanceIssueBody"
     should-emit-toggle-event
     class="js-load-performance-widget mr-widget-border-top mr-report"
-    @toggleEvent="handleLoadPerformanceToggleEvent"
+    @toggleEvent.once="handleLoadPerformanceToggleEvent"
   />
 </template>

ee/spec/frontend/reports/browser_performance_report/grouped_browser_performance_reports_app_spec.js

@@ -7,11 +7,10 @@ jest.mock('~/api.js');
 const localVue = createLocalVue();
 
 describe('Grouped test reports app', () => {
-  const Component = localVue.extend(GroupedBrowserPerformanceReportsApp);
   let wrapper;
 
   const mountComponent = ({ usageDataITestingWebPerformanceWidgetTotal = false } = {}) => {
-    wrapper = mount(Component, {
+    wrapper = mount(GroupedBrowserPerformanceReportsApp, {
       localVue,
       propsData: {
         status: '',

ee/spec/frontend/reports/load_performance_report/grouped_load_performance_reports_app_spec.js

@@ -7,11 +7,10 @@ jest.mock('~/api.js');
 const localVue = createLocalVue();
 
 describe('Grouped load performance reports app', () => {
-  const Component = localVue.extend(GroupedLoadPerformanceReportsApp);
   let wrapper;
 
   const mountComponent = ({ usageDataITestingLoadPerformanceWidgetTotal = false } = {}) => {
-    wrapper = mount(Component, {
+    wrapper = mount(GroupedLoadPerformanceReportsApp, {
       localVue,
       propsData: {
         status: '',

spec/frontend/reports/codequality_report/grouped_codequality_reports_app_spec.js

@@ -9,7 +9,6 @@ const localVue = createLocalVue();
 localVue.use(Vuex);
 
 describe('Grouped code quality reports app', () => {
-  const Component = localVue.extend(GroupedCodequalityReportsApp);
   let wrapper;
   let mockStore;
 
@@ -22,7 +21,7 @@ describe('Grouped code quality reports app', () => {
   };
 
   const mountComponent = (props = {}) => {
-    wrapper = mount(Component, {
+    wrapper = mount(GroupedCodequalityReportsApp, {
       store: mockStore,
       localVue,
       propsData: {

spec/frontend/reports/components/grouped_test_reports_app_spec.js

@@ -18,12 +18,11 @@ localVue.use(Vuex);
 describe('Grouped test reports app', () => {
   const endpoint = 'endpoint.json';
   const pipelinePath = '/path/to/pipeline';
-  const Component = localVue.extend(GroupedTestReportsApp);
   let wrapper;
   let mockStore;
 
   const mountComponent = ({ props = { pipelinePath } } = {}) => {
-    wrapper = mount(Component, {
+    wrapper = mount(GroupedTestReportsApp, {
       store: mockStore,
       localVue,
       propsData: {