title: UI is not updating after data change in vue
body: <p>When I have used the array directly (without making it part of the object) then it's working fine as expected,
  below is the code,</p>
  
  <pre><code>&lt;span class="tagSpan" v-else-if="row.label == 'Tags'"&gt;
      &lt;span v-if="aTags.length" v-for="(tag, tagIndex) in aTags" class="input-tag tagSpan"&gt;{{tag}}                                           
          &lt;span class="close-x" @click="aTags.splice(tagIndex, 1)"&gt;❌&lt;/span&gt;
      &lt;/span&gt;
      &lt;input  v-on:keyup.186="onTagAdd(rowIndex)" type="text" class="form-control form-control-sm col-3" :disabled="!row.editable" v-model="row.value" &gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>Now I optimized the code and made aTags is an item of oDyData object and changed the code as below</p>
  
  <pre><code>&lt;span class="tagSpan" v-else-if="row.label == 'Tags'"&gt;
      &lt;span v-if="oDyData.aTags &amp;&amp; oDyData.aTags.length" v-for="(tag, tagIndex) in oDyData.aTags" class="input-tag tagSpan"&gt;{{tag}}                                           
          &lt;span class="close-x" @click="oDyData.aTags.splice(tagIndex, 1)"&gt;❌&lt;/span&gt;
      &lt;/span&gt;
      &lt;input  v-on:keyup.186="onTagAdd(rowIndex)" type="text" class="form-control form-control-sm col-3" :disabled="!row.editable" v-model="row.value" &gt;
  &lt;/span&gt;
  </code></pre>
  
  <p><strong>My function for removing tag '@click="aTags.splice(tagIndex, 1)' is not working as before</strong>, It removes the item from the array of the object but UI is not getting updating, I have also cross-checked in vue development components and the array is getting updated but UI is not getting rerendered (updating) until any other change in UI (It got changes if I enter something in input or click somewhere). Below is the screenshot for the same.
  <a href="https://i.stack.imgur.com/xyZfm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xyZfm.png" alt="Tag UI"></a></p>
  
  <p>How to solve this?</p>