Higher Order Components (HOC) in Vue.JS

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.js"></script>
<div id="app">
  <!-- render the passed in value: -->
  <some-component value='passed in value'></some-component>
  <br />
  <!-- render the default value: -->
  <some-component></some-component>
</div>

JavaScript

function createComponentWithDefaultData(Component, defaultData = {}) {
  const allowedTypes = ['class', 'style', 'attrs', 'props', 'domProps'];
  return Vue.extend({
    functional: true,
    render: function(createElement, context) {
      const newData = allowedTypes.reduce(function(data, type) {
        if (!(type in data) && !(type in defaultData)) {
          return data;
        }
        data[type] = Object.assign({}, defaultData[type] || {}, data[type] || {});
        return data;
      }, Object.assign({}, context.data));

      return createElement(Component, newData, context.children);
    }
  });
}

const SomeComponent = Vue.extend({
  template: `<span><strong>input value:</strong> {{value}}</span>`,
  props: ['value']
});

const SomeComponentWithDefaults = createComponentWithDefaultData(SomeComponent, {
  attrs: {
    value: 'fallback'
  }
});

const vm = new Vue({
  el: '#app',
  components: {
    'some-component': SomeComponentWithDefaults
  }
});