Vue array prop in child component not updating

I have a model from a backend where the property that normally contains an array of elements can be nullable. When this happens I’ll init it to an empty array. However when doing that it seems to break my ability to update the array in the child component. Sample code can be found below.

Vue.component('Notes', {
 template: '<div>{{items}}<ul><li v-for="item in items">{{ item.text }}</li></ul><button @click="add">Add</button></div>',
 props: {
  items: Array,
 },
 methods: {
   add() {
    console.log('added');
    this.items.push({ text: "new item" });
   }
 }
});

new Vue({
 el: "#demo",
 data() { return { model: { }  }},
 created() { if(!this.model.items) this.model.items = []; }
});

<script src="https://unpkg.com/vue"></script>

<div id="demo">
  <Notes :items="model.items" />
</div>

If data in the main component is model: { items : [] } everything works fine. But I don’t have control over the backend data to guarantee that.

Answer

In your Notes component, you declare a model in the data, then, just underneath, you add an items[] if one doesn’t exist already. This is not a good practice, and could be the cause of your problems. Vue needs to know about all the properties on objects it’s watching. They need to be there when Vue first processes the object, or you need to add them with Vue.set().