ReactよりVue.jsの方が好みな感じの雰囲気を醸し出しているので軽く触っておく。
なお、ReactもVueも基幹系ではあまり需要がないので利用することなかった。（jQuery止まり）

導入

CDN版の場合は公式に簡単には書いてある。

<script src="https://unpkg.com/vue@next"></script>

HTMLにこれ書くだけで使う事は可能。
バージョン番号指定なら

<script src="https://unpkg.com/vue@3"></script> <!-- 3の最新 -->
<script src="https://unpkg.com/vue@3.0.0"></script> <!-- 特定バージョン -->

npmでローカルにインストールする場合
npm install vue@next
TypeScriptでやるならインストールする必要がもちろんある。

Vue3についてはこことか。
3系はIEでは動かないので、その辺りでの注意は必要。

お試し

今回は時間があまりなかったのでCDN版で。
ここ見ながら
vueはせっかくなので最新のV3で書き換えて試す。

V2とV3の違いがあって、new Vue({})がエラーになる。
代わりにVue.createAppを使う。
また、.mount(target)で対象を指定する。

AJAXにはaxiosではなくjQueryを使ってみるか、と思って適当に以下で書いてみた。

<script src="https://unpkg.com/vue@3"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
Vue.createApp ({
    data() {
    return{ inputZip:'', defaultZip:'1000000', zip:'0000000', zipAddr:'' } // 二重括弧に対応するデータ。初期値も指定。
    },
    computed: {
        computedZip: function(){
          return !isNaN(this.inputZip) && this.inputZip.length == 7 ? this.inputZip : this.defaultZip
        },
        computedAddress: function(){ return !isNaN(this.inputZip) && this.inputZip.length == 7 ? getAddress(this.inputZip) : '';}
    },
    methods: {
        getAddress: function(z){
           let params = {"zipcode": z};
           $.get('https://api.zipaddress.net/',params
           ).done(
           function(d){
        if(d.code == '200'){
          this.zipAddr = d.data.fullAddress; // 画面が変更されない

        }else{
            this.zipAddr = d.message;
        }
           }).fail(
           function(e){
            this.zipAddr = e.code;
           });
        }
    }
}).mount('#vue-target'); // mountでVueを利用する対象を指定
</script>

動かない。
methodでthis.xxxにセットしても変更されないのはおそらくjQuery内部のThisの問題。
サンプルのようにAxios使うと普通にできた。

methods: {
        getAddress: function(z){
           let params = {"zipcode": z};

            axios
            .get('https://api.zipaddress.net/', {'params':params})
            .then(res => {
                console.log(res.data);
                this.zipAddr = res.data.code == 200 ? res.data.data.fullAddress : res.data.message;
            });
        }
    }

勿論jQueryを使って書くことも出来て、とりあえずこんな感じでthisを受けると動いた。
（動かない原因に気が付くのに時間がかかってしまった）

methods: {
        getAddress: function(z){
           let params = {"zipcode": z};
           let _this =this; // jQuery内部で使うためにthisを引き受けておく。

           $.get('https://api.zipaddress.net/',params
           ).done(
            function(d){
            if(d.code == '200'){
                _this.zipAddr = d.data.fullAddress;
            }else{
                _this.zipAddr=d.message;
            }
            }).fail(
            function(e){
                _this.zipAddr = e.code;
            });

        }
    }

Method周りの公式マニュアルも参考にするとよい。

いろいろ見ているとV3ではThis付ける付けない辺りの挙動もV2から変わっているらしい。
こことかこことかが参考になるかも

情報が揃っているV2の方が使いやすい可能性はあるものの、やはり今から使うならV3か・・・
そういえばSwiftなんかは強制アップデートで古いコード動かなくなったりしてイライラしたなぁ、という思ひ出。

メモ：Vue.js（V3）を簡単に動かしてみる

導入

お試し