fix(#4953): use beforeMount to generate unique component id (#4954)

components/lib/accordion/Accordion.vue

@@ -79,7 +79,7 @@ export default {
             this.d_activeIndex = newValue;
         }
     },
-    mounted() {
+    beforeMount() {
         this.id = this.id || UniqueComponentId();
     },
     methods: {

components/lib/autocomplete/AutoComplete.vue

@@ -223,9 +223,10 @@ export default {
             this.autoUpdateModel();
         }
     },
-    mounted() {
+    beforeMount() {
         this.id = this.id || UniqueComponentId();
-
+    },
+    mounted() {
         this.autoUpdateModel();
     },
     updated() {

components/lib/cascadeselect/CascadeSelect.vue

@@ -114,9 +114,10 @@ export default {
             this.autoUpdateModel();
         }
     },
-    mounted() {
+    beforeMount() {
         this.id = this.id || UniqueComponentId();
-
+    },
+    mounted() {
         this.autoUpdateModel();
     },
     beforeUnmount() {

components/lib/contextmenu/ContextMenu.vue

@@ -76,9 +76,10 @@ export default {
             }
         }
     },
-    mounted() {
+    beforeMount() {
         this.id = this.id || UniqueComponentId();
-
+    },
+    mounted() {
         if (this.global) {
             this.bindDocumentContextMenuListener();
         }

components/lib/dock/DockSub.vue

@@ -110,7 +110,7 @@ export default {
             this.id = newValue || UniqueComponentId();
         }
     },
-    mounted() {
+    beforeMount() {
         this.id = this.id || UniqueComponentId();
     },
     methods: {

components/lib/dropdown/Dropdown.vue

@@ -215,9 +215,10 @@ export default {
             this.autoUpdateModel();
         }
     },
-    mounted() {
+    beforeMount() {
         this.id = this.id || UniqueComponentId();
-
+    },
+    mounted() {
         this.autoUpdateModel();
         this.bindLabelClickListener();
     },

components/lib/listbox/Listbox.vue

@@ -156,9 +156,10 @@ export default {
             this.autoUpdateModel();
         }
     },
-    mounted() {
+    beforeMount() {
         this.id = this.id || UniqueComponentId();
-
+    },
+    mounted() {
         this.autoUpdateModel();
     },
     methods: {

components/lib/megamenu/MegaMenu.vue

@@ -98,8 +98,10 @@ export default {
             }
         }
     },
-    mounted() {
+    beforeMount() {
         this.id = this.id || UniqueComponentId();
+    },
+    mounted() {
         this.bindMatchMediaListener();
     },
     beforeUnmount() {

components/lib/menu/Menu.vue

@@ -73,9 +73,10 @@ export default {
     resizeListener: null,
     container: null,
     list: null,
-    mounted() {
+    beforeMount() {
         this.id = this.id || UniqueComponentId();
-
+    },
+    mounted() {
         if (!this.popup) {
             this.bindResizeListener();
             this.bindOutsideClickListener();

components/lib/menubar/Menubar.vue

@@ -93,8 +93,10 @@ export default {
     outsideClickListener: null,
     container: null,
     menubar: null,
-    mounted() {
+    beforeMount() {
         this.id = this.id || UniqueComponentId();
+    },
+    mounted() {
         this.bindMatchMediaListener();
     },
     beforeUnmount() {

components/lib/multiselect/MultiSelect.vue

@@ -241,9 +241,10 @@ export default {
             this.autoUpdateModel();
         }
     },
-    mounted() {
+    beforeMount() {
         this.id = this.id || UniqueComponentId();
-
+    },
+    mounted() {
         this.autoUpdateModel();
     },
     beforeUnmount() {

components/lib/orderlist/OrderList.vue

@@ -116,9 +116,10 @@ export default {
             this.reorderDirection = null;
         }
     },
-    mounted() {
+    beforeMount() {
         this.id = this.id || UniqueComponentId();
-
+    },
+    mounted() {
         if (this.responsive) {
             this.createStyle();
         }

components/lib/panelmenu/PanelMenu.vue

@@ -76,7 +76,7 @@ export default {
             this.id = newValue || UniqueComponentId();
         }
     },
-    mounted() {
+    beforeMount() {
         this.id = this.id || UniqueComponentId();
     },
     methods: {

components/lib/picklist/PickList.vue

@@ -276,9 +276,10 @@ export default {
         this.destroyStyle();
         this.destroyMedia();
     },
-    mounted() {
+    beforeMount() {
         this.id = this.id || UniqueComponentId();
-
+    },
+    mounted() {
         if (this.responsive) {
             this.createStyle();
             this.initMedia();

components/lib/speeddial/SpeedDial.vue

@@ -84,9 +84,10 @@ export default {
             this.d_visible = newValue;
         }
     },
-    mounted() {
+    beforeMount() {
         this.id = this.id || UniqueComponentId();
-
+    },
+    mounted() {
         if (this.type !== 'linear') {
             const button = DomHandler.findSingle(this.container, '[data-pc-name="button"]');
             const firstItem = DomHandler.findSingle(this.list, '[data-pc-section="menuitem"]');

components/lib/tabview/TabView.vue

@@ -121,9 +121,10 @@ export default {
             this.scrollInView({ index: newValue });
         }
     },
-    mounted() {
+    beforeMount() {
         this.id = this.id || UniqueComponentId();
-
+    },
+    mounted() {
         this.updateInkBar();
         this.scrollable && this.updateButtonState();
     },

components/lib/tieredmenu/TieredMenu.vue

@@ -85,7 +85,7 @@ export default {
             }
         }
     },
-    mounted() {
+    beforeMount() {
         this.id = this.id || UniqueComponentId();
     },
     beforeUnmount() {