Vue.js data内の値をソートして表示非表示を切り替えたい

Question

前提・実現したいこと

xlsxファイルをvueのdataに取り込み、そこから選択されたタグのvalueとdata内のtags項目から同じ値を持つdataを取り出す

という機能を作っているのですが、エラーなく動作はするのですが値を持っているのにshowが切り替わらないという問題が発生しており、解決策が見つからない為質問させていただきます。

以下コードとdataになります。

該当のソースコード

		<section class="tag">
			<div @click="filterItem('OFFICE')">#OFFICE</div>
			<div @click="filterItem('HOTEL')">#HOTEL</div>
			<div @click="filterItem('CAFE')">#CAFE</div>
			<div @click="filterItem('SHOP')">#SHOP</div>
			<div @click="filterItem('LIVING')">#LIVING</div>
			<div @click="filterItem('DINING')">#DINING</div>
			<div @click="filterItem('BED_ROOM')">#BED_ROOM</div>
			<div @click="filterItem('ALL')">ALL</div>
		</section>
	</article>

	<article class="search">

		<section key="item-section">
			<transition-group name="item">
			<div v-for="item in itemData" @click="selectItem" v-show="item.show" :key="item.csv">
				<a :href="itemUrl">
					<img :src="'img/'+ item.path + '/' + item.csv + '_01.jpg'" alt="" :data-csv="item.csv" :data-tag="item.tags">
				</a>
			</div>
			</transition-group>
		</section>

	</article>

			filterItem: function(value) {
				for(let i in this.itemData) {
					let tagData = this.itemData[i];
					if(tagData.tags != undefined) {
						let replaceCell = tagData.tags.split('|');
						for(let n in replaceCell) {
							if(replaceCell[n] == value) {
								tagData.show = true;
							} else if (value == 'ALL') {
								tagData.show = true
							} else {
								tagData.show = false;
							} 
						}
					} else {
						break;
					}
				}
			}

"itemData": {
    {"path": "hoge", "csv": "foo" , "tags": "OFFICE",show: true},
    {"path": "hoge", "csv": "foo" , "tags": "SHOP",show: true},
    {"path": "hoge", "csv": "foo" , "tags": "CAFE|HOTEL",show: true},
    {"path": "hoge", "csv": "foo" , "tags": "BED_ROOM",show: true},
    {"path": "hoge", "csv": "foo" , "tags": "LIVING",show: true},
    {"path": "hoge", "csv": "foo" , "tags": "OFFICE",show: true},
    {"path": "hoge", "csv": "foo" , "tags": "DINING|CAFE",show: true},
    {"path": "hoge", "csv": "foo" , "tags": "LIVING|OFFICE",show: true}
}

試したこと

console.logでは同じ値を持つitemDataがすべて出力できているのでshowの切り替え部分に問題があると考えています。
.filterを使う方法も試しましたが、知識が足りず.splitで文字列を分解することができませんでした。

Answer 1

			filterItem: function(value) {
				for(let i in this.itemData) {
					let tagData = this.itemData[i];
					let replaceCell = tagData.tags.split('|');

					if(tagData.tags != undefined) {
						for(let n in replaceCell) {
							console.log(replaceCell[n]);
							if(replaceCell[n] == value) {
								this.$set(this.itemData[i], 'show', true);
								break;
							} else if (value == 'ALL') {
								this.$set(this.itemData[i], 'show', true);
								break;
							} else {
								this.$set(this.itemData[i], 'show', false);
							} 
						}
					}
				}
			}

データを検出し、showをtrueにした時点で次のループに進んでもらえるようにbreakを記入したところ解決しました。