JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
  Filter:
  <br>
  <ul>
    <li v-for="(item, index) in categories.data" :key="item.id"><a @click="itemsWithFilter(item.id)" href="#">{{item.name}}</a></li>
  </ul>


  Result:
  <br>

  <ul>
    <li v-for="(item, index) in itemsResult.data" :key="item.id">{{item.name}}</li>
  </ul>
</div>

JavaScript

new Vue({
  el: '#app',
  data() {
    return {
      "categories": {
        "data": [{
          "id": 1,
          "name": "New"
        }, {
          "id": 2,
          "name": "Old"
        }]
      },
      "items": {
        "data": [{
          "id": 1,
          "name": "Record 1",
          category: {
            "id": 1,
            "name": "New"
          }
        }, {
          "id": 2,
          "name": "Record 3",
          category: {
            "id": 2,
            "name": "Old"
          }
        }, {
          "id": 3,
          "name": "Record 2",
          category: {
            "id": 1,
            "name": "New"
          }
        }]
      },
      "itemsResult": {},

    }
  },
  methods: {
    itemsWithFilter: function(filter) {

      var items = this.items.data;
      var result = {}


      console.log("Run itemsWithFilter")
      Object.keys(items).forEach(key => {

        const item = items[key]

        console.log(`filter: ${filter}: check item ${item.id} with category id: ${item.category.id}`)

        if (item.category.id == filter) {
          result[key] = item
        }
      })

      this.itemsResult.data = result

    }
  },
  created() {
    this.itemsResult = this.items
  }
})