How to load a different component on Table row click in VueJS?

I want to load a component called Forms.vue to load upon clicking any table row. How can I make this possible?(Using CoreUI here)

I am using CoreUi Admin template here. I want a component called Forms.vue to load upon any row item clicked on this table.

Tables.vue:

<template>
  <div>
    <CRow>
      <CCol sm="12" @click ='displayData'>
        <CTableWrapper
          :items="getShuffledUsersData()"
          hover
          striped
          border
          small
          fixed
          caption="Sale Orders"
        />
      </CCol>
    </CRow>

    
  </div>
</template>

<script>
import CTableWrapper from './Table.vue'
import usersData from '../users/UsersData'

export default {
  name: 'Tables',
  components: { CTableWrapper },
  methods: {
    shuffleArray (array) {
      for (let i = array.length - 1; i > 0; i--) {
        let j = Math.floor(Math.random() * (i + 1))
        let temp = array[i]
        array[i] = array[j]
        array[j] = temp
      }
      return array
    },

    getShuffledUsersData () {
      return this.shuffleArray(usersData.slice(0))
    },
    // displayData(){
    //   window.location = "https://www.google.com";
    // }
  }
}
</script>