Trying to upload an image using laravel and vuejs

Question

I have my upload html form like this

<div class="album_single_data settings_data">
                                <div class="album_single_img">
                                    <figure class="thumbnail thumbnail-rounded">
                                        <img class="main-profile" :src="getprofilepicture()" alt="">
                                    </figure>
                                </div>
                                <div class="album_single_text">
                                    <div class="album_btn profile_image">
                                        <div class="btn btn-primary">
                                            <input class="settings-file-upload" type="file" @change="updateProfilePic" ref="file" 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>
                                </div>

                            </div>
<div class="form-group">
                                        <button @click="updateInfo" class="btn btn-primary">Update Profile</button>
                                    </div>

This is the vuejs code that handles the form submit/upload method which means anytime i click on the upload button the image uploads. but the problem is that it does not submit

export default {
     name: 'Settings',
    components: {
       //
    },
    data() {
        return{
            form: new Form ({
                id: '',
                username:'',
                email: '',
                password: '',
                name: '',
                bio: '',
                twitter_handle: '',
                facebook_handle: '',
                instagram_handle: '',
                backgroundPicture: ''
            }),
            pic: ({
                profilePicture: '',
            })
        }
    },
    created(){
        axios.get("profile")
        .then(({ data })=>(this.form.fill(data)))
        .then(()=>(this.pic.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.pic.profilePicture) {
                    if (this.pic.profilePicture.indexOf('base64') != -1) {
                        profilePicture = this.pic.profilePicture;
                    } else {
                        profilePicture = 'http://localhost:8000/img/profile/' + this.pic.profilePicture;
                    }
                    return profilePicture;
                }
                return profilePicture;
            //let profilePicture = (this.form.profilePicture.length > 200) ? this.form.profilePicture : "http://localhost:8000/img/profile/"+ this.form.profilePicture ;
            //return profilePicture;
        },
        // getBackgroundPic(){
        //     let backgroundPicture = "http://localhost:8000/img/profile/background.jpg";

        //     if(this.form.backgroundPicture){
        //         if(this.form.backgroundPicture.indexOf('base64') != -1){
        //         backgroundPicture = this.form.backgroundPicture;
        //     }else {
        //         backgroundPicture = 'http://localhost:8000/img/profile/'+ this.form.backgroundPicture;
        //     }
        //     return backgroundPicture;
        //     }
        //     return backgroundPicture;
        // },
        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.pic.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',
               })
            }

        },
        updateBackgroundPic(e){
            let file = e.target.files[0];
            //console.log(file);
            let reader = new FileReader();
            if(file['size'] < 2097152){
                reader.onloadend = () => {
                    this.form.backgroundPicture = 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>

Anytime i click on the submit button i have this error message: "Undefined offset: 1", exception: "ErrorException",…} exception: "ErrorException"

and i really do not know the cause of this error.

Below is the PHP Code that handles the server side part of the upload

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());
}