diff --git a/packages/clay-component/src/ClayComponent.js b/packages/clay-component/src/ClayComponent.js
index 23f99d77e7..4d18ec417d 100644
--- a/packages/clay-component/src/ClayComponent.js
+++ b/packages/clay-component/src/ClayComponent.js
@@ -47,13 +47,15 @@ class ClayComponent extends Component {
 	rendered(...args) {
 		super.rendered(...args);
 
-		for (let dataKey in this.data) {
-			if (Object.prototype.hasOwnProperty.call(this.data, dataKey)) {
-				this.element.setAttribute(
-					'data-' + dataKey,
-					this.data[dataKey]
-				);
-			}
+		this._renderDataAttributes();
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	syncData(newVal, prevVal) {
+		if (newVal != prevVal) {
+			this._renderDataAttributes();
 		}
 	}
 
@@ -121,6 +123,20 @@ class ClayComponent extends Component {
 		this.runListeners_(listeners, args, facade);
 		return true;
 	}
+
+	/**
+	 * Places the data attributes in the dom.
+	 */
+	_renderDataAttributes() {
+		for (let dataKey in this.data) {
+			if (Object.prototype.hasOwnProperty.call(this.data, dataKey)) {
+				this.element.setAttribute(
+					'data-' + dataKey,
+					this.data[dataKey]
+				);
+			}
+		}
+	}
 }
 
 /**