I'm running into an issue with Vue 3. Whenever I update the data used to generate content in a subcomponent, the subcomponent fails to reactively update. I've been using the setup() function for the subcomponent, and I thought that props in Vue 3 are supposed to be reactive. I'm not sure where I might be making a mistake.
This is my parent component:
<q-markup-table :v-show="!isLoading">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr v-for="(detailedPerson, index) in people" :key="index">
<td>
<PersonLink :person="buildPerson(detailedPerson)"></PersonLink>
</td>
</tr>
</tbody>
</q-markup-table>
Here's the method being used:
data() {
return {
people: {} as DetailedPerson[],
};
},
methods: {
buildPerson(detailedPerson: DetailedPerson): Person {
return {
slug: person.slug,
firstName: person.firstName,
lastName: person.lastName,
};
},
}
Whenever the people list gets updated, the PersonLink component doesn't reflect the changes; it seems like the props aren't reacting accordingly. This is the code for the PersonLink component:
<template>
<router-link :to="url">{{ name }}</router-link>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { NameFormatter } from 'src/common/formatters';
import { Person } from './person.models';
export default defineComponent({
props: {
person: {
required: true,
type: Object as () => Person,
},
},
setup(props) {
return {
url: `/person/${props.person.slug}`,
name: NameFormatter.formatInverseName(props.person),
};
},
});
</script>
What steps should I take to ensure reactivity when updating subcomponent props at the parent component level?