RenewalMessage.vue

<template>
  <translation
      :message="`${$t('[0] [1] [2]')}`"
      element="p">
      <i
        slot="0"
        class='fa fa-credit-card mr--small'/>
      <span slot="1">
        {{
          $t('We just tried to renew your subscription for [0], but there ' +
          'was a problem with the payment.', 'Teamwork Projects')
        }}
      </span>
      <translation
        slot="2"
        element="span"
        :message="`
          ${ $t('Please update your billing information, or if you have' +
          'questions you can contact our [0]')
        }
        `">
        <a
          href="support"
          slot="0">{{ $t('support team') }}</a>
      </translation>
    </translation>
</template>

Translation.js

// @vue/component
export default {
  name: 'Translation',
  props: {
    message: {
      type: String,
      default: '',
    },
    element: {
      type: String,
      default: 'div',
    },
  },
  render(createElement) {
    const messageArray = this.message.split(/(\[[0-9]\])/);
    Object.values(this.$slots).forEach((slot) => {
      const index = messageArray.indexOf(`[${slot[0].data.slot}]`);

      if (index < 0) return;

      messageArray[index] = slot;
    });
    return createElement(this.element, messageArray);
  },
};