Cannot render list using V-for in VueJs

I am very new in Vue and I am trying to loop through an array. Don't exactly know what I am doing wrong but the list is not displaying on HTML. Here is the code below: This is an index file that is being rendered through a router view.

<template>
  <div class="index container">
    <div class="card" v-for="tournament in tournaments" :key="tournament.id">
      <div class="card-content">
        <h2 class="indigo-text">{{tournament.title}}</h2>
        <ul class="tournaments">
          <li v-for="(score,index) in tournamnet.scores" :key="index"></li>
          <span class="chip">{{score}}</span>
        </ul>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
     tournaments:[
       {title:'Muthaiga golf Tournament',slug: 'muthaiga-golf-tournament',scores:['Round 1', 'Round 2', 'Round 3'],id:'1'},
       {title:'Wilson Churchhill',slug: 'Wilson Churchhill',scores:['Round 1', 'Round 2', 'Round 3'],id:'2'},
       ]
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>

</style>

Here is the router view index.js

import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: index
    }
  ]
})

And here is the app.vue

<template>
  <div id="app">
   <navbar />
    <router-view/>
  </div>
</template>

<script>
import navbar from '@/components/navbar'
export default {
  name: 'App',
  components:{
    navbar
  }
}
</script>

Any help will be highly appreciated.