Display translation on a component in Vuejs

I want to show a translation on the title of a component. Here is the HTML code:

   <user-card
      :totalUser="totalUsers"
      color="primary"
      icon="UserIcon"
      user-title="Total users"
  />

On my user-card component I have this:

  <b-card class="text-center">
    <b-avatar
        :variant="`light-${color}`"
        class="mb-1"
        size="45"
    >
      <feather-icon
          :icon="icon"
          size="21"
      />
    </b-avatar>
    <div class="truncate">
      <h2 class="mb-25 font-weight-bolder">
        {{ totalUser}}
      </h2>
      <span>{{ user-title }}</span>
    </div>
  </b-card>

And to use translation I have this syntax where I get the translated terms from the JSON file:

{{$t("Total users")}}

How can I implement this on the user-title?

Solution

Have a look at this, I have tried to replicate your scenario in code sandbox.

sample app

What you are doing wrong is that $t is a function that accepts variable name which has an actual message in it, first you have to define a variable e.g totalUserTitle: 'Total users' for multiple languages like I did in index.js, and then you can use it as $t(totalUserTitle).