I have a function that find an object from a JSON that has an id === `this.match.mainParticipant.stats.perkSubStyle`. This object contains a property called `slots` that is an array and has 4 elements. Each slot has 3 elements which represent runes from a game. If you iterate over the slots and their elements you get this:

[![enter image description here](https://i.stack.imgur.com/79SaW.png)](https://i.stack.imgur.com/79SaW.png)

I get the object using this function:

```
secondaryPerks(){
    let perksTree = this.$store.state.summonerRunes.find(value => value.id === this.match.mainParticipant.stats.perkSubStyle);
    console.log(perksTree.slots.unshift())
    return perksTree
}

```

and I iterate and display the icons using this:

```
    <div v-for='runes in this.secondaryPerks().slots'>
        <div v-for='rune in runes.runes'>
            <img :src="'https://ddragon.leagueoflegends.com/cdn/img/' + rune.icon"  alt="">
        </div>
    </div>

```

Now the problem is that because that perks tree is secondary one, the perks in slot[0] can never be picked because if they were picked, they'd have to be part of the primaryPerks tree. This means there's no point displaying that none of them were selected. For that reason I am trying to remove the first slot[0] element from the array, however, when I try to unshift() it, I get an error:

> 
> "You may have an infinite update loop in a component render function"
> 
> 
> 

And I have no clue why. Any advices?