Unable to display image in vue component form storage of Laravel

Hi developers, I am unable to display the image in vue component from the Storage directory of Laravel. Please help me to solve this issue:

images are stored in DB as public/avatar/TSD50oeYXnkrX1nQ38N9zljP1FRdP42yPhJOrEKg.png

if I remove public path and do this <img :src="'../storage/avatar/31deG4gnbO3EwO2s26lnUe0KzJjskFfm8lPIGFeM.jpeg'" width="100">

i can see image diplayed in vue component from storage/public/avatar folder

method to get details of single user

public function user($id){
		return $user = User::find($id);
	}

methods to save image

public function profilePic(Request $request){
		$this->validate($request,[
			'image'=>'required|mimes:jpeg,jpg,png'
		]);
		$image = $request->image->store('public/avatar');
		$authUser = auth()->user()->id;
		$user = User::where('id',$authUser)->update([
			'profilePic'=> $image
		]);
		return redirect()->back();
	}

vue:

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Profile Component</div>

			{{user.profilePic}}
//how can i display image here
 			

<div class="card-body">
                        <form @submit.prevent="updateProfilePic" method="post" enctype="multipart/form-data">
                            <input type="file" name="image" class="form-control"v-on:change="onImageChange">
                            <button type="submit" class="btn btn-primary">Submit</button>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props:['userid'],
        data(){
            return{
                image:'',
                user:[]

            }
        },
        mounted() {
            this.getUser()
            console.log('Component mounted.')
        },
        methods:{
            onImageChange(e){
                console.log(e)
                this.image = e.target.files[0];
                
                },
            updateProfilePic(){
                const config={
                    headers:{
                        "content-type":"multipart/form-data"
                    }
                }
                let formData = new FormData();
                formData.append('image',this.image);
             
                axios.post('/profile-pic',formData,config).then((response)=>{
                    this.image='';
                    this.getUser()
                   
                   

                }).catch((error)=>{
                    console.log(error)
                    this.allerrors = error.response.data.errors
                })
            },
            getUser(){
                axios.get('/user/'+this.userid).then((response)=>{
                    this.user = response.data
                }).catch((error)=>{
                    alert('some error')
                })
            },
        }
    }
</script>