strated to displaying falgcollection on the left of results

web/themes/custom/materiotheme/vuejs/components/User/FlagCollection.vue

@@ -0,0 +1,60 @@
+<template>
+  <section class="flag-collection">
+    <h3>{{collection.name}}</h3>
+    <ul v-if="loadedItems">
+      <li
+        v-for="item in loadedItems"
+        :key="item.id"
+      >{{item.attributes.title}}</li>
+    </ul>
+    <span v-else class="loading">Loading</span>
+  </section>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex'
+
+export default {
+  name: "FlagCollection",
+  props: ['collection'],
+  data: () => ({
+    loadedItems: false
+  }),
+  computed: {
+    ...mapState({
+      flagcolls: state => state.User.flagcolls
+      // openedCollid: state => state.User.openedCollid
+    })
+  },
+  // watch: {
+  //   flagcolls (newv, oldv) {
+  //     console.log('watching flagcolls');
+  //     if( typeof this.flagcolls[this.collection.id].loadedItems !== 'undefined' ) {
+  //       this.loadedItems = this.flagcolls[this.collection.id].loadedItems
+  //     }
+  //   }
+  // },
+  created() {
+    this.unsubscribe = this.$store.subscribe((mutation, state) => {
+      if (mutation.type === 'User/setLoadedCollItems') {
+        this.loadedItems = state.User.flagcolls[this.collection.id].loadedItems
+      }
+    });
+  },
+  beforeDestroy() {
+    this.unsubscribe()
+  },
+  // beforeMount () {
+  //   if (typeof this.flagcolls[collection.id].loadedItems === 'undefined') {
+  //     this.
+  //   }
+  // },
+  // methods: {
+  //   ...mapActions({
+  //     loadFlagCollItems: 'User/loadFlagCollItems'
+  //   })
+  // }
+}
+</script>
+<style lang="scss" scoped>
+</style>