title: How to update state in a component when the value changed at vuex store?
body: <p>In vuex store I have this mutations which receives msg from one component and is to show/hide prompt message at another component (Like <code>You are logged in</code> propmpt after successful login) :</p>
  
  <pre><code>setPromptMsg: function (state, msg) {
      state.showPromptMsg = true;
      state.promptMsg = msg;
          function sleep (time) {
          return new Promise((resolve) =&gt; setTimeout(resolve, time));
        }                           
       sleep(3000).then(() =&gt; {
            store.showPromptMsg = false;
            state.promptMsg = '';
            console.log('show message set to false');
        });
  },
  </code></pre>
  
  <p>In the compoenet, I receive <code>showPromptMsg</code> from the store as a computed property:</p>
  
  <pre><code>computed: {
      showPromptMsg () {
          return this.$store.state.showPromptMsg;
      },
      promptMsg () {
      return this.$store.state.promptMsg;
      }
  }
  </code></pre>
  
  <p>The show/hide prompt message in the template:</p>
  
  <pre><code>   &lt;div v-show="showPromptMsg"&gt;
        &lt;div class="text-center" &gt;
           &lt;strong&gt; {{promptMsg}} &lt;/strong&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>The problem is that when the prompt is timedout, i.e. <code>showPromptMsg</code> is set to false at the store, the change is not reflected into the component, so the notification box does not disappear. </p>
  
  <p>I'm wondering what is the idiomatic way to resolve this problem? </p>