Vue.js: 異なるVueインスタンスのdataの値を取得する方法

下記のような2つのVueインスタンスあり、別のVueインスタンスのdataの値を参照したいときに少しハマったので、ちょっとバッドプラクティス感ありますが対応方法をメモメモφ(･･

結論としては、下記のようにすればできた🙌
参照したいVueインスタンスを変数に入れといて、その変数からdataを参照して返却するメソッドを定義してあげれば良いみたい👀

let hoge = new Vue({
  el: '#hoge',
  data: {
    val1: 'val1',
    val2: 'val2'
  }
})

let fuga = new Vue({
  el: '#fuga',
  data: {
   val3: 'val3'
  },
  methods: {
    hogeVal1: function () {
      // hogeのval1をfugaで参照出来る
      retuern hoge.val1
    }   
  }
})

<div id="fuga">
  <span>{{hogeVal1()}}</span>
</div>

なんかもうちょっと良いやり方ありそうですが、とりあえず出来たので書いてみました(；・∀・)