title: Issue with filtering array value from different array in Vuejs?
body: <p>I have <code>if/else</code> condition in <code>List.vue</code> component, Where it always falling under condition of else. not sure why ?</p>
  <p>HelloWorld.vue <strong>:</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div&gt;
      &lt;div v-for="box in boxes" :key="box.SName"&gt;
        &lt;BaseAccordian&gt;
          &lt;template v-slot:title&gt;{{ box.SName }}&lt;/template&gt;
          &lt;template v-slot:content&gt;
            &lt;div v-for="paint in paints" :key="paint.TName"&gt;
              {{ paint.TName }}
            &lt;/div&gt;
            &lt;List
              :content="matchingdata"
              :SName="box.SName"
            /&gt;
          &lt;/template&gt;
        &lt;/BaseAccordian&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt; 
  
  &lt;script&gt;
  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) =&gt; {
        this.boxes = r.data;
      });
      tabb().then((r) =&gt; {
        this.paints = r.data;
      });
      tabsandcontent().then((r) =&gt; {
        this.matchingData = r.data;
      });
    },
  };
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>List.vue <strong>:</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div&gt;
      &lt;div v-if="matchingData.length &gt; 0" class="line"&gt;
        &lt;div
          v-for="match in matchingData"
          :key="match.PD"
          :class="{
            green: match.OverallStatus === 'healthy',
            red: match.OverallStatus === 'down',
          }"
        &gt;
          {{ match.OverallStatus }}
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div v-else&gt;&lt;p&gt;No matching data&lt;/p&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  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) =&gt; a.SName === this.SName);
      },
    },
  };
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Functionality which I am trying to achieve <strong>:</strong></p>
  <p>I have three arrays like <code>matchingdata</code>, <code>boxes</code> and <code>paints</code>
  and I have common array name called <code>SName</code> exists in <code>matchingdata</code> and  <code>boxes</code> arrays.</p>