How can I animate the background appearances of my component children?

I have a problem that I can't solve at all. Let me explain the context. Basically in my component I call a child component with a v-for loop on a local json (I have 3 items in this json, so it creates 3 components) These components contain a title and an image positioned side by side. In my parent component I placed a display none on the second and last child component. And I have a function that allows me to change the position of an item in my json, which allows me to switch from the first child to the second, etc. I just want to have a transition animation on the right image when it appears. I'll leave you the code of the parent component and the child component. Thanks in advance for your help

Parent-Component

<template>
  <read-more-component />
  <div class="homeContainer">
    <div class="homeContainer_item" v-for="item in dataActivity" :key="item.id">
      <cover-component :item="item" />
    </div>
  </div>
  <button style="transform: translateY(-50px);" @click="handleclick">Click me!</button>
</template> 

<script>
  // COMPONENT //
  import readMoreComponent from '@/core/components/Home-component/read-more-component.vue'
  import coverComponent from '@/core/components/Home-component/job-component.vue'
  // DATA //
  import dataActivity from '@/core/data/job-acitvity.json'
  // OTHER //
  import 'array.prototype.move'

  export default {
    data(){
      return {
        dataActivity: dataActivity,
      }
    },
    methods: {
      handleclick(){
        this.dataActivity.move(0, 2)
      }
    },
    components: {
      readMoreComponent,
      coverComponent
    }
  }
</script>

<style lang="scss">
  @media screen and (max-width: 1000px) {
    .homeContainer {
      height: 100%;

      &_item {
        height: 100%;
      }

      &_item:last-child, &_item:nth-child(2) {
        display: none;
      }
    }
  }
</style>

Children-Component

<template>
  <div class="job-container">
    <div class="job-container_title">
      <div class="title"><span class="indexTitle">{{ item.id }}<span class="dot">.</span></span><h1>{{ item.titleTop }}<br>{{ item.titleBot }}</h1></div>
    </div>

    <div  class="job-container_cover" :style="{ 'background-image': 'url(' + require(`@/assets/images/img-project/${item.img}`) + ')' }">

    </div>
  </div>
</template>

<script>
  export default {
    props: [
      'item',
    ],
  }
</script>

<style scoped lang="scss">
  .job-container {
    display: flex;
    height: 100%;

    &_title {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;

      & .indexTitle {
        color: initial;
        font-size: 5rem;
        font-weight: 700;

        & .dot {
          font-size: 2rem;
        }
      }

      & .title {
        padding-left: 2rem;

        & > h1 {
          color: #363b46;
          font-size: 2.3rem;
          line-height: 2.5rem;
        }
      }
    }

    &_cover {
      transition: clip-path ease .5s;
      clip-path: inset(0 0 0 0);
      flex: 1;
      background-size: cover;
      background-position: center;
    }
  }
</style>

Result

I have no idea how to do this. Maybe the way I import my children's components is not the right way for what I want to do with them