axiosでapiから取得したデータを加工しvueに反映させたい

前提・実現したいこと

axiosでapiから取得後、加工したデータをvueに反映させたいです。

バージョン
axios: ^0.20.0
vue: ^2.6.11
vue-axios: ^2.1.5

発生している問題・エラーメッセージ

todoApiからexportしたtodoGetをvueで読み込み、todoGet内のtodosDataをvueのtodosに代入したいです。
しかし、Dataの代入以前にtodoDataをどのようにvue内で読み込めばよいか困っています。

該当のソースコード

js
1import axios from 'axios';
2const todoGet = function () {
3  axios.get(url, header).then((response) => {
4    for (var i = 0; i < response.data.length; i++) {
5      //dataの加工処理と値の再代入
6    }
7    var todosData = response.data;
8    console.log(todosData);
9    //結果は正常
10  });
11};
12export default { todoGet };

vue
1<script>
2import api from "todoApi";
3
4export default {
5  name: "TodoList",
6  data() {
7    return {
8      todos: "",
9    };
10  },
11  mounted() {
12    api.todoGet();
13    console.log(todosData);
14    //結果は"ReferenceError: todosData is not defined"
15  },
16};
17</script>

試したこと

#####vue内にベタ書きする

vue
1<script>
2  name: "TodoList",
3  data() {
4    return {
5      todos: "",
6    };
7  },
8  mounted() {
9    const todoGet = function () {
10      axios.get(url, header).then((response) => {
11        for (var i = 0; i < response.data.length; i++) {
12          //dataの加工処理と値の再代入
13        }
14        var todosData = response.data;
15        console.log(todosData);
16      });
17    };
18    console.log(todosData);
19    //結果は両者とも"todosData is not defined"
20  },
21};
22<script/>

####exportしてみる

js
1import axios from 'axios';
2const todoGet = function () {
3  axios.get(url, header).then((response) => {
4    for (var i = 0; i < response.data.length; i++) {
5      //dataの加工処理と値の再代入
6    }
7    var todosData = response.data;
8    console.log(todosData);
9    //結果は正常
10  });
11};
12export default { todoGet,todosData };