Issues showing the loaded API data using axios in Laravel 8 using Vue.js

Question

I have a Laravel 8 app running with Vue.js. Witch I'm trying to load some data to my project.

I can get the data (also tested when console logging), but when I'm assigning the posts variable, the variable woun't show the data. I see from most example this should work out of the box.

What am I missing here?

<template>
        {{posts}}
</template>

<script>
export default {
    data(){
        return {
            posts: [],
        }
    },
    mounted() {
        this.loadPosts();
    },
    methods:{
        loadPosts: function(){
           axios.get("https://jsonplaceholder.typicode.com/todos")
            .then(response => {
                this.posts = response.data;
            })
            .catch(error => {
                console.log(error);
            });
        }
    }
}
</script>

question from:https://stackoverflow.com/questions/65875111/issues-showing-the-loaded-api-data-using-axios-in-laravel-8-using-vue-js

Answer 1

I think you should put {{posts}} inside a root div element:

<template>
    <div>{{posts}}</div>
</template>