Vue bind after AJAX partial loads?

I recommend you taking a look at the activate hook here.

From the Doc:

component = {  activate: function (done) {    var self = this    loadDataAsync(function (data) {      self.someData = data      done()    })}

Basically call done() when the data is ready. The component will be then inserted

Here is an example of one way to do what you want, but I believe this is not recommended by the creator of Vue:

parent vue instance declaration:

window.vm = new Vue({...})

This part could be in the success function of your ajax call:

var newContent = $(response.new_content_html).wrap('<div></div>');$('#some-container-for-the-dynamic-content').html(newContent);var newContentInstance = window.vm.$addChild({      el: '#some-container-for-the-dynamic-content',      data: function data() {          return { emptyRecordData: {} };     } });newContentInstance.$mount();newContentInstance.$data.someOtherData = response.some_other_data;

I was able to get this working by changing my Status.js to return a closure:

module.exports = function() { return new Vue({...}) }

And in the script portion of the partial that gets returned via ajax I'm able to create a new instance:

var MaintenanceStatus = window.MaintenanceStatus();...MaintenanceStatus.getStatus(href, data);