diff --git a/src/dom_components/view/ComponentDataVariableView.ts b/src/dom_components/view/ComponentDataVariableView.ts
index 8c5503790..0528d4e01 100644
--- a/src/dom_components/view/ComponentDataVariableView.ts
+++ b/src/dom_components/view/ComponentDataVariableView.ts
@@ -24,6 +24,7 @@ export default class ComponentDataVariableView extends ComponentView<ComponentDa
 
     this.listenTo(DataSources.all, 'add remove reset', this.postRender);
     this.listenTo(em, `${DataSourcesEvents.path}:${normPath}`, this.postRender);
+    this.listenTo(model, 'change:path change:value', this.postRender);
   }
 
   postRender() {
diff --git a/test/specs/dataSources/index.ts b/test/specs/dataSources/index.ts
index da3badd15..ecd165e8a 100644
--- a/test/specs/dataSources/index.ts
+++ b/test/specs/dataSources/index.ts
@@ -89,7 +89,24 @@ describe('DataSourceManager', () => {
       expect(cmpVar.getEl()?.innerHTML).toBe('Name1');
     });
 
-    test.todo('component is properly updating on its property changes');
+    test('component is properly updating on its default value change', () => {
+      const cmpVar = addDataVariable();
+      cmpVar.set({ value: 'none' });
+      expect(cmpVar.getEl()?.innerHTML).toBe('none');
+    });
+
+    test('component is properly updating on its path change', () => {
+      const ds = addDataSource();
+      const cmpVar = addDataVariable();
+      const el = cmpVar.getEl()!;
+      cmpVar.set({ path: 'ds1.id2.name' });
+      expect(el.innerHTML).toBe('Name2');
+      cmpVar.set({ path: 'ds1[id3]name' });
+      expect(el.innerHTML).toBe('Name3');
+
+      ds.getRecord('id3')?.set({ name: 'Name3-UP' });
+      expect(el.innerHTML).toBe('Name3-UP');
+    });
 
     describe('DataSource changes', () => {
       test('component is properly updating on data source add', () => {