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

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

const SomeComponentWithDefaults = Vue.extend({
  props: {
    value: {
      default: 'fallback'
    }    
  },
  mixins: [SomeComponent]
});

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