upload image via vue in laravel project

Hi, How i can add image with vue axios...

check code and suggest me changes.....

<template>
  <div>
    <div class="modal fade" id="studentmodal" tabindex="-1" role="dialog">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle">Add New Student</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <form action="#" method="post">
              <div class="form-group">
                <label for="name">Name</label>
                <input type="text" name="name" class="form-control" v-model="student.name" />
              </div>
              <div class="form-group">
                <label for="email">Email</label>
                <input type="email" name="email" class="form-control" v-model="student.email" />
              </div>
              <div class="form-group" v-if="newFormType==1">
                <label for="password">Password</label>
                <input type="text" name="password" class="form-control" v-model="student.password" />
              </div>
              <div class="form-group">
                <label for="gender">Gender</label>
                <select class="form-control" name="gender" id="gender" v-model="student.gender">
                  <option value="male">Male</option>
                  <option value="female">Female</option>
                  <option value="other">Other</option>
                </select>
              </div>
              <div class="form-group">
                <label for="gender">Class</label>
                <select
                  class="form-control"
                  name="gender"
                  id="gender"
                  v-model="student.grade_id"
                  @change="fetchSection(student.grade_id)"
                >
                  <option v-for="grade in grades" :value="grade.id">{{grade.name}}</option>
                </select>
              </div>
              <div class="form-group">
                <label for="gender">Section</label>
                <select class="form-control" name="gender" id="gender" v-model="student.section_id">
                  <option v-for="section in sections" :value="section.id">{{section.name}}</option>
                </select>
              </div>
              <div class="form-group">
                <label for="phone">Roll No</label>
                <input type="text" name="phone" class="form-control" v-model="student.roll_no" />
              </div>
              <div class="form-group">
                <label for="phone">Phone</label>
                <input type="text" name="phone" class="form-control" v-model="student.phone" />
              </div>
              <div class="form-group">
                <label for="dob">DOB</label>
                <input type="date" name="dob" class="form-control" v-model="student.dob" />
              </div>
              <div class="form-group">
                <label for="c_add">Current Address</label>
                <input type="text" name="c_add" class="form-control" v-model="student.c_add" />
              </div>
              <div class="form-group">
                <label for="p_add">Permanent Address</label>
                <input type="text" name="p_add" class="form-control" v-model="student.p_add" />
              </div>
              <div class="form-group">
                <label for="profile_picture">Profile Picture</label>
                <div v-if="!student.profile_picture">
                  <input type="file" @change="onFileChange" />
                </div>
                <div v-else>
                  <img :src="student.profile_picture" />
                  <button @click="removeImage">Remove image</button>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-dismiss="modal"
              @click="onClose()"
            >Close</button>
            <button
              type="button"
              class="btn btn-primary"
              data-dismiss="modal"
              @click="createStudent"
            >{{button_text}}</button>
          </div>
        </div>
      </div>
    </div>
    <delete-modal v-bind:deleteItem="deleteItem"></delete-modal>

    <div class="row">
      <div class="col-md-12">
        <button
          class="btn btn-primary btn-rounded"
          data-toggle="modal"
          data-target="#studentmodal"
        >Add New Student</button>
        <h1>Students</h1>
        <div class="table-responsive">
          <table class="table table-borderd">
            <tr>
              <th>Name</th>
              <th>Phone</th>
              <th>Actions</th>
            </tr>
            <tr v-if="lists.length === 0">
              <td colspan="3">No Students added yet</td>
            </tr>
            <tr v-for="list in lists">
              <td>{{list.user.name}}</td>
              <td>{{list.phone}}</td>
              <td>
                <button
                  class="btn btn-warning btn-sm btn-rounded"
                  data-target="#studentmodal"
                  data-toggle="modal"
                  @click="editTeacher(list)"
                >Edit</button>
                <button
                  class="btn btn-danger btn-sm btn-rounded"
                  data-target="#deleteModal"
                  data-toggle="modal"
                  @click="wantToDelete(list.id)"
                >Delete</button>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      grades: [],
      lists: [],
      sections: [],
      student: {
        id: 0,
        name: "",
        email: "",
        password: "",
        profile_picture: "",
        grade_id: "",
        section_id: "",
        roll_no: "",
        gender: "",
        phone: "",
        dob: "",
        c_add: "",
        p_add: ""
      },
      newFormType: 1,
      tempID: 0,
      button_text: "Create",
      config: { headers: { "Content-Type": "multipart/form-data" } }
    };
  },
  created() {
    this.fetchData();
    this.fetchGrades();
  },
  methods: {
    removeImage(e) {
      this.image = "";
    },
    onFileChange(e) {
      var files = e.target.files || e.dataTransfer.files;
      if (!files.length) return;
      this.createImage(files[0]);
    },
    createImage(file) {
      var image = new Image();
      var reader = new FileReader();
      var vm = this;

      reader.onload = e => {
        vm.image = e.target.result;
      };
      reader.readAsDataURL(file);
    },
    fetchData() {
      axios.get("/student/fetch").then(res => {
        this.lists = res.data;
      });
    },
    fetchGrades() {
      axios.get("/grades/fetch").then(res => {
        this.grades = res.data;
      });
    },
    fetchSection(grade_id) {
      axios
        .get("/student/fetch-grade-section/" + this.student.grade_id)
        .then(res => {
          this.sections = res.data;
        });
    },
    createStudent() {
      if (this.newFormType) {
        var method = axios.post;
        var url = "student";
      } else {
        var url = "student/" + this.student.id;
        var method = axios.put;
      }
      method(url, this.student, this.config).then(res => {
        console.log(res.data);
        this.fetchData();
      });
    },
    editStudent(student) {
      this.button_text = "Update";
    },
    wantToDelete(id) {
      this.tempID = id;
    },
    deleteItem() {
      axios.delete("/student/" + this.tempID).then(this.fetchData());
    },
    onClose() {
      this.newFormType = 1;
      this.button_text = "Create";
    }
  }
};
</script>