JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>

<div id="app">
  <input v-model="search">
  <v-tree :items="filteredItems" :highlight="search"></v-tree>
</div>

JavaScript

Vue.component('v-tree', {
  props: [ 'items', 'highlight' ],
  methods: {
    highlighted(str) {
      const h = this.highlight;
      return h
        ? str.replace(RegExp(h, 'g'), m => `<mark>${m}</mark>`)
        : str;
    },
  },
  template: `
<ul>
  <li v-for="n in items">
    <span v-html="highlighted(n.name)"></span>
    <v-tree
      v-if="n.children?.length"
      :items="n.children"
      :highlight="highlight"
    ></v-tree>
  </li>
</ul>`,
});

new Vue({
  el: '#app',
  data: () => ({
    search: '',
    items: [
      { name: 'Африка', children: [
        { name: 'ЮАР', children: [
          { name: 'Претория' },
          { name: 'Йоханнесбург' },
          { name: 'Кейптаун' },
        ] },
        { name: 'Египет', children: [
          { name: 'Каир' },
          { name: 'Александрия' },
          { name: 'Порт-Саид' },
        ] },
      ] },
      { name: 'Европа', children: [
        { name: 'Италия', children: [
          { name: 'Рим' },
          { name: 'Милан' },
          { name: 'Неаполь' },
        ] },
        { name: 'Германия', children: [
          { name: 'Берлин' },
          { name: 'Гамбург' },
          { name: 'Мюнхен' },
        ] },
        { name: 'Франция', children: [
          { name: 'Париж' },
          { name: 'Марсель' },
          { name: 'Лион' },
        ] },
        { name: 'Испания', children: [
          { name: 'Мадрид' },
          { name: 'Барселона' },
          { name: 'Севилья' },
        ] },
      ] },
      { name: 'Азия', children: [
        { name: 'Вьетнам', children: [
          { name: 'Хошимин' },
          { name: 'Ханой' },
          { name: 'Дананг' },
        ] },
        { name: 'Япония', children: [
          { name: 'Токио' },
          { name: 'Киото' },
          { name: 'Нагоя' },
        ] },
        { name: 'Китай', children: [
          { name: 'Пекин' },
          { name: 'Шанхай' },
          { name: 'Циндао' },
        ] },
      ] },
    ],
  }),
  computed: {
   ...