gengou

<div id="app">
  <p><input type="number" v-model="year"></p>
  <p>{{ year | gengou }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    year: 1986
  },
  filters: {
    gengou(year) {
      if (!year || year <= 1868 || year >= 2019) return year
      let result;
      const d = new Date(new Date().setFullYear(year));
      const w = {
        '平成': '1989/01/08',
        '昭和': '1926/12/25',
        '大正': '1912/07/30',
        '明治': '1868/01/25'
      };
      const y = d.getFullYear();
      let r = d.toLocaleDateString('ja-JP-u-ca-japanese');
      r = r.replace(/^.*?(\d{1,2}).+?$/g, '$1');
      const getDate = (x, r) => {
        return x + r
      }
      const ua = navigator.userAgent.toLowerCase();
      if (!/msie|trident\/7|edge/.test(ua)) {
        const m = new Date('1868/09/07');
        if (d <= m) r -= 3;
      }
      if (Number(r) === 1) r = '元';
      if (d >= new Date(w['平成'])) {
        result = getDate('平成', r, d);
      } else if (d >= new Date(w['昭和'])) {
        result = getDate('昭和', r, d);
      } else if (d >= new Date(w['大正'])) {
        result = getDate('大正', r, d);
      } else if (d >= new Date(w['明治'])) {
        result = getDate('明治', r, d);
      }
      return result;
    }
  }
})