Component action not triggered in ember

I am facing an issue and not able to rectify what is the problem or bug.

I am having a route in ember and a component which I used in the route.

The problem is whenever I try to trigger some action in the component but the actions specified in the route is being called.

For example,

//main.hbs


//main.js
actions:{
   showRow:function(){
       console.log("Router showRow called");
   },
}
//SampleComponent.hbs
<script type="text/x-handlebars" id="components/sample-component">
   <!-- button 1 -->
   <button ></button>
   <!-- button 2 -->
   <button ></button>
</script>

//SampleComponent.hbs
actions:{
   showRow:function(){
       console.log("Component showRow called");
   },
   hideRow:function(){
       console.log("Component hideRow called");
   },
}

If I click button 1, I get error saying that the action was not handled. If I click button 2, 'Router showRow called' gets printed in the console.

The actual error is Still now not able to spot the error, kindly help me to sort these out.

Thanks in advance :-)