Vue transition group with fetched data not transitioning

I have a block of code here and what happens is when a button is clicked it sends a fetch request and the response is assigned to vue data, which is a collection object that has an array of products which are being looped over below.

createApp({
  data() {
    return {
      collection: null
    },
    mounted() {
      fetch('some-example.com/collection')
        .then(res => res.json())
        .then(data => {
            this.collection = data
        })
    }
  }
})
    <div class="grid-container">
        <div class="gridCategory_wrapper">
          <div class="grid-wrapper">
            <transition-group name="fade">
              <!-- product tile -->
              <div  v-for="(product, index) in collection.products" class="grid grid--1x1" :key="product.id">
                <div class="gridCategory__item">
                    <!-- content for product tile (price, ect..) goes here -->
                </div>
              </div>
            </transition-group>
            </div>
        </div>
      </div>
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-enter-to,
.fade-leave-from {
  opacity: 1;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

Each time a fetch request is made with a filter, for example I add a query param in the url to get one product back, the returned collection object is immediately set and appears immediately while the other tiles fade out. If I clear a filter to get all the products back, then they appear immediately. There is no fade in.