nuxt.jsでajaxzip3.jsを使用して住所の補完がしたい

nuxt.jsで作られているものに郵便番号の補完機能を追加で、
ajaxzip3.jsを使用して行ったところ、外部jsとして読み込んでも、

また、イベントが発火せず何も起こらない状態です。

js が読み込まれ、郵便番号が入力されたら都道府県と市町村が補完されることがのぞみです。
typ
どうぞご教授よろしくお願いいたします。

試したこと

ajaxzip3.jsについては公式サイトに書いてあるURLを、
Nuxt.jsの外部ファイルの読込みの方法で読み込み
head: {
script: [
{ src: 'https://ajaxzip3.github.io/ajaxzip3.js', charset:"UTF-8" },
],
},
v-on:keyup=""AjaxZip3.zip2addr(postCode01,postCode02,prefecture,address)"
v-on:keyupイベントに関しては全く反応なし

index.vue（indexからheade、form、footerをimport）
header.vue
form.vue（formからinput、inputshort、selectをimport）
input.vue
select.vue
footer.vue

form

            <FormLabel labelName="郵便番号" isRequired="true"></FormLabel>
            <div class="PostCode-wrap">
              <div class="is-flex is-flex-one is-alignItemsCenter">
                <InputboxShot
                    ID="postCode01"
                    labelRequire="true"
                    inputLabel="〒"
                    textFiledType="postCode01"
                    maxLength=3
                    class="postCode01"
                    v-model="postDT.xxxxx.postCode01">
                </InputboxShot>
                <InputboxShot
                    ID="postCode02"
                    inputLabel="ー"
                    textFiledType="postCode02"
                    placeholderText="例）8510"
                    maxLength=4
                    class="postCode02"
                    v-model="postDT.xxxxx.postCode02">
                </InputboxShot>
              </div>
            </div>
            <FormLabel labelName="都道府県" isRequired="true"></FormLabel>
            <div class="Select-wrap">
              <Selectbox
                  ID="prefecture"
                  labelRequire="true"
                  @xxxxx-code="xxxxx"
                  :confirmError="$store.state.registrationErrors.companyAddressPrefecture && $store.state.registrationErrors.companyAddressPrefecture"
                  v-model="postDT.companyAddressPrefecture">
              </Selectbox>
              </div>
            </div>
            <FormLabel labelName="市区町村" isRequired="true"></FormLabel>
            <iInputbox
                ID="address"
                textFiledType="text"
                placeholderText="例）aaaaa"
                textFiledSize="default"
                labelRequire="true"
                maxLength=40
                v-model="postDT.address">
            </iInputbox>
          </div>
<script>
import Inputshortbox from '@/components/BBBBB/Inputshortbox'
import Inputbox from '@/components/BBBBB/Inputbox'
import Selectbox from '@/components/BBBBB/Selectbox'

export default {
    components: {
        InputboxShot,
        Inputbox,
        Selectbox,
    },
    data() {
        return {
            postDT: {
              aaaaa,
              bbbbb,          
            }
        }
    },

}
</script>

inputshortbox.vue

  <template>
  <div class="FormItem" :class="{isError: confirmError}">
    <div class="FormItem-innerBottom">
      <label v-if="inputLabel" :class="{isName: nameLabel}">{{inputLabel}}</label>
      <input
        v-if="textFiledType == 'postCode01'"
        :id="ID"
        class="TextField"
        type="text"
        :placeholder="placeholderText"
        :value="value"
        :maxlength="maxLength"
        v-on:input="$emit('input', $event.target.value)"
      />
      <input
        v-else-if="textFiledType == 'postCode02'"
        :id="ID"
        class="TextField"
        type="text"
        :placeholder="placeholderText"
        :value="value"
        :maxlength="maxLength"
        v-on:input="$emit('input', $event.target.value)"
      />

    </div>
  </div>
</template>

<script>
export default {
  props: [
    "ID",
    "inputLabel",
    "textFiledType",
    "placeholderText",
    "value",
    "confirmError",
    "maxLength",
    "postalCode",
    "nameLabel",
    "noneMessege"
  ],
  computed: {
    textExist() {
      return this.$props.value.length;
    }
  }
};
</script>

select.vue

<template>
  <div class="Selectbox" :class="{isError: confirmError}">
    <select :id="ID" :class="{isSelected: selected}" v-model="selected" @change="handleSelected">
      <option disabled value>選択してください</option>
      <option
        v-for="prefecture in prefectures"
        :key="prefecture.code"
        :value="`${prefecture.name}`"
      >{{prefecture.name}}</option>
    </select>
  </div>
</template>

<script>
import { prefectures } from "~/assets/data/prefectures.json";

export default {
  props: ["ID", "value", "confirmError"],
  data() {
    return {
      selected: "",
      prefectures
    };
  },
  methods: {
    handleSelected() {
      this.$emit("input", this.selected);
      this.xxxxxCode();
    },
    fetchPrefecureCode() {
      const xxxxx = this.xxxxxs.filter(
        xxxxx => xxxxx.name === this.selected
      );
      this.$emit("xxxxx-code", xxxxx);
    }
  },
  mounted() {
    setTimeout(() => {
      this.selected = this.$props.value;
      this.xxxxxCode();
    }, 1500);
  }
};
</script>