How to use the vue-functional-data-merge.mergeData function in vue-functional-data-merge

render(h, { props, data, children }) {
    // pass all our props/attrs down to child, and set`append` to true
    return h(
      BInputGroupAddon,
      mergeData(data, {
        props: { ...props, append: true }
      }),
      children
    )
  }
})

render (h, { props, data, parent, children }) {
    const tag = getComputedTag(props, parent)
    const rel = props.target === '_blank' && !props.rel ? 'noopener' : props.rel
    const href = props.href || '#'

    const eventType = tag === 'router-link' ? 'nativeOn' : 'on'
    const suppliedHandler = (data[eventType] || {}).click
    const handlers = { click: clickHandlerFactory(
      { tag, href, disabled: props.disabled, suppliedHandler }
    )}

    const tabindex = data.attrs ? data.attrs.tabindex : null

    const componentData = mergeData(data, {
      class: {
        'disabled': props.disabled,
        'active': props.active
      },
      attrs: {
        rel,
        href,
        target: props.target,
        tabindex: props.disabled ? '-1' : tabindex,
        'aria-disabled': tag === 'a' && props.disabled ? 'true' : null
      },
      props: Object.assign(props, { tag: props.routerTag })
    })

    // If href prop exists on router-link (even undefined or null) it fails working on SSR
    if (tag === 'router-link') {

render (h, { props, data, parent, children }) {
    const tag = getComputedTag(props, parent)
    const rel = props.target === '_blank' && !props.rel ? 'noopener' : props.rel
    const href = props.href || '#'

    const eventType = tag === 'router-link' ? 'nativeOn' : 'on'
    const suppliedHandler = (data[eventType] || {}).click
    const handlers = { click: clickHandlerFactory(
      { tag, href, disabled: props.disabled, suppliedHandler }
    )}

    const tabindex = data.attrs ? data.attrs.tabindex : null

    const componentData = mergeData(data, {
      class: {
        'disabled': props.disabled,
        'active': props.active
      },
      attrs: {
        rel,
        href,
        target: props.target,
        tabindex: props.disabled ? '-1' : tabindex,
        'aria-disabled': tag === 'a' && props.disabled ? 'true' : null
      },
      props: Object.assign(props, { tag: props.routerTag })
    })

    // If href prop exists on router-link (even undefined or null) it fails working on SSR
    if (tag === 'router-link') {

const on = {
      click (e) {
        if (props.disabled && e instanceof Event) {
          e.preventDefault()
          e.stopPropagation()
        }
      }
    }
    // render params
    let tag, options, slot

    if (props.href) {
      // is native link
      tag = 'a'
      slot = children
      options = mergeData(data, {
        on,
        class: classes,
        attrs: {
          role: 'button',
          href: props.href,
          target: props.target
        }
      })
    } else if (props.to) {
      // is vue router link
      tag = 'router-link'
      slot = children
      options = mergeData(data, {
        nativeOn: on,
        class: classes,
        props: {

render(h, { props, data, children }) {
    let horizontal = props.horizontal === '' ? true : props.horizontal
    horizontal = props.flush ? false : horizontal
    const componentData = {
      staticClass: 'list-group',
      class: {
        'list-group-flush': props.flush,
        'list-group-horizontal': horizontal === true,
        [`list-group-horizontal-${horizontal}`]: isString(horizontal)
      }
    }
    return h(props.tag, mergeData(data, componentData), children)
  }
})

render(h, { props: suppliedProps, data, children }) {
    const tag = suppliedProps.active ? 'span' : BLink

    const componentData = { props: pluckProps(props, suppliedProps) }
    if (suppliedProps.active) {
      componentData.attrs = { 'aria-current': suppliedProps.ariaCurrent }
    }

    if (!children) {
      componentData.domProps = htmlOrText(suppliedProps.html, suppliedProps.text)
    }

    return h(tag, mergeData(data, componentData), children)
  }
})

render (h, { props, data, children }) {
    const tag = !props.href && !props.to ? props.tag : CLink
    const componentData = {
      staticClass: 'badge',
      class: {
        [`badge-${props.color}`]: props.color,
        'badge-pill': props.shape === 'pill',
        'active': props.active,
        'disabled': props.disabled
      },
      props
    }
    return h(tag, mergeData(data, componentData), children)
  }
}

render (h, { props, data, children }) {
    const tag = !props.href && !props.to ? props.tag : CLink
    const componentData = {
      staticClass: 'badge',
      class: {
        [`badge-${props.color}`]: props.color,
        'badge-pill': props.pill,
        'active': props.active,
        'disabled': props.disabled
      },
      props
    }
    return h(tag, mergeData(data, componentData), children)
  }
}

render (h, { props, data, children }) {
    const hor = props.horizontal
    const horizontalClassSuffix = typeof hor === 'string' ? `-${hor}` : ''
    const componentData = {
      staticClass: 'list-group',
      class: { 
        'list-group-flush': !hor && props.flush,
        [`list-group-horizontal${horizontalClassSuffix}`]: hor
      },
      attrs: {
        role: data.attrs ? data.attrs.role || 'list-items' : 'list-items'
      }
    }
    return h(props.tag, mergeData(data, componentData), children)
  }
}

render(h, { props, data, children }) {
    return h(
      props.tag,
      mergeData(data, {
        class: {
          'form-text': !props.inline,
          [`text-${props.textVariant}`]: props.textVariant
        },
        attrs: {
          id: props.id
        }
      }),
      children
    )
  }
})