Всем привет. Подскажите, пожалуйста, как правильно засунуть фильтрацию в

функцию?

в state.settings.styles в массиве содержатся стили в формате:
styles: [
{type: BORDER,
target: TEXT_el,
value: false},
{type: BORDER,
target: SIGN_el,
value: false},
{type: SHADOW,
target: TEXT_el,
value: true},
{type: SHADOW,
target: SIGN_el,
value: true},
]

Я применяю их к div с помощью class:text-border и class:text-shadow
{#each state.content as item, index}
<div
class:text-border={state.settings.styles.filter(
(el) => {
return (
el.target == TEXT_el &&
el.type == SHADOW
);
}
)[0].value}
class:text-shadow={state.settings.styles.filter(
(el) => {
return (
el.target == TEXT_el &&
el.type == SHADOW
);
}
)[0].value}
class="text"
>
{@html item.text}
</div>
{/each}

Как видно, код фильтрации повторяется (и не только в 1 диве, а раз 6 по всему коду).
Хотелось бы его засунуть в функцию.

Но если я делаю функцию
function styleFilter(target, type) {
return state.settings.styles.filter((el) => {
return el.target == target && el.type == type;
})[0].value;
}

а в диве пишу
<div
class:text-border={styleFilter(TEXT_el, BORDER)}
class:text-shadow={styleFilter(TEXT_el, SHADOW)}
class="text"
>
{@html item.text}
</div>

Тогда функция предсказуемо выполняется при загрузке компоненты, но когда меняется массив state.settings.styles изменений не происходит.
Как сделать так, чтобы она "на лету" выполнялась и при изменении state.settings.styles, при этом передавать из верстки target и type?

а стейт реактивный?

Проблему решила. Надо было state тоже в функцию передавать. class:text-border={styleFilter(state, TEXT_el, BORDER)}