Vue file upload + json and laravel validation

Hi!

I have a vue component with inputs (text, textarea, select-multiple and file upload). I use Axios to POST to an endpoint in Laravel.

First, is there a better/simpler way to do this than what I am trying?!!! So to say is there a simpler way to handle file upload in vue. Before introducing the file upload part of the component it was easy to handle the axios POST and I did not need to use formData.append

Otherwise, this is what I try to do.

VUE.

data: function() {
        return {
            form: new Form({
                title: "",
                description: "",
                periods: [
                    {
                        start: "",
                        end: "",
                        service_grade: "",
                        months_fulltime: ""
                    }
                ],
                goalsfield: [],
                subgoalsfield: [],
                servicediploma: ''
            }),
        };
    },

 methods: {
    
       handleFileUpload(){
             this.form.servicediploma = this.$refs.servicediploma.files[0];
      },
        submitFile(){
     
            let formData = new FormData();
            formData.append('servicediploma', this.form.servicediploma);
            formData.append('title', this.form.title);
            formData.append('description', this.form.description);
            formData.append('periods', JSON.stringify(this.form.periods));
            formData.append('goalsfield', JSON.stringify(this.form.goalsfield));
            formData.append('subgoalsfield', JSON.stringify(this.form.subgoalsfield));
         
       
            axios.post( '/services',
                formData,
                {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
              }
            ).then(function(){
          console.log('SUCCESS!!');
        })
        .catch(function(){
          console.log('FAILURE!!');
        });
      },
    }

In this way I manage to get all the "data" to the controller. dd($request->all()); in controller

array:6 [
  "title" => "Titleinput"
  "description" => "Description input"
  "periods" => "undefined"
  "goalsfield" => "[{"id":1,"goal":"a1","type":"goal","soc_guideline":"2015","created_at":"2020-05-01T13:01:45.000000Z","updated_at":"2020-05-01T13:01:45.000000Z"},{"id":2,"goal":"a2","type":"goal","soc_guideline":"2015","created_at":"2020-05-01T13:01:45.000000Z","updated_at":"2020-05-01T13:01:45.000000Z"}]"
  "subgoalsfield" => "[{"id":39,"goal":"c3","type":"subgoal","soc_guideline":"2015","created_at":"2020-05-01T13:01:45.000000Z","updated_at":"2020-05-01T13:01:45.000000Z"},{"id":29,"goal":"a4","type":"subgoal","soc_guideline":"2015","created_at":"2020-05-01T13:01:45.000000Z","updated_at":"2020-05-01T13:01:45.000000Z"}]"
  "servicediploma" => Illuminate\Http\UploadedFile {#473
    -test: false
    -originalName: "test.png"
    -mimeType: "image/png"
    -error: 0
    #hashName: null
    path: "/private/var/tmp"
    filename: "phpWVihP5"
    basename: "phpWVihP5"
    pathname: "/private/var/tmp/phpWVihP5"
    extension: ""
    realPath: "/private/var/tmp/phpWVihP5"
    aTime: 2020-05-15 13:39:50
    mTime: 2020-05-15 13:39:50
    cTime: 2020-05-15 13:39:50
    inode: 8612913150
    size: 520054
    perms: 0100600
    owner: 501
    group: 0
    type: "file"
    writable: true
    readable: true
    executable: false
    file: true
    dir: false
    link: false
  }
]

However, I get problem with validation for the objects/arrays I used JSON.stringify in vue. How can I use json_decode before using validation?