#37308: converted cookieMessages to observable attribute

UI will now stay in sync after manipulation of state

Author: erfanimani

app/code/Magento/Theme/view/frontend/templates/messages.phtml

@@ -5,8 +5,10 @@
  */
 ?>
 <div data-bind="scope: 'messages'">
-    <!-- ko if: cookieMessages && cookieMessages.length > 0 -->
-    <div aria-atomic="true" role="alert" data-bind="foreach: { data: cookieMessages, as: 'message' }" class="messages">
+    <!-- ko if: cookieMessages() && cookieMessages().length > 0 -->
+    <div aria-atomic="true" role="alert" class="messages" data-bind="foreach: {
+        data: cookieMessages(), as: 'message'
+    }">
         <div data-bind="attr: {
             class: 'message-' + message.type + ' ' + message.type + ' message',
             'data-ui-id': 'message-' + message.type

app/code/Magento/Theme/view/frontend/web/js/view/messages.js

@@ -27,9 +27,14 @@ define([
          * Extends Component object by storage observable messages.
          */
         initialize: function () {
-            this._super();
+            this._super().observe(
+                [
+                    'cookieMessages',
+                ]
+            );
+
+            this.cookieMessages(_.unique($.cookieStorage.get('mage-messages'), 'text'));
 
-            this.cookieMessages = _.unique($.cookieStorage.get('mage-messages'), 'text');
             this.messages = customerData.get('messages').extend({
                 disposableCustomerData: 'messages'
             });