Vue-i18n translation in script part of component not updating when changing lang

Question

I have a pretty simple landing page in Vue.js and Bootstrap vue and I managed to get i18n running pretty well on the whole page, however, on the subject part of the contact form I have some options to choose from (with a default value that says "Select one"), that I also want them to be translated.

import i18n from "@/i18n";

export default {
data() {
return {
  errors: [],
  form: {
    email: "",
    subject: null,
    message: "",
  },
  subject: [
    { text: i18n.t("contact.subjectoption"), value: null },
    this.$t("contact.subjectoption1"),
    "Business Inquiry",
    "Social Media",
    "Other",
  ],
  msg: "",
  show: true,
};}}

However when I change languages, the whole landing page updates the language but the options do not!

Is there something I missed?

Thanks in advance!

Answer 1

Data isn't smart enough to know that you locale changed.

You can instead create a computed property, which unlike data can detect and recompute when your language changes.

export default {
  computed: {
    subject() {
      return [
        { text: this.$t("contact.subjectoption"), value: null },
        this.$t("contact.subjectoption1"),
        "Business Inquiry",
        "Social Media",
        "Other"
      ]
    }
  }
  data() {
    return {
      errors: [],
      form: {
        email: "",
        subject: null,
        message: ""
      },
      msg: "",
      show: true
    }
  }
}