Reference domain

src/components/Card.vue

@@ -5,12 +5,19 @@
                 ?
             </Box>
         </div>
+        <template v-for="item, index in items" >
+            <div class="item" :key="item.id">
+                {{ index }}  {{ item.title }} {{ item.artist }} {{ item.duration }}
+                <button :disabled="item.disabled" @click="orderItem(item)">Order</button>
+            </div>
+        </template>
     </div>
 </template>
 
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
 import posed from "vue-pose";
+import domain from "@/domain/domain";
 
 @Component({
     components: {
@@ -23,7 +30,7 @@ import posed from "vue-pose";
 export default class CardComponent extends Vue {
     private isVisible: boolean;
     public data() {
-        return { isVisible: this.isVisible };
+        return { isVisible: this.isVisible, items: domain.musicCatalog.get() };
     }
     public mounted() {
         setInterval(() => {