How to populate data all through axios in created lifecycle?

Question

Vue.js

I have a problem that while the life cycle I use like this

beforeCreate: function () {
            let transaction = new RestApi('transaction.json');
            transaction.list().then(res => {
                this.accounts = res.data.accounts;
                this.transactions = res.data.transactions;
            });
        },

Then the data in this.accounts will be filled in when I checked the beforeUpdate life cycle in the console and that is why I have such errors

Error in render: "TypeError: Cannot read property 'toString' of undefined"

Although everything is rendered normally, but in the console there is such an error.
Here is my sandbox. in file /src/App.vue https://codesandbox.io/s/qzmr6lp01j

Answer 1

Set null as initial values ​​for accounts and transactions. In the template, you add v-if="accounts"to v-if="transactions"those blocks inside which elements are rendered based on the corresponding properties.