When starting page, this happens:

1. console.log(products.showData()) shows undefined
2. Uncaught TypeError: products.showData is not a function
3. Uncaught (in promise) TypeError: products.productList is undefined

All what I wanted is just return 1 with showData method. Can anybody please tell me what's wrong in this code?

<script>
var products = Vue.createApp ({
            el:"#products",
            data: function() {
                return {
                    productList: [],
                    product: {
                        sku: 0,
                        name: '',
                        price: 0,
                        attr: {
                            size: 0,
                            weight: 0,
                            dimensions: {
                                h: 0,
                                w: 0,
                                l: 0
                            }
                        }
                    }
                }
            },

            components: ['sku'],
            methods:{
                addProduct: function(){
                    this.productList.push(this.product)
                    console.log(this.productList[0]['sku'])
                },
                showData: function(){
                    return '1'
                }
            }
        })
        
        products.mount("#products")
        
        products.component('product', {
            template: `
                <span>
                {{ this.sku }}<br>
                {{ this.name }}<br>
                {{ this.price }}<br>
                {{ this.size }}
                </span>
            ` ,
            data: function(){
                return {
                    'sku': products.productList[0]['sku'],
                    'name': 'name',
                    'price': 100,
                    'size': 10
                }
            }
        })
        
    console.log(products.showData())