title: VueJS 2: Child does not update on parent change (props)
body: <p>When I update the parent's <code>singleIssue</code> variable, it does not get updated inside my <code>&lt;issue&gt;</code> component. I am passing it there using <code>props</code>. I have achieved this in other projects already, but I can't seem to get what I am doing wrong.</p>
  
  <p>I have reduced my code  to the relevant parts, so it is easier to understand.</p>
  
  <h3><code>IssueIndex.vue</code>:</h3>
  
  <pre><code>&lt;template&gt;
      &lt;div class="issue-overview"&gt;
          &lt;issue v-if="singleIssue" :issue="singleIssue"&gt;&lt;/issue&gt;
  
          &lt;v-server-table url="api/v1/issues" :columns="columns" :options="options" ref="issuesTable"&gt;
              &lt;span slot="name" slot-scope="props"&gt;{{props.row.name}}&lt;/span&gt;
  
              &lt;div slot="options" slot-scope="props" class="btn-group" role="group" aria-label="Order Controls"&gt;
                  &lt;b-btn class="btn-success" v-b-modal.issueModal v- 
  on:click="showIssue(props.row)"&gt;Show&lt;/b-btn&gt;
              &lt;/div&gt;
          &lt;/v-server-table&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          mounted() {
              let app = this;
  
              axios.get('api/v1/issues/')
                  .then(response =&gt; {
                      app.issues = response.data;
                  })
                  .catch(e =&gt; {
                      app.errors.push(e);
                  }); 
          },
          data: () =&gt; {
              return {
                  issues: [],
                  singleIssue: undefined,
                  columns: ['name', 'creation_date', 'options'],
                  options: {
                      filterByColumn: true,
                      filterable: ['name', 'creation_date'],
                      sortable: ['name', 'creation_date'],
                      dateColumns: ['creation_date'],
                      toMomentFormat: 'YYYY-MM-DD HH:mm:ss',
                      orderBy: {
                          column: 'name',
                          ascending: true
                      },
                      initFilters: {
                          active: true,
                      }
                  }
              }
          },
          methods: {
              showIssue(issue) {
                  let app = this;
  
                  app.singleIssue = issue;
  
                  // This gets the action history of the card
                  axios.get('api/v1/issues/getCardAction/' + issue.id)
                      .then(response =&gt; {
                          app.singleIssue.actions = response.data;
                      })
                      .catch(error =&gt; {
                          // alert
                      });
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <h3><code>Issue.vue</code>:</h3>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          {{ issue }}
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          props: ['issue']
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>So after <code>showIssue()</code> is triggered, it will get actions for the issue. But after then, I can't see the actions in the issue component. </p>
  
  <p>If I update the <code>issue</code>-model in the issue component using form inputs, it will also start showing the actions. So I assume it's just in a weird state where it needs a refresh.</p>
  
  <p>Thanks in advance!</p>