[Vue.js] APIで取得し、dataに格納したものを'this.'で取得できない

Question

#起こっていること
axiosでオブジェクトを取得し、dataに定義したsu_companyに詰めているものの、
this.su_companyで取得することができません。

#ソース

<template>
  <div>
    <router-view :su_company.sync="su_company" :capital_units.sync="capital_units"></router-view>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        su_company: {},
        capital_units: {
          us_dollar: 'USドル',
          yen: '円',
          yuan: '元'
        }
      }
    },
    mounted() {
      this.fetchSuCompany();
      console.log(this)
      console.log(this.su_company)
      console.log(this.capital_units)

    },
    methods: {
      fetchSuCompany: function() {
      this.$auth.api.get(`su_companies/${this.$route.params.id}/edit`)
      .then(response => (this.su_company = response.data));
      }
    }
  }

</script>

#APIで取得したJSON

{"company_name":"優良企業",
"company_hp":"https://hogehoge.com",
"establishment_year":2019,
"establishment_month":11,
"establishment_date":1,
"representative":"大倉大臣",
"business_description":"未来的人工衛星の製造",
"capital":2000000,"capital_unit":"yen","address":"ほげほげ県",
"image_url":null,
"user_attributes":{
  "email":"[e-mail]",
  "last_name":"太郎",
  "first_name":"田中",
  "tel":null}}

#ブラウザで確認したこと
console.log(this)
console.log(this.su_company)
console.log(this.capital_unit)
を試した結果がこちらの画像です。
まずは(this)
![]
VueComponent配下、そしてdataの中にsu_companyのオブジェクトががありました。

次に残りの二つ

capital_unitはとれているものの、su_companyはとれていません。

そしてvue-devtoolsをみると、、、

とれているのです。。

どうにかthis.su_companyでオブジェクトの情報を取得したいと思っています。
宜しくお願い致します。

Answer 1

.then(response => (this.su_company = response.data));の書き方に気になる点があります。
mountedとfetchSuCompanyメソッドを下記のように書き換えて動作確認をお願いします。

mounted() {
  console.log('call mounted')
  this.fetchSuCompany()
  console.log(this.su_company)
  console.log(this.capital_units)

},
methods: {
  fetchSuCompany() {
    console.log('call fetchSuCompany')
    this.$auth.api
      .get(`su_companies/${this.$route.params.id}/edit`)
      .then((response) => {
        console.log('response', response)
        this.su_company = response.data.su_company
      })
      .catch((error) => {
        console.log('error', error)
      })
  }
}

Comments

[tenten11055]

ご回答ありがとうございます。
試した結果ですが、console.log(response)の中身にsu_companyの情報はあったものの、
console.log(this.su_company)はundefindになっており、dev-toolsの方にもありませんでした。

今回この質問をさせていただいたのは、画面遷移時に画面が真っ白になってしまい、
console.log(this.su_company)で結果がとれなかったためこちらが原因だと思ったからです。
しかし別ファイルのソースに余計なアンダーバーが入っており、それを削除した結果思うような動作となりました。

タイトルの方向性とは少し違いますが、一応現時点やりたいことはできたので解決と致します。
console.log(this.su_company)でwebコンソールで表示できないことについては引き続き自分の方で追いたいと思います。
迅速にコメントをくださり、学ぶこともありましたのでベストアンサーにさせていただきます。
ありがとうございました。