1 files changed, 43 insertions, 40 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/index.js b/app/assets/javascripts/vue_merge_request_widget/components/extensions/index.js
index 7e329399957..0b8f5ffa397 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/index.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/index.js
@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import { markRaw } from '~/lib/utils/vue3compat/mark_raw';
 import ExtensionBase from './base.vue';
 
 // Holds all the currently registered extensions
@@ -7,45 +8,47 @@ export const registeredExtensions = Vue.observable({ extensions: [] });
 export const registerExtension = (extension) => {
   // Pushes into the extenions array a dynamically created Vue component
   // that gets exteneded from `base.vue`
-  registeredExtensions.extensions.push({
-    extends: ExtensionBase,
-    name: extension.name,
-    props: {
-      mr: {
-        type: Object,
-        required: true,
+  registeredExtensions.extensions.push(
+    markRaw({
+      extends: ExtensionBase,
+      name: extension.name,
+      props: {
+        mr: {
+          type: Object,
+          required: true,
+        },
       },
-    },
-    telemetry: extension.telemetry,
-    i18n: extension.i18n,
-    expandEvent: extension.expandEvent,
-    enablePolling: extension.enablePolling,
-    enableExpandedPolling: extension.enableExpandedPolling,
-    modalComponent: extension.modalComponent,
-    computed: {
-      ...extension.props.reduce(
-        (acc, propKey) => ({
-          ...acc,
-          [propKey]() {
-            return this.mr[propKey];
-          },
-        }),
-        {},
-      ),
-      ...Object.keys(extension.computed).reduce(
-        (acc, computedKey) => ({
-          ...acc,
-          // Making the computed property a method allows us to pass in arguments
-          // this allows for each computed property to receive some data
-          [computedKey]() {
-            return extension.computed[computedKey];
-          },
-        }),
-        {},
-      ),
-    },
-    methods: {
-      ...extension.methods,
-    },
-  });
+      telemetry: extension.telemetry,
+      i18n: extension.i18n,
+      expandEvent: extension.expandEvent,
+      enablePolling: extension.enablePolling,
+      enableExpandedPolling: extension.enableExpandedPolling,
+      modalComponent: extension.modalComponent,
+      computed: {
+        ...extension.props.reduce(
+          (acc, propKey) => ({
+            ...acc,
+            [propKey]() {
+              return this.mr[propKey];
+            },
+          }),
+          {},
+        ),
+        ...Object.keys(extension.computed).reduce(
+          (acc, computedKey) => ({
+            ...acc,
+            // Making the computed property a method allows us to pass in arguments
+            // this allows for each computed property to receive some data
+            [computedKey]() {
+              return extension.computed[computedKey];
+            },
+          }),
+          {},
+        ),
+      },
+      methods: {
+        ...extension.methods,
+      },
+    }),
+  );
 };