vue.js dataにデータが入っているのに、マスタッシュで表示ができない

Question

###発生している問題・エラーメッセージ

dataにデータが入っているのに、
[Vue warn]: Error in render: "TypeError: Cannot read property '○○' of undefined"
というエラーが出ます。

###該当のソースコード

  new Vue ({
    el:'#app',
    data: {
      termAllCount : 3,
      shohinsArray: null,
      dataGetEnd:false
    },
    async created(){
      this.shohinsArray = await this.query();
      this.dataGetEnd = true
    },
    methods: {
      async query(){
        this.dataGetEnd = false
        let shohinsArr = []
        const termArr = [8,9,10]
        const createdata = () => {
          for(let i = 0; i<this.termAllCount; i++){
            const thisterm = termArr[i]
            const resturlBase = inputResturl.value;
            const resturl = resturlBase + '/○○/' + '?term=' + thisterm
            axios.get(resturl)
            .then((response) => {
              let a = {
                item:response.data.item
              }
              shohinsArr[i] = a
            })
          }
          return shohinsArr
        }
        shohinsArr = await createdata()
        return shohinsArr
      },
    },
  })

      <div v-if="dataGetEnd">
        <div>{{shohinsArray[0].item.○○}}</div>
      </div>

###試したこと

Vue.js devtoolsで確認すると、リロードしたときにdataが入ったり入っていなかったりします。
async,awaitでshohinsArrayが入ってからdataGetEndをtrueにし、v-ifで表示させているはずなのですが、取得できていません。

getはうまくいっていることが確認できています。
asyncの書き方がよくないのかもしれませんが、どこが悪いのかわからず、教えていただきたいです。
何卒よろしくお願いいたします。

Answer 1

async内では非同期処理をしたいときにawaitを使ってそれを行います

new Vue({
    data: {
        shohinsArray: [],
        termArr: [8, 9, 10],
    },
    methods: {
        async query() {
            for await (const thisterm of this.termArr) {
                const resturl = `${inputResturl.value}/○○/?term=${thisterm}`;
                axios.get(resturl).then((response) => {
                    this.shohinsArr.push({
                        item: response.data.item
                    });
                });
            }
            return this.shohinsArr;
        }
    }
})

推奨されませんが簡単にするために await for-ofを使いました

Nuxtと勘違いして回答したので編集しました

Comments

[popc]

ご回答いただきありがとうございます。
おっしゃる通りasync-dataを使えば解決しそうですね。
…ただ、今回、WordPressを基本にして一部Rest APIでデータを取得するプロジェクトで進んでいること、また私自身がNuxt.jsに詳しくなく、組み合わせて使えるレベルにないことから、Nuxt.jsを使わない方向で実装できればと考えております。(もし方法がなければ、無いという方向でまた実装方法を考える所存です。)

[mouse_484]

あ、申し訳ありません

VueをNuxtと勘違いしていました

[popc]

将来的にNuxt.jsも勉強していきたいと思っていますので、参考にさせていただきます。ありがとうございました。

[mouse_484]

Vueで実行できるだろうコードに編集させてもらいました

できなかったらすいません

[popc]

ありがとうございます。
いただいたコードを確認しまして、return前にawaitしないといけないということがわかりましたので、それを踏まえて書き直したところ、うまくいきました！
非同期処理の理解が足りていなかったようです。ありがとうございました。