Vue3 setup variable not declared when accessing in template

January 17, 2024

In my vue file, my template has a div which uses v-for on an "items" array to load each element of the array visually. I have the "items" array defined in setup() using the composition API, and I return "items" in setup. Even with all this, when I try to render or load the page, it errors stating "main.js:30 ReferenceError: items is not defined"

In my template

<div v-for="product in items" :key="product.id" class="group relative">

In my <script>

export default {
      setup() {
        let items = ref([]);

        onMounted(()=> {
        //here i retrieved data from firebase and pushed to items
        });

        return { items };

      }
    }

My error in dev tools is "main.js:30 ReferenceError: items is not defined"

(edited to include minimal reproducible example below)

<template>
  <div v-for="product in items" :key="product.id" class="group relative" >{{product.id}}</div>
</template>

<script >
import { ref,onMounted } from 'vue'
export default {
      setup() {
        let items = ref([]);
        onMounted(()=> {
        items.value = [{id:'a'}]
        });
        return { items };
      }
    }
</script>