[Solved] Vue.js Inner Components Not Updating

I came across an interesting problem in Vue.js and wanted to share the solution.

The Problem

Inner components were not updating based on changes to a computed value. Here is a snippet:

let selected = shallowRef();
let unselected: ComputedRef<Category[]> = computed(() => Categories.filter(...SNIP...));

...SNIP...

<span v-else v-for="category of unselected">
   <button @click="select(category)">
      <CategoryView :category="category"/>
   </button>
</span>

When ‘unselected’ (a computed value) was updated, the view didn’t change.

I confirmed that the computed value ‘unselected’ and v-for were working by creating a simple span to display the text values of the unselected array. When this worked, my focus shifted to the CategoryView.

The Solution

I thought to myself, “What if the component’s property needs to be reactive?” I tried it and it worked. Simply updating the following was the solution:

// Before
const category = props.category;

// After
const category = computed(() => props.category);

This leads me to believe that Vue.js under the hood reused the CategoryView components and updated their property values, thus requiring the properties themselves to be reactive for this to work.

Vue.js has documentation related to props, but it only hints at this scenario:

const props = defineProps(['size'])

// computed property that auto-updates when the prop changes
const normalizedSize = computed(() => props.size.trim().toLowerCase())

If you came across this issue, I hope this post helps you along your journey! Happy coding!