How to pass json data from laravel controller to vue js

i am using vue js on my frontend and laravel for backend side. I have create a form when i can post data on db using axios to pass data on laravel controller. But what i am trying now is to pass data from laravel to vue js. I have done this in one way but i thisk there is another better way. Can some one help with this. My data can pass from laravel controller to vue js but every time i send new data i need to refresh page to see updates

  public function index()
    {
        $posts = Post::orderBy('id', 'DESC')->get();

        return view('Posts.index') ->with([
            "posts" => $posts
        ]);
    }

<div class="container">
            <div class="m-5">
                <form @submit.prevent="postForm()" id="signin" class="form-horizontal validate-form">
                    <div class="form-group">                
                        <input v-model="title" id="title" type="text" class="form-control" name="title" placeholder="Title">        
                    </div>        

                    <div class="form-group">  
                        <textarea v-model="comment" id="comment" type="text" class="form-control" name="comment" placeholder="Comment"> </textarea>
                    </div>          

                    <div class="form-group mb-0">    
                        <input type="submit" value="Submit" class="btn btn-info" />
                    </div>
                </form>
            </div>

            <div class="m-5" v-for="(posts, index) in posts" :key="index">
                <div class="card m-0 col-12">
                    <div class="card-header">
                        {{posts.title}}
                    </div>
                    <div class="card-body">
                        {{posts.comment}}
                    </div>
                    <div class="card-footer">
                        <form @submit.prevent="deletePost(posts.id)" action="" method="POST">
                            <input class="d-block btn btn-danger" type="submit" value="Delete" />
                        </form>
                    </div>
                </div>
            </div>

        </div>

import axios from 'axios'

export default {
    props:['posts'],

    data() {
        return {
            title: '',
            comment: '',
        }
    },
    
    methods: {
        postForm() {
            axios({
                method: 'post',
                url: '/post',
                data: {
                    title: this.title,
                    comment: this.comment,
                }
            }).then(function (response) {
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            });
        },

        deletePost(id) {
            axios({
                method: 'DELETE',
                url: '/post/{post}' +id,
            }).then(function (response) {
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            });
        }
    },

}

// index.blade
//i just set this on `div container`
<post-data :posts="{{$posts}}"></post-data>