Passing dynamic text value to shared button component in Vuejs

I'm trying to pass dynamic text value to my shared component named "Button component" whose text should appear in Spanish or English based on the language chosen.

For translation, I already have translation.service.js doing the conversions.
I'm not sure how to pass the value to the :text parameter below by using the service as the current format for :text is showing error. It's working fine elsewhere in p tags.
Any help/suggestion would be appreciated as I'm not able to move forward.

<Button 
@on-click="currentStep = 1"
:text= {{ this.getTranslation("intro_modal_persona_select_button_next") }}  
bgColor="transparent"
txtColor="#d64ba1"
/>

The full code in <template> is:

<template>
<div class="d-flex mb-3 justify-content-between">
<div class="p-2">
<Logo :type="logoType" />
</div>
<div class="p-2">
<ButtonIcon symbol="corner-down-left" :disabled="disabled" />
</div>
</div>
<div class="d-flex flex-column">
<!--Step 1: Language Selection-->
<p class="step">{{ currentStep }} OF 2</p>
<p class="community-name">
{{  community.c_community_name}}
</p>
<div class="p-2 flex-fill" v-if="currentStep == 1">
<VueScrollPicker 
id="language-scroller"
:options="options" 
v-model="selectedLanguage"
/>
<!--Language selection scroll-->
<p class="option-select">
{{ this.getTranslation("intro_modal_persona_select_language") }}
</p>
<div 
v-if="selectedLanguage"
class="button_container text-center"
>
<Button
@on-click="currentStep = 2"
:text= {{ this.getTranslation("intro_modal_persona_select_button_next") }} 
/>
</div>
</div>
<!--Step 2: Agent Selection-->
<div class="p-2 flex-fill" v-if="currentStep == 2">
<div id="persona-slider-wrapper" ref="persona_slider_wrapper">
<PersonalSlider :personas="personas" />
</div>
<p class="option-select">
{{ this.getTranslation("intro_modal_persona_select_agent") }}
</p>
<div 
v-if="selectedLanguage"
class="button_container text-center"
>
<Button 
@on-click="goToDigitalHumanView"
:text= {{ this.getTranslation("intro_modal_persona_select_button_begin") }} 
class="mb-2"
/>
<Button 
@on-click="currentStep = 1"
:text= {{ this.getTranslation("intro_modal_persona_select_button_back") }}   
bgColor="transparent"
txtColor="#d64ba1"
/>
</div>
</div>
</div>
<div class="d-flex justify-content-between">
<MainFooter />
</div>
</template>

My translation service:

class TranslationService {
async loadTranslations() {
return [
// Intro Modal Persona Select
{
'key': 'intro_modal_persona_select_language',
'en': 'Select your Language',
'es': 'Elige tu Idioma'
},
{
'key': 'intro_modal_persona_select_button_next',
'en': 'Next',
'es': 'Siguiente'
},
{
'key': 'intro_modal_persona_select_agent',
'en': "Select your agent",
'es': 'Seleccione su agente'
},
{
'key': 'intro_modal_persona_select_button_begin',
'en': 'Begin',
'es': 'Comenzar'
},
];
}
}
export default new TranslationService()

Binding a value to a prop should be done like v-bind:attr="value" or :attr="value", and handling events should be done in this way v-on:click="eventHandler" or @click="eventHandler":

<Button 
          @click="currentStep = 1"
          :text='getTranslation("intro_modal_persona_select_button_next")' 
          bgColor="transparent"
          txtColor="#d64ba1"
/>