Vuejs - parent array changes but child does not see that prop change

Question

I have this in a parent:

{{ fencing }}
<FencingTable
   v-if="fencing.length > 0"
   :fencing="fencing"
   :facility="facility"
/>

get fencing() {
   return this.$store.state.fencing;
}

I have this in the child:

<template>
   <div>
   {{fencing}}
...

export default class FencingTable extends Vue {
   apiLocation = Vue.prototype.$apiLocation;
   @Prop() fencing: Fencing[] | null = null;
   @Prop() facility: Facility | null = null;
      ...
}

When I update my store and add the first item to the array, I see the parent render the item but the child shows an empty array. If i reload the page everything works and subsequent adds to the array show up everywhere correctly.

How do I make my child properly update when the first item is added to the array?

Answer 1

From the vue-property-decorator guide:

It's not supported to define each default property like @Prop() prop = 'default value'

In other words, don't specify a default value that way using = but like:

@Prop({ default: null }) fencing: Fencing[] | null;
@Prop({ default: null }) facility: Facility | null;