I want to achieve data transfer from component to root element in Vue. I am trying to access the 'title' value from root element with method. When the code is executed, the console throws me 'undefined' instead of 'title' value. Is it even possible with my idea?

var app = Vue.createApp({
    props: ['handle'],
    components: ['custom-form'],
    methods: {
        showData: function() {
            console.log (this.handle)
            return this.handle
        }
    },
    created() {
        console.log (this.showData())
    }
})

app.component ('custom-form', {
    props: ['value'],
    template: `
        <h1>{{title}}</h1>
        <input type="text" v-model="inputValue" />
    `,
    data(){
        return {
            title: 'login'
        }
    },
    computed:{
        inputValue:{
            get(){ this.title },
            set(v){ this.$emit('update:inputValue',v) }
        }
    },
    methods: {
        handle(){
            return this.inputValue
        } 
    }
})

app.mount('#app')