Vue３でJSONデータを自分で定義した型のオブジェクトにいれる方法がわからない

実現したいこと

VueでAPIを叩いて返ってきたJSONデータを自分で定義した型のオブジェクトにしたい。

前提

VueとSpringFrameworkをつかって、Vueでaxiosを使ってページを読み込んだ時にローカル間で通信をしています。
JSONデータを自分で定義した型に入れて扱いたいのですが、コンソールで確認すると代入できておらず何が間違っているのかわかりません。

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

コンソールの3行目にundefinedと表示される。1、２行目はどちらも

0
: 
{id: 101, ranking: 1, score: 1000000, name: 'tarou'}
length
: 
1
[[Prototype]]
: 
Array(0)

となっています

Vueのソースコード

TypeScript
1<script setup lang="ts">
2import { onMounted } from "vue";
3import { RouterLink, RouterView } from "vue-router";
4import axios from "axios";
5const url = "http://localhost:8080/ranking";
6type rankingData = {
7  id: number;
8  ranking: number;
9  score: number;
10  name: string;
11};
12
13onMounted((): void => {
14  const response = axios.get(url).then(function (response) {
15    console.log(response.data);
16    const rankingDataJSON = response.data as rankingData;
17    console.log(rankingDataJSON);
18    const elm = rankingDataJSON.id;
19    console.log(elm);
20  });
21});
22</script>

Springのソースコード

package com.example.demo;


import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;
import java.util.List;

@RestController
public class RankingController {
    @CrossOrigin(origins = "http://localhost:5173")
    @GetMapping("ranking")
    public List<RankingData> outputRanking(){
        List<RankingData> rankingDataList = new ArrayList<>();
        RankingData data = new RankingData();
        data.id = 101;
        data.ranking = 1;
        data.name = "tarou";
        data.score = 1000000;
        rankingDataList.add(data);
        return rankingDataList;
    }
}