title: How to auto close a customized vue toast component
body: <p>I have a customized toast component:</p>
  
  <pre><code>&lt;template&gt;
   &lt;div v-show="isToastVisible" class="toast-wrapper"&gt;
   &lt;div class="toast-conatiner"&gt;
    {{ message }}
   &lt;/div&gt;
   &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { mapState, mapActions } from 'vuex';
  
  export default {
    props: {
      message: {
        type: String,
        default: '',
      },
      isToastVisible: {
        type: Boolean,
        default: false,
      },
    },
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>I pass state to the property:</p>
  
  <pre><code>&lt;toast :is-toast-visible="isToastVisible" message="please say the word again"/&gt;
  </code></pre>
  
  <p>I have an action to control the value of isToastVisbible. When I want to toast some message , I set the state to true. 
  What I want is to make the toast auto closed in 3 seconds, it means that I have to call a setTimeout function when I set isToastVisbible to true.</p>
  
  <pre><code>  commit('SET_TOAST_VISIBLILITY', true);
    setTimeout(() =&gt; {
      commit('SET_TOAST_VISIBLILITY', false);
    }, 3000);
  </code></pre>
  
  <p>I try to add watch on isToastVisbible, but it only can works at first time.</p>
  
  <pre><code>&lt;template&gt;
    &lt;div v-show="localVisible" class="toast-wrapper"&gt;
    &lt;div class="toast-conatiner"&gt;
      {{ message }}
    &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { mapState, mapActions } from 'vuex';
  
  export default {
    props: {
      message: {
        type: String,
        default: '',
      },
      isToastVisible: {
        type: Boolean,
        default: false,
      },
    },
    data: () =&gt; ({
      localVisible: false,
    }),
    watch: {
      isToastVisible(v) {
        if (v) {
          this.localVisible = true;
          setTimeout(() =&gt; {
            this.localVisible = false;
          }, 3000);
        }
      },
    },
  };
  </code></pre>
  
  <p>I am trying to do a better design on the component, but I don't know what is the best practice of this. Hope somebody could give me a hand, thanks a lot.</p>