HOC pattern in Vue.js

After doing some research (google) I found it is possible to do HOC pattern in Vue.js. Anyway, I present you here my introduction to it, although you can find it here too.
So the HOC pattern consists in that you can do const CompWithThis= withThis(Comp) and also const CompWithThisAndThat= withThat(CompWithThis) and so on.
In this case withThis and withThat are HOC's, that is, higher-order components, which are functions that accepts a component as an argument and return another component.
Let's see the definition of withThis and withThat:

import Vue from 'vue'
import s from 'vue-styled-components'
const Div=s.div`
`

export default
C=>
Vue.extend({
  data(){
    return {
      d:1
    }
  },
  render() {
    return (
      <Div>
        <div>this is withThis:{this.d}</div>
        <C/>
      </Div>
    )
  }
})

and

import Vue from 'vue'
import s from 'vue-styled-components'
const Div=s.div`
`

export default
C=>
Vue.extend({
  data(){
    return {
      d:2
    }
  },
  render() {
    return (
      <Div>
        <div>this is with that:{this.d}</div>
        <C/>
      </Div>
    )
  }
})

As you can see they are pretty much the same. They take a component (C) as an argument and return a component which renders C.
Now let's see a simple component:

import Vue from 'vue'
import s from 'vue-styled-components'
const Div=s.div`
`

export default Vue.extend({
  data(){
    return {
      d:0
    }
  },
  render(){
    return (
      <Div>this is ein:{this.d}</Div>
    )
  }
})

So we have this component, Ein. Now let's apply the higher order components to Ein and let's see the output:

import Vue from 'vue'
import s from 'vue-styled-components'
const Div=s.div`
font-family:sans-serif;
`
import Ein from './ein'
import withThis from './withThis'
import withThat from './withThat'

const EinWithThisAndThat= withThat(withThis(Ein))

export default Vue.extend({
  render(){
    return (
      <Div>
        <EinWithThisAndThat/>
      </Div>
    )
  }
})

Previous was component App. Let's see main.js file which uses App:

import App from './components/app'

new App({
  el:'#app'
})

The output of this in the browser will be:

Comments

[Adam Crockett 🌀]

🙁 this and that make it hard to understand. Looks like a factory pattern from what I can tell?

[roggc]

The HOC pattern it is meant to implement logic and also customizes rendering. Let's say you have a HOC called withDraggable that implements logic for drag and drop in the web. So with that HOC you can convert any component into a draggable component without having to implement each time the logic for drag and drop. I have a post published about it if you are interested (React).