Как я могу динамически отображать переведенные элементы в моем шаблоне Vue?

Question

Я динамически отображаю список значений в приложении vue.js. Эта часть проста, используя синтаксис руль / усы.

const types = {
    type_a: {
        key1: "value1",
        key2: "value2",
        label: "My label1",
        I18n_label: #{i18n.__("My label1")}
    },
    type_b: {
        key1: "value1",
        key2: "value2",
        label: "My label2",
        I18n_label: #{i18n.__("My label2")}
    }
  }

li.list-group-item.row(v-for='type in types')
              .col.col-xs-10
                span.span {{type.label}}

Однако мне также нужно, чтобы эти значения были переведены на несколько языков с использованием тегов I18n. Это не работает:

li.list-group-item.row(v-for='type in types')
              .col.col-xs-10
                span.span {{type.I18n_label}}

И не работает:

const types = {
    type_a: {
        key1: "value1",
        key2: "value2",
        label: "My label1",
        I18n_label: `${i18n.__("My label1")}`
    }…

Я также попытался создать функцию для вычисления значений (преобразовав «My label1» в $ {i18n .__). («Мой ярлык1»)}, но у меня это тоже не сработало.

Подобные вопросы, которые были заданы, достаточно разные, чтобы оставить меня в недоумении.

Есть предложения?