Vue.js Как передать данные из компонента?

Имеется одностраничник с мини-блогом (посты генерируются динамически), хочу сделать редактирование постов через модальное окно. Передаю в компонент объект с данными. Подскажите, пожалуйста, как из компонента (модальное окно) вернуть измененные в input`ах данные в приложение и реактивно их подгрузить?

Ссылка на пример

<editmodal :post="post"></editmodal>
    <hr>
    <div class="row card-columns">
       <div class="col-4 card mb-3 d-flex" v-for="(post, index) in posts"
                                            :key="index"
                                            :post="post"
                                            :index="index">
         <img src="http://placehold.it/300x150" class="card-img-top">
         <div class="card-body">
           <h3 class="card-title">{{ post.title }}</h3>
           <p class="card-text">{{ post.shortText }}</p>
           <div class="btn-group" role="group" aria-label="btn">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#readPost" v-on:click="readPost(post)">Read More</button>
            <button type="button" class="btn btn-success" data-toggle="modal" data-target="#editPost" v-on:click="editPost(post, index)">Edit</button>
            <button type="button" class="btn btn-danger" v-on:click="deletePost(post)">Delete</button>
          </div>
         </div>
           <div class="card-footer">
            <small class="text-muted">0 comment</small>
           </div>
       </div>
    </div>

Vue.component('editmodal', {
    props: ["post"],
    template: `<div class="modal fade" id="editPost" tabindex="-1" role="dialog" aria-labelledby="editPostTitle" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="editPostTitle">Edit post</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
            <div class="modal-body">
              <form>
                <div class="form-group">
                  <label for="title" class="col-form-label">Title:</label>
                  <input type="text" class="form-control" id="title" spellcheck="true" v-model="post.title">
                <div class="form-group">
                  <label for="shortText" class="col-form-label">Short Text:</label>
                  <input type="text" class="form-control" id="shortText" spellcheck="true" v-model="post.shortText">
                </div>
                <div class="form-group">
                  <label for="fullText" class="col-form-label">Full Text:</label>
                  <textarea class="form-control" id="fullText" spellcheck="true" v-model="post.fullText"></textarea>
                </div>
              </form>
            </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="saveEdit(post)">Save changes</button>
          </div>
        </div>
      </div>
    </div>`,
  methods: {
    saveEdit: function (post) {
       this.post = {
          'id': post.id,
          'title': post.title,
          'shortText': post.shortText,
          'fullText': post.fullText
        }
    },
  },
});
new Vue({
  el: '#app',
  data () {
    return {
      header: 'Blog App',
      post: {},
      newPost: {},
      readingPost: {},
      posts: [ 
        { 
          id: 1,
          title: 'Title 1',
          shortText: 'some short-text 1',
          fullText: 'some full-text 1'
        { 
          id: 2,
          title: 'Title 2',
          shortText: 'some short-text 2',
          fullText: 'some full-text 2' },
        { 
          id: 3,
          title: 'Title 3',
          shortText: 'some short-text 3',
          fullText: 'some full-text 3' },
        { 
          id: 4,
          title: 'Title 4',
          shortText: 'some short-text 4',
          fullText: 'some full-text 4' },
        ]
      }
    },
    methods: {
      editPost: function (post, index) {
        this.post = {
          'id': post.id,
          'title': post.title,
          'shortText': post.shortText,
          'fullText': post.fullText
        }
       },
      saveEdit: function(post) {
        this.post = post;
        return post;
        console.log(post)
      },
    }
});