fix class style attrs and children bugs for vue-in-react

src/wrappers/React.js

@@ -46,7 +46,7 @@ const makeReactContainer = Component => {
 export default {
   props: ['component', 'passedProps'],
   render (createElement) {
-    return createElement('div', { ref: 'react' })
+    return createElement('div')
   },
   methods: {
     mountReactComponent (component) {
@@ -60,15 +60,15 @@ export default {
           {...children}
           ref={ref => (this.reactComponentRef = ref)}
         />,
-        this.$refs.react
-      )
+        this.$el
+      );
     },
   },
   mounted () {
     this.mountReactComponent(this.$props.component)
   },
   beforeDestroy () {
-    ReactDOM.unmountComponentAtNode(this.$refs.react)
+    ReactDOM.unmountComponentAtNode(this.$el)
   },
   updated () {
     /**

src/wrappers/Vue.js

@@ -8,7 +8,7 @@ const VUE_COMPONENT_NAME = 'vuera-internal-component-name'
 const wrapReactChildren = (createElement, children) =>
   createElement('vuera-internal-react-wrapper', {
     props: {
-      component: () => <div>{children}</div>,
+      component: () => <React.Fragment>{children}</React.Fragment>,
     },
   })
 
@@ -61,20 +61,23 @@ export default class VueContainer extends React.Component {
    */
   createVueInstance (targetElement, reactThisBinding) {
     const { component, on, ...props } = reactThisBinding.props
-
     // `this` refers to Vue instance in the constructor
     reactThisBinding.vueInstance = new Vue({
       el: targetElement,
       data: props,
       ...config.vueInstanceOptions,
       render (createElement) {
+        const { className, style, children, ...attrs } = this.$data;
         return createElement(
           VUE_COMPONENT_NAME,
           {
             props: this.$data,
             on,
+            class: className,
+            style,
+            attrs
           },
-          [wrapReactChildren(createElement, this.children)]
+          [wrapReactChildren(createElement, children)]
         )
       },
       components: {