Elements cannot start

[iBobik]

Added it according to the docs, but it it does not work.

Describe the bug
It will fail to load, see the logs.

To Reproduce
Steps to reproduce the behavior:

1. Add components according to the docs: https://docs.vuestripe.com/vue-stripe/stripe-elements/payment
2. Wire it to the backend to get the payment intent key

Expected behavior
It will load as expected.

Desktop (please complete the following information):

• OS: macOS
• Browser Firefox and Safari
• Version current

Additional context
Code:

<template>
  <div v-if="state === 'loading'" class="flex flex-col items-center justify-center w-full gap-4 h-80">
    <UIcon name="i-heroicons-envelope" class="w-20 h-20 opacity-20 animate-bounce" />
    Processing order...
  </div>
  <div v-else-if="state === 'pay'" class="max-w-xl mx-auto">
    <h2 class="mb-5 text-4xl">Payment</h2>
    <p>Thank you for your order. You can pay it now:</p>
    <ClientOnly>
      <StripeElementCard
        ref="stripeElementRef"
        :pk="stripePublishableKey"
        :elements-options="stripeElementOptions"
        :confirm-params="{ return_url: baseURL + '/book/payment?paid' }"
      />
    </ClientOnly>

  </div>
  <div v-else-if="state === 'paid'" class="max-w-xl mx-auto">
    <h2>Thank your for payment. What is next?</h2>
    <p>We will send you driver's details at least one day before departure.</p>
    <p>If you will need to add stops along the way, please send us your itinerary on our email.</p>
  </div>
</template>

<script setup lang="ts">
import { StripeElementPayment } from '@vue-stripe/vue-stripe'
//import type { stripeElementOptions } from 'stripe'

const $router = useRouter()
const order = useOrder()
const { public: { baseURL, stripePublishableKey } } = useRuntimeConfig()

const state = ref<'loading' | 'pay' | 'paid'>('loading')
const stripeElementRef = ref<StripeElementPayment>()

const stripeElementOptions = {
  locale: 'en',
  //layout:
  clientSecret: ''
}


until(() => order.type).toBeTruthy().then(async () => {
  if (!order.startTime) {
    $router.replace('/book/details')
    return
  }

  if ($router.currentRoute.value.query.paid) {
    state.value = 'paid'
    return
  }

  try {
    const response = await $fetch('/api/order', {
      method: 'POST',
      body: { order },
    })
    console.log('response', response)
    stripeElementOptions.clientSecret = response.stripePi
  }
  catch (e) {
    console.error(e)
    navigateTo('/book/details')
    alert('Error sending order. Please try again or contact us.')
  }
  state.value = 'pay'
  //cleanOrder(order)
})
</script>

Browser console log:

[Vue warn]: Property "$createElement" was accessed during render but is not defined on instance.
at <Anonymous ref="stripeElementRef" pk="pk_test_51LUUgYJOqPd0OpORVW3LPJ6URLplTzeG66ljgKAByGzNwo4DtZc0wAnB6Xu0qPcPld77JxHzJuOoVMaRpTJXgazY00rgSCM2n6" elements-options=
Object { locale: "en" }
… >
at <Payment onVnodeUnmounted=fn ref=Ref<
Proxy { : Proxy, : {…} }

at <Anonymous key="/book/payment" vnode=
Object { __v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, ref: {…}, scopeId: null, slotScopeIds: null, children: null, component: null, … }
route=
Object { fullPath: "/book/payment", path: "/book/payment", query: {}, hash: "", name: "book-payment", params: {}, matched: (2) […], meta: Proxy, redirectedFrom: undefined, href: "/book/payment" }
… >
at
at
at <Book onVnodeUnmounted=fn ref=Ref<
Proxy { : {…}, : {…} }

at <Anonymous key="/book" vnode=
Object { __v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, ref: {…}, scopeId: null, slotScopeIds: null, children: null, component: null, … }
route=
Object { fullPath: "/book/payment", path: "/book/payment", query: {}, hash: "", name: "book-payment", params: {}, matched: (2) […], meta: Proxy, redirectedFrom: undefined, href: "/book/payment" }
… >
at
at
at
at runtime-core.esm-bundler.js:41:12
[Vue warn]: Property "_self" was accessed during render but is not defined on instance.
at <Anonymous ref="stripeElementRef" pk="pk_test_51LUUgYJOqPd0OpORVW3LPJ6URLplTzeG66ljgKAByGzNwo4DtZc0wAnB6Xu0qPcPld77JxHzJuOoVMaRpTJXgazY00rgSCM2n6" elements-options=
Object { locale: "en" }
… >
at <Payment onVnodeUnmounted=fn ref=Ref<
Proxy { : Proxy, : {…} }

at <Anonymous key="/book/payment" vnode=
Object { __v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, ref: {…}, scopeId: null, slotScopeIds: null, children: null, component: null, … }
route=
Object { fullPath: "/book/payment", path: "/book/payment", query: {}, hash: "", name: "book-payment", params: {}, matched: (2) […], meta: Proxy, redirectedFrom: undefined, href: "/book/payment" }
… >
at
at
at <Book onVnodeUnmounted=fn ref=Ref<
Proxy { : {…}, : {…} }

at <Anonymous key="/book" vnode=
Object { __v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, ref: {…}, scopeId: null, slotScopeIds: null, children: null, component: null, … }
route=
Object { fullPath: "/book/payment", path: "/book/payment", query: {}, hash: "", name: "book-payment", params: {}, matched: (2) […], meta: Proxy, redirectedFrom: undefined, href: "/book/payment" }
… >
at
at
at
at runtime-core.esm-bundler.js:41:12
[Vue warn]: Unhandled error during execution of render function
at <Anonymous ref="stripeElementRef" pk="pk_test_51LUUgYJOqPd0OpORVW3LPJ6URLplTzeG66ljgKAByGzNwo4DtZc0wAnB6Xu0qPcPld77JxHzJuOoVMaRpTJXgazY00rgSCM2n6" elements-options=
Object { locale: "en" }
… >
at <Payment onVnodeUnmounted=fn ref=Ref<
Proxy { : Proxy, : {…} }

at <Anonymous key="/book/payment" vnode=
Object { __v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, ref: {…}, scopeId: null, slotScopeIds: null, children: null, component: null, … }
route=
Object { fullPath: "/book/payment", path: "/book/payment", query: {}, hash: "", name: "book-payment", params: {}, matched: (2) […], meta: Proxy, redirectedFrom: undefined, href: "/book/payment" }
… >
at
at
at <Book onVnodeUnmounted=fn ref=Ref<
Proxy { : {…}, : {…} }

at <Anonymous key="/book" vnode=
Object { __v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, ref: {…}, scopeId: null, slotScopeIds: null, children: null, component: null, … }
route=
Object { fullPath: "/book/payment", path: "/book/payment", query: {}, hash: "", name: "book-payment", params: {}, matched: (2) […], meta: Proxy, redirectedFrom: undefined, href: "/book/payment" }
… >
at
at
at
at runtime-core.esm-bundler.js:41:12
[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core
at <Anonymous ref="stripeElementRef" pk="pk_test_51LUUgYJOqPd0OpORVW3LPJ6URLplTzeG66ljgKAByGzNwo4DtZc0wAnB6Xu0qPcPld77JxHzJuOoVMaRpTJXgazY00rgSCM2n6" elements-options=
Object { locale: "en" }
… >
at <Payment onVnodeUnmounted=fn ref=Ref<
Proxy { : Proxy, : {…} }

at <Anonymous key="/book/payment" vnode=
Object { __v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, ref: {…}, scopeId: null, slotScopeIds: null, children: null, component: null, … }
route=
Object { fullPath: "/book/payment", path: "/book/payment", query: {}, hash: "", name: "book-payment", params: {}, matched: (2) […], meta: Proxy, redirectedFrom: undefined, href: "/book/payment" }
… >
at
at
at <Book onVnodeUnmounted=fn ref=Ref<
Proxy { : {…}, : {…} }

at <Anonymous key="/book" vnode=
Object { __v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, ref: {…}, scopeId: null, slotScopeIds: null, children: null, component: null, … }
route=
Object { fullPath: "/book/payment", path: "/book/payment", query: {}, hash: "", name: "book-payment", params: {}, matched: (2) […], meta: Proxy, redirectedFrom: undefined, href: "/book/payment" }
… >
at
at
at
at runtime-core.esm-bundler.js:41:12
Uncaught (in promise) TypeError: this._self is undefined
NuxtJS 78
vue_render$1
renderComponentRoot
componentUpdateFn
run
update
setupRenderEffect
mountComponent
processComponent
patch
mountChildren
mountElement
processElement
patch
componentUpdateFn
run
update
callWithErrorHandling
flushJobs
promise callbackqueueFlush
queueJob
effect
triggerEffect
triggerEffects
triggerRefValue
set value
setup
setup
callWithErrorHandling
setupStatefulComponent
setupComponent
mountComponent
processComponent
patch
componentUpdateFn
run
update
setupRenderEffect
mountComponent
processComponent
patch
patchSuspense
process
patch
componentUpdateFn
run
update
callWithErrorHandling
flushJobs
promise callbackqueueFlush
queuePostFlushCb
queueEffectWithSuspense
scheduler
triggerEffect
triggerEffects
triggerRefValue
effect
triggerEffect
triggerEffects
triggerRefValue
effect
triggerEffect
triggerEffects
triggerRefValue
set value
finalizeNavigation
pushWithRedirect
promise callback*pushWithRedirect
push
submit
callWithErrorHandling
callWithAsyncErrorHandling
emit
createSetupContext/get emit/<
onSubmit
_sfc_render/_cache[0]<
withModifiers
callWithErrorHandling
callWithAsyncErrorHandling