diff --git a/render.js b/render.js
index beb4a36..4181f0f 100644
--- a/render.js
+++ b/render.js
@@ -107,8 +107,7 @@ RenderApp.prototype.component = function (tag_name, options, render_options) {
   }
 
   render_options = render_options || {}
-  if( options.data ) render_options.data = options.data
-
+  
   render_app.withNode(function (node) {
 
     if( node.$ !== tag_name ) return
@@ -117,25 +116,30 @@ RenderApp.prototype.component = function (tag_name, options, render_options) {
         _initNode = with_node.initNode
 
     return _.extend( with_node, {
-      initNode: options.controller && options.template ? function (node_el) {
+      initNode: options.controller && options.template ? function (node_el, _node, _options) {
         var _this = Object.create(this), _args = arguments
 
-        var template_ctrl = render_app.render(node_el, typeof options.template === 'string' ? [options.template] : options.template, render_options)
+        if( !render_options.data && _options.data ) render_options.data = _options.data
+        var template_ctrl = render_app.render(node_el,
+          typeof options.template === 'string' ? [options.template] : options.template
+        , render_options)
+
         _this.updateData = template_ctrl.updateData
         _this.watchData(function () {
-          _this.updateData()
+          template_ctrl.updateData()
         })
 
         if( _initNode instanceof Function ) _initNode.apply(_this, arguments)
         options.controller.apply(_this, _args)
-      } : function (node_el) {
+      } : function (node_el, _node, _options) {
         var _this = Object.create(this), template_ctrl
         if( typeof options.template === 'string' ) node_el.innerHTML = options.template
         else if( options.template ) {
+          if( !render_options.data && _options.data ) render_options.data = _options.data
           template_ctrl = render_app.render(node_el, options.template, render_options)
           _this.updateData = template_ctrl.updateData
           _this.watchData(function () {
-            _this.updateData()
+            template_ctrl.updateData()
           })
         }
 
diff --git a/tests/render-component-tests.js b/tests/render-component-tests.js
new file mode 100644
index 0000000..514e9d0
--- /dev/null
+++ b/tests/render-component-tests.js
@@ -0,0 +1,129 @@
+/* global describe, it, beforeEach, assert, APP */
+
+describe('APP.component', function () {
+
+  beforeEach(function () {
+    while( document.body.firstChild ) {
+      document.body.removeChild(document.body.firstChild)
+    }
+  })
+
+  it('basic render', function () {
+
+    var _APP = APP.createApp()
+
+    _APP.component('my-div', function (el) {
+      assert.strictEqual(el.nodeName, 'MY-DIV')
+    })
+
+    _APP.render(document.body, [{
+      $: 'my-div'
+    }], {
+      data: {
+        first_name: 'John',
+      },
+    })
+
+    assert.strictEqual(document.body.innerHTML, '<my-div></my-div>')
+
+    _APP.render(document.body, [{
+      $: 'my-div', _: 'Hi {{ first_name }}!',
+    }], {
+      data: {
+        first_name: 'John',
+      },
+    })
+
+    assert.strictEqual(document.body.innerHTML, '<my-div><!-- text: Hi {{ first_name }}! -->Hi John!</my-div>')
+
+  })
+
+  it('rendering template', function () {
+
+    var _APP = APP.createApp()
+
+    _APP.component('my-div', {
+      template: ['Hi {{ first_name }}!'],
+    })
+
+    _APP.render(document.body, [{
+      $: 'my-div'
+    }], {
+      data: {
+        first_name: 'John',
+      },
+    })
+
+    assert.strictEqual(document.body.innerHTML, '<my-div><!-- text: Hi {{ first_name }}! -->Hi John!</my-div>')
+
+  })
+
+  it('rendering template overrides', function () {
+
+    var _APP = APP.createApp()
+
+    _APP.component('my-div', {
+      template: ['Hi {{ last_name }}!'],
+    })
+
+    _APP.render(document.body, [{
+      $: 'my-div', _: 'Hi {{ first_name }}!'
+    }], {
+      data: {
+        first_name: 'John',
+        last_name: 'Smith',
+      },
+    })
+
+    assert.strictEqual(document.body.innerHTML, '<my-div><!-- text: Hi {{ last_name }}! -->Hi Smith!</my-div>')
+
+  })
+
+  it('rendering template with controller', function () {
+
+    var _APP = APP.createApp()
+
+    _APP.component('my-div', {
+      template: ['Hi {{ first_name }}!'],
+      controller: function (el) {
+        assert.strictEqual(el.nodeName, 'MY-DIV')
+      },
+    })
+
+    _APP.render(document.body, [{
+      $: 'my-div'
+    }], {
+      data: {
+        first_name: 'John',
+      },
+    })
+
+    assert.strictEqual(document.body.innerHTML, '<my-div><!-- text: Hi {{ first_name }}! -->Hi John!</my-div>')
+
+  })
+
+  it('rendering template overrides with controller', function () {
+
+    var _APP = APP.createApp()
+
+    _APP.component('my-div', {
+      template: ['Hi {{ last_name }}!'],
+      controller: function (el) {
+        assert.strictEqual(el.nodeName, 'MY-DIV')
+      },
+    })
+
+    _APP.render(document.body, [{
+      $: 'my-div', _: 'Hi {{ first_name }}!'
+    }], {
+      data: {
+        first_name: 'John',
+        last_name: 'Smith',
+      },
+    })
+
+    assert.strictEqual(document.body.innerHTML, '<my-div><!-- text: Hi {{ last_name }}! -->Hi Smith!</my-div>')
+
+  })
+
+})