<div class="section" v-for="section in sections">
...
</div>
<section-item v-for="section in sections" :sectionData="section"></section-item>
Надеялся что есть решение проще
const h1 = document.querySelector('h1');
document.querySelector('input').addEventListener('input', function() {
const reg = RegExp(this.value.replace(/[[\\^$.|?*+()]/g, '\\$&'), 'gi');
h1.innerHTML = h1.textContent.replace(reg, '<span class="highlight">$&</span>');
});
<div id="filters"></div>
<div id="filtered"></div>
const arr = [
'italy', 'usa', 'spain', 'usa', 'usa',
'france', 'spain', 'france', 'usa',
'italy', 'spain', 'usa', 'france'
];
const filters = document.querySelector('#filters');
filters.innerHTML = Array
.from(new Set(arr), n => `<label><input type="checkbox" value="${n}">${n}</label>`)
.join('');
filters.addEventListener('change', function() {
const checked = Array.from(this.querySelectorAll(':checked'), n => n.value);
document.querySelector('#filtered').innerHTML = arr
.filter(n => checked.includes(n))
.map(n => `<span class="${n}">${n}</span>`)
.join(', ');
});
#filtered {
font-size: 48px;
}
.italy { color: green; }
.spain { color: yellow; }
.france { color: blue; }
.usa { color: red; }