Quiero la animación de retraso para otro elemento directamente por Vue Js, no css.

En este momento, Vue espera hasta que todos los elementos se hayan renderizado y todos aparezcan al mismo tiempo. ¿Cómo retrasar el cambio de this.animated = true ?

Artículo.vue

 <template> <transition name="animation-fade"> <div v-if="this.animated"> {{this.itemProp.content}} </div> </transition> </template> <script> export default { name: 'Item', props: { itemProp: Object, }, data: function() { return { animated: false, loading: true, }; }, methods: { delayedShow: function(delay) { setTimeout(this.toggleItem, delay) }, }, toggleItem: function() { this.animated = true; }, mounted: function() { this.delayedShow(500); }, } </script>

Los elementos se definen en otro componente y cada paso por accesorio al modelo de elemento.

Ayudame por favor.