I'm facing an issue where my parent component has the following code:
{{ fencing }}
<FencingTable
v-if="fencing.length > 0"
:fencing="fencing"
:facility="facility"
/>
get fencing() {
return this.$store.state.fencing;
}
Meanwhile, in the child component:
<template>
<div>
{{fencing}}
...
export default class FencingTable extends Vue {
apiLocation = Vue.prototype.$apiLocation;
@Prop() fencing: Fencing[] | null = null;
@Prop() facility: Facility | null = null;
...
}
The problem arises when I update my store and add the first item to the array. While the parent successfully renders the item, the child shows an empty array. Only after reloading the page does everything display correctly. Subsequent additions work fine as well.
What steps should I take to ensure that my child component updates properly when the first item is added to the array?