HTML:
<div id="destiny-output">
    <certificate-detail-flexible-view>
        <!-- Variables available: status, courseStatus, functions, components, course -->
        <!-- Show different content depending on the state of the view ('loading', 'error' or 'ready') -->
        <loading-icon v-if="status.state === 'loading'"></loading-icon>
        <p v-else-if="status.state === 'error'">There was an error: {{status.errorMessage}}</p>

        <template v-else>
            <!-- Example of using data -->
            <h1 class="border-b my-4">Example</h1>
            <!-- Output certificate name -->
            <h2 class="my-4">{{certificate.name}}</h2>

            <h3 class="my-4">Description</h3>
            <!-- Output certificate description -->
            <div v-html="certificate.description"></div>

            <!-- Output nested list of Program Streams and Courses that belong to them -->
            <h3 class="my-4">Certificate Streams & Courses</h3>
            <p>Click on a course to load its data.</p>
            <ul>
                <li v-for="stream in certificate.certificateStreams">
                    {{stream.name}}
                    <ul>
                        <li v-for="course in stream.items" @click="functions.fetchCourse(course.id)" class="cursor-pointer">{{course.name}}</li>
                    </ul>
                </li>
            </ul>

            <h4 class="my-4">Course Details</h4>
            <!-- Show different content depending on the state of the view ('loading', 'error' or 'ready') -->
            <loading-icon v-if="courseStatus.state === 'loading'"></loading-icon>
            <div v-if="course" class="w-[90%] mx-auto">
                <h5 class="my-4">{{course.name}}</h5>

                <!-- Format instructionMethods as a comma-separated list -->
                <p class="my-4" v-if="course.instructionMethods.length"><strong>Delivery:</strong> {{functions.formatInstructionMethods(course.instructionMethods)}}</p>

                <h6>Course Description</h6>
                <!-- Output course description -->
                <div v-html="course.description"></div>
            </div>

            <!-- Data information -->
            <h1 class="border-b my-4">Data</h1>

            <h2 class="my-4">Functions</h2>
            <div v-html="functions.list()"></div>

            <h2 class="my-4">Certificate</h2>
            <endpoint-table :data="certificate"></endpoint-table>

            <h2 class="my-4">Course</h2>
            <endpoint-table :data="course"></endpoint-table>
        </template>
    </certificate-detail-flexible-view>
</div>

JavaScript:
new CMSStartD1Connector({
    el: document.getElementById("destiny-output"),
    config: CMSConfigObject.destinyOne,

    setup: ({vue, status, courseStatus, functions, certificate, course}) => {
        /*
            vue refs must be accessed with .value
            status: object containing info on view state. Contains 'state' and 'errorMessage' properties
            courseStatus: object containing info on course state. Contains 'state' and 'errorMessage' properties
            functions: object containing various functions
            certificate: vue ref object containing certificate information
            course: vue ref object containing course (retrieved from functions.fetchCourse())

            Example of access:
            filterOptions.value.availability.default
            currentFilters.availability
            courses.value[0].name
            pagination.currentPage.value
            keyword.value
        */

        // Vue utilities are properties of vue (vue.ref, vue.reactive, etc)
        // Available vue utilities: ref, reactive, computed, onMounted, onUnmounted, watch, watchEffect, nextTick, onUpdated
        const exampleRef = vue.ref(null);
        const exampleReactive = vue.reactive({
            prop1: 'value 1',
            prop2: 'value 2',
        });

        // certificate and course are null until the data is loaded
        console.log("certificate: ", certificate.value);
        console.log("course: ", course.value);

        // Watch for the 'ready' state to know they're loaded and the view is ready
        vue.watch(status, () => {
            if (status.state === 'ready') {
                console.log("loaded certificate: ", certificate.value);

                // Override default page title
                functions.setPageTitle('My Page');
            }
        });
        vue.watch(courseStatus, () => {
            if (courseStatus.state === 'ready' && course.value) {
                console.log("loaded course: ", course.value);
            }
        });

        // Return anything you want to be available in the template as an object
        // (Note: template refs must be returned in order to function)
        return {
            exampleReactive,
        };
    },
});