How to pass input value data from Vue component to root element

I want to post json data from Vue to php, but I’m struggling to find a way to pass input value data from Vue component to root element. When I call method submitProduct, alert message simply gives me ‘undefined’. I had to strip my original code because of that stupid post balance policy. What’s wrong here?

  var productForm = Vue.createApp ({
            methods:{
                submitProduct: function(){
                    alert(JSON.stringify(productForm.product))
                    this.postData(productForm.product)
                },
                postData: function(p){
                    fetch('mysql_postdata.php', {
                        method: 'POST', 
                        mode: "same-origin",
                        credentials: "same-origin",
                        headers: {
                            "Content-Type": "application/json"
                        },
                        body: JSON.stringify({p:p})
                        //body: 'd='+d
                    })
                }
            }
        })
        
        productForm.component('custom-form', {
            props: ["value"],
            template: `
                <label>SKU<input type="text" :value=this.product.sku></label>
                <label>Name<input type="text" :value=this.product.name></label>
                <label>Price<input type="text" :value=this.product.price></label>
            ` ,
            
            data: function() {
                return {
                    product: {
                        sku: 0,
                        name: 'asdf',
                        price: 0
                    },
                    options: ['Size', 'Weight', 'Dimensions'],
                    selected: 'Size'
                }
            }
        })
        
        productForm.component('status-bar', {
            props: ['info'],
            template: '<p>{{ selected }}</p>'
        })
        
        const vm = productForm.mount('#product_form')

Answer

The product state belongs to the custom-form component so the root app cannot access the state.

If you trying to create a form and get the input from the form, you need to do 1 of this:

  1. Lift the state to the root and pass down the custom-form and bind an event to listen to the state change docs here. (only do this if the custom-form component is not deep down in the component tree)
  2. Using the state management store like Vuex to share the state within the app (in case the child component is deep down in the tree you have to pass the state down so many levels, using store management will solve that). docs here. If your app is really small consider the provide/inject API.
  3. Another choice is using the provide/inject API (similar to the context provider in react).