laravel - VueJS - マウントされた()内で宣言された割り当てられたthis.propertyにアクセスできません。

Question

axios get を使用してバックエンド laravel から API データを取得し、そのプロパティを使用して、コンポーネントのマウントされたセクション内のチャネルを連結するプロジェクトを行っています。

含まれている axios get を介して api/user を取得しています

{
  "id": 1,
  "name": "admin",
  "email": "admin@company.com",
  "email_verified_at": null,
  "created_at": "2019-08-17 10:06:14",
  "updated_at": "2019-11-27 02:03:30",
  "phone_number": "+12345678911",
  "phone_number_verified": 0,
  "company_id": 1,
  "verification_code": "",
  "signature": "",
  "signature_image": null,
}

axiosを介してlaravelバックエンドからユーザーデータを取得する方法は次のとおりです。

mounted() {
  this.$http
    .get('/api/user')
    .then(response => ( this.user = response.data ))
    .catch(error => console.log(error))
},

次に、 data() セクションで空の配列として宣言されます。

data() {
  return {
    user: [],
  };
},

{{ user.id }} を介してテンプレートの id などのプロパティにアクセスできます。mounted() セクション内でアクセスしようとすると、オブジェクトが返されますが、console.log(this. user.id) をマウントすると、代わりに undefined がスローされます。マウントされたセクション内で this.user.id にアクセスする必要がある理由は、次のように指定された Laravel Echo を介して使用しているチャネルを連結するために使用しているためです。

mounted() {
  this.$http
    .get('/api/user')
    .then(response => ( this.user = response.data ))
    .catch(error => console.log(error))

  this.$echo
    .channel(`new-notification.${this.user.id}`)
    .listen('NewNotification', (data) => {
    // eslint-disable-next-line no-alert
      this.notifications.unshift(data);
    });
},

私はVueにかなり慣れていないので、これで何が間違っているのかわかりません。誰かが私が間違っていることを指摘できたり、それを行うためのより良い方法があれば、それは大きな助けになるでしょう.