Property or method "Userdata" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in

Question

I’m trying to save an input value with v-model property by vuejs component.

I want to use a vue component to save a product with a Userdata property I define an object in data section and use that in blade with v-model. But I recieve an error:

Property or method "Userdata" is not defined on the instance but referenced during render

This is my component:

    <template>
        <div >
            <table class="blueTable">
                <thead >
                    <th></th>
                </thead>
                <tbody>
                    <tr v-for="product in products " :key="product.product_id" class="{ selected: isSelected }">
                        <td class="product_name "> {{ product . product_name }} </td>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </template>
    
    <script type="text/javascript">
    import Vue from 'vue';
    import axios from "axios";

    export default{  
        mounted() {  
            
        },  
        data() {  
            return {  
                products: [],
                loading: false,
                buttonsLoading: [],
                Userdata: {
                    product_name: '',
                    product_id:0,
                },
            };  
        },  
        
        created: function () {
            this.loadproducts();
        },
        methods: {  
            loadproducts() {  
                let url = "/product_listvue";
                axios
                    .get(url)
                    .then((response) => {
                        this.products = response.data;
                    })
                    .catch((error) => console.error(error));
            },
            
            async delproductvue  (product_id)  {
                Vue.set(this.buttonsLoading, product_id, 1);
                this.loading = true;
                let url = "/delproductvue/" + product_id;
                try {
                    let response = await axios.post(url);
                    if (response.status == 419) {
                        alert('لطفا صفحه را رفرش و دوباره تلاش نمایید.');
                    }
                    if (response.status == 200) {
                        console.log(response.status);
                    }
                    this.products = response.data;
                    this.loading = false;
                }
                catch (err) {
                    console.log(err);
                    alert(err);
                    this.loading = false;
                }
            },
            
            storeproductvue: function ()  {
                let formData = new FormData();
                formData.append('product_id', p_id);
                var file_data = $('#image').prop('files')[0];
                form_data.append('image', file_data);
                form_data.append('_name', this.Userdata.product_name);
            
                Vue.set(this.buttonsLoading, product_id, 1);
                this.loading = true;
                let url = "/storeproductvue/";
                    let response =  axios.post(url,form_data);
                    if (response.status == 200) {
                        console.log(response.status);
                    }
                    this.products = response.data;
                    this.loading = false;
        }
        }
        
    </script> 

blade:

<div id="app" style="overflow-y: scroll;">
        <input type="text" id="product_name" class="form-control" v-model="Userdata.product_name">
        <!-- <button class="btn btn-info btn-sm" v-on:click="storeproductvue()"> vueذخیره</button> -->
        <product_list>
            </-product_list>
    </div>