v-btn of v-dialog disappears when adding v-bind to attribute - vue.js

Question

With Vuetify, I created a dialog in which I want to bind placeholders of my different v-text-field.
<template>
<v-row justify="center">
<v-dialog v-model="dialog" persistent max-width="600px">
<template v-slot:activator="{ on }">
<v-btn text icon dark v-on="on" color="black">
<v-icon>mdi-pencil-outline</v-icon>
</v-btn>
</template>
<v-card>
<v-card-title>
<span class="headline">Edit profile</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col cols="12" sm="6" md="4">
<v-text-field v-model="f_name" :label="getName()" required></v-text-field>
</v-col>
</v-row>
</v-container>
</v-card-text>
</v-card>
</v-dialog>
</v-row>
</template>
<script>
export default {
name: "edit_form_personal",
data() {
return {
dialog: false,
f_name: '',
l_name: '',
email: '',
phone: ''
}
},
methods: {
getName() {
return 'joe'
}
},
}
</script>
I am using getName() to bind 'joe' inside my form.
The issue is that when I change
<v-text-field v-model="f_name" label="First Name" required></v-text-field>
to :
<v-text-field v-model="f_name" :label="getName()" required></v-text-field>
the <v-btn> disappears as if the v-dialog was broken.

Answer 1

Move the getName function from methods to computed property
see the working codepen here: https://codepen.io/chansv/pen/xxxOJGq?editors=1010
<script>
export default {
name: "edit_form_personal",
data() {
return {
dialog: false,
f_name: '',
l_name: '',
email: '',
phone: ''
}
},
computed: {
getName() {
return 'joe'
}
},
}
</script>
also use getName instead of getName() in text field and :label instead of :v-label
<v-text-field v-model="f_name" :label="getName" required></v-text-field>