Fixed #5593 - Hydration defects

components/lib/accordion/Accordion.vue

@@ -73,16 +73,16 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
+        '$attrs.id': function (newValue) {
-            immediate: true,
-            handler: function (newValue) {
             this.id = newValue || UniqueComponentId();
-            }
         },
         activeIndex(newValue) {
             this.d_activeIndex = newValue;
         }
     },
+    mounted() {
+        this.id = this.id || UniqueComponentId();
+    },
     methods: {
         isAccordionTab(child) {
             return child.type.name === 'AccordionTab';

components/lib/autocomplete/AutoComplete.vue

@@ -201,11 +201,8 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
+        '$attrs.id': function (newValue) {
-            immediate: true,
-            handler: function (newValue) {
             this.id = newValue || UniqueComponentId();
-            }
         },
         suggestions() {
             if (this.searching) {
@@ -218,6 +215,7 @@ export default {
         }
     },
     mounted() {
+        this.id = this.id || UniqueComponentId();
         this.autoUpdateModel();
     },
     updated() {

components/lib/calendar/Calendar.vue

@@ -560,11 +560,8 @@ export default {
         };
     },
     watch: {
-        id: {
+        id: function (newValue) {
-            immediate: true,
-            handler: function (newValue) {
             this.d_id = newValue || UniqueComponentId();
-            }
         },
         modelValue(newValue) {
             this.updateCurrentMetaData();
@@ -614,6 +611,7 @@ export default {
         this.updateCurrentMetaData();
     },
     mounted() {
+        this.d_id = this.d_id || UniqueComponentId();
         this.createResponsiveStyle();
         this.bindMatchMediaListener();
 

components/lib/cascadeselect/CascadeSelect.vue

@@ -110,17 +110,15 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
+        '$attrs.id': function (newValue) {
-            immediate: true,
-            handler: function (newValue) {
             this.id = newValue || UniqueComponentId();
-            }
         },
         options() {
             this.autoUpdateModel();
         }
     },
     mounted() {
+        this.id = this.id || UniqueComponentId();
         this.autoUpdateModel();
     },
     beforeUnmount() {

components/lib/chips/Chips.vue

@@ -76,12 +76,12 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
+        '$attrs.id': function (newValue) {
-            immediate: true,
-            handler: function (newValue) {
             this.id = newValue || UniqueComponentId();
         }
-        }
+    },
+    mounted() {
+        this.id = this.id || UniqueComponentId();
     },
     methods: {
         onWrapperClick() {

components/lib/contextmenu/ContextMenu.vue

@@ -64,11 +64,8 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
+        '$attrs.id': function (newValue) {
-            immediate: true,
-            handler: function (newValue) {
             this.id = newValue || UniqueComponentId();
-            }
         },
         activeItemPath(newPath) {
             if (ObjectUtils.isNotEmpty(newPath)) {
@@ -81,6 +78,8 @@ export default {
         }
     },
     mounted() {
+        this.id = this.id || UniqueComponentId();
+
         if (this.global) {
             this.bindDocumentContextMenuListener();
         }

components/lib/datatable/ColumnFilter.vue

@@ -286,12 +286,9 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
+        '$attrs.id': function (newValue) {
-            immediate: true,
-            handler: function (newValue) {
             this.id = newValue || UniqueComponentId();
         }
-        }
     },
     overlay: null,
     selfClick: false,
@@ -308,6 +305,8 @@ export default {
         }
     },
     mounted() {
+        this.id = this.id || UniqueComponentId();
+
         if (this.filters && this.filters[this.field]) {
             let fieldFilters = this.filters[this.field];
 

components/lib/dialog/Dialog.vue

@@ -88,12 +88,9 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
+        '$attrs.id': function (newValue) {
-            immediate: true,
-            handler: function (newValue) {
             this.id = newValue || UniqueComponentId();
         }
-        }
     },
     documentKeydownListener: null,
     container: null,
@@ -127,6 +124,8 @@ export default {
         this.mask = null;
     },
     mounted() {
+        this.id = this.id || UniqueComponentId();
+
         if (this.breakpoints) {
             this.createStyle();
         }

components/lib/dock/DockSub.vue

@@ -106,12 +106,12 @@ export default {
         };
     },
     watch: {
-        menuId: {
+        menuId(newValue) {
-            immediate: true,
-            handler(newValue) {
             this.id = newValue || UniqueComponentId();
         }
-        }
+    },
+    mounted() {
+        this.id = this.id || UniqueComponentId();
     },
     methods: {
         getItemId(index) {

components/lib/dropdown/Dropdown.vue

@@ -218,11 +218,8 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
+        '$attrs.id': function (newValue) {
-            immediate: true,
-            handler: function (newValue) {
             this.id = newValue || UniqueComponentId();
-            }
         },
         modelValue() {
             this.isModelValueChanged = true;
@@ -232,6 +229,7 @@ export default {
         }
     },
     mounted() {
+        this.id = this.id || UniqueComponentId();
         this.autoUpdateModel();
         this.bindLabelClickListener();
     },

components/lib/fieldset/Fieldset.vue

@@ -54,16 +54,16 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
+        '$attrs.id': function (newValue) {
-            immediate: true,
-            handler: function (newValue) {
             this.id = newValue || UniqueComponentId();
-            }
         },
         collapsed(newValue) {
             this.d_collapsed = newValue;
         }
     },
+    mounted() {
+        this.id = this.id || UniqueComponentId();
+    },
     methods: {
         toggle(event) {
             this.d_collapsed = !this.d_collapsed;

components/lib/galleria/GalleriaContent.vue

@@ -76,18 +76,15 @@ export default {
     emits: ['activeitem-change', 'mask-hide'],
     data() {
         return {
-            id: this.$attrs.id,
+            id: this.$attrs.id || UniqueComponentId(),
             activeIndex: this.$attrs.activeIndex,
             numVisible: this.$attrs.numVisible,
             slideShowActive: false
         };
     },
     watch: {
-        '$attrs.id': {
+        '$attrs.id': function (newValue) {
-            immediate: true,
-            handler: function (newValue) {
             this.id = newValue || UniqueComponentId();
-            }
         },
         '$attrs.value': function (newVal) {
             if (newVal && newVal.length < this.numVisible) {
@@ -104,6 +101,9 @@ export default {
             newVal ? this.startSlideShow() : this.stopSlideShow();
         }
     },
+    mounted() {
+        this.id = this.id || UniqueComponentId();
+    },
     updated() {
         this.$emit('activeitem-change', this.activeIndex);
     },

components/lib/listbox/Listbox.vue

@@ -149,17 +149,15 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
+        '$attrs.id': function (newValue) {
-            immediate: true,
-            handler: function (newValue) {
             this.id = newValue || UniqueComponentId();
-            }
         },
         options() {
             this.autoUpdateModel();
         }
     },
     mounted() {
+        this.id = this.id || UniqueComponentId();
         this.autoUpdateModel();
     },
     methods: {

components/lib/megamenu/MegaMenu.vue

@@ -86,11 +86,8 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
+        '$attrs.id': function (newValue) {
-            immediate: true,
-            handler: function (newValue) {
             this.id = newValue || UniqueComponentId();
-            }
         },
         activeItem(newItem) {
             if (ObjectUtils.isNotEmpty(newItem)) {
@@ -103,6 +100,7 @@ export default {
         }
     },
     mounted() {
+        this.id = this.id || UniqueComponentId();
         this.bindMatchMediaListener();
     },
     beforeUnmount() {

components/lib/menu/Menu.vue

@@ -72,12 +72,9 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
+        '$attrs.id': function (newValue) {
-            immediate: true,
-            handler: function (newValue) {
             this.id = newValue || UniqueComponentId();
         }
-        }
     },
     target: null,
     outsideClickListener: null,
@@ -86,6 +83,8 @@ export default {
     container: null,
     list: null,
     mounted() {
+        this.id = this.id || UniqueComponentId();
+
         if (!this.popup) {
             this.bindResizeListener();
             this.bindOutsideClickListener();

components/lib/menubar/Menubar.vue

@@ -79,11 +79,8 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
+        '$attrs.id': function (newValue) {
-            immediate: true,
-            handler: function (newValue) {
             this.id = newValue || UniqueComponentId();
-            }
         },
         activeItemPath(newPath) {
             if (ObjectUtils.isNotEmpty(newPath)) {
@@ -99,6 +96,7 @@ export default {
     container: null,
     menubar: null,
     mounted() {
+        this.id = this.id || UniqueComponentId();
         this.bindMatchMediaListener();
     },
     beforeUnmount() {

components/lib/multiselect/MultiSelect.vue

@@ -238,17 +238,15 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
+        '$attrs.id': function (newValue) {
-            immediate: true,
-            handler: function (newValue) {
             this.id = newValue || UniqueComponentId();
-            }
         },
         options() {
             this.autoUpdateModel();
         }
     },
     mounted() {
+        this.id = this.id || UniqueComponentId();
         this.autoUpdateModel();
     },
     beforeUnmount() {

components/lib/orderlist/OrderList.vue

@@ -105,12 +105,9 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
+        '$attrs.id': function (newValue) {
-            immediate: true,
-            handler: function (newValue) {
             this.id = newValue || UniqueComponentId();
         }
-        }
     },
     beforeUnmount() {
         this.destroyStyle();
@@ -122,6 +119,8 @@ export default {
         }
     },
     mounted() {
+        this.id = this.id || UniqueComponentId();
+
         if (this.responsive) {
             this.createStyle();
         }

components/lib/panel/Panel.vue

@@ -58,16 +58,16 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
+        '$attrs.id': function (newValue) {
-            immediate: true,
-            handler: function (newValue) {
             this.id = newValue || UniqueComponentId();
-            }
         },
         collapsed(newValue) {
             this.d_collapsed = newValue;
         }
     },
+    mounted() {
+        this.id = this.id || UniqueComponentId();
+    },
     methods: {
         toggle(event) {
             this.d_collapsed = !this.d_collapsed;

components/lib/panelmenu/PanelMenu.vue

@@ -73,12 +73,12 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
+        '$attrs.id': function (newValue) {
-            immediate: true,
-            handler: function (newValue) {
             this.id = newValue || UniqueComponentId();
         }
-        }
+    },
+    mounted() {
+        this.id = this.id || UniqueComponentId();
     },
     methods: {
         getItemProp(item, name) {

components/lib/password/Password.vue

@@ -77,12 +77,9 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
+        '$attrs.id': function (newValue) {
-            immediate: true,
-            handler: function (newValue) {
             this.id = newValue || UniqueComponentId();
         }
-        }
     },
     mediumCheckRegExp: null,
     strongCheckRegExp: null,
@@ -90,6 +87,7 @@ export default {
     scrollHandler: null,
     overlay: null,
     mounted() {
+        this.id = this.id || UniqueComponentId();
         this.infoText = this.promptText;
         this.mediumCheckRegExp = new RegExp(this.mediumRegex);
         this.strongCheckRegExp = new RegExp(this.strongRegex);

components/lib/picklist/PickList.vue

@@ -221,11 +221,8 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
+        '$attrs.id': function (newValue) {
-            immediate: true,
-            handler: function (newValue) {
             this.id = newValue || UniqueComponentId();
-            }
         },
         selection(newValue) {
             this.d_selection = newValue;
@@ -247,6 +244,8 @@ export default {
         this.destroyMedia();
     },
     mounted() {
+        this.id = this.id || UniqueComponentId();
+
         if (this.responsive) {
             this.createStyle();
             this.initMedia();

components/lib/rating/Rating.vue

@@ -68,12 +68,12 @@ export default {
         };
     },
     watch: {
-        '$attrs.name': {
+        '$attrs.name': function (newValue) {
-            immediate: true,
-            handler: function (newValue) {
             this.name = newValue || UniqueComponentId();
         }
-        }
+    },
+    mounted() {
+        this.name = this.name || UniqueComponentId();
     },
     methods: {
         getPTOptions(key, value) {

components/lib/scrollpanel/ScrollPanel.vue

@@ -69,14 +69,13 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
+        '$attrs.id': function (newValue) {
-            immediate: true,
-            handler: function (newValue) {
             this.id = newValue || UniqueComponentId();
         }
-        }
     },
     mounted() {
+        this.id = this.id || UniqueComponentId();
+
         if (this.$el.offsetParent) {
             this.initialize();
         }

components/lib/speeddial/SpeedDial.vue

@@ -78,17 +78,16 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
+        '$attrs.id': function (newValue) {
-            immediate: true,
-            handler: function (newValue) {
             this.id = newValue || UniqueComponentId();
-            }
         },
         visible(newValue) {
             this.d_visible = newValue;
         }
     },
     mounted() {
+        this.id = this.id || UniqueComponentId();
+
         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/splitbutton/SplitButton.vue

@@ -78,14 +78,13 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
+        '$attrs.id': function (newValue) {
-            immediate: true,
-            handler: function (newValue) {
             this.id = newValue || UniqueComponentId();
         }
-        }
     },
     mounted() {
+        this.id = this.id || UniqueComponentId();
+
         this.$watch('$refs.menu.visible', (newValue) => {
             this.isExpanded = newValue;
         });

components/lib/stepper/Stepper.vue

@@ -154,16 +154,16 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
+        '$attrs.id': function (newValue) {
-            immediate: true,
-            handler: function (newValue) {
             this.id = newValue || UniqueComponentId();
-            }
         },
         activeStep(newValue) {
             this.d_activeStep = newValue;
         }
     },
+    mounted() {
+        this.id = this.id || UniqueComponentId();
+    },
     methods: {
         isStep(child) {
             return child.type.name === 'StepperPanel';

components/lib/tabview/TabView.vue

@@ -113,11 +113,8 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
+        '$attrs.id': function (newValue) {
-            immediate: true,
-            handler: function (newValue) {
             this.id = newValue || UniqueComponentId();
-            }
         },
         activeIndex(newValue) {
             this.d_activeIndex = newValue;
@@ -126,6 +123,7 @@ export default {
         }
     },
     mounted() {
+        this.id = this.id || UniqueComponentId();
         this.updateInkBar();
         this.scrollable && this.updateButtonState();
     },

components/lib/tieredmenu/TieredMenu.vue

@@ -71,11 +71,8 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
+        '$attrs.id': function (newValue) {
-            immediate: true,
-            handler: function (newValue) {
             this.id = newValue || UniqueComponentId();
-            }
         },
         activeItemPath(newPath) {
             if (!this.popup) {
@@ -89,6 +86,9 @@ export default {
             }
         }
     },
+    mounted() {
+        this.id = this.id || UniqueComponentId();
+    },
     beforeUnmount() {
         this.unbindOutsideClickListener();
         this.unbindResizeListener();

components/lib/treeselect/TreeSelect.vue

@@ -128,11 +128,8 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
+        '$attrs.id': function (newValue) {
-            immediate: true,
-            handler: function (newValue) {
             this.id = newValue || UniqueComponentId();
-            }
         },
         modelValue: {
             handler: function () {
@@ -169,6 +166,7 @@ export default {
         }
     },
     mounted() {
+        this.id = this.id || UniqueComponentId();
         this.updateTreeState();
     },
     methods: {