let flkty;
paragraphs.forEach(paragraph => {

  const itemsToFilterContainers = [].slice.call(
    document.querySelector(`[data-selector^="${paragraph.getAttribute('data-selector')}"]`)
    .querySelectorAll('[data-selector="filterItemsContainer"]'));
  const tpGrid = [].slice.call(document.querySelectorAll('.tp--grid'));

  itemsToFilterContainers.forEach(item => {
    new Vue({
      el: item,
      data: {
        selected_travel_themes: travelThemeDropdownOptionSelected,
        selected_destinations: destinationsDropdownOptionSelected,
        selected_destination_types: destinationTypesDropdownOptionSelected,
        searchString: '',
        destinationsDropdownOptionsMapped: [],
        hideList: true,
        hideBtn: false
      },
      computed: {
      },
      mounted() {
        this.$nextTick(this.countCardsInGridView(0));
      },
      methods: {

        countCardsInGridView(pageNumber) {
          if (tpGrid) {
            tpGrid.forEach(grid => {
              const cards = [].slice.call(grid.children)
              cards.forEach((card, index) => {
                if (index + 1 > 9) {
                  card.classList.add('hide')
                } else {
                  card.classList.add('show')
                }
              });
            })
          }
        },
        loadMoreCards() {
          console.log('loadMoreCards');

        }

      }
    })
  })
})