Vue 3 undefined has no properties

Question

I am trying to implement a paypal checkout with vue 3 but i keep getting the same error.

Uncaught TypeError: undefined has no properties

For reference i'm trying to do the same code as this link.

Following what they suggested in: this link.

Here is my code:

<template>
    <div id="smart-button-container">
        <div style="text-align: center;">
            <div id="paypal-button-container"></div>
        </div>
    </div>
    <div ref="paypal"></div>
</template>

And my script:

<script>

    export default {
        name: "Pay-ment",
        data: ()=>{
            return {
                loaded: false,
                paidFor: false,
                product: {
                    price: 5000.00,
                    description: "product description"
                }
            }
        },
        mounted: ()=>{
            const script = document.createElement("script");
            script.srcset = ""
            script.src = "https://www.paypal.com/sdk/js?client-id=MY-CLIENT-ID";
            script.addEventListener("load", ()=> this.setLoaded);
            document.body.appendChild(script);
        },
        methods: {
            setLoaded: ()=>{
                this.loaded = true;
                window.paypal
                .Button({
                    createOrder: (data, actions)=>{
                    return actions.order.create({
                        purchase_units: [
                            {
                                description: this.product.description,
                                amount: {
                                    currency_code: "MXN",
                                    value: this.product.price
                                }
                            }
                        ]
                    })
                    }
                }).render(this.$refs.paypal);
            }
        }
    }
</script>