You can use ES6 syntax filter and some to get the same result

const temp = detailsJSON.filter((detail) => {
  return headersJSON.some((header) => header.CARD_ID === detail.CARD_ID);
});

The some checks if the CARD_ID of the current object in headersJSON is equal to the CARD_ID of the current object in detailsJSON. If a match is found, the some method returns true.

The filter method is called on the detailsJSON array. It iterates over each object in detailsJSON and applies a filtering condition (some method). It will return a detail object if the some condition inside is true.

First off create a method that will return appropriate icon. I believe the code of getIconClass method is self-explanatory. Then loop through leafs field in template and display name of the leaf and appropriate icon.

new Vue({
  el: "#app",
  data() {
    return {
      generalQuestInfo: [{
        "id": 1,
        "name": "Breaking News",
        "alias": "BN",
        "globalId": 1,
        "platform": "Win64",
        "pathway": {
          "status": "Robot",
          "name": "start case",
          "leafs": ["start", "teleport", "take photo", "kill", "finish"]
        }
      }],
      finishedQuestleafs: [
        { name: "start", questId: 2 },
        { name: "teleport", questId: 1 },
        { name: "take photo", questId: 1 },
        { name: "kill", questId: 1 },
        { name: "finish", questId: 1 },
        { name: "start", questId: 2 }
      ]
    }
  },
  methods: {
    getIconClass(id, leaf) {
      return this.finishedQuestleafs.find(item => item.questId === id && item.name === leaf) ? "fa fa-check" : "fa fa-bomb";
    }
  }
})

.as-console-wrapper { max-height: 100% !important; top: 0; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <table align="center">
    <tr>
      <th>Status</th>
      <th>Path name</th>
      <th>Leafs Info</th>
    </tr>
    <tr v-for="data in generalQuestInfo" :key="data.id">
      <td>{{data.pathway.status}}</td>
      <td>{{data.pathway.name}}</td>
      <td>
      <ul>
        <li v-for="(leaf, index) in data.pathway.leafs" :key="index">
          <i :class="getIconClass(data.id, leaf)"></i> {{ leaf }}
        </li>
      </ul>
    </td>
    </tr>
  </table>
</div>

Since the listing is an array and not an object you need to loop over it with index:

function checkOccurence(data, listing) {
  let dataFound = false;
  for(let i = 0; i < listing.length; i++) {
    if (listing[i].pid === data.pid) {
      dataFound = true;
      break;
    }
  }

  return dataFound;
};

Then you can use the returned boolean in your render to determine success or failure like this:

<div if="checkOccurence(data, listing)"> Success </div> <div v-else>Failure</div>