Как из компонента передать данные на другую страницу?

Question

Егор Андреев @poroshok_uhodi

Vue.js

Как из компонента передать данные на другую страницу?

Изучаю Vue, делаю пробный сайт. У меня на странице отображается список компонентов. По клику на любой должен осуществляться переход на страницу на которой с зависимости от того по какому из них был клик будет добавляться информация.
Получается примерно такая картина:

код страницы

<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>

код компонента

<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>

Вторая страница шаблонная, она должна будет заполниться текстом по той тематике на которую нажмёт пользователь. конечно можно наклепать отдельные страницы для каждой темы, но я хотел бы узнать, можно ли как то динамически это сделать. Я пытался передать входной параметр, но не получилось.
Код страницы 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>