How to correctly extract a single record through Vue JS by id?

Question

Vue.js

Hello
--
Background:
I'm learning Vue JS and saw a lot of possibilities in this framework. The documentation has basic things that are procrastinating on YouTube, and nothing new. If I try to find something more advanced, then the training is paid, and it’s not a fact that there is something useful and new that is not shown in the public domain. There are books that recommend in order to become a professional in Vue JS technologies, who read, write your review.
https://leanpub.com/vuejs2-russian
https://www.piter.com/collection/all/product/vuejs...
Development on Vue JS, I use for myself and for experience, that is, I do not do this for someone else, but for yourself.
Question:
There is a view:

<div id="apps">
<button>Входящие {{ mail.length }}</button>
    <table class="table table-hover">
      <tr class="font-weight-bold cp" v-for="key in mail" :id="key.id" @click="$emit('show', key.id)">
        <td>{{ key.id }}</td>
        <td>{{ key.text }}</td>
        <td>{{ key.date }}</td>
      </tr>
    </table>
</div>

To interact with the html, I turn to Vue JS:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
    var app = new Vue({
      el: '#apps',
      data: {
      selected: null,
      mail: [
        {id: 1, text: 'Изучить этот JavaScript', date: '22.09.2018 в 11:00'},
        {id: 2, text: 'Изучить Vue', date: '22.10.2019 в 12:02'},
        {id: 3, text: 'Создать что-нибудь классное', date: '15.11.2019 в 11:22'},
        {id: 4, text: 'Новое сообщение от Эмили', date: '22.12.2019 в 21:07'}
      ],
      },
      components: {
      'mail': {
        template: '#mail',
        props: [ 'id' ],
      },
      },
      methods: {

      }
    })
  </script>

The task is actually simple, get the id, and display a specific entry:

<template id="mail">
  <div class="block">
    <button @click="$emit('show', id)">Назад</button>
    <div v-for="i in id">
  {{ i.id }} {{ i.text }} {{ i.date }} 
    </div>
  </div>
</template>

Maybe I misunderstood the documentation, because I can’t get a separate record from a json file, it doesn’t work.
What am I doing wrong? What's my mistake?
Result:

Answer 1

We put the data in vuex, we hang the components of the list of messages and a separate message on different routes. The latter will take an id as a parameter and pass it to the component. In the component itself, we add a calculated property - the required object is retrieved from the storage by id. For example .