Fixed #5322 - SplitterPanel: nested context hydration fixed

components/lib/splitter/Splitter.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" :style="sx('root')" :data-p-resizing="false" v-bind="ptmi('root', getPTOptions())">
+    <div :class="cx('root')" :style="sx('root')" :data-p-resizing="false" v-bind="ptmi('root', getPTOptions)">
         <template v-for="(panel, i) of panels" :key="i">
             <component :is="panel" tabindex="-1"></component>
             <div
@@ -80,13 +80,6 @@ export default {
         this.unbindMouseListeners();
     },
     methods: {
-        getPTOptions() {
-            return {
-                context: {
-                    nested: DomHandler.getAttribute(this.$parentInstance?.$el, 'data-pc-name') === 'splitterpanel'
-                }
-            };
-        },
         isSplitterPanel(child) {
             return child.type.name === 'SplitterPanel';
         },
@@ -379,6 +372,13 @@ export default {
         },
         horizontal() {
             return this.layout === 'horizontal';
+        },
+        getPTOptions() {
+            return {
+                context: {
+                    nested: this.$parentInstance?.nestedState
+                }
+            };
         }
     }
 };

components/lib/splitterpanel/SplitterPanel.vue

@@ -11,10 +11,17 @@ export default {
     name: 'SplitterPanel',
     extends: BaseSplitterPanel,
     inheritAttrs: false,
+    data() {
+        return {
+            nestedState: null
+        };
+    },
     computed: {
         isNested() {
             return this.$slots.default().some((child) => {
-                return child.type.name === 'Splitter';
+                this.nestedState = child.type.name === 'Splitter' ? true : null;
+
+                return this.nestedState;
             });
         },
         getPTOptions() {