How to iterate through an array in a Vue component? - vuejs2

Question

I am trying to iterate through the array props_nfl_days which is equal to ["Sunday", "Thursday Night", "Monday Night"] so it appears as a header for each group of NFL scores by day of the week. The component looks like:
Updated Code:
const nfl = {
nflComponent: Vue.component("tab-nfl", {
props: [
"props_league_data_nfl",
"props_nfl_days",
"props_league_standings"
],
template: `
<div class="vue-root-element">
<div class="container nfl-scores">
<div v-for="(dayDataArray, index) in props_league_data_nfl">
<p> {{ index }} </p>
<h2> {{ props_nfl_days[index] }} </h2>
<div class="row">
<div class="col-xs-12 col-md-4 col-lg-3" v-for="arrayItem in dayDataArray">
<table class="table table-striped table-sm">
<thead>
<th scope="col" class="box-score-status is-completed" v-if="arrayItem.isCompleted">Final</th>
</thead>
<tbody>
<tr>
<td class="box-score-team"> {{ arrayItem.game.awayTeam.Abbreviation }} </td>
<td class="box-score-inning" v-for="quarter_score in arrayItem.quarterSummary.quarter">
{{quarter_score.awayScore }}</span>
<td class="box-score-final" v-bind:class="{ won: arrayItem.awayScore > arrayItem.homeScore }">{{ arrayItem.awayScore }}
</td>
</tr>
<tr>
<td class="box-score-team"> {{ arrayItem.game.homeTeam.Abbreviation }} </td>
<td class="box-score-inning" v-for="quarter_score in arrayItem.quarterSummary.quarter">
{{quarter_score.homeScore }}
</td>
<td class="box-score-final" v-bind:class="{ won: arrayItem.homeScore > arrayItem.awayScore }">{{ arrayItem.homeScore
}}
</td>
</tr>
<tr><td class="box-score-team w-150">Location: {{ arrayItem.game.location }} </td></tr>
</tbody>
</table>
</div> <!-- End v-for dayDataArray -->
</div> <!-- End row -->
</div> <!-- End v-for props_league_data_nfl -->
</div> <!-- End container -->
All I get is index goes to 0 and thats it. props_league_data_nfl is an objectwith three properties. Here is a snapshot of the output of Vue panel :
What I want is the correct nfl_days array element in h2 header for each props_league_data_nfl group. See picture:
I would like these Sunday headers to be Thurday Night and Monday Night respectively. Any guidance on how to achieve this much appreciated.

Answer 1

Computed properties should not have side effects. Computed properties are cached based on their dependencies; since increment doesn't see any changes in its dependencies, it does not re-compute its value. So increment it will run once and always return the same value: 0.
v-for takes additional parameters for the key (in the case of iterating over objet properties) and the current index, so you can remove the increment computed property and re-write your template like so:
<div v-for="(dayDataArray, key, index) in props_league_data_nfl">
**<h2> {{ props_nfl_days[index] }} </h2>**