show & hide div on select in vue2

Question

I want to hide the entire chat panel upon selecting a user and it'll display the message panel instead. Upon clicking on the back arrow of the message panel header, I want to deselect the user & unhide the chat panel. I've tried using classes & visibility settings but not very sure how to toggle it like that.

Is there a way to do this?

Under template:

<template>
  <div>
    <div class="chat-panel">
      <div class="header">
        <div class="h-element" style="text-align: left">
          <fa-icon class="icon" :icon="['fas', 'arrow-left']" size="2x"/>
        </div>

        <div class="h-element">
          <h2 style="margin: 0">Messages</h2>
        </div>

        <div class="h-element" style="text-align: right">
          <fa-icon class="icon" :icon="['fas', 'ellipsis-vertical']" size="2x"/>
        </div>
      </div>

      <div class="chat-log">
        <user
          v-for="user in users"
          :key="user.userID"
          :user="user"
          :selected="selectedUser === user"
          @select="onSelectUser(user)"
        />
      </div>
    </div>

    <message-panel
      v-if="selectedUser"
      :user="selectedUser"
      @input="onMessage"
      class="right-panel"
    />
  </div>
</template>

Under script:

export default {
  components: { User, MessagePanel },
  data() {
    return {
      selectedUser: null,
      users: [],
    };
  },
  methods: {
    onMessage(content) {
      if (this.selectedUser) {
        socket.emit("private message", {
          content,
          to: this.selectedUser.userID,
        });
        this.selectedUser.messages.push({
          content,
          fromSelf: true,
        });
      }
    },
    onSelectUser(user) {
      this.selectedUser = user;
      user.hasNewMessages = false;
    },
  },

Under template of message panel:

<template>
  <div>
    <div class="header">
      <div class="h-element" style="text-align: left">
      <fa-icon class="icon" :icon="['fas', 'arrow-left']" size="2x"/>
      </div>

      <div class="h-element">
      <status-icon :connected="user.connected" />{{ user.username }}
      </div>

      <div class="h-element" style="text-align: right">
      <fa-icon class="icon" :icon="['fas', 'ellipsis-vertical']" size="2x"/>
      </div>
    </div>

    <div class="sub-header">
      <button class="location-button"> Set Meetup Location</button>
    </div>

    <div class="message-content">
      <ul class="messages">
        <li
          v-for="(message, index) in user.messages"
          :key="index"
          class="message"
          :class="message.fromSelf ? 'self-message' : ''"
        >
          <div v-if="displaySender(message, index)" class="sender">
            {{ message.fromSelf ? "(yourself)" : user.username }}
          </div>
          {{ message.content }}
        </li>
      </ul>
    </div>

    <form @submit.prevent="onSubmit" class="form">
      <textarea v-model="input" placeholder="Type your message here" class="input" />
      <button :disabled="!isValid" class="send-button">Send</button>
    </form>
  </div>
</template>

Thank you!