I want delay animation for another item's directly by Vue Js, not css.

In this moment Vue wait until all items has rendered, and all appear at the same time. How to do delay by change this.animated = true ?

Item.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>

Items are defined in other component and every pass by prop to Item model.

Help me please.