How to insert data from a specific store vuex object?

Question

Vue.js

I will describe the situation. I have some local "database" db.json. It stores information in objects about several form fields (for example, label text, id, etc.). I need to get the data of a certain object from the component and insert it on the page.
For example, db.json has an object:

"cardNumber": {
      "id": "v-card-number",
      "label": "Номер карты",
      "errorLabel": "Неверный номер карты",
      "helpText": "",
      "isShow": true
    },

I need to access the store and get the label for example, thus: cardNumber.label.
What I've done. I set up store, vuex, added a getter to a certain component, let's call it FIELDS.
Next, for example, I want to display this data in the span tag: And yes, they are displayed, BUT ... An error appears: [Vue warn]: Error in render: "TypeError: Cannot read property 'label' of undefined" Moreover, the text is displayed and remains, but immediately after this error appears, how to solve it? I assume that the data itself from the store comes after the page is rendered, which is why at the render stage Vue cannot find the data I need and throws an error, but I'm probably wrong, and if not, how can I deal with this? It would be possible to output data like:
<span>{{ FIELDS.cardNumber.label }}<span/>



<li v-for="field in FIELDS"><li/>
And then insert the necessary data, but I can’t do that.
Thank you!

Answer 1

In general, I did it differently. In the data component, I wrote the fields object with field objects (for example,
data() { fields: { phone: {}, email: {}, etc. }}). In watch I did the following:

FIELDS (data) {
                this.fields.email = data.fields.email 
                //И так для каждого поля далее....
            }

And then just paste:

<span>{{ fields.email.label }}</span>
<-- и так далее... -->

So there are no errors