How to use vue-i18n inside a script?

Question

Vue.js

There is a small codeandbox
project I use the vue-i18n translator.
Hello World template:
<h1>{{msg}}</h1>
And script:

data() {
    return {
      msg: `{{ $t("welcomeMsg") }}`
    }
  }

Plugins/i18n.js :

const messages = {
  en: {
    welcomeMsg: "Welcome to Your Vue.js App",
  },
  es: {
    welcomeMsg: "Bienvenido a tu aplicación Vue.js",
  }
};

Question: How can I use vue-i18n inside a script like this msg:{{ $t("welcomeMsg") }}?
**PS:** `this.$t("welcomeMsg")` this works but doesn't translate!

Answer 1

computed: {
  msg() {
    return this.$t('welcomeMsg');
  },
},

Answer 2

export default {
  name: "HelloWorld",
  data() {
    return {
      msg: this.$t("welcomeMsg")
    }
  }
};