How to reference data from other data in Vue 3

I have an array [] stored as a constant in Vue 3 setup() method. The array is composed of X objects and is part of the responses of a form.

I want to display each object in a single dynamic page (submissions/:id) for my internal dashboard with v-for in the template as a div, so I don’t have to repeat code for markup. For this I thought I could do something like this:

<template>
  <div>
    <div v-for="(item, index) of entries" :key="index">
      <dt class="text-sm font-medium text-gray-500">{{ item.label }}</dt>
      <dd class="mt-1 text-sm text-gray-900">{{ item.response }} // Comes empty in the template</dd>
    </div>
  </div>
</template>


<script>
import { ref, onMounted } from "vue";
import { supabase } from "../utils/supabaseClient.js";

export default {
  setup() {
    const data = ref({
      // It's an empty object, (all of them are strings) data is populated onMounted but it comes undefined, I also tried in beforeEnterRoute with no success
      name: "John Example",
      company: "Example Company",
      radio: "False",
    });

    const entries = ref([
      // ... more entries before this one
      {
        label: "Name",
        response: data.value.name, // this one comes undefined, as all the others I could put here.
      },
      {
        label: "Name of the company",
        response: data.value.company, // this one comes undefined, as all the others I could put here.
      },
      {
        label: "Do you have something to add?",
        response: data.value.radio, // this one comes undefined, as all the others I could put here.
      },
    ]);

    onMounted(async () => {
      //api call made with supabase client because I'm using their service.
      let { data: rows, error } = await supabase.from("submissions").select("*").order("date_submitted", { ascending: false });

      if (error) {
        console.log(error);
        return;
      }

      data.value = rows;
    });

    return {
      data,
      entries,
    };
  },
};
</script>

I would also like to point out that I already tried using beforeRouteEnter and onBeforeMounted, with no success.

This is an issue to how you’re trying to “destructure” your items. It’s incorrect.

I don’t know what response you get, if you paste just the full response, I could help further.
Though if you’re trying to get nested items from data, then you’d do

const { data: { rows, error } } = await supabase.from()