[Vuejs]-VueJs property not displaying in template but exists in data

There are a few problems to address here.

The axios call is asynchronous, so at the point the created function finishes running the then callback will not have been called. The rest of the code will have run, so newDocs will have been assigned a value, it’s just the conventions property that won’t have been set.

Then the component renders. At this point conventions will be undefined, as you’ve observed. There’s not much you can do to avoid this, you’ll just need to write your template to handle the data being missing. There are various ways to shuffle the problem around so that it is handled in a different place but ultimately something has to handle it.

Next the axios calls will come back, one by one. As each call completes it will update the conventions property for that particular object.

In theory this will trigger the reactivity system and cause the component to re-render. However, for that to happen:

1. The datas objects must be reactive.
2. The property conventions must already exist within those objects. See https://v2.vuejs.org/v2/guide/list.html#Object-Change-Detection-Caveats

It is likely that condition 1 is already satisfied. It’s not made clear in the question exactly where the properties docs and newDocs are defined but my guess would be that docs is a prop and newDocs is a local data property. There’s a lot of subtle nuance here when it comes to determining whether datas will be reactive but if you have newDocs declared inside your data function then you should be ok. You might get away with it even if you don’t have it declared there but I would suggest including it anyway.

data () {
  return {
    newDocs: null
  }
}

More likely is that your problem is due to the property conventions not existing when datas is initially made reactive. The simplest solution here is to use Vue.set or $set:

this.$set(doc.datas, 'conventions', response.data)

By using $set you’ll not only set the property value but also make it reactive. This will allow it to trigger the template so that you see the new value.

All of that said, it seems a little peculiar to be updating the conventions property in this way. It seems likely it is updating an object that is owned by the parent component, which is generally discouraged. Alternative solutions include the use of a computed property or creating a lookup map for the conventions.