Cannot access property of JSON in VueJS using a loop index

My VueJS running app displays activity data from Strava, grouped together by week, over a 20-week period. The difficulty that I’m having is that the object from my API appears, but I cannot access each property.

These are the relevant excerpts from the SFC.

DATA

weekly_total_data will grow as the weeks progress

data() {
        {
            return {
            activity_weeks: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
            weekly_total_data:
               [{"week_number":3,"total_distance":39877.6,"total_moving_time":11841},
                {"week_number":2,"total_distance":58596.4,"total_moving_time":18719},     
                {"week_number":1,"total_distance":41347.5,"total_moving_time":12796}]
            }
        }
    }

FUNCTION

Acccessing the data

    matchWeeklyTotals(){
        var x = this.weekly_total_data
        console.log(x)
        return x
      }
    },

TEMPLATE

Looping through the weeks, getting an index for each week, and then using that to display the appropriate data for the week

<div v-for="(week, week_index) in this.activity_weeks" v-bind:value="week._id">
   <div class="container max-w-xl mx-auto">
       <h2 class="text-2xl">Week {{week}}: {{ (matchWeeklyTotals()[week_index])}}</h2>
   </div>
</div>

As it stands, I can display the object, but when I do matchWeeklyTotals()[week_index][total_distance], as an example, it fails.
I have also tried variations of JSON.parse.

Any help to access the total_distance and total_moving_time appreciated.