Vue.tsx

import * as React from "react";
import * as Vue from "vue/dist/vue";
import VueElement from "./VueElement";
import { PropertyControls, ControlType } from "framer";

// Define type of property
interface Props {
  text: string;
}

export class VueComponent extends React.Component<Props> {
  el;
  componentWillReceiveProps(nextProps) {
    Object.keys(nextProps).forEach(key => {
      try {
        this.e.componentInstance[key] = nextProps[key];
      } catch (e) {
        console.log(key);
        console.log(e);
      }
    });
  }

  mountVue = el => {
    this.el = this.el || el;
    this.vue = new Vue({
      el: this.el,
      render: h => {
        this.e = h(VueElement, {
          props: this.props
        });

        return this.e;
      }
    });
  };

  render() {
    return (
      <div>
        <div ref={this.mountVue} />
      </div>
    );
  }
}

VueElement.ts

import * as Vue from "vue/dist/vue";

// Define a new component called button-counter
export default Vue.component("button-counter", {
  data: function() {
    return {
      count: 0
    };
  },
  props: ["width", "height"],

  template:
    "<div v-bind:style=\"{ width: width + 'px', height: height + 'px', backgroundColor: 'blue'}\"><button v-on:click=\"count++\">You clicked me {{height}}{{width}} {{ count }} times.</button></div>"
});