[V3 Vue.js] dataとcomputedの書き方

為替計算をサーバーサイド側ではなく、フロント側で実装しようと、Vue.jsを書いていたら、Vue.jsっていつの間にか2系から3系にバージョンアップしてたのね。知らなかった。。orz…
※為替レートはAPIで取得してサーバーサイドから流し込みます。

– new Vueではなく、Vue.createApp({})として、app.mount(‘#app’)とする。

             <div class="card-body" width="" height="">
                  <label for="yen">日本円を入力(単位円)</span></label>
                  <input type="number" v-model.number="yen" class="form-control col-md-2">
                  <br>
                  <label for="dollar">ドル換算</span></label>
                  <input type="string" v-model="dollar" id="dollar" class="form-control col-md-2">
                  <a href="javascript:OnLinkClick();">コピー</a>
              </div>

// 省略

  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      data() {
          return {yen: 10000}
      },
      computed:{
          dollar(){
           return Number(this.yen / 110.05).toLocaleString('en-US', {style:'currency', currency:'USD'});
         }
      },
    });
    app.mount('#app')
  </script>

焦るな、というかtype scriptちゃんと勉強しないとついていけなくなりそう