Remove symbol instance references

src/dom_components/model/Component.js

@@ -830,6 +830,7 @@ const Component = Backbone.Model.extend(Styleable).extend(
             this.__logSymbol('remove', toUp, { opts: o, removed: m.cid });
           toUp.forEach(symb => {
             const opts = { fromInstance: m, ...o };
+
             // In case of nested symbols, I only need to propagate changes to its instances
             if (symb.__isSymbolTop() && symb.__getSymbols()) {
               const toUpInst = symb.__getSymbToUp({
@@ -848,6 +849,15 @@ const Component = Backbone.Model.extend(Styleable).extend(
             }
           });
         }
+
+        // Remove instance reference from the symbol
+        const symb = m.__getSymbol();
+        symb &&
+          !o.temporary &&
+          symb.set(
+            keySymbols,
+            symb.__getSymbols().filter(i => i !== m)
+          );
       }
 
       this.__changesUp(optUp);

test/specs/dom_components/model/Symbols.js

@@ -222,6 +222,12 @@ describe('Symbols', () => {
       all.forEach(cmp => expect(cmp.components().length).toBe(compInitChild));
     });
 
+    test('Removing one instance, will remove the reference from the symbol', () => {
+      expect(symbol.__getSymbols().length).toBe(allInst.length);
+      allInst[2].remove();
+      expect(symbol.__getSymbols().length).toBe(allInst.length - 1);
+    });
+
     test('Adding a new component to a symbol, it will be propogated to all instances', () => {
       const added = symbol.append(simpleComp, { at: 0 })[0];
       all.forEach(cmp =>