Javascript TypeError:无法读取属性'_包装纸'；未定义vueJS的定义

我的VueJS应用程序有点问题。我想要的是在加载时将请求发送到服务器，服务器将响应我的用户的“用户名”，并在我的网站上更新它。一切正常，但当我尝试分配返回值时，我的程序停止加载图像，控制台中出现标题错误。来自服务器的值正确-由控制台检查。 以下是我显示用户名的代码：

<span class="iconsNav" style="margin-left: 4px" >{{this.username}}</span>

{{this.username}

这是我的剧本：

<script>
//components
export default {
  methods : {
    login(){
      //function to login
    },
    async getUserData(){
      var token = 'Token '+ VueCookie.get('access_token')
      const response = await axios.get('http://localhost:8000/api/account/data',{
        headers:{
          'Authorization': token
        }
        })

        console.log(response.data.username)
        //when i try execute this line error occurs
        this.username = response.data.username
    }
  },
  data(){
    return {
      username : "User"
    }
},
mounted: function(){
  this.getUserData()
}
}
</script>

//组成部分
导出默认值{
方法：{
登录（）{
//用于登录的函数
},
异步getUserData（）{
var-token='token'+VueCookie.get（'access\u-token'）
const response=等待axios.get（'http://localhost:8000/api/account/data',{
标题：{
“授权”：令牌
}
})
console.log（response.data.username）
//当我尝试执行该行时，会发生错误
this.username=response.data.username
}
},
数据（）{
返回{
用户名：“用户”
}
},
挂载：函数（）{
这个文件名为getUserData（）
}
}

{{username}

---

要在vue中获取数据，您不需要

此

会出现什么错误？