I have the following VueJS component:

```
Vue.component('label-ui', {
    props: ['type', 'size', 'color', 'position'],

    template: `
        <div :class="[type, size, color, position]" class="ui labels">
            <slot></slot>
        </div>
    `

```

I want to rewrite this so that I can dynamically set the html tag of the template - similar to what I do with this code:

```
  props: ['tag', 'attributes'],
  render(createElement) {
    return createElement(this.tag || 'div', {attrs: this.attributes || {}}, this.$slots.default);
  }

```

However, I want to use the JSX syntax - as noted here: <https://v2.vuejs.org/v2/guide/render-function.html#JSX>

I cannot figure out, though, how to do this using the JSX format.

Any ideas?

Thanks