Vue.jsにて郵便番号からの住所自動入力

javascriptにおける郵便番号からの住所自動入力で有名なライブラリにajaxzip3がある。
今はさらに使いやすくなってYubinBangoというライブラリがある。

これは非常に簡単便利
しかし、今回取り上げるのはYubinBangoではなく、
そのコアライブラリであるYubinBango-Coreのほう。
ajaxzip3もYubinBangoも内部ではYubinBango-Coreを使っている。

何故YubinBango-Coreなのかというと、
今回、Vue.jsで作ったフロントで住所を自動入力出来るようにしたのだが、
YubinBangoは単体で使われることを想定されていて、Vue.jsからは使いづらい。
具体的にはinputのvalueは変わっても、inputに関連付けられたVue.js内のデータは変わらないんですね。上っ面だけ値が変わっても意味がない。

というわけでVue.jsからYubinBango-Coreを使ってみる。
本当ならnpm install yubinbango-coreからrequireなどで読み込みたいのだがうまくいかず。誰か教えてください
別の方法ということで、ここはjsを直接読み込む。

<script src="https://yubinbango.github.io/yubinbango-core/yubinbango-core.js" charset="UTF-8"></script>

続いてVue.js内では郵便番号をwatchする。

export default {
    data() {
        return {
            zip: null,
            pref_id: null,
            locality: null,
            street: null,
        }
    },
    watch: {
        zip: function(zip) {
            let _this = this
            new YubinBango.Core(zip, function(addr) {
                _this.pref_id  = addr.region_id // 都道府県ID
                _this.locality = addr.locality  // 市区町村
                _this.street   = addr.street　  // 町域
            })
        }
    }
}

注意点としてはnew YubinBango.Core()でのコールバックではthisがVue.jsのthisではなくなってしまうので、
変数にthisを入れてVue.jsのデータを操作しないといけない。懐かしい
これで住所を自動で補完出来ます。簡単
だけど本当はrequireしたいですね