I've got a component that is meant to render one component or the other depending on the presence of a feature flag. This is done via the :is property on the dynamic component component.

<template>
  <component
    :is="hasFF ? 'ButtonTwo' : 'ButtonOne'"
    v-bind="$attrs"
  />
</template>

<script>
import ButtonOne from './ButtonOne.vue'
import ButtonTwo from './ButtonTwo.vue'
import { BUTTON_TWO } from '@/constants/feature_flags'
import { mapGetters } from 'vuex'
export default {
  name: 'ButtonWrapper',
  components: {
    ButtonOne,
    ButtonTwo,
  },
  computed: {
    ...mapGetters(['hasFeatureFlag']),
    hasBittsTwo () {
      return this.hasFeatureFlag(BUTTON_TWO)
    },
  },
}
</script>

However, both ButtonOne and ButtonTwo in this example contain slots. For instance here is a contrived usage of the first button:

<ButtonOne>
   <slot name="icon">
   <button>Click Me</button>
   <div>Some more text</div>
</ButtonOne>

How can I write a wrapper component that checks for the presence of a feature flag and then renders it's children, including by passing down all of their props and appropriately rendering their slots? Could this be more easily achieved using a render function, and if so, how?