Ember tabs component

I am quite new in Ember and I am trying to create tabs component. I made it by creating two components, tabs and tab. Tabs is a parent of tabs. Until now I created parent component:

tabs.hbs

<ul class="nav-tabs">   
 
   <li class="nav-link" >
     <a></a>
   </li>   
  
</ul> 
<div class="tab-content">
   
</div>

tabs.js

import Ember from "ember";

export default Ember.Component.extend({
  classNames: "ac-tabs",

  defaultTab: Ember.computed("defaultTab", function() {
    return this.get("defaultTab") ? this.get("defaultTab") : 0;
  }),

  activeTab: Ember.computed("tabs.@each.active", function() {
    return this.get("tabs").filterBy("active", true)[0];
  }),

  resetTabs: function() {
    this.set("tabs", []);
  }.on("init"),

  populateTabs: function() {
    var _this = this;

    this.get("childViews").forEach(function(view) {
      _this.get("tabs").pushObject(view);
    });

    this.get("tabs")[this.get("defaultTab")].set("active", true);
  }.on("didInsertElement"),

  setActiveTab: function(tab) {
    var activeTab = this.get("activeTab");

    activeTab.set("active", false);

    tab.set("active", true);
  },

  actions: {
    goto: function(tab) {
      this.setActiveTab(tab);
    }
  }
});

And my tab component, so the js file looks like below:

import Ember from "ember";

export default Ember.Component.extend({
  classNames: "ac-tab",

  classNameBindings: ["isActive:active"],

  isActive: Ember.computed("parentView.activeTab", function() {
    return this === this.get("parentView.activeTab");
  })
});

I want to use this component in my template like this:

  
    Tab A Content
  

  
    Tab B Content
  

There is created logic in js tab.js file to set selected tab as active, add class "active" and it should send action goto to choose the proper content to display but it does not seem to work. What am I doing wrong or what did I miss? Probably I missed some important thing, but right now I have no idea how to solve it.

Could anyone help me?

Thanks a lot