Why is it impossible to mold 2 received arrays into 1?

Question

JavaScript

I write this code:
Vue:

data() {
    return {
      info: null,
      users: null
    };
  },
  mounted() {
    this.axios
      .get("https://jsonplaceholder.typicode.com/posts")
      .then(response => (this.info = response.data));
    this.axios
      .get("https://jsonplaceholder.typicode.com/users")
      .then(response => (this.users = response.data));
  },
  computed: {
    fullArray() {
      return this.info.concat(this.users)
    }
  }

HTML:

<div id="app">
    {{fullArray}}
    <div>
      <ul>
        <li class="box" v-for="(item,index) in info" :key="item.id">{{info[index].body}}</li>
      </ul>
      <ul>
        <li class="users" v-for="(user,index) in users" :key="user.id">{{users[index].name}}</li>
      </ul>
    </div>
  </div>

I received 2 arrays separately, brought them to the page, all the rules. But for some reason it is impossible to merge them, in the console it gives an error

TypeError: Cannot read property 'concat' of null

and does not render the component at all. If you remove computed, then everything, of course, renders well. I'm trying to make a test task , as you can see, I need to get the name from one request, the text of the comment from another and display it in one element of the list
{{fullArray}} just to check
it. What is the error and how to combine them in the end?

Answer 1

Because at first the component is displayed, and then the data comes. And at the moment of the first fullArray UPD calculation Add a check, something like this:this.info === null

fullArray() {
  const arr = []

  if (this.info) arr.concat(this.info)
  if (this.users) arr.concat(this.users)

  return arr
}