Based on click event, how to show accordion and display name by status in Vuejs

Component 1

<script>
import { data } from "../data";
export default {
  name: "HelloWorld",
  data() {
    return {
      items: data,
    };
  },
};
</script>

**data.js**

export const data = [
  {
    id: 1,
    val: "1",
    kk: "mm",
    status: "ok"
  },
  {
    id: 2,
    val: "2",
    kk: "aa",
    status: "ok"
  },
  {
    id: 3,
    val: "3",
    kk: "dd",
    status: "notok"
  },
  {
    id: 4,
    val: "4",
    kk: "gg",
    status: "medium"
  },
  {
    id: 5,
    val: "5",
    kk: "gg",
    status: "notok"
  },
  {
    id: 6,
    val: "6",
    kk: "gg",
    status: "ok"
  },
  {
    id: 7,
    val: "7",
    kk: "gg",
    status: "medium"
  },
  {
    id: 8,
    val: "7",
    kk: "gg",
    status: "notok"
  },
  {
    id: 9,
    val: "9",
    kk: "gg",
    status: "medium"
  }
];

<template>
  <div>
    <b>Vuejs dynamic routing</b>
    <div v-for="item in items" :key="item.id">
      <input type="checkbox" />
      <b>{{ item.id }}.</b> &nbsp;&nbsp;&nbsp;
      <router-link :to="{ name: 'UserWithID', params: { id: item.id, item } }">
        {{ item.val }}
      </router-link>
    </div>
  </div>
</template>

Component 2

<script>
import { data } from ".././datatwo";
export default {
  name: "HelloWorld",
  data() {
    return {
      selects: data,
    };
  },
};
</script>

**datatwo.js**

export const data = [
  {
    id: 1,
    val: "a",
    kk: "mm",
    status: "notok"
  },
  {
    id: 2,
    val: "b",
    kk: "aa",
    status: "ok"
  },
  {
    id: 3,
    val: "c",
    kk: "dd",
    status: "ok"
  },
  {
    id: 4,
    val: "d",
    kk: "gg",
    status: "medium"
  },
  {
    id: 5,
    val: "e",
    kk: "gg",
    status: "medium"
  },
  {
    id: 6,
    val: "f",
    kk: "gg",
    status: "ok"
  },
  {
    id: 7,
    val: "g",
    kk: "gg",
    status: "medium"
  },
  {
    id: 8,
    val: "h",
    kk: "gg",
    status: "notok"
  },
  {
    id: 9,
    val: "i",
    kk: "gg",
    status: "medium"
  }
];

<template>
  <div>
    <b>Vuejs dynamic routing2</b>
    <div v-for="select in selects" :key="select.id">
      <input type="checkbox" />
      <b>{{ select.id }}.</b> &nbsp;&nbsp;&nbsp;
      <router-link
        :to="{ name: 'UserWithIDTwo', params: { id: select.id, select } }"
      >
        {{ select.val }}
      </router-link>
    </div>
    <br /><br /><br />
  </div>
</template>

I have two components called component1, component2. Where in both components data is coming from individual .js called(data.js, datatwo.js)

So when user click on checkbox from componet1, I need to show the names which is in component2(datatwo.js) based on the status present in datatwo.js(component2)

for example like. in my case status is categorized into 3 types called. “ok”, “notok” “medium”. So when user click on checkbox from component1, i need to display name present in component2(dtatwo.js) and drawing lines like below. and when user uncheck checkbox it need to hide again.

code:- https://codesandbox.io/s/data-change-dynaic-t48f9?file=/src/datatwo.js