About the difference between vue's data, and return data?

the problem found during debugging yesterday is that the data in data and return data, can be called

data: {
    name:libai
}
methods: {
    function1(){
    }
}
---------------------
return data(){
    name: libai
},
methods:{
    function1(){
    }
}

if I call in a function, this.name can be called. But yesterday, when using a component, I used the render template according to the example, in which if data is used, the call to this.funtion1 (), shows that it is not defined, but if it is return data, it can be called to this.function1,. What is the difference between the two?
actual code

data(){
    return {
{
                        align: "center",
                        title: "",
                        render: (h, params) => {
                            return h("div", [
                                h("i-button", {
                                    props: {
                                        type: "error",
                                        size: "small",
                                    },
                                    style: {
                                        marginRight: "5px"
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                            axios({
                                                method: "post",
                                                url: "/delete_graph/",
                                                data:                     Qs.stringify({"delete_name":params.row.name})
                                            })
                                        }
                                    }
                                }, "Delete")
                            ])
                        }
                    }
 }
}

this part, if not used, the this.remove function in the return data click event is undefined. Is this not the component, is it the reason for the render function


the official website has a clear explanation, link

When defining a component, data must be declared as a function that returns the initial data object, because there will be many instances created using the same definition. If we use a plain object for data, that same object will be shared by reference across all instances created! By providing a data function, every time a new instance is created we can call it to return a fresh copy of the initial data.

that is, when defining component, you must use function.


official document ide/components.html-sharpdata-%E5%BF%85%E9%A1%BB%E6%98%AF%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0" rel=" nofollow noreferrer "> Link

personal understanding: vue is componentized, and the methods and properties defined by each component (that is, the various values in data) should have its local scope, that is, it should be used within a separate component. All functions return in form, so that the properties and methods returned in each component do not interfere with each other. I don't know if my understanding is

.
Menu