diff --git a/src/core/EditableComponent.tsx b/src/core/EditableComponent.tsx
index 56507c99..4d45fd08 100644
--- a/src/core/EditableComponent.tsx
+++ b/src/core/EditableComponent.tsx
@@ -54,6 +54,10 @@ export const EditableComponent = (editableProps: EditableComponentProps): JSX.El
   const path = cqPath || Utils.getCQPath({ cqPath, pagePath, itemPath });
   const [model, setModel] = React.useState(() => userModel || {});
 
+  React.useEffect(() => {
+    setModel(userModel ?? {});
+  }, [path, userModel]);
+
   React.useEffect(() => {
     const renderContent = () => updateModel({ path, forceReload, setModel, isInEditor, pagePath });
     !Object.keys(model)?.length && renderContent();
@@ -79,7 +83,6 @@ export const EditableComponent = (editableProps: EditableComponentProps): JSX.El
 
   const { appliedCssClassNames = '' } = model;
   const componentClassName = `${className} ${props.containerProps?.className || ''} ${appliedCssClassNames}`.trim();
-
   const updatedComponent = addPropsToComponent(children, pagePath ? componentProps : model);
   return isInEditor || (!props.removeDefaultStyles && componentClassName) ? (
     <div className={componentClassName} {...dataAttr}>