vue-factory.js

var VueFactory = {
  components: {},
  registerComponent: function(name, component) {
    this.components[name] = component;
  },
  getComponent: function(name) {
    return this.components[name];
  },
  vue: function(name, options) {
    if (typeof options !== "object") {
      options = {};
    }
    if (!options.el) {
      throw new Error('[VueFactory] options.el cannot be missing');
    }
    if (typeof options.data != "object") {
      options.data = {};
    }
    if ((typeof options.resolve !== "function") ||
        (typeof options.reject !== "function")) {
      console.info('[VueFactory] You can pass options.resolve and options.reject functions in case you want the Vue instance to return a value.');
    }
    options.components = {};
    options.components[name] = this.getComponent(name);
    options.events = {
      resolve: function(value) {
        console.log('this is this', this);
        this.$emit('resolved', value);
        if (typeof options.resolve === "function") {
          options.resolve(value);
        }
      },
      reject: function(value) {
        this.$emit('rejected', value);
        if (typeof options.reject === "function") {
          options.reject(value);
        }
      }
    };
    return new Vue(options);
  }
};

// How register components.
VueFactory.registerComponent('Modal', VueComponents.Modal);


// How to use it from the outside.
$(document).on('click', '#show-modal', function(e) {
  e.preventDefault();
  var $el = $('<div id="modal-app"><modal></modal></div>');
  new Promise(function(resolve, reject) {
    $('body').append($el);
    this.modal = VueFactory.vue('Modal', {
      el: $el.get(0),
      resolve: resolve,
      reject: reject
    });
  }.bind(this)).then(function(answer) {
    $el.remove();
    $('#answer').text(answer);
  }.bind(this));
});