Vue.js higher-order component (HOC)

vue-hoc.js

import Vue from 'vue';

// Test : https://jsfiddle.net/brend/xe75nmdz/
// Note: https://github.com/vuejs/vue/issues/6201

const HOC = component => {
  const inheritedProps = (typeof component === 'function' ? component.options.props : component.props) || [];
  return Vue.component('HOC', {
    mounted() {},
    data() {
      return {};
    },
    props: { ...inheritedProps, value: null },
    render(createElement) {
      // const parentCreateElement = this.$parent.$createElement;
      const slots = this.$slots;
      const scopedSlots = {};
      Object.keys(slots).map(key => (scopedSlots[key] = () => slots[key]));

      return createElement(
        component,
        {
          attrs: { ...this.$attrs },
          props: { ...this.$props },
          on: {
            ...this.$listeners,
            input: value => {
              this.value = value;
              this.$emit('input', value);
            },
          },
          scopedSlots,
          domProps: {
            value: this.value,
          },
        },
        slots,
      );
    },
  });
};

export default HOC;