Issue with filtering array value from different array in Vuejs?

HelloWorld.vue

<template>
  <div>
    <div v-for="box in boxes" :key="box.SName">
      <BaseAccordian>
        <template v-slot:title></template>
        <template v-slot:content>
          <div v-for="paint in paints" :key="paint.TName">
            
          </div>
          <List
            :content="matchingdata"
            :SName="box.SName"
          />
        </template>
      </BaseAccordian>
    </div>
  </div>
</template> 

<script>
import { tab } from "./tab";
import { tabb } from "./tabb";
import { tabsandcontent } from "./tabsandcontent";
import BaseAccordian from "./BaseAccordian.vue";
import List from "./List.vue";
export default {
  name: "HelloWorld",
  components: {
    BaseAccordian,
    List,
  },
  data() {
    return {
      boxes: [],
      paints: [],
      matchingdata: [],
    };
  },
  mounted() {
    tab().then((r) => {
      this.boxes = r.data;
    });
    tabb().then((r) => {
      this.paints = r.data;
    });
    tabsandcontent().then((r) => {
      this.matchingData = r.data;
    });
  },
};
</script>

List.vue

<template>
  <div>
    <div v-if="matchingData.length > 0" class="line">
      <div
        v-for="match in matchingData"
        :key="match.PD"
        :class="{
          green: match.OverallStatus === 'healthy',
          red: match.OverallStatus === 'down',
        }"
      >
        
      </div>
    </div>
    <div v-else><p>No matching data</p></div>
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    content: {
      type: Array,
      required: true,
    },
    SourceDatabaseName: {
      type: String,
      required: true,
    },
  },
  data: function () {
    return {};
  },
  methods: {},
  computed: {
    matchingData() {
      return this.content.filter((a) => a.SName === this.SName);
    },
  },
};
</script>

I have if else condition in List.vue component, Where it always falling under condition of else. not sure why?

Functionality which i am trying to achieve:-

I have three arrays like matchingdata, boxes, paints and i have common array name called SName exists in matchingdata,and boxes arrays**

from Issue with filtering array value from different array in Vuejs?