Vue dynamic html form from Django

Question

I have one FormViewin Django and I want to display this form in Modal. Therefore, I create a Vue component and create it as follows:

created: function(){
    let self = this;
    $.get(window.profileUrls.registration, function (data){  
        $('#registerModal').replaceWith(data);       
        self.$forceUpdate();
    });
}

Django returns the HTML with the form and replaces the default empty modal with this HTML. But a forced update does not reinitialize v-model, and other bindings and vue do not update component data.

Is there any way to manually reinitialize a component after a GET request?

Answer 1

https://vuejs.org/v2/guide/components.html#Async-Components

The solution I am currently using is:

Vue.component('async-example', function (resolve, reject) {
  get('backendurl', function (data) {
    // Pass the component definition to the resolve callback
    resolve({
      template: data
    })
  });
})