v-for doesn't go through my dynamic multidimensional array on Vue 2

I'm working on Laravel with Vue js 2 and on the mounted method I'm creating a multidimensional array with no problem (I can see the data with the vue-devtools), but I can't print it on my page using v-for.

However, when I dynamically create a simple array, I can print it with no problem.

My Vue code:

<script type='text/javascript'>
  var av = new Vue({
    el: '#validaciones',
    data: {
      vChallenges: ['CH1', 'CH2', 'CH3'],
      vPlayers: ['p1', 'p2', 'p3', 'p4'],
      vContest: [
          { ch: 'CH1', pl: ['p1', 'p2', 'p3', 'p4'] },
          { ch: 'CH2', pl: ['p1', 'p2', 'p3', 'p4'] },
          { ch: 'CH3', pl: ['p1', 'p2', 'p3', 'p4'] }
      ],
      vDynamicPlayers: [],
      vDynamicContest: [],
    },
    mounted: function() {
      for (i = 0; i < this.vChallenges.length; i++) {
        this.vDynamicContest[i] = { ch:this.vChallenges[i], pl:[] };
        for (j = 0; j < this.vPlayers.length; j++) {
          this.vDynamicContest[i].pl.splice(j, 1, this.vPlayers[j]);
        }
      }
      for (j = 0; j < this.vPlayers.length; j++) {
        this.vDynamicPlayers.splice(j, 1, this.vPlayers[j]);
      }
    }
  })

This is what I'm trying to print which shows nothing:

<div v-for="challenge in vDynamicContest">
  <b>Challenge: @</b>
  <span>Players:</span> 
  <span v-for="player in challenge.pl">
    @
  </span>
</div>

When I change vDynamicContest to vContest It works fine:

Challenge: CH1 Players: p1 p2 p3 p4

Challenge: CH2 Players: p1 p2 p3 p4

Challenge: CH3 Players: p1 p2 p3 p4

And there's no problem printing the dynamic array:

<div v-for="player in vDynamicPlayers">
  <b>Player: @</b>
</div>

Please help!

I was modifying the arrays with the push method but on this site https://vuejs.org/2016/02/06/common-gotchas/ they explained vue doesn't pick up the array changes that way, so I'm using splice as they recommend but I still can't show the multi array values.

via somezombie