How to use components in data?

Question

Vue.js

Importing a component and using it in data ?

components: {
      LinkElement: () => import('@/components/elements/LinkElement')
    },
    data: function () {
      return {
        departments: [
          {
            id: 1,
            title: this.$t("Отдел по работе с клиентами"),
            contacts: [
              {
                id: 2,
                name: this.$t("Email"),
                value: `<LinkElement link="#">Link</LinkElement>`
              },

I insert into the template through v-html, but in the markup I get
<linkelement ...

Answer 1

v-html- only for normal html. And then you need to use it only when you can’t do without it at all.
Vueworks with data, not markup, the markup itself is built on the basis of the data.
In your case, the template itself should be:

...
<component :is="value">{{name}}</component>
...

And in data, respectively:

...
{
  id: 2,
  name: this.$t("Email"),
  value: `LinkElement`
}
...