diff --git a/frontend/src/_helpers/appUtils.js b/frontend/src/_helpers/appUtils.js
index e1aa92b61d..149ca421ac 100644
--- a/frontend/src/_helpers/appUtils.js
+++ b/frontend/src/_helpers/appUtils.js
@@ -37,6 +37,7 @@ import { useEditorStore } from '@/_stores/editorStore';
 import { useGridStore } from '@/_stores/gridStore';
 import { useResolveStore } from '@/_stores/resolverStore';
 import { handleLowPriorityWork } from './editorHelpers';
+import { updateParentNodes } from './utility';
 
 const ERROR_TYPES = Object.freeze({
   ReferenceError: 'ReferenceError',
@@ -134,9 +135,11 @@ export function onComponentOptionChanged(component, option_name, value) {
 
       if (shouldUpdateRef) {
         handleLowPriorityWork(() => {
-          useResolveStore
-            .getState()
-            .actions.updateResolvedRefsOfHints([{ hint: path, newRef: componentData[option_name] }]);
+          const toUpdateHints = updateParentNodes(path, componentData[option_name], option_name);
+
+          toUpdateHints.push({ hint: path, newRef: componentData[option_name] });
+
+          useResolveStore.getState().actions.updateResolvedRefsOfHints(toUpdateHints);
         });
       }
     }
diff --git a/frontend/src/_helpers/utility.js b/frontend/src/_helpers/utility.js
index f5c66a0b1c..51e4fd881c 100644
--- a/frontend/src/_helpers/utility.js
+++ b/frontend/src/_helpers/utility.js
@@ -1,3 +1,6 @@
+import { useResolveStore } from '@/_stores/resolverStore';
+import _ from 'lodash';
+
 export function validateMultilineCode(code) {
   const reservedKeyword = ['app', 'window', 'this']; // Case-sensitive reserved keywords
   const keywordRegex = new RegExp(`\\b(${reservedKeyword.join('|')})\\b`, 'i');
@@ -51,3 +54,35 @@ export function validateMultilineCode(code) {
     },
   };
 }
+
+export function updateParentNodes(path, newValue) {
+  const pathsToUpdate = [];
+
+  const updateReceivedPath = path;
+
+  const allPathsToBeUpdated = updateReceivedPath.split('.');
+
+  let currentPath = '';
+
+  for (let i = 0; i < allPathsToBeUpdated.length; i++) {
+    currentPath = currentPath + allPathsToBeUpdated[i];
+
+    if (i !== allPathsToBeUpdated.length - 1) {
+      const lookUpTable = useResolveStore.getState().lookupTable;
+
+      const existingRef = lookUpTable.resolvedRefs?.get(lookUpTable.hints?.get(currentPath));
+
+      if (typeof existingRef === 'function') return;
+
+      const updatePath = allPathsToBeUpdated.slice(i + 1).join('.');
+
+      const newRef = _.set(existingRef, updatePath, newValue);
+
+      pathsToUpdate.push({ hint: currentPath, newRef });
+    }
+
+    currentPath = currentPath + '.';
+  }
+
+  return pathsToUpdate;
+}