修正：vueでaxiosで取得した結果がv-forに反映されない

Question

環境
javascriptフレームワーク：vue
クロスプラットフォーム：onsen ui

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

import JoinCategory from '../Category/components/JoinCategory'
import MenuPage from './MenuPage'
import CategoryIndex from '../Category/Index'
export default {
  name: 'home',
  props: ['pageStack'],
  data () {
    return {
      title: 'title',
      CategoryIndexPage: CategoryIndex,
      JoinCategoryPage: JoinCategory,
      allCategories: [
        {
          id: 0,
          image: 'block.jpg',
          title: 'hogehoge'
        }
      ]
    }
  },
  created: function () {
    this.allCategories.push({ id: 10, title: 'hoge', image: 'block.jpg' })
    const self = this
    var listSet = []
    this.axios
    .get(process.env.BASE_URL + 'all_category')
    .then(function (res) {
      listSet = res.data
      self.categoryListUpdate(listSet)
    })
  },
  methods: {
    categoryListUpdate (listSet) {
      for (var i = 0; i < listSet.length; i++) {
        var items = listSet[i]
        this.allCategories.push({ id: items.id, title: items.title, image: items.image })
      }
      console.log(this.allCategories)
    }
  }

上記のようなデータがあったとします。
やりたいこととしては、axiosで取得したデータをv-for回して結果に表示することです。

まず、挙動を確認すると、created直下のpushはビューにちゃんと反映されていることは確認しました。
一方、axiosで取得したデータはビューに反映されていませんでした。
ただ、methodsにあるconsole.logにはちゃんと表示されていました。

おそらくレンダリングが向こうになっている可能性があると思い、createdをmountedに変えてみたら、今度は一行目のpush(idが１０のもの）もビューに反映されていませんでした。

マウントしたあと、pushでビューに結果を更新するために必要な作業、また足りていない部分は何になるでしょうか？

長くなりましたが、もしわかりましたらご教授お願いします。

追記：コンポーネント側からconsole.logしてみたら、ちゃんとaxiosのデータが渡っていることは確認できました。

    <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>

categoryAllを追加

  mounted: function () {
    console.log(this.categoryAll)
  }

categoryAll内でサーバーのデータを表示されていることを確認
ただ、画面の更新（だけ）がされていない状態です…]

追記：別プロジェクトで、nuxtで実験してみたところ、うまく行きました！
ただ、onsen uiの方は相変わらずうまく行っていないです…

Answer 1

いろんな方に質問したり調べてみたところ、どうやらonsen ui側のバグの可能性が高かったため、現在issueしています。回答してくださった方、本当にありがとうございますm(_ _)m

Answer 2

Vueはそこまで詳しくないのですが、
一度このような書き方に変えてもらってもいいですか？

methods: {
    categoryListUpdate (listSet) {
        var allCategories = [];
        for (var i = 0; i < listSet.length; i++) {
            var items = listSet[i]
            allCategories.push({ id: items.id, title: items.title, image: items.image })
        }
        this.allCategories = allCategories;
    }
}

this.allCategoriesは配列（オブジェクト）なのでその中身の変更をVueが検知出来てないのではないかと思います。

あとはこんなやり方とかでしょうか。
https://qiita.com/Keitaro/items/8e3f8448d1a0fe281648

Comments

[garchomp]

現在watchで監視ししていますが、dataオブジェクトは正常に変更されているみたいです。

ただ、dataは変更されているにもかかわらず、更新されないのでmvvmに実質なっていない形になりますね…????

他の原因もありそうなので探ってみます（ちなみに現在onsen uiを使って開発しています

[keisukeh]

data自体の変更はされていると思うのですが、変更されたかどうかが検知がVueで出来ないのではないでしょうか？

[garchomp]

おそらくそれかなと思ってcomponentからpropsをconsole.logしてみましたが、データ自体はコンポーネントに来ているみたいです。

なので、おそらく検知できていない可能性があると思います…

[keisukeh]

変更を検知させるためにはallCategoriesの中のプロパティを変えても検知出来ないので
allCategories自体の参照先をまるっと変更させる必要があります。
この部分です。
this.allCategories = allCategories;

[keisukeh]

やってみてうまくいかないようなら categoryListUpdate 内で
this.allCategories = [{ id: 11, title: 'huge', image: 'block.jpg' }];
これも試してみてください

[garchomp]

うまく行かないですね…
ただ、createdで
this.allCategories.push({ id: 12, title: 'huge', image: 'block.jpg' })
というふうにやり、categoryListUpdateで
this.allCategories = allCategories
を無効にすると、id12は表示されました。
ただし、categoryListUpdateのコメントを外すと、今度は１軒も表示されなくなります。
categoryListUpdate内のthis.allCategories = allCategoriesの書き方に問題があることまではわかりました。

また、category(ry で
this.allCategories.push({ id: 12, title: 'huge', image: 'block.jpg' })
をしたらうまく行かず
this.allCategories = [{ id: 11, title: 'huge', image: 'block.jpg' }]
を試してもうまく行きませんでした

[keisukeh]

APIから取ってきたデータの1番目って
{
id: 0,
image: 'block.jpg',
title: 'hogehoge'
}
これと同じですか？

[keisukeh]

createdで入れた値が反映されるのは初期マウント前なので初回マウントするときにその値を見るというのはわかるのですが。

[garchomp]

{
id: 1,
image: 'block.jpg',
title: 'hogehoge'
}
idはコレの連番です