我想在Vue应用程序中使用StripeCheckout组件。为此，我从here复制了它们的示例代码（并更新为使用复合API）。
如果我路由到我的订阅组件，它工作正常。我可以点击订阅按钮并付款。但是，如果我在呈现订阅页面后尝试路由到其他组件，则在尝试卸载StripeCheckout组件时会抛出错误。

异常

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '__asyncLoader')
    at isAsyncWrapper (runtime-core.esm-bundler.js?d2dd:2243:1)
    at unmount (runtime-core.esm-bundler.js?d2dd:6061:1)
    at unmountComponent (runtime-core.esm-bundler.js?d2dd:6183:1)
    at unmount (runtime-core.esm-bundler.js?d2dd:6068:1)
    at unmountChildren (runtime-core.esm-bundler.js?d2dd:6212:1)
    at unmount (runtime-core.esm-bundler.js?d2dd:6086:1)
    at unmountComponent (runtime-core.esm-bundler.js?d2dd:6183:1)
    at unmount (runtime-core.esm-bundler.js?d2dd:6068:1)
    at unmountChildren (runtime-core.esm-bundler.js?d2dd:6212:1)
    at unmount (runtime-core.esm-bundler.js?d2dd:6086:1)

订阅组件

<template>
  <div>
    <stripe-checkout
      ref="checkoutRef"
      mode="subscription"
      :pk="publishKey"
      :line-items="lineItems"
      :success-url="successUrl"
      :cancel-url="cancelUrl"
      @loading="(v) => (this.loading = v)"
    />
    <button @click="submit">Subscribe!</button>
  </div>
</template>

<script lang="ts" setup>
import { StripeCheckout } from "@vue-stripe/vue-stripe";
import { ref } from "vue";
import { EnvironmentVariableManager } from "@/utils/environment-variable-manager";

const publishKey = EnvironmentVariableManager.getStripePublishableKey();
const loading = ref(false);
const lineItems = [
  {
    price: "price_1MLUEMLQEklYWrzRVqxFJqt8",
    quantity: 1,
  },
];

const successUrl = EnvironmentVariableManager.getUrl() + "/subscribe";
const cancelUrl = EnvironmentVariableManager.getUrl() + "/subscribe";

const checkoutRef = ref<StripeCheckout | null>(null);

const submit = () => {
  if (checkoutRef.value) {
    checkoutRef.value.redirectToCheckout();
  } else {
    console.error("Checkout ref not found");
  }
};
</script>

路由器

const routes = [{
    path: "/subscribe",
    name: "Subscribe",
    component: HomeView,
    children: [{ name: "Subscribe", path: "", component: Subscribe }],
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

我注意到使用StripeElements可以在卸载之前destroy组件。我想知道是否需要用StripeCheckout做类似的事情，但是没有这样做的函数。我找不到这方面的任何文件。
为什么StripeCheckout在路由/卸载时会引发异常？