nuxt typescript payjpで2回目画面表示時に「すでにインスタンス化されています」とエラーが出る

Question

現在nuxt typescript payjp で決済画面を作成している途中なのですが、
1回目の画面表示時は大丈夫なのですが、2回目画面表示時に上記エラーが表示されてしまいます。

destroyedでPayjpインスタンスを削除等色々やってみているのですが、なかなかうまく行きません
お力添えいただければ幸いです。

以下コードになります。

<template>
  <div>
    <h1>クレジットカード情報</h1>
    <div class="card-form">
      <div id="payjp-form" class="payjs-outer"></div>
    </div>
  </div>
</template>


export default class CardForm extends Vue {


  mounted () {
    // @ts-ignore
    const payjp = window.Payjp('/**テストアカウントのトークン**/')
    const elements = payjp.elements()
    const cardElement = elements.create('card')
    cardElement.mount('#payjp-form')
 
  }

  destroyed () {

  }

}

nuxt.config.js

  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ],
    script: [
      {src: 'https://js.pay.jp/v2/pay.js', async: true }　// ここでpayjpを読んでいる
    ]
  },
/**省略 **/

エラー

client.js?06a0:97 Error: 既にインスタンス化されています
    at new e (pay.js:1)
    at window.Payjp (pay.js:1)
    at VueComponent.mounted (CardForm.vue?fbc2:44)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at callHook (vue.runtime.esm.js?2b0e:4219)
    at Object.insert (vue.runtime.esm.js?2b0e:3139)
    at invokeInsertHook (vue.runtime.esm.js?2b0e:6346)
    at VueComponent.patch [as __patch__] (vue.runtime.esm.js?2b0e:6565)
    at VueComponent.Vue._update (vue.runtime.esm.js?2b0e:3948)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4060)

お手数ですが、ヒントになることがありましたらご教授お願いいたします。

Answer 1

わたしも同じエラーが発生して、こちらの記事を参考に解決しました。
https://yasutomo.hatenablog.com/entry/2021/01/15/210113

つまるところ、Payjpのインスタンスを複数回初期化することに対してエラーが出ているため、
一度だけ初期化してあげることで解決できます。

上記のリンク通りの方法でなくても、以下のコードなどでうまくいきます。
（nuxt.js を使っていないので、vue.jsのコードです）

- - - - - - - -
> store.js

const store = new Vuex.Store({
  state: {
    // 共有したいパラメータ
    abc: "****",
    // ** 省略 ** //
    payjp: Payjp('pk_test_********')
  },
})

- - - - - - - -
> 購入機能を使用するView

export default class CardForm extends Vue {


  mounted () {

    const payjp = this.$store.payjp // 既に初期化済み

    // 以下はこれまで通り
    const elements = payjp.elements()
    const cardElement = elements.create('card')
    cardElement.mount('#payjp-form')

  }
}