diff --git a/packages/core/src/data_sources/model/data_collection/ComponentDataCollectionVariableView.ts b/packages/core/src/data_sources/model/data_collection/ComponentDataCollectionVariableView.ts
index fa4bab47d..618cdb283 100644
--- a/packages/core/src/data_sources/model/data_collection/ComponentDataCollectionVariableView.ts
+++ b/packages/core/src/data_sources/model/data_collection/ComponentDataCollectionVariableView.ts
@@ -8,6 +8,7 @@ export default class ComponentDataCollectionVariableView extends ComponentView<C
   initialize(opt = {}) {
     super.initialize(opt);
     this.postRender();
+
     this.collectionVariableListener = new DynamicVariableListenerManager({
       em: this.em!,
       dataVariable: this.model.datacollectionVariable,
@@ -17,6 +18,7 @@ export default class ComponentDataCollectionVariableView extends ComponentView<C
 
   postRender() {
     const { model, el } = this;
+    if (!el) return;
     el.innerHTML = model.datacollectionVariable.getDataValue();
 
     super.postRender();
diff --git a/packages/core/test/specs/data_sources/model/data_collection/ComponentDataCollectionVariable.ts b/packages/core/test/specs/data_sources/model/data_collection/ComponentDataCollectionVariable.ts
index e032416cd..0807c94bd 100644
--- a/packages/core/test/specs/data_sources/model/data_collection/ComponentDataCollectionVariable.ts
+++ b/packages/core/test/specs/data_sources/model/data_collection/ComponentDataCollectionVariable.ts
@@ -6,9 +6,10 @@ import {
 } from '../../../../../src/data_sources/model/data_collection/constants';
 import { DataCollectionStateVariableType } from '../../../../../src/data_sources/model/data_collection/types';
 import EditorModel from '../../../../../src/editor/model/Editor';
+import { ProjectData } from '../../../../../src/storage_manager';
 import { setupTestEditor } from '../../../../common';
 
-describe('Collection component', () => {
+describe('Collection variable components', () => {
   let em: EditorModel;
   let editor: Editor;
   let dsm: DataSourceManager;
@@ -37,7 +38,7 @@ describe('Collection component', () => {
     em.destroy();
   });
 
-  test('Collection variable components', async () => {
+  test('Gets the correct static value', async () => {
     const cmp = wrapper.components({
       type: CollectionComponentType,
       collectionDef: {
@@ -66,4 +67,186 @@ describe('Collection component', () => {
     const secondGrandchild = cmp.components().at(1).components().at(0);
     expect(secondGrandchild.getInnerHTML()).toContain('user2');
   });
+
+  test('Watches collection variable changes', async () => {
+    const cmp = wrapper.components({
+      type: CollectionComponentType,
+      collectionDef: {
+        componentDef: {
+          type: 'default',
+          components: {
+            type: CollectionVariableType,
+            variableType: DataCollectionStateVariableType.currentItem,
+            path: 'user',
+          },
+        },
+        collectionConfig: {
+          dataSource: {
+            type: DataVariableType,
+            path: 'my_data_source_id',
+          },
+        },
+      },
+    })[0];
+    firstRecord.set('user', 'new_correct_value');
+
+    const firstGrandchild = cmp.components().at(0).components().at(0);
+    expect(firstGrandchild.getInnerHTML()).toContain('new_correct_value');
+
+    const secondGrandchild = cmp.components().at(1).components().at(0);
+    expect(secondGrandchild.getInnerHTML()).toContain('user2');
+  });
+
+  describe('Serialization', () => {
+    let cmp: Component;
+
+    beforeEach(() => {
+      const variableCmpDef = {
+        type: CollectionVariableType,
+        variableType: DataCollectionStateVariableType.currentItem,
+        path: 'user',
+      }
+
+      const collectionComponentDefinition = {
+        type: CollectionComponentType,
+        collectionDef: {
+          componentDef: {
+            type: 'default',
+            components: [
+              {
+                type: 'default',
+              },
+              variableCmpDef,
+            ],
+          },
+          collectionConfig: {
+            collectionId: 'my_collection',
+            startIndex: 0,
+            endIndex: 2,
+            dataSource: {
+              type: DataVariableType,
+              path: 'my_data_source_id',
+            },
+          },
+        },
+      };
+
+      cmp = wrapper.components(collectionComponentDefinition)[0];
+    });
+
+    test('Serializion to JSON', () => {
+      expect(cmp.toJSON()).toMatchSnapshot(`Collection with collection variable component ( no grandchildren )`);
+
+      const firstChild = cmp.components().at(0);
+      const newChildDefinition = {
+        type: CollectionVariableType,
+        variableType: DataCollectionStateVariableType.currentIndex,
+        path: 'user',
+      };
+      firstChild.components().at(0).components(newChildDefinition);
+      expect(cmp.toJSON()).toMatchSnapshot(`Collection with collection variable component ( with grandchildren )`);
+    });
+
+    test('Saving', () => {
+      const projectData = editor.getProjectData();
+      const page = projectData.pages[0];
+      const frame = page.frames[0];
+      const component = frame.component.components[0];
+
+      expect(component).toMatchSnapshot(`Collection with collection variable component ( no grandchildren )`);
+
+      const firstChild = cmp.components().at(0);
+      const newChildDefinition = {
+        type: CollectionVariableType,
+        variableType: DataCollectionStateVariableType.currentIndex,
+        path: 'user',
+      };
+
+      firstChild.components().at(0).components(newChildDefinition);
+      expect(cmp.toJSON()).toMatchSnapshot(`Collection with collection variable component ( with grandchildren )`);
+    });
+
+    test('Loading', () => {
+      const componentProjectData: ProjectData = {
+        assets: [],
+        pages: [
+          {
+            frames: [
+              {
+                component: {
+                  components: [
+                    {
+                      collectionDef: {
+                        componentDef: {
+                          type: 'default',
+                          components: [
+                            {
+                              type: CollectionVariableType,
+                              variableType: DataCollectionStateVariableType.currentItem,
+                              path: 'user',
+                            },
+                          ],
+                        },
+                        collectionConfig: {
+                          collectionId: 'my_collection',
+                          dataSource: {
+                            path: 'my_data_source_id',
+                            type: DataVariableType,
+                          },
+                          endIndex: 1,
+                          startIndex: 0,
+                        },
+                      },
+                      type: 'collection-component',
+                    },
+                  ],
+                  docEl: {
+                    tagName: 'html',
+                  },
+                  head: {
+                    type: 'head',
+                  },
+                  stylable: [
+                    'background',
+                    'background-color',
+                    'background-image',
+                    'background-repeat',
+                    'background-attachment',
+                    'background-position',
+                    'background-size',
+                  ],
+                  type: 'wrapper',
+                },
+                id: 'frameid',
+              },
+            ],
+            id: 'pageid',
+            type: 'main',
+          },
+        ],
+        styles: [],
+        symbols: [],
+        dataSources: [dataSource],
+      };
+      editor.loadProjectData(componentProjectData);
+
+      const components = editor.getComponents();
+      const component = components.models[0];
+      const firstChild = component.components().at(0);
+      const firstGrandchild = firstChild.components().at(0);
+      const secondChild = component.components().at(1);
+      const secondGrandchild = secondChild.components().at(0);
+
+      expect(firstGrandchild.getInnerHTML()).toBe('user1');
+      expect(secondGrandchild.getInnerHTML()).toBe('user2');
+
+      firstRecord.set('user', 'new_user1_value');
+      expect(firstGrandchild.getInnerHTML()).toBe('new_user1_value');
+      expect(secondGrandchild.getInnerHTML()).toBe('user2');
+
+      secondRecord.set('user', 'new_user2_value');
+      expect(firstGrandchild.getInnerHTML()).toBe('new_user1_value');
+      expect(secondGrandchild.getInnerHTML()).toBe('new_user2_value');
+    });
+  });
 });
diff --git a/packages/core/test/specs/data_sources/model/data_collection/__snapshots__/ComponentDataCollectionVariable.ts.snap b/packages/core/test/specs/data_sources/model/data_collection/__snapshots__/ComponentDataCollectionVariable.ts.snap
new file mode 100644
index 000000000..ba96ea6e8
--- /dev/null
+++ b/packages/core/test/specs/data_sources/model/data_collection/__snapshots__/ComponentDataCollectionVariable.ts.snap
@@ -0,0 +1,135 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Collection variable components Serialization Saving: Collection with collection variable component ( no grandchildren ) 1`] = `
+{
+  "collectionDef": {
+    "collectionConfig": {
+      "collectionId": "my_collection",
+      "dataSource": {
+        "path": "my_data_source_id",
+        "type": "data-variable",
+      },
+      "endIndex": 2,
+      "startIndex": 0,
+    },
+    "componentDef": {
+      "components": [
+        {
+          "type": "default",
+        },
+        {
+          "path": "user",
+          "type": "parent-collection-variable",
+          "variableType": "currentItem",
+        },
+      ],
+      "type": "default",
+    },
+  },
+  "type": "collection-component",
+}
+`;
+
+exports[`Collection variable components Serialization Saving: Collection with collection variable component ( with grandchildren ) 1`] = `
+{
+  "collectionDef": {
+    "collectionConfig": {
+      "collectionId": "my_collection",
+      "dataSource": {
+        "path": "my_data_source_id",
+        "type": "data-variable",
+      },
+      "endIndex": 2,
+      "startIndex": 0,
+    },
+    "componentDef": {
+      "components": [
+        {
+          "components": [
+            {
+              "path": "user",
+              "type": "parent-collection-variable",
+              "variableType": "currentIndex",
+            },
+          ],
+          "type": "default",
+        },
+        {
+          "path": "user",
+          "type": "parent-collection-variable",
+          "variableType": "currentItem",
+        },
+      ],
+      "type": "default",
+    },
+  },
+  "type": "collection-component",
+}
+`;
+
+exports[`Collection variable components Serialization Serializion to JSON: Collection with collection variable component ( no grandchildren ) 1`] = `
+{
+  "collectionDef": {
+    "collectionConfig": {
+      "collectionId": "my_collection",
+      "dataSource": {
+        "path": "my_data_source_id",
+        "type": "data-variable",
+      },
+      "endIndex": 2,
+      "startIndex": 0,
+    },
+    "componentDef": {
+      "components": [
+        {
+          "type": "default",
+        },
+        {
+          "path": "user",
+          "type": "parent-collection-variable",
+          "variableType": "currentItem",
+        },
+      ],
+      "type": "default",
+    },
+  },
+  "type": "collection-component",
+}
+`;
+
+exports[`Collection variable components Serialization Serializion to JSON: Collection with collection variable component ( with grandchildren ) 1`] = `
+{
+  "collectionDef": {
+    "collectionConfig": {
+      "collectionId": "my_collection",
+      "dataSource": {
+        "path": "my_data_source_id",
+        "type": "data-variable",
+      },
+      "endIndex": 2,
+      "startIndex": 0,
+    },
+    "componentDef": {
+      "components": [
+        {
+          "components": [
+            {
+              "path": "user",
+              "type": "parent-collection-variable",
+              "variableType": "currentIndex",
+            },
+          ],
+          "type": "default",
+        },
+        {
+          "path": "user",
+          "type": "parent-collection-variable",
+          "variableType": "currentItem",
+        },
+      ],
+      "type": "default",
+    },
+  },
+  "type": "collection-component",
+}
+`;