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

前提・実現したいこと

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

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

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

該当のソースコード

html
1		<section class="tag">
2			<div @click="filterItem('OFFICE')">#OFFICE</div>
3			<div @click="filterItem('HOTEL')">#HOTEL</div>
4			<div @click="filterItem('CAFE')">#CAFE</div>
5			<div @click="filterItem('SHOP')">#SHOP</div>
6			<div @click="filterItem('LIVING')">#LIVING</div>
7			<div @click="filterItem('DINING')">#DINING</div>
8			<div @click="filterItem('BED_ROOM')">#BED_ROOM</div>
9			<div @click="filterItem('ALL')">ALL</div>
10		</section>
11	</article>
12
13	<article class="search">
14
15		<section key="item-section">
16			<transition-group name="item">
17			<div v-for="item in itemData" @click="selectItem" v-show="item.show" :key="item.csv">
18				<a :href="itemUrl">
19					<img :src="'img/'+ item.path + '/' + item.csv + '_01.jpg'" alt="" :data-csv="item.csv" :data-tag="item.tags">
20				</a>
21			</div>
22			</transition-group>
23		</section>
24
25	</article>
26

javascript
1			filterItem: function(value) {
2				for(let i in this.itemData) {
3					let tagData = this.itemData[i];
4					if(tagData.tags != undefined) {
5						let replaceCell = tagData.tags.split('|');
6						for(let n in replaceCell) {
7							if(replaceCell[n] == value) {
8								tagData.show = true;
9							} else if (value == 'ALL') {
10								tagData.show = true
11							} else {
12								tagData.show = false;
13							} 
14						}
15					} else {
16						break;
17					}
18				}
19			}
20

data
1
2"itemData": {
3    {"path": "hoge", "csv": "foo" , "tags": "OFFICE",show: true},
4    {"path": "hoge", "csv": "foo" , "tags": "SHOP",show: true},
5    {"path": "hoge", "csv": "foo" , "tags": "CAFE|HOTEL",show: true},
6    {"path": "hoge", "csv": "foo" , "tags": "BED_ROOM",show: true},
7    {"path": "hoge", "csv": "foo" , "tags": "LIVING",show: true},
8    {"path": "hoge", "csv": "foo" , "tags": "OFFICE",show: true},
9    {"path": "hoge", "csv": "foo" , "tags": "DINING|CAFE",show: true},
10    {"path": "hoge", "csv": "foo" , "tags": "LIVING|OFFICE",show: true}
11}

試したこと

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

行動規範の内容に同意します

回答1件

自己解決

JavaScript
1			filterItem: function(value) {
2				for(let i in this.itemData) {
3					let tagData = this.itemData[i];
4					let replaceCell = tagData.tags.split('|');
5
6					if(tagData.tags != undefined) {
7						for(let n in replaceCell) {
8							console.log(replaceCell[n]);
9							if(replaceCell[n] == value) {
10								this.$set(this.itemData[i], 'show', true);
11								break;
12							} else if (value == 'ALL') {
13								this.$set(this.itemData[i], 'show', true);
14								break;
15							} else {
16								this.$set(this.itemData[i], 'show', false);
17							} 
18						}
19					}
20				}
21			}