Emit @layout-ready at a later, correct time

As it was, if one was to investigate the size of GridItems in an
@layout-ready event handler, the size was not yet correct.

The problem was that layout-ready was emitted in mounted() after a
call to onWindowResize(). onWindowResize() set the width with

    this.width = this.$refs.item.offsetWidth

but the width (and hence size generally) change only actually took
effect in the watcher for 'width' with:

    this.eventBus.$emit("updateWidth", this.width);

and in addition, that was done inside a this.$nextTick() for some
undocumented reason.

Now, the layout-ready event is emitted after "updateWidth" has been
emitted, so callers can investigate GridItem sizes safely.

Care is taken in the width watcher to only emit layout-ready the first
time width is set, and layout-ready is emitted in a this.$nextTick()
so that the 'updateWidth' has a chance to take effect in the child
GridItems before layout-ready is emitted. See comment in
GridLayout.vue for more details.

Author: pmorch

src/components/GridLayout.vue

@@ -173,16 +173,39 @@
                             self.onWindowResize();
                         });
                     });
-
-                    self.$emit('layout-ready', self.layout);
                 });
             });
         },
         watch: {
-            width: function () {
+            width: function (newval, oldval) {
                 this.$nextTick(function () {
                     //this.$broadcast("updateWidth", this.width);
                     this.eventBus.$emit("updateWidth", this.width);
+                    if (oldval === null) {
+                        /*
+                            If oldval == null is when the width has never been
+                            set before. That only occurs when mouting is
+                            finished, and onWindowResize has been called and
+                            this.width has been changed the first time after it
+                            got set to null in the constructor. It is now time
+                            to issue layout-ready events as the GridItems have
+                            their sizes configured properly.
+
+                            The reason for emitting the layout-ready events on
+                            the next tick is to allow for the newly-emitted
+                            updateWidth event (above) to have reached the
+                            children GridItem-s and had their effect, so we're
+                            sure that they have the final size before we emit
+                            layout-ready (for this GridLayout) and
+                            item-layout-ready (for the GridItem-s).
+
+                            This way any client event handlers can reliably
+                            invistigate stable sizes of GridItem-s.
+                        */
+                        this.$nextTick(() => {
+                            this.$emit('layout-ready', self.layout);
+                        });
+                    }
                     this.updateHeight();
                 });
             },