[Vuejs]-Why transition-group not working?

Your transition is in fact working, however you haven’t specified any style for it.

From the official documentation:

When an element wrapped in a transition component is inserted or
removed, this is what happens:

Vue will automatically sniff whether the target element has CSS
transitions or animations applied. If it does, CSS transition classes
will be added/removed at appropriate timings.

To make your example work, you can have like so:

new Vue({
  el: '.container',
  data() {
    return {
      search: '',
      items: [
        'lorem opas', 
        'opas loram ', 
        'mushroms so good'
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => 
        item.indexOf(this.search) > -1
      )
    }
  }
})

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div class="container">
  <input placeholder="find PLEASE" v-model="search" />
  <transition-group name="fade">
    <div class="container__item" 
      v-for="(item, index) in filteredItems" 
      :key="index"
    >
      {{ item }}
    </div>
  </transition-group>
</div>

All that was missing were the CSS transition classes.

<transition-group name="fade">

In this case, the specified name should be the prefix of all the css classes. Currently there are 6 transition classes that vue uses, which for the example above, would be the following:

1. fade-enter
2. fade-enter-active
3. fade-enter-to
4. fade-leave
5. fade-leave-active
6. fade-leave-to

Also note that you can share the same classes with multiple instances of this transition-group in your app.