How to get stored path of uploaded image in Vue / October - vue.js

Question

I have an app that uses October CMS to store images in a database. When I add the image in October, I use the following method:
Which gives me the image_path in October:
public $attachOne = [
'image' => ['System\Models\File']
];
public function getImagePathAttribute(){
return $this->image->path;
}
http://localhost/bit703/module6/storage/app/uploads/public/60b/6cb/8d3/60b6cb8d39915448328696.jpg
The problem I'm having is that when I upload my image from Vue, it's storing it without the path of where the image is being stored, causing errors in the October backend.
Is there a way to find that image path and add it to my request in Vue? My Vue code looks as follows:
<script>
import axios from 'axios';
export default {
data() {
return {
apiRequest: new this.$request({
name: '',
description: '',
tags: '',
filter: '',
file: '',
response: '',
image_path: '',
}),
errorMessage: '',
successMessage: '',
submitted: false,
};
},
methods: {
onSubmit() {
const bodyFormData = new FormData();
bodyFormData.append('name', 'iamge1');
bodyFormData.append('description', 'An image');
bodyFormData.append('tags', 'Winter');
bodyFormData.append('filter', '1977');
bodyFormData.append('user_id', 2);
bodyFormData.append('file', this.file);
bodyFormData.append('image_path', '???');
this.onFileChange();
axios({
method: 'post',
url: 'http://localhost/bit703/module6/api/v1/images',
data: bodyFormData,
headers: { 'Content-Type': 'multipart/form-data' },
})
.then((response) => {
this.resposne = response;
});
},
onFileChange(e) {
const image = e.target.files[0];
this.file = image;
},
},
};
</script>