StripeElement.vue `options` are considered optional but generate console warning when left empty

When creating the <StripeElement> component, the options prop is considered optional, but it generates an "Invalid watch source" console warning due to a watch() being supplied with a plain object instance via its default value:

vue-stripe-js/src/components/StripeElement.vue

Lines 33 to 35 in ca1f828

    
               options: { 
        
                 type: Object as () => StripeElementOptions, 
        
                 default: () => ({}),

vue-stripe-js/src/components/StripeElement.vue

Lines 85 to 87 in ca1f828

    
               watch(props.options, () => { 
        
                 stripeElement.value?.update(props.options) 
        
               })

I think the problem is that you try to watch non-reactive property, I'm pretty sure if you try toRefs on your props the warning will be gone. Note it's a Vue warning, not a typescript

import { toRefs } from 'vue'
const { options } = toRefs(props)

watch(options, () => {
  // ...
})

Ah, now I got it

Oh, I'm not watching anything. This is coming from the vue-stripe-js source element.

Here's my code:

<StripeElements
    v-if="stripe.ready && stripe.intent"
    ref="elements"
    class="space-y-4"
    #default="{ elements }"
    :stripe-key="stripe.key"
    :elements-options="elementsOptions"
>
    <StripeElement type="payment" :elements="elements"/>
    <!-- No :options prop configured above. -->
</StripeElements>

Warning:

Invalid watch source:  {} A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types. 
  at <StripeElement type="payment" elements= e {_customerOptions: null, getElement: ƒ, update: ƒ, create: ƒ, fetchUpdates: ƒ, …} > 
  at <StripeElements key=0 ref="elements" class="space-y-4"  ... >

I'll take a look, this requires a fix, thanks for reporting

Happy to help! Let me know if you'd like help testing anything out 👍

Thanks so much for your work on this package ❤️

Try version 1.0.1

Excellent, works great -- thank you! 🙏

	options: {
	type: Object as () => StripeElementOptions,
	default: () => ({}),

	watch(props.options, () => {
	stripeElement.value?.update(props.options)
	})