多分これが一番シンプルだと思います。
実装
<html> <body> <div id="app"> <custom-component :msg='msg' v-on:hello-hoge="msg = 'OK!!!'" /> </div> <script type="text/x-template" id="custom-component"> <div> <span>{{msg}}</span> <button v-on:click="$emit('hello-hoge')">ボタン</button> </div> </script> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <script> Vue.component("customComponent", { props: ["msg"], template: "#custom-component", }) </script> <script> new Vue({ el: "#app", data: { msg: 'hoge' }, }) </script> </body> </html>
まとめ
ライブラリなどは利用しにくいので、ちょっとした検証をする際には便利かも。