Display a component within an i18n text in Vue.js

Question

I want to add a button component in a paragraph text. I can do it manually like the 1st sample below. But, due to my text comes from i18n values, I need to import it in the text. Is there any way to put the button like a variable within the i18n text like the 2nd sample?

<p>
  1) Use
  <v-btn @click="attachmentDialog.show(item)" v-on="on">
    <v-icon small left>mdi-pencil</v-icon>Edit
  </v-btn>
  button to add booking.
</p>
<p>
  2)
  {{ $t("no_booking_info", { buttonName: $t("edit") }) }}
</p>

en.js

export default {
  no_booking_info: "Use {buttonName} button to add booking."
}

Answer 1

I found something about component interpolation here on vue-i18n documentation.

And this is how I figured my case out:

<i18n path="no_booking_info" tag="p" for="edit">
  <v-btn class="mx-2" @click="editAction">
    <v-icon left>mdi-pencil</v-icon>
      {{ $t("edit") }}
  </v-btn>
</i18n>

en.js

export default {
  no_booking_info: "Use {0} button to add booking.",
  edit: "Edit"
}