How to pass data from a component to another page?

Question

Vue.js

Learning Vue, making a test site. I have a list of components displayed on the page. By clicking on any, a transition to the page should be carried out on which, depending on which of them was clicked, information will be added.
It turns out something like this:

page code

<template>
  <div class="container">
    <div class="services">
      <h1 class="services__heading">Практики</h1>
      <ul class="services__items">
        <PracticeComponent
          v-for="item in practices.items" 
          :key="item.title"
          :practicesData="item"
        />
      </ul>
    </div>
  </div>
</template>

<script>
import PracticeComponent from "../components/PracticeComponent.vue"

export default {
  data() {
    return {
      practices: {
        items: [
          {title: 'Строительство/Девелопмент', path: '/practices', src: require('../assets/img/services/over.svg')},
          {title: 'Земельный консалтинг', path: '/practices', src: require('../assets/img/services/over.svg')},
          {title: 'Сделки и инвестиции', path: '/practices', src: require('../assets/img/services/over.svg')},
          {title: 'Судебные споры', path: '/practices', src: require('../assets/img/services/over.svg')},
          {title: 'Due diligence/Аналитика', path: '/practices', src: require('../assets/img/services/over.svg')},
          {title: 'Налоговый консалтинг', path: '/practices', src: require('../assets/img/services/over.svg')},
          {title: 'Банкротство', path: '/practices', src: require('../assets/img/services/over.svg')},
        ]
      },
    }
  },
      components: {
        PracticeComponent,
      },
}
</script>

component code

<template>
    <router-link
      class="services__item"
      :to="practicesData.path"
      :title="title"
    >
      <img 
        :src="practicesData.src" 
        :alt="practicesData.title"
        class="services__item_img"
      >
      <p class="services__item_title">{{practicesData.title}}</p>
    </router-link>
</template>

<script>
  export default {
    data() {
      return {
        title: this.practicesData.title
      }
    },
    props: {
      practicesData: {
        type: Object,
        default: function () {
          return {}
        }
      },
    },
    mounted () {
      console.log(this.title);
    },
  }
</script>

The second page is template, it will have to be filled with text on the topic that the user clicks on. Of course, you can rivet separate pages for each topic, but I would like to know if it is possible to do this dynamically somehow. I tried to pass an input parameter, but it didn't work.
Page code 2

<template>
  <div class="container">
    <div class="practices">
      <h2 class="practices__heading">Какое-нибудь хвалебное вступление!</h2>
      <p>Описание</p>
      <ul class="practices__items">
        <li class="practices__item">Разрешение споров в сфере строительства</li>
      </ul>
  </div>
  </div>
</template>

<script>
import practicItems from "../data/practicItems.js"
  export default {
    data() {
      return {
        practicItems: practicItems
      }
    },
    props: {
      title: {
        type: String,
        default: ''
      }
    }
  }
</script>