How to handle action in EmberJS in nested Component

so I have nested components in EmberJS and can't manage to properly handle their actions.

I have route Create and in its template Component pixel-grid:

<div class="row">
<div class="col-sm-7">
    
</div>
<div class="col-sm-5">

</div>

In pixel-grid template i have component named pixel-cell:

<table class="mx-auto">

<tr class="table-row">
    
    <th class="table-cell">
        
    </th>
    
</tr>

Component pixel-cell have an empty template since I don't need it for now. In pixel-cell component js file I have:

import Component from '@ember/component';

export default Component.extend({
classNames: ['cell', 'clickable'],
tagName: 'div',

init() {
    this._super(...arguments);
},

});

This code obviously do not compile since I did not handle this action. But..

I tried to set action in pixel-cell but then Ember told me that pixel-grid should have that action. So I did put this changeColor action in pixel-grid -> that doesn't work.

So I tried to handle this by something like this in pixel-cell js:

click() {
    this.sendAction('changeColor');
},

-> that doesn't work.

I have no idea how it should work ;/ I tried to read guides but still can't manage that. Please help.