Неожиданное асинхронное действие в «смонтированных» осях в Vue.js

Question

Как новичок в Vue.js, у меня есть компонент, который должен получать данные профиля с удаленного сервера:

<template>

 <div v-if="token">
      {{profile}}
  </div>

</template>

<script>
import axios from 'axios';

export default {
  name: 'Profile',

  data () {
    return {
          profile: {},
    }

  },

  computed: {
    token () {
      return this.$store.getters.getToken; 
    },

    mounted () {
        return axios
        .get( this.BASE_URL + '/profile')
        .then( res => {
                    this.profile = res.data;
                    console.log('profile is:', res.data);

          })            
    },

  },

}
</script>

Я следовал Использование Axios для использования API от официальногоПоваренная книга, но получаю эти ошибки:

error: Unexpected asynchronous action in "mounted"  

  84 |     mounted () {
> 85 |         return axios
     |                ^

А также

error: Unexpected side effect in "mounted" computed property  
  86 |         .get( this.BASE_URL + '/profile')
  87 |         .then( res => {
> 88 |                     this.profile = res.data;
     |                     ^

Если я пропускаю return из подключенного, я получаю также эту ошибку:

error: Expected to return a value in "mounted" computed property

Получил действительно озадаченный.Благодарим вас за подсказки, чтобы это исправить.

Answer 1

установлен должен быть того же уровня, что и вычисленный

<script>
import axios from 'axios';

export default {
  name: 'Profile',

  data() {
    return {
      profile: {},
    };
  },
  computed: {
    token() {
      return this.$store.getters.getToken;
    },
  },
  mounted() {
    axios.get(this.BASE_URL + '/profile').then(res => {
      this.profile = res.data;
      console.log('profile is:', res.data);
    });
  },
};
</script>