Re-Rendering Vue Component after dynamic insertion - vue.js

Question

I am using dropzone in this example, it accepts a file and when the file is uploaded, I provide a preview template. The preview template then needs to render a new dropzone component "import-widget" in this example from the "import widget"
var Dropzone = require('dropzone')
Dropzone.autoDiscover = false
Dropzone.autoProcessQueue = false
export default {
data(){
return{
collection: false,
}
},
props: {
id: {
type: String,
required: true
},
method: {
type: String,
required: false
},
url: {
type: String,
required: true
},
clickable: {
type: Boolean,
default: true
},
acceptedFileTypes: {
type: String
},
thumbnailHeight: {
type: Number,
default: 200
},
thumbnailWidth: {
type: Number,
default: 200
},
showRemoveLink: {
type: Boolean,
default: true
},
maxFileSizeInMB: {
type: Number,
default: 2
},
maxNumberOfFiles: {
type: Number,
default: 5
},
autoProcessQueue: {
type: Boolean,
default: true
},
useFontAwesome: {
type: Boolean,
default: false
},
useCustomDropzoneOptions: {
type: Boolean,
default: false
},
dropzoneOptions: {
type: Object
}
},
events:{
processQueue: function(data){
this.processQueue();
}
},
methods: {
removeAllFiles: function () {
this.dropzone.removeAllFiles(true)
},
processQueue: function () {
console.log(this.dropzone.getQueuedFiles());
this.dropzone.processQueue();
console.log('Dropzone widget dispatching updateUploadCollection');
this.$dispatch('updateUploadCollection',this.collection);
}
},
computed: {
cloudIcon: function () {
if (this.useFontAwesome) {
return '<i class="fa fa-cloud-upload"></i>'
} else {
return '<i class="material-icons"></i>'
}
},
doneIcon: function () {
if (this.useFontAwesome) {
return '<i class="fa fa-check"></i>'
} else {
return ' <i class="material-icons"></i>'
}
},
errorIcon: function () {
if (this.useFontAwesome) {
return '<i class="fa fa-close"></i>'
} else {
return ' <i class="material-icons">error</i>'
}
}
},
ready () {
console.log('Dropzone Widget Ready');
var element = document.getElementById(this.id)
if (!this.useCustomDropzoneOptions) {
this.dropzone = new Dropzone(element, {
clickable: this.clickable,
thumbnailWidth: this.thumbnailWidth,
thumbnailHeight: this.thumbnailHeight,
maxFiles: this.maxNumberOfFiles,
maxFilesize: this.maxFileSizeInMB,
dictRemoveFile: 'Remove',
addRemoveLinks: false,
acceptedFiles: this.acceptedFileTypes,
autoProcessQueue: this.autoProcessQueue,
dictDefaultMessage: this.cloudIcon +'<br>Click Here To Add Files To Upload',
previewTemplate: '<div class="row dz-preview dz-file-preview"><div class="col-xs-1" data-dz-remove>x</div><div style="word-wrap: break-word;" class="col-xs-2 dz-filename"><span data-dz-name></span></div><div class="col-xs-2 dz-image"><img width="100%" data-dz-thumbnail /></div><div class="col-xs-4"><import-widget id="import-widget2" method="post" url="test/url"></import-widget></div></div>',
previewsContainer: '#previews',
})
} else {
this.dropzone = new Dropzone(element, this.dropzoneOptions)
}
// Handle the dropzone events
var vm = this
this.dropzone.on('addedfile', function (file) {
vm.$forceUpdate();
vm.$emit('vdropzone-fileAdded', file)
})
this.dropzone.on('removedfile', function (file) {
vm.$emit('vdropzone-removedFile', file)
})
this.dropzone.on('success', function (file, response) {
console.log('dropzone success response');
console.log(response);
if (!vm.collection) {
vm.$set('collection', []);
}
vm.collection.push(response);
vm.$emit('vdropzone-success', file, response)
});
this.dropzone.on('error', function (file, error, xhr) {
vm.$emit('vdropzone-error', file, error, xhr)
})
this.dropzone.on('sending', function(file, xhr, formData){
console.log('appending: ' + Laravel.csrfToken);
formData.append("_token", Laravel.csrfToken);
vm.$emit('vdropzone-sending', file, xhr, formData)
})
},
}
<form :method="method" :action="url" class="dropzone" :id="id">
</form>
<div class="row">
<div id="previews" class="col-sm-12">
</div>
</div>
See "previewTemplate" .. in here you can see that I've inserted component. The problem is that the system treats this as html instead of a vue component. What is the best way around this?