How to pass yaml list through props as array to a VUE component

[bleak oxide]

Attempting to get this to work, but can't find any documentation or example of it.

Something like this:
output.yaml

data:
  - id: example
    title: Example Title
    paragraph: Example paragraph.
    modal:
      title: Example Modal Title
      list:
        - Item one
        - Item two
        - Item three

index.astro

---
import Modal from '../components/Modal.vue';
import output from '../data/output.yaml'
---
{output.data.map(obj => (
  <div>
    <h2>{obj.title}</h2>
    <h2>{obj.paragraph}</h2>
    <Modal title={obj.modal.title} list={obj.modal.list} client:only />
  </div>
))}

modal.vue

<template>
  <h2>{{title}}</h2>
  <ul v-for="item in list">
    <li>{{item}}</li>
  </ul>
</template>

<script setup>
  const props = defineProps({
    title: String,
    list: [Array],
  });
</script>

[bleak oxide]

How to pass yaml list through props as array to a VUE component

[bleak oxide]

Wait... it works... issue resolved 🤷‍♂️