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

Question

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!

Answer 1

I can't explain the console.logs at the bottom of your question, but based on the child component code I believe there are two changes needed to fix the overall issue.
require shouldn't ever be used in code when using Vite since require is ESM only. The Vite documentation describes a better way to import dynamic assets using new URL with import.meta.url. One caveat is that you can't use # alias when constructing the URL due to Rollup limitations (Vite's bundler). Your imgSrc then should look like this:
const imgSrc = computed(
() => new URL(`../assets/images/subject/${subject.value.image}`, import.meta.url).href
);
(actual relative path might be different on your local machine)
Change from using reactive to toRef when creating subject. Since props is reactive and you want to pull out the individual (non-reactive) property, you would use toRef for the job specifically because it keeps subject and props.subject synced together.
const subject = toRef(props, 'subject');
I don't have your exact same setup but when I tested it locally with some mock data/local image files instead of an API it worked for me. If you still have problems let me know.