I have created the category.php template file for my wordpress custom theme. I put inside it the loop and the markup needed to disply my single category layout. I’m facing the issue that if the url is pointing to one particular category example: category/mycategory/ , I get a blank page with the header and footer only, the posts that are under that category are not listed as I was expecting. I’ve assigned to the categories a custom post type, but I think this is not important because it’s registered under the default categorytaxonomy of wordpress. Maybe I need another template for this, how I can fix this? It Will be possible to avoid creating new templates files and get all the content using Vue.js and the REST API?

// this code is my bs4 layout where now I'm listing all the custom post type published using php.
// all the posts are assigned to a category, and I want to use vue to create the category list.
// on click, using REST API and vue.js, I want to changhe the content of the layout with the posts of the //selected category

<?php $products = new WP_Query( array( 'post_type' => 'products', 'posts_per_page' => -1, 'order' => 'ASC' ) ); ?>
  <div class="row bg-light p-5 mt-3 mb-3" id="catalogue">
    <div class="col-sm-12 col-md-12 col-lg-12 p-0">
      <div class="dropdown">
        <a class="text-uppercase dropdown-toggle dropdown-toggle-split" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <?php _e('Collezioni'); ?>
        </a>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
          <a v-for="cat in catList" v-on:click="displayCategory(cat.id)" class="dropdown-item" href="#">{{ cat.name }}</a>
        </div>
      </div>
    </div>
<?php if( $products->have_posts() ): while( $products->have_posts() ): $products->the_post(); ?>
<?php $page_subtitle = get_post_meta( get_the_ID(), 'page-subtitle' ); ?>
    <div class="col-sm-12 col-md-3 col-lg-3 col-background shadow-lg mt-5 mb-5 p-0" data-bg-url="<?php the_post_thumbnail_url(); ?>" style="height:50vh;"></div>
    <div class="col-sm-12 col-md-3 col-lg-3 col-offset-top shadow-lg darkblue position-relative mt-5 mb-5 p-5">
      <small class="text-white m-0"><?php _e( $page_subtitle[0] ); ?></small>
      <h4 class="font-weight-bold text-white mt-2 mb-0"><?php the_title(); ?></h4>
      <?php the_content(); ?>
    </div>
<?php endwhile; ?>
<?php endif; wp_reset_postdata(); ?>
  </div>
</div>

<script>
(function($){
  $(document).ready( () => {

    let app = new Vue({
      el: '#catalogue',
      data: {
        catList: []
      },
      mounted: function(){
        this.loadCategories();
      },
      computed: {

      },
      methods: {
        loadCategories: function(){
          $.get( '../wp-json/wp/v2/categories/', (results) => {
            console.log(results);
            $.each( results, (i, el) => {
              var c = { name: el.name, id: el.id };
              this.catList.push(c);
            });
          });
        },
        displayCategory: function( cid ){
          $.get( '../wp-json/wp/v2/categories/'+ cid, (results) => {
            console.log(results);
            $.each( results, (i, el) => {
              //var c = { name: el.name, id: el.id };
              //this.catList.push(c);
            });
          });
        },
      }
    });

  });
}(jQuery));
</script>


// category.php