useVueComponent.js

import Vue from 'vue'
import React, { useRef, useEffect, useCallback } from 'react'

const getWrappedVueComponent = component => props => {
  const container = useRef()
  const instance = useRef()
  useEffect(() => {
    instance.current = new Vue({ ...component, el: container.current })
  }, [])
  useEffect(() => {
    // Object.assign will trigger the instance setters and update the component
    Object.assign(instance.current, props)
  }, [props])
  return <div ref={container} />
}

const useVueComponent = component => {
  // useCallback should prevent returning a new component type each render  
  return useCallback(getWrappedVueComponent(component), [])
}

export { useVueComponent, getWrappedVueComponent }