如何將同時創(chuàng)建的多個組件隊列化？（在上一個組件消失后緊接著顯示下一個）

   <div id="atn">
       <todo-item
         v-for="(item,index) in msg_list"
         v-bind:todo="item"
         v-bind:key="item.index"
         v-show="item.show">
       </todo-item>
   </div>
   <script>
       // 構(gòu)建
   Vue.component('todo-item', {
     props: ['todo'],
     template: '<div class="atn-msg">@{{ todo.text }}</div>'
   })
   // 實例化
   var app = new Vue({
     el: '#atn',
     data: {
       msg_list: [
         {text: '提示信息1',show:true },
         {text: '提示信息2',show:false },
       ]
     }
   })
   </script>
   
   <style>
   .atn-msg{
       position: fixed;
       z-index: 1000;
       bottom: 20vh;
       left: 50%;
       display: flex;
       justify-content: center;
       align-items: center;
       padding: .5rem 1rem;
       border-radius: 20rem;
       background: rgba(0,0,0,0.5);
       color: #fff;
       animation-duration: .4s;
       animation-fill-mode: forwards;
       animation-name: fadeIn;
   }
   </style>