Update Global Component data - laravel

Question

I am updating this with my new code. I need to get a reference to the "allImages" property of the data object within the dropzones "onSuccess" method. Is there any way to do it.
<template>
<div class="container">
<div class="row">
<form action="/user/album_images" id="dropzone" class="dropzone" method="post">
<input type="hidden" id="album_id" name="album_id" :value=image.id>
</form>
</div>
<div class="row">
<div class="col-md-3" v-for="image in albumImages">
<img src="https://mysite.nyc3.digitaloceanspaces.com/users/62MY43og3ZNCLU4y53iwoqdEfUZUWFEfDM2f9krn.png" class="img-responsive" style="width: 120px; height: 90px;">
</div>
</div>
</div>
</template>
<script>
export default {
props: ['theImage','theAlbumImages'],
data() {
return {
image: this.theImage,
albumImages: this.theAlbumImages
}
},
methods: {
},
}
let csrfToken = document.querySelectorAll('meta[name=csrf-token]')[0].getAttributeNode('content').value
Dropzone.options.dropzone = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 10, // MB
acceptedFiles: "image/*",
addRemoveLinks: true,
init: function() {
this.on("success", function(file,albumImage) {
// I want to get a reference to the vue instances "albumImages" property
});
},
headers: {
'x-csrf-token': csrfToken
}
};
</script>

Answer 1

You can try to use vue-script2
You will be able to access vue variables like in template.
<script2>
....
this.on("success", function(file,albumImage) {
var x = {{albumImages}}
});
....
</script2>
Although it might not work. Other option would be to try load function in mounted. E.g.
import VS2 from 'vue-script2'
export default {
name: 'freshchat',
mounted() {
VS2.load('yourdropzonejs script').then(() => {
var vm = this
.....
this.on("success", function(file,albumImage) {
vm.albumImages
});
})
}
}