Laravel and Vuejs Image Upload System

I have my image Upload Controller like this

public function updateProfile(Request $request)
    {
        $user = auth('api')->user();

        $this->validate($request,[
            'username' => 'required|string|max:255|unique:users,username,'.$user->id,
            'name' => 'max:255',
            'email' => 'required|string|email|max:255|unique:users,email,
            '.$user->id,
            'password' => 'sometimes|required|min:8'
        ]);

        $currentProfilePicture = $user->profilePicture;
         if($request->profilePicture != $currentProfilePicture){

            $name = time().'.' . explode('/', explode(':', substr($request->profilePicture, 0, strpos($request->profilePicture, ';')))[1])[1];

            Image::make($request->profilePicture)->save(public_path('img/profile/').$name);

            $request->merge(['profilePicture' => $name]);

           

            $userPhoto = public_path('img/profile/').$currentProfilePicture;
            if(file_exists($userPhoto)){

                @unlink($userPhoto);
            }

         }
       
        $user->update($request->all());

        return ['Message' => "Success"];
    }

I have my VueJs Form Like This

<form @submit.prevent="updateInfo">
<figure class="thumbnail thumbnail-rounded">
             <img class="main-profile" :src="getprofilepicture()" alt="">
 </figure>
 <div class="btn btn-primary">
           <input class="settings-file-upload" type="file" @change="updateProfilePic" accept="image/*">
            <div class="settings-file-icon">
                    <span class="material-icons">camera_alt</span>
                                                
                      Upload Profile Picture. (Note: Must Be Less Than 2MB)
              </div>
                                            
  </div>
<div class="form-group">
<input type="text" class="form-control" id="inputPassword4" v-model="form.name" @change="optionChange">
</div>

<div class="settings-form">
            <div class="form-group">
               <button class="btn btn-primary">Update Profile</button>
                 </div>
    </div>
</div>

My VueJs Script

<script>
export default {
     name: 'Settings',
    components: {
       //
    },
    data() {
        return{
            form: new Form ({
                id: '',
                username:'',
                email: '',
                password: '',
                name: '',
                bio: '',
                twitter_handle: '',
                facebook_handle: '',
                instagram_handle: '',
                profilePicture: ''
            })
        }
    },
    created(){
        axios.get("profile")
        .then(({ data })=>(this.form.fill(data)));
    },
    methods: {
        getprofilepicture()
        {
              //default avatar pic if there is no photo of user
                let profilePicture = "http://localhost:8000/img/profile/user.png";
                //returns the current path of the
                if (this.form.profilePicture) {
                    if (this.form.profilePicture.indexOf('base64') != -1) {
                        profilePicture = this.form.profilePicture;
                    } else {
                        profilePicture = 'http://localhost:8000/img/profile/' + this.form.profilePicture;
                    }
                    return profilePicture;
                }
                return profilePicture;
        },
        updateInfo(){
            this.$Progress.start();
            this.form.put('profile')
            .then(()=> {
                this.$Progress.finish();
                this.$router.go('/profile')
                
                
            })
            .catch(()=>{
                this.$Progress.fail()
            })
        },
        updateProfilePic(e){
            let file = e.target.files[0];
            //console.log(file);
            let reader = new FileReader();
            if(file['size'] < 2097152){
                reader.onloadend = () => {
                //console.log('RESULT', reader.result)
                this.form.profilePicture = reader.result;
                }
                reader.readAsDataURL(file);
            }else{
               Toast.fire({
                   icon: 'error',
                   title: 'Ooops...',
                   text: 'The file you are trying to upload is more than 2MB',
               })
            }
            
        }
    }
}
</script>

The problem is now that the picture upload works but anytime i want to update the input field with the upload field, the input field changes in the database while the image upload does not change at all. The image upload only works if i did not change the input field and i just update it. Also if i select an image to upload it shows (i.e it changes the image to the new one i want to update) but anytime i enter an input field and i move to enter another input field in the form, the image change back to the old picture.

This is really the problem