Cannot find module './undefined' when updating a template ref in Vue

Objective

Render components based on a dynamically changing reference (ref). User can perform a "search" feature that returns data and updates the reference. The updated reference should then in turn update the components which are rendered using v-for.

My Setup

I have an onMounted() lifecycle hook that makes an axios request and returns all the data into a reference.

onMounted(async () => {
    const response = await axios.get('/api/subject/')
    allSubjects.value = await response.data.data;
})

The reference:

const allSubjects = ref(null)

The template:

<OneSubject
    v-for="subject in allSubjects" 
    :key="subject.id"
    :subject="subject" 
/>

Everything works fine so far...

Problem

When I make another request for my "search" feature, the axios request works fine and I am able to get a response with data (a new array of objects).

The problem occurs when trying to update my reference with this data like so:

async function search(searchInput) {
    const response = await axios.get(`/api/subject/search/${searchInput}`)
    console.log(response) // <-- RESPONSE HAS DATA
    allSubjects.value = await response.data.data; // <-- CAUSES ERROR
}

The error that is thrown comes from the component that is rendered in the v-for:

I can verify that the reference was successfully updated with new data, but the problem seems to arise when rendering the component in the v-for?

Update

Here is the component that it is trying to render in the v-for.

<template>
    <div class="subject-wrapper" v-bind:style="{ background: `rgba(0, 0, 0, .3) url('${imgSrc}') center / cover` }">
        <div class="darken-bg"></div>
        <div class="subject-name">{{ subject.name }}</div>
    </div>
</template>

<script setup>

    import { onMounted, computed } from 'vue'

    const props = defineProps({ subject: Object }) 
    const imgSrc = computed(() => require(`@/assets/images/subject/${props.subject.image}`))

</script>

I updated my component as follows:

<template>
    <div class="subject-wrapper" v-bind:style="{ background: `rgba(0, 0, 0, .3) url('${imgSrc}') center / cover` }">
        <div class="darken-bg"></div>
        <div class="subject-name">{{ subject.name }}</div>
    </div>
</template>

<script setup>
    import { reactive, computed, onUpdated } from 'vue'
    
    const props = defineProps({ subject: Object })
    const subject = reactive(props.subject)
    const imgSrc = computed(() => require(`@/assets/images/subject/${subject.image}`))

    onUpdated(() => {
        console.log('component subject prop:', props.subject)
        console.log('subject reactive:', subject)
    })

</script>

Afterwards, the search executes without the error, but it renders the wrong component. I've console logged the values:

Solution

I found out that the error was actually coming from my server response. As you can see in the image above, the prop only has 2 values. When I am rendering the component, I require an image property that is non existent, thus throwing the error.

I updated my endpoint to return all the properties in the document and it now works.

Thanks yoduh for the suggestions that helped me get to the bottom if this!