JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/jgthms/bulma/master/css/bulma.css">
<script src="https://unpkg.com/zipcode-ja@0.0.7/lib/zipcode-ja.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.js"></script>

<div id="root" class="hero is-fullheight is-primary is-bold">
  <div class="hero-head has-text-centered">
    〒 <input v-model="zipcode" type="number" autofocus>
  </div>
  <div class="hero-body">
    <input readonly v-model="address0" class="input is-info">
    <input readonly v-model="address1" class="input is-info">
    <input readonly v-model="address2" class="input is-info">
  </div>
  <pre class="hero-foot">{{found | json}}</pre>
</div>

<script>
  new Vue({
    el: '#root',
    data: {
      zipcode: '1000000'
    },
    computed: {
      found: function(){
        return zipcodeJa[this.zipcode];
      },
      address0: function(){
        var address = (zipcodeJa[this.zipcode] || {}).address || {};
        return address[0];
      },
      address1: function(){
        var address = (zipcodeJa[this.zipcode] || {}).address || {};
        return address[1];
      },
      address2: function(){
        var address = (zipcodeJa[this.zipcode] || {}).address || {};
        return address[2];
      },
    }
  })
</script>

CSS

* {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: Monaco, monospace;
}