Onclick event for presearching a user at cometchat userlist

Question

Can someone teach me how to access CometChatUserListWithMessages from a button that redirects into my message page which I imported the cometchat. (The cometchat behaves like a widget inside my page.)

I tried the onClick event before which redirected me into Message page but cannot figure out a way to get inside cometchat’s userlist where it has the searchbar I want to prepopulate/presearch.

Here's my Card code: Here I have my Connect button which I want to redirect to my Message page.

<template>
  <div class="card-container">
    <v-card variant="outlined" elevation="12" style="border-radius: 20px">
      <v-row>
        <v-col class="ml-6 mt-6">
          <div class="card-header">
            <h3>{{ tutor.first_name }} {{ tutor.last_name }}</h3>
          </div>
        </v-col>
        <v-spacer></v-spacer>
        <a :href="'/messages?' + tutor.first_name + tutor.last_name">
          <v-btn class="button primary mt-5">Connect</v-btn>
        </a>
      </v-row>
      <div class="ml-6">
        <p class="card-body">Program: {{ tutor.program }}</p>
        <p class="card-body">Year: {{ tutor.year }}</p>
        <p class="card-body">Subject: {{ tutor.subject }}</p>
      </div>
    </v-card>
  </div>
</template>

<script>
    export default {
      name: "TutorCard",
      props: {
        tutor: {
          type: Object,
        },
      },
      methods: {
        connectWithTutor() {
          const query = { tutor: this.tutor.first_name + this.tutor.last_name };
          this.$router.push({ name: "messages", query });
        },
      },
    };
</script>

And here's my Message page: Here I have imported CometChat and cannot find a way to presearch CometChatUserList' searchbar with my Tutor name to find them and start a conversation. (Tutor name is the user's uID)

<template>
  <div :class="computedClass" style="width: 100%; height: 100vh">
    <CometChatUI />
  </div>
</template>

<script>
    import { CometChatUI } from "../../cometchat-pro-vue-ui-kit-master/CometChatWorkspace/src";
    export default {
      components: {
        CometChatUI,
      },
      computed: {
        computedClass() {
          if (this.isLargeScreen) {
            return "mt-n16";
          } else {
            return "";
          }
        },
        isLargeScreen() {
          return this.$vuetify.breakpoint.lgAndUp;
        },
      },
    };
</script>