JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>

<div id="app">
  
  <button @click="prevSlide">Назад</button>
  
  <div class="lol" v-for="(item, index) in items" v-if="itemsActive[index].active">
    <h1>{{ item.title }}</h1>
    <component :is="item.content" @switch="nexSlide" :category="showCategory"></component>
  </div>

</div>

SASS

body
	background-color: #0C0C0C
.lol
	width: 900px
	min-height: 400px
	margin: 20px auto
	text-align: center
	border: 3px solid #7CA95C
	position: relative
	h1
		margin: 0
		padding: 20px 0
		color: #ccc
		border-bottom: 1px solid #7CA95C

.html_content
	color: #fff
	margin-top: 50px	

.choose_service_text
	text-align: left
	box-sizing: border-box
	width: 460px
	margin: 0 auto
	margin-top: 20px
	padding: 15px
	color: #fff
	border-bottom: 1px solid #7CA95C
	cursor: pointer
	transition: all .25s ease
	&:last-child
		margin-bottom: 20px
	&:hover
		background-color: #7CA95C
	h4
		margin: 0
.start
	list-style-type: none
	position: absolute
	left: 50%
	top: 50%
	transform: translate(-50%, -50%)
	display: flex
	li
		margin-right: 35px
		button
			background: none
			border: none
			outline: none
			cursor: pointer
			color: #aaa
			font-size: 20px
			padding-bottom: 6px
			border-bottom: 1px solid #7CA95C
			transition: all .25s ease
			&:hover
				color: #fff
				border-bottom: 1px solid transparent

JavaScript

Vue.component('AppStart', {
  template: 
  `<ul class="start">
		<li v-for="item in items">
      <button @click="$emit('switch', {name: 'questions', category: item.showCategory} )">{{ item.name }}</button>
    </li>
	</ul>`,
  data: function() {
    return {
      items: [
        {
          name: 'Молодые',
          showCategory: 'young'
        },
        {
          name: 'Зрелые',
          showCategory: 'mature'
        },
        {
          name: 'Старые',
          showCategory: 'pensioners'
        }
      ]
    }
  }
});

Vue.component('AppQuestions', {
  props: [
    'category'
  ],
  template: 
  `<div>
		<div class="choose_service_text" v-for="item in this[category]">
			<h4>{{ item.title }}</h4>
			<p>{{ item.text }}</p>
		</div>
	</div>`,
  data: function() {
    return {
      young: [
        {
          title: 'Сберегательный счет + Почта Банк онлайн',
          text: 'Здравствуйте, а Вы знаете, как можно снимать деньги с карты, даже если Вы забыли ее дома?'
        },
        {
          title: 'Сберегательный счет + Пакет онлайн покупателя',
          text: 'Здравствуйте, а Вы знаете, как покупать в больших интернет- магазинах по цене маленьких?'
        }
      ],
      mature: [
        {
          title: 'Сберегательный счет + Почта Банк онлайн',
          text: 'Здравствуйте, а Вы знаете, как можно снимать деньги с карты, даже если Вы забыли ее дома?'
        }
      ],
      pensioners: [
        {
          title: 'Пятерочка',
          text: 'lorem lorem lorem lorem lorem'
        }
      ]
    }
  }
});

new Vue({
  el: '#app',
  data: {
    items: [
      {
        name: 'start',
        title: 'Выберите возраст клиента:',
        content: 'AppStart'
      },
      {
        name: 'questions',
        title: 'Выберите фразу зацепку?',
        content: 'AppQuestions'
      }
    ],
    itemsActive: [],
    takeIndexPrev: [],
    showCategory: ''
  },
  created: function() {
    for(let i = 0; i < this.items.length; i++) {
     ...