カテゴリをPHPで取得する（PHPとVue.jsを併用）

<div id="examp" class="work__categories">
  <?php $terms = get_categories(); ?>
  <?php foreach ($terms as $key => $term): ?>
    <button type="button" @click="exampBtn(<?php echo $term->term_id; ?>, <?php echo $key; ?>)">
      <?php echo $term->name; ?>
    </button>
  <?php endforeach; ?>
</div>

if (document.getElementById('examp')) {
  var exampInstance = new Vue({
    el: "#examp",
    methods: {
      exampBtn(catid,i) {
        if(!postInstance.postsOrigin[i]) {
          postInstance.postsOrigin[i] = catid
        }
        postInstance.btn(i)
      },
    },
  });
}

イベントハンドリング例

Vueでクリックした箇所とその情報を取得するために、イベントハンドリングを使用しておく

イベントハンドリングとは

@click="exampBtn(<?php echo $term->term_id; ?>, <?php echo $key; ?>)"

ここでは、カテゴリIDと、ボタンの順番をVueで受け取れるように記入する

※ここでの【exampBtn】は、後述するJs内に書いておく、methods(function)です

WordPressのWp Rest APIを使用してVue.jsで描画

<div id="Post" class="row">
  <div class="col-md-40 col-60" v-for="(post,index) in posts">
    <img :src="post._embedded['wp:featuredmedia'][0].media_details.sizes.full.source_url">
  </div>
</div>

if (document.getElementById('Post')) {
  var postInstance = new Vue({

    el: "#Post",
    data() {
      return {
        posts: [],
        postsOrigin: [],
      };
    },

    methods: {
      btn(i){
        axios(BASEURL + 'posts?_embed&per_page=9&categories=' + this.postsOrigin[i] )
        .then( (res) =>{
          this.posts = res.data
        })
      },
    },

    mounted(){
      axios(BASEURL + 'posts?_embed&per_page=9')
      .then( (res) =>{
        this.posts = res.data
      })
    },

  });
}

※上記の【BASEURL】は、WP Rest APIのパスを代入しておいた変数です

インスタンスからインスタンスへデータを渡す

例）
インスタンス名.データ名

今回の場合は下記
postInstance.postsOrigin

これで、exampInstance内のmethodsから、postInstanceのpostsOriginデータに取得データを代入できる