Vue Js Check property exist in object

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <h3>Vue Js check property exist in object</h3>
    <div id="app">
        <p v-if="hasName">The user has an Name.</p>
        <p v-else>The user does not have an Name.</p>
        <p v-if="hasEmail">The user has an email address.</p>
        <p v-else>The user does not have an email address.</p>
    </div>
    <script type="module">
        const app = new Vue({
            el: "#app",

data() {
                return {
                    userData: {
                        name: 'John',
                        age: 30
                    }
                };
            },
            computed: {
                hasName() {
                    return this.userData.hasOwnProperty('name');
                },
                hasEmail() {
                    return this.userData.hasOwnProperty('email');
                }
            }

});
    </script>
</body>
</html>