검색 페이지에서 다른 컴포넌트의 액션 사용

안녕하세요! 검색 페이지에서 카테고리 변경 액션을 트리거할 수 있을까요? 제 상황은 다음과 같습니다. 상단에 카테고리 목록이 있습니다.
image
그리고 이 카테고리를 클릭하면 하단의 결과가 해당 카테고리에 맞게 변경되어야 합니다. search-categories 커넥터를 만들고 search-categories.js 파일에 커넥터 클래스를 추가했습니다. 하지만 이렇게 하면 작동하지 않습니다.

const tt = require('discourse/components/search-advanced-options');
const Category = require("discourse/models/category");
const Component = require("@ember/component");
const I18n = require("I18n");
const { action } = require("@ember/object");
const { escapeExpression } = require("discourse/lib/utilities");
export default {
    setupComponent(args, component) {
        component.set('today', new Date());
        console.log('setup')
    },
    @action
    onChangeSearchTermForCategory(categoryId) {
        if (categoryId) {
            const category = Category.findById(categoryId);
            tt.onChangeCategory && tt.onChangeCategory(category);
            tt.set("searchedTerms.category", category);
        } else {
            tt.onChangeCategory && tt.onChangeCategory(null);
            this.set("searchedTerms.category", null);
        }

        tt._updateSearchTermForCategory();
    },
}

왜 작동하지 않는지, 그리고 어떻게 해결할 수 있는지 알려주시면 감사하겠습니다. 제 커넥터 hbs 파일은 다음과 같습니다.

<div class="custom-categories-wrapper">
    {{conditional-loading-spinner condition=loadingCategories}}
    <div class="nav-pills">
        {{#each categories as |cat|}}
            <li>
                <a data-slug="{{cat.slug}}" {{on "click" @onChangeSearchTermForCategory cat.id}} data-id="{{cat.id}}">{{cat.name}}</a>
            </li>
        {{/each}}
    </div>
</div>

이것은 어떤 플러그인 아웃렛에 추가되고 있나요? 고급 검색 페이지의 full-page-search-below-search-info인가요?