HTML:
<div id="destiny-output">
    <course-detail-flexible-view>
        <!-- Variables available: status, functions, components, course, sections -->
        <!-- 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>
            <!-- Output data by wrapping it in double curly brackets -->
            <h1>{{course.name}}</h1>

            <!-- Access data you return from the JavaScrip setup() method -->
            <h2>User-Defined Variables/Functions</h2>
            <p>x: {{x}}</p>
            <p>y: {{y()}}</p>
            <p>Delivery: {{delivery}}</p>

            <!-- Create template refs -->
            <p ref="exampleRef">This is a template ref</p>

            <!-- Use functions in the 'functions' object -->
            <h2>Functions</h2>
            <div v-html="functions.list()"></div>
            <button @click="addToCart(2066028)" class="mc-btn">Add to cart</button>

            <!-- Access data for this view -->
            <h2>Course Data</h2>
            <endpoint-table :data="course"></endpoint-table>

            <h2>Sections Data</h2>
            <endpoint-table :data="sections"></endpoint-table>
        </template>
    </course-detail-flexible-view>
</div>

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

    setup: ({vue, status, functions, course, sections}) => {
        // status, course and sections are vue refs and must be accessed with .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',
        });

        // course and sections are null until the data is loaded
        console.log("course: ", course.value);
        console.log("sections: ", sections.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 course: ", course.value);
                console.log("loaded sections: ", sections.value);

                // Override default page title
                functions.setPageTitle('My Page');
            }
        });

        // Access template refs after they've loaded
        vue.watch(exampleRef, () => {
            console.log("exampleRef.value: ", exampleRef.value)
        });


        // Return anything you want to be available in the template as an object'
        // (Note: template refs must be returned in order to function)
        const x = 5;
        return {
            x,
            y: () => 'This is y',
            exampleRef,
            // Use computed properties to reformat data in course and sections
            delivery: vue.computed(() => {
                // Use functions that exist in the 'functions' object
                return functions.formatInstructionMethods(course.value.instructionMethods);
            }),
            // Use 'functions' object to add a section to the cart
            async addToCart (sectionId = 000000) {
                try {
                    await functions.addSectionToCart(sectionId);
                } catch (error) {
                    // Handle error here
                    console.error("error: ", error.message);
                }
            },
        }
    },
});