I want to return the headings array from an axios.get function and use it on root level inside my vue component but when I try to return it, it shows:

ReferenceError: headings is not defined

This is the script element from my Vue3 Component:

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

const homePage = ref({
    heading: "",
    content: "",
    image: ""
});

axios.get('/home')
    .then(res => {
        const data = res.data[res.data.length - 1]
        const headings = {
            en: data['heading_(en)'],
            de: data['heading_(de)'],
            ar: data['heading_(ar)'],
        }
        return headings;
    })

console.log(headings);

</script>

Edit:

Thanks to Thomas and huan feng I can do this:

<script setup>
import {reactive} from 'vue';

const state = reactive({
    headings: {},
    content: {},
    image: ""
})

axios.get('/home')
    .then(res => {
        const data = res.data[res.data.length - 1]

        state.headings = {
            en: data['heading_(en)'],
            de: data['heading_(de)'],
            ar: data['heading_(ar)'],
        }

        console.log(state.headings.en)
    })

</script>

This is the most elegant solution because reactive objects provide the cleanest framework when working with arrays. Call it from the vue component like so:

    <h2>{{ state.headings.en }}</h2>

Since axios is asynchronous returning the variable into root level is more difficult and in my case not necessary. I can output it inside then.