vue 3 & axios: не понимаю

<script setup>
    import { ref } from 'vue'
    import axios from "axios";

//Вариант 1

    let itemlist = [];

    axios.get('../../public/data.json')
        .then(r => { this.itemlist = r.data; })
        .catch(error => { console.log(error.data) });

// Вариант 2

    let itemlist = axios.get('../../public/data.json')
        .then(r => { return r.data })
        .catch(error => { console.log(error.data) });

    function seedata() {
        console.log('Из кнопки');
        console.log(itemlist);
    }
</script>

<template>
    <button @click="seedata">Click on for view data</button>
</template>

json:

[{"name":"Filya","weigth":3},{"name":"Barbariska","weigth":2},{"name":"Messy","weigth":5}]

В первом варианте получаю пустой массив:

HelloWorld.vue:42 Из кнопки HelloWorld.vue: 43 []length:> 0 [[Prototype]]: Array(0)

Во втором:

HelloWorld.vue:42 Из кнопки HelloWorld.vue:43 Promise {: Array(3)} [[Prototype]]: Promise [[PromiseState]]: "fulfilled" [[PromiseResult]]: Array(3)

А надо получить массив. Что я делаю не так?