Vuejs React to array length

gistfile1.txt

<script lang='ts'>
@Component({
  components: {
    LoaderComponent,
    NotificationComponent,
  },
  store,
})
export default class AudienceSearch extends Vue {

    private isFiltersChanged: boolean = false;
    private sourcesList: IFilter[] = [];
    private keywordsList: IFilter[] = [];
    private verticalsList: IFilter[] = [];

    get selectedSources(): IFilter[] {
      this.isFiltersChanged = true;
      const selectedSource: IFilter[] = [];
      this.sourcesList.forEach((source: IFilter) => {
        if (source.selected) {
          selectedSource.push(source);
        }
      });
      return selectedSource;
    }

    get selectedVerticals(): IFilter[] {
      this.isFiltersChanged = true;
      const selectedVertical: IFilter[] = [];
      this.verticalsList.forEach((vertical: IFilter) => {
        if (vertical.selected) {
          selectedVertical.push(vertical);
        }
      });
      return selectedVertical;
    }

    get selectedKeywords(): IFilter[] {
      this.isFiltersChanged = true;
      const selectedKeyword: IFilter[] = [];
      this.keywordsList.forEach((keyword: IFilter) => {
        if (keyword.selected) {
          selectedKeyword.push(keyword);
        }
      });
      return selectedKeyword;
    }

    private clearFilter(filter: IFilter) {
      filter.selected = !filter.selected;
      this.callAudienceService();
    }

    private clearAllFilters() {
      this.verticalsList.forEach((vertical: IFilter) => {
        vertical.selected = false;
      });
      this.keywordsList.forEach((keyword: IFilter) => {
        keyword.selected = false;
      });
      this.sourcesList.forEach((source: IFilter) => {
        source.selected = false;
      });
      this.callAudienceService();
    }

    private mounted() {
      jQuery('#keywords-modal, #verticals-modal').on('show.bs.modal', (e: any) => {
        this.isFiltersChanged = false;
      });
      jQuery('#keywords-modal, #verticals-modal').on('hide.bs.modal', (e: any) => {
        if (this.isFiltersChanged) {
          this.callAudienceService();
        }
      });
    }

    private created() {
      const filters = audienceService.getAudienceFilters().then(
        (response: {data: {verticals: IFilter[], keywords: IFilter[], sources: IFilter[]}}) => {
        response.data.verticals.forEach((vertical: IFilter) => {
          vertical.selected = false;
        });
        response.data.keywords.forEach((keyword: IFilter) => {
          keyword.key = keyword.key;
          keyword.selected = false;
        });
        response.data.sources.forEach((source: IFilter) => {
          source.key = source.key;
          source.selected = false;
        });
        this.keywordsList = response.data.keywords;
        this.verticalsList = response.data.verticals;
        this.sourcesList = response.data.sources;
        this.callAudienceService();
      }).catch(() => {
        window.location.href = '/error/';
      });
    }

    private callAudienceService() {
    // logic to get audiences from server
    }
}
</script>

<template lang='haml'>
%div
  .content
    .block
      .block-content.no-padding
        %form{"v-on:submit.prevent": 'callAudienceService'}
          .input-group.input-group-lg
            %input.form-control{"v-model": 'audienceSearchText', "placeholder": "Search Audiences", "type": "text"}
            .input-group-btn
              %button.btn.btn-default
                %i.fa.fa-search

    .row{"style": "padding-bottom: 100px"}
      .col-xs-3
        .block
          .block-header.bg-flat-light
            .block-title.text-white Source
          .block-content
            %template{"v-for": 'source in sourcesList'}
              %label.css-input.css-checkbox.css-checkbox-primary{"style": "display: block"}
                %input{"type": "checkbox", "v-model": 'source.selected', "v-on:click": 'source.selected=!source.selected',  "v-on:change": 'callAudienceService'}
                %span
                = ' {{source.key}}'
                %br
        .block
          .block-header.bg-amethyst-light
            .block-title.text-white Verticals
          .block-content
            %template{"v-for": '(vertical, index) in verticalsList', "v-if": 'index < 5'}
              %label.css-input.css-checkbox.css-checkbox-primary{"style": "display: block"}
                %input{"type": "checkbox", "v-model": 'vertical.selected', "v-on:click": 'vertical.selected=!vertical.selected', "v-on:change": 'callAudienceService'}
                %span
                = ' {{vertical.key}}'
                %br
              %p.pointer{"v-if": 'index == 4'}
                %br
                %a{"data-toggle": "modal", "data-target": "#verticals-modal"}
                  + {{verticalsList.length - (index+1) }} more 
        .block
          .block-header.bg-default-light
            .block-title.text-white Categories 
          .block-content
            %template{"v-for": '(keyword, index) in keywordsList', "v-if": 'index < 5'}
              %label.css-input.css-checkbox.css-checkbox-primary{"style": "display: block"}
                %input{"type": "checkbox", "v-model": 'keyword.selected',  "v-on:click": 'keyword.selected=!keyword.selected', "v-on:change": 'callAudienceService'}
                %span
                = ' {{keyword.key}}'
                %br
              %p.pointer{"v-if": 'index == 4'}
                %br
                %a{"data-toggle": "modal", "data-target": "#keywords-modal"}
                  + {{keywordsList.length - (index+1) }} more 
      .col-xs-9
        %loader-component{":repeat": 3}
        .block{"v-show": "!this.$store.getters.canShowLoader"}
          .block-content
            %p.font-w300{"v-show": '(!audienceSearchLabel && selectedKeywords.length == 0 && selectedVerticals.length == 0 && selectedSources.length == 0 )'} Showing <b>All</b> results
            %p.font-w300{"v-show": '!(!audienceSearchLabel && selectedKeywords.length == 0 && selectedVerticals.length == 0 && selectedSources.length == 0 )'} Showing results for <b>{{audienceSearchLabel}}</b>
            %template{"v-for": 'source in selectedSources'}
              %span.badge.bg-flat-light.font-w400.animated.bounceIn.push-10-r.push-10
                = '{{source.key}}'
                %i.si.si-close.font-w400.push-5-r.pull-left.pointer{"v-on:click": 'clearFilter(source)'}
                  &nbsp;
            %template{"v-for": 'vertical in selectedVerticals'}
              %span.badge.bg-amethyst-light.font-w400.animated.bounceIn.push-10-r.push-10
                = '{{vertical.key}}'
                %i.si.si-close.font-w400.push-5-r.pull-left.pointer{"v-on:click": 'clearFilter(vertical)'}
                  &nbsp;
            %template{"v-for": 'keyword in selectedKeywords'}
              %span.badge.bg-default-light.font-w400.animated.bounceIn.push-10-r.push-10
                = '{{keyword.key}}'
                %i.si.si-close.font-w400.push-5-r.pull-left.pointer{"v-on:click": 'clearFilter(keyword)'}
                  &nbsp;
            %template{"v-if": '(selectedKeywords.length > 0 || selectedVerticals.length > 0 || selectedSources.length > 0)'}
              %span.badge.bg-city-light.font-w400.animated.bounceIn.push-10-r.push-10.pull-right.pointer{"v-on:click": 'clearAllFilters'}
                CLEAR ALL
                %i.si.si-close.font-w400.push-5-r.pull-left
                  &nbsp;
            %table#audience-datatable.table.table-striped.table-bordered{"cellspacing": "0"}
            //display audiences


    // verticals and keywords modal pop ups
    #verticals-modal.modal.fade{"aria-hidden" : "true", "role" : "dialog", "style" : "display: none;", "tabindex" : "-1"}
      .modal-dialog.modal-sm.modal-dialog-slideright{"style": "margin-left: 200px;"}
        .modal-content
          .block.block-themed.block-transparent.remove-margin-b
            .block-header.bg-amethyst-light
              %ul.block-options
                %li
                  %button{"data-dismiss": "modal", "type": "button"}
                    %i.si.si-close
              %h3.block-title.font-w400.text-white Verticals
            .block-content
              %label.css-input.css-checkbox.css-checkbox-primary{"v-for": '(vertical, index) in verticalsList', "style": "display: block"}
                %input{"type": "checkbox", "v-model": 'vertical.selected', "v-on:click": 'vertical.selected = !vertical.selected'}
                %span
                = ' {{vertical.key}}'
          .modal-footer
            %button.btn.btn-sm.btn-default{"data-dismiss": "modal", "type": "button"} Done

    #keywords-modal.modal.fade{"aria-hidden" : "true", "role" : "dialog", "style" : "display: none;", "tabindex" : "-1"}
      .modal-dialog.modal-sm.modal-dialog-slideright{"style": "margin-left: 200px;"}
        .modal-content
          .block.block-themed.block-transparent.remove-margin-b
            .block-header.bg-default-light
              %ul.block-options
                %li
                  %button{"data-dismiss": "modal", "type": "button"}
                    %i.si.si-close
              %h3.block-title.font-w400.text-white Categories
            .block-content
              %label.css-input.css-checkbox.css-checkbox-primary{"v-for": '(keyword, index) in keywordsList', "style": "display: block"}
                %input{"type": "checkbox", "v-model": 'keyword.selected', "v-on:click": 'keyword.selected = !keyword.selected'}
                %span
                = ' {{keyword.key}}'
          .modal-footer
            %button.btn.btn-sm.btn-default{"data-dismiss": "modal", "type": "button"} Done

    %notification-component{"context": 'alert-success', "message": "Audience(s) copied to clipboard", "v-show": 'canShowNotification'}
</template>