Как сделать логику вкладки фильтра категории в шаблоне django с помощью js или vue

Я работаю над категориями и брендами, один бренд может иметь много категорий, и я отображаю кнопку для каждой категории на шаблоне Django и все бренды ниже, но я хочу, чтобы при нажатии на кнопку категории отображались только бренды, которые имеют эту категорию

models.py

class Filter(models.Model):
    text = models.CharField(max_length=20)

    def __str__(self):
        return self.text

class Category(models.Model):
    filter = models.ForeignKey(Filter, on_delete=models.CASCADE, null=True)
    icon = models.FileField(upload_to='img', null=True)

class Brand(models.Model):
    logo = models.ImageField(upload_to='img', null=True)
    url_logo = models.URLField(max_length=200, null=True)
    filters = models.ManyToManyField(Filter)

views.py

class HomePageView(TemplateView):

    template_name = "index.html"

    def get_context_data(self, **kwargs):

        context = super().get_context_data(**kwargs)
        context.update({
            'category_list': Category.objects.all(),
            'brand_list': Brand.objects.all()
        })
        return context

index.html

{% for category in category_list %}
    <a href="#"><i><img src="{{ category.icon.url }}" alt="{{ category.filter }}"></i>{{ category.filter }}</a>
{% endfor %}

{% for brand in brand_blocks %}
    <div>
        <a href="{{ brand.url_logo}}">
            <img src="{{ brand.logo.url }}" />
        </a>
    </div>
{% endfor %}

Вернуться на верх