Remove dynamic value listeners on component.destroy()

packages/core/src/dom_components/model/Component.ts

@@ -13,7 +13,7 @@ import {
 } from 'underscore';
 import { shallowDiff, capitalize, isEmptyObj, isObject, toLowerCase } from '../../utils/mixins';
 import StyleableModel, { StyleProps, UpdateStyleOptions } from '../../domain_abstract/model/StyleableModel';
-import { Model } from 'backbone';
+import { Model, ModelDestroyOptions } from 'backbone';
 import Components from './Components';
 import Selector from '../../selector_manager/model/Selector';
 import Selectors from '../../selector_manager/model/Selectors';
@@ -1820,6 +1820,11 @@ export default class Component extends StyleableModel<ComponentProperties> {
     return this;
   }
 
+  destroy(options?: ModelDestroyOptions | undefined): false | JQueryXHR {
+    this.componentDVListener.destroy();
+    return super.destroy(options);
+  }
+
   /**
    * Move the component to another destination component
    * @param {Component} component Destination component (so the current one will be appended as a child)

packages/core/src/dom_components/model/ComponentDynamicValueListener.ts

@@ -106,4 +106,10 @@ export class ComponentDynamicValueListener {
   getPropsDefsOrValues(props: ObjectAny) {
     return this.propertyWatchClass.getSerializableValues(props);
   }
+
+  destroy() {
+    this.propertyWatchClass.removeListeners();
+    this.attributeWatchClass.removeListeners();
+    this.traitsWatchClass.removeListeners();
+  }
 }