How to set matching array values with conditions using computed property in Vuejs?

import BaseAccordian from "./BaseAccordian.vue";
export default {
  name: "HelloWorld",
  components: {
    BaseAccordian,
    StatusComponent: {
      props: ["box", "paint", "matchingdata"],
      template: `<div 
            :class="{
              green: status === 'ok',
              red: status === 'notok',
              pink: status === 'medium',
            }"></div>`,
      computed: {
        status() {
          const box = this.box;
          const paint = this.paint;
          const matchingdata = this.matchingdata;
          let status = "";
          if (
            box.a == "ok" &&
            box.b == "ok" &&
            box.c == "ok" &&
            box.d == "ok" &&
            box.e == "ok" &&
            paint.a == "ok" &&
            paint.b == "ok" &&
            paint.x == "ok" &&
            paint.d == "ok" &&
            paint.y == "ok" &&
            matchingdata.a == "ok" &&
            matchingdata.e == "ok" &&
            matchingdata.y == "ok" &&
            matchingdata.z == "ok"
          ) {
            status = "Ok";
          } else if (
            box.c == "ok" &&
            box.d == "ok" &&
            box.e == "ok" &&
            paint.x == "ok" &&
            paint.d == "ok" &&
            paint.y == "ok" &&
            matchingdata.e == "ok" &&
            matchingdata.y == "ok" &&
            matchingdata.z == "ok" &&
            (box.a != "ok" ||
              box.b != "ok" ||
              paint.a == "ok" ||
              paint.b == "ok" ||
              matchingdata.a != "ok")
          ) {
            status = "medium";
          } else if (
            box.a != "ok" ||
            box.d != "ok" ||
            box.e != "ok" ||
            paint.x != "ok" ||
            paint.d != "ok" ||
            paint.y != "ok" ||
            matchingdata.e != "running" ||
            matchingdata.y != "ok" ||
            matchingdata.z != "ok"
          ) {
            status = "notok";
          }
          return status;
        },
      },
    },
  },
  data() {
    return {
      // status: ["ok", "notok", "medium"],
      boxes: [
        {
          boxid: "1",
          price: "12",
          name: "apple",
          a: "ok",
          b: "ok",
          c: "ok",
          d: "ok",
          e: "ok",
        },
        {
          boxid: "2",
          price: "11",
          name: "bananna",
          a: "ok",
          b: "ok",
          c: "ok",
          d: "close",
          e: "ok",
        },
        {
          boxid: "3",
          price: "10",
          name: "grapes",
          a: "ok",
          b: "ok",
          c: "ok",
          d: "close",
          e: "ok",
        },
        {
          boxid: "4",
          price: "9",
          name: "choc",
          a: "ok",
          b: "ok",
          c: "ok",
          d: "close",
          e: "ok",
        },
        {
          boxid: "5",
          price: "8",
          name: "chips",
          a: "ok",
          b: "ok",
          c: "ok",
          d: "close",
          e: "ok",
        },
        {
          boxid: "6",
          price: "7",
          name: "kat",
          a: "ok",
          b: "ok",
          c: "ok",
          d: "close",
          e: "ok",
        },
      ],

      paints: [
        {
          paintid: "100",
          price: "100",
          name: "assian",
          a: "ok",
          b: "ok",
          x: "ok",
          d: "ok",
          y: "ok",
        },
        {
          paintid: "101",
          price: "101",
          name: "vvv",
          a: "ok",
          b: "ok",
          x: "ok",
          d: "close",
          y: "ok",
        },
        {
          paintid: "102",
          price: "102",
          name: "zcx",
          a: "ok",
          b: "ok",
          x: "ok",
          d: "close",
          y: "ok",
        },
        {
          paintid: "103",
          price: "103",
          name: "aaa",
          a: "ok",
          b: "ok",
          x: "ok",
          d: "close",
          y: "ok",
        },
        {
          paintid: "104",
          price: "104",
          name: "bbb",
          a: "ok",
          b: "ok",
          x: "ok",
          d: "close",
          y: "ok",
        },
        {
          paintid: "105",
          price: "105",
          name: "asdf",
          a: "ok",
          b: "ok",
          x: "ok",
          d: "close",
          y: "ok",
        },
      ],

      matchingdata: [
        {
          matchid: "1",
          boxid: "1",
          paintid: "101",
          a: "ok",
          e: "ok",
          y: "ok",
          z: "ok",
        },
        {
          matchid: "2",
          boxid: "1",
          paintid: "102",
          a: "ok",
          e: "ok",
          y: "ok",
          z: "ok",
        },
        {
          matchid: "3",
          boxid: "3",
          paintid: "103",
          a: "ok",
          e: "ok",
          y: "ok",
          z: "ok",
        },
        {
          matchid: "4",
          boxid: "3",
          paintid: "104",
          a: "ok",
          e: "ok",
          y: "ok",
          z: "ok",
        },
        {
          matchid: "5",
          boxid: "3",
          paintid: "105",
          a: "ok",
          e: "ok",
          y: "ok",
          z: "ok",
        },
        {
          matchid: "6",
          boxid: "6",
          paintid: "106",
          a: "ok",
          e: "ok",
          y: "ok",
          z: "ok",
        },
        {
          matchid: "7",
          boxid: "2",
          paintid: "101",
          a: "ok",
          e: "ok",
          y: "ok",
          z: "ok",
        },
        {
          matchid: "8",
          boxid: "3",
          paintid: "106",
          a: "ok",
          e: "ok",
          y: "ok",
          z: "ok",
        },
      ],
    };
  },
};

 <div>
    <div v-for="box in boxes" :key="box.id">
      <BaseAccordian>
        <template v-slot:title></template>
        <template v-slot:content>
          <div v-for="paint in paints" :key="paint.id" class="line">
            <div>
              <StatusComponent
                :box="box"
                :paint="paint"
                :matchingdata="matchingdata"
              />
              <!--only status like ok,not, medium to be printed on line accordingly -->
            </div>
          </div>
        </template>
      </BaseAccordian>
    </div>
  </div>

How to set matching array values in Vuejs?

In my code, I have 3 arrays called, boxes, paints, matchingdata. By using those arrays, i want to perfome the functionality.

After the checkbox is clicked, At present i am showing some information related to paints array

So i need to set the matching array value condition here like.

if checkox is clicked, i only need to show the paint array two id's called (100, 101)

for 2nd checkbox only (101 id info) for 3rd checkbox only (103,104,105,106) for 4th checkbox only (empty val) for 5th checkbox only (empty val) for 6th checkbox only (106).

MY WORKING CODE:- https://codesandbox.io/s/black-https-3zifk?file=/src/components/HelloWorld.vue

from How to set matching array values with conditions using computed property in Vuejs?