axiosによるAPI呼び出しの外部jsファイル化

Question

Vue.jsからAPIを呼び出そうとしています。
axiosによるAPI呼び出し部分を外部関数化し、
コンポーネントからは呼び出すだけでjsonが帰ってくるようにしたいです

下記のように定義すると、jsファイル内ではjsonを取得できていますが、
Vueで取得したものを表示しようとすると"Object Promise"となります。
非同期処理等が関連しているのでしょうが、jsonデータを受け取るにはどうすればよいでしょうか。

JSファイル

import axios from "axios"

export default {
    getFeed: async function(feedUrl){
        let info = null
        let url = feedUrl;
        await axios
          .get(url, {
            headers: { Authorization: "Token " + "token" }
          })
          .then(response => (info = response.data))
          .catch(console.log("error occured in API"))
          console.log(info) //ここではjsonデータが表示される。
    }
}

Vueファイル

<template>
    {{ info }}
</template>

<script>
import getApi from "getApi"

export default {
  data: () => ({
    info: ""
  }),
  mounted() {
    getFeed("APIのURL")
  }
};
</script>

<style>
</style>

Answer 1

thenの中でcallback関数を呼び出し、その中で値を代入するとうまくできました。

import axios from "axios"

export default {
    getFeed: async function(url,callback){
        let info = null
        await axios
          .get(url, {
            headers: { Authorization: "Token " + "token" }
          })
          .then(response => (callback(response)))
          .catch(console.log("error occured in API"))
          console.log(info) //ここではjsonデータが表示される。
    }
}

<template>
    {{ info }}
</template>

<script>
import getApi from "getApi"

export default {
  data: () => ({
    info: ""
  }),
  methods: {
    setInfo: function(info) {
      this.info = info;
    }
  },
  mounted() {
    getFeed("APIのURL",this.setInfo)
  }
};
</script>

<style>
</style>