title: how to manage vue reactivity?
body: <p>I need to update a component after getting data from the data base.
  but i get an error message. i have tried v-if and v-show and i had the same result. </p>
  
  <p>the componenet that i want to update is a <a href="https://bootstrap-vue.js.org/docs/components/modal" rel="nofollow noreferrer">modal</a></p>
  
  <pre><code>&lt;div&gt;
    &lt;b-modal id="modal-xl"
             ok-title="next"
             :size="modalSize"
             @ok.prevent="launchContentModal"
             @cancel="resetPostModal"
             hide-header-close
             no-close-on-backdrop&gt;
                &lt;add-post :postTitle="postTitle" 
                          :postTopic="postTopic" 
                          :postType="postType"&gt;
                &lt;/add-post&gt;
                &lt;add-content v-show="post.id" 
                             :postType="postType"&gt;
                &lt;/add-content&gt;
                &lt;ArticlesEditor v-show=" post.id &amp;&amp; post.postType.id"&gt; 
                &lt;/ArticlesEditor&gt;
      &lt;/b-modal&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and data object is :</p>
  
  <pre><code>        data(){
              return {
                  postTitle:'',
                  topic:'',
                  postTopic:[],
                  postType: {title: 'video',id:1},
                  user:{},
                  post:{
                      id:'',
                      postTopic:[],
                      postType:{
                          title:'',
                          id:'',
                      },
                  },
  
              }
  
  </code></pre>
  
  <p>the request method  is :</p>
  
  <pre><code>launchContentModal(){
      if(!this.postTitle) this.$root.$emit('noTitleProvided');
      else if(!this.postTopic[0]) this.$root.$emit('noTopicProvided');
      else {
        this.post = { title: this.postTitle, topics:this.postTopic, type: this.postType};
        ResourceCenter.save(this.department, this.user, this.post)
        .catch(({response}) =&gt;alert(response.data))
        .then(({data}) =&gt; {
             this.post = data;
         });
      }
  },
  </code></pre>
  
  <p>after sending  save request ,i get the response correctly,
  this is the response object:</p>
  
  <pre><code>{"title":"sdf","client_id":"12","department_id":"327","type":"ebook","type_id":2,"user_id":668,"updated_at":"2019-05-08 09:15:44","created_at":"2019-05-08 09:15:44","id":59} ```
  </code></pre>
  
  <p>and post object after getting the response updates correctly:</p>
  
  <pre><code>post:{"title":"sdf","client_id":"12","department_id":"327","type":"ebook","type_id":2,"user_id":668,"updated_at":"2019-05-08 09:15:44","created_at":"2019-05-08 09:15:44","id":59}
  </code></pre>
  
  <p>the expected result : modal should be updated and add-content compoenet should be showed.</p>
  
  <p>the error message is :
  [Vue warn]: Error in render: "TypeError: Cannot read property 'id' of undefined"</p>
  
  <p>i hope the explanation was clear</p>