storybook/docs/snippets/vue/simple-page-implementation.3.mdx

```html
<!-- YourPage.vue -->

<template>
  <PageLayout :user="user">
    <DocumentHeader :document="document" />
    <DocumentList :documents="subdocuments" />
  </PageLayout>
</template>

<script>
  import PageLayout from './PageLayout';
  import DocumentHeader from './DocumentHeader';
  import DocumentList from './DocumentList';
  import { reactive } from 'vue';
  
  export default {
    name: 'DocumentScreen',
    components: { PageLayout, DocumentHeader, DocumentList },
    props: {
      user: {
        type: String,
        default: 'N/A',
      },
      document: {
        type: Object,
        default: () => ({
          id: 1,
          title: 'A document',
          content: 'Lorem Ipsum',
        }),
      },
      subdocuments: {
        type: Array,
        default: () => [],
      },
    },
    setup(props) {
      props = reactive(props);
      return {
        /**
         * What will be returned here will available to the component
         * Functions referenced here will act like methods
         */
      };
    },
  };
</script>
```