How to iterate array value by comparing it with another array in Vuejs?

HelloWorld.vue

<template>
      <div>
        <div v-for="box in boxes" :key="box.sname">
          <BaseAccordian>
            <template v-slot:title>{{ box.sname }}</template>
            <template v-slot:content>
              <div v-for="paint in paints" :key="paint.tname" class="line">
                <List :content="matchingdata" :sname="box.sname" />
              </div>
            </template>
          </BaseAccordian>
        </div>
      </div>
    </template> 

    <script>
    import BaseAccordian from "./BaseAccordian.vue";
    import List from "./List.vue";
    export default {
      name: "HelloWorld",
      components: {
        BaseAccordian,
        List,
      },
      data() {
        return {
          boxes: [
            {
              sname: "apple",
            },
            {
              sname: "bananna",
            },
            {
              sname: "grapes",
            },
            {
              sname: "choc",
            },
          ],

          paints: [
            {
              tname: "a",
            },
            {
              tname: "b",
            },
            {
              tname: "c",
            },
            {
              tname: "d",
            },
            {
              tname: "e",
            },
          ],

          matchingdata: [
            {
              matchid: "1",
              OverallStatus: "ok",
              sname: "choc",
            },
            {
              matchid: "2",
              OverallStatus: "notok",
              sname: "grapes",
            },
          ],
        };
      },
    };
    </script>

BaseAccordion.vue

    <template>
      <div class="wrapper">
        <div class="accordion">
          <input type="checkbox" @click="toggleItem" />
          <h2 class="title">
            <slot name="title"></slot>
          </h2>
        </div>
        <div v-show="show" class="content">
          <slot name="content"></slot>
        </div>
      </div>
    </template>
    <script>
    export default {
      components: {},
      data: function () {
        return {
          show: false,
        };
      },
      methods: {
        toggleItem: function () {
          this.show = !this.show;
        },
      },
    };
    </script>

List.vue

    <template>
      <div class="">
        <div
          v-for="match in matchingData"
          :key="match.matchid"
          :class="{
            green: match.OverallStatus === 'ok',
            red: match.OverallStatus === 'notok',
          }"
        >
          {{ match.OverallStatus }}
        </div>
      </div>
    </template>
    <script>
    export default {
      components: {},
      props: {
        content: {
          type: Array,
          required: true,
        },
        sname: {
          type: String,
          required: true,
        },
      },
      data: function () {
        return {};
      },
      methods: {},
      computed: {
            matchingData() {
      return this.content.filter((a) => {
        if (a.sname === this.sname) {
          return true;
        } else {
          return false;
        }
      });
    },
      },
    };
    </script>
    <style scoped>
    </style>

I three arrays called matchingdata,boxes,paints array based on this three arrays, i am trying to filter the array.(nested v-for)

Now, I want to iterate the matchingdata array by comparing it with sname in boxes array. and Common value between matchingdata and boxes array is ""sname""

I tried above logic, and struck with computed property.

Expected Output:-

In List.vue component , i have {{ match.OverallStatus }} where that field , i want to show,(from the matchingdata array) when user clicked on checkbox.

Taking the ""sname"" the common value from the matchingdata array and the boxes array

code:- https://codesandbox.io/s/damp-pine-27s2kn?file=/src/components/List.vue