How to filter common array field from different arrays in Vuejs?

HelloWorld.vue

<template>
  <div>
    <b>Vuejs dynamic routing</b>
    <div v-for="item in items" :key="item.did">
      <b>.</b>
      <router-link :to="{ name: 'UserWithID', params: { id: item.did } }">
        
      </router-link>
    </div>
    <br /><br /><br />
    <User />
  </div>
</template>

<script>
import User from "./User.vue";
import { datalist } from "./datalist";
export default {
  name: "HelloWorld",
  components: {
    User,
  },
  data() {
    return {
      items: [],
    };
  },
  mounted() {
    datalist().then((r) => {
      this.items = r.data;
    });
  },
  computed: {
    id() {
      return this.$route.params.id;
    },
  },
};
</script>

User.vue

<template>
  <div>
    <div v-for="(idbyval, key) in idbyvals" :key="key">
      
    </div>
  </div>
</template>

<script>
import { datalisttwo } from "./datalisttwo";
export default {
  name: "User",
  data() {
    return {
      lists: [],
    };
  },
  mounted() {
    if (this.$route.params.id)
      datalisttwo(this.$route.params.id).then((r) => {
        let obj = r.data;
        this.lists = [{ ...obj }];
      });
  },
  computed: {
    idbyvals: function () {
      return this.lists.filter((idbyval) => {
        return idbyval.did === this.$route.params.id;
      });
    },
  },
};
</script>

(having errors)Codesandbox for complete code- https://codesandbox.io/s/route-by-id-e365ss?file=/src/components/User.vue

Errors:-

[Vue warn]: Error in mounted hook: "TypeError: (0 , _datalist.datalist) is not a function" TypeError: (0 , _datalist.datalist) is not a function

Expected output:-

I have two arrays called datalist, datalisttwo array. Where in both i have common field called did so based on did i want to filter the array and want to display the data accordingly by id.

During this process, i am unable to display the data, from the array and getting errors as stated above.

from How to filter common array field from different arrays in Vuejs?