vue データ削除時にビューの変更が行われず困っております。

Question

現在vueのデータを削除する機能を実装しており、機能の実装自体はできているのですが1度リロードを挟まなければビューが変わらない様になっています。

TextBox.vue

〜(省略)
<template v-slot:selection="{ attrs, item, parent, selected }">
  <v-chip
        v-if="item === Object(item)"
        v-bind="attrs"
        :input-value="selected"
        label
        small
        color="tagcolor"
  >
  <span class="pr-2 tagcolor">{{ item.text }}</span>
    <v-icon small @click="parent.selectItem(item);close(item);">mdi-close</v-icon>
  </v-chip>
</template>

〜(省略)
// tagの削除機能
async tagDelete(item) {
　　item = JSON.parse(JSON.stringify(item));
　　const tagData = await dbTags.where('text', '==', item.text).where('time', '==', item.time).where('uid', '==', item.uid).get();
　　tagData.docs.map(async Element => {
　　　　await dbTags.doc(Element.id).delete();
　　　　return Element.id;
　　});
　　// this.edit(item);
},

Answer 1

vueでは特定のメソッドを使って更新しないと検知してくれないからかなと思いました。
まずは公式ドキュメントのこちらを読むことをお勧めします。
https://jp.vuejs.org/2016/02/06/common-gotchas/

Comments

[riki01]

yamotukiさん

ご回答ありがとうございます！
すみません、記述不足でした。
私の方でも調べ、こちら(https://jp.vuejs.org/v2/guide/components-edge-cases.html#%E5%BC%B7%E5%88%B6%E6%9B%B4%E6%96%B0)を参考にしたりしたのですが、$forceUpdateの使い方などがドキュメントやキータなどでは少し分からず質問した次第です。