v-forでmountedしたものを展開しようとしたらできなかった

<template lang="html">
  <v-ons-page>
    <component
    v-for="category in allCategories"
    :is="CategoryIndexPage"
    :key="category.id"
    :title="category.title"
    :image="category.image"
    :categoryAll="category.title"
    PropsWidth="25"
    :page-stack="pageStack"
    class="all-category"
    ></component>
  </v-ons-page>
</template>

<script>
// 省略
  data () {
    return {
      allCategories: []
    }
  },
  created: function () {
    const self = this
    var listSet = []
    this.axios
    .get(process.env.BASE_URL + 'all_category')
    .then(function (res) {
      listSet = res.data
      self.allCategories = listSet
    })
  }
}
</script>

これで本来self.allCategoriesが更新されるはずなのに更新されなかった…
これだけで数日悩んでしまったので記事にします

結果：divで囲って上げるだけだった

<template lang="html">
  <v-ons-page>
    <div>
      <component
      v-for="category in allCategories"
      :is="CategoryIndexPage"
      :key="category.id"
      :title="category.title"
      :image="category.image"
      :categoryAll="category.title"
      PropsWidth="25"
      :page-stack="pageStack"
      class="all-category"
      ></component>
    </div>
  </v-ons-page>
</template>

備考：なぜdivで囲わないといけないのか？

これは、コンポーネントを展開した時

<ons-page>
  <div class="page__background"></div>
  <div class="page__content">
  </div>
  <div v-key="1">hoge</div>
  <div v-key="2">hogehoge</div>  <!-- データ上は追加されている -->
</ons-page>

…ということで、divで囲っていないせいで、page__contentの中に入っていないのが根本的な原因でした。
divで囲ってあげると

<ons-page>
  <div class="page__background"></div>
  <div class="page__content">
    <div v-key="1">hoge</div>
    <div v-key="2">hogehoge</div>  <!-- データ上は追加されている -->
  </div>
</ons-page>

という形にすることで、中に含めることができます。
これで晴れて正しく表示されるわけですね。