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.

  data() {
    return {
      collection: null
    mounted() {
        .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="">
                <div class="gridCategory__item">
                    <!-- content for product tile (price, ect..) goes here -->
.fade-leave-to {
  opacity: 0;
.fade-leave-from {
  opacity: 1;

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