VueJs How to make dropdown component to accept different types of props

I want to create a dynamic dropdown component where the amount of dropdowns and their options would be dynamic based on the props provided.

I would like to call the dropdown component and pass an object with the names of individual selects. I want the number of select to be determined by the names provided. selectNameUsers: { users: "Users", roles: "Roles" } - this should create two dropdowns with the name of users and roles. - THIS HAS BEEN DONE.

Now my question/issue. How can I pass the data for the options. My attempt kinda works but the data provided is:

a) duplicated across multiple selects

b) I had to hard code the v-for= for the data provided so the component is not truly dynamic.

Any ideas?

Code: https://codesandbox.io/s/adoring-lewin-2pqlq?file=/src/components/parent.vue:0-1245

App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <parent />
</template>

<script>
import parent from "./components/parent.vue";
export default {
  name: "App",
  components: {
    parent: parent,
  },
};
</script>

parent.vue

<template>
  <div class="first">
    <custom-dropdown
      title="Users Manager"
      instructions="Assign Role to User"
      :selectName="selectNameUsers"
      :users="users"
      :roles="roles"
    >
    </custom-dropdown>
  </div>
  <div class="second">
    <custom-dropdown
      title="Cars Manager"
      instructions="Look at cars"
      :selectName="selectNameCars"
      :cars="cars"
    >
    </custom-dropdown>
  </div>
</template>

<script>
import customDropdown from "./customDropdown.vue";
export default {
  components: { customDropdown },
  data() {
    return {
      selectNameUsers: { users: "Users", roles: "Roles" },
      selectNameCars: { cars: "Cars" },
      users: [
        { uid: 1, name: "Ade", role: "standard" },
        { uid: 2, name: "Bab", role: "admin" },
        { uid: 3, name: "Cad", role: "super_admin" },
      ],
      roles: [
        { rid: 1, name: "standard" },
        { rid: 2, name: "admin" },
        { rid: 3, name: "super_admin" },
      ],

      cars: [
        { cid: 1, type: "Audi", colour: "Red" },
        { cid: 2, type: "BMW", colour: "Black" },
      ],
    };
  },
};
</script>

customDropdown

<template>
  <div>
    <h1>{{ title }}</h1>
    <select
      v-for="(objectvalue, keyName, index) in selectName"
      :key="index"
      :name="keyName"
    >
      <option v-for="user in users" :key="user.uid" :value="user.uid">
        {{ user.name }}
      </option>
      <option v-for="role in roles" :key="role.rid" :value="role.uid">
        {{ role.name }}
      </option>
    </select>
    <h2>{{ instructions }}</h2>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
    },
    instructions: {
      type: String,
    },
    selectName: {
      type: Object,
    },
    users: {
      type: Object,
    },
    roles: {
      type: Object,
    },
  },
  data() {
    return {};
  },
};
</script>