creating click handler AFTER next render tick

vue-theme/src/components/gallery.vue

@@ -19,7 +19,7 @@ export default {
     },
     data() { 
         return {
-            selected: 0
+            selected: -1
         }
     },
     methods: {
@@ -52,6 +52,9 @@ export default {
         }
     },
     mounted() {
+        // Set the first selection
+        this.selected = this.fullscreengallery
+        
         window.addEventListener('keydown', this.interpretKeypress)
     },
     destroyed() {

vue-theme/src/pages/single.vue

@@ -60,47 +60,54 @@ export default {
                 postsMap[post.slug] = post
                 return postsMap
             }, {})
-        },
+        }
     },
     methods: {
-        checkForImages(posts) {
-            const allBlocks = posts[this.$route.params.slug].blocks.map(block => {
+        pageBlocks(posts) {
+            return posts[this.$route.params.slug].blocks.map(block => {
                 if(block) return block
             })
-            allBlocks.forEach(block => {
+        },
+        checkForImages(posts) {
+            this.pageBlocks(posts).forEach(block => {
                 if(!block) return
                 const doc = new DOMParser().parseFromString(block, 'text/html')
                 const gallery = doc.querySelectorAll('.blocks-gallery-item img')
                 // add captions
-                if(gallery) {
+                if(gallery.length) {
                     this.images = [].slice.call(gallery).map(
                         item => { return item.src }
                     )
                 }
             })
-        },
-        wrapImagesWithLink() {
-            const gallery = document.querySelectorAll('.blocks-gallery-item figure, figure.wp-block-image')
-            gallery.forEach((item, i) => {
-                item.addEventListener('click', () => {
-                    this.fullscreengallery = i
-                })
-            })
         }
     },
     watch: {
         posts(newVal, oldVal) { 
             // Loads images from the DOM
             this.checkForImages(newVal)
+            
+            // Gottas be on the next render tick
+            this.$nextTick(() => {
+                let gallery
+                this.pageBlocks(newVal).forEach(block => {
+                    if(!block) return
+                    gallery = document.querySelectorAll('.blocks-gallery-item figure')
+                })
+                
+                if(gallery.length < 1) return
+
+                gallery.forEach((item, i) => {
+                    item.addEventListener('mouseup', event => { this.fullscreengallery = i })
+                })
+            })
         }
     },
-    mounted() {
+    created() {
         // TODO: Only makes req if this hasn't been loaded yet
         let type = this.$route.params.type
         type = type.charAt(0).toUpperCase() + type.slice(1)
         this.$store.dispatch(`getAll${type}`)
-
-        this.wrapImagesWithLink()
     }
 }
 </script>