Component sharing variable for some reason

I have some weird behaviour with a wrapped component I have created.

1. 
   

   When I change the route, the steps[] seems to stick around so that if I go back and forth between two routes, my steps array does no get reinitialized and gets bigger and bigger thus I need to manually reinitialize it:

   
   

   
   setup : function() {
       this.set('steps', []);
   }.on('init'),
   
   

Why do I need to do this? I thought components were regenerated when you visit the route again.

2. Another very weird behaviour is that if I have two of these components on the same page and don't use the setup function above, they are sharing the same steps[]. How can this be since components are completely separated from each other? It is almost like the step[] is a global variable or something.

wizard-for.js

export default Ember.Component.extend({
    tagName:'div',
    attributeBindings:['role', 'model', 'guided'],
    role : 'tabpanel',
    model : null,
    tab:'tab',

    steps : [],

    guided : true,
    notGuided : Ember.computed.not('guided'),

    setup : function() {
        this.set('steps', []);
    }.on('init'),

    showNext : function() {
        this.$('.nav-tabs > .active').next('li').find('a').tab('show') ;
    },

    showPrevious : function() {
        this.$('.nav-tabs > .active').prev('li').find('a').tab('show') ;
    },

    actions : {
        tabClicked : function() {
            return false;
        }
    }

});

wizard-for.hbs

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
    {{#each step in steps}}
        <li role="presentation" {{bind-attr class="step.isActive:active guided:disabled"}}>
            {{#if guided}}
                <a aria-controls="{{unbound step.elementId}}">{{step.title}}</a>
            {{else}}
                <a aria-controls="{{unbound step.elementId}}" href="{{unbound step.tabLink}}" data-toggle="tab" role="tab">{{step.title}}</a>
            {{/if}}
        </li>
    {{/each}}
</ul>

<!-- Tab panes -->
<div class="tab-content">
    {{yield}}
</div>

wizard-step.js

export default Ember.Component.extend({
    tagName:'div',
    attributeBindings:['role', 'title'],
    classNames : ['tab-pane'],
    classNameBindings : ['isActive:active'],
    isActive : false,
    role : 'tabpanel',
    title : '...',

    guided : Ember.computed.alias('parentView.guided'),
    notGuided : Ember.computed.alias('parentView.notGuided'),

    tabLink : function() {
        return '#' + this.get('elementId');
    }.property(),

    setup : function() {
      var steps = this.get('parentView.steps');
      steps.pushObject(this);
    }.on('init'),

    model : Ember.computed.alias('parentView.model'),

    actions : {
        next : function() {
            var parent = this.get('parentView');
            parent.showNext();
        },

        previous : function() {
            var parent = this.get('parentView');
            parent.showPrevious();
        }
    }

});

wizard-step.hbs

{{yield}}

{{#if guided}}
    <div>
        <button type="button" class="pull-right btn btn-primary" {{action "next"}}>Next</button>
        <button type="button" class="pull-left btn btn-default" {{action "previous"}}>Previous</button>
    </div>
{{/if}}

Example Usage

{{#wizard-for model=model2 guided=true}}
    {{#wizard-step isActive=true title='Step 1'}}
        hello
    {{/wizard-step}}

    {{#wizard-step title='Step 2'}}
    world
    {{/wizard-step}}
{{/wizard-for}}


<h3>Wizard - Not Guided</h3>
{{#wizard-for model=model3 guided=false}}
    {{#wizard-step isActive=true title='Step 3'}}
        hello
    {{/wizard-step}}

    {{#wizard-step title='Step 4'}}
        world
    {{/wizard-step}}
{{/wizard-for}}