I try to show detail of my posts by slugs but data won't render. i just get my navbar and white page,

Code

controller

public function single($slug)
    {
        $post = Post::where('slug', $slug)->first();
        return response()->json([
            "post" => $post
        ], 200);
    }

single.vue where i show my single post data

<template>
    <div class="post-view" v-if="post">
        <div class="user-img">
            <img src="...." alt="">
        </div>
        <div class="post-info">
            <table class="table">
                <tr>
                    <th>ID</th>
                    <td>{{ post.id }}</td>
                </tr>
                <tr>
                    <th>Title</th>
                    <td>{{ post.title }}</td>
                </tr>
                <tr>
                    <th>Body</th>
                    <td>{{ post.body }}</td>
                </tr>
            </table>
            <router-link to="/blog">Back to all post</router-link>
        </div>
    </div>
</template>

<script>
    export default {
        created() {
            if (this.posts.length) {
                this.project = this.posts.find((post) => post.slug == this.$route.params.slug);
            } else {
                axios.get(`/api/posts/${this.$route.params.slug}`)
                    .then((response) => {
                        this.post = response.data.post
                    });
            }
        },
        data() {
            return {
                post: null
            };
        },
        computed: {
            currentUser() {
                return this.$store.getters.currentUser;
            },
            posts() {
                return this.$store.getters.posts;
            }
        }
    }
</script>

vuex store.js

state: {
        posts: []
    },
getters: {
        posts(state) {
            return state.posts;
        }
    },
mutations: {
        updatePosts(state, payload) {
            state.posts = payload;
        }
    },
actions: {
        getPosts(context) {
            axios.get('/api/posts')
            .then((response) => {
                context.commit('updatePosts', response.data.posts);
            })
        }
    }

Question

1. Why I can't get my post data? is there any mistake in my code?

................................................................................................................................................................................