json - 配列のオブジェクトを反復するVue

Question

さまざまなカテゴリのデータをデータでループしようとしています。これは次のようになります。

10m

• -2017年
• --名前: カップ1
• --ファイル: file1.pdf
• --名前: cup2

• --ファイル: file2.pdf

• -2016

• --名前: カップ1
• --ファイル: file1.pdf
• --名前: cup2
• --ファイル: file2.pdf

（そして15m未満でも同じですが、10m未満しか表示できません）

私のループの問題は、最初のカテゴリ (atm. "10m") の下にしか表示されないことです。

これを行うために VueJS を使用しています。

var vm = new Vue({
  el: '#results',

  data: {
    results: [
  {
    "kategori": "10m",
    "year": [
      {
        "2017": [
          {
              "name": "stævne",
              "file": "pdf.pdf"
            },
             {
              "name": "stævne",
              "file": "pdf.pdf"
            }
        ],
        "2016": [
          {
              "name": "stævne",
              "file": "pdf.pdf"
            },
             {
              "name": "stævne",
              "file": "pdf.pdf"
            }
        ]
      }
    ]
  },
  {
    "kategori": "15m",
    "year": [{
        "2017": [
          {
              "name": "stævne",
              "file": "pdf.pdf"
            },
             {
              "name": "stævne",
              "file": "pdf.pdf"
            }
        ],
        "2016": [
          {
              "name": "stævne",
              "file": "pdf.pdf"
            },
             {
              "name": "stævne",
              "file": "pdf.pdf"
            }
        ]
      }
    ]
  }
]
,
  },

})

.category {
  font-weight: bold;
}

.year {
  margin-left: 5px;
  font-weight: normal;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<main>
  <article id="results">
    <div v-for="(allCategory, index) in results" class="category">
      {{ allCategory.kategori }}
      <div v-for="(allYear, key) in results[index].year[index]" class="year">
        {{ key }}
      </div>
    </div>
  </article>
</main>

JSFiddle: https://jsfiddle.net/tj5413om/

前もって感謝します