Vue.jsで、外部JSで読み込んだJSONを変数に格納したい

Question

Vueの変数listArrに、外部JSで読み込んだJSONの内容を代入したいのですがうまく行きません。
console.logで、rdJsonFile.jsのres.dataを確認してみても正常にJSONとして読み込まれています。
rdJsonFile.jsで読みこんだres.dataの内容を、top.vueのlistArrに反映させるにはどうしたらいいのでしょうか。（rdJsonFile.jsのソースコードはJavaScript、top.vueのソースコード（一部）はVueに記述）

import axios from 'axios'

async function readJson (url) {
  const res = await axios.get(url)
  return res.data
}

export default {
  readJson
}

<script>
import contJson from '../../rdJsonFile.js'

export default {
  name: 'SpTop',
  data () {
    return {
      listArr: []
    }
  },
  created () {
    this.listArr = contJson.readJson('../../static/Speaker/list.json')
    console.log(this.listArr)
  }
}
</script>

　上のように書いてみましたが、listArrの値はオブジェクトになってしまいます

Answer 1

top.vueのcreated:以下を下の様に書き換えて解決できました

  created: async function () {
    this.listArr = await contJson.readJson('../../static/Speaker/list.json')
    console.log(this.listArr)
  }

　Top.vueの側で、関数readJson(url)が終了するのを待つようにしました

Answer 2

オブジェクトを配列に変換させる方法があるので、jsonから獲得した後、変換をしてみてください

ソースコード

const obj = {a: 33,b: 2, c: 34};
// {a: 33,b: 2, c: 34}

Object.entries(obj);
// 変換後[[a, 33], [b, 2], [c, 34]]

参考資料