Consider this component:
<template>
<div>
<div>{{show_data}}</div>
<div v-for="(item, i) in show_data.list" :key="i">{{item.name}}</div>
</div>
</template>
<script>
import {onMounted} from "vue"
import {reactive} from "@vue/reactivity"
export default {
props: {
definitions: Array
},
setup(props) {
const show_data = reactive({
list: []
})
onMounted(() => {
props.definitions.forEach(definition => {
console.log(definition)
show_data.list.push({name: definition.title, contact: definition.phone_number})
console.log('show_data so far:')
console.log(show_data)
})
})
return {
show_data,
}
}
}
</script>
When above code is running in npm run dev, everything executes properly and data populates. But when run in npm run prod data comes in, I can see console.log() showing each definition, and showing full show_data with the actual pushed content, but the actual render does not collect it, the {{show_data.list}} always shows [] and using v-for to iterate through it is also empty. Again, in dev all this works as intended.