V-model passthrough in functional component

I have a functional component that I want to pass through everything to a wrapped component. The problem is, it seems like v-model bindings are not properly being setup. The issue seems to be because the component I’m trying to wrap has customized v-model parameters as seen in it’s code.

I can’t figure out how to make Vue bind to the right event, and I can’t get the model parameters out of VueSlider myself either because it only exports a function

See the below example. In Usage.vue, ExampleComponent is getting @input and props: {value} passed to it. When ExampleComponent.vue tries to render, options has listeners.input and props: {value} but it needs a listeners.changed, as that’s the custom event for vue-slider-component.

I could set this up manually, but I would like to know how to let Vue handle it.

// Usage.vue
<template>
  <example-component v-model="myModel" />
</template>

// ExampleComponent.vue
<script>
import VueSlider from 'vue-slider-component/dist-css/vue-slider-component.umd.min.js';
import 'vue-slider-component/dist-css/vue-slider-component.css';
//import 'vue-slider-component/theme/default.css';

export default {
  functional: true,
  name: 'VueThemedSlider',
  render(createElement, context) {
    //Pass-through
    return createElement(VueSlider, context);
  }
};
</script>

<style lang="scss">
@import '@/assets/scss/themed-vue-slider-component.scss';
</style>

Ah, it seems the issue was that I should be doing createElement(VueSlider, context.data, context.children) to pass-through. By not passing through the parameters correctly, it was somehow partially working, but things like model (because they were in context.data) were not.

This fixed it.