Property "projects" was accessed during render but is not defined on instance - vue.js

Question

I cannot wrap my head around this. I've looked at countless other issues, answers and I don't even understand the issue or what's causing it. I have a projects.js file with an array in it. When I import {projects} from "#/projects.js" I get the error in the title. When I add setup to <script> it works, but then I cannot export a variable that's needed for another component. What do I do? I've spent hours reading the docs & issues/answers. If someone could explain this problem to me like I'm 5 then that'd be very helpful also.
projects.js
const getImg = (name) => {
const path = `/src/assets/images/${name}`; //your imgfile
const modules = import.meta.globEager("/src/assets/images/*");
return modules[path].default;
}
export const projects = [
{
id: 5,
date: "Aprill 6, 2022",
title: "Muusika poe veebileht",
image: getImg("music_instrument_store.jpg"),
},
{
id: 4,
date: "Märts 25, 2022",
title: "Andres Kõljalg E-Portfoolio",
image: getImg("andres_koljalg_portfolio.png"),
},
{
id: 3,
date: "Märts 4, 2022",
title: "Andmemudelite & projekti planeerimine",
image: getImg("datamodels_project_planning.webp"),
},
{
id: 2,
date: "Detsember 15, 2021",
title: "Virtuaalne Instrument",
image: getImg("arduino_chello.jpg"),
},
{
id: 1,
date: "5 November, 2021",
title: "Ryan Reynolds E-Portfoolio",
image: getImg("ryan_reynolds.jpg"),
}
]
ProjectsList.vue
<template>
<div class="bg-black p-12 flex flex-col gap-20">
<router-link to="/ProjectView.vue" #click="pId = project.id" class="z-10 hover:scale-[1.02] ease-in-out duration-300 hover-trigger" v-for="(project, index) in projects" :key="index"><div class="h-44 overflow-hidden flex items-center justify-center">
<div class="absolute z-[1] p-3 px-64 flex flex-col items-center justify-center gap-2 project-card-txt-shdw h-44">
<p class="text-5xl">{{project.title}}</p>
<p class="text-lg">{{project.date}}</p>
</div>
<img :src="project.image" class="w-full ease-in-out duration-300 hover-target">
</div></router-link>
</div>
</template>
<style>
...blabla
</style>
<script>
import {projects} from "#/projects.js"
export default {
Setup(){
let pId = 0;
}
}
</script>

Answer 1

The projects variable should be returned from the setup hook in order to be accessed by template and the setup hook name should be in lowercase format :
<script>
import {projects} from "#/projects.js"
export default {
setup(){
let pId = 0;
return{ projects }
}
}
</script>