Adds name changing

app/components/another-component/another-component.html

@@ -1,4 +1,6 @@
 <link rel="import" href="/polymer/polymer.html">
+<link rel="import" href="/paper-button/paper-button.html">
+
 
 <dom-module id="another-component">
     <template>
@@ -10,6 +12,7 @@
 
         <h3>{{element.name}}</h3>
         <h4>{{element.person.name}}</h4>
+        <paper-button on-tap="_changeName">Change name!</paper-button>
         
     </template>
     <script>
@@ -18,11 +21,16 @@
             properties: {
                 element: {
                     type: Object,
-                    reflectToAttribute: true,
                     notify: true
                 }
             },
 
+            _changeName: function(){
+                this.set('element.person', {"name": "bobby"});
+                this.notifyPath(element);
+                this.notifyPath(element.person);
+                
+            }
         });
     </script>
 </dom-module>

app/components/example-component/example-component.html

@@ -19,7 +19,7 @@
     </template>
     <script>
         var fred = {"name": "fred"};
-        var tom = {"name": "tom"}
+        var tom = {"name": "tom"};
 
         Polymer({
             is: 'example-component',

bower.json

@@ -2,7 +2,8 @@
   "name": "polymer-hot-reloading-example",
   "description": "A simple example of polymer project with hot reloading",
   "dependencies": {
-    "polymer": "^2.0.0"
+    "polymer": "^2.0.0",
+    "paper-button": "^2.0.0"
   },
   "ignore": [
     "**/.*",