1 files changed, 15 insertions, 6 deletions
diff --git a/app/assets/javascripts/vue_shared/components/registry/title_area.vue b/app/assets/javascripts/vue_shared/components/registry/title_area.vue
index c63d91b78d3..4b21ec0330a 100644
--- a/app/assets/javascripts/vue_shared/components/registry/title_area.vue
+++ b/app/assets/javascripts/vue_shared/components/registry/title_area.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlAvatar, GlSprintf, GlLink, GlSkeletonLoader } from '@gitlab/ui';
+import { isEqual } from 'lodash';
 
 export default {
   name: 'TitleArea',
@@ -36,13 +37,21 @@ export default {
       metadataSlots: [],
     };
   },
-  async mounted() {
-    const METADATA_PREFIX = 'metadata-';
-    this.metadataSlots = Object.keys(this.$slots).filter((k) => k.startsWith(METADATA_PREFIX));
+  mounted() {
+    this.recalculateMetadataSlots();
+  },
+  updated() {
+    this.recalculateMetadataSlots();
+  },
+  methods: {
+    recalculateMetadataSlots() {
+      const METADATA_PREFIX = 'metadata-';
+      const metadataSlots = Object.keys(this.$slots).filter((k) => k.startsWith(METADATA_PREFIX));
 
-    // we need to wait for next tick to ensure that dynamic names slots are picked up
-    await this.$nextTick();
-    this.metadataSlots = Object.keys(this.$slots).filter((k) => k.startsWith(METADATA_PREFIX));
+      if (!isEqual(metadataSlots, this.metadataSlots)) {
+        this.metadataSlots = metadataSlots;
+      }
+    },
   },
 };
 </script>