'Filter a Component from a textbox VueJS

Can we show and hide a component based on textbox value? I saw v-if can do conditional rendering, but when textbox is null, nothing appear. And when i any character, both appear

What i want is just filter specific components

<template>
<input type="text" v-model="search">
<ul>
  <li><ComponentA v-if="search.includes('ComponentA') || search.length == 0" /></li>
  <li><ComponentB v-if="search.includes('ComponentB') || search.length == 0" /></li>
</ul>
</template>
<script setup>
  import ComponentA from '../components/ComponentA.vue'
  import ComponentB from '../components/ComponentB.vue'
  import {ref} from 'vue'
  
  let search = ref('')
</script>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source